/* =====================================================================
   SuperGarcIA - hoja de estilos
   Traducción directa del sistema de diseño v4.

   Regla que ordena todo: si es un dato va en blanco, si es contexto va
   hundido, y el verde no lleva cajas encima.
   ===================================================================== */

:root{
  --sunk:#001A10;        /* hundido: estado y contexto */
  --pitch:#01321F;       /* el campo: fondo */
  --card:#FFFFFF;        /* elevado: los datos */
  --card-2:#F3F6F2;
  --card-line:#E2E8DF;

  --on-dark:#F4F7F3;  --on-dark-2:#9CBBA8;  --on-dark-3:#6E9382;
  --ink:#0B1F16;      --ink-2:#54705F;      --ink-3:#8AA294;

  --action:#FDA627;      /* naranja: acciones */
  --pleno:#FFC902;       /* amarillo: EXCLUSIVO del pleno, siempre relleno */
  --hit-d:#12805A; --hit-l:#46C88A; --half-d:#9A5B00; --danger:#E2574C;
  --line-d:#1B5940;

  --r-xs:4px; --r-s:6px; --r-m:8px; --r-l:10px;
  --sans:"Open Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--pitch); color:var(--on-dark);
  font:15px/1.5 var(--sans); -webkit-font-smoothing:antialiased;
  min-height:100dvh; display:flex; flex-direction:column;
}

/* ---------- áreas seguras ---------- */
.barra-sup{
  padding:calc(env(safe-area-inset-top, 12px) + 4px) 16px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.contenido{
  flex:1; width:100%; max-width:520px; margin:0 auto;
  padding:0 16px 24px; display:flex; flex-direction:column; gap:12px;
}
.pestanas{
  position:sticky; bottom:0; display:flex; background:var(--sunk);
  border-top:1px solid #0C3A25; padding-top:8px;
  padding-bottom:calc(env(safe-area-inset-bottom, 10px) + 8px);
}
.pestanas a{
  flex:1; text-align:center; font-size:10px; font-weight:600;
  color:var(--on-dark-3); text-decoration:none; padding:0 2px;
}
.pestanas a i{display:block; font-size:16px; line-height:1.3; font-style:normal; margin-bottom:2px}
.pestanas a[aria-current]{color:var(--action)}

/* ---------- logotipo ---------- */
.logo{--h:26px; display:block; height:var(--h); width:calc(var(--h) * 0.7022);
      flex:none; color:var(--action); fill:currentColor}
.marca{display:flex; align-items:center; gap:8px; text-decoration:none}
.nombre{font-weight:800; font-size:16px; letter-spacing:-.025em; color:var(--on-dark)}
.nombre i{font-style:normal; color:var(--action)}
.avatar{
  width:31px; height:31px; border-radius:var(--r-s); background:var(--sunk);
  border:1px solid var(--line-d); color:var(--on-dark);
  font-size:11.5px; font-weight:700; display:grid; place-items:center;
  text-decoration:none; flex:none;
}

/* ---------- cabecera de ronda ---------- */
.cab{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:0 1px}
.cab h2{margin:0; font-size:20px; font-weight:800; letter-spacing:-.02em}
.cab p{margin:2px 0 0; font-size:12px; color:var(--on-dark-2)}

/* ---------- píldoras ---------- */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800;
      padding:4px 9px; border-radius:99px; text-transform:uppercase;
      letter-spacing:.07em; white-space:nowrap}
.pill-ok{background:rgba(70,200,138,.18); color:var(--hit-l)}
.pill-mal{background:rgba(226,87,76,.20); color:#FF8A7E}
.pill-off{background:rgba(255,255,255,.09); color:var(--on-dark-2)}

/* ---------- contador (nivel hundido) ---------- */
.plazo{
  background:var(--sunk); border-radius:var(--r-m); padding:10px 13px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.plazo .et{font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--on-dark-3); font-weight:700}
.plazo .val{font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:1px; color:var(--action)}
.plazo.urgente{background:#2A0E0A; box-shadow:inset 0 0 0 1px rgba(226,87,76,.5)}
.plazo.urgente .val{color:#FF8A7E}
.plazo.bien .val{color:var(--hit-l)}
.plazo.sin-hora .val{font-size:14px; color:var(--on-dark-2)}

/* ---------- tarjeta de partido (nivel elevado) ---------- */
.partido{background:var(--card); border-radius:var(--r-m); padding:11px 13px 13px;
         color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.28)}
.partido.apagado{opacity:.62}
.partido .meta{display:flex; align-items:center; justify-content:space-between; gap:8px;
               font-size:10.5px; color:var(--ink-3); font-weight:700; margin-bottom:10px;
               text-transform:uppercase; letter-spacing:.05em}
.duelo{display:grid; grid-template-columns:1fr 26px 1fr; align-items:start; gap:4px}
.lado{display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center}
.escudo{width:38px; height:38px; object-fit:contain; display:block}
.escudo-alt{width:38px; height:38px; border-radius:var(--r-s); display:grid; place-items:center;
            font-size:10px; font-weight:900; color:#fff; background:#3F3F44; letter-spacing:-.03em}
.lado .eq{font-size:11.5px; font-weight:700; line-height:1.2; min-height:27px;
          display:flex; align-items:center; color:var(--ink)}
.medio{display:flex; align-items:center; justify-content:center; font-size:16px;
       color:var(--ink-3); font-weight:700; height:38px}
.medio.alto{height:76px; align-items:flex-end; padding-bottom:16px}

/* pulsadores, pegados a su propio equipo */
.marcador{display:flex; align-items:center; gap:4px; background:var(--card-2);
          border:1px solid var(--card-line); border-radius:var(--r-m); padding:3px 4px}
.marcador button{width:30px; height:32px; border:0; border-radius:var(--r-s); background:transparent;
                 color:var(--ink-2); font:700 17px/1 var(--sans); cursor:pointer;
                 -webkit-tap-highlight-color:transparent}
.marcador button:active{background:#E4EAE3}
.marcador .n{min-width:30px; text-align:center; font-size:25px; font-weight:800;
             font-variant-numeric:tabular-nums; letter-spacing:-.03em; color:var(--ink)}
.marcador input{position:absolute; opacity:0; pointer-events:none; width:0; height:0}

.gordo{font-size:27px; font-weight:800; font-variant-numeric:tabular-nums;
       letter-spacing:-.03em; color:var(--ink)}
.gordo.gris{color:var(--ink-3)}

.mio{margin-top:10px; padding-top:9px; border-top:1px solid var(--card-line);
     display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px}
.mio .et{color:var(--ink-3); text-transform:uppercase; font-size:9.5px; letter-spacing:.1em; font-weight:700}
.mio .res{font-weight:800; font-variant-numeric:tabular-nums; font-size:14px; color:var(--ink)}
.gana{font-size:10px; font-weight:800; padding:3px 8px; border-radius:99px; letter-spacing:.04em}
.g-si{background:#DCF2E7; color:var(--hit-d)}
.g-medio{background:#FBEDD8; color:var(--half-d)}
.g-no{background:#ECEFEA; color:var(--ink-3)}

/* ---------- botones ---------- */
.btn{display:block; width:100%; padding:13px; border-radius:var(--r-m);
     background:var(--action); color:#1A1200; font:800 15px var(--sans);
     border:0; text-align:center; cursor:pointer; letter-spacing:-.01em; text-decoration:none}
.btn:disabled{opacity:.45; cursor:default}
.btn.fantasma{background:transparent; color:var(--on-dark-2); border:1px solid var(--line-d); font-weight:700}
.nota{text-align:center; font-size:11px; color:var(--on-dark-3)}

/* ---------- el pleno: único relleno amarillo de la aplicación ---------- */
.pleno-si{background:var(--pleno); border-radius:var(--r-m); padding:10px 12px;
          display:flex; gap:9px; align-items:center}
.pleno-si p{margin:0; font-size:11.5px; color:#231A00; line-height:1.35; font-weight:600}
.pleno-no{border:1px dashed rgba(255,201,2,.45); border-radius:var(--r-m); padding:9px 12px}
.pleno-no p{margin:0; font-size:11.5px; color:var(--on-dark-2); line-height:1.35}
.pleno-no b{color:var(--pleno)}

/* ---------- tablas ---------- */
.tabla{background:var(--card); border-radius:var(--r-m); overflow:hidden;
       color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.28)}
.tabla .cabeza{display:grid; grid-template-columns:26px 1fr auto; gap:10px; padding:7px 13px;
               background:var(--card-2); font-size:9.5px; text-transform:uppercase;
               letter-spacing:.1em; color:var(--ink-3); font-weight:700;
               border-bottom:1px solid var(--card-line)}
.fila{display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px;
      padding:9px 13px; border-bottom:1px solid var(--card-line); font-size:13.5px}
.fila:last-child{border-bottom:0}
.fila .pos{font-size:12px; font-weight:800; color:var(--ink-3);
           font-variant-numeric:tabular-nums; text-align:center}
.fila .nom{font-weight:600; display:flex; align-items:center; gap:6px; min-width:0}
.fila .pts{font-weight:800; font-variant-numeric:tabular-nums; font-size:16px}
.fila.yo{background:#FFF6E8; box-shadow:inset 3px 0 0 var(--action)}
.fila.lider{background:#FFFBEA}
.fila.lider .pos{color:#8A6800}
.etiqueta{font-size:9.5px; color:#231A00; background:var(--pleno); padding:2px 5px;
          border-radius:var(--r-xs); font-weight:800; text-transform:uppercase; letter-spacing:.05em}
.etiqueta.sosa{background:#ECEFEA; color:var(--ink-3)}
.aviso-empate{font-size:11px; color:#231A00; background:var(--pleno); padding:7px 13px; font-weight:800}

.fila-pron{display:grid; grid-template-columns:1fr auto 56px; gap:9px; align-items:center;
           padding:8px 13px; border-bottom:1px solid var(--card-line); font-size:12.5px}
.fila-pron:last-child{border-bottom:0}
.fila-pron .marcadores{font-variant-numeric:tabular-nums; color:var(--ink);
                       font-size:13.5px; font-weight:800; letter-spacing:.02em}
.fila-pron .extra{text-align:right; font-size:9.5px; color:var(--ink-3);
                  font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.fila-pron.yo{background:#FFF6E8; box-shadow:inset 3px 0 0 var(--action)}
.fila-pron.igual{background:var(--card-2)}
.fila-pron.pleno{background:var(--pleno)}
.fila-pron.pleno .marcadores,.fila-pron.pleno .extra{color:#231A00}

.subtitulo{font-size:9.5px; text-transform:uppercase; letter-spacing:.11em;
           color:var(--on-dark-3); font-weight:700; padding:0 2px}

/* ---------- mensajes ---------- */
.mensaje{border-radius:var(--r-m); padding:11px 13px; font-size:13px; line-height:1.45}
.mensaje.ok{background:rgba(70,200,138,.14); color:var(--hit-l)}
.mensaje.error{background:rgba(226,87,76,.16); color:#FF8A7E}

/* ---------- acceso ---------- */
.acceso{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
        padding:24px 16px 40px; gap:16px; text-align:center;
        background:radial-gradient(120% 70% at 50% 30%, #08492F 0%, #01321F 62%, #001A10 100%)}
.acceso .logo{--h:120px; margin-bottom:4px}
.acceso h1{font-size:30px; font-weight:800; letter-spacing:-.03em; margin:0}
.acceso h1 i{font-style:normal; color:var(--action)}
.acceso .claim{font-size:12.5px; color:var(--on-dark-2); margin:0}
.acceso form{width:100%; max-width:320px; display:flex; flex-direction:column; gap:10px; margin-top:12px}
.acceso input[type=email]{
  width:100%; padding:13px; border-radius:var(--r-m); border:1px solid var(--line-d);
  background:var(--sunk); color:var(--on-dark); font:15px var(--sans); text-align:center;
}
.acceso input[type=email]::placeholder{color:var(--on-dark-3)}

/* ---------- texto largo (reglas) ---------- */
.texto{background:var(--card); color:var(--ink); border-radius:var(--r-m); padding:16px 16px 4px;
       box-shadow:0 2px 8px rgba(0,0,0,.28)}
.texto h3{margin:18px 0 6px; font-size:14px; letter-spacing:-.01em}
.texto h3:first-child{margin-top:0}
.texto p,.texto li{font-size:13.5px; color:var(--ink-2); line-height:1.55}
.texto table{width:100%; border-collapse:collapse; margin:8px 0 14px; font-size:13px}
.texto td{padding:6px 0; border-bottom:1px solid var(--card-line)}
.texto td:last-child{text-align:right; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}
.texto strong{color:var(--ink)}

.pie{font-size:10.5px; color:var(--on-dark-3); text-align:center; padding:4px 0 0; line-height:1.5}
.pie a{color:var(--on-dark-3)}
.vacio{text-align:center; color:var(--on-dark-2); font-size:13.5px; padding:26px 10px}