/* ════════════════════════════════════════════════════════════════ Temas de color — se aplican con ════════════════════════════════════════════════════════════════ */ :root, [data-theme="navy"]{ --bg-display:radial-gradient(circle at 50% 30%,#23335c 0%,#16213e 55%,#0c1326 100%); --bg-auth:radial-gradient(circle at 50% 0%,#23335c,#16213e 60%,#0c1326); --bg-panel:linear-gradient(180deg,#11192f,#0c1326); --text:#eaf0fb; --muted:#9fb0cc; --accent:#1d4e89; --accent-2:#2f6db3; --num-grad-a:#ffffff; --num-grad-b:#9cc4ff; --title-grad-a:#7fb3ff; --title-grad-b:#ffffff; --label:#cfe0ff; --num-glow:rgba(80,140,255,.25); --card-bg:rgba(20,30,56,.85); --card-border:rgba(255,255,255,.08); --input-bg:#0f1830; --input-border:rgba(255,255,255,.14); --input-text:#ffffff; --topbar-bg:rgba(20,30,56,.7); --topbar-border:rgba(255,255,255,.08); --nav-link:#bcd0f5; --nav-link-hover:#ffffff; --ghost-bg:rgba(255,255,255,.08); --ghost-border:rgba(255,255,255,.16); --ghost-bg-hover:rgba(255,255,255,.18); --fs-bg:rgba(255,255,255,.08); --fs-border:rgba(255,255,255,.18); --fs-color:#ffffff; --ok:#2ecc71; --err:#ff6b6b; --label-text:#cdd9f0; --logo-card:rgba(255,255,255,.92); --preview-empty:rgba(255,255,255,.06); --preview-empty-border:rgba(255,255,255,.25); } [data-theme="light"]{ --bg-display:radial-gradient(circle at 50% 30%,#ffffff 0%,#eef3fa 55%,#d9e4f5 100%); --bg-auth:radial-gradient(circle at 50% 0%,#ffffff,#eef3fa 60%,#dde7f5); --bg-panel:linear-gradient(180deg,#f6f8fc,#e8eef8); --text:#16213e; --muted:#5a6b8c; --accent:#1d4e89; --accent-2:#2f6db3; --num-grad-a:#1d4e89; --num-grad-b:#16213e; --title-grad-a:#1d4e89; --title-grad-b:#2f6db3; --label:#1d4e89; --num-glow:rgba(29,78,137,.18); --card-bg:#ffffff; --card-border:#d8e2f0; --input-bg:#f4f7fc; --input-border:#c5d3e8; --input-text:#16213e; --topbar-bg:rgba(255,255,255,.85); --topbar-border:#d8e2f0; --nav-link:#3a4f75; --nav-link-hover:#16213e; --ghost-bg:#eef2f9; --ghost-border:#c5d3e8; --ghost-bg-hover:#dfe7f3; --fs-bg:rgba(22,33,62,.08); --fs-border:rgba(22,33,62,.2); --fs-color:#16213e; --ok:#178a4c; --err:#c0392b; --label-text:#3a4f75; --logo-card:#ffffff; --preview-empty:#f0f4fa; --preview-empty-border:#b9c8e0; } [data-theme="emerald"]{ --bg-display:radial-gradient(circle at 50% 30%,#1c4438 0%,#0e2520 55%,#071512 100%); --bg-auth:radial-gradient(circle at 50% 0%,#1c4438,#0e2520 60%,#071512); --bg-panel:linear-gradient(180deg,#10291f,#071512); --text:#e8faf2; --muted:#8fbcab; --accent:#157a55; --accent-2:#1d9e70; --num-grad-a:#ffffff; --num-grad-b:#7df0c0; --title-grad-a:#5fe3b0; --title-grad-b:#ffffff; --label:#c4f3df; --num-glow:rgba(60,220,160,.22); --card-bg:rgba(14,40,32,.85); --card-border:rgba(255,255,255,.08); --input-bg:#0a1f19; --input-border:rgba(255,255,255,.14); --input-text:#ffffff; --topbar-bg:rgba(14,40,32,.7); --topbar-border:rgba(255,255,255,.08); --nav-link:#a9dcc6; --nav-link-hover:#ffffff; --ghost-bg:rgba(255,255,255,.08); --ghost-border:rgba(255,255,255,.16); --ghost-bg-hover:rgba(255,255,255,.18); --fs-bg:rgba(255,255,255,.08); --fs-border:rgba(255,255,255,.18); --fs-color:#ffffff; --ok:#2ecc71; --err:#ff6b6b; --label-text:#c4e8d8; --logo-card:rgba(255,255,255,.92); --preview-empty:rgba(255,255,255,.06); --preview-empty-border:rgba(255,255,255,.25); } [data-theme="wine"]{ --bg-display:radial-gradient(circle at 50% 30%,#54243a 0%,#2a1019 55%,#170a0f 100%); --bg-auth:radial-gradient(circle at 50% 0%,#54243a,#2a1019 60%,#170a0f); --bg-panel:linear-gradient(180deg,#311420,#170a0f); --text:#fdeef3; --muted:#c79aaa; --accent:#8e2f50; --accent-2:#b03e67; --num-grad-a:#ffffff; --num-grad-b:#ffb3c8; --title-grad-a:#ff9fb4; --title-grad-b:#ffffff; --label:#ffd6e0; --num-glow:rgba(255,140,170,.22); --card-bg:rgba(46,18,28,.85); --card-border:rgba(255,255,255,.08); --input-bg:#220d15; --input-border:rgba(255,255,255,.14); --input-text:#ffffff; --topbar-bg:rgba(46,18,28,.7); --topbar-border:rgba(255,255,255,.08); --nav-link:#eebccb; --nav-link-hover:#ffffff; --ghost-bg:rgba(255,255,255,.08); --ghost-border:rgba(255,255,255,.16); --ghost-bg-hover:rgba(255,255,255,.18); --fs-bg:rgba(255,255,255,.08); --fs-border:rgba(255,255,255,.18); --fs-color:#ffffff; --ok:#2ecc71; --err:#ff8a8a; --label-text:#f3cfdb; --logo-card:rgba(255,255,255,.92); --preview-empty:rgba(255,255,255,.06); --preview-empty-border:rgba(255,255,255,.25); } [data-theme="midnight"]{ --bg-display:radial-gradient(circle at 50% 30%,#1a1c26 0%,#0a0a0f 55%,#000000 100%); --bg-auth:radial-gradient(circle at 50% 0%,#1a1c26,#0a0a0f 60%,#000000); --bg-panel:linear-gradient(180deg,#121319,#000000); --text:#eef1f8; --muted:#8e95a8; --accent:#2c5dbb; --accent-2:#3f78e0; --num-grad-a:#ffffff; --num-grad-b:#8ab4ff; --title-grad-a:#8ab4ff; --title-grad-b:#ffffff; --label:#c9d8f7; --num-glow:rgba(110,160,255,.25); --card-bg:rgba(18,20,28,.9); --card-border:rgba(255,255,255,.08); --input-bg:#0c0e14; --input-border:rgba(255,255,255,.14); --input-text:#ffffff; --topbar-bg:rgba(18,20,28,.75); --topbar-border:rgba(255,255,255,.08); --nav-link:#b9c6e4; --nav-link-hover:#ffffff; --ghost-bg:rgba(255,255,255,.08); --ghost-border:rgba(255,255,255,.16); --ghost-bg-hover:rgba(255,255,255,.18); --fs-bg:rgba(255,255,255,.08); --fs-border:rgba(255,255,255,.18); --fs-color:#ffffff; --ok:#2ecc71; --err:#ff6b6b; --label-text:#ccd6ec; --logo-card:rgba(255,255,255,.92); --preview-empty:rgba(255,255,255,.06); --preview-empty-border:rgba(255,255,255,.25); } /* ════════════════════════════════════════════════════════════════ Base ════════════════════════════════════════════════════════════════ */ :root{ --radius:16px; --font:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{font-family:var(--font);color:var(--text);transition:background .4s,color .4s} /* ───────────────── Pantalla pública ───────────────── */ body.display{background:var(--bg-display);overflow:hidden} .display-stage{ height:100vh; display:flex;flex-direction:column; align-items:center;justify-content:center; text-align:center;padding:3vh 4vw;gap:3vh; } .display-head{display:flex;align-items:center;gap:2.5vw;justify-content:center} .display-logo{height:14vh;max-height:140px;max-width:22vw;object-fit:contain; filter:drop-shadow(0 4px 18px rgba(0,0,0,.25))} .display-logo.sponsor{background:var(--logo-card);border-radius:14px;padding:1vh} .hidden{display:none !important} .display-school{ font-size:clamp(14px,2.2vw,30px);letter-spacing:.18em; text-transform:uppercase;color:var(--muted);font-weight:600; } .display-event{ font-size:clamp(26px,4.6vw,72px);font-weight:800;line-height:1.05; background:linear-gradient(90deg,var(--title-grad-a),var(--title-grad-b)); -webkit-background-clip:text;background-clip:text;color:transparent; } .counter-block{margin:1vh 0} .counter-number{ font-size:clamp(110px,32vw,460px);font-weight:900;line-height:.9; letter-spacing:-.02em; background:linear-gradient(180deg,var(--num-grad-a) 0%,var(--num-grad-b) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 0 60px var(--num-glow); } .counter-label{ font-size:clamp(18px,3.4vw,52px);font-weight:700;letter-spacing:.32em; text-transform:uppercase;color:var(--label);margin-top:1.5vh; } .display-foot{ font-style:italic;font-size:clamp(13px,1.8vw,24px);color:var(--muted); letter-spacing:.1em; } .fs-btn{ position:fixed;top:18px;right:18px;z-index:5; background:var(--fs-bg);color:var(--fs-color);border:1px solid var(--fs-border); width:46px;height:46px;border-radius:12px;font-size:20px;cursor:pointer; transition:background .2s; } .fs-btn:hover{filter:brightness(1.2)} .pulse{animation:pulse .6s ease} @keyframes pulse{ 0%{transform:scale(1)} 35%{transform:scale(1.06);filter:brightness(1.25)} 100%{transform:scale(1)} } /* ───────────────── Login ───────────────── */ body.auth{ background:var(--bg-auth); display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px; } .card{ width:100%;max-width:380px; background:var(--card-bg);border:1px solid var(--card-border); border-radius:var(--radius);padding:34px 30px; display:flex;flex-direction:column;gap:14px; box-shadow:0 24px 60px rgba(0,0,0,.25); } .card-logo{height:84px;align-self:center;margin-bottom:6px;object-fit:contain} .card-title{font-size:22px;text-align:center} .card-sub{text-align:center;color:var(--muted);font-size:13px;margin-top:-8px} .card label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--label-text)} .card input{ background:var(--input-bg);border:1px solid var(--input-border);color:var(--input-text); padding:12px 14px;border-radius:10px;font-size:15px; } .card input:focus{outline:none;border-color:var(--accent-2)} /* ───────────────── Botones ───────────────── */ .btn{ border:none;border-radius:10px;padding:12px 18px;font-size:15px;font-weight:600; cursor:pointer;transition:transform .08s,background .2s;color:#fff; } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--accent)} .btn-primary:hover{background:var(--accent-2)} .btn-ghost{background:var(--ghost-bg);border:1px solid var(--ghost-border);color:var(--text)} .btn-ghost:hover{background:var(--ghost-bg-hover)} .btn-block{width:100%;margin-top:6px} .alert{padding:10px 12px;border-radius:8px;font-size:14px} .alert.error{background:rgba(255,107,107,.15);border:1px solid var(--err);color:var(--err)} /* ───────────────── Topbar (paneles) ───────────────── */ body.panel{background:var(--bg-panel);min-height:100vh} .topbar{ display:flex;align-items:center;justify-content:space-between; padding:12px 20px;background:var(--topbar-bg); border-bottom:1px solid var(--topbar-border); } .topbar-brand{display:flex;align-items:center;gap:10px;font-weight:700} .topbar-brand img{height:34px;object-fit:contain} .topbar-nav{display:flex;gap:18px;align-items:center} .topbar-nav a{color:var(--nav-link);text-decoration:none;font-size:14px} .topbar-nav a:hover{color:var(--nav-link-hover)} .link-danger{color:var(--err) !important} /* ───────────────── Panel operador ───────────────── */ .panel-main{ max-width:560px;margin:0 auto;padding:40px 20px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:14px; } .panel-event{font-size:26px;font-weight:800} .panel-hint{color:var(--muted);font-size:15px} .big-count{ font-size:clamp(72px,18vw,160px);font-weight:900;line-height:1; background:linear-gradient(180deg,var(--num-grad-a),var(--num-grad-b)); -webkit-background-clip:text;background-clip:text;color:transparent; margin:6px 0; } .big-count.small{font-size:clamp(48px,12vw,96px)} .btn-add{ width:min(420px,90vw);padding:26px;border:none;border-radius:22px;cursor:pointer; background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px; box-shadow:0 14px 30px var(--num-glow);transition:transform .08s,filter .2s; } .btn-add:hover{filter:brightness(1.08)} .btn-add:active{transform:scale(.97)} .btn-add:disabled{opacity:.6;cursor:wait} .btn-add-plus{font-size:46px;font-weight:900;line-height:1} .btn-add-text{font-size:18px;font-weight:700;letter-spacing:.04em} .panel-status{min-height:22px;font-size:15px;font-weight:600} .panel-status.ok{color:var(--ok)} .panel-status.err{color:var(--err)} /* ───────────────── Panel admin ───────────────── */ .admin-main{max-width:680px;margin:0 auto;padding:30px 20px;display:flex;flex-direction:column;gap:22px} .admin-card{ background:var(--card-bg);border:1px solid var(--card-border); border-radius:var(--radius);padding:22px 24px; } .admin-card h2{font-size:19px;margin-bottom:12px} .admin-card h3{font-size:14px;color:var(--muted);margin:16px 0 8px;text-transform:uppercase;letter-spacing:.08em} .admin-card .big-count{margin-top:0} .muted{color:var(--muted);font-size:14px;margin-bottom:12px} .row{display:flex;gap:10px;align-items:center} .row.wrap{flex-wrap:wrap} .row input{ flex:1;min-width:0;background:var(--input-bg);border:1px solid var(--input-border); color:var(--input-text);padding:12px 14px;border-radius:10px;font-size:16px; } .row input:focus{outline:none;border-color:var(--accent-2)} .adj{min-width:64px} /* Gestión de logos (admin) */ .logo-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .logo-slot h3{margin-top:0} .logo-preview{ height:120px;display:flex;align-items:center;justify-content:center; background:var(--logo-card);border-radius:12px;margin-bottom:10px; overflow:hidden;padding:8px; } .logo-preview img{max-height:100%;max-width:100%;object-fit:contain} .logo-preview.empty{background:var(--preview-empty);border:1px dashed var(--preview-empty-border)} .logo-empty-text{color:var(--muted);font-size:14px} @media (max-width:560px){.logo-grid{grid-template-columns:1fr}} /* Selector de tema (admin) */ .theme-grid{display:flex;gap:12px;flex-wrap:wrap} .theme-opt{ display:flex;flex-direction:column;align-items:center;gap:8px; background:transparent;border:2px solid var(--card-border);border-radius:14px; padding:12px 14px;cursor:pointer;color:var(--text);font-family:var(--font); font-size:13px;font-weight:600;min-width:96px; transition:border-color .2s,transform .08s; } .theme-opt:hover{transform:translateY(-2px)} .theme-opt.active{border-color:var(--accent-2)} .theme-opt.active::after{content:'✔ activo';font-size:11px;color:var(--accent-2)} .theme-swatch{ width:56px;height:36px;border-radius:8px;position:relative;overflow:hidden; border:1px solid rgba(128,128,128,.35); } .theme-swatch::after{ content:'';position:absolute;left:8px;top:8px;right:24px;bottom:8px; border-radius:4px;background:var(--sw-fg); } @media (max-width:480px){ .row{flex-direction:column;align-items:stretch} .topbar-nav{gap:12px} }