/* Línea gráfica Kortavia: teal de marca, fondo gris azulado, tarjetas blancas con
   sombra suave, Roboto. Tablero de resultados: cifras arriba, resultado al centro,
   recintos al pie. */
:root{
  --teal:#009A9A; --teal2:#00737A; --tealTinte:rgba(0,154,154,.11);
  --fondo:#F1F5F7; --panel:#FFFFFF; --borde:#E3E9ED; --bordeCampo:#D6DDE3;
  --texto:#0E1A24; --suave:#64737F; --tenue:#98A5AE; --pista:#E9EEF1;
  --ok:#13804C; --okF:#E6F4EC; --mal:#C0392B; --malF:#FBEDEB; --aviso:#A15C00; --avisoF:#FBF1DF;
  --sombra:0 10px 32px rgba(14,26,36,.07), 0 2px 6px rgba(14,26,36,.05);
  --letra:"Roboto",-apple-system,"Segoe UI",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --teal:#2BB8B4; --teal2:#6FD6D2; --tealTinte:rgba(43,184,180,.16);
  --fondo:#0D1419; --panel:#152027; --borde:#24323B; --bordeCampo:#2E3E48;
  --texto:#E6EEF2; --suave:#9AAAB5; --tenue:#6F818C; --pista:#22303A;
  --ok:#4CC383; --okF:#123124; --mal:#F07A6E; --malF:#341A17; --aviso:#E0A54B; --avisoF:#33260F;
  --sombra:0 10px 30px rgba(0,0,0,.35); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --teal:#2BB8B4; --teal2:#6FD6D2; --tealTinte:rgba(43,184,180,.16);
  --fondo:#0D1419; --panel:#152027; --borde:#24323B; --bordeCampo:#2E3E48;
  --texto:#E6EEF2; --suave:#9AAAB5; --tenue:#6F818C; --pista:#22303A;
  --ok:#4CC383; --okF:#123124; --mal:#F07A6E; --malF:#341A17; --aviso:#E0A54B; --avisoF:#33260F;
  --sombra:0 10px 30px rgba(0,0,0,.35); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo);color:var(--texto);font:15px/1.5 var(--letra);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.envoltura{max-width:1100px;margin:0 auto;padding-inline:16px;padding-block:0 48px}
.num{font-variant-numeric:tabular-nums}

/* barra superior */
.barra{position:sticky;top:0;z-index:9;background:color-mix(in srgb,var(--fondo) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--borde);margin-inline:-16px;
  padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top,0px))}
.barra .fila1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo{width:40px;height:40px;border-radius:26%;background:#009A9A;flex:none;overflow:hidden}
.logo svg{display:block;width:100%;height:100%}
.marca b{font-size:18px;font-weight:700;letter-spacing:-.4px;display:block;line-height:1.1}
.marca span{font-size:12px;color:var(--suave);font-weight:500}
.estado{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--suave);
  background:var(--panel);border:1px solid var(--borde);border-radius:999px;padding:6px 12px}
.punto{width:8px;height:8px;border-radius:50%;background:var(--tenue);flex:none}
.punto.vivo{background:var(--ok);box-shadow:0 0 0 3px var(--okF);animation:latido 2s ease-in-out infinite}
.punto.malo{background:var(--mal);box-shadow:0 0 0 3px var(--malF)}
@keyframes latido{50%{box-shadow:0 0 0 6px var(--okF)}}

.cabeza{padding:26px 0 4px}
h1{margin:0;font-size:clamp(26px,4.4vw,38px);line-height:1.08;font-weight:700;letter-spacing:-1.1px;text-wrap:balance}
.sub{color:var(--suave);font-size:15px;margin-top:6px}

h2{font-size:12px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--tenue);margin:28px 2px 10px}
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:18px;box-shadow:var(--sombra)}

.heroe{position:relative;overflow:hidden;margin-top:18px;border-radius:24px;border:1px solid #E3E9ED;
  background:radial-gradient(520px 420px at 82% 38%,#D5EFEC 0,#E9F6F5 45%,#FFFFFF 75%);color:#0E1A24;box-shadow:var(--sombra);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);min-height:360px}
.heroe .texto{padding:34px 34px 30px;display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative;z-index:1}
.heroe .cargo{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:#009A9A;color:#fff;border-radius:999px;padding:7px 15px;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.heroe .nombre{font-size:clamp(30px,4.6vw,48px);line-height:1.02;font-weight:700;letter-spacing:-1.6px;text-wrap:balance;margin:0}
.heroe .org{font-size:16px;color:#55636E;font-weight:500;margin-top:-6px}
.heroe .vivo{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.heroe .dato{background:#fff;border:1px solid #E3E9ED;border-radius:16px;padding:12px 16px;min-width:120px}
.heroe .dato small{display:block;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#98A5AE}
.heroe .dato b{display:block;font-size:28px;font-weight:700;letter-spacing:-.8px;line-height:1.15;margin-top:3px;font-variant-numeric:tabular-nums;color:#00737A}
.heroe .dato.mal b{color:#C0392B}
.heroe .nota-h{font-size:13px;color:#64737F}
.heroe .foto{position:relative;align-self:end;justify-self:center;width:100%;max-width:380px;height:100%;display:flex;align-items:flex-end}
.heroe .foto img{display:block;width:100%;height:auto;mix-blend-mode:multiply;margin-bottom:-2px}
@media(max-width:720px){.heroe{grid-template-columns:1fr;background:radial-gradient(420px 360px at 50% 30%,#D5EFEC 0,#E9F6F5 45%,#FFFFFF 75%)}
  .heroe .foto{order:-1;max-width:240px;height:auto}
  .heroe .cargo{font-size:11.5px;padding:6px 13px}
  .heroe .dato{min-width:0;padding:10px 12px}.heroe .dato b{font-size:22px}
  .heroe .texto{padding:6px 22px 24px;text-align:center;align-items:center}
  .heroe .cargo{align-self:center}.heroe .vivo{justify-content:center}}
.fila.nuestro{background:var(--tealTinte)}
.fila .yo{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--teal2);background:var(--panel);border:1px solid var(--teal);border-radius:999px;padding:2px 8px;margin-left:8px;white-space:nowrap}
.mini{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:#E9F6F5;border:2px solid var(--teal);flex:none}

/* cifras */
.cifras{display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden}
.cifras>div{padding:16px 18px;border-left:1px solid var(--borde);min-width:0}
.cifras>div:first-child{border-left:0}
.cifras .r{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cifras .v{font-size:28px;font-weight:700;letter-spacing:-.8px;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums}
.cifras .mal .v{color:var(--mal)}
@media(max-width:720px){.cifras{grid-template-columns:repeat(2,1fr)}
  .cifras>div{border-top:1px solid var(--borde)}
  .cifras>div:nth-child(-n+2){border-top:0}
  .cifras>div:nth-child(odd){border-left:0}
  .cifras>div:last-child{grid-column:1/-1;border-left:0}}

/* dignidades */
.fichas{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;margin-top:16px;scrollbar-width:thin}
.ficha{border:1px solid var(--borde);background:var(--panel);color:var(--texto);border-radius:999px;
  padding:9px 16px;font:600 14px var(--letra);white-space:nowrap;cursor:pointer}
.ficha[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}

/* resultado */
.rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:14px}
@media(max-width:820px){.rejilla{grid-template-columns:minmax(0,1fr)}}
.puntero{padding:22px;display:flex;flex-direction:column;gap:18px}
.dona{position:relative;width:min(240px,70vw);aspect-ratio:1;margin:0 auto;max-width:100%}
.dona svg{width:100%;height:100%;transform:rotate(-90deg)}
.dona .centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dona .centro b{font-size:34px;font-weight:700;letter-spacing:-1px;line-height:1}
.dona .centro span{font-size:13px;color:var(--suave);margin-top:4px}
.etq{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600}
.etq i{width:8px;height:8px;border-radius:50%;display:block}
.etq.ok{background:var(--okF);color:var(--ok)} .etq.ok i{background:var(--ok)}
.etq.mal{background:var(--malF);color:var(--mal)} .etq.mal i{background:var(--mal)}
.etq.te{background:var(--tealTinte);color:var(--teal2)} .etq.te i{background:var(--teal)}
.lider .nom{font-size:22px;font-weight:700;letter-spacing:-.5px;margin-top:10px}
.lider .vent{font-size:14px;color:var(--suave);margin-top:2px}

.lista{padding:8px 0}
.fila{padding:12px 18px 10px}
.fila .cab{display:flex;align-items:center;gap:12px}
.cuad{min-width:36px;height:28px;padding:0 6px;border-radius:8px;color:#fff;font-weight:700;font-size:13.5px;display:grid;place-items:center;flex:none}
.fila .nm{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .vt{font-weight:700;font-variant-numeric:tabular-nums}
.fila .pc{color:var(--suave);width:66px;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
.barrita{height:8px;border-radius:999px;background:var(--pista);margin:9px 0 0 48px;overflow:hidden}
.barrita i{display:block;height:100%;border-radius:999px;transition:width .6s cubic-bezier(.16,.84,.24,1)}
.menor{display:flex;padding:8px 18px;color:var(--suave);font-size:14px}
.menor span:first-child{flex:1}
.separa{border-top:1px solid var(--borde);margin-top:6px;padding-top:12px}

/* tablas */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--tenue);font-weight:700;padding:12px 16px;border-bottom:1px solid var(--borde);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--borde)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.envuelto{overflow-x:auto}

.vacio{padding:40px 22px;text-align:center}
.vacio h3{margin:0 0 6px;font-size:18px;font-weight:700}
.vacio p{margin:0 auto;max-width:46ch;color:var(--suave)}

/* administración */
.caja{padding:20px}
.campo{display:block;margin-top:12px}
.campo span{display:block;font-size:13px;font-weight:500;color:var(--suave);margin:0 0 6px 2px}
.campo input,textarea{width:100%;border:1.5px solid var(--bordeCampo);border-radius:12px;background:var(--panel);color:var(--texto);
  padding:12px 14px;font:15px var(--letra)}
.campo input:focus,textarea:focus{outline:none;border-color:var(--teal)}
textarea{min-height:110px;resize:vertical;font:13px ui-monospace,Menlo,monospace;margin-top:12px}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.pri{background:var(--teal);color:#fff;border:0;border-radius:12px;padding:12px 18px;font:600 15px var(--letra);cursor:pointer}
.sec{background:var(--panel);color:var(--texto);border:1.5px solid var(--bordeCampo);border-radius:12px;padding:11px 16px;font:600 14px var(--letra);cursor:pointer;display:inline-flex;align-items:center}
.lig{background:none;border:0;color:var(--mal);font:600 13px var(--letra);cursor:pointer;padding:6px 8px}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,.ficha:focus-visible,.sec:focus-within{outline:2px solid var(--teal);outline-offset:2px}
.nota{color:var(--suave);font-size:13.5px;margin-top:8px}
.aviso{font-size:14px;margin-top:12px;font-weight:500}
.aviso.ok{color:var(--ok)} .aviso.mal{color:var(--mal)}

footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--borde);color:var(--tenue);font-size:13px;display:flex;gap:10px;align-items:flex-start}
footer .logo{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}