:root {
    /* === Paleta oficial === */
    --color-50:  #e6f1fe;
    --color-100: #b9d7fd;
    --color-200: #8dbdfc;
    --color-300: #60a3fb;
    --color-400: #3389fa;
    --color-500: #066ff9;
    --color-600: #055bcc;
    --color-700: #04479f;
    --color-800: #03306b;
    --color-900: #021f46;
    --color-950: #010b19;

    /* rojo mate, solo para borrar */
    --rojo: #a94a4a;
    --rojo-oscuro: #8a3a3a;

    /* dorado, solo para los premios */
    --oro: #e0a92e;
    --oro-oscuro: #b8801a;
}

body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--color-900);
}

main {
    flex: 1;
}

/* ===== Barra de menu ===== */

.logo {
    height: 54px;
    width: auto;
}

.navbar .nav-link {
    color: var(--color-700);
    font-weight: 600;
    margin-left: 25px;
}

.navbar .nav-link:hover {
    color: var(--color-500);
}

.navbar .nav-link.active {
    color: var(--color-700);
    border-bottom: 3px solid var(--color-500);
}

/* --- Boton hamburguesa --- */

.navbar-toggler {
    border: none;
    padding: 4px 8px;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2304479f' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Menu desplegado en celular --- */

@media (max-width: 991.98px) {

    .navbar-collapse {
        margin-top: 12px;
        padding: 8px;
        border-top: 1px solid var(--color-100);
    }

    .navbar .nav-link {
        margin-left: 0;
        padding: 12px 16px;
        border-radius: 10px;
        border-bottom: none;
        transition: background-color 0.2s ease;
    }

    .navbar .nav-link:hover {
        background-color: var(--color-50);
    }

    .navbar .nav-link.active {
        background-color: var(--color-50);
        border-bottom: none;
        border-left: 4px solid var(--color-500);
        border-radius: 0 10px 10px 0;
    }

    .logo {
        height: 46px;
    }
}

/* ===== Portada (pagina de inicio) ===== */

.portada {
    background-color: #fff;
    padding: 70px 0 90px;
}

/* En celular va todo en columna: info, disciplinas y al final el boton */
.portada-fila {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- Escudo de la promocion organizadora --- */

.organiza {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 25px;
}

/* aca si hay sitio: grande, para que se lean los detalles del escudo */
.organiza-escudo {
    width: 115px;
    height: auto;
    flex-shrink: 0;
}

.organiza .etiqueta {
    margin-bottom: 0;
}

.etiqueta {
    display: inline-block;
    background-color: var(--color-900);
    color: var(--color-50);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 50px;
    margin-bottom: 25px;
}

.portada-titulo {
    font-size: 2.9rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1px;
    color: var(--color-950);
    margin-bottom: 22px;
    text-wrap: balance;
}

/* Evita que "Ex-Promos" se parta en dos lineas por el guion */
.sin-corte {
    white-space: nowrap;
}

.portada-bajada {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-700);
    max-width: 460px;
    margin-bottom: 25px;
}

/* --- Fecha y lugar --- */

.portada-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    font-size: 0.95rem;
    color: var(--color-900);
}

.portada-datos i {
    color: var(--color-500);
    margin-right: 6px;
}

/* --- Botones --- */

.boton {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

.boton-principal {
    background-color: var(--color-700);
    color: #fff;
    border: 1px solid var(--color-700);
}

.boton-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background-color: #25d366;
    color: #fff;
    border: 1px solid #25d366;
    margin-top: 6px;
}

.boton-whatsapp:hover {
    background-color: #1eb955;
    border-color: #1eb955;
    color: #fff;
    transform: translateY(-2px);
}

.boton-principal:hover {
    background-color: var(--color-500);
    border-color: var(--color-500);
    color: #fff;
    transform: translateY(-2px);
}

/* los botones de la portada, todos en una fila y del mismo ancho */
.portada-acciones {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}

.portada-acciones .boton {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px 10px;
    font-size: 0.88rem;
    white-space: nowrap;
}

/* --- Tarjetas de disciplinas --- */

.tarjeta {
    display: flex;
    align-items: center;
    gap: 18px;
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 16px;
    transition: all 0.25s ease;
}

.tarjeta:hover {
    border-color: var(--tono);
    transform: translateX(4px);
}

/* Cada disciplina con su tono de la paleta */
.tarjeta-master { --tono: var(--color-900); }
.tarjeta-libre  { --tono: var(--color-600); }
.tarjeta-voley  { --tono: var(--color-400); }

.tarjeta-icono {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: var(--tono);
    color: #fff;
    font-size: 1.25rem;
}

.tarjeta-datos {
    flex: 1;
}

.tarjeta-titulo {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-950);
    margin: 0;
}

.tarjeta-texto {
    font-size: 0.88rem;
    color: var(--color-700);
    margin: 0;
}

.boton-inscribir {
    flex-shrink: 0;
    background-color: var(--tono);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.boton-inscribir:hover {
    color: #fff;
    filter: brightness(1.25);
}

/* --- Portada en escritorio: info a la izquierda, disciplinas a la derecha --- */

@media (min-width: 992px) {

    .portada-fila {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 60px;
        align-content: center;
    }

    .portada-info       { grid-column: 1; grid-row: 1; }
    .portada-acciones   { grid-column: 1; grid-row: 2; margin-top: 25px; }
    .portada-disciplinas{ grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* --- Portada en celular --- */

@media (max-width: 991.98px) {

    .portada {
        padding: 45px 0 60px;
    }

    .portada-titulo {
        font-size: 2.2rem;
    }

    .organiza-escudo {
        width: 85px;
    }

    /* en celular se reparten de a dos por fila */
    .portada-acciones {
        flex-wrap: wrap;
    }

    .portada-acciones .boton {
        flex: 1 1 45%;
        padding: 13px 8px;
        font-size: 0.85rem;
    }

    .tarjeta {
        flex-wrap: wrap;
    }

    .boton-inscribir {
        width: 100%;
        text-align: center;
    }
}

/* ===== Premios (pagina de inicio) ===== */

.premios {
    background-color: var(--color-50);
    padding: 70px 0 80px;
}

.premios-cabecera {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 40px;
}

.premios-titulo {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-950);
    margin-bottom: 12px;
}

.premios-bajada {
    font-size: 1rem;
    color: var(--color-700);
    margin: 0;
}

/* --- Cada premio --- */

.premio {
    height: 100%;
    text-align: center;
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-radius: 16px;
    padding: 32px 24px 28px;
    transition: all 0.25s ease;
}

.premio:hover {
    border-color: var(--oro);
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(2, 31, 70, 0.08);
}

.premio-figura {
    width: 96px;
    height: 96px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(160deg, #fdf3dd, #f7e4b8);
}

.premio-icono {
    width: 58px;
    height: 58px;
}

.premio-titulo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-950);
    margin: 0 0 8px;
}

.premio-texto {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-700);
    margin: 0;
}

@media (max-width: 767.98px) {

    .premios {
        padding: 50px 0 55px;
    }

    .premios-titulo {
        font-size: 1.7rem;
    }
}

/* ===== Pagina de inscripciones ===== */

.inscripcion {
    padding: 55px 0 80px;
}

.inscripcion-cabecera {
    text-align: center;
    margin-bottom: 35px;
}

.inscripcion-titulo {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-950);
    margin-bottom: 12px;
}

.inscripcion-bajada {
    font-size: 1rem;
    color: var(--color-700);
    max-width: 540px;
    margin: 0 auto;
}

/* --- Tarjeta del formulario --- */

.formulario {
    --tono: var(--color-700);
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-radius: 18px;
    padding: 38px;
    box-shadow: 0 12px 35px rgba(2, 31, 70, 0.07);
}

/* El color cambia segun la categoria elegida */
.formulario-master { --tono: var(--color-900); }
.formulario-libre  { --tono: var(--color-600); }
.formulario-voley  { --tono: var(--color-400); }

/* --- Bloques (pasos) --- */

.bloque {
    margin-bottom: 38px;
}

.bloque-cabecera {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-100);
}

.paso {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--tono);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}

.bloque-titulo {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-950);
    margin: 0;
}

.bloque-texto {
    font-size: 0.85rem;
    color: var(--color-700);
    margin: 0;
}

.contador {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 50px;
    background-color: var(--color-50);
    color: var(--color-700);
    transition: all 0.25s ease;
}

.contador-listo {
    background-color: var(--tono);
    color: #fff;
}

/* --- Campos --- */

.etiqueta-campo {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-800);
    margin-bottom: 6px;
}

.campo {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--color-100);
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--color-950);
    background-color: #fff;
    transition: all 0.2s ease;
}

.campo:focus {
    outline: none;
    border-color: var(--tono);
    box-shadow: 0 0 0 3px rgba(6, 111, 249, 0.15);
}

select.campo {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2304479f' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
    cursor: pointer;
}

.ayuda {
    display: block;
    font-size: 0.78rem;
    color: var(--color-700);
    opacity: 0.75;
    margin-top: 5px;
}

/* --- Lista de integrantes --- */

.integrantes-titulos,
.integrante {
    display: grid;
    grid-template-columns: 38px 1fr 130px 175px 38px;
    gap: 12px;
    align-items: center;
}

.integrantes-titulos {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-700);
    padding-bottom: 8px;
}

.integrante {
    margin-bottom: 10px;
}

.integrante-numero {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-50);
    color: var(--tono);
    font-weight: 600;
    font-size: 0.85rem;
}

.boton-quitar {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rojo);
    border-radius: 8px;
    background-color: var(--rojo);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-quitar:hover:not(:disabled) {
    background-color: var(--rojo-oscuro);
    border-color: var(--rojo-oscuro);
    color: #fff;
    transform: scale(1.08);
}

.boton-quitar:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.boton-agregar {
    width: 100%;
    margin-top: 8px;
    padding: 12px 20px;
    border: 1px dashed var(--color-200);
    border-radius: 10px;
    background-color: #fff;
    color: var(--tono);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-agregar:hover {
    border-color: var(--tono);
    background-color: var(--color-50);
}

/* --- Pago --- */

.pago {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
}

.pago-qr {
    text-align: center;
    background-color: var(--color-50);
    border-radius: 14px;
    padding: 22px;
}

.qr {
    width: 100%;
    max-width: 190px;
    border-radius: 10px;
    background-color: #fff;
    padding: 8px;
}

.qr-falta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 190px;
    border: 2px dashed var(--color-200);
    border-radius: 10px;
    background-color: #fff;
    color: var(--color-700);
    font-size: 0.82rem;
}

.qr-falta i {
    font-size: 2.2rem;
    opacity: 0.5;
}

.pago-numero {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-950);
    margin: 16px 0 2px;
}

.pago-titular {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-950);
    margin: 0;
}

.pago-medio {
    font-size: 0.75rem;
    color: var(--color-700);
    opacity: 0.75;
    margin: 2px 0 0;
}

/* --- Subir la captura --- */

.zona-archivo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 150px;
    padding: 20px;
    border: 2px dashed var(--color-200);
    border-radius: 14px;
    background-color: #fff;
    color: var(--color-700);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.zona-archivo i {
    font-size: 1.9rem;
    color: var(--tono);
}

.zona-archivo:hover {
    border-color: var(--tono);
    background-color: var(--color-50);
}

.zona-archivo-lista {
    border-style: solid;
    border-color: var(--tono);
    background-color: var(--color-50);
}

/* El input real queda invisible pero NO con "hidden": si estuviera oculto
   del todo, el navegador no podria validarlo y bloquearia el envio. */
.entrada-archivo {
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.error-archivo {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-700);
}

.vista-previa {
    display: block;
    max-width: 100%;
    max-height: 260px;
    margin-top: 14px;
    border: 1px solid var(--color-100);
    border-radius: 12px;
}

/* --- Mensaje de inscripcion enviada --- */

.exito {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-radius: 18px;
    padding: 50px 38px;
    box-shadow: 0 12px 35px rgba(2, 31, 70, 0.07);
}

.exito-icono {
    width: 78px;
    height: 78px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-600);
    color: #fff;
    font-size: 2.4rem;
}

.exito-titulo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-950);
    margin-bottom: 14px;
}

.exito-texto {
    font-size: 1rem;
    color: var(--color-700);
    line-height: 1.65;
    margin-bottom: 28px;
}

/* --- Enviar --- */

.bloque-envio {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--color-100);
    padding-top: 24px;
}

/* --- Formulario en celular --- */

@media (max-width: 767.98px) {

    .inscripcion-titulo {
        font-size: 1.8rem;
    }

    .formulario {
        padding: 24px 18px;
    }

    .integrantes-titulos {
        display: none;
    }

    .integrante {
        grid-template-columns: 38px 1fr 34px;
        grid-template-areas:
            "numero nombre quitar"
            ".      dni    dni"
            ".      promo  promo";
        row-gap: 8px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--color-50);
    }

    .integrante > *:nth-child(1) { grid-area: numero; }
    .integrante > *:nth-child(2) { grid-area: nombre; }
    .integrante > *:nth-child(3) { grid-area: dni; }
    .integrante > *:nth-child(4) { grid-area: promo; }
    .integrante > *:nth-child(5) { grid-area: quitar; }

    .bloque-envio .boton {
        width: 100%;
        text-align: center;
    }

    .pago {
        grid-template-columns: 1fr;
    }

    .exito {
        padding: 38px 22px;
    }
}

/* ===== Ticket de inscripcion ===== */

/* fondo suave para que el ticket blanco resalte */
.fondo-suave {
    background-color: var(--color-50);
}

.enviada-cabecera {
    text-align: center;
    margin-bottom: 32px;
}

.enviada-ayuda {
    text-align: center;
    font-size: 0.88rem;
    color: var(--color-700);
    margin-top: 20px;
}

.enviada-botones {
    text-align: center;
    margin-top: 22px;
}

.ticket {
    --tono: var(--color-700);
    max-width: 420px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(2, 31, 70, 0.12);
}

.ticket-master { --tono: var(--color-900); }
.ticket-libre  { --tono: var(--color-600); }
.ticket-voley  { --tono: var(--color-400); }

/* --- Cabecera --- */

.ticket-cabecera {
    background: linear-gradient(160deg, var(--tono), var(--color-950));
    color: #fff;
    text-align: center;
    padding: 26px 22px 22px;
}

/* El logo va sobre una placa blanca: asi se ve bien sobre el fondo oscuro
   y tambien al descargar el ticket como imagen. */
.ticket-logo-caja {
    display: inline-block;
    background-color: #fff;
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 14px;
}

.ticket-logo {
    display: block;
    width: 186px;
    height: 76px;
}

.ticket-evento {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin: 0;
}

.ticket-tipo {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-200);
    margin: 4px 0 0;
}

/* --- Linea de corte con muescas a los costados --- */

.ticket-corte {
    position: relative;
    height: 22px;
    background-color: #fff;
}

.ticket-corte::before,
.ticket-corte::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--color-50);
    transform: translateY(-50%);
}

.ticket-corte::before { left: -11px; }
.ticket-corte::after  { right: -11px; }

/* la linea punteada entre las dos muescas */
.ticket-corte {
    background-image: linear-gradient(to right, var(--color-100) 60%, transparent 0%);
    background-position: center;
    background-size: 12px 2px;
    background-repeat: repeat-x;
}

/* --- Codigo --- */

.ticket-claves {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 6px 22px 0;
}

.ticket-codigo {
    text-align: center;
    padding: 6px 0 10px;
}

.ticket-aviso-clave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 22px 16px;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: var(--color-50);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tono);
    text-align: center;
}

.ticket-codigo-titulo {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--color-700);
    opacity: 0.7;
    margin-bottom: 4px;
}

.ticket-codigo-valor {
    display: inline-block;
    font-family: "Courier New", monospace;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-950);
}

/* --- Datos --- */

.ticket-cuerpo {
    padding: 0 26px 20px;
}

.ticket-fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--color-50);
    font-size: 0.9rem;
}

.ticket-fila:last-child {
    border-bottom: none;
}

.ticket-fila span {
    color: var(--color-700);
    opacity: 0.85;
    flex-shrink: 0;
}

.ticket-fila strong {
    color: var(--color-950);
    font-weight: 600;
    text-align: right;
}

/* --- Pie --- */

.ticket-pie {
    text-align: center;
    padding: 6px 26px 26px;
}

.ticket-estado {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 7px 18px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.ticket-estado-pendiente {
    background-color: var(--color-50);
    color: var(--tono);
}

.ticket-estado-confirmada {
    background-color: var(--color-600);
    color: #fff;
}

.ticket-estado-rechazada {
    background-color: var(--color-950);
    color: var(--color-200);
}

/* --- Botones de descarga --- */

.ticket-descargas {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.boton-descarga {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border: 1px solid var(--color-100);
    border-radius: 10px;
    background-color: #fff;
    color: var(--color-700);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-descarga:hover:not(:disabled) {
    border-color: var(--color-500);
    color: var(--color-600);
    transform: translateY(-2px);
}

.boton-descarga:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* --- Consultar inscripcion --- */

.enlace-consulta {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-600);
    text-decoration: none;
    border-bottom: 1px solid var(--color-200);
    padding-bottom: 2px;
    transition: all 0.2s ease;
}

.enlace-consulta:hover {
    color: var(--color-500);
    border-color: var(--color-500);
}

.consulta-perdida {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-700);
    opacity: 0.8;
    margin-top: 20px;
}

.enlace-salir {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-800);
    text-decoration: none;
    padding: 12px 24px;
    border: 1px solid var(--color-200);
    border-radius: 10px;
    background-color: var(--color-50);
    transition: all 0.2s ease;
}

.enlace-salir:hover {
    background-color: var(--color-900);
    border-color: var(--color-900);
    color: #fff;
}

.aviso-exito {
    border-left-color: var(--color-500);
    background-color: var(--color-50);
}

.consulta-caja {
    --tono: var(--color-700);
    max-width: 400px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 12px 35px rgba(2, 31, 70, 0.07);
}

.consulta-aviso {
    max-width: 400px;
}

.campo-codigo {
    font-family: "Courier New", monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ticket-nota {
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--color-700);
    opacity: 0.7;
    margin: 0;
}

/* --- Aviso de error --- */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto 22px;
    padding: 16px 20px;
    border: 1px solid var(--color-200);
    border-left: 4px solid var(--color-600);
    border-radius: 12px;
    background-color: var(--color-50);
    color: var(--color-900);
    font-size: 0.92rem;
}

.aviso i {
    color: var(--color-600);
    font-size: 1.1rem;
}

.aviso p {
    margin: 0;
}

/* ==========================================================
   Panel de administracion
   ========================================================== */

.cuerpo-admin {
    background-color: var(--color-50);
}

/* --- Pantalla de ingreso --- */

.ingreso {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.ingreso-caja {
    width: 100%;
    max-width: 400px;
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-radius: 18px;
    padding: 40px 32px;
    text-align: center;
    box-shadow: 0 12px 35px rgba(2, 31, 70, 0.08);
}

.ingreso-icono {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-900);
    color: #fff;
    font-size: 1.6rem;
}

.ingreso-titulo {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-950);
    margin-bottom: 4px;
}

.ingreso-texto {
    font-size: 0.85rem;
    color: var(--color-700);
    margin-bottom: 26px;
}

.ingreso-volver {
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-700);
    text-decoration: none;
}

.ingreso-volver:hover {
    color: var(--color-500);
}

/* --- Volver a la web desde el panel --- */

.admin-ver {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-100);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid rgba(230, 241, 254, 0.25);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.admin-ver:hover {
    background-color: rgba(230, 241, 254, 0.12);
    color: #fff;
}

/* --- Barra superior --- */

.admin-barra {
    background: linear-gradient(160deg, var(--color-900), var(--color-950));
    padding: 16px 0;
}

.admin-marca {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.admin-usuario {
    font-size: 0.78rem;
    color: var(--color-200);
    margin: 0;
}

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

/* boton hamburguesa: solo aparece en celular */
.admin-hamburguesa {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(230, 241, 254, 0.25);
    border-radius: 8px;
    background-color: transparent;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
}

.admin-hamburguesa:hover {
    background-color: rgba(230, 241, 254, 0.12);
}

.admin-menu > a {
    color: var(--color-100);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.admin-menu > a:hover {
    background-color: rgba(230, 241, 254, 0.12);
    color: #fff;
}

.admin-menu-activo {
    background-color: rgba(230, 241, 254, 0.16);
    color: #fff !important;
}

.admin-salir {
    color: var(--color-100);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid rgba(230, 241, 254, 0.25);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.admin-salir:hover {
    background-color: rgba(230, 241, 254, 0.12);
    color: #fff;
}

/* --- Contenido --- */

.admin-contenido {
    padding: 34px 15px 60px;
}

.admin-cabecera {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.admin-titulo {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--color-950);
    margin: 0;
}

.admin-total {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 50px;
    background-color: #fff;
    border: 1px solid var(--color-100);
    color: var(--color-700);
}

.admin-vacio {
    text-align: center;
    color: var(--color-700);
    padding: 50px 0;
}

/* --- Filtros --- */

.admin-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.filtro {
    padding: 8px 18px;
    border-radius: 50px;
    background-color: #fff;
    border: 1px solid var(--color-100);
    color: var(--color-700);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.filtro:hover {
    border-color: var(--color-400);
    color: var(--color-600);
}

.filtro-activo {
    background-color: var(--color-700);
    border-color: var(--color-700);
    color: #fff;
}

/* --- Una inscripcion --- */

.registro {
    --tono: var(--color-700);
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-left: 5px solid var(--tono);
    border-radius: 14px;
    margin-bottom: 18px;
    overflow: hidden;
}

.registro-master { --tono: var(--color-900); }
.registro-libre  { --tono: var(--color-600); }
.registro-voley  { --tono: var(--color-400); }

.registro-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-50);
}

.registro-codigo {
    display: inline-block;
    font-family: "Courier New", monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--tono);
    background-color: var(--color-50);
    padding: 3px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
}

.registro-clave {
    background-color: transparent;
    border: 1px dashed var(--color-200);
    color: var(--color-700);
    margin-left: 6px;
}

.registro-nombre {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-950);
    margin: 0;
}

.registro-datos {
    font-size: 0.82rem;
    color: var(--color-700);
    margin: 0;
}

.estado {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 14px;
    border-radius: 50px;
}

.estado-pendiente  { background-color: var(--color-50);  color: var(--color-700); }
.estado-confirmada { background-color: var(--color-600); color: #fff; }
.estado-rechazada  { background-color: var(--color-950); color: var(--color-200); }

.registro-cuerpo {
    padding: 14px 22px 16px;
}

/* --- Los datos van en una sola linea horizontal --- */

.registro-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.meta-dato {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-700);
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid var(--color-100);
    border-radius: 8px;
    background-color: #fff;
    transition: all 0.2s ease;
}

a.meta-dato:hover {
    border-color: var(--color-400);
    color: var(--color-600);
}

.meta-dato i {
    opacity: 0.7;
}

.meta-falta {
    color: var(--color-700);
    opacity: 0.55;
    border-style: dashed;
}

/* --- Boton de Excel --- */

.boton-excel {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    padding: 9px 18px;
    border: 1px solid var(--color-100);
    border-radius: 10px;
    background-color: #fff;
    color: var(--color-700);
    transition: all 0.2s ease;
}

.boton-excel:hover {
    border-color: var(--color-600);
    background-color: var(--color-600);
    color: #fff;
}

.registro-etiqueta {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-700);
    opacity: 0.7;
    margin: 0 0 3px;
}

.registro-valor {
    display: block;
    font-size: 0.92rem;
    color: var(--color-950);
    text-decoration: none;
    margin: 0 0 14px;
}

a.registro-valor,
.registro-valor a {
    color: var(--color-600);
    font-weight: 600;
    text-decoration: none;
}

/* --- Lista de integrantes que se despliega --- */

.desplegable summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--color-100);
    border-radius: 8px;
    background-color: var(--color-50);
    color: var(--color-700);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: all 0.2s ease;
}

/* saca el triangulito que pone el navegador */
.desplegable summary::-webkit-details-marker {
    display: none;
}

.desplegable summary:hover {
    border-color: var(--color-400);
    color: var(--color-600);
}

.desplegable .flecha {
    transition: transform 0.2s ease;
}

.desplegable[open] .flecha {
    transform: rotate(90deg);
}

.desplegable[open] summary {
    margin-bottom: 10px;
}

.tabla-integrantes {
    width: 100%;
    font-size: 0.88rem;
}

.tabla-integrantes td {
    padding: 6px 10px 6px 0;
    border-bottom: 1px solid var(--color-50);
    color: var(--color-950);
}

.tabla-integrantes td:first-child {
    width: 28px;
    color: var(--color-700);
    opacity: 0.6;
}

/* --- Acciones --- */

.registro-pie {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 22px;
    background-color: var(--color-50);
}

.accion {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid var(--color-100);
    color: var(--color-700);
    text-decoration: none;
    transition: all 0.2s ease;
}

.accion:hover {
    border-color: var(--color-400);
    color: var(--color-600);
}

.accion-confirmar:hover {
    background-color: var(--color-600);
    border-color: var(--color-600);
    color: #fff;
}

/* --- Borrar inscripcion --- */

.accion-borrar {
    margin-left: auto;
}

.accion-eliminar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    cursor: pointer;
    color: var(--rojo);
    border-color: var(--color-100);
}

.accion-eliminar:hover {
    background-color: var(--rojo);
    border-color: var(--rojo);
    color: #fff;
}

@media (max-width: 767.98px) {

    /* --- Barra del panel: menu que se despliega --- */

    .admin-barra .container {
        flex-wrap: wrap;
    }

    .admin-hamburguesa {
        display: flex;
    }

    .admin-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(230, 241, 254, 0.2);
    }

    .admin-menu.menu-abierto {
        display: flex;
    }

    .admin-menu > a {
        padding: 12px 16px;
        text-align: center;
    }

    .registro-cabecera {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== Cronograma (publico) ===== */

.cronograma-vacio {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-700);
}

.cronograma-vacio i {
    font-size: 2.8rem;
    opacity: 0.35;
    display: block;
    margin-bottom: 14px;
}

.cronograma-vacio p {
    font-weight: 600;
    margin: 0;
}

.cronograma-vacio-texto {
    font-weight: 400 !important;
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 6px !important;
}

/* --- Cada dia --- */

.dia {
    margin-bottom: 34px;
}

.dia-cabecera {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.dia-numero {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(160deg, var(--color-900), var(--color-950));
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.dia-mes {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-950);
    margin: 0;
    text-transform: capitalize;
}

.dia-cantidad {
    font-size: 0.82rem;
    color: var(--color-700);
    margin: 0;
}

/* --- Cada partido --- */

.encuentro {
    --tono: var(--color-700);
    display: grid;
    grid-template-columns: 90px 1fr 200px;
    gap: 16px;
    align-items: center;
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-left: 4px solid var(--tono);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 10px;
}

.encuentro-master { --tono: var(--color-900); }
.encuentro-libre  { --tono: var(--color-600); }
.encuentro-voley  { --tono: var(--color-400); }

.encuentro-cuando {
    display: flex;
    flex-direction: column;
}

.encuentro-hora {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-950);
}

.encuentro-cancha {
    font-size: 0.75rem;
    color: var(--color-700);
    opacity: 0.8;
}

.encuentro-equipos {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}

.equipo {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-950);
}

.encuentro-equipos .equipo:first-child {
    text-align: right;
}

.equipo-gana {
    color: var(--color-600);
}

.marcador {
    min-width: 62px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--tono);
    border-radius: 8px;
    padding: 4px 10px;
}

.marcador-vacio {
    background-color: var(--color-50);
    color: var(--color-700);
    font-weight: 600;
    font-size: 0.82rem;
}

.encuentro-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 50px;
    background-color: var(--color-50);
    color: var(--color-700);
    white-space: nowrap;
}

.chip-master { background-color: var(--color-900); color: #fff; }
.chip-libre  { background-color: var(--color-600); color: #fff; }
.chip-voley  { background-color: var(--color-400); color: #fff; }

@media (max-width: 767.98px) {

    .encuentro {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .encuentro-cuando {
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
    }

    .encuentro-etiquetas {
        justify-content: flex-start;
    }
}

/* ===== Posiciones ===== */

.grupo {
    --tono: var(--color-700);
    height: 100%;
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-radius: 14px;
    padding: 20px;
}

.grupo-master { --tono: var(--color-900); }
.grupo-libre  { --tono: var(--color-600); }
.grupo-voley  { --tono: var(--color-400); }

.grupo-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.grupo-letra {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: var(--tono);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
}

.grupo-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-950);
    margin: 0;
}

.grupo-texto {
    font-size: 0.8rem;
    color: var(--color-700);
    margin: 0;
}

/* --- La tabla --- */

.tabla-envoltura {
    overflow-x: auto;
}

.tabla-posiciones {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
}

.tabla-posiciones th {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-700);
    opacity: 0.75;
    text-align: center;
    padding: 6px 5px;
    border-bottom: 1px solid var(--color-100);
    white-space: nowrap;
}

.tabla-posiciones td {
    text-align: center;
    padding: 9px 5px;
    color: var(--color-950);
    border-bottom: 1px solid var(--color-50);
}

.tabla-posiciones .col-equipo {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.tabla-posiciones .col-puesto {
    width: 26px;
    color: var(--color-700);
    opacity: 0.7;
}

.tabla-posiciones .col-puntos {
    font-weight: 700;
    color: var(--color-950);
}

/* los que clasifican */
.tabla-posiciones tr.clasifica {
    background-color: var(--color-50);
}

.tabla-posiciones tr.clasifica .col-puesto {
    box-shadow: inset 3px 0 0 var(--tono);
    color: var(--tono);
    font-weight: 700;
    opacity: 1;
}

.posiciones-nota {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 26px;
    font-size: 0.85rem;
    color: var(--color-700);
}

.muestra-clasifica {
    width: 26px;
    height: 14px;
    border-radius: 4px;
    background-color: var(--color-50);
    box-shadow: inset 3px 0 0 var(--color-600);
}

/* ===== Goleadores (Bota de Oro) ===== */

.goleadores {
    max-width: 620px;
    margin: 34px auto 0;
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-radius: 16px;
    padding: 24px;
}

.goleadores-cabecera {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-50);
}

.goleadores-icono {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(160deg, #fdf3dd, #f7e4b8);
    color: var(--oro-oscuro);
    font-size: 1.2rem;
}

.goleadores-titulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-950);
    margin: 0;
}

.goleadores-texto {
    font-size: 0.82rem;
    color: var(--color-700);
    margin: 0;
}

.goleador {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-50);
}

.goleador:last-child {
    border-bottom: none;
}

.goleador-puesto {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-50);
    color: var(--color-700);
    font-size: 0.8rem;
    font-weight: 700;
}

.goleador-lider .goleador-puesto {
    background-color: var(--oro);
    color: #fff;
}

.goleador-datos {
    flex: 1;
}

.goleador-nombre {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-950);
    margin: 0;
}

.goleador-equipo {
    font-size: 0.78rem;
    color: var(--color-700);
    margin: 0;
}

.goleador-goles {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-700);
    white-space: nowrap;
}

.goleador-goles small {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.7;
}

.goleador-lider .goleador-goles {
    color: var(--oro-oscuro);
}

/* ===== Cargar resultado y goleadores (panel) ===== */

.volver {
    display: inline-block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-700);
    text-decoration: none;
    margin-bottom: 14px;
}

.volver:hover {
    color: var(--color-500);
}

.marcador-grande {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 20px;
    padding: 10px 0 24px;
}

.marcador-equipo {
    text-align: center;
}

.marcador-nombre {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-950);
    margin: 0 0 10px;
}

.campo-marcador {
    width: 82px;
    padding: 12px;
    font-size: 1.7rem;
    font-weight: 700;
    text-align: center;
}

.marcador-guion {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-700);
    opacity: 0.4;
    padding-bottom: 16px;
}

.goleadores-ayuda {
    font-size: 0.85rem;
    color: var(--color-700);
    background-color: var(--color-50);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.plantel {
    background-color: var(--color-50);
    border-radius: 12px;
    padding: 16px;
}

.plantel-titulo {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-950);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-100);
}

.plantel-jugador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
}

.plantel-nombre {
    font-size: 0.88rem;
    color: var(--color-950);
}

/* --- Boton de goleadores en el fixture --- */

.boton-goles {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-100);
    border-radius: 8px;
    background-color: #fff;
    color: var(--color-700);
    text-decoration: none;
    transition: all 0.2s ease;
}

.boton-goles:hover {
    border-color: var(--color-600);
    background-color: var(--color-600);
    color: #fff;
}

.punto-goles {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--oro);
    border: 2px solid #fff;
}

/* --- Usuarios --- */

.cuenta {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 12px;
}

.cuenta-icono {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: var(--color-50);
    color: var(--color-700);
    font-size: 1.1rem;
}

.cuenta-datos {
    flex: 1;
}

.cuenta-nombre {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-950);
    margin: 0;
}

.cuenta-rol {
    font-size: 0.8rem;
    color: var(--color-700);
    margin: 0;
}

.cuenta-tuyo {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-700);
    background-color: var(--color-50);
    border-radius: 50px;
    padding: 4px 12px;
}

.admin-rol {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: rgba(230, 241, 254, 0.18);
    border-radius: 50px;
    padding: 2px 9px;
    margin-left: 5px;
}

/* ===== Llaves ===== */

.cuadro-envoltura {
    overflow-x: auto;
    padding: 10px 20px 20px;
}

.cuadro {
    --tono: var(--color-700);
    display: flex;
    gap: 26px;
    min-width: min-content;
    justify-content: center;
}

.cuadro-master { --tono: var(--color-900); }
.cuadro-libre  { --tono: var(--color-600); }
.cuadro-voley  { --tono: var(--color-400); }

.cuadro-columna {
    display: flex;
    flex-direction: column;
    min-width: 220px;
}

/* Cada fase con su color: mientras mas avanza, mas fuerte.
   La final va en dorado, como la copa. */
.columna-grupos    { --tono: var(--color-500); }
.columna-octavos   { --tono: var(--color-600); }
.columna-cuartos   { --tono: var(--color-700); }
.columna-semifinal { --tono: var(--color-900); }
.columna-final     { --tono: var(--oro-oscuro); }

.cuadro-fase i {
    margin-right: 5px;
}

/* la final se destaca del resto */
.columna-final .cuadro-fase {
    border-bottom-color: var(--oro);
}

.columna-final .llave {
    border-color: var(--oro);
    box-shadow: 0 8px 22px rgba(224, 169, 46, 0.22);
}

.columna-final .llave-gana {
    background-color: #fdf3dd;
}

.cuadro-fase {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tono);
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--color-100);
}

/* los partidos se reparten para que la siguiente ronda quede al medio */
.cuadro-partidos {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 14px;
}

/* --- Columna de la fase de grupos --- */

.cuadro-columna-grupos {
    min-width: 300px;
}

.grupo-mini {
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-radius: 10px;
    padding: 12px 14px;
}

.grupo-mini-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tono);
    margin: 0 0 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--color-50);
}

.grupo-mini-listo {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-600);
}

.grupo-mini-partido {
    display: grid;
    grid-template-columns: 1fr 46px 1fr;
    gap: 6px;
    align-items: center;
    font-size: 0.78rem;
    color: var(--color-950);
    padding: 4px 0;
}

.grupo-mini-partido > span:first-child {
    text-align: right;
}

.grupo-mini-marcador {
    text-align: center;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--color-700);
    background-color: var(--color-50);
    border-radius: 5px;
    padding: 2px 0;
}

.llave-gana-texto {
    font-weight: 700;
    color: var(--tono);
}

.grupo-mini-pasan {
    font-size: 0.72rem;
    color: var(--color-700);
    margin: 9px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--color-50);
}

.grupo-mini-pasan strong {
    color: var(--tono);
}

.llave {
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-radius: 10px;
    overflow: hidden;
}

.llave-jugada {
    border-color: var(--tono);
}

.llave-lado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
}

.llave-lado + .llave-lado {
    border-top: 1px solid var(--color-50);
}

.llave-equipo {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-950);
}

.llave-pendiente {
    font-weight: 400;
    font-style: italic;
    color: var(--color-700);
    opacity: 0.65;
}

.llave-gol {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-700);
    min-width: 16px;
    text-align: right;
}

.llave-gana {
    background-color: var(--color-50);
}

.llave-gana .llave-equipo,
.llave-gana .llave-gol {
    color: var(--tono);
}

.llave-cuando {
    font-size: 0.72rem;
    color: var(--color-700);
    opacity: 0.7;
    text-align: center;
    margin: 0;
    padding: 6px;
    border-top: 1px solid var(--color-50);
}

/* ===== Fixture (panel) ===== */

.categoria-bloque {
    background-color: #fff;
    border: 1px solid var(--color-100);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 22px;
}

.categoria-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-50);
}

.categoria-titulo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-950);
    margin: 0;
}

.categoria-texto {
    font-size: 0.85rem;
    color: var(--color-700);
    margin: 4px 0 0;
}

.boton-sortear {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--color-700);
    border-radius: 10px;
    background-color: var(--color-700);
    color: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.boton-sortear:hover {
    background-color: var(--color-500);
    border-color: var(--color-500);
}

/* --- Filas de partidos --- */

.partidos-titulos,
.partido-fila {
    display: grid;
    grid-template-columns: 145px 100px 105px 145px 1fr 96px 40px;
    gap: 10px;
    align-items: center;
}

.partidos-titulos {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-700);
    opacity: 0.7;
    padding-bottom: 8px;
}

.partido-fila {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-50);
}

.campo-chico {
    padding: 8px 10px;
    font-size: 0.85rem;
}

.partido-fase {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-700);
}

.partido-equipos {
    font-size: 0.9rem;
    color: var(--color-950);
}

.partido-equipos em {
    font-style: normal;
    color: var(--color-700);
    opacity: 0.6;
    margin: 0 6px;
    font-size: 0.8rem;
}

.partido-marcador {
    display: flex;
    gap: 6px;
}

.campo-gol {
    width: 45px;
    padding: 8px 4px;
    text-align: center;
    font-weight: 700;
}

.fixture-guardar {
    position: sticky;
    bottom: 0;
    padding: 16px 0;
    background-color: var(--color-50);
    text-align: right;
}

@media (max-width: 991.98px) {

    .partidos-titulos {
        display: none;
    }

    .partido-fila {
        grid-template-columns: 1fr 1fr;
        padding: 14px 0;
    }

    .partido-equipos,
    .partido-fase {
        grid-column: 1 / -1;
    }
}

/* ===== Pie de pagina ===== */

.pie {
    background: linear-gradient(160deg, var(--color-900), var(--color-950));
    color: var(--color-50);
    padding: 20px 0;
}

.pie-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* el escudo va sobre una placa blanca: es azul y el pie es oscuro */
.pie-escudo {
    width: 46px;
    height: auto;
    flex-shrink: 0;
    background-color: #fff;
    border-radius: 10px;
    padding: 4px;
}

.pie-titulo {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin: 0;
}

.pie-texto {
    font-size: 0.82rem;
    color: var(--color-200);
    margin: 2px 0 0;
}

/* --- Iconos de redes --- */

.pie-derecha {
    display: flex;
    align-items: center;
    gap: 18px;
}

.pie-redes {
    display: flex;
    gap: 12px;
}

/* acceso al panel, discreto */
.pie-acceso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-200);
    opacity: 0.6;
    text-decoration: none;
    padding: 7px 14px;
    border: 1px solid rgba(230, 241, 254, 0.2);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.pie-acceso:hover {
    opacity: 1;
    color: #fff;
    border-color: rgba(230, 241, 254, 0.45);
}

.pie-redes a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(230, 241, 254, 0.08);
    border: 1px solid rgba(230, 241, 254, 0.18);
    color: var(--color-50);
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.25s ease;
}

/* Cada red con su color oficial al pasar el mouse */
.pie-redes a:hover {
    color: #fff;
    transform: translateY(-3px);
}

.red-tiktok:hover   { background-color: #000000; border-color: #69c9d0; }
.red-facebook:hover { background-color: #1877f2; border-color: #1877f2; }
.red-whatsapp:hover { background-color: #25d366; border-color: #25d366; }