/* =====================================================================
   Padel Torneos web - estilos
   Mismos colores que la app. Pensado para movil primero.
   ===================================================================== */

:root {
    --verde: #0b6e4f;
    --verde-oscuro: #07543c;
    --naranja: #f2a104;
    --peligro: #c0392b;
    --texto: #1b1b1b;
    --suave: #6b6b6b;
    --fondo: #f4f6f5;
    --tarjeta: #ffffff;
    --borde: #dde3e0;
}

* { box-sizing: border-box; }

/* Android agranda el texto de las columnas estrechas por su cuenta
   (font boosting). Eso descuadraba el cuadro al imprimir desde el movil. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

/* ---------- Barra superior ---------- */
.barra {
    background: var(--verde);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}
.barra-int {
    max-width: 900px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.barra-titulo { font-weight: 700; font-size: 1.05rem; flex: 1; }
.barra a, .volver { color: #fff; text-decoration: none; }
.barra-nav { display: flex; align-items: center; gap: 14px; }
.barra-nav a { font-size: 0.95rem; }
.barra-nav a:hover { text-decoration: underline; }

/* La flecha de volver: un boton redondo, no un caracter suelto */
.volver {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    transition: background 0.15s;
}
.volver:hover { background: rgba(255, 255, 255, 0.28); text-decoration: none; }

/* Salir: la puerta, al final del todo y algo separada del resto */
.barra-nav .salir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-left: 4px;
    background: rgba(255, 255, 255, 0.14);
    transition: background 0.15s;
}
.barra-nav .salir:hover { background: rgba(255, 255, 255, 0.28); text-decoration: none; }
.salir-texto { display: none; }

/* ---------------------------------------------------------------------
   Menu de movil
   En pantalla ancha no existe: el menu va en linea, como siempre. En
   estrecha, la barra se queda en una sola fila (volver, logo, titulo y
   hamburguesa) y el menu se despliega debajo al pulsarla.

   Sin JavaScript: lo abre y lo cierra una casilla escondida. La casilla
   sigue existiendo para el teclado -se marca con la barra espaciadora-,
   solo que no se ve.
   --------------------------------------------------------------------- */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.menu-check {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.menu-boton { display: none; }
.menu-aspa { display: none; }

@media (max-width: 720px) {
    /* Una sola fila: el titulo se recorta antes que romper la barra */
    .barra-int { flex-wrap: nowrap; gap: 10px; }
    .barra-titulo {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem;
    }
    .barra-logo img { width: 30px; height: 30px; }

    .menu-boton {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 9px;
        color: #fff;
        background: rgba(255, 255, 255, 0.14);
        cursor: pointer;
    }
    .menu-boton:active { background: rgba(255, 255, 255, 0.3); }
    .menu-check:focus-visible + .menu-boton { outline: 2px solid #fff; outline-offset: 2px; }

    /* El menu, desplegado debajo de la barra y a lo ancho */
    .barra-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--verde-oscuro, #0a5a41);
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
        z-index: 50;
    }
    .menu-check:checked ~ .barra-nav { display: flex; }
    .menu-check:checked + .menu-boton .menu-rayas { display: none; }
    .menu-check:checked + .menu-boton .menu-aspa  { display: block; }

    .barra-nav a {
        padding: 13px 18px;
        font-size: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .barra-nav a:last-child { border-bottom: none; }
    .barra-nav a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.1); }

    /* Salir deja de ser solo un icono: en una lista hace falta el texto */
    .barra-nav .salir {
        width: auto;
        height: auto;
        border-radius: 0;
        margin-left: 0;
        background: none;
        justify-content: flex-start;
        gap: 10px;
    }
    .barra-nav .salir:hover { background: rgba(255, 255, 255, 0.1); }
    .salir-texto { display: inline; }

    /* La barra es el ancla del desplegable */
    .barra { position: relative; }
}

/* ---------- Contenido ---------- */
.contenido { max-width: 900px; margin: 0 auto; padding: 16px; }
.centrado { max-width: 460px; margin: 0 auto; }
.pie {
    max-width: 900px;
    margin: 24px auto;
    padding: 16px;
    color: var(--suave);
    font-size: 0.85rem;
    text-align: center;
}

h1 { font-size: 1.5rem; color: var(--verde-oscuro); margin: 12px 0 4px; }
h2 { font-size: 1.15rem; margin: 8px 0; }
h3 { font-size: 1.05rem; margin: 4px 0; }
p { margin: 6px 0; }
a { color: var(--verde); }

.titulo-app { text-align: center; letter-spacing: 1px; }
.suave { color: var(--suave); font-size: 0.9rem; }
.centro { text-align: center; }
.estado { color: var(--verde); font-weight: 700; }
.mio { color: #8a5a00; font-weight: 700; }
.peligro { color: var(--peligro); font-size: 0.9rem; }
.ronda {
    background: var(--borde);
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 20px;
}

/* ---------- Tarjetas ---------- */
.tarjeta {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
}

/* ---------- Avisos ---------- */
.aviso {
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 0.95rem;
}
.aviso-ok { background: #e6f4ec; border: 1px solid var(--verde); color: var(--verde-oscuro); }
.aviso-error { background: #fdecea; border: 1px solid var(--peligro); color: #8a1f14; }

/* ---------- Formularios ---------- */
label { display: block; margin-top: 10px; font-size: 0.9rem; color: var(--suave); }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=time], input[type=number], select, textarea {
    width: 100%;
    padding: 10px;
    margin-top: 4px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--texto);
}
textarea { resize: vertical; }

.boton {
    display: inline-block;
    background: var(--verde);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    margin: 6px 4px 0 0;
}
.boton:hover { background: var(--verde-oscuro); }
.boton-ancho { display: block; width: 100%; text-align: center; margin-top: 16px; }
.boton-flojo { background: var(--naranja); color: #3a2a00; }
.boton-flojo:hover { background: #d98f03; }
.boton-peligro { background: var(--peligro); }
.boton-peligro:hover { background: #96271b; }

.en-linea { display: inline-block; margin: 0 4px 0 0; }
.acciones { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

details { margin-top: 10px; }
summary { cursor: pointer; color: var(--verde); font-weight: 700; font-size: 0.9rem; }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 6px 4px; text-align: left; border-bottom: 1px solid var(--borde); }
th { color: var(--suave); font-weight: 600; }
td input { margin-top: 0; }

/* ---------- Partidos ---------- */
.partido .enfrentamiento { font-size: 1.02rem; font-weight: 600; }
.partido .vs { color: var(--suave); font-weight: 400; margin: 0 6px; }
.partido .gana { color: var(--verde-oscuro); text-decoration: underline; }
.partido .horario { color: var(--verde); }

@media (max-width: 520px) {
    .barra-int { padding: 10px 12px; }
    .contenido { padding: 12px; }
    h1 { font-size: 1.3rem; }
}

/* =====================================================================
   CUADRO EN ESPEJO
   Primera ronda en el centro, principal hacia la derecha y consolacion
   hacia la izquierda, como los cuadros de papel del club.
   ===================================================================== */

.hoja {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 14px;
}

.hoja-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.hoja-club, .hoja-cat {
    background: #fff8b0;
    border: 1px solid #d9c400;
    padding: 4px 10px;
    font-weight: 700;
    border-radius: 4px;
}
.hoja-etiquetas {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.etiqueta-cuadro {
    background: #4a4a4a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    border-radius: 4px;
}
.hoja-pie {
    margin-top: 10px;
    color: var(--suave);
    font-size: 0.78rem;
    text-align: center;
}

.llave-scroll { overflow-x: auto; }

.llave {
    --alto-fila: 102px;
    /* Ancho pensado para "Nombre Apellido Apellido / Nombre Apellido
       Apellido", que es como se inscribe la gente. Si no cabe todo el
       cuadro, .llave-scroll deja arrastrarlo a lo ancho. Al imprimir
       manda el ancho del papel, no este. */
    --ancho-col: 176px;
    display: grid;
    min-width: 1000px;
}

.celda {
    display: flex;
    align-items: center;
    position: relative;
    padding: 5px 16px;
    /* Sin esto, el nombre mas largo ensancha su columna por encima del
       minimo y el cuadro se sale del papel al imprimir. */
    min-width: 0;
}

/* ---------------------------------------------------------------
   La caja del partido.
   Tres zonas bien separadas para que no se confunda una pareja con
   otra ni un partido con el siguiente:
     1) cabecera gris con el codigo y el horario
     2) las dos parejas, separadas por una linea y con fondo alterno
     3) el resultado, como linea suelta debajo (solo si lo hay)
   --------------------------------------------------------------- */
.caja {
    width: 100%;
    /* IMPRESCINDIBLE. La celda es flex, y un elemento flex no se encoge
       por debajo de su contenido salvo que se le diga. Como los nombres
       van en una sola linea, sin esto la caja se hace mas ancha que su
       columna y se solapa con el partido de la columna de al lado. */
    min-width: 0;
    border: 1.5px solid #333;
    border-radius: 5px;
    background: #fff;
    font-size: 0.73rem;
    line-height: 1.3;
    position: relative;
    z-index: 2;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.caja-vacia { border-style: dashed; border-color: #aaa; opacity: 0.6; }

/* Para el administrador, todo el partido es pulsable. Ojo: entonces el
   elemento que va dentro de la celda es ESTE enlace, no la caja, asi
   que es el que tiene que poder encogerse. Sin min-width:0 se queda
   del ancho de los nombres y el partido se mete en la columna de al
   lado; se veia solo estando logueado como administrador. */
a.caja-enlace {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    min-width: 0;
}
a.caja-enlace:hover .caja { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(11, 110, 79, 0.18); }
a.caja-enlace:hover .caja-alto { background: #e8f1ed; }

.caja-alto {
    display: flex;
    align-items: baseline;
    gap: 6px;
    background: #ececec;
    border-bottom: 1.5px solid #333;
    padding: 2px 6px;
}
.caja-codigo {
    font-weight: 700;
    color: #111;
    letter-spacing: 0.3px;
}
.caja-horario { color: #b03024; font-weight: 700; font-size: 0.7rem; }
.caja-sinhora { color: #888; font-weight: 400; font-style: italic; }
.caja-lapiz { margin-left: auto; font-size: 0.85rem; line-height: 1; color: var(--verde); }

/* ---- Las dos parejas ---- */
.caja-pareja {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.caja-pareja-2 {
    background: #f4f5f6;
    border-top: 1px solid #bbb;
}
.caja-pareja .marca {
    flex: 0 0 auto;
    width: 12px;
    color: #999;
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
}
.caja-pareja .nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.caja-pareja.gana {
    font-weight: 700;
    color: var(--verde-oscuro);
    box-shadow: inset 3px 0 0 var(--verde);
}
.caja-pareja.gana .marca { color: var(--verde); }

/* ---- El resultado, debajo y sin casillas ---- */
.caja-resultado {
    border-top: 1.5px solid #333;
    background: #fbfbfb;
    padding: 2px 6px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    text-align: center;
    color: #111;
}
.caja-resultado.wo { font-weight: 400; font-style: italic; color: #666; }

.caja-aviso {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--peligro);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
    line-height: 15px;
}

.celda.consolacion .caja-alto { background: #efeadd; }

/* ---------------------------------------------------------------
   Lineas que unen los partidos
   --------------------------------------------------------------- */
.hacia-derecha::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 16px;
    border-top: 1.5px solid #888;
}
.hacia-derecha.arriba::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    height: 50%;
    border-right: 1.5px solid #888;
}
.hacia-derecha.abajo::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 50%;
    height: 50%;
    border-right: 1.5px solid #888;
}
.hacia-izquierda::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    border-top: 1.5px solid #888;
}
.hacia-izquierda.arriba::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 50%;
    border-left: 1.5px solid #888;
}
.hacia-izquierda.abajo::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 50%;
    height: 50%;
    border-left: 1.5px solid #888;
}
/* El conector de entrada va en la celda, no en la caja: la caja recorta
   su contenido (overflow hidden) para que la cabecera respete las esquinas. */
.conector-entra {
    position: absolute;
    top: 50%;
    width: 16px;
    border-top: 1.5px solid #888;
}
.entra-izq .conector-entra { left: 0; }
.entra-dcha .conector-entra { right: 0; }

.sets-editar { display: flex; gap: 8px; }
.sets-editar input { text-align: center; }

/* =====================================================================
   IMPRESION / GUARDAR COMO PDF
   ===================================================================== */
@media print {
    /* El tamano de papel lo fija cada pagina: el cuadro va en A3
       horizontal y el orden de juego en A4 vertical. Ver el bloque
       <style> de vistas/cuadro-visual.php y vistas/orden-juego.php. */

    .no-imprimir, .barra, .pie, .aviso { display: none !important; }

    body { background: #fff; font-size: 10px; }
    .contenido { max-width: none; padding: 0; }

    /* Que los fondos y las lineas salgan de verdad en el PDF */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    .hoja { border: none; border-radius: 0; padding: 0; }
    .llave-scroll { overflow: visible; }
    /* TODO EN MILIMETROS Y PUNTOS.

       Antes esto iba en pixeles, y el resultado dependia del dispositivo:
       en el movil, Chrome agranda el texto y cambia la equivalencia de
       pixel a milimetro, asi que las cajas crecian, desbordaban su fila y
       se amontonaban unas encima de otras.

       Con unidades fisicas el PDF sale igual en cualquier sitio, porque
       estan atadas al papel y no a la pantalla. */
    .llave {
        --alto-fila: 24mm;
        --ancho-col: 24mm;
        min-width: 0;
        width: 100%;
    }
    .celda { padding: 1mm 4mm; }

    .caja {
        border: 0.35mm solid #000;
        border-radius: 1mm;
        box-shadow: none;
        font-size: 7pt;
        line-height: 1.25;
    }
    .caja-alto { padding: 0.4mm 1.2mm; border-bottom: 0.35mm solid #000; }
    .caja-pareja { padding: 0.6mm 1.2mm; }
    .caja-resultado { padding: 0.4mm 1.2mm; font-size: 7pt; border-top: 0.35mm solid #000; }
    .caja-codigo, .caja-horario, .caja-wo { font-size: 6.5pt; }
    .caja-alto { background: #ddd; border-bottom-color: #000; }
    .caja-horario { color: #000; }
    .caja-pareja-2 { background: #f0f0f0; border-top-color: #999; }
    .caja-pareja.gana { box-shadow: inset 3px 0 0 #000; }
    .caja-resultado { border-top-color: #000; background: #fff; }

    /* Las lineas del cuadro, tambien en milimetros */
    .hacia-derecha::after, .hacia-izquierda::after, .conector-entra {
        width: 4mm;
        border-top-width: 0.3mm;
        border-top-color: #000;
    }
    .hacia-derecha.arriba::before, .hacia-derecha.abajo::before {
        border-right-width: 0.3mm;
        border-right-color: #000;
    }
    .hacia-izquierda.arriba::before, .hacia-izquierda.abajo::before {
        border-left-width: 0.3mm;
        border-left-color: #000;
    }

    .etiqueta-cuadro { background: #000 !important; color: #fff !important; }

    /* Que un partido no se corte entre dos paginas */
    .celda, .caja { break-inside: avoid; page-break-inside: avoid; }
}

/* =====================================================================
   LISTA DE FRANJAS NO DISPONIBLES (formulario de inscripcion)
   Una sola fila para escribir, y las franjas se van acumulando arriba.
   ===================================================================== */

.franjas {
    list-style: none;
    margin: 10px 0;
    padding: 0;
}

.franja {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f1f6f3;
    border: 1px solid var(--verde);
    border-left: 4px solid var(--verde);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
}
.franja-texto { flex: 1; font-size: 0.92rem; }

.quitar-franja {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: var(--peligro);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.quitar-franja:hover { background: #96271b; }

.franja-nueva {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    background: #fafafa;
    border: 1px dashed var(--borde);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
}
.franja-nueva .campo { flex: 1 1 140px; min-width: 130px; }
.franja-nueva .campo-ancho { flex: 2 1 200px; }
.franja-nueva label { margin-top: 0; }
/* Texto de ayuda debajo de un campo */
.ayuda {
    display: block;
    margin-top: 3px;
    color: var(--suave);
    font-size: 0.78rem;
    line-height: 1.35;
}

@media (max-width: 520px) {
    .franja-nueva .campo { flex: 1 1 100%; }
}

/* El W.O. de los BYE, en la cabecera de la caja */
.caja-wo {
    margin-left: auto;
    font-size: 0.66rem;
    font-style: italic;
    color: #666;
    white-space: nowrap;
}
.caja-lapiz + .caja-wo, .caja-wo + .caja-lapiz { margin-left: 6px; }

/* Paginas que necesitan todo el ancho: el cuadro en espejo */
.contenido-ancho { max-width: 1750px; }

/* El aviso iba fuera de la caja y la caja recorta: se mete dentro */
.caja-aviso {
    top: 1px;
    right: 1px;
    width: 13px;
    height: 13px;
    line-height: 13px;
    font-size: 0.6rem;
}

/* La cabecera de la caja en una sola linea */
.caja-alto { flex-wrap: nowrap; overflow: hidden; }
.caja-codigo, .caja-horario { white-space: nowrap; }

/* =====================================================================
   ORDEN DE JUEGO
   Un bloque por dia y, dentro, un bloque por pista con sus partidos en
   el orden en que se juegan.
   ===================================================================== */

.hoja-dia { margin-bottom: 18px; }

.pistas {
    column-count: 2;
    column-gap: 20px;
}

.pista {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 16px;
    border: 1px solid #bbb;
    border-radius: 6px;
    overflow: hidden;
}

.pista-titulo {
    margin: 0;
    background: #333;
    color: #fff;
    font-size: 0.82rem;
    letter-spacing: 0.6px;
    padding: 5px 9px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.pista-cuenta {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 400;
    opacity: 0.85;
}

.orden {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: partido;
}

.orden-partido {
    padding: 5px 9px;
    border-top: 1px solid #ddd;
    break-inside: avoid;
    page-break-inside: avoid;
}
.orden-partido:first-child { border-top: none; }
.orden-partido:nth-child(even) { background: #f7f8f8; }

.orden-alto {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}
.orden-hora {
    font-weight: 700;
    color: #b03024;
    font-size: 0.86rem;
    min-width: 42px;
}
.orden-codigo {
    font-weight: 700;
    font-size: 0.74rem;
    background: #ececec;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0 4px;
}
.orden-cat { font-size: 0.72rem; color: var(--suave); }

.orden-parejas { font-size: 0.86rem; margin-top: 1px; }
.orden-parejas .vs { color: var(--suave); margin: 0 5px; font-size: 0.76rem; }

.orden-resultado {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--verde-oscuro);
    margin-top: 1px;
}

@media (max-width: 700px) {
    .pistas { column-count: 1; }
}

@media print {
    /* El orden de juego se lee mejor en vertical, un dia por hoja */
    .hoja-dia {
        page-break-after: always;
        break-after: page;
        margin-bottom: 0;
    }
    .hoja-dia:last-of-type { page-break-after: auto; break-after: auto; }

    .pistas { column-count: 3; column-gap: 12px; }
    .pista { border-color: #000; margin-bottom: 10px; }
    .pista-titulo { background: #000; }
    .orden-partido { padding: 3px 6px; }
    .orden-hora { color: #000; }
    .orden-partido:nth-child(even) { background: #f0f0f0; }
    /* En puntos, para que no dependa del dispositivo */
    .orden-alto, .orden-parejas { font-size: 7.5pt; }
    .orden-cat, .orden-codigo, .orden-resultado { font-size: 6.5pt; }
    .orden-hora { font-size: 8pt; min-width: 9mm; }
    .orden-partido { padding: 0.8mm 1.5mm; }
    .pista-titulo { font-size: 8pt; padding: 1mm 2mm; }
}

/* =====================================================================
   EL CUADRO SE ADAPTA AL PAPEL QUE ELIJA EL NAVEGADOR
   =====================================================================
   Al imprimir, las media queries miden la HOJA, no la pantalla. Asi el
   cuadro se ajusta solo tanto si sale en A3 tumbado como si el movil
   decide imprimir en A4 vertical.

   Zona util aproximada segun el papel:
     A3 horizontal .... 406 mm
     A4 horizontal .... 283 mm
     A4 vertical ...... 192 mm
   ===================================================================== */

/* ---- Papel ancho (A3 horizontal): comodo ---- */
@media print and (min-width: 330mm) {
    .llave { --alto-fila: 24mm; --ancho-col: 24mm; }
    .celda { padding: 1mm 4mm; }
    .caja { font-size: 7pt; }
    .caja-codigo, .caja-horario, .caja-wo { font-size: 6.5pt; }
    .hacia-derecha::after, .hacia-izquierda::after, .conector-entra { width: 4mm; }
}

/* ---- Papel medio (A4 horizontal) ---- */
@media print and (min-width: 240mm) and (max-width: 329mm) {
    .llave { --alto-fila: 20mm; --ancho-col: 17mm; }
    .celda { padding: 0.8mm 2.5mm; }
    .caja { font-size: 6pt; border-width: 0.3mm; }
    .caja-codigo, .caja-horario, .caja-wo { font-size: 5.5pt; }
    .caja-alto { padding: 0.3mm 0.9mm; }
    .caja-pareja { padding: 0.4mm 0.9mm; }
    .caja-resultado { padding: 0.3mm 0.9mm; font-size: 6pt; }
    .hacia-derecha::after, .hacia-izquierda::after, .conector-entra { width: 2.5mm; }
    .hoja-club, .hoja-cat { font-size: 7pt; padding: 0.8mm 2mm; }
    .etiqueta-cuadro { font-size: 6pt; padding: 0.6mm 1.5mm; }
}

/* ---- Papel estrecho (A4 vertical): todo mas apretado ----
   Aqui la letra es pequena por pura geometria: un cuadro de 16 parejas
   con nombres no cabe comodo en 192 mm. Sale legible, pero para el
   tablon del club conviene A3 horizontal. */
@media print and (max-width: 239mm) {
    /* En papel estrecho la columna es angosta: antes que cortar un
       nombre con puntos suspensivos, se deja que pase a dos lineas.
       Por eso las filas son mas altas. */
    .llave { --alto-fila: 26mm; --ancho-col: 11mm; }
    .caja-pareja { align-items: flex-start; }
    .caja-pareja .nombre {
        white-space: normal;
        overflow-wrap: break-word;
        text-overflow: clip;
    }
    .celda { padding: 0.6mm 1.8mm; }
    .caja { font-size: 6.5pt; border-width: 0.25mm; border-radius: 0.6mm; }
    .caja-codigo, .caja-horario, .caja-wo { font-size: 5.5pt; }
    .caja-alto { padding: 0.2mm 0.6mm; border-bottom-width: 0.25mm; }
    .caja-pareja { padding: 0.3mm 0.6mm; }
    .caja-pareja .marca { width: 2mm; font-size: 4pt; }
    .caja-resultado { padding: 0.2mm 0.6mm; font-size: 5pt; border-top-width: 0.25mm; }
    .hacia-derecha::after, .hacia-izquierda::after, .conector-entra { width: 1.8mm; }
    .hacia-derecha.arriba::before, .hacia-derecha.abajo::before { border-right-width: 0.25mm; }
    .hacia-izquierda.arriba::before, .hacia-izquierda.abajo::before { border-left-width: 0.25mm; }
    .hoja-club, .hoja-cat { font-size: 6pt; padding: 0.6mm 1.5mm; }
    .etiqueta-cuadro { font-size: 5pt; padding: 0.5mm 1.2mm; letter-spacing: 0; }
    .hoja-pie { font-size: 5.5pt; margin-top: 2mm; }
    .hoja-cabecera, .hoja-etiquetas { margin-bottom: 1.5mm; }
}

/* El orden de juego es una lista: aguanta bien en cualquier papel,
   pero en A4 vertical caben 2 columnas de pistas en vez de 3. */
@media print and (max-width: 239mm) {
    .pistas { column-count: 2; }
}

/* =====================================================================
   INFORME DEL SORTEO
   Desplegable con el porque de cada aviso.
   ===================================================================== */

.informe {
    background: #fff;
    border: 1px solid var(--borde);
    border-left: 5px solid var(--naranja);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.informe > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--verde-oscuro);
    font-size: 0.95rem;
}

.informe-item {
    border-top: 1px solid var(--borde);
    padding: 10px 0 6px;
}
.informe-item:first-of-type { border-top: none; }

.informe-alto {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.92rem;
}
.informe-codigo {
    background: #ececec;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0 5px;
    font-weight: 700;
    font-size: 0.8rem;
}

.informe-motivos {
    margin: 5px 0 0;
    padding-left: 20px;
    font-size: 0.9rem;
}
.informe-motivos li { margin: 2px 0; }

.informe-franja    .informe-alto strong { color: var(--peligro); }
.informe-sin-hueco .informe-alto strong { color: var(--peligro); }
.informe-descanso  .informe-alto strong { color: #8a5a00; }
.informe-siembra   .informe-alto strong { color: #8a5a00; }

@media print { .informe { display: none !important; } }

/* Numero de cabeza de serie junto a la pareja, en el cuadro */
.caja-pareja .semilla,
.orden-parejas .semilla {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 0.62rem;
    color: #8a5a00;
    background: #fff3d1;
    border: 1px solid #e0c060;
    border-radius: 2px;
    padding: 0 3px;
    line-height: 1.25;
    min-width: 0.85em;
    text-align: center;
}
@media print {
    .caja-pareja .semilla,
    .orden-parejas .semilla {
        font-size: 5.5pt;
        background: #eee;
        border-color: #000;
        color: #000;
        padding: 0 0.9mm;
    }
}

/* Lista de restricciones de una pareja, cada una con su boton de quitar */
.restricciones {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}
.restriccion {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fdf6e6;
    border: 1px solid #e0c060;
    border-radius: 6px;
    padding: 4px 6px 4px 9px;
    margin-bottom: 4px;
    max-width: 520px;
}
.restriccion-texto { flex: 1; color: var(--texto); font-size: 0.9rem; }
.restriccion .quitar-franja { width: 24px; height: 24px; font-size: 1rem; }

/* En el orden de juego los nombres son mayores: la etiqueta acompania */
.orden-parejas .semilla { font-size: 0.72rem; margin-right: 2px; }
@media print { .orden-parejas .semilla { font-size: 6.5pt; } }

/* Botones en la esquina de una ficha (editar, borrar...).
   OJO: la tarjeta tiene que llevar tambien la clase tarjeta-ficha, que es
   la que pone el position: relative. Sin ella los botones se colocan
   respecto a la pagina y acaban en cualquier sitio. */
.tarjeta-ficha { position: relative; }
.tarjeta-ficha h1,
.tarjeta-ficha p { padding-right: 175px; }

.botones-esquina {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.botones-esquina .boton,
.botones-esquina form { margin: 0; }

@media (max-width: 620px) {
    .tarjeta-ficha h1,
    .tarjeta-ficha p { padding-right: 0; }
    .botones-esquina {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 10px;
    }
}

/* Aviso puramente informativo del sorteo: ni es un fallo ni hay que tocar nada */
.informe-nota .informe-alto strong { color: var(--suave); font-weight: 600; }
.informe-nota { opacity: 0.85; }

/* =====================================================================
   LOGO DEL CLUB
   Basta con dejar logo.png junto a index.php. Es cuadrado y con fondo
   negro, asi que se recorta en redondo: sobre la barra verde un cuadro
   negro cantaria, y de moneda queda como un escudo.
   ===================================================================== */
.barra-logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}
.barra-logo img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #000;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.logo-grande {
    text-align: center;
    margin: 4px 0 14px;
}
.logo-grande img {
    width: 120px;
    height: 120px;
    max-width: 60%;
    border-radius: 50%;
    background: #000;
    object-fit: cover;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* En las hojas que se imprimen, al lado del nombre del club */
.hoja-marca { display: flex; align-items: center; gap: 10px; }
.hoja-logo {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #000;
    object-fit: cover;
}
@media print {
    /* Mas pequeno en papel: es un cuadro oscuro y gasta tinta */
    .hoja-logo { width: 9mm; height: 9mm; }
    .barra-logo, .logo-grande { display: none !important; }
}

/* =====================================================================
   AMERICANAS
   Una lista de partidos con su hora y su pista, y una tabla de
   clasificacion. Nada de rejillas: aqui no hay cuadro.
   ===================================================================== */
.lista-parejas { margin: 0; padding-left: 22px; }
.lista-parejas li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid var(--borde);
}
.lista-parejas li:last-child { border-bottom: none; }
.pareja-nombre { flex: 1; font-weight: 600; }

.ronda h3 { margin-top: 0; }

.am-partido {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--borde);
}
.am-partido:last-child { border-bottom: none; }
.am-hora { font-weight: 700; color: #b03024; min-width: 48px; }
.am-pista {
    background: #eee;
    border: 1px solid var(--borde);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.8rem;
    font-weight: 700;
}
.am-nombres { flex: 1; min-width: 200px; }
.am-descansa { color: var(--suave); font-style: italic; }
.am-marcador { font-weight: 700; }

.am-resultado { display: flex; align-items: center; gap: 6px; margin: 0; }
.am-resultado input[type="number"] {
    width: 62px;
    margin: 0;
    text-align: center;
}
.am-resultado .boton { margin: 0; }

.tabla-scroll { overflow-x: auto; }
.tabla-clasificacion {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.tabla-clasificacion th,
.tabla-clasificacion td {
    border-bottom: 1px solid var(--borde);
    padding: 6px 8px;
    text-align: center;
    white-space: nowrap;
}
.tabla-clasificacion th { background: #f1f3f2; font-size: 0.8rem; }
.tabla-clasificacion .izq { text-align: left; white-space: normal; }
.tabla-clasificacion tr.lider td { background: #eaf5f0; font-weight: 700; }

/* La hoja para imprimir */
.tabla-orden { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabla-orden td {
    border-bottom: 1px solid var(--borde);
    padding: 5px 6px;
    vertical-align: middle;
}
.tabla-orden .izq { text-align: left; width: 100%; }
.tabla-orden .am-marcador { white-space: nowrap; text-align: right; }
.am-hoja-ronda { margin-bottom: 12px; break-inside: avoid; page-break-inside: avoid; }
.am-hoja-titulo {
    background: #2f2f2f;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 3px;
}

@media print {
    .am-hoja-ronda { margin-bottom: 4mm; }
    .am-hoja-titulo { font-size: 8pt; padding: 0.8mm 2mm; }
    .tabla-orden { font-size: 8.5pt; }
    .tabla-orden td { padding: 0.8mm 1.5mm; }
    .tabla-clasificacion { font-size: 8.5pt; }
    .tabla-clasificacion th,
    .tabla-clasificacion td { padding: 0.8mm 1.5mm; }
}

/* El boton de guardar toda la ronda, debajo de sus partidos */
.am-guardar {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--borde);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.am-guardar .boton { margin: 0; }

/* =====================================================================
   CLUBES Y RESERVA DE PISTA
   ===================================================================== */
.lista-reservas { list-style: none; margin: 0; padding: 0; }
.lista-reservas li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borde);
}
.lista-reservas li:last-child { border-bottom: none; }
.reserva-cuando { font-weight: 700; color: #b03024; }
.reserva-donde { flex: 1; min-width: 160px; }
.lista-reservas .boton { margin: 0; }

/* La barra del dia */
.dia-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.dia-barra .boton { margin: 0; }
.dia-titulo { text-align: center; flex: 1; min-width: 180px; }
.dia-titulo span { display: block; font-size: 0.85rem; }
.desactivado { opacity: 0.35; cursor: not-allowed; }
.dia-elegir { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.dia-elegir label { margin: 0; }
.dia-elegir input[type="date"] { margin: 0; width: auto; }

/* La rejilla de huecos */
.rejilla-pistas { width: 100%; border-collapse: collapse; }
.rejilla-pistas th, .rejilla-pistas td {
    border: 1px solid var(--borde);
    padding: 4px;
    text-align: center;
    vertical-align: middle;
}
.rejilla-pistas thead th { background: #f1f3f2; font-size: 0.85rem; white-space: nowrap; }
.rejilla-pistas th.hora {
    background: #f1f3f2;
    font-weight: 700;
    color: #b03024;
    white-space: nowrap;
    font-size: 0.9rem;
}
.hueco { min-width: 108px; }
.hueco-libre     { background: #eaf5f0; }
.hueco-reservada { background: #fdf1cf; }
.hueco-torneo    { background: #e6e8ea; }
.hueco-pasada    { background: #f6f7f7; color: #aaa; }

.boton-hueco {
    display: block;
    width: 100%;
    border: 1px solid var(--verde);
    background: #fff;
    color: var(--verde-oscuro);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 7px 4px;
    border-radius: 6px;
    cursor: pointer;
}
.boton-hueco:hover { background: var(--verde); color: #fff; }

.hueco-quien { display: block; font-size: 0.8rem; line-height: 1.25; padding: 2px; }
.hueco-anular {
    border: none;
    background: none;
    color: var(--peligro);
    font-size: 0.75rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 2px;
}

.leyenda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--suave);
}
.leyenda-caja {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid var(--borde);
    border-radius: 3px;
    vertical-align: middle;
}

@media (max-width: 620px) {
    .hueco { min-width: 84px; }
    .boton-hueco { font-size: 0.75rem; padding: 6px 2px; }
    .rejilla-pistas th, .rejilla-pistas td { padding: 3px; }
}

/* Pistas cerradas por el club, y la etiqueta del rol */
.hueco-bloqueada { background: #f3e3e1; color: #7a3b33; }
.etiqueta-rol {
    display: inline-block;
    background: #eaf5f0;
    border: 1px solid var(--verde);
    color: var(--verde-oscuro);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.lista-bloqueos { list-style: none; margin: 0; padding: 0; }
.lista-bloqueos li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borde);
}
.lista-bloqueos li:last-child { border-bottom: none; }
.bloqueo-que { font-weight: 700; min-width: 110px; }
.bloqueo-cuando { color: #b03024; font-size: 0.9rem; }
.bloqueo-motivo { flex: 1; min-width: 140px; color: var(--suave); }
.lista-bloqueos .boton { margin: 0; }

/* Reservas fijas: las que se repiten todas las semanas */
.hueco-fija { background: #e8eefc; }
span.hueco-fija {
    display: inline-block;
    background: #3a5ba0;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 0 5px;
    border-radius: 3px;
    margin-top: 2px;
}

/* Tabla de usuarios */
.tabla-usuarios { width: 100%; border-collapse: collapse; }
.tabla-usuarios th, .tabla-usuarios td {
    border-bottom: 1px solid var(--borde);
    padding: 8px 10px;
    text-align: center;
    vertical-align: middle;
}
.tabla-usuarios thead th { background: #f1f3f2; font-size: 0.85rem; white-space: nowrap; }
.tabla-usuarios .izq { text-align: left; }
.tabla-usuarios select { margin: 0; width: auto; }
.tabla-usuarios form { margin: 0; }
.tabla-usuarios .boton { margin: 0; }
.fila-bloqueada td { background: #fbeceb; }
.estado-bloqueado {
    display: inline-block;
    background: var(--peligro);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 3px;
    margin-bottom: 4px;
}
.bloquear { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bloquear input[type="text"] { margin: 0; width: 150px; font-size: 0.85rem; }
.tabla-usuarios .etiqueta-rol { font-size: 0.7rem; padding: 1px 7px; }

/* Horas en las que el club no abre esa pista */
.hueco-cerrado { background: #f0f0f0; color: #9a9a9a; font-style: italic; }

/* Los encargados del club y lo que se les deja hacer */
.lista-encargados { list-style: none; margin: 0 0 8px; padding: 0; }
.lista-encargados li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--borde);
}
.lista-encargados li:last-child { border-bottom: none; }
.encargado-quien { flex: 1; min-width: 180px; }
.encargado-quien .suave { display: block; font-size: 0.85rem; }
.encargado-permisos {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
    background: #f7f9f8;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 6px 10px;
}
.encargado-permisos label { margin: 0; font-size: 0.9rem; }
.encargado-permisos .boton { margin: 0; }

/* ---------------------------------------------------------------
   Ventana de reservar: quien juega y un telefono
   --------------------------------------------------------------- */
.hueco-jugadores {
    display: block;
    font-size: 0.65rem;
    color: var(--suave);
    letter-spacing: 0.2px;
}

.dialogo {
    border: none;
    border-radius: 12px;
    padding: 1.4rem;
    width: min(420px, calc(100vw - 2rem));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    color: var(--texto);
    background: var(--tarjeta);
}
.dialogo::backdrop { background: rgba(0, 0, 0, 0.45); }

.dialogo h2 { margin: 0 0 0.2rem; font-size: 1.15rem; }
.dialogo label { display: block; margin-top: 0.9rem; font-weight: 600; }
.dialogo .ayuda { display: block; margin-bottom: 0.35rem; }
.dialogo input[type="text"],
.dialogo input[type="tel"] {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 0.95rem;
}

/* Los cuatro jugadores: de dos en dos, y uno debajo de otro en el movil */
.dlg-jugadores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.dlg-botones {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 1.3rem;
}

/* Cancelar no compite con Reservar: el que manda es el verde */
.dlg-botones .boton-flojo {
    background: #fff;
    color: var(--suave);
    border: 1px solid var(--borde);
}
.dlg-botones .boton-flojo:hover { background: var(--fondo); color: var(--texto); }

@media (max-width: 480px) {
    .dlg-jugadores { grid-template-columns: 1fr; }
    .dlg-botones { flex-direction: column-reverse; }
    .dlg-botones .boton { width: 100%; }
}

/* La casilla de una reserva es un boton: al pinchar sale su ficha */
button.hueco-ficha {
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
}
button.hueco-ficha:hover { background: rgba(0, 0, 0, 0.06); }
button.hueco-ficha:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

/* La ficha de la reserva */
.ficha-datos { margin: 0.6rem 0 0; }
.ficha-datos dt {
    font-size: 0.78rem;
    color: var(--suave);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 0.8rem;
}
.ficha-datos dd { margin: 0.15rem 0 0; font-size: 1rem; font-weight: 600; }
.ficha-datos a { color: var(--verde-oscuro); }

/* Cambiar una reserva de sitio, dentro de su ficha */
.ficha-mover {
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--borde);
}
.ficha-mover h3 { margin: 0 0 0.6rem; font-size: 0.95rem; }

.mover-campos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
}
.mover-campos .campo {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--suave);
}
.mover-campos input, .mover-campos select {
    padding: 7px 8px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--texto);
}
.ficha-mover .ayuda { display: block; margin: 0.6rem 0 0.8rem; }

@media (max-width: 480px) {
    .mover-campos { grid-template-columns: 1fr; }
}