/*
   Pura Gambeta — hoja de estilos principal.

   Acá vive el aspecto visual de toda la aplicación.
   Paleta oficial: VERDE + AZULES CLAROS + BLANCO.

   Índice:
     1. Colores oficiales
     2. Base
     3. Barra de arriba
     4. Contenido y tarjetas
     5. Textos
     6. Botones
     7. Formularios
     8. Mensajes (avisos, errores, confirmaciones)
     9. Panel: datos y grupos
    10. Pie de página
    11. Celulares
*/

/* ------------------------------------------------------------------
   1. LOS COLORES OFICIALES
   Los guardamos como "variables" para escribirlos una sola vez.
   Si algún día querés cambiar el verde, lo cambiás acá y cambia
   en TODA la aplicación de una.
------------------------------------------------------------------ */
:root {
    /* --- Verdes (el color principal, la energía) --- */
    --verde:          #12B76A;   /* verde cancha */
    --verde-oscuro:   #0E9A59;   /* para cuando el mouse pasa por encima */
    --verde-claro:    #6CE9A6;
    --verde-fondo:    #F0FDF4;   /* verde casi blanco, para fondos */

    /* --- Azules claros (el color de apoyo, la calma) --- */
    --azul:           #2E90FA;   /* azul claro principal */
    --azul-claro:     #84CAFF;
    --azul-fondo:     #EFF8FF;   /* azul casi blanco, para fondos */

    /* --- Blanco y tinta --- */
    --blanco:         #FFFFFF;
    --tinta:          #10333F;   /* azul muy oscuro: lo usamos para el TEXTO.
                                    Sobre fondo claro hace falta algo oscuro,
                                    si no, no se lee nada. */
    --tinta-suave:    #5A7684;   /* para textos secundarios */
    --borde:          #E3EDF2;

    /* --- Colores de aviso --- */
    --rojo:           #D92D20;
    --rojo-fondo:     #FEF3F2;
}

/* ------------------------------------------------------------------
   2. BASE
------------------------------------------------------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Al saltar a una sección con los atajos, se desliza en vez de
       aparecer de golpe. Se entiende mucho mejor adónde fuiste. */
    scroll-behavior: smooth;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Fondo luminoso: del verde casi blanco al azul casi blanco */
    background: linear-gradient(160deg, var(--verde-fondo) 0%, var(--azul-fondo) 100%);
    background-attachment: fixed;

    color: var(--tinta);
    min-height: 100vh;

    /* La página se organiza en tres franjas: barra, contenido y pie.
       Con flex el pie queda siempre abajo, aunque haya poco contenido. */
    display: flex;
    flex-direction: column;
}

a {
    color: var(--azul);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   3. LA BARRA DE ARRIBA
------------------------------------------------------------------ */
.barra {
    display: flex;
    align-items: center;
    justify-content: space-between;  /* logo a la izquierda, menú a la derecha */
    gap: 16px;
    padding: 12px 24px;
    background: var(--blanco);
    border-bottom: 1px solid var(--borde);

    /* La barra queda fija arriba: desde cualquier parte de la página
       se llega al menú sin tener que subir hasta el principio. */
    position: sticky;
    top: 0;
    z-index: 20;
}

.logo {
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tinta);
}

.logo:hover {
    text-decoration: none;
    color: var(--verde);
}

.menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.saludo-menu {
    font-size: 0.92rem;
    color: var(--tinta-suave);
}

/* El botón de salir va dentro de un formulario; le sacamos el espacio extra */
.form-salir {
    display: inline;
}

/* --- Los enlaces del menú de arriba --- */
.link-menu {
    padding: 7px 12px;
    border-radius: 9px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--tinta-suave);
    white-space: nowrap;
}

.link-menu:hover {
    background: var(--azul-fondo);
    color: var(--azul);
    text-decoration: none;
}

/* La sección en la que estás parado, resaltada */
.link-menu.activo {
    background: var(--verde-fondo);
    color: #05603A;
}

/* --- El desplegable de grupos ---
   Usa <details>, que abre y cierra sin nada de JavaScript. */
.menu-desplegable {
    position: relative;
}

.menu-desplegable summary {
    cursor: pointer;
    list-style: none;   /* saca la flechita del navegador */
}

.menu-desplegable summary::-webkit-details-marker {
    display: none;
}

/* Le ponemos nuestra propia flechita */
.menu-desplegable summary::after {
    content: " ▾";
    font-size: 0.75em;
}

.desplegable-contenido {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 13px;
    box-shadow: 0 12px 28px rgba(16, 51, 63, 0.14);
    padding: 6px;
    z-index: 30;
    display: flex;
    flex-direction: column;
}

.desplegable-contenido a {
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 0.92rem;
    color: var(--tinta);
}

.desplegable-contenido a:hover {
    background: var(--azul-fondo);
    text-decoration: none;
}

.desplegable-accion {
    border-top: 1px solid var(--borde);
    margin-top: 4px;
    padding-top: 10px !important;
    color: var(--verde) !important;
    font-weight: 600;
}

.desplegable-vacio {
    padding: 9px 12px;
    font-size: 0.88rem;
    color: var(--tinta-suave);
}

/* ------------------------------------------------------------------
   LOS ATAJOS: la fila que salta a cada sección de la página
------------------------------------------------------------------ */
.atajos {
    display: flex;
    gap: 7px;
    overflow-x: auto;        /* si no entran, se deslizan de costado */
    padding: 4px 0 8px;
    margin-bottom: -4px;

    /* Queda pegada abajo de la barra al hacer scroll */
    position: sticky;
    top: 57px;
    z-index: 15;

    /* Un fondo que tapa el contenido que pasa por detrás */
    background: linear-gradient(
        to bottom,
        var(--azul-fondo) 0%,
        var(--azul-fondo) 70%,
        transparent 100%
    );
}

/* Oculta la barrita de scroll horizontal, que afea */
.atajos::-webkit-scrollbar {
    display: none;
}

.atajos a {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--tinta-suave);
    white-space: nowrap;
}

.atajos a:hover {
    border-color: var(--azul);
    color: var(--azul);
    text-decoration: none;
}

/* Un atajo que reclama atención (solicitudes pendientes) */
.atajos .atajo-alerta {
    background: #FFFAEB;
    border-color: #F79009;
    color: #B54708;
}

/* ------------------------------------------------------------------
   4. CONTENIDO Y TARJETAS
------------------------------------------------------------------ */
.contenido {
    flex: 1;                  /* ocupa todo el espacio sobrante */
    width: 100%;
    max-width: 640px;
    margin: 0 auto;           /* centra horizontalmente */
    padding: 24px 20px 48px;

    /* Las páginas ahora tienen varias tarjetas, una por sección.
       Este gap las separa sin tener que poner márgenes a mano. */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 20px;
    padding: 26px 24px;

    /* Sombra suave y azulada, para que la tarjeta flote sobre el fondo */
    box-shadow: 0 10px 26px rgba(46, 144, 250, 0.10);

    /* position: relative es necesario para ubicar la franja de color de abajo */
    position: relative;
    overflow: hidden;

    /* Cuando saltamos a una sección con los atajos, este margen evita
       que el título quede tapado por la barra de arriba. */
    scroll-margin-top: 110px;
}

.tarjeta-centrada {
    text-align: center;
}

/* Una tarjeta que pide atención: hay algo pendiente de resolver */
.tarjeta-atencion {
    background: #FFFCF5;
    border-color: #FEDF89;
}

.tarjeta-atencion::before {
    background: linear-gradient(90deg, #F79009 0%, #DC6803 100%);
}

/* Una tarjeta de lo que casi nunca se toca: va al final y no grita */
.tarjeta-discreta {
    box-shadow: none;
    background: transparent;
    border-style: dashed;
}

.tarjeta-discreta::before {
    display: none;
}

/* Una fila de "esto te falta hacer": texto a la izquierda, botón a la derecha */
.fila-pendiente {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 0;
    line-height: 1.5;
}

.fila-pendiente + .fila-pendiente {
    border-top: 1px solid var(--borde);
}

/* Una franja verde→azul en el borde de arriba de la tarjeta.
   ::before crea un elemento decorativo sin ensuciar el HTML. */
.tarjeta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--verde) 0%, var(--azul) 100%);
}

/* ------------------------------------------------------------------
   5. LOS TEXTOS
------------------------------------------------------------------ */
.saludo {
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin-bottom: 8px;
}

.marca {
    font-size: 2.7rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.titulo {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.subtitulo {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin: 26px 0 12px;
}

/* El título de una tarjeta-sección. Más grande que .subtitulo:
   ahora cada sección es una tarjeta propia y necesita jerarquía. */
.titulo-seccion {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--tinta);
    margin-bottom: 14px;
}

.bajada {
    margin-top: 10px;
    font-size: 1.02rem;
    color: var(--tinta-suave);
}

.nota {
    margin-top: 18px;
    font-size: 0.92rem;
    color: var(--tinta-suave);
}

.ayuda {
    margin-top: -8px;
    margin-bottom: 4px;
    font-size: 0.82rem;
    color: var(--tinta-suave);
    line-height: 1.5;
}

/* Una ayuda que además avisa de algo: se pone naranja */
.ayuda-alerta {
    color: #B54708;
    font-weight: 600;
}

/* Línea decorativa que separa secciones */
.separador {
    height: 3px;
    width: 64px;
    margin: 26px auto;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--verde), var(--azul-claro));
}

.separador-izq {
    margin-left: 0;
}

.regla-titulo {
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin-bottom: 12px;
}

.regla {
    font-size: 1.1rem;
    line-height: 1.65;
}

/* El <strong> resalta las tres palabras clave de la regla de oro */
.regla strong {
    color: var(--verde);
    font-weight: 700;
}

/* ------------------------------------------------------------------
   6. BOTONES
------------------------------------------------------------------ */
.boton {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 11px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1.5px solid transparent;

    /* transition hace que el cambio de color sea suave y no de golpe */
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.boton:hover {
    text-decoration: none;
}

/* Botón principal: verde lleno. El de "hacer la acción importante". */
.boton-lleno {
    background: var(--verde);
    color: var(--blanco);
}

.boton-lleno:hover {
    background: var(--verde-oscuro);
}

/* Botón secundario: solo el borde. Para acciones menos importantes. */
.boton-borde {
    background: var(--blanco);
    color: var(--tinta);
    border-color: var(--borde);
}

.boton-borde:hover {
    border-color: var(--azul-claro);
    color: var(--azul);
}

/* Ocupa todo el ancho disponible */
.boton-ancho {
    display: block;
    width: 100%;
    margin-top: 22px;
    text-align: center;
}

/* Botón chico, para las acciones dentro de una lista */
.boton-chico {
    padding: 7px 13px;
    font-size: 0.84rem;
}

/* La acción principal de una pantalla. Grande y sola, para que se vea
   de una que es LO que se viene a hacer acá. */
.boton-grande {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 1.02rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;
}

/* Botón de acciones delicadas, como salir de un grupo */
.boton-peligro {
    background: var(--blanco);
    color: var(--rojo);
    border-color: #FCCFC9;
}

.boton-peligro:hover {
    background: var(--rojo-fondo);
    border-color: var(--rojo);
}

/* Una etiqueta que además es un botón: sirve para cambiar el rol
   de alguien tocando su propia etiqueta. */
.boton-etiqueta {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.boton-etiqueta:hover {
    filter: brightness(0.94);
}

/* Formulario metido dentro de una línea, sin ocupar espacio propio */
.form-linea {
    display: inline;
}

/* ------------------------------------------------------------------
   7. FORMULARIOS
------------------------------------------------------------------ */
.formulario {
    margin-top: 26px;
    text-align: left;
}

.formulario label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tinta);
}

.formulario input {
    width: 100%;
    padding: 11px 13px;
    margin-bottom: 16px;
    border: 1.5px solid var(--borde);
    border-radius: 11px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--tinta);
    background: var(--blanco);
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* :focus = cuando el cursor está escribiendo en ese campo.
   El resaltado azul le avisa a la persona dónde está parada. */
.formulario input:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.15);
}

.formulario input::placeholder {
    color: #A9BCC6;
}

/* Los desplegables (elegir deporte) se ven igual que los campos de texto */
.formulario select {
    width: 100%;
    padding: 11px 13px;
    margin-bottom: 16px;
    border: 1.5px solid var(--borde);
    border-radius: 11px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--tinta);
    background: var(--blanco);
    cursor: pointer;
}

.formulario select:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.15);
}

/* El campo con el link de invitación: se selecciona entero de un toque */
.campo-link {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--borde);
    border-radius: 11px;
    font-size: 0.86rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    color: var(--tinta-suave);
    background: var(--azul-fondo);
    cursor: pointer;
}

/* Campo del código SMS: grande, centrado y con las letras separadas,
   para que los 6 dígitos se lean de un golpe de vista. */
.campo-codigo {
    font-size: 1.9rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5em;
    text-indent: 0.5em;   /* compensa el espacio extra del último dígito */
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ------------------------------------------------------------------
   8. MENSAJES (los avisos que manda Python con flash())
------------------------------------------------------------------ */
.mensajes {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mensaje {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.93rem;
    border-left: 4px solid;   /* la franja de color a la izquierda */
}

/* Verde: salió todo bien */
.mensaje-exito {
    background: var(--verde-fondo);
    border-color: var(--verde);
    color: #05603A;
}

/* Rojo: algo falló */
.mensaje-error {
    background: var(--rojo-fondo);
    border-color: var(--rojo);
    color: #912018;
}

/* Azul: información neutra */
.mensaje-aviso {
    background: var(--azul-fondo);
    border-color: var(--azul);
    color: #0B4A6F;
}

/* ------------------------------------------------------------------
   9. PANEL: datos y grupos
------------------------------------------------------------------ */
.datos {
    display: grid;
    grid-template-columns: auto 1fr;   /* dos columnas: etiqueta y valor */
    gap: 8px 18px;
    font-size: 0.97rem;
}

.datos dt {
    color: var(--tinta-suave);
    font-weight: 600;
}

.lista-grupos {
    list-style: none;   /* saca los puntitos */
}

.lista-grupos li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--borde);
    border-radius: 12px;
}

.nombre-grupo {
    font-weight: 600;
}

/* Fila de una solicitud pendiente: nombre a la izquierda,
   los dos botones a la derecha */
.fila-solicitud .acciones {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Etiqueta chiquita que muestra el rol dentro del grupo */
.etiqueta {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;   /* redondeado total: forma de pastilla */
}

.etiqueta-organizador {
    background: var(--verde-fondo);
    color: #05603A;
}

.etiqueta-jugador {
    background: var(--azul-fondo);
    color: #0B4A6F;
}

/* Email todavía sin confirmar */
.etiqueta-pendiente {
    background: #FFFAEB;
    color: #B54708;
}

/* --- Insignias del panel: nivel y super admin --- */
.insignias {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* Super admin: azul profundo, para que se distinga de todo lo demás */
.etiqueta-superadmin {
    background: linear-gradient(135deg, var(--azul) 0%, #0B4A6F 100%);
    color: var(--blanco);
}

/* Los niveles del modo carrera, de menor a mayor */
.etiqueta-nivel-bronce  { background: #FDF0E6; color: #93370D; }
.etiqueta-nivel-plata   { background: #F2F4F7; color: #475467; }
.etiqueta-nivel-oro     { background: #FEF7C3; color: #854A0E; }
.etiqueta-nivel-platino { background: var(--azul-fondo); color: #0B4A6F; }

/* Titanio: el más alto. Degradado verde→azul, la identidad de la marca. */
.etiqueta-nivel-titanio {
    background: linear-gradient(135deg, var(--verde) 0%, var(--azul) 100%);
    color: var(--blanco);
}

/* --- Números grandes del panel de administración --- */
.numeros {
    display: grid;
    /* auto-fit + minmax: las columnas se acomodan solas según el ancho.
       En la compu entran tres al lado; en el celular, una debajo de otra. */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.numero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: var(--azul-fondo);
}

.numero-valor {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tinta);
}

.numero-etiqueta {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

/* El recuadro que recuerda confirmar el email, dentro del panel */
.aviso-verificacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;   /* en el celular, el botón baja abajo */
    line-height: 1.5;
}

.vacio {
    font-size: 0.95rem;
    color: var(--tinta-suave);
    line-height: 1.6;
}

/* Un subtítulo más chico, para separar dentro de una sección */
.subtitulo-chico {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tinta-suave);
    margin: 16px 0 8px;
}

/* Listas de menor importancia (los que no van, los partidos jugados) */
.lista-apagada {
    opacity: 0.65;
}

/* ------------------------------------------------------------------
   LA LISTA DE PARTIDOS
   Tres columnas: cuándo, dónde, y cuántos van.
------------------------------------------------------------------ */
.lista-partidos {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fila-partido {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--borde);
    border-radius: 13px;
    color: var(--tinta);
    transition: border-color 0.15s, background-color 0.15s;
}

.fila-partido:hover {
    border-color: var(--azul-claro);
    background: var(--azul-fondo);
    text-decoration: none;
}

/* La fecha, en una columna angosta y fija */
.fecha-partido {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 46px;
    line-height: 1.2;
}

.fecha-partido strong {
    font-size: 1rem;
}

.fecha-partido .hora {
    font-size: 0.78rem;
    color: var(--tinta-suave);
}

/* El lugar y la categoría, ocupando el espacio del medio */
.datos-partido {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;   /* deja que el texto largo se recorte */
}

.lugar-partido {
    font-weight: 600;
    font-size: 0.94rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-categoria,
.mini-deporte,
.mini-rate {
    font-size: 0.76rem;
    color: var(--tinta-suave);
    font-weight: 400;
}

.mini-deporte,
.mini-rate {
    margin-left: 7px;
}

/* Cuántos van, a la derecha */
.cupo-partido {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.94rem;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--azul-fondo);
    color: #0B4A6F;
}

.cupo-partido.completo {
    background: var(--verde-fondo);
    color: #05603A;
}

/* ------------------------------------------------------------------
   PARTIDOS
------------------------------------------------------------------ */

/* La nota del organizador */
.nota-partido {
    margin-top: 16px;
    padding: 12px 15px;
    background: var(--azul-fondo);
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* El contador de anotados: lo primero que quiere ver cualquiera */
.marcador {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px solid var(--borde);
    border-radius: 16px;
    background: var(--verde-fondo);
}

.marcador-numero {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--verde);
}

.marcador-de {
    font-size: 1.05rem;
    color: var(--tinta-suave);
}

.marcador-faltan {
    margin-left: auto;
    font-size: 0.88rem;
    color: var(--tinta-suave);
}

/* El número de orden en la lista de anotados */
.orden {
    display: inline-block;
    min-width: 22px;
    color: var(--tinta-suave);
    font-weight: 400;
}

/* Los tres botones de respuesta, uno al lado del otro */
.botonera-respuesta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.boton-respuesta {
    background: var(--blanco);
    color: var(--tinta);
    border-color: var(--borde);
}

.boton-respuesta:hover {
    border-color: var(--azul-claro);
}

/* La respuesta elegida queda marcada, para que se vea de un vistazo
   qué contestaste sin tener que buscarte en la lista. */
.boton-respuesta.elegido {
    border-width: 2px;
    font-weight: 700;
}

.boton-respuesta-voy.elegido {
    background: var(--verde-fondo);
    border-color: var(--verde);
    color: #05603A;
}

.boton-respuesta-no_voy.elegido {
    background: var(--rojo-fondo);
    border-color: var(--rojo);
    color: #912018;
}

.boton-respuesta-tal_vez.elegido {
    background: #FFFAEB;
    border-color: #F79009;
    color: #B54708;
}

/* ------------------------------------------------------------------
   EL RESULTADO Y LOS EQUIPOS
------------------------------------------------------------------ */

/* El marcador grande del partido jugado */
.resultado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
    padding: 22px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--verde-fondo), var(--azul-fondo));
    border: 1px solid var(--borde);
}

.resultado-equipo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.resultado-nombre {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.resultado-goles {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tinta-suave);
}

/* El que ganó se pinta de verde */
.resultado-goles.gano {
    color: var(--verde);
}

.resultado-guion {
    font-size: 1.4rem;
    color: var(--tinta-suave);
}

/* Cómo te fue a vos en ese partido */
.mi-resultado {
    margin-top: 10px;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
}

.mi-resultado-ganado   { color: var(--verde); }
.mi-resultado-empatado { color: var(--tinta-suave); }
.mi-resultado-perdido  { color: var(--rojo); }

/* Las dos columnas de equipos */
.equipos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.equipo {
    padding: 14px;
    border: 1px solid var(--borde);
    border-radius: 14px;
}

.equipo-claros  { background: var(--verde-fondo); }
.equipo-oscuros { background: var(--azul-fondo); }

.equipo-titulo {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin-bottom: 10px;
}

.equipo-lista {
    list-style: none;
    font-size: 0.95rem;
}

.equipo-lista li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

/* La flechita para pasar a alguien al otro equipo */
.mover {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--tinta-suave);
    font-size: 1rem;
    padding: 0 4px;
    border-radius: 6px;
}

.mover:hover {
    background: var(--blanco);
    color: var(--azul);
}

/* El formulario para cargar los goles, todo en una línea */
.formulario-resultado {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.formulario-resultado label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tinta-suave);
}

.formulario-resultado input {
    width: 62px;
    padding: 8px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    border: 1.5px solid var(--borde);
    border-radius: 10px;
    font-family: inherit;
    color: var(--tinta);
}

.formulario-resultado input:focus {
    outline: none;
    border-color: var(--azul);
}

/* Un número destacado en verde, para los partidos ganados */
.numero-verde {
    background: var(--verde-fondo);
}

.numero-verde .numero-valor {
    color: var(--verde);
}

/* En el celular, los equipos van uno debajo del otro */
@media (max-width: 480px) {
    .equipos { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   CATEGORIAS, ESTADISTICAS Y RATE
------------------------------------------------------------------ */

/* La etiqueta con el tipo de partido */
.etiqueta-categoria {
    background: var(--tinta);
    color: var(--blanco);
}

/* El rate del jugador, con el degradado de la marca */
.etiqueta-rate {
    background: linear-gradient(135deg, var(--verde) 0%, var(--azul) 100%);
    color: var(--blanco);
}

/* Resultado sin marcador ("Ganaron los claros") */
.resultado-simple {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--tinta);
}

/* Los numeritos de gol/asistencia al lado del nombre */
.stat {
    font-size: 0.78rem;
    margin-left: 4px;
    white-space: nowrap;
}

/* Etiqueta mini de equipo dentro de la tabla de estadísticas */
.etiqueta-claros-mini,
.etiqueta-oscuros-mini {
    font-size: 0.66rem;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.etiqueta-claros-mini  { background: var(--verde-fondo); color: #05603A; }
.etiqueta-oscuros-mini { background: var(--azul-fondo);  color: #0B4A6F; }

/* La tabla para cargar goles y asistencias de cada uno */
.tabla-stats {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
    font-size: 0.92rem;
}

.tabla-stats th {
    text-align: center;
    padding: 8px 4px;
    font-size: 0.9rem;
    color: var(--tinta-suave);
    border-bottom: 1px solid var(--borde);
}

.tabla-stats th:first-child {
    text-align: left;
}

.tabla-stats td {
    padding: 6px 4px;
    text-align: center;
    border-bottom: 1px solid var(--borde);
}

.tabla-stats .celda-nombre {
    text-align: left;
    font-weight: 600;
}

.tabla-stats input {
    width: 52px;
    padding: 6px;
    text-align: center;
    border: 1.5px solid var(--borde);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--tinta);
}

.tabla-stats input:focus {
    outline: none;
    border-color: var(--azul);
}

/* El desplegable que explica las categorías */
.explicacion {
    margin: -6px 0 16px;
    font-size: 0.85rem;
    color: var(--tinta-suave);
}

.explicacion summary {
    cursor: pointer;
    font-weight: 600;
    padding: 4px 0;
}

.lista-categorias {
    list-style: none;
    margin-top: 10px;
}

.lista-categorias li {
    padding: 8px 0;
    border-bottom: 1px solid var(--borde);
    line-height: 1.5;
}

.lista-categorias .mide {
    display: block;
    font-size: 0.8rem;
    opacity: 0.85;
    margin-top: 2px;
}

/* Las opciones de "quién ganó" cuando no hay marcador */
.opcion-resultado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border: 1.5px solid var(--borde);
    border-radius: 11px;
    cursor: pointer;
    font-size: 0.92rem;
    background: var(--blanco);
}

.opcion-resultado.elegido {
    border-color: var(--verde);
    background: var(--verde-fondo);
    font-weight: 700;
}

/* Una opción con casilla para tildar */
.opcion-tildar {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    margin-bottom: 8px;
    border: 1.5px solid var(--borde);
    border-radius: 13px;
    cursor: pointer;
    background: var(--blanco);
    line-height: 1.5;
}

.opcion-tildar:hover {
    border-color: var(--azul-claro);
}

.opcion-tildar input {
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.opcion-tildar .ayuda {
    margin: 0;
}

/* Las tarjetas para elegir el nivel inicial */
.opciones-nivel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 22px 0;
}

.opcion-nivel {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--borde);
    border-radius: 14px;
    cursor: pointer;
    background: var(--blanco);
    transition: border-color 0.15s, background-color 0.15s;
}

.opcion-nivel:hover {
    border-color: var(--azul-claro);
}

.opcion-nivel.elegido {
    border-color: var(--verde);
    background: var(--verde-fondo);
}

.opcion-nivel input {
    grid-row: span 2;
    align-self: center;
}

.opcion-titulo {
    font-weight: 700;
    color: var(--tinta);
}

.opcion-detalle {
    font-size: 0.87rem;
    color: var(--tinta-suave);
}

/* Los estados del partido, cada uno con su color */
.etiqueta-estado-convocando { background: var(--azul-fondo);  color: #0B4A6F; }
.etiqueta-estado-confirmado { background: var(--verde-fondo); color: #05603A; }
.etiqueta-estado-jugado     { background: #F2F4F7;            color: #475467; }
.etiqueta-estado-cancelado  { background: var(--rojo-fondo);  color: #912018; }

/* ------------------------------------------------------------------
   10. PIE DE PÁGINA
------------------------------------------------------------------ */
.pie-pagina {
    text-align: center;
    padding: 22px 20px;
    font-size: 0.85rem;
    color: var(--tinta-suave);
}

/* ------------------------------------------------------------------
   11. CELULARES
   Si la pantalla mide 480px o menos, achicamos algunas cosas.
------------------------------------------------------------------ */
@media (max-width: 560px) {
    .barra {
        padding: 10px 14px;
        gap: 8px;
        /* En el celular la barra se parte en dos filas: el logo
           arriba y el menú abajo, deslizable de costado. */
        flex-wrap: wrap;
    }

    .logo { font-size: 1.05rem; }

    .menu {
        width: 100%;
        gap: 4px;
        overflow-x: auto;      /* el menú se desliza si no entra */
        padding-bottom: 2px;
    }

    .menu::-webkit-scrollbar { display: none; }

    .link-menu {
        padding: 6px 9px;
        font-size: 0.85rem;
    }

    /* En pantalla chica el desplegable ocupa casi todo el ancho */
    .desplegable-contenido {
        right: auto;
        left: 0;
        min-width: 200px;
    }

    .atajos    { top: 96px; }   /* la barra ahora es más alta */
    .tarjeta   { scroll-margin-top: 150px; padding: 22px 18px; }

    .boton     { padding: 9px 14px; font-size: 0.88rem; }
    .contenido { padding: 18px 12px 40px; }
    .marca     { font-size: 2.1rem; }
    .titulo    { font-size: 1.5rem; }
    .titulo-seccion { font-size: 1.08rem; }
    .saludo-menu { display: none; }

    /* La fila de partido, más compacta */
    .fila-partido  { gap: 10px; padding: 11px; }
    .fecha-partido { min-width: 42px; }
}