/* masfutsal — fuentes y colores (tokens). Único sitio con colores escritos: el resto de hojas usa estas variables.
   Paleta y reglas de uso: docs/DOCUMENTO_TECNICO.md (8.26). Contraste comprobado por tests/contraste.php:
   si añades una combinación de texto y fondo, la prueba la mide (WCAG AA: 4,5:1; 3:1 en texto grande). */

/* DejaVu Sans recortada a latin y latin-ext (licencia en ../fonts/LICENSE.txt). El navegador solo descarga
   latin-ext si la página tiene algún carácter de ese rango (Ł, Ő, Ș…). */
@font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/dejavu-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/dejavu-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/dejavu-sans-bold-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/dejavu-sans-bold-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --fuente: 'DejaVu Sans', 'Verdana', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Paleta de la marca */
  --bosque: #00473F;          /* principal: cabeceras, menú, botones principales (texto blanco) */
  --menta: #16CF91;           /* acento: activo, subrayados, iconos, etiquetas (texto en bosque). Nunca texto menta
                                 sobre blanco ni texto blanco sobre menta */
  --niebla: #F2F8F5;          /* fondo general */
  --blanco: #FFFFFF;

  /* Derivados de los tres colores */
  --bosque-hover: #00352F;    /* botón principal al pasar por encima */
  --bosque-noche: #00241F;    /* fondo de la mesa */
  --bosque-panel: #0A3530;    /* paneles de la mesa */
  --bosque-control: #134A43;  /* botones neutros de la mesa */
  --bosque-borde: #2B5C55;    /* bordes sobre fondo oscuro */
  --bosque-claro: #0E6B5F;    /* tiempo muerto y botón secundario sobre oscuro (texto blanco) */
  --menta-suave: #DDF5EA;     /* fondo de etiquetas, éxito y fila destacada */
  --menta-hover: #3FDBA7;     /* menta al pasar por encima */
  --niebla-2: #E6F1EC;        /* fondo de marcadores, cabeceras de tabla y filas al pasar */
  --tinta: #10231F;           /* texto principal (bosque casi negro) */
  --tinta-suave: #4B615C;     /* texto secundario */
  --linea: #D5E5DE;           /* bordes y separadores */
  --linea-fuerte: #7E9A92;    /* borde de campos de formulario (3:1 sobre blanco) */
  --texto-oscuro: #E8F3EF;    /* texto sobre fondo oscuro */
  --texto-oscuro-suave: #9FBDB4; /* texto secundario sobre fondo oscuro (mesa) */
  --texto-bosque-suave: #B9D6CD; /* texto secundario sobre verde bosque (marcador TV) */
  --sombra: rgb(0 36 31 / .18);
  --sombra-suave: rgb(0 36 31 / .06);
  --velo: rgb(0 20 17 / .78);    /* detrás de las ventanas de la mesa */

  /* Colores con significado (no cambian con la marca) */
  --tarjeta-amarilla: #FFD23F;   /* con texto --tinta */
  --tarjeta-roja: #C62828;       /* con texto blanco */
  --error: #B42318; --error-fondo: #FDECEA; --error-borde: #F4B4AC;
  --aviso: #8A4B00; --aviso-fondo: #FFF3D6; --aviso-borde: #F2C66B;
  --directo: #C81E1E; --directo-fondo: #FDECEA;
  --exito: var(--bosque); --exito-fondo: var(--menta-suave);  /* el éxito usa la propia paleta (ver 8.26) */
  --peligro-oscuro: #FFB4A9;     /* error o inferioridad sobre fondo oscuro (mesa y marcador TV) */
  --aviso-oscuro: #FFD98A;       /* aviso sobre fondo oscuro */
  --error-oscuro-fondo: #6E1A12; /* fondo de avisos de error en la mesa (texto --peligro-oscuro o blanco) */
  --aviso-oscuro-fondo: #5C3A00; /* fondo de avisos pendientes en la mesa */
  --escudo-generico: #5B706B;    /* escudo con iniciales cuando el club no tiene color (texto blanco) */

  /* Papeles (lo que usan las hojas de estilo) */
  --fondo: var(--niebla);
  --superficie: var(--blanco);
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
  --borde: var(--linea);
  --primario: var(--bosque);
  --primario-hover: var(--bosque-hover);
  --sobre-primario: var(--blanco);
  --acento: var(--menta);
  --sobre-acento: var(--bosque);
  --enlace: var(--bosque);
  --icono: var(--bosque);
  --icono-detalle: var(--menta);
}


/* Temas de la mesa (selector en el menú de la mesa, guardado en el dispositivo; oscuro por defecto). mesa.css solo
   usa estos papeles --m-…; tests/contraste.php mide cada regla de mesa.css con los dos temas. */
.mesa-body {
  --m-fondo: var(--bosque-noche); --m-panel: var(--bosque-panel); --m-control: var(--bosque-control); --m-borde: var(--bosque-borde);
  --m-texto: var(--texto-oscuro); --m-texto-suave: var(--texto-oscuro-suave); --m-fuerte: var(--blanco); --m-sobre-control: var(--blanco);
  --m-acento-texto: var(--menta); --m-foco: var(--menta);
  --m-aviso: var(--aviso-oscuro); --m-aviso-fondo: var(--aviso-oscuro-fondo); --m-peligro: var(--peligro-oscuro);
  --m-error-fondo: var(--error-oscuro-fondo); --m-sobre-error: var(--blanco); --m-inf-texto: var(--peligro-oscuro); --m-inf-fuerte: var(--blanco);
  --m-destacado: var(--blanco); --m-sobre-destacado: var(--bosque);
  --m-on: var(--bosque-claro); --m-sobre-on: var(--blanco); --m-staff: var(--bosque-borde);
  --m-toast: var(--niebla); --m-sobre-toast: var(--tinta);
}
.mesa-body.tema-claro {
  --m-fondo: var(--niebla); --m-panel: var(--blanco); --m-control: var(--niebla-2); --m-borde: var(--linea-fuerte);
  --m-texto: var(--tinta); --m-texto-suave: var(--tinta-suave); --m-fuerte: var(--tinta); --m-sobre-control: var(--tinta);
  --m-acento-texto: var(--bosque); --m-foco: var(--bosque);
  --m-aviso: var(--aviso); --m-aviso-fondo: var(--aviso-fondo); --m-peligro: var(--error);
  --m-error-fondo: var(--error-fondo); --m-sobre-error: var(--error); --m-inf-texto: var(--error); --m-inf-fuerte: var(--error);
  --m-destacado: var(--bosque); --m-sobre-destacado: var(--blanco);
  --m-on: var(--menta-suave); --m-sobre-on: var(--tinta); --m-staff: var(--menta-suave);
  --m-toast: var(--bosque); --m-sobre-toast: var(--blanco);
}

/* Temas de los bloques para otras webs (/embed/…, ver 8.29; ?tema=claro | oscuro). embed.css solo usa estos papeles
   --e-…; tests/contraste.php mide cada regla de embed.css con los dos temas. */
.embed-body {
  --e-fondo: var(--blanco); --e-suave: var(--niebla); --e-fila: var(--niebla-2); --e-borde: var(--linea);
  --e-texto: var(--tinta); --e-texto-suave: var(--tinta-suave); --e-titulo: var(--bosque); --e-enlace: var(--bosque);
  --e-destacado: var(--menta-suave); --e-sobre-destacado: var(--bosque);
  --e-vivo: var(--menta); --e-sobre-vivo: var(--bosque); --e-fin: var(--menta-suave); --e-sobre-fin: var(--bosque);
  --e-pie: var(--niebla-2); --e-sobre-pie: var(--tinta-suave); --e-marca: var(--bosque); --e-foco: var(--bosque);
  --e-sombra: var(--sombra-suave);
}
.embed-body.tema-oscuro {
  --e-fondo: var(--bosque-noche); --e-suave: var(--bosque-panel); --e-fila: var(--bosque-control); --e-borde: var(--bosque-borde);
  --e-texto: var(--texto-oscuro); --e-texto-suave: var(--texto-oscuro-suave); --e-titulo: var(--blanco); --e-enlace: var(--menta);
  --e-destacado: var(--bosque-claro); --e-sobre-destacado: var(--blanco);
  --e-vivo: var(--menta); --e-sobre-vivo: var(--bosque); --e-fin: var(--bosque-control); --e-sobre-fin: var(--texto-oscuro);
  --e-pie: var(--bosque-panel); --e-sobre-pie: var(--texto-oscuro-suave); --e-marca: var(--blanco); --e-foco: var(--menta);
  --e-sombra: var(--sombra);
}

/* Componentes de la marca (todas las páginas, también el marcador TV y el acta imprimible) */
/* Marca: logo configurado o la palabra «masfutsal» con el símbolo (App\Core\Marca) */
.marca { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; letter-spacing: -.01em; color: var(--primario); white-space: nowrap; }
.marca.neg { color: var(--sobre-primario); }
.marca-simbolo { width: 1.5em; height: 1.5em; flex: none; }
.marca-simbolo .fondo { fill: var(--primario); }
.marca-simbolo .mas { fill: none; stroke: var(--acento); stroke-width: 9; stroke-linecap: round; }
.marca.neg .marca-simbolo .mas { stroke-width: 10; }
.marca-logo { display: block; height: 2rem; width: auto; }
/* Iconos de línea (icono()): trazo verde bosque con el detalle en menta; en la cabecera, blanco con detalle menta */
.ico { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--icono); }
.ico .d { stroke: var(--icono-detalle); }