/* =====================================================================
   CD Amparo — estilos
   Colores del club: morado berenjena (#4A1942) y verde.
   Dos temas: claro y oscuro (se elige en Ajustes).
   ===================================================================== */

@font-face{font-family:Archivo;font-weight:400 800;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin-400-800.woff2) format("woff2-variations");unicode-range:U+00-FF,U+131,U+152-153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:Archivo;font-weight:400 800;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin-ext-400-800.woff2) format("woff2-variations");unicode-range:U+100-24F,U+1E00-1EFF}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans-latin-400-700.woff2) format("woff2-variations");unicode-range:U+00-FF,U+131,U+152-153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans-latin-ext-400-700.woff2) format("woff2-variations");unicode-range:U+100-24F,U+1E00-1EFF}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/fonts/plex-mono-latin-400.woff2) format("woff2");unicode-range:U+00-FF,U+2000-206F,U+20AC,U+2212}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/fonts/plex-mono-latin-ext-400.woff2) format("woff2");unicode-range:U+100-24F,U+1E00-1EFF}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(/fonts/plex-mono-latin-600.woff2) format("woff2");unicode-range:U+00-FF,U+2000-206F,U+20AC,U+2212}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(/fonts/plex-mono-latin-ext-600.woff2) format("woff2");unicode-range:U+100-24F,U+1E00-1EFF}

:root{
  --f-display:"Archivo",system-ui,sans-serif;
  --f-texto:"Instrument Sans",system-ui,sans-serif;
  --f-datos:"IBM Plex Mono",ui-monospace,monospace;

  --morado:#4a1942; --morado-claro:#d9b8d4; --morado-oscuro:#2e0f2a;
  --radio:14px;
  --nav-alto:64px;
}

/* Tema claro (por defecto) */
:root,html[data-tema="claro"]{
  --fondo:#f1f0f3; --superficie:#fff; --superficie-alt:#e7e4ea;
  --texto:#2e0f2a; --texto-suave:#6b3f63;
  --linea:#2e0f2a24; --linea-fuerte:#2e0f2a52;
  --marca:#4a1942; --sobre-marca:#fff;
  --acento:#0b6642; --acento-bg:#0b664218;
  --amarilla:#8a5f00; --amarilla-bg:#8a5f0018;
  --roja:#a8271b; --roja-bg:#a8271b14;
  --sombra:0 8px 22px -14px #2e0f2a55;
  --nav-fondo:#fff;
}
html[data-tema="oscuro"]{
  --fondo:#1a1219; --superficie:#2f1e31; --superficie-alt:#241826;
  --texto:#efeaef; --texto-suave:#b8a9b6;
  --linea:#efeaef24; --linea-fuerte:#efeaef52;
  --marca:#d9b8d4; --sobre-marca:#1a1219;
  --acento:#3ddc97; --acento-bg:#3ddc9722;
  --amarilla:#ffc53d; --amarilla-bg:#ffc53d22;
  --roja:#ff6b5e; --roja-bg:#ff6b5e22;
  --sombra:0 10px 24px -14px #000a;
  --nav-fondo:#120b10;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--f-texto);font-size:15px;line-height:1.45}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.15}
.mono{font-family:var(--f-datos)}
.oculto{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── Estructura ─────────────────────────────────────────────── */
.pagina{max-width:1100px;margin:0 auto;padding:20px 16px calc(var(--nav-alto) + 28px + env(safe-area-inset-bottom,0px))}
.cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:18px;border-bottom:2px solid var(--linea-fuerte)}
.cabecera h1{font-size:30px;font-weight:800}
.antetitulo{font-family:var(--f-datos);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:4px}
.volver{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:14px;font-weight:600;color:var(--acento);margin-bottom:12px}
.seccion{margin-top:28px}
.seccion>h2{font-size:20px;font-weight:800;margin-bottom:12px}
.fila-flex{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.entre{justify-content:space-between}
.rejilla{display:grid;gap:12px}
.r2{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.r-tarjetas{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra)}
.tarjeta-plana{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:14px}
.vacio{padding:26px 12px;text-align:center;color:var(--texto-suave);font-size:14px}

/* ── Botones ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--linea-fuerte);background:var(--superficie);color:var(--texto);border-radius:10px;padding:9px 14px;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;min-height:40px}
.btn:hover{background:var(--superficie-alt)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primario{background:var(--morado);border-color:var(--morado);color:#fff}
html[data-tema="oscuro"] .btn-primario{background:var(--morado-claro);border-color:var(--morado-claro);color:var(--morado-oscuro)}
.btn-primario:hover{filter:brightness(1.1);background:var(--morado)}
html[data-tema="oscuro"] .btn-primario:hover{background:var(--morado-claro)}
.btn-peligro{color:var(--roja);border-color:var(--roja)}
.btn-peligro:hover{background:var(--roja-bg)}
.btn-fantasma{border-color:transparent;background:transparent}
.btn-sm{padding:6px 10px;min-height:32px;font-size:13px}
.btn-icono{padding:8px;min-width:40px}
.btn-bloque{width:100%}

/* Pastillas de filtro */
.pastillas{display:flex;gap:6px;flex-wrap:wrap}
.pastilla{border:1px solid var(--linea-fuerte);background:var(--superficie);border-radius:8px;padding:6px 11px;font-family:var(--f-datos);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.pastilla.activa{background:var(--morado);border-color:var(--morado);color:#fff}
html[data-tema="oscuro"] .pastilla.activa{background:var(--morado-claro);border-color:var(--morado-claro);color:var(--morado-oscuro)}

.etiqueta{display:inline-block;border:1px solid var(--linea-fuerte);border-radius:6px;padding:2px 7px;font-family:var(--f-datos);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave)}
.etiqueta.verde{color:var(--acento);border-color:var(--acento);background:var(--acento-bg)}
.etiqueta.roja{color:var(--roja);border-color:var(--roja);background:var(--roja-bg)}
.etiqueta.ambar{color:var(--amarilla);border-color:var(--amarilla);background:var(--amarilla-bg)}

/* ── Formularios ────────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.campo>span{font-family:var(--f-datos);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave)}
.campo small{color:var(--texto-suave);font-size:12px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{width:100%;background:var(--superficie);border:1px solid var(--linea-fuerte);border-radius:10px;padding:10px 12px;font-size:15px;min-height:42px}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--acento);outline-offset:1px}
.campos-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 14px}
.check{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--morado)}
.error-form{background:var(--roja-bg);color:var(--roja);padding:10px 12px;border-radius:10px;font-size:14px;margin-bottom:12px}

/* ── Tablas ─────────────────────────────────────────────────── */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie)}
table.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{font-family:var(--f-datos);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave);text-align:left;padding:11px 10px;background:var(--superficie-alt);white-space:nowrap}
.tabla td{padding:11px 10px;border-top:1px solid var(--linea)}
.tabla .num{text-align:right;font-family:var(--f-datos);white-space:nowrap}
.tabla tbody tr:hover{background:var(--superficie-alt)}
.tabla .fuerte{font-weight:700}
.tabla a{text-decoration:none}

/* ── Navegación inferior ────────────────────────────────────── */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--nav-fondo);border-top:1px solid var(--linea);display:flex;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.nav a,.nav button{flex:1;max-width:110px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border:0;background:none;border-radius:12px;text-decoration:none;color:var(--texto-suave);font-family:var(--f-datos);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.nav a.activo{color:var(--texto);background:var(--superficie-alt);font-weight:600}
.nav svg{width:21px;height:21px}

/* ── Resumen ────────────────────────────────────────────────── */
.hero{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.escudo{width:64px;height:64px;border-radius:16px;object-fit:cover;background:var(--morado);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:22px}
.balance{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie);overflow:hidden}
.balance div{padding:12px 4px;text-align:center;border-left:1px solid var(--linea)}
.balance div:first-child{border-left:0}
.balance b{display:block;font-family:var(--f-display);font-size:26px;font-weight:800}
.balance span{font-family:var(--f-datos);font-size:11px;letter-spacing:.1em;color:var(--texto-suave)}
.proximo{background:linear-gradient(135deg,var(--morado) 0%,var(--morado-oscuro) 100%);color:#fff;border-radius:var(--radio);padding:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;text-decoration:none}
.proximo .antetitulo{color:#fffb}
.proximo h3{font-size:20px}
.lider{display:flex;flex-direction:column;gap:4px}
.lider .que{font-family:var(--f-datos);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave)}
.lider .quien{font-family:var(--f-display);font-weight:800;font-size:18px}
.lider .cuanto{font-family:var(--f-datos);font-size:13px;color:var(--texto-suave)}
.grafico svg{width:100%;height:auto;display:block}
.grafico .leyenda{display:flex;gap:14px;justify-content:center;font-family:var(--f-datos);font-size:12px;margin-top:6px}

/* ── Plantilla ──────────────────────────────────────────────── */
.carta-jugador{position:relative;display:block;text-decoration:none;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:16px;box-shadow:var(--sombra)}
.carta-jugador:hover{border-color:var(--linea-fuerte)}
.carta-jugador.baja{opacity:.6}
.dorsal{font-family:var(--f-display);font-weight:800;font-stretch:125%;font-size:52px;line-height:.9;color:var(--marca)}
.carta-jugador .foto{position:absolute;right:14px;top:14px;width:52px;height:52px}
.avatar{border-radius:999px;object-fit:cover;background:var(--superficie-alt);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:800;color:var(--texto-suave);flex-shrink:0;overflow:hidden}
.nombre-jugador{font-family:var(--f-display);font-weight:800;font-size:19px;text-transform:uppercase;margin-top:10px}
.nombre-completo{color:var(--texto-suave);font-size:14px}
.mini-stats{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--linea);margin-top:12px;padding-top:10px;text-align:center}
.mini-stats b{display:block;font-family:var(--f-datos);font-size:16px}
.mini-stats span{font-family:var(--f-datos);font-size:10px;color:var(--texto-suave);letter-spacing:.08em}
.am{color:var(--amarilla)} .ro{color:var(--roja)}

/* Ficha */
.ficha-top{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.foto-grande{width:140px;height:140px;font-size:44px}
.totales{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px}
.totales div{background:var(--superficie);border:1px solid var(--linea);border-radius:12px;padding:12px;text-align:center}
.totales b{display:block;font-family:var(--f-display);font-size:26px;font-weight:800}
.totales span{font-family:var(--f-datos);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave)}

/* ── Partidos ───────────────────────────────────────────────── */
.partido{display:flex;flex-direction:column;gap:10px}
.partido .marcador{font-family:var(--f-display);font-weight:800;font-size:19px}
.partido .marcador .goles{font-family:var(--f-datos);padding:0 4px}

/* Convocatoria / acta */
.lista-sel label{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--linea);border-radius:12px;background:var(--superficie);margin-bottom:8px;cursor:pointer}
.lista-sel label:has(input:checked){border-color:var(--acento);background:var(--acento-bg)}
.lista-sel input{width:20px;height:20px;accent-color:var(--morado)}
.acta-jugador{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:12px;margin-bottom:10px}
.acta-jugador.no-jugo{opacity:.55}
.acta-jugador .cab{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.acta-jugador .cab b{font-family:var(--f-display);font-size:17px}
.contadores{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.contador{display:flex;align-items:center;justify-content:space-between;gap:6px;border:1px solid var(--linea);border-radius:10px;padding:4px 4px 4px 10px}
.contador span{font-family:var(--f-datos);font-size:11px;letter-spacing:.08em;color:var(--texto-suave)}
.contador .ctrl{display:flex;align-items:center;gap:4px}
.contador button{width:34px;height:34px;border-radius:8px;border:1px solid var(--linea-fuerte);background:var(--superficie);font-size:18px;line-height:1}
.contador output,.contador input{width:42px;text-align:center;font-family:var(--f-datos);font-weight:600;font-size:16px}
.contador input{min-height:34px;padding:4px}
.resultado{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.resultado input{width:80px;text-align:center;font-family:var(--f-display);font-size:28px;font-weight:800}
.barra-guardar{position:sticky;bottom:calc(var(--nav-alto) + 8px + env(safe-area-inset-bottom,0px));margin-top:16px;z-index:5}

/* ── Caja ───────────────────────────────────────────────────── */
.saldo{background:linear-gradient(135deg,var(--morado-claro) 0%,var(--morado-oscuro) 75%);color:#fff;border-radius:20px;padding:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;box-shadow:var(--sombra)}
.saldo .grande{font-family:var(--f-datos);font-weight:600;font-size:32px}
.saldo .lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.saldo .parte{padding-left:16px;border-left:1px solid #fff5}
.progreso{height:8px;border-radius:999px;background:var(--superficie-alt);overflow:hidden;margin:14px 0 6px}
.progreso div{height:100%;background:var(--acento);border-radius:999px}
.positivo{color:var(--acento)} .negativo{color:var(--roja)}
.chip-pago{border:0;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;background:var(--superficie-alt);color:var(--texto-suave)}
.chip-pago.pagado{background:var(--acento-bg);color:var(--acento)}

/* ── Login ──────────────────────────────────────────────────── */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(160deg,var(--morado) 0%,var(--fondo) 60%)}
.login .tarjeta{width:100%;max-width:380px}
.login .escudo{margin:0 auto 10px}

/* ── Diálogo modal ──────────────────────────────────────────── */
dialog{border:1px solid var(--linea);border-radius:18px;background:var(--superficie);color:var(--texto);padding:20px;width:min(460px,calc(100vw - 24px));box-shadow:0 30px 60px -20px #000a}
dialog::backdrop{background:#0008}
dialog h2{font-size:19px;margin-bottom:14px}

/* ── Avisos ─────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-alto) + 18px + env(safe-area-inset-bottom,0px));z-index:100;background:var(--texto);color:var(--fondo);padding:11px 18px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:var(--sombra);max-width:92vw}
.toast.error{background:var(--roja);color:#fff}
.spinner{width:26px;height:26px;border-radius:999px;border:3px solid var(--superficie-alt);border-top-color:var(--marca);animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.cargando-pagina{min-height:60vh;display:flex;align-items:center;justify-content:center}

/* ── Móvil ──────────────────────────────────────────────────── */
@media (max-width:560px){
  .cabecera h1{font-size:26px}
  .balance b{font-size:21px}
  .ocultar-movil{display:none}
  .tabla th,.tabla td{padding:10px 7px}
}

/* ── Imprimir (botón PDF) ───────────────────────────────────── */
@media print{
  .nav,.no-imprimir,.btn{display:none!important}
  body{background:#fff;color:#000}
  .pagina{padding:0}
  .tabla-scroll{border:0}
}