/* ==========================================================================
   Capa de producto sobre Bootstrap 5.3. Tema «Base», estilo Apple/Google: lienzo gris neutro, tarjetas blancas,
   tinta casi negra y un tono de acento (turquesa en la plantilla). Nada de cremas ni papel cálido.
   Cada proyecto cambia su paleta SOLO en los tokens de abajo (skill nuevo-proyecto); los componentes no
   llevan colores sueltos. Claro y oscuro, elegidos a mano o automáticos.
   ========================================================================== */
@property --look-x { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --look-y { syntax: "<number>"; inherits: true; initial-value: 0; }

:root,
[data-bs-theme="light"] {
    --app-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --app-display: "Roboto Flex", "Plus Jakarta Sans", system-ui, sans-serif;
    --app-canvas: #f5f5f7;
    --app-surface: #ffffff;
    --app-surface-2: #f5f5f7;
    --app-surface-3: #e8e8ed;
    --app-glass: rgba(255, 255, 255, .78);
    --app-glass-strong: rgba(255, 255, 255, .94);
    --app-glass-border: rgba(0, 0, 0, .06);
    --app-ink: #1d1d1f;
    --app-ink-2: #424245;
    --app-muted: #6e6e73;
    --app-line: rgba(0, 0, 0, .08);
    --app-line-strong: rgba(0, 0, 0, .14);
    --app-primary: #1d1d1f;
    --app-on-primary: #ffffff;
    --app-tone: #2b5d8f;
    --app-tone-container: #d7e4f2;
    --app-on-tone-container: #1a3d63;
    --app-tone-soft: rgba(43, 93, 143, .12);
    --app-warn: #b4610e;
    --app-warn-soft: rgba(242, 160, 61, .18);
    --app-danger: #d64545;
    --app-danger-soft: rgba(214, 69, 69, .12);
    /* El grupo B (en el recorrido de partidas): dorado, para distinguirlo del A (el tono) */
    --app-gold: #8a5a12;
    --app-gold-soft: rgba(242, 160, 61, .28);
    --app-focus: rgba(43, 93, 143, .32);
    /* Tarjeta de tinta («lo que toca ahora»): oscura en claro y en oscuro, con el brillo del tono. */
    --app-ink-card: #1d1d1f;
    --app-ink-card-text: #f5f5f7;
    --app-ink-card-glow: rgba(139, 182, 227, .30);
    /* Sombras cortas y suaves (Apple/Google): la profundidad la dan el blanco sobre gris, no la sombra. */
    --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --app-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 28px -14px rgba(0, 0, 0, .14);
    --app-shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .28);
    --app-radius: 1.25rem;
    --app-dock-height: 4.4rem;
    --app-ease: cubic-bezier(.2, .8, .2, 1);
    /* La cara del asistente */
    --buddy-face: #2b5d8f;
    --buddy-eye: #ffffff;

    --bs-body-font-family: var(--app-font);
    --bs-body-bg: var(--app-canvas);
    --bs-body-color: var(--app-ink);
    --bs-emphasis-color: var(--app-ink);
    --bs-secondary-color: var(--app-muted);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-border-color: var(--app-line-strong);
    --bs-border-radius: .9rem;
    --bs-border-radius-sm: .65rem;
    --bs-border-radius-lg: 1.2rem;
    --bs-border-radius-xl: 1.5rem;
    --bs-link-color: var(--app-tone);
    --bs-link-color-rgb: 15, 122, 108;
    --bs-link-hover-color: #20456e;
    --bs-focus-ring-color: var(--app-focus);
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: 29, 29, 31;
}

[data-bs-theme="dark"] {
    --app-canvas: #0a0a0c;
    --app-surface: #1c1c1e;
    --app-surface-2: #242426;
    --app-surface-3: #2c2c2e;
    --app-glass: rgba(28, 28, 30, .74);
    --app-glass-strong: rgba(28, 28, 30, .94);
    --app-glass-border: rgba(255, 255, 255, .08);
    --app-ink: #f5f5f7;
    --app-ink-2: #d2d2d7;
    --app-muted: #98989d;
    --app-line: rgba(255, 255, 255, .09);
    --app-line-strong: rgba(255, 255, 255, .16);
    --app-primary: #9cc3ea;
    --app-on-primary: #0c2238;
    --app-tone: #9cc3ea;
    --app-tone-container: #1a3a5e;
    --app-on-tone-container: #d2e3f5;
    --app-tone-soft: rgba(156, 195, 234, .14);
    --app-warn: #f5b45c;
    --app-warn-soft: rgba(245, 180, 92, .14);
    --app-danger: #ff8a8a;
    --app-danger-soft: rgba(255, 138, 138, .13);
    --app-gold: #f5b45c;
    --app-gold-soft: rgba(245, 180, 92, .24);
    --app-focus: rgba(156, 195, 234, .38);
    --app-ink-card: #242426;
    --app-ink-card-text: #f5f5f7;
    --app-ink-card-glow: rgba(156, 195, 234, .22);
    --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --app-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 22px 44px -24px rgba(0, 0, 0, .85);
    --app-shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .9);
    --buddy-face: #9cc3ea;
    --buddy-eye: #0c2238;
    --bs-body-bg: var(--app-canvas);
    --bs-body-color: var(--app-ink);
    --bs-emphasis-color: var(--app-ink);
    --bs-secondary-color: var(--app-muted);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-border-color: var(--app-line-strong);
    --bs-link-color: var(--app-tone);
    --bs-link-color-rgb: 143, 227, 210;
    --bs-link-hover-color: #d2e3f5;
    --bs-primary-rgb: 143, 227, 210;
    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Lienzo y tipografía
   -------------------------------------------------------------------------- */
html { background: var(--app-canvas); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Lienzo liso, sin manchas de color: el gris del fondo y el blanco de las tarjetas hacen el trabajo. */
body { min-height: 100dvh; background: var(--app-canvas); color: var(--app-ink); font-family: var(--app-font); letter-spacing: -.01em; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--app-tone-container); color: var(--app-on-tone-container); }
/* Títulos en Roboto Flex ancha y compacta (como dieta y viajes). Pesos: 400 para texto y 600-800 para jerarquía. */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { color: var(--app-ink); font-family: var(--app-display); font-weight: 750; letter-spacing: -.02em; font-variation-settings: "wdth" 112, "opsz" 48; text-wrap: balance; }
h1 em, h2 em { font-style: normal; color: var(--app-tone); }
strong, b { font-weight: 700; }
.text-secondary, .text-muted { color: var(--app-muted) !important; }
a { text-underline-offset: .18em; }
kbd { padding: .1rem .4rem; border-radius: .4rem; color: var(--app-muted); background: var(--app-surface-3); font-family: var(--app-font); font-size: .75rem; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 3000; padding: .6rem 1rem; border-radius: 999px; background: var(--app-primary); color: var(--app-on-primary); font-weight: 700; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--app-focus); outline-offset: 2px; }
@view-transition { navigation: auto; }

/* --------------------------------------------------------------------------
   Bootstrap a medida
   -------------------------------------------------------------------------- */
.btn { --bs-btn-font-weight: 650; --bs-btn-border-radius: 999px; --bs-btn-padding-x: 1.05rem; --bs-btn-padding-y: .55rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; transition: transform .15s var(--app-ease), background-color .15s ease, border-color .15s ease; }
.btn:active { transform: scale(.97); }
.btn-sm { --bs-btn-padding-x: .8rem; --bs-btn-padding-y: .35rem; --bs-btn-font-size: .84rem; min-height: 2.25rem; }
.btn-primary {
    --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-color: var(--app-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-primary) 86%, #fff); --bs-btn-hover-border-color: var(--bs-btn-hover-bg); --bs-btn-hover-color: var(--app-on-primary);
    --bs-btn-active-bg: var(--app-primary); --bs-btn-active-border-color: var(--app-primary); --bs-btn-active-color: var(--app-on-primary);
    --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); --bs-btn-disabled-color: var(--app-on-primary);
}
.btn-tone { --bs-btn-bg: var(--app-tone); --bs-btn-border-color: var(--app-tone); --bs-btn-color: var(--app-on-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--app-tone) 85%, #000); --bs-btn-hover-color: var(--app-on-primary); --bs-btn-active-bg: var(--app-tone); --bs-btn-active-color: var(--app-on-primary); }
[data-bs-theme="light"] .btn-tone { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-light {
    --bs-btn-bg: var(--app-glass-strong); --bs-btn-border-color: var(--app-line-strong); --bs-btn-color: var(--app-ink);
    --bs-btn-hover-bg: var(--app-surface); --bs-btn-hover-border-color: var(--app-ink); --bs-btn-hover-color: var(--app-ink);
    --bs-btn-active-bg: var(--app-surface-3); --bs-btn-active-border-color: var(--app-ink); --bs-btn-active-color: var(--app-ink);
}
.btn-outline-primary { --bs-btn-color: var(--app-ink); --bs-btn-border-color: var(--app-line-strong); --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-hover-color: var(--app-on-primary); }
.btn-outline-danger { --bs-btn-color: var(--app-danger); --bs-btn-border-color: color-mix(in srgb, var(--app-danger) 40%, transparent); --bs-btn-hover-bg: var(--app-danger); --bs-btn-hover-border-color: var(--app-danger); --bs-btn-hover-color: #fff; }
.btn-link { color: var(--app-tone); font-weight: 650; text-decoration: none; }
.btn-icon-sm { width: 2.3rem; height: 2.3rem; min-height: 0; padding: 0; border: 0; border-radius: 50%; color: var(--app-muted); background: transparent; }
.btn-icon-sm:hover { color: var(--app-ink); background: var(--app-surface-3); }
.form-control, .form-select { border-color: var(--app-line-strong); background-color: var(--app-surface); color: var(--app-ink); }
.form-control:focus, .form-select:focus { border-color: var(--app-tone); box-shadow: 0 0 0 .22rem var(--app-focus); background-color: var(--app-surface); color: var(--app-ink); }
.form-control::placeholder { color: var(--app-muted); opacity: .8; }
.form-control:disabled, .form-select:disabled { background-color: var(--app-surface-2); color: var(--app-muted); }
.form-floating > label { color: var(--app-muted); }
/* Con etiqueta flotante, el campo nunca enseña texto de ejemplo: la etiqueta ya dice qué va (también al enfocar). */
.form-floating > .form-control::placeholder, .form-floating > .form-control:focus::placeholder { color: transparent; }
.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background: transparent; }
.form-check-input:checked { background-color: var(--app-tone); border-color: var(--app-tone); }
/* Todas las casillas son interruptores (form-switch). Dentro de una fila flexible (etiqueta con texto al lado), el
   interruptor va en su sitio, sin el hueco ni el margen de Bootstrap. */
.form-switch .form-check-input { cursor: pointer; }
.prep-switch .form-check-input, .import-list label .form-check-input { flex: 0 0 auto; float: none; width: 2.3em; height: 1.3em; margin: 0; }
.card {
    --bs-card-bg: var(--app-surface); --bs-card-border-color: var(--app-glass-border); --bs-card-color: var(--app-ink);
    border-radius: var(--app-radius); box-shadow: var(--app-shadow);
    backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.card-title { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin-bottom: .9rem; }
.modal-content { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 1.6rem; color: var(--app-ink); box-shadow: var(--app-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--app-line); }
.modal-backdrop { --bs-backdrop-opacity: .45; }
.offcanvas { --bs-offcanvas-bg: var(--app-surface); --bs-offcanvas-color: var(--app-ink); }
.alert { border-radius: 1rem; }
.password-toggle-wrap { position: relative; }
.password-toggle { position: absolute; top: 50%; right: .55rem; z-index: 5; width: 2.2rem; height: 2.2rem; transform: translateY(-50%); display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--app-muted); background: transparent; }
.password-toggle:hover { color: var(--app-ink); background: var(--app-surface-3); }
.password-toggle-input { padding-right: 3rem !important; }

/* --------------------------------------------------------------------------
   Estructura: raíl lateral flotante (escritorio) y dock inferior con el asistente en el centro (móvil)
   -------------------------------------------------------------------------- */
.app-shell { min-height: 100dvh; }
.app-main { min-width: 0; overflow-x: clip; }
.app-main:focus { outline: 0; }
.app-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--app-ink); text-decoration: none; }
.app-brand .brand-word { font-family: var(--app-display); font-variation-settings: "wdth" 118, "opsz" 48; font-weight: 800; font-size: 1.2rem; letter-spacing: -.04em; }
.app-sidebar { position: fixed; z-index: 1020; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.2rem .9rem 1rem; background: var(--app-glass); border: 1px solid var(--app-glass-border); box-shadow: var(--app-shadow); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); }
.app-sidebar .app-brand { padding: 0 .3rem; }
.sidebar-assistant { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .7rem; border: 1px solid var(--app-line); border-radius: 1.2rem; color: var(--app-ink); background: var(--app-glass-strong); text-align: left; transition: box-shadow .2s ease, transform .2s var(--app-ease); }
.sidebar-assistant:hover { box-shadow: 0 0 0 4px var(--app-tone-soft); transform: translateY(-1px); }
.sidebar-assistant strong, .sidebar-assistant small { display: block; line-height: 1.2; }
.sidebar-assistant small { color: var(--app-muted); font-size: .76rem; }
.sidebar-assistant kbd { margin-left: auto; }
.app-sidebar .nav-link { display: flex; align-items: center; gap: .75rem; padding: .62rem .85rem; border-radius: 999px; color: var(--app-ink-2); font-weight: 650; font-size: .95rem; }
.app-sidebar .nav-link i { font-size: 1.08rem; color: var(--app-muted); }
.app-sidebar .nav-link:hover { color: var(--app-ink); background: var(--app-surface-3); }
.app-sidebar .nav-link.active { color: var(--app-on-primary); background: var(--app-primary); }
.app-sidebar .nav-link.active i { color: inherit; }
.sidebar-section-label { margin: .5rem .85rem -.1rem; color: var(--app-muted); font-size: .68rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.sidebar-user { margin-top: auto; display: flex; align-items: center; gap: .55rem; padding: .5rem .4rem .5rem .6rem; border: 1px solid var(--app-line); border-radius: 1.2rem; background: var(--app-glass-strong); }
.sidebar-user__copy { min-width: 0; flex: 1 1 auto; color: var(--app-ink); text-decoration: none; }
.sidebar-user__copy strong, .sidebar-user__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user__copy strong { font-size: .88rem; }
.sidebar-user__copy small { color: var(--app-muted); font-size: .72rem; }
.avatar { width: 2.3rem; height: 2.3rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #ffffff; background: linear-gradient(180deg, #a1a1a6, #7c7c80); font-weight: 700; font-size: .88rem; }
.mobile-profile { display: none; }
.app-dock { display: none; }
@media (min-width: 992px) {
    .app-sidebar { inset: .9rem auto .9rem .9rem; width: 250px; border-radius: 1.9rem; overflow-y: auto; }
    .app-main { margin-left: calc(250px + .9rem); }
    /* Pantallas grandes con escalado de Windows (≈1530×700): algo más de información por pantalla. */
    html { font-size: 15px; }
}
@media (max-width: 991.98px) {
    .app-sidebar { display: none !important; }
    .app-main { padding-bottom: calc(var(--app-dock-height) + env(safe-area-inset-bottom, 0px) + 2rem); }
    .mobile-profile { position: absolute; top: calc(.85rem + env(safe-area-inset-top, 0px)); right: .9rem; z-index: 1025; display: grid; width: 2.6rem; height: 2.6rem; border: 2px solid var(--app-glass-border); box-shadow: var(--app-shadow); }
    .app-dock {
        position: fixed; left: 50%; bottom: calc(.7rem + env(safe-area-inset-bottom, 0px)); z-index: 1030;
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
        width: min(28rem, calc(100vw - 1.4rem)); height: var(--app-dock-height); padding: .35rem;
        transform: translateX(-50%); border: 1px solid var(--app-glass-border); border-radius: 1.6rem;
        background: var(--app-glass-strong); box-shadow: var(--app-shadow-lg);
        backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7);
    }
    .app-dock__item { position: relative; height: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; border-radius: 1.2rem; color: var(--app-muted); font-size: .66rem; font-weight: 700; text-decoration: none; }
    .app-dock__item i { font-size: 1.22rem; line-height: 1; }
    .app-dock__item.active { color: var(--app-ink); background: var(--app-surface-3); }
}
.app-dock__orb { justify-self: center; width: 4.6rem; height: 3.7rem; padding: 0; border: 0; background: transparent; overflow: visible; }
.app-dock__orb .buddy { font-size: 3.5rem; margin-top: -1.7rem; box-shadow: 0 0 0 4px var(--app-canvas), 0 .25em .5em -.2em var(--buddy-face); animation: buddy-breathe 4.5s ease-in-out infinite; }
.app-dock__orb:active .buddy { scale: .94; }

/* --------------------------------------------------------------------------
   Cabeceras y contenido. En móvil las acciones de cabecera van a una segunda fila (nunca estrechan el título).
   -------------------------------------------------------------------------- */
.app-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 2.2rem 2.25rem .8rem; }
.app-page-header h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.02; letter-spacing: -.05em; font-variation-settings: "wdth" 125, "opsz" 96; }
.header-title-row { min-width: 0; flex: 1 1 26rem; }
.header-title-row > p:not(.eyebrow) { max-width: 44rem; margin: .55rem 0 0; color: var(--app-muted); }
.app-header-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .5rem; color: var(--app-ink-2); font-size: .7rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--app-tone); box-shadow: 0 0 0 3px var(--app-tone-soft); }
.app-content { max-width: 1240px; padding: 1rem 2.25rem 2.5rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 .7rem; }
.section-head h2 { margin: 0; font-size: 1.25rem; }
.section-head a { font-size: .88rem; font-weight: 650; text-decoration: none; }
.section-head--btn { align-items: center; }
@media (max-width: 991.98px) {
    .app-page-header { padding: calc(1.4rem + env(safe-area-inset-top, 0px)) 1.1rem .5rem; flex-direction: column; align-items: stretch; }
    .app-page-header .header-title-row { flex: 0 0 auto; padding-right: 3.2rem; }
    .app-header-actions .btn { flex: 1 1 auto; }
    .app-content { padding: .8rem 1.1rem 1.5rem; }
}

/* Esperas y vacíos */
.skeleton { display: block; border-radius: var(--app-radius); background: linear-gradient(100deg, var(--app-surface-2) 30%, var(--app-surface-3) 50%, var(--app-surface-2) 70%); background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.skeleton--line { height: 2.4rem; width: min(26rem, 80%); border-radius: .8rem; }
.skeleton--focus { height: 11rem; }
.skeleton--row { height: 3.6rem; border-radius: 1rem; list-style: none; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.empty-state { display: grid; justify-items: center; gap: .6rem; padding: 2.6rem 1.5rem; text-align: center; border: 1.5px dashed var(--app-line-strong); border-radius: var(--app-radius); background: var(--app-glass); list-style: none; }
.empty-state h2 { margin: .3rem 0 0; font-size: 1.4rem; }
.empty-state p { max-width: 30rem; margin: 0; color: var(--app-muted); }

/* Listas densas: una fila por elemento, la fila entera actúa y el resto de acciones en su «⋯» */
.row-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.row-item { display: flex; align-items: center; gap: .75rem; min-height: 3.6rem; padding: .45rem .5rem .45rem .7rem; border-radius: .55rem; background: var(--app-glass-strong); }
.row-item:first-child { border-top-left-radius: 1.2rem; border-top-right-radius: 1.2rem; }
.row-item:last-child { border-bottom-left-radius: 1.2rem; border-bottom-right-radius: 1.2rem; }
.row-item__check { width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; border: 2px solid var(--app-line-strong); border-radius: 50%; color: transparent; background: transparent; transition: all .2s var(--app-ease); }
.row-item__check:hover { border-color: var(--app-tone); color: var(--app-tone); }
.row-item.is-done .row-item__check { border-color: var(--app-tone); color: var(--app-on-primary); background: var(--app-tone); }
.row-item.is-done .row-item__copy strong { color: var(--app-muted); text-decoration: line-through; }
.row-item.is-overdue .row-item__copy small { color: var(--app-warn); font-weight: 700; }
.row-item__copy { min-width: 0; flex: 1 1 auto; display: grid; padding: 0; border: 0; background: transparent; color: var(--app-ink); text-align: left; }
.row-item__copy strong { font-weight: 650; overflow-wrap: anywhere; }
/* Parejas: el nombre normal y los apellidos en negrita, para ver de un vistazo si están bien separados. */
.row-item__copy .pair-names, .pair-names__first { font-weight: 400; }
.pair-names__last { font-weight: 800; }
.row-item__copy small { color: var(--app-muted); font-size: .8rem; }
.row-item__more { width: 2.3rem; height: 2.3rem; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--app-muted); background: transparent; }
.row-item__more:hover { color: var(--app-ink); background: var(--app-surface-3); }
.row-empty { padding: .9rem 1rem; border-radius: 1.2rem; color: var(--app-muted); background: var(--app-glass); list-style: none; }
.quick-add { display: flex; align-items: center; gap: .6rem; padding: .4rem .45rem .4rem 1.1rem; border: 1px solid var(--app-line-strong); border-radius: 999px; background: var(--app-surface); box-shadow: var(--app-shadow-sm); }
.quick-add:focus-within { border-color: var(--app-tone); box-shadow: 0 0 0 4px var(--app-focus); }
.quick-add > i { color: var(--app-muted); }
.quick-add__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--app-ink); font-size: 1rem; }
.done-list { margin-top: 1.4rem; }
.done-list summary { margin-bottom: .6rem; color: var(--app-ink-2); font-weight: 700; cursor: pointer; }

/* --------------------------------------------------------------------------
   Hoy: saludo, titular, la tarjeta de «lo que toca ahora», preguntas de un toque y lo próximo
   -------------------------------------------------------------------------- */
.hoy { padding: 2.2rem 2.25rem 2.5rem; max-width: 1240px; }
.hoy-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.4rem; }
.hoy-hero__greeting { margin: 0; color: var(--app-ink-2); font-weight: 650; }
.hoy-hero__headline { margin: .2rem 0 0; font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.04; letter-spacing: -.05em; font-variation-settings: "wdth" 125, "opsz" 96; }
.hoy-hero__headline strong { color: var(--app-tone); font-weight: inherit; }
.hoy-hero__subline { margin: .6rem 0 0; max-width: 40rem; color: var(--app-muted); font-size: 1.05rem; }
.hoy-hero__buddy { flex: 0 0 auto; padding: 0; border: 0; background: transparent; }
.hoy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; align-items: start; }
.hoy-side .section-head { margin-top: 0; }
.hoy-questions { display: grid; gap: .6rem; margin-top: .9rem; }
.hoy-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
/* «En juego» dentro de la ficha del torneo: el titular de lo que toca, más pequeño que el nombre del torneo, y sin el
   margen de portada (ya lo pone la ficha). */
.app-content .hoy { padding: 0; max-width: none; }
.enjuego-head { margin-bottom: 1.1rem; }
.enjuego-head .hoy-hero__headline { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.enjuego-head .hoy-hero__subline { margin-top: .35rem; font-size: .98rem; }
/* «‹ Torneos» encima del título de la ficha (y de «Preparar partida»: el nombre del torneo) */
.crumb { display: inline-flex; align-items: center; gap: .2rem; margin-bottom: .6rem; color: var(--app-tone); font-size: .9rem; font-weight: 700; text-decoration: none; }
.crumb:hover { color: var(--app-on-tone-container); }
.crumb + .eyebrow { display: flex; }
/* Punto rojo de «en directo» (pestaña «En juego» y tarjeta del torneo en juego) */
.live-dot { display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: 50%; background: var(--app-danger); box-shadow: 0 0 0 3px var(--app-danger-soft); vertical-align: .08em; }
/* Partidas jugadas, plegadas debajo de lo que toca (para revisar o corregir una mesa) */
.round-fold { margin-bottom: .5rem; border-radius: var(--app-radius); background: var(--app-glass-strong); }
.round-fold summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; cursor: pointer; list-style: none; }
.round-fold summary::-webkit-details-marker { display: none; }
.round-fold summary::after { content: "\F282"; font-family: "bootstrap-icons"; color: var(--app-muted); transition: transform .2s var(--app-ease); }
.round-fold[open] summary::after { transform: rotate(180deg); }
.round-fold summary span { margin-left: auto; color: var(--app-muted); font-size: .85rem; }
.round-fold .row-list { padding: 0 .5rem .5rem; }
.round-fold summary strong i { margin-right: .5rem; color: var(--app-tone); }
/* Recorrido de partidas de «En juego» (js/torneo-recorrido.js): un punto por partida y la copa de la entrega de premios.
   Con grupo B la línea se bifurca (A arriba, B abajo, en dorado). El JS coloca los puntos y dibuja las líneas según el
   ancho; con poco sitio (.is-compact) solo quedan los puntos y debajo se dice qué paso estás viendo. */
.rtrack { margin-bottom: 1rem; padding: .95rem .4rem .75rem; border-radius: var(--app-radius); background: var(--app-surface); box-shadow: var(--app-shadow-sm); --dot: 36px; }
.rtrack.is-compact { padding: .7rem .25rem; }
.rtrack__in { position: relative; min-height: var(--dot); }
.rtrack__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rtrack__lines path { fill: none; stroke: var(--app-surface-3); stroke-width: 3; stroke-linecap: round; }
.rtrack__lines path.is-on { stroke: var(--app-tone); }
.rtrack__lines path.is-b { stroke: var(--app-gold-soft); }
.rtrack__lines path.is-b.is-on { stroke: var(--app-gold); }
.rstep { position: absolute; z-index: 1; display: grid; justify-items: center; align-content: start; gap: .1rem; padding: 0 .15rem; border: 0; background: none; color: var(--app-ink); font: inherit; text-align: center; transform: translateX(-50%); cursor: pointer; }
.rstep__dot { width: var(--dot); height: var(--dot); display: grid; place-items: center; border: 3px solid var(--app-surface); border-radius: 50%; background: var(--app-surface-3); color: var(--app-muted); font-family: var(--app-display); font-variation-settings: "wdth" 118; font-weight: 800; font-size: 1rem; line-height: 1; transition: transform .15s var(--app-ease); }
.rtrack.is-compact .rstep__dot { border-width: 2px; font-size: .85rem; }
.rstep:hover .rstep__dot { transform: scale(1.08); }
.rstep b { margin-top: .3rem; font-size: .84rem; font-weight: 700; line-height: 1.2; }
.rstep small { color: var(--app-muted); font-size: .74rem; line-height: 1.25; }
.rtrack.is-compact .rstep b, .rtrack.is-compact .rstep small { display: none; }
.rstep .badge-group { margin-left: .15rem; color: var(--app-tone); background: var(--app-tone-soft); }
.rstep.is-b .badge-group { color: var(--app-gold); background: var(--app-gold-soft); }
.rstep .live-dot { width: .4rem; height: .4rem; margin-right: .3rem; }
.rstep.is-done .rstep__dot { background: var(--app-tone); color: var(--app-on-primary); }
.rstep.is-now .rstep__dot { border-color: var(--app-tone); background: var(--app-surface); color: var(--app-tone); }
.rstep.is-now small { color: var(--app-tone); font-weight: 700; }
.rstep.is-b.is-done .rstep__dot { background: var(--app-gold); }
.rstep.is-b.is-now .rstep__dot { border-color: var(--app-gold); color: var(--app-gold); }
.rstep.is-b.is-now small { color: var(--app-gold); }
.rstep.is-sel .rstep__dot { outline: 3px solid var(--app-tone-soft); outline-offset: 3px; }
.rstep.is-b.is-sel .rstep__dot { outline-color: var(--app-gold-soft); }
.rstep.is-sel b { color: var(--app-tone); }
.rstep.is-b.is-sel b { color: var(--app-gold); }
.rstep:focus-visible { outline: none; }
.rstep:focus-visible .rstep__dot { outline: 3px solid var(--app-focus); outline-offset: 3px; }
.rtrack__cut { position: absolute; z-index: 2; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--app-surface); color: var(--app-muted); font-size: .8rem; box-shadow: 0 0 0 1px var(--app-line-strong); transform: translate(-50%, -50%); }
.rtrack.is-compact .rtrack__cut { width: 1.1rem; height: 1.1rem; font-size: .6rem; }
.rtrack-cap { margin: -.45rem 0 1rem; text-align: center; color: var(--app-tone); font-size: .88rem; font-weight: 700; }
.rtrack-cap.is-b { color: var(--app-gold); }
.rtrack-cap span { color: var(--app-muted); font-weight: 400; }
.step-empty { padding: .2rem 0 0; }
.step-empty p, .step-sub { margin: -.3rem 0 .7rem; color: var(--app-muted); font-size: .92rem; }
.hoy-side .seg.seg--sm { display: inline-flex; flex-wrap: nowrap; width: auto; margin: 0 0 0 auto; }
.seg--sm button { padding: .3rem .8rem; font-size: .82rem; }
/* La tarjeta de lo que toca, entre el recorrido y los bloques: a todo el ancho y en una fila en escritorio. */
@media (min-width: 992px) {
    #hoyFocus .focus-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 1.1rem 1.3rem; }
    #hoyFocus .focus-card__actions { grid-column: auto; justify-content: flex-end; }
}
#hoy .hoy-grid { margin-top: 1.4rem; }
#hoy .hoy-questions:empty { margin: 0; }
/* Las dos columnas empiezan a la misma altura (con o sin botón en la cabecera) */
#hoy .hoy-grid .section-head { align-items: center; min-height: 2.1rem; }
#stepView > .section-head:first-child, #stepView > .step-empty:first-child .section-head { margin-top: 0; }
@media (max-width: 991.98px) {
    .hoy { padding: calc(1.4rem + env(safe-area-inset-top, 0px)) 1.1rem 1.5rem; }
    .hoy-hero { padding-right: 3rem; align-items: flex-start; }
    .hoy-hero__buddy { display: none; }
    .hoy-grid { grid-template-columns: 1fr; gap: 1.2rem; }
}
.focus-card {
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.1rem; padding: 1.4rem;
    border-radius: 1.8rem; color: var(--app-ink-card-text); background: var(--app-ink-card); box-shadow: var(--app-shadow-lg); isolation: isolate;
}
.focus-card::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; height: 140%; z-index: -1; background: radial-gradient(closest-side, var(--app-ink-card-glow), transparent); }
.focus-card[data-tone="warn"] { --app-ink-card-glow: rgba(245, 180, 92, .35); }
.focus-card__icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 1rem; font-size: 1.35rem; color: var(--app-ink-card); background: #9cc3ea; }
.focus-card[data-tone="warn"] .focus-card__icon { background: #f5b45c; }
.focus-card__copy small { display: block; opacity: .75; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.focus-card__copy h2 { margin: .2rem 0 0; color: inherit; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -.03em; overflow-wrap: anywhere; }
.focus-card__copy p { margin: .3rem 0 0; opacity: .8; }
.focus-card__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.focus-card .btn-primary { --bs-btn-bg: #9cc3ea; --bs-btn-border-color: #9cc3ea; --bs-btn-color: #0c2238; --bs-btn-hover-bg: #bfd7f0; --bs-btn-hover-border-color: #bfd7f0; --bs-btn-hover-color: #0c2238; --bs-btn-active-bg: #9cc3ea; --bs-btn-active-color: #0c2238; }
.focus-card .btn-light { --bs-btn-bg: rgba(255, 255, 255, .1); --bs-btn-border-color: rgba(255, 255, 255, .2); --bs-btn-color: inherit; --bs-btn-hover-bg: rgba(255, 255, 255, .18); --bs-btn-hover-color: inherit; --bs-btn-hover-border-color: rgba(255, 255, 255, .35); }
.question { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; padding: .95rem 2.8rem .95rem 1rem; border: 1px solid var(--app-line); border-radius: 1.3rem; background: var(--app-glass-strong); box-shadow: var(--app-shadow-sm); }
.question__icon { grid-row: span 2; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: .85rem; color: var(--app-on-tone-container); background: var(--app-tone-container); }
.question[data-tone="warn"] .question__icon { color: var(--app-warn); background: var(--app-warn-soft); }
.question[data-tone="calm"] .question__icon { color: var(--app-ink-2); background: var(--app-surface-3); }
.question p { margin: 0; align-self: center; }
.question__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.question__close { position: absolute; top: .5rem; right: .5rem; width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--app-muted); background: transparent; }
.question__close:hover { color: var(--app-ink); background: var(--app-surface-3); }

/* --------------------------------------------------------------------------
   La cara del asistente: un cuadradito redondeado con ojos y boca que cambian con el ánimo.
   Se dimensiona con font-size (todo en em). Cada proyecto puede cambiar su personaje (skill nuevo-proyecto).
   -------------------------------------------------------------------------- */
.buddy { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .12em; width: 1em; height: 1em; padding-bottom: .1em; border-radius: .34em; background: var(--buddy-face); font-size: 2.4rem; line-height: 1; vertical-align: middle; box-shadow: 0 0 .4em color-mix(in srgb, var(--buddy-face) 38%, transparent); transition: background-color .45s ease, rotate .35s ease, scale .2s ease; }
.buddy__eye { width: .12em; height: .27em; border: 0 solid var(--buddy-eye); border-radius: .06em; background: var(--buddy-eye); translate: calc(var(--look-x) * .03em) calc(var(--look-y) * .025em); transition: translate .22s ease, scale .16s ease, rotate .3s ease, width .3s ease, height .3s ease, border-radius .3s ease, background-color .45s ease; }
.buddy__mouth { position: absolute; left: 50%; bottom: .17em; width: .22em; height: .07em; margin-left: -.11em; border-bottom: .045em solid var(--buddy-eye); border-radius: 0 0 .12em .12em; transition: all .3s var(--app-ease); }
.buddy.is-blink .buddy__eye { scale: 1 .1; }
.buddy.is-hop { animation: buddy-hop .7s cubic-bezier(.3, 1.4, .5, 1); }
.buddy[data-mood="happy"] .buddy__eye { width: .18em; height: .1em; border-width: .06em .06em 0; border-radius: .1em .1em 0 0; background: transparent; }
.buddy[data-mood="happy"] .buddy__mouth { width: .3em; height: .12em; margin-left: -.15em; }
.buddy[data-mood="worried"] { --buddy-face: var(--app-warn); }
.buddy[data-mood="worried"] .buddy__eye { height: .2em; }
.buddy[data-mood="worried"] .buddy__eye:first-of-type { rotate: -20deg; }
.buddy[data-mood="worried"] .buddy__eye:last-of-type { rotate: 20deg; }
.buddy[data-mood="worried"] .buddy__mouth { border-bottom: 0; border-top: .045em solid var(--buddy-eye); border-radius: .12em .12em 0 0; }
.buddy[data-mood="sleepy"] { --buddy-face: var(--app-surface-3); --buddy-eye: var(--app-muted); box-shadow: none; }
.buddy[data-mood="sleepy"] .buddy__eye { width: .15em; height: .045em; }
.buddy[data-mood="thinking"] .buddy__eye { translate: .04em -.05em; }
.buddy[data-mood="thinking"] .buddy__eye:last-of-type { height: .19em; }
.buddy[data-mood="thinking"] .buddy__mouth { width: .12em; margin-left: -.02em; }
.buddy[data-mood="thinking"] { animation: buddy-think 1.6s ease-in-out infinite; }
.buddy[data-mood="listening"] { animation: buddy-listen 1.3s ease-out infinite; }
.buddy[data-mood="listening"] .buddy__mouth { width: .12em; height: .12em; margin-left: -.06em; border: .045em solid var(--buddy-eye); border-radius: 50%; }
.buddy[data-mood="confused"] { rotate: -9deg; }
.buddy[data-mood="confused"] .buddy__eye:first-of-type { scale: 1 .6; }
@keyframes buddy-hop { 30% { translate: 0 -.16em; scale: .96 1.05; } 58% { translate: 0 0; scale: 1.07 .92; } 78% { scale: .98 1.02; } }
@keyframes buddy-breathe { 50% { scale: 1.04; } }
@keyframes buddy-think { 50% { rotate: 4deg; } }
@keyframes buddy-listen { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--buddy-face) 50%, transparent); } to { box-shadow: 0 0 0 .24em transparent; } }
.buddy--xs { font-size: 1.1rem; box-shadow: none; }
.buddy--sm { font-size: 1.9rem; }
.buddy--md { font-size: 2.5rem; }
.buddy--lg { font-size: 3.4rem; }
.buddy--xl { font-size: 4.8rem; }

/* --------------------------------------------------------------------------
   Hoja del asistente y propuestas
   -------------------------------------------------------------------------- */
.sheet-grip { position: absolute; top: .6rem; left: 50%; width: 2.6rem; height: .3rem; margin-left: -1.3rem; border-radius: 999px; background: var(--app-line-strong); }
.assistant-sheet.offcanvas-bottom { height: auto; max-height: 92dvh; display: flex; flex-direction: column; border-radius: 2rem 2rem 0 0; padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 992px) { .assistant-sheet.offcanvas-bottom { left: calc(50% - 22rem + 130px); right: auto; width: 44rem; max-width: calc(100vw - 2rem); } }
.assistant-sheet__head { display: flex; align-items: center; gap: .9rem; padding: 1.5rem 1.4rem .5rem; }
.assistant-sheet__title { min-width: 0; flex: 1; }
.assistant-sheet__title h2 { margin: 0; font-size: 1.5rem; }
.assistant-sheet__title p { margin: .1rem 0 0; color: var(--app-muted); font-size: .88rem; }
.assistant-context { display: flex; align-items: center; gap: .5rem; margin: 0 1.4rem .5rem; padding: .45rem .75rem; border-radius: 999px; background: var(--app-tone-soft); color: var(--app-on-tone-container); font-size: .82rem; font-weight: 650; }
[data-bs-theme="dark"] .assistant-context { color: var(--app-tone); }
.assistant-log { display: flex; flex-direction: column; gap: .9rem; min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 0 1.4rem; }
.assistant-log:empty { display: none; }
.assistant-turn { display: flex; flex-direction: column; gap: .55rem; animation: toast-in .3s var(--app-ease); }
.assistant-msg { max-width: 90%; margin: 0; padding: .7rem .95rem; border-radius: 1.2rem; font-size: .96rem; line-height: 1.45; }
.assistant-msg p { margin: 0; }
.assistant-msg--user { align-self: flex-end; color: var(--app-on-primary); background: var(--app-primary); border-bottom-right-radius: .35rem; overflow-wrap: anywhere; }
.assistant-photo { display: block; width: 46%; max-width: 12rem; max-height: 16rem; padding: 0; object-fit: cover; background: var(--app-surface-2); }
.assistant-msg--bot { align-self: flex-start; max-width: 100%; color: var(--app-ink); background: var(--app-surface); border: 1px solid var(--app-line); border-bottom-left-radius: .35rem; box-shadow: var(--app-shadow-sm); }
.assistant-msg--bot strong { font-weight: 750; background: linear-gradient(transparent 62%, var(--app-warn-soft) 0); }
.assistant-msg__actions, .assistant-msg__choices { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.assistant-thinking { display: inline-flex; gap: .3rem; padding: .85rem 1rem; }
.assistant-thinking span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--app-muted); animation: thinking-dot 1s infinite ease-in-out; }
.assistant-thinking span:nth-child(2) { animation-delay: .15s; }
.assistant-thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes thinking-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.assistant-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .8rem 1.4rem .2rem; }
.assistant-chip { padding: .45rem .85rem; border: 1px solid var(--app-line-strong); border-radius: 999px; color: var(--app-ink-2); background: var(--app-surface); font-size: .85rem; font-weight: 650; }
.assistant-chip:hover { border-color: var(--app-ink); color: var(--app-ink); }
.assistant-composer { display: flex; align-items: center; gap: .4rem; margin: .7rem 1.4rem .9rem; padding: .35rem .35rem .35rem 1.1rem; border: 1px solid var(--app-line-strong); border-radius: 999px; background: var(--app-surface); box-shadow: var(--app-shadow-sm); }
.assistant-composer:focus-within { border-color: var(--app-tone); box-shadow: 0 0 0 4px var(--app-focus); }
.assistant-composer__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--app-ink); font-size: 1rem; }
.assistant-composer__input:focus-visible { outline: 0; }
/* Barras de búsqueda: la píldora es el borde; dentro, un campo con etiqueta flotante sin caja propia. Al escribir, la
   etiqueta sube y el campo queda vacío (sin texto de ejemplo dentro). */
.search .form-floating { flex: 1 1 auto; min-width: 0; }
.search .form-floating > .form-control { height: 3rem; min-height: 3rem; padding: 1.3rem 0 .2rem; border: 0; border-radius: 0; background: transparent; color: var(--app-ink); font-size: 1rem; box-shadow: none; }
.search .form-floating > label { padding: .8rem 0; border: 0; }
.assistant-composer__mic, .assistant-composer__send { width: 2.6rem; height: 2.6rem; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; font-size: 1.1rem; }
.assistant-composer__mic { color: var(--app-ink-2); background: var(--app-surface-3); }
.assistant-composer__mic.is-listening { color: #fff; background: var(--app-danger); }
.assistant-composer__send { color: var(--app-on-primary); background: var(--app-primary); }
.proposals { display: grid; gap: .5rem; margin-top: .8rem; }
.proposal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .7rem .75rem; border: 1px solid var(--app-line); border-radius: 1.1rem; background: var(--app-surface-2); }
.proposal__icon { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: .85rem; color: var(--app-on-tone-container); background: var(--app-tone-container); }
.proposal h3 { margin: 0; font-family: var(--app-font); font-size: .96rem; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.proposal__meta { margin: .05rem 0 0; color: var(--app-muted); font-size: .8rem; }
.proposal__actions { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.proposal__done { color: var(--app-tone); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.proposal.is-applied { opacity: .75; }
@media (max-width: 575.98px) { .proposal { grid-template-columns: auto minmax(0, 1fr); } .proposal__actions { grid-column: 2; justify-content: flex-start; } }

/* --------------------------------------------------------------------------
   Avisos con «Deshacer», diálogos y hojas de acciones
   -------------------------------------------------------------------------- */
.app-toast-region { position: fixed; left: 50%; bottom: 1.4rem; z-index: 1090; display: grid; gap: .5rem; width: min(26rem, calc(100vw - 2rem)); transform: translateX(-50%); pointer-events: none; }
@media (max-width: 991.98px) { .app-toast-region { bottom: calc(var(--app-dock-height) + env(safe-area-inset-bottom, 0px) + 1.5rem); } }
/* Tarjeta «Instala la app» (js/app.js): abajo a la derecha en escritorio; en el móvil, encima del dock */
.install-card { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 1080; display: flex; align-items: center; gap: .75rem; width: min(25rem, calc(100vw - 2rem)); padding: .75rem .8rem .75rem .75rem; border: 1px solid var(--app-glass-border); border-radius: var(--app-radius); background: var(--app-glass-strong); box-shadow: var(--app-shadow-lg); backdrop-filter: blur(18px); animation: install-in .4s var(--app-ease); }
.install-card img { flex: 0 0 auto; border-radius: .7rem; }
.install-card__copy { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.install-card__copy strong { font-size: .95rem; }
.install-card__copy small { color: var(--app-muted); font-size: .8rem; line-height: 1.3; }
.install-card__close { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--app-muted); }
.install-card__close:hover { background: var(--app-surface-3); color: var(--app-ink); }
@keyframes install-in { from { opacity: 0; transform: translateY(1rem); } }
@media (max-width: 991.98px) { .install-card { right: 50%; bottom: calc(var(--app-dock-height) + env(safe-area-inset-bottom, 0px) + 1.2rem); transform: translateX(50%); animation: none; } }
.app-toast-region.is-top { top: calc(1rem + env(safe-area-inset-top, 0px)); bottom: auto; z-index: 2100; }
.app-toast { display: flex; align-items: center; gap: .7rem; padding: .75rem .8rem .75rem 1rem; border-radius: 1.1rem; color: #f5f5f7; background: #1d1d1f; box-shadow: var(--app-shadow-lg); font-size: .92rem; font-weight: 600; pointer-events: auto; animation: toast-in .3s var(--app-ease); }
[data-bs-theme="dark"] .app-toast { background: #2c2c2e; }
.app-toast > i { color: #9cc3ea; font-size: 1.1rem; }
.app-toast[data-tone="error"] > i { color: #ff8a8a; }
.app-toast span { flex: 1; min-width: 0; }
.app-toast button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: .45rem .85rem; color: #0c2238; background: #9cc3ea; font-weight: 750; font-size: .86rem; }
.app-toast.is-leaving { animation: toast-out .25s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
.app-dialog .modal-content { text-align: center; }
.app-dialog .modal-body { padding: 1.8rem 1.6rem 1rem; }
.app-dialog__icon { width: 3.4rem; height: 3.4rem; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 1.2rem; font-size: 1.5rem; color: var(--app-ink); background: var(--app-surface-3); }
.app-dialog.is-danger .app-dialog__icon { color: var(--app-danger); background: var(--app-danger-soft); }
.app-dialog h2 { font-size: 1.3rem; margin: 0 0 .4rem; }
.app-dialog p { color: var(--app-muted); margin: 0; }
.app-dialog .modal-footer { justify-content: center; border: 0; padding-top: 0; }
/* Aviso en rojo dentro del diálogo (lo que no tiene vuelta atrás, como borrar un torneo jugado) */
.app-dialog__alert { display: flex; align-items: flex-start; gap: .55rem; margin-top: 1rem; padding: .75rem .85rem; border-radius: .9rem; background: var(--app-danger-soft); color: var(--app-danger); font-size: .88rem; font-weight: 700; line-height: 1.35; text-align: left; }
.app-dialog__alert .bi { flex: 0 0 auto; margin-top: .1rem; }
.app-dialog.is-danger .btn-primary { --bs-btn-bg: var(--app-danger); --bs-btn-border-color: var(--app-danger); --bs-btn-color: #fff; --bs-btn-hover-bg: #b93737; --bs-btn-hover-border-color: #b93737; --bs-btn-hover-color: #fff; }
.invite-link { display: flex; gap: .4rem; margin-top: .9rem; }
.invite-link .form-floating { flex: 1; min-width: 0; }
.invite-link .form-control { min-width: 0; font-size: .82rem; }
.app-sheet.offcanvas-bottom { height: auto; max-height: 86dvh; border-radius: 2rem 2rem 0 0; padding-bottom: calc(.8rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .app-sheet.offcanvas-bottom { left: 50%; right: auto; width: 30rem; transform: translate(-50%, 100%); } .app-sheet.offcanvas-bottom.show, .app-sheet.offcanvas-bottom.showing { transform: translate(-50%, 0); } }
.app-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.4rem .6rem; }
.app-sheet__head h2 { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.app-sheet__head p { margin: .1rem 0 0; color: var(--app-muted); font-size: .88rem; }
.app-sheet__list { display: grid; gap: 3px; padding: .3rem 1rem 0; overflow-y: auto; }
.app-sheet__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .8rem 1rem; border: 0; border-radius: .5rem; color: var(--app-ink); background: var(--app-surface-2); text-align: left; text-decoration: none; font: inherit; }
.app-sheet__item:first-child { border-top-left-radius: 1.3rem; border-top-right-radius: 1.3rem; }
.app-sheet__item:last-child { border-bottom-left-radius: 1.3rem; border-bottom-right-radius: 1.3rem; }
.app-sheet__item:hover { color: var(--app-ink); background: var(--app-surface-3); }
.app-sheet__item > .bi:first-child { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: .9rem; color: var(--app-on-tone-container); background: var(--app-tone-container); font-size: 1.05rem; }
.app-sheet__item strong { display: block; font-weight: 650; }
.app-sheet__item small { display: block; color: var(--app-muted); font-size: .8rem; }
.app-sheet__chevron { color: var(--app-muted); }
.app-sheet__item.is-danger { color: var(--app-danger); }
.app-sheet__item.is-danger > .bi:first-child { color: var(--app-danger); background: var(--app-danger-soft); }
/* El mismo menú en escritorio: desplegable junto al botón que lo abre */
.app-menu { position: fixed; z-index: 1080; width: max-content; min-width: 15rem; max-width: 21rem; max-height: calc(100dvh - 16px); overflow-y: auto; padding: .35rem; border: 1px solid var(--app-line); border-radius: .9rem; background: var(--app-surface); box-shadow: var(--app-shadow-lg), var(--app-shadow-sm); animation: app-menu-in .14s var(--app-ease); }
@keyframes app-menu-in { from { opacity: 0; transform: translateY(-4px); } }
.app-menu__cap { margin: 0; padding: .45rem .65rem .3rem; overflow: hidden; color: var(--app-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
.app-menu hr { margin: .25rem .4rem; border: 0; border-top: 1px solid var(--app-line); opacity: 1; }
.app-menu__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; width: 100%; padding: .55rem .65rem; border: 0; border-radius: .6rem; color: var(--app-ink); background: none; text-align: left; text-decoration: none; font: inherit; }
.app-menu__item:hover, .app-menu__item:focus-visible { color: var(--app-ink); background: var(--app-surface-2); outline: 0; }
.app-menu__item > .bi { margin-top: .05rem; color: var(--app-tone); font-size: 1.05rem; }
.app-menu__item strong { display: block; font-size: .92rem; font-weight: 700; }
.app-menu__item small { display: block; color: var(--app-muted); font-size: .78rem; line-height: 1.3; }
.app-menu__item.is-danger, .app-menu__item.is-danger > .bi, .app-menu__item.is-danger:hover { color: var(--app-danger); }
[aria-expanded="true"].row-item__more { color: var(--app-ink); background: var(--app-surface-3); }
@media (prefers-reduced-motion: reduce) { .app-menu { animation: none; } }

/* --------------------------------------------------------------------------
   Acceso
   -------------------------------------------------------------------------- */
.auth-shell { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1.1rem; }
.auth-panel { width: min(64rem, 100%); display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.auth-intro h1 { margin: 1.3rem 0 1rem; font-size: clamp(2.6rem, 6.5vw, 4.4rem); line-height: .96; letter-spacing: -.06em; font-variation-settings: "wdth" 125, "opsz" 96; }
.auth-intro > p { max-width: 30rem; color: var(--app-ink-2); font-size: 1.12rem; }
.auth-feature-list { display: grid; gap: .65rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.auth-feature-list li { display: flex; align-items: center; gap: .75rem; color: var(--app-ink-2); font-weight: 600; }
.auth-feature-list > li > i { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .8rem; color: var(--app-tone); background: var(--app-glass-strong); border: 1px solid var(--app-line); }
.auth-card { border-radius: 2rem; background: var(--app-glass-strong); }
.auth-guide-link { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; padding: .8rem 1rem; border: 1px solid var(--app-line); border-radius: 1.2rem; background: var(--app-surface); color: var(--app-ink); text-decoration: none; }
.auth-guide-link > i:first-child { font-size: 1.3rem; color: var(--app-tone); }
.auth-guide-link span { flex: 1; }
.auth-guide-link strong, .auth-guide-link small { display: block; }
.auth-guide-link small { color: var(--app-muted); }
@media (max-width: 991.98px) { .auth-panel { grid-template-columns: 1fr; gap: 1.6rem; } .auth-feature-list { display: none; } }
.public-shell .app-main { margin-left: 0; padding-bottom: 2rem; }

/* Cuenta y guía */
.cuenta > .seg button i { margin-right: .4rem; }
/* En el móvil, las pestañas de la cuenta en una sola fila a todo el ancho (sin iconos, que no caben) */
@media (max-width: 575.98px) {
    .cuenta > .seg { display: flex; flex-wrap: nowrap; width: 100%; }
    .cuenta > .seg button { flex: 1 0 auto; padding-inline: .35rem; font-size: .8rem; white-space: nowrap; }
    .cuenta > .seg button i { display: none; }
}
.cuenta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
.cuenta-grid--wide { max-width: 48rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.card-head .card-title { margin: 0; }
/* Usuarios: una fila por persona (iniciales, nombre con etiquetas, email y último acceso) y las invitaciones sin usar */
.person-ava { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--app-tone-container); color: var(--app-on-tone-container); font-weight: 800; font-size: .85rem; }
.row-item.is-blocked .person-ava { background: var(--app-surface-3); color: var(--app-muted); }
.row-item.is-blocked .row-item__copy strong { color: var(--app-muted); }
.row-item.is-pending .person-ava { border: 2px dashed var(--app-line-strong); background: transparent; color: var(--app-muted); }
.person-tag { display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; padding: 0 .45rem; border-radius: 999px; font-size: .7rem; font-weight: 800; vertical-align: 1px; white-space: nowrap; }
.person-tag.is-owner { background: var(--app-tone-soft); color: var(--app-tone); }
.person-tag.is-me { background: var(--app-surface-3); color: var(--app-ink-2); }
.person-tag.is-blocked { background: var(--app-danger-soft); color: var(--app-danger); }
.person-tag.is-pending { background: var(--app-warn-soft); color: var(--app-warn); }
.theme-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; padding: .25rem; border-radius: 1.1rem; background: var(--app-surface-3); }
.theme-choice button { display: grid; justify-items: center; gap: .2rem; padding: .6rem .4rem; border: 0; border-radius: .9rem; color: var(--app-muted); background: transparent; font-weight: 700; font-size: .86rem; }
.theme-choice button i { font-size: 1.2rem; }
html[data-theme-mode="light"] .theme-choice [data-theme-set="light"],
html[data-theme-mode="dark"] .theme-choice [data-theme-set="dark"],
html[data-theme-mode="auto"] .theme-choice [data-theme-set="auto"] { color: var(--app-ink); background: var(--app-surface); box-shadow: var(--app-shadow-sm); }
.app-version { display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem; border-radius: 1rem; background: var(--app-surface-2); }
.app-version > span { flex: 1; min-width: 0; display: grid; }
.app-version small { color: var(--app-muted); font-size: .8rem; }
/* Logo de las actas: la vista previa sobre blanco (como saldrá en el papel) y al lado qué es y sus botones */
.logo-setting { display: flex; align-items: center; gap: 1rem; }
.logo-setting__preview { flex: 0 0 auto; display: grid; place-items: center; width: 5.5rem; height: 5.5rem; padding: .5rem; border: 1px solid var(--app-line); border-radius: 1rem; background: #fff; color: #8e8e93; font-size: 1.6rem; }
.logo-setting__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Guía: capítulos con índice fijo en escritorio (pastillas arriba en el móvil), pasos numerados en una línea y
   tarjetas de reglas con un ejemplo cada una. */
.guide-layout { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.guide-index { position: sticky; top: 1rem; display: grid; gap: 2px; padding: .5rem; border-radius: 1.2rem; background: var(--app-surface); box-shadow: var(--app-shadow-sm); }
.guide-index a { display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; border-radius: .8rem; color: var(--app-ink-2); font-weight: 650; font-size: .88rem; text-decoration: none; }
.guide-index a:hover { background: var(--app-surface-3); color: var(--app-ink); }
.guide-index a.on { background: var(--app-tone-soft); color: var(--app-tone); }
.guide-index a i { width: 1.1rem; text-align: center; }
.guide-chips { display: none; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.2rem; }
.guide-chips a { padding: .35rem .7rem; border-radius: 999px; background: var(--app-surface); box-shadow: var(--app-shadow-sm); color: var(--app-ink-2); font-weight: 700; font-size: .8rem; text-decoration: none; }
@media (max-width: 991.98px) {
    .guide-layout { grid-template-columns: minmax(0, 1fr); }
    .guide-index { display: none; }
    .guide-chips { display: flex; }
}
.guide-sec { margin: 0 0 2.2rem; scroll-margin-top: 1rem; }
/* Reglamento: la página es el índice. Capítulos que se abren con la lista de sus artículos (número y título, una
   línea); cada artículo se abre ahí mismo con su texto a un ancho de lectura. Lo enlazado se ilumina al llegar. */
.rules { max-width: 52rem; }
.rules-tools { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .9rem; }
.rules-search { flex: 1 1 16rem; display: flex; align-items: center; gap: .5rem; padding: 0 .9rem; border: 1px solid var(--app-line-strong); border-radius: 999px; background: var(--app-surface); }
.rules-search i { color: var(--app-muted); }
.rules-search input { flex: 1; min-width: 0; padding: .6rem 0; border: 0; outline: 0; background: transparent; color: var(--app-ink); font: inherit; }
.rules-search:focus-within { border-color: var(--app-tone); box-shadow: 0 0 0 3px var(--app-focus); }
.rules-quick { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.3rem; }
.rules-quick a { display: inline-flex; align-items: baseline; gap: .4rem; padding: .4rem .75rem; border-radius: 999px; background: var(--app-surface); box-shadow: var(--app-shadow-sm); color: var(--app-ink); font-size: .85rem; font-weight: 700; text-decoration: none; }
.rules-quick a:hover { box-shadow: inset 0 0 0 2px var(--app-line-strong); }
.rules-quick small { color: var(--app-tone); font-size: .75rem; font-weight: 800; }
.rules-count, .rules-none { margin: 0 0 .8rem; color: var(--app-muted); font-size: .88rem; font-weight: 600; }
.rules-chap { margin: 0 0 .7rem; border-radius: 1.1rem; background: var(--app-surface); box-shadow: var(--app-shadow-sm); overflow: clip; scroll-margin-top: 1rem; }
.rules-chap > summary, .rules-art > summary { display: flex; align-items: center; gap: .8rem; list-style: none; cursor: pointer; }
.rules-chap > summary::-webkit-details-marker, .rules-art > summary::-webkit-details-marker { display: none; }
.rules-chap > summary { padding: .85rem 1.1rem; }
.rules-chap > summary b { flex: 0 0 auto; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .8rem; background: var(--app-tone-container); color: var(--app-on-tone-container); font-family: var(--app-display); font-variation-settings: "wdth" 118; font-size: .92rem; font-weight: 800; }
.rules-chap > summary span { flex: 1; min-width: 0; font-weight: 800; font-size: 1rem; line-height: 1.3; }
.rules-chap > summary small { flex: 0 0 auto; color: var(--app-muted); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.rules-chap > summary i, .rules-art > summary i { flex: 0 0 auto; color: var(--app-muted); transition: transform .2s var(--app-ease); }
.rules-chap[open] > summary i { transform: rotate(180deg); }
.rules-section { margin: 0; padding: .7rem 1.1rem .3rem; border-top: 1px solid var(--app-line); color: var(--app-muted); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.rules-art { border-top: 1px solid var(--app-line); scroll-margin-top: 1rem; }
.rules-art > summary { padding: .65rem 1.1rem; }
.rules-art > summary:hover { background: var(--app-surface-2); }
.rules-art > summary em { flex: 0 0 3.7rem; color: var(--app-tone); font-style: normal; font-size: .8rem; font-weight: 800; }
.rules-art > summary span { flex: 1; min-width: 0; font-weight: 600; font-size: .94rem; }
.rules-art[open] > summary { background: var(--app-surface-2); }
.rules-art[open] > summary span { font-weight: 800; }
.rules-art[open] > summary i { transform: rotate(90deg); }
.rules-art__body { padding: .3rem 1.4rem 1rem 5.6rem; background: var(--app-surface-2); }
.rules-art__body p { margin: 0 0 .55rem; color: var(--app-ink-2); font-size: .93rem; line-height: 1.6; }
.rules-art__body h4 { margin: .9rem 0 .4rem; font-size: .92rem; font-weight: 800; }
.rules-item { display: grid; grid-template-columns: 3.3rem minmax(0, 1fr); gap: .4rem; margin: 0 -.5rem .2rem; padding: .3rem .5rem; border-radius: .7rem; scroll-margin-top: 1rem; }
.rules-item > b { padding-top: .12rem; color: var(--app-tone); font-family: var(--app-display); font-variation-settings: "wdth" 118; font-size: .86rem; font-weight: 800; }
.rules-item p { margin-bottom: .35rem; }
.rules-li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .3rem; }
.rules-li > span { color: var(--app-muted); font-size: .86rem; font-weight: 700; }
.rules-li p { margin-bottom: .3rem; }
.rules-copy { display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; padding: 0; border: 0; background: none; color: var(--app-tone); font-size: .82rem; font-weight: 700; }
@keyframes rules-target { from { box-shadow: inset 0 0 0 2px var(--app-tone); } to { box-shadow: inset 0 0 0 2px transparent; } }
.rules-art.is-target > summary, .rules-item.is-target { animation: rules-target 2.4s ease-out forwards; }
.rules-item.is-target { background: var(--app-tone-soft); }
@media (max-width: 575.98px) {
  .rules-chap > summary { padding: .75rem .85rem; gap: .65rem; }
  .rules-chap > summary small { display: none; }
  .rules-art > summary { padding: .6rem .85rem; gap: .6rem; }
  .rules-art > summary em { flex-basis: 3.2rem; }
  .rules-art__body { padding: .3rem .9rem 1rem; }
  .rules-item { grid-template-columns: 2.9rem minmax(0, 1fr); }
}
.guide-sec > h2 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .25rem; font-size: 1.35rem; font-weight: 800; }
.guide-sec > h2 i { color: var(--app-tone); }
.guide-sub { margin: 0 0 .9rem; color: var(--app-muted); font-size: .92rem; }
.guide-card { padding: 1rem 1.1rem; border-radius: 1.1rem; background: var(--app-surface); box-shadow: var(--app-shadow-sm); }
.guide-card > i:first-child { font-size: 1.35rem; color: var(--app-tone); }
.guide-card > strong { display: block; margin: .3rem 0 .15rem; }
.guide-card p, .guide-card li { color: var(--app-ink-2); font-size: .9rem; }
.guide-card p { margin: 0 0 .5rem; }
.guide-card p:last-child { margin-bottom: 0; }
.guide-card h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem; font-size: 1rem; font-weight: 800; }
.guide-card h3 i { color: var(--app-tone); }
.guide-card ol { margin: 0 0 .5rem; padding-left: 1.2rem; }
.guide-card--flat { margin-top: .9rem; }
.guide-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.guide-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.guide-card--wide { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .guide-who, .guide-rules { grid-template-columns: minmax(0, 1fr); } }
/* Pasos: un número por paso sobre una línea vertical */
.guide-steps { position: relative; display: grid; gap: .7rem; margin: 0; padding: 0 0 0 3.1rem; list-style: none; counter-reset: guide-step; }
.guide-steps::before { content: ""; position: absolute; left: 1.15rem; top: 1rem; bottom: 1rem; width: 2px; background: var(--app-line-strong); }
.guide-step { position: relative; padding: .95rem 1.1rem; border-radius: 1.1rem; background: var(--app-surface); box-shadow: var(--app-shadow-sm); counter-increment: guide-step; }
.guide-step::before { content: counter(guide-step); position: absolute; left: -3.1rem; top: .8rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--app-tone); color: var(--app-on-primary); font-weight: 800; box-shadow: 0 0 0 4px var(--app-canvas); }
.guide-step h3 { margin: 0 0 .2rem; font-size: 1.02rem; font-weight: 800; }
.guide-step p { margin: 0; color: var(--app-ink-2); font-size: .9rem; }
.guide-where { display: inline-flex; align-items: center; gap: .3rem; margin: .5rem .3rem 0 0; padding: .15rem .55rem; border-radius: .5rem; background: var(--app-surface-3); color: var(--app-ink-2); font-size: .78rem; font-weight: 700; }
.guide-step .guide-tip, .guide-tip { display: flex; gap: .5rem; margin: .6rem 0 0; padding: .5rem .7rem; border-radius: .8rem; background: var(--app-tone-soft); color: var(--app-ink); font-size: .85rem; }
.guide-tip i { color: var(--app-tone); }
@media (max-width: 575.98px) {
    .guide-steps { padding-left: 2.6rem; }
    .guide-steps::before { left: .95rem; }
    .guide-step::before { left: -2.6rem; width: 2rem; height: 2rem; }
}
/* Ejemplos de las reglas */
.guide-ex { margin-top: .5rem; padding: .7rem .8rem; border-radius: .9rem; background: var(--app-surface-2); font-size: .85rem; }
.guide-ex > b { display: block; margin-bottom: .35rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); }
.guide-pair { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .4rem; padding: .2rem 0; }
.guide-pair__m { color: var(--app-muted); font-weight: 700; font-size: .78rem; white-space: nowrap; }
.guide-pair__p { padding: .15rem .5rem; border-radius: .5rem; background: var(--app-surface); font-weight: 700; text-align: center; }
.guide-pair__vs { color: var(--app-muted); font-size: .75rem; }
.guide-pair.is-bye .guide-pair__p:last-child { background: var(--app-gold-soft); color: var(--app-gold); }
.guide-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.guide-tbl th { padding: .2rem .35rem; color: var(--app-muted); font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.guide-tbl td { padding: .3rem .35rem; border-top: 1px solid var(--app-line); text-align: right; white-space: nowrap; }
.guide-tbl th:nth-child(-n+2), .guide-tbl td:nth-child(-n+2) { text-align: left; }
.guide-tbl .is-hl { color: var(--app-tone); font-weight: 800; }
@media (max-width: 575.98px) { .guide-tbl__why { display: none; } .guide-tbl th { font-size: .62rem; letter-spacing: 0; } }
.guide-split { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 0 0 4px; }
.guide-split span { padding: .35rem 0; border-radius: .5rem; background: var(--app-tone-soft); color: var(--app-tone); font-size: .78rem; font-weight: 800; text-align: center; white-space: nowrap; }
.guide-split span.is-b { background: var(--app-gold-soft); color: var(--app-gold); }
.guide-split span.is-cut { background: transparent; color: var(--app-muted); }
.guide-split + p { margin-top: .4rem; }
/* Preguntas plegables */
.guide-faq { display: grid; gap: 3px; }
.guide-faq details { padding: .8rem 1rem; border-radius: .6rem; background: var(--app-surface); }
.guide-faq details:first-child { border-top-left-radius: 1.1rem; border-top-right-radius: 1.1rem; }
.guide-faq details:last-child { border-bottom-left-radius: 1.1rem; border-bottom-right-radius: 1.1rem; }
.guide-faq summary { font-weight: 700; cursor: pointer; }
.guide-faq p { margin: .45rem 0 0; color: var(--app-ink-2); font-size: .9rem; }
.guide-examples { padding-left: 1.1rem; color: var(--app-ink-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   Torneo: reloj, mesas, clasificación, hoja de anotar y formularios
   -------------------------------------------------------------------------- */
.trophy { color: var(--app-warn); }
.reloj { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem 1rem; margin-top: 1rem; padding: 1rem 1.15rem; border-radius: 1.5rem; color: var(--app-ink-card-text); background: var(--app-ink-card); box-shadow: var(--app-shadow-lg); }
#hoyFocus:empty + #hoyClock .reloj { margin-top: 0; }
.reloj::before { content: ""; position: absolute; inset: -60% -10% auto auto; width: 60%; height: 200%; z-index: -1; background: radial-gradient(closest-side, var(--app-ink-card-glow), transparent); }
.reloj__time { font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 96; font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.reloj__copy small { display: block; opacity: .7; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.reloj__copy span { font-size: .9rem; opacity: .85; }
.reloj__actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.reloj__bar { grid-column: 1 / -1; height: .35rem; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.reloj__bar i { display: block; height: 100%; border-radius: inherit; background: #9cc3ea; transition: width 1s linear; }
.reloj .btn-primary { --bs-btn-bg: #9cc3ea; --bs-btn-border-color: #9cc3ea; --bs-btn-color: #0c2238; --bs-btn-hover-bg: #bfd7f0; --bs-btn-hover-border-color: #bfd7f0; --bs-btn-hover-color: #0c2238; }
.reloj .btn-light { --bs-btn-bg: rgba(255, 255, 255, .1); --bs-btn-border-color: rgba(255, 255, 255, .2); --bs-btn-color: inherit; --bs-btn-hover-bg: rgba(255, 255, 255, .18); --bs-btn-hover-color: inherit; --bs-btn-hover-border-color: rgba(255, 255, 255, .35); }
.reloj[data-tone="warn"] { --app-ink-card-glow: rgba(245, 180, 92, .38); }
.reloj[data-tone="warn"] .reloj__bar i { background: #f5b45c; }
.reloj[data-tone="danger"] .reloj__time, .reloj[data-tone="over"] .reloj__time { color: #ff8a8a; }
.reloj[data-tone="danger"] .reloj__bar i { background: #ff8a8a; }
.reloj[data-tone="over"] { --app-ink-card-glow: rgba(255, 107, 107, .4); }
@media (max-width: 575.98px) { .reloj { grid-template-columns: auto minmax(0, 1fr); } .reloj__actions { grid-column: 1 / -1; justify-content: flex-start; } }

.mesa-row { display: flex; align-items: center; gap: .75rem; min-height: 3.9rem; padding: .5rem .55rem .5rem .6rem; border-radius: .55rem; background: var(--app-glass-strong); }
.row-list > .mesa-row:first-child { border-top-left-radius: 1.2rem; border-top-right-radius: 1.2rem; }
.row-list > .mesa-row:last-child { border-bottom-left-radius: 1.2rem; border-bottom-right-radius: 1.2rem; }
.mesa-num { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .8rem; font-family: var(--app-display); font-variation-settings: "wdth" 118; font-weight: 800; font-size: 1.1rem; color: var(--app-ink); background: var(--app-surface-3); }
/* Opciones de podio (pestaña de gestión): un puesto cada vez y, por pareja, una línea por su resultado */
.odds-intro { margin: 0 0 .9rem; padding: .7rem .9rem; border-radius: 1rem; background: var(--app-tone-soft); color: var(--app-ink-2); font-size: .9rem; }
.odds-intro:empty { display: none; }
.odds-intro b { color: var(--app-ink); }
.odds-picks { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.odds-medal { margin-right: .45rem; color: var(--app-gold); }
.odds-card { padding: .7rem .8rem; border-radius: .55rem; background: var(--app-glass-strong); list-style: none; }
.row-list > .odds-card:first-child { border-top-left-radius: 1.2rem; border-top-right-radius: 1.2rem; }
.row-list > .odds-card:last-child { border-bottom-left-radius: 1.2rem; border-bottom-right-radius: 1.2rem; }
.odds-card__head { display: flex; align-items: center; gap: .75rem; }
.odds-line { margin: .45rem 0 0 3.25rem; color: var(--app-ink-2); font-size: .88rem; line-height: 1.45; }
.odds-line strong { color: var(--app-ink); font-weight: 700; }
.odds-line.is-sure { padding: .3rem .6rem; border-radius: .6rem; background: var(--app-tone-container); color: var(--app-on-tone-container); font-weight: 700; }
.odds-line.is-sure strong { color: inherit; }
.odds-items { margin: .25rem 0 0 3.25rem; padding-left: 1.1rem; color: var(--app-ink-2); font-size: .88rem; line-height: 1.45; }
.odds-items li + li { margin-top: .15rem; }
@media (max-width: 575.98px) { .odds-line, .odds-items { margin-left: 0; } }
/* Premios del torneo terminado: lo que gana cada pareja a la derecha y el podio en dorado */
.award-prize { flex: 0 0 auto; margin-left: auto; padding-left: .5rem; color: var(--app-gold); font-weight: 800; white-space: nowrap; }
.mesa-row.is-podium .mesa-num { color: var(--app-gold); background: var(--app-gold-soft); }
.mesa-row.is-done .mesa-num { color: var(--app-on-tone-container); background: var(--app-tone-container); }
.mesa-row.is-warn .mesa-num, .mesa-row.is-reported .mesa-num { color: var(--app-warn); background: var(--app-warn-soft); }
.mesa-row.is-reported .mesa-copy small { color: var(--app-warn); font-weight: 700; }
.mesa-row.is-bye { opacity: .75; }
.mesa-copy { min-width: 0; flex: 1 1 auto; display: grid; }
.mesa-copy strong { font-weight: 650; font-size: .95rem; }
.mesa-copy small { color: var(--app-muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mesa-score { font-family: var(--app-display); font-variation-settings: "wdth" 112; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--app-ink-2); }
.mesa-score b { color: var(--app-tone); font-weight: inherit; }
/* En la parte pública, las manos de la mesa van debajo de su resultado */
.kn .mesa-score { display: grid; justify-items: end; gap: .1rem; }
.kn .mesa-score small { color: var(--app-muted); font-family: var(--app-font); font-variation-settings: normal; font-size: .74rem; font-weight: 400; }
.mesa-edit { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .6rem; border: 0; border-radius: 999px; background: transparent; color: var(--app-muted); }
.mesa-edit:hover { background: var(--app-surface-3); color: var(--app-ink); }
.badge-group { display: inline-block; margin-left: .3rem; padding: 0 .4rem; border-radius: .4rem; font-size: .7rem; font-weight: 800; color: var(--app-ink-2); background: var(--app-surface-3); }
.done-sum { display: flex; align-items: center; gap: .6rem; margin: .6rem 0 0; padding: .8rem 1rem; border-radius: 1.2rem; background: var(--app-glass); color: var(--app-ink-2); font-weight: 650; font-size: .92rem; }
.done-sum i { color: var(--app-tone); }
.prov { display: inline-flex; align-items: center; gap: .35rem; margin: 0; color: var(--app-warn); font-size: .8rem; font-weight: 700; }
.group-title { margin: .4rem 0 .5rem; font-size: 1rem; color: var(--app-ink-2); }

.clasif { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: .9rem; }
.clasif th { padding: 0 .6rem .2rem; color: var(--app-muted); font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.clasif th:nth-child(2), .clasif td:nth-child(2) { text-align: left; }
.clasif td { padding: .55rem .6rem; background: var(--app-glass-strong); text-align: center; font-variant-numeric: tabular-nums; }
.clasif td:first-child { width: 2.4rem; border-radius: .7rem 0 0 .7rem; font-weight: 800; text-align: center; }
.clasif td:last-child { border-radius: 0 .7rem .7rem 0; }
.clasif td small { display: block; color: var(--app-muted); font-size: .74rem; }
.clasif tr.top td:first-child { color: var(--app-tone); }
/* Aviso naranja (no terminó en tiempo, con pocas manos): en la clasificación, una pastilla con cuántas veces le ha
   pasado a cada pareja; con 2 o más, la fila se tiñe para que salte a la vista quién pierde tiempo. */
.warn-badge { display: inline-flex; align-items: center; gap: .3em; padding: .15em .55em; border-radius: 999px; background: var(--app-warn-soft); color: var(--app-warn); font-size: .82rem; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.warn-icon { margin-right: .35em; color: var(--app-warn); }
.clasif td.warns { white-space: nowrap; }
/* En la gestión: el «⋯» de cada pareja (retirarla, que vuelva, corregir datos) y las retiradas, apagadas */
.clasif td.clasif__more { width: 2.6rem; padding: .2rem .3rem; }
.clasif td.clasif__more .row-item__more { width: 2rem; height: 2rem; }
.clasif tr.is-withdrawn td { color: var(--app-muted); }
.clasif tr.is-withdrawn td:nth-child(2) { text-decoration: line-through; }
/* A favor, en contra y manos: solo si la tabla tiene sitio (en el móvil o a media pantalla estrecha, fuera) */
.clasif-wrap { container-type: inline-size; }
@container (max-width: 520px) { .clasif .col-extra { display: none; } }
.clasif tr.is-warned td { background: var(--app-warn-soft); }
.result-note:has(.warn-icon) > .bi-info-circle { display: none; }

.seg { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1.2rem; padding: .25rem; border-radius: 999px; background: var(--app-surface-3); }
.seg button { padding: .5rem 1rem; border: 0; border-radius: 999px; background: transparent; color: var(--app-ink-2); font-weight: 700; font-size: .9rem; }
.seg button.on { background: var(--app-surface); color: var(--app-ink); box-shadow: var(--app-shadow-sm); }
/* Pestañas y botones de la pantalla en una fila (escritorio); en móvil, los botones encima, como segunda fila del título */
.tabsbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin: 0 0 1.2rem; }
.tabsbar .seg { margin: 0; }
/* Los botones del torneo, siempre a la derecha (también cuando no hay pestañas: con inscripciones solo hay una) */
@media (min-width: 992px) { .tabsbar .app-header-actions { margin-left: auto; } }
@media (max-width: 991.98px) { .tabsbar { flex-direction: column; align-items: stretch; } .tabsbar .app-header-actions { order: -1; } .tabsbar .seg { align-self: flex-start; } }
@media (max-width: 575.98px) { .tabsbar .seg { align-self: stretch; } }
@media (max-width: 575.98px) { .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } .seg button { padding: .5rem .3rem; font-size: .84rem; } }

/* Preparar partida: parejas que se tocan para intercambiarlas */
.prep-options { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
/* Imprimir y publicar, en la misma fila que «Volver a sortear» (si lo hay), a la derecha (en el móvil, debajo y a lo ancho) */
.prep-options__end { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
@media (max-width: 575.98px) { .prep-options__end { display: grid; width: 100%; margin-left: 0; } }
.prep-switch { display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem; border: 1px solid var(--app-line); border-radius: 1.1rem; background: var(--app-surface); cursor: pointer; }
.prep-switch.form-switch { padding-left: .9rem; }
.prep-switch strong { display: block; font-size: .92rem; }
.prep-switch small { display: block; color: var(--app-muted); font-size: .78rem; }
.prep-warn, .prep-note { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .86rem; font-weight: 650; }
.prep-warn { color: var(--app-warn); }
.prep-note { color: var(--app-ink-2); }
.prep-row { display: flex; align-items: stretch; gap: .6rem; min-height: 4rem; padding: .45rem .55rem; border-radius: .55rem; background: var(--app-glass-strong); }
.prep-list > .prep-row:first-child { border-top-left-radius: 1.2rem; border-top-right-radius: 1.2rem; }
.prep-list > .prep-row:last-child { border-bottom-left-radius: 1.2rem; border-bottom-right-radius: 1.2rem; }
.prep-row.is-warn .mesa-num { color: var(--app-warn); background: var(--app-warn-soft); }
.prep-row > .mesa-num, .prep-row > .prep-vs { align-self: center; }
/* Las dos parejas de una mesa, a la misma altura y con el texto arriba, aunque un nombre ocupe más líneas */
.prep-pair { min-width: 0; flex: 1 1 0; display: grid; align-content: start; padding: .45rem .7rem; border: 2px solid transparent; border-radius: .9rem; background: var(--app-surface-2); color: var(--app-ink); text-align: left; transition: border-color .15s ease, background-color .15s ease; }
.prep-pair:hover { border-color: var(--app-line-strong); }
.prep-pair strong { font-size: .92rem; font-weight: 600; line-height: 1.25; }
.prep-pair small { color: var(--app-muted); font-size: .76rem; line-height: 1.3; }
/* Desde la partida 2: el puesto de cada pareja a la derecha (por eso juega contra quien juega); en el móvil, debajo */
.prep-pair { grid-template-columns: minmax(0, 1fr) auto; column-gap: .8rem; align-items: start; }
.prep-pair__who { display: grid; min-width: 0; }
.prep-pair__rank { display: grid; justify-items: end; text-align: right; }
.prep-pair__rank b { font-family: var(--app-display); font-variation-settings: "wdth" 118, "opsz" 144; font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.prep-pair__rank small { white-space: nowrap; }
@media (max-width: 575.98px) {
  .prep-pair { grid-template-columns: minmax(0, 1fr); }
  .prep-pair__rank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35rem; justify-content: flex-start; margin-top: .2rem; text-align: left; }
  .prep-pair__rank b { font-size: .85rem; }
  .prep-pair__rank small { white-space: normal; }
}
.prep-pair.is-selected { border-color: var(--app-tone); background: var(--app-tone-soft); }
.prep-row.is-bye .prep-pair { flex: 0 1 50%; }
.prep-vs { flex: 0 0 auto; color: var(--app-muted); font-size: .78rem; font-weight: 650; }
/* Mesas adaptadas: el número se toca para cambiar de mesa la partida entera; las adaptadas llevan el icono en una esquina. */
.prep-table { position: relative; border: 0; cursor: pointer; transition: box-shadow .15s ease; }
.prep-table:hover { box-shadow: inset 0 0 0 2px var(--app-line-strong); }
.prep-table.is-selected { box-shadow: 0 0 0 2px var(--app-tone); }
.prep-table.is-adapted { color: var(--app-on-tone-container); background: var(--app-tone-container); }
.prep-table__badge { position: absolute; right: -.35rem; bottom: -.3rem; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; font-size: .62rem; color: var(--app-on-primary); background: var(--app-tone); }
/* El aviso en la misma esquina; si la mesa además es adaptada, en la de arriba. */
.prep-table__badge.is-warn { color: var(--app-on-primary); background: var(--app-warn); font-size: .58rem; }
.prep-table.is-adapted .prep-table__badge.is-warn { top: -.3rem; bottom: auto; }
/* La pareja que necesita mesa adaptada: el icono grande a la derecha, dentro de su recuadro. */
.prep-pair.has-access { grid-template-columns: minmax(0, 1fr) auto auto; }
.prep-pair__access { align-self: center; color: var(--app-tone); font-size: 1.35rem; line-height: 1; }
@media (max-width: 575.98px) {
  .prep-pair.has-access { position: relative; grid-template-columns: minmax(0, 1fr); padding-right: 1.6rem; }
  .prep-pair__access { position: absolute; top: .5rem; right: .4rem; font-size: 1.1rem; }
}
.prep-note.is-ok { color: var(--app-tone); }
.access-icon { color: var(--app-tone); }
.badge-draft { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border-radius: 999px; color: var(--app-warn); background: var(--app-warn-soft); font-size: .76rem; font-weight: 750; }
/* Parejas: buscador con «Todas | Sin pagar» y, en cada fila, dos iconos de cobro (inscripción y comida) que se tocan
   para marcar pagado o sin pagar: en color con un ✓ si está pagado, apagados si no. */
.pair-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .8rem; }
.pair-tools .search { flex: 1 1 18rem; margin: 0; }
.pay-toggles { flex: 0 0 auto; display: flex; gap: .3rem; }
.pay-toggle { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px dashed var(--app-line-strong); border-radius: .8rem; background: transparent; color: var(--app-muted); font-size: 1.05rem; }
.pay-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pay-toggle:hover { border-color: var(--app-tone); color: var(--app-tone); }
.pay-toggle.is-paid { border: 1px solid transparent; background: var(--app-tone-container); color: var(--app-on-tone-container); }
.pay-toggle.is-paid::after { content: "✓"; position: absolute; right: -.3rem; bottom: -.3rem; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--app-tone); color: var(--app-on-primary); font-size: .62rem; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--app-surface); }
.row-item.is-withdrawn .row-item__copy strong { color: var(--app-muted); text-decoration: line-through; }
.row-item.is-withdrawn .mesa-num { opacity: .5; }
@media (max-width: 575.98px) { .prep-row { flex-wrap: wrap; } .prep-row .mesa-num { width: 2.1rem; height: 2.1rem; } .prep-pair { flex-basis: calc(50% - 2.5rem); } .prep-row:not(.is-bye) .prep-vs { display: none; } }

.result-dialog .modal-body h2, .result-sheet h2 { margin: 0; font-size: 1.5rem; }
.result-dialog .sub { margin: .2rem 0 1rem; color: var(--app-muted); font-size: .88rem; }
/* Importar parejas: lo leído del archivo, cada una con su casilla (las ya apuntadas, desmarcadas) */
.import-dialog .modal-body h2 { margin: 0; font-size: 1.5rem; }
.import-dialog .sub { margin: .3rem 0 .9rem; color: var(--app-muted); font-size: .88rem; }
.import-list { display: grid; gap: .3rem; max-height: min(55vh, 34rem); margin: 0; padding: 0; overflow-y: auto; list-style: none; counter-reset: fila; }
.import-list label { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: .8rem; background: var(--app-surface-2); cursor: pointer; }
.import-list label.form-switch { padding-left: .7rem; }
.import-list label span { display: grid; min-width: 0; }
.import-list strong { overflow: hidden; font-size: .9rem; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.import-list small { color: var(--app-muted); font-size: .78rem; }
.import-list label:has(input:not(:checked)) { opacity: .55; }
.import-list label:has(input:disabled) { cursor: default; }
/* Las dos parejas comparten filas (subgrid): aunque unos nombres ocupen dos líneas, puntos y manos quedan a la par */
.duelo { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; column-gap: .7rem; }
.lado { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: .55rem; align-content: start; padding: .8rem; border: 2px solid transparent; border-radius: 1.2rem; background: var(--app-surface-2); transition: border-color .2s ease, background-color .2s ease; }
.lado.is-win { border-color: var(--app-tone); background: var(--app-tone-soft); }
.lado__who { font-weight: 750; font-size: .95rem; }
.lado__who small { display: block; color: var(--app-muted); font-weight: 400; font-size: .76rem; line-height: 1.3; }
/* «Gana» como insignia en la esquina, a la altura de «Pareja N»: no añade líneas, así los campos no se mueven */
.lado.is-win .lado__who::after { content: "Gana"; position: absolute; top: .75rem; right: .75rem; padding: .1rem .55rem; border-radius: 999px; color: var(--app-on-tone-container); background: var(--app-tone-container); font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
/* Puntos y manos: etiqueta flotante con la cifra grande (se lee de un vistazo, como en el acta) */
.form-floating.num > .form-control { height: 4.4rem; min-height: 4.4rem; padding: 1.8rem .8rem .3rem; font-family: var(--app-display); font-variation-settings: "wdth" 118; font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.form-floating.num > label { padding: 1.35rem .8rem; }
.duelo-swap { display: flex; justify-content: center; margin-top: .6rem; }
.result-note { display: flex; gap: .5rem; align-items: flex-start; margin: .9rem 0; color: var(--app-ink-2); font-size: .88rem; }
.result-note i { color: var(--app-tone); margin-top: .1rem; }
.result-note.is-warn { padding: .7rem .8rem; border-radius: 1rem; background: var(--app-warn-soft); }
.result-note.is-warn i { color: var(--app-warn); }

.app-form .form-grid-2, .app-form .form-grid-3, .app-form .form-grid-4 { display: grid; gap: .6rem; }
.app-form .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-form .form-grid-3 { grid-template-columns: 1.1fr .8fr 1.5fr; }
.app-form .form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Un jugador en la ficha de la pareja: su título y nombre, apellidos (más ancho), procedencia y licencia. */
/* Ficha de pareja: una tarjeta por jugador con su nombre tal como saldrá, el cobro en dos botones con su estado */
.modal-dialog.modal-pair { --bs-modal-width: 40rem; }
.pair-form__num { display: grid; place-items: center; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; margin-right: .75rem; border-radius: .8rem; background: var(--app-surface-3); font-family: var(--app-display); font-variation-settings: "wdth" 118; font-size: 1.2rem; font-weight: 800; }
.app-form .form-player { display: grid; gap: .5rem; padding: .75rem; border-radius: 1.1rem; background: var(--app-surface-2); }
.form-player__head { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.form-player__avatar { display: grid; place-items: center; flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--app-tone-container); color: var(--app-on-tone-container); font-size: .8rem; font-weight: 800; }
.form-player__who { min-width: 0; }
.form-player__who small { display: block; color: var(--app-muted); font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.form-player__name { display: block; overflow: hidden; font-size: .95rem; white-space: nowrap; text-overflow: ellipsis; }
.form-player__name b { font-weight: 800; }
.app-form .form-grid-player { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .5rem; }
.app-form .form-grid-player--more { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.pair-form__label { margin: 0 .2rem .4rem; color: var(--app-muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pay-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; }
.pay-chip { display: flex; align-items: center; gap: .7rem; min-width: 0; margin: 0; padding: .65rem .8rem; border: 1px solid var(--app-line-strong); border-radius: 1rem; background: var(--app-surface); cursor: pointer; transition: background .15s var(--app-ease), border-color .15s var(--app-ease); }
.pay-chip > .bi { flex: 0 0 auto; color: var(--app-muted); font-size: 1.15rem; }
.pay-chip__text { min-width: 0; }
.pay-chip__text strong { display: block; font-size: .92rem; }
.pay-chip__text small { display: block; color: var(--app-muted); font-size: .76rem; }
.pay-chip__state { flex: 0 0 auto; margin-left: auto; color: var(--app-muted); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.pay-chip__yes { display: none; }
.pay-chip:has(input:checked) { border-color: transparent; background: var(--app-tone-container); }
.pay-chip:has(input:checked) > .bi, .pay-chip:has(input:checked) .pay-chip__state { color: var(--app-tone); }
.pay-chip:has(input:checked) .pay-chip__yes { display: inline; }
.pay-chip:has(input:checked) .pay-chip__no { display: none; }
.pay-chip:has(input:focus-visible) { outline: 0; box-shadow: 0 0 0 .2rem var(--app-focus); }
.prep-switch__icon { flex: 0 0 auto; color: var(--app-tone); font-size: 1.15rem; }
.form-hint--lock { display: flex; gap: .45rem; margin: 0 .2rem; }
.form-hint--lock .bi { flex: 0 0 auto; }
/* Documentos del torneo en Ajustes: una fila por documento, con su botón para quitarlo */
.doc-list { display: grid; gap: 3px; margin: 0 0 .7rem; padding: 0; list-style: none; }
.doc-row { display: flex; align-items: center; gap: .7rem; padding: .5rem .5rem .5rem .6rem; border-radius: .7rem; background: var(--app-surface-2); }
.doc-row__icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: var(--app-tone-container); color: var(--app-on-tone-container); font-size: 1.05rem; }
.doc-row__icon.is-pdf { background: var(--app-danger-soft); color: var(--app-danger); }
.doc-row__copy { display: grid; flex: 1 1 auto; min-width: 0; }
.doc-row__copy strong { overflow: hidden; font-weight: 650; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.doc-row__copy small { color: var(--app-muted); font-size: .76rem; }
.doc-row__remove { display: grid; place-items: center; flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: transparent; color: var(--app-muted); }
.doc-row__remove:hover { background: var(--app-danger-soft); color: var(--app-danger); }
@media (max-width: 575.98px) { .app-form .form-grid-3, .app-form .form-grid-4 { grid-template-columns: 1fr 1fr; } .app-form .form-grid-3 > :last-child { grid-column: 1 / -1; } }
/* Ajustes del torneo: pestañas por tema (en el móvil, en rejilla de 3) y un alto mínimo para que no salte al cambiar */
.ajustes__tabs { padding: 0 var(--bs-modal-padding, 1rem); }
.ajustes__tabs .seg { margin: 0; }
/* Siempre del mismo tamaño, cambie la pestaña que cambie: alto fijo (el de la pantalla, con tope) y lo que no cabe se
   desplaza dentro; la cabecera, las pestañas y los botones quedan quietos */
.modal-content:has(> .ajustes) { height: min(90dvh, 46rem); }
.ajustes { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ajustes .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 575.98px) { .ajustes__tabs .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 1.1rem; } .ajustes__tabs .seg button { padding: .5rem .3rem; font-size: .84rem; } }
/* Premios: arriba la recaudación (esperada, con las parejas estimadas, o la real), una barra con lo que se reparte y
   una fila por bloque: puestos, trofeo (dorado), cuantía en € o % y lo que se lleva cada pareja */
.pot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 1.1rem; background: var(--app-tone-soft); }
.pot__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: var(--app-surface); color: var(--app-tone); font-size: 1.25rem; }
.pot__copy small { display: block; color: var(--app-muted); font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pot__copy b { display: block; font-family: var(--app-display); font-variation-settings: "wdth" 118; font-size: 1.55rem; font-weight: 800; line-height: 1.15; }
.pot__copy p { margin: 0; color: var(--app-ink-2); font-size: .82rem; }
.pot__pairs { display: grid; justify-items: end; gap: .2rem; margin: 0; }
.pot__pairs span { color: var(--app-muted); font-size: .72rem; font-weight: 600; }
.pot__pairs .form-control { width: 5.5rem; text-align: center; font-family: var(--app-display); font-variation-settings: "wdth" 118; font-weight: 800; }
@media (max-width: 575.98px) { .pot { grid-template-columns: auto minmax(0, 1fr); } .pot__pairs { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; } }
.prize-split { display: flex; align-items: center; gap: .7rem; color: var(--app-ink-2); font-size: .84rem; }
.prize-split[hidden] { display: none; }
.prize-split b { font-weight: 800; }
.prize-split > span:first-child, .prize-split > span:last-child { white-space: nowrap; }
.prize-split__bar { flex: 1; min-width: 3rem; height: .5rem; overflow: hidden; border-radius: 99px; background: var(--app-surface-3); }
.prize-split__bar i { display: block; height: 100%; border-radius: 99px; background: var(--app-tone); }
.prize-split__bar.is-over i { background: var(--app-danger); }
.prize-list { display: grid; gap: .5rem; }
.prize-row { display: grid; grid-template-columns: auto auto auto auto auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .6rem .75rem .6rem .45rem; border: 1px solid var(--app-line-strong); border-radius: 1rem; }
.prize-row:not(:has(.prize-row__group)) { grid-template-columns: auto auto auto auto minmax(0, 1fr) auto; }
/* Subir y bajar: el orden de los premios es el de las tablas en la entrega de premios */
.prize-row__move { display: grid; }
.prize-row__move button { display: grid; place-items: center; width: 1.6rem; height: 1.25rem; padding: 0; border: 0; border-radius: .4rem; background: transparent; color: var(--app-muted); font-size: .85rem; }
.prize-row__move button:hover:not(:disabled) { background: var(--app-surface-2); color: var(--app-ink); }
.prize-row__move button:disabled { opacity: .3; }
.prize-row__what { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.prize-row__places { display: flex; align-items: center; gap: .4rem; margin: 0; }
.prize-row__places span { color: var(--app-muted); font-size: .84rem; font-weight: 700; white-space: nowrap; }
.prize-row__places .form-control { width: 9.5rem; font-family: var(--app-display); font-variation-settings: "wdth" 118; font-weight: 800; }
.prize-row__places .form-control[type="number"] { width: 4.5rem; }
.prize-row__group { width: auto; }
.prize-trophy { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border: 1px solid var(--app-line-strong); border-radius: .75rem; background: var(--app-surface); color: var(--app-muted); font-size: .86rem; font-weight: 700; white-space: nowrap; }
.prize-trophy.is-on { border-color: transparent; background: var(--app-gold-soft); color: var(--app-gold); }
.prize-row__amount { display: inline-flex; align-items: center; gap: .4rem; }
.prize-row__amount .form-control { width: 5rem; text-align: right; }
.unit { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--app-surface-3); }
.unit button { padding: .2rem .6rem; border: 0; border-radius: 99px; background: transparent; color: var(--app-ink-2); font-size: .8rem; font-weight: 800; }
.unit button.on { background: var(--app-surface); color: var(--app-ink); box-shadow: var(--app-shadow-sm); }
.prize-row__get { min-width: 0; text-align: right; }
.prize-row__get small { display: block; color: var(--app-muted); font-size: .76rem; }
.prize-row__get b { display: block; font-size: .98rem; font-weight: 800; }
.prize-row__remove { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--app-muted); }
.prize-row__remove:hover { background: var(--app-surface-2); color: var(--app-ink); }
@media (max-width: 767.98px) {
    .prize-row, .prize-row:not(:has(.prize-row__group)) { grid-template-columns: auto minmax(0, 1fr) auto auto; row-gap: .5rem; }
    .prize-row__move { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
    .prize-row__what { grid-column: 2 / 4; grid-row: 1; }
    .prize-row__remove { grid-column: 4; grid-row: 1; align-self: start; }
    .prize-trophy { grid-column: 2; justify-self: start; }
    .prize-row__amount { grid-column: 3 / 5; }
    .prize-row__group, .prize-row__get { grid-column: 2 / -1; }
    .prize-row__get { display: flex; justify-content: space-between; align-items: baseline; padding-top: .45rem; border-top: 1px dashed var(--app-line-strong); text-align: left; }
}
/* Horario: una fila por partida (su hora, editable, y hasta cuándo) y las pausas en naranja suave */
.sched { display: grid; gap: 3px; }
.sched-row { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) 7rem 7rem 2rem; align-items: center; gap: .6rem; padding: .4rem .5rem; border-radius: .7rem; background: var(--app-surface-2); }
.sched-row__n { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: var(--app-tone-container); color: var(--app-on-tone-container); font-weight: 800; }
.sched-row__copy { display: grid; min-width: 0; }
.sched-row__copy b { font-weight: 650; font-size: .92rem; }
.sched-row__copy small { color: var(--app-muted); font-size: .75rem; }
.sched-row__copy .form-select { width: auto; max-width: 100%; margin-top: .15rem; padding-top: .15rem; padding-bottom: .15rem; font-size: .78rem; }
.sched-row__end { color: var(--app-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.sched-time { font-variant-numeric: tabular-nums; }
.sched-row.is-break { background: var(--app-warn-soft); }
.sched-row.is-break .sched-row__n { background: var(--app-warn-soft); color: var(--app-warn); }
.sched-row__remove { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--app-muted); }
.sched-row__remove:hover { background: var(--app-danger-soft); color: var(--app-danger); }
.sched-add { display: flex; flex-wrap: wrap; gap: .5rem; }
.sched-add .btn { display: inline-flex; align-items: center; gap: .35rem; }
.sched-end { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: center; gap: .8rem; }
.sched-end .form-hint { margin: 0; }
@media (max-width: 575.98px) {
    .sched-row { grid-template-columns: 2.2rem minmax(0, 1fr) 5.6rem; }
    .sched-row__end { display: none; }
    .sched-row.is-break { grid-template-columns: 2.2rem minmax(0, 1fr) 5.6rem 2rem; }
    .sched-row.is-break .sched-time[data-break-to] { grid-column: 3; }
    .sched-end { grid-template-columns: 1fr; }
}
/* Documentos: una zona grande donde soltar los archivos (o tocar para elegirlos); se ilumina al arrastrar encima */
.drop { display: grid; justify-items: center; gap: .35rem; margin: 0; padding: 2rem 1rem; border: 2px dashed var(--app-line-strong); border-radius: 1.2rem; background: var(--app-surface-2); color: var(--app-ink-2); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop > i { color: var(--app-tone); font-size: 2rem; }
.drop b { color: var(--app-ink); font-size: 1rem; }
.drop small { color: var(--app-muted); font-size: .8rem; overflow-wrap: anywhere; }
.drop:hover, .drop:focus-within, .drop.is-over { border-color: var(--app-tone); background: var(--app-tone-container); }
.drop.is-busy { cursor: progress; opacity: .8; }
.form-hint { margin: -.3rem 0 0; color: var(--app-muted); font-size: .8rem; }
.form-hint b { color: var(--app-ink-2); font-weight: 700; }
/* Un campo (o una fila de campos) con su explicación debajo: siempre a la misma distancia. */
.form-item { display: grid; gap: .4rem; }
.form-item > .form-hint { margin: 0 .2rem; }
.form-block { margin: 0; padding: .9rem 1rem; border: 1px solid var(--app-line); border-radius: 1.1rem; background: var(--app-surface-2); }
.form-block legend, .form-block summary { width: auto; margin: 0 0 .5rem; padding: 0; font-size: .95rem; font-weight: 750; cursor: pointer; }
/* El título del bloque, dentro del recuadro (no montado en el borde). */
.form-block legend { float: left; width: 100%; margin-bottom: .7rem; }
.form-block legend + * { clear: left; }
details.form-block:not([open]) summary { margin: 0; }
.choice { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .2rem; cursor: pointer; }
.choice input { margin-top: .3rem; accent-color: var(--app-tone); }
.choice strong { display: block; font-weight: 700; font-size: .92rem; }
.choice small { display: block; color: var(--app-muted); font-size: .8rem; }

/* Listas de torneos (gestión y parte pública) */
.t-row { display: flex; align-items: center; gap: .8rem; min-height: 4.2rem; padding: .55rem .7rem; border-radius: .55rem; background: var(--app-glass-strong); color: var(--app-ink); text-decoration: none; }
.t-row:hover { color: var(--app-ink); background: var(--app-surface); }
.row-list > li:first-child > .t-row { border-top-left-radius: 1.2rem; border-top-right-radius: 1.2rem; }
.row-list > li:last-child > .t-row { border-bottom-left-radius: 1.2rem; border-bottom-right-radius: 1.2rem; }
.date { width: 3rem; flex: 0 0 auto; display: grid; justify-items: center; padding: .3rem 0; border-radius: .85rem; line-height: 1.05; color: var(--app-on-tone-container); background: var(--app-tone-container); }
.date small { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.date b { font-family: var(--app-display); font-variation-settings: "wdth" 118; font-size: 1.3rem; font-weight: 800; }
.date.is-past { color: var(--app-ink-2); background: var(--app-surface-3); }
.date.is-live { color: #fff; background: var(--app-danger); }
/* El torneo en juego en la lista de Torneos: tarjeta de tinta con la partida, una casilla por mesa y el reloj */
.t-live { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: var(--app-radius); background: radial-gradient(120% 140% at 100% 0, var(--app-ink-card-glow), transparent 55%), var(--app-ink-card); color: var(--app-ink-card-text); text-decoration: none; box-shadow: var(--app-shadow); }
.t-live:hover { color: var(--app-ink-card-text); }
.t-live__copy { display: grid; gap: .15rem; min-width: 0; }
.t-live__copy small { color: #abcaec; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.t-live__copy strong { font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 96; font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.t-live__copy > span { color: #c7c7cc; font-size: .88rem; }
.t-live__cells { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .45rem; }
.t-live__cells i { width: .55rem; height: .9rem; border-radius: .18rem; background: rgba(255, 255, 255, .18); }
.t-live__cells i.is-done { background: #8bb6e3; }
.t-live__side { display: grid; justify-items: end; gap: .45rem; }
.t-live__clock { font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #8bb6e3; font-variant-numeric: tabular-nums; }
.t-live__clock.is-off { color: #8e8e93; font-size: 1.1rem; letter-spacing: 0; }
.t-live__go { display: inline-flex; align-items: center; gap: .2rem; padding: .4rem .8rem; border-radius: 999px; background: #8bb6e3; color: #0c2238; font-size: .85rem; font-weight: 800; }
.t-list li + li .t-live { margin-top: .4rem; }
.t-copy { min-width: 0; flex: 1 1 auto; display: grid; }
.t-copy strong { font-weight: 700; }
.t-copy small { color: var(--app-muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev { color: var(--app-muted); }
/* Si el torneo sale en la parte pública o está oculto: icono y palabra (en el móvil, solo el icono) */
.t-vis { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; background: var(--app-tone-soft); color: var(--app-tone); font-size: .78rem; font-weight: 700; }
.t-vis.is-hidden { background: var(--app-surface-3); color: var(--app-muted); }
.t-live .t-vis { background: rgba(255, 255, 255, .12); color: #cfe0f2; }
.t-live .t-vis.is-hidden { color: rgba(255, 255, 255, .7); }
@media (max-width: 575.98px) { .t-vis { padding: .3rem; } .t-vis__label { display: none; } }
.badge-hl { padding: .05rem .45rem; border-radius: .4rem; background: var(--app-tone-soft); color: var(--app-tone); font-weight: 800; }

/* --------------------------------------------------------------------------
   Parte pública (sin cuenta): portada, torneo, buscador y QR de la mesa
   -------------------------------------------------------------------------- */
.live__time { font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 96; font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: #9cc3ea; }
.live__time[data-tone="warn"] { color: #f5b45c; }
.live__time[data-tone="danger"], .live__time[data-tone="over"] { color: #ff8a8a; }
.search { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 0; padding: .3rem .4rem .3rem 1rem; border: 1px solid var(--app-line-strong); border-radius: 999px; background: var(--app-surface); color: var(--app-muted); box-shadow: var(--app-shadow-sm); }
.search:focus-within { border-color: var(--app-tone); box-shadow: 0 0 0 4px var(--app-focus); }
.tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1.2rem 0 1rem; }
.tabs a { padding: .45rem .9rem; border-radius: 999px; color: var(--app-ink-2); font-weight: 700; font-size: .88rem; text-decoration: none; }
.tabs a:hover { background: var(--app-surface-3); color: var(--app-ink); }
.tabs a.on { color: var(--app-on-primary); background: var(--app-primary); }
.podio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: .45rem; max-width: 36rem; margin: 1rem 0 .4rem; }
.podio > div { display: grid; justify-items: center; gap: .2rem; padding: .7rem .4rem; border: 1px solid var(--app-line); border-radius: 1.1rem 1.1rem .5rem .5rem; background: var(--app-surface); text-align: center; }
.podio b { font-family: var(--app-display); font-variation-settings: "wdth" 125; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.podio strong { font-size: .85rem; }
.podio small { color: var(--app-muted); font-size: .72rem; line-height: 1.25; }
.podio .p1 { min-height: 8.2rem; border-color: transparent; background: var(--app-tone-container); }
.podio .p1 b, .podio .p1 strong, .podio .p1 small { color: var(--app-on-tone-container); }
.podio .p2 { min-height: 6.8rem; }
.podio .p3 { min-height: 6rem; }
.stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .8rem; }
.stat3 > div { padding: .7rem; border: 1px solid var(--app-line); border-radius: 1rem; background: var(--app-surface); }
.stat3 b { display: block; font-family: var(--app-display); font-variation-settings: "wdth" 118; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.stat3 small { color: var(--app-muted); font-size: .76rem; }


/* Página de un torneo antes de empezar, estilo «Keynote»: siempre oscura y a sangre, por secciones que aparecen al
   bajar. Portada con cuenta atrás y efecto dominó (una ficha por pareja), cifras grandes, mapa de la provincia en
   trama de puntos con líneas hasta la sede, el día en una línea, precios y las parejas (fichas boca abajo hasta que
   se cierra la lista; después, sus nombres). Colores fijos de esta página (como la pantalla de sala). */
.kn-page { --kn-me: #141c26; --kn-gold: #f2c96b; --kn-silver: #cfd3d8; --kn-bronze: #d99a6c; --kn-bg: #000; --kn-card: #1c1c1e; --kn-ink: #f5f5f7; --kn-muted: #a1a1a6; --kn-dim: #8e8e93; --kn-mint: #9cc3ea; --kn-sky: #5ec4ff; --kn-teal: #2b5d8f; background: var(--kn-bg); color: var(--kn-ink); }
.kn-html { background: #000; }
/* La barra de arriba no se queda fija: casi nadie entra con cuenta y así el móvil deja todo el alto al torneo. */
.kn-bar { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: calc(.75rem + env(safe-area-inset-top, 0px)) clamp(1.1rem, 4vw, 3rem) .75rem; background: #000; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.kn-bar .app-brand { color: var(--kn-ink); }
.kn-bar .brand-logo { display: block; width: auto; max-width: 5.5rem; height: 2.4rem; object-fit: contain; }
.kn-bar .brand-word { font-size: 1rem; line-height: 1.1; color: var(--kn-ink); }
.kn-bar .brand-word small { display: block; color: var(--kn-dim); font-family: var(--app-font); font-size: .72rem; font-weight: 600; letter-spacing: 0; }
.kn-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); color: var(--kn-ink); background: rgba(255, 255, 255, .06); font-weight: 700; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.kn-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.kn-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: center; justify-items: center; min-height: min(100svh, 900px); padding: 3.5rem 1.1rem 2.5rem; text-align: center; }
.kn-hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 90%; z-index: -1; background: radial-gradient(50% 50% at 50% 40%, rgba(43, 93, 143, .55), transparent 70%); filter: blur(10px); animation: kn-glow 9s ease-in-out infinite alternate; }
@keyframes kn-glow { to { transform: translateY(6%) scale(1.08); opacity: .8; } }
.kn-back { position: absolute; top: 1.1rem; left: clamp(1.1rem, 4vw, 3rem); color: var(--kn-dim); font-weight: 700; font-size: .88rem; text-decoration: none; }
.kn-back:hover { color: #fff; }
.kn-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid rgba(156, 195, 234, .35); background: rgba(156, 195, 234, .08); color: var(--kn-mint); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.kn-pill::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--kn-mint); box-shadow: 0 0 0 4px rgba(156, 195, 234, .2); animation: kn-beat 1.8s ease-in-out infinite; }
@keyframes kn-beat { 50% { box-shadow: 0 0 0 8px rgba(156, 195, 234, 0); } }
.kn-hero h1 { max-width: 13ch; margin: 1.4rem 0 .7rem; color: #fff; font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-weight: 800; font-size: clamp(3rem, 9vw, 7.6rem); line-height: .9; letter-spacing: -.06em; }
.kn-hero h1 span { display: inline-block; text-shadow: 0 0 40px rgba(156, 195, 234, .35); opacity: 0; transform: translateY(.35em); animation: kn-word .9s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes kn-word { to { opacity: 1; transform: none; } }
.kn-when { color: var(--kn-muted); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 600; }
.kn-when b { color: var(--kn-ink); font-weight: 700; }
.kn-today { margin: 1.8rem 0 0; color: var(--kn-mint); font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.04em; }
.kn-prep { max-width: 34rem; margin: 1.6rem 0 0; color: var(--kn-muted); font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.45; }
.kn-prep b { color: #fff; }
.kn-cd { display: flex; justify-content: center; gap: clamp(.9rem, 4vw, 2.8rem); margin: 2.1rem 0 .4rem; }
.kn-cd div { display: grid; justify-items: center; min-width: 2.2ch; }
.kn-cd b { display: block; overflow: hidden; height: 1em; color: #fff; font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-weight: 800; font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kn-cd b span { display: block; }
.kn-cd b span.is-tick { animation: kn-tick .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes kn-tick { from { transform: translateY(-60%); opacity: 0; } }
.kn-cd small { margin-top: .5rem; color: var(--kn-dim); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.kn-cd div:last-child b { color: var(--kn-mint); }
/* Efecto dominó: una ficha por pareja; caen en cadena (con la partida preparándose, una y otra vez) */
.kn-chain { position: relative; display: grid; grid-template-columns: repeat(var(--n, 24), 1fr); align-items: end; width: min(100%, calc(var(--n, 24) * 2.6rem)); margin: 2.8rem auto 0; padding-right: 3%; }
.kn-chain::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); }
.kn-dom { display: grid; grid-template-rows: 1fr 1fr; width: 52%; aspect-ratio: 1 / 2.5; overflow: hidden; border-radius: 4px; background: linear-gradient(160deg, #fffdf6, #ece6d6); box-shadow: inset 0 1px 0 #fff, inset -2px 0 0 #bdb5a2, 0 8px 18px rgba(0, 0, 0, .5); transform-origin: 100% 100%; animation: kn-topple .42s cubic-bezier(.55, 0, 1, .45) forwards; animation-delay: calc(1.3s + var(--i) * 85ms); }
.kn-dom b { display: grid; place-items: center; border-bottom: 1.5px solid rgba(26, 26, 26, .55); color: #1a1a1a; font: 800 clamp(.42rem, .9vw, .8rem) var(--app-display); }
.kn-dom i { background: radial-gradient(circle, #1a1a1a 1.4px, transparent 1.9px) 0 0 / 50% 50%; }
.kn-dom:last-child { animation-name: kn-topple-last; }
@keyframes kn-topple { to { transform: rotate(64deg); } }
@keyframes kn-topple-last { to { transform: rotate(90deg); } }
.kn-chain.is-loop .kn-dom { animation: kn-topple-loop 4.5s cubic-bezier(.55, 0, 1, .45) infinite; animation-delay: calc(var(--i) * 85ms); }
@keyframes kn-topple-loop { 0%, 8% { transform: none; } 18%, 80% { transform: rotate(64deg); } 92%, 100% { transform: none; } }
@media (max-width: 640px) { .kn-chain.is-wide { grid-template-columns: repeat(var(--half, 12), 1fr); row-gap: 1.6rem; width: 100%; } .kn-chain.is-wide .kn-dom { width: 48%; } }
.kn-replay { margin-top: 1.6rem; border: 0; background: none; color: var(--kn-dim); font-weight: 700; font-size: .82rem; }
.kn-replay:hover { color: #fff; }
/* Secciones */
.kn-sec { padding: clamp(5rem, 12vw, 9.5rem) clamp(1.1rem, 5vw, 3.75rem); }
.kn-sec > header { max-width: 980px; margin: 0 auto 2.9rem; text-align: center; }
.kn-sec h2 { margin: 0 0 .9rem; color: #fff; font-family: var(--app-display); font-variation-settings: "wdth" 120, "opsz" 144; font-weight: 800; font-size: clamp(2.3rem, 6vw, 4.6rem); line-height: .98; letter-spacing: -.05em; }
.kn-sec h2 em { font-style: normal; background: linear-gradient(90deg, var(--kn-mint), var(--kn-sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kn-sec header p { max-width: 40rem; margin: 0 auto; color: var(--kn-muted); font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.45; }
.kn-rv { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.kn-rv.is-in { opacity: 1; transform: none; }
.kn-big { display: grid; gap: clamp(.4rem, 1.5vw, 1.1rem); max-width: 1100px; margin: 0 auto; }
.kn-big p { margin: 0; color: #3a3a3c; font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-weight: 800; font-size: clamp(3rem, 11vw, 9.5rem); line-height: .95; letter-spacing: -.06em; }
.kn-big b { color: #fff; font-weight: inherit; }
.kn-big b.is-mint { color: var(--kn-mint); }
@media (min-width: 641px) { .kn-big p:nth-child(2) { text-align: center; } .kn-big p:nth-child(3) { text-align: right; } }
/* Mapa: contorno real de la provincia (OpenStreetMap) en trama de puntos, localidades y líneas hasta la sede */
.kn-mapwrap { display: grid; gap: 1.8rem; max-width: 1180px; margin: 0 auto; align-items: center; }
@media (min-width: 900px) { .kn-mapwrap { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.kn-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.kn-map .dots { fill: none; stroke: #4a4a4e; stroke-width: 6.5; stroke-linecap: round; }
.kn-map .town { fill: var(--kn-mint); }
.kn-map .arc { fill: none; stroke: url(#knArc); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1); }
.kn-map.is-in .arc { stroke-dashoffset: 0; }
.kn-map .halo { fill: none; stroke: var(--kn-mint); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: kn-halo 2.6s ease-out infinite; }
@keyframes kn-halo { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.kn-map text { fill: var(--kn-ink); stroke: #000; font: 700 22px var(--app-font); paint-order: stroke; stroke-width: 6px; stroke-linejoin: round; }
.kn-map text tspan { fill: var(--kn-dim); }
@media (max-width: 640px) { .kn-map text { font-size: 34px; } .kn-map .dots { stroke-width: 8; } }
.kn-rank { display: grid; gap: .9rem; }
.kn-rank div { display: grid; grid-template-columns: minmax(0, 8.5rem) 1fr auto; align-items: center; gap: .9rem; font-weight: 700; }
.kn-rank small { display: block; color: var(--kn-dim); font-size: .75rem; font-weight: 600; }
.kn-rank i { display: block; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--kn-teal), var(--kn-mint)); transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.is-in .kn-rank i { transform: scaleX(1); }
.kn-rank b { font-family: var(--app-display); font-variation-settings: "wdth" 118; font-size: 1.3rem; font-weight: 800; }
.kn-far { margin-top: .7rem; padding: 1.1rem 1.25rem; border-radius: 1.4rem; background: linear-gradient(135deg, rgba(156, 195, 234, .14), rgba(94, 196, 255, .08)); border: 1px solid rgba(156, 195, 234, .2); color: #d1d1d6; line-height: 1.4; }
.kn-far b { color: #fff; }
/* El día: las partidas en una línea, de la primera a la clasificación */
.kn-day { max-width: 1100px; margin: 0 auto; }
/* Aviso a quien gestiona de que el torneo está oculto al público */
.pub-hidden { margin: 0; padding: .6rem 1rem; border-bottom: 1px solid rgba(242, 201, 107, .35); background: rgba(242, 201, 107, .1); color: var(--kn-gold); font-size: .88rem; font-weight: 700; text-align: center; }
.kn-track { position: relative; height: 150px; margin-top: .6rem; }
.kn-track::before { content: ""; position: absolute; left: 0; right: 0; top: 64px; height: 2px; background: #2c2c2e; }
.kn-game { position: absolute; top: 34px; height: 62px; display: grid; place-items: center; border-radius: 1rem; background: linear-gradient(180deg, #1d3350, #13283f); border: 1px solid rgba(156, 195, 234, .28); color: var(--kn-mint); font: 800 clamp(.9rem, 1.6vw, 1.25rem) var(--app-display); transform: scaleY(0); transform-origin: bottom; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.is-in .kn-game { transform: none; }
/* Una pausa del horario (comida…): un hueco marcado en dorado, del ancho que dura */
.kn-break { position: absolute; top: 34px; height: 62px; display: grid; place-items: center; overflow: hidden; border: 1px dashed rgba(242, 201, 107, .55); border-radius: 1rem; background: linear-gradient(rgba(242, 201, 107, .08), rgba(242, 201, 107, .08)), var(--kn-bg); color: var(--kn-gold); font-size: clamp(.7rem, 1.2vw, .9rem); font-weight: 800; white-space: nowrap; }
.kn-break i { margin-right: .35rem; }
.kn-break.is-short i { margin: 0; font-size: 1.1rem; }
/* La hora de inicio de cada bloque (partida o pausa): una línea que baja desde su borde izquierdo y la hora justo a la
   derecha, para leer exactamente cuándo empieza cada cosa */
.kn-time { position: absolute; top: 96px; padding: 16px 0 0 6px; border-left: 1.5px solid rgba(255, 255, 255, .28); color: var(--kn-dim); font-size: .8rem; font-weight: 700; line-height: 1; white-space: nowrap; }
/* En el móvil, el día en vertical: la hora y su punto arriba de cada fila (cuando empieza) y «hasta las…» a la derecha */
.kn-agenda { display: none; position: relative; gap: .4rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.kn-agenda::before { content: ""; position: absolute; left: 61px; top: 14px; bottom: 14px; width: 2px; background: #2c2c2e; }
.kn-agenda li { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 24px; align-items: start; }
.kn-agenda li::after { content: ""; position: absolute; left: 57px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--kn-bg); border: 2px solid var(--kn-mint); }
.kn-agenda time { padding-top: 4px; text-align: right; color: var(--kn-ink); font: 800 .98rem/1.2 var(--app-display); font-variation-settings: "wdth" 110; }
.kn-agenda div { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .9rem; border-radius: .9rem; background: linear-gradient(180deg, #1d3350, #13283f); border: 1px solid rgba(156, 195, 234, .28); }
.kn-agenda b { color: var(--kn-mint); font: 800 1.05rem var(--app-display); }
.kn-agenda span { margin-left: auto; color: var(--kn-dim); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.kn-agenda .is-break::after { border-color: var(--kn-gold); }
.kn-agenda .is-break div { min-height: 52px; background: rgba(242, 201, 107, .08); border: 1px dashed rgba(242, 201, 107, .55); }
.kn-agenda .is-break b { color: var(--kn-gold); font-family: var(--app-font); font-size: .98rem; }
.kn-agenda .is-end::after { background: #fff; border-color: #fff; }
.kn-agenda .is-end div { min-height: 0; padding: 4px 0 0 2px; background: none; border: 0; }
.kn-agenda .is-end b { color: #fff; font-family: var(--app-font); font-size: .98rem; }
@media (max-width: 640px) { .kn-track { display: none; } .kn-agenda { display: grid; } }
.kn-flag { position: absolute; top: 0; right: 0; display: grid; justify-items: end; color: #fff; font-weight: 800; font-size: .85rem; white-space: nowrap; }
.kn-flag::after { content: ""; width: 2px; height: 110px; margin-top: .4rem; background: linear-gradient(#fff, transparent); }
.kn-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; max-width: 1100px; margin: 4rem auto 0; }
.kn-day + .kn-prices { margin-top: 4rem; }
.kn-sec > header + .kn-prices { margin-top: 0; }
.kn-price { padding: 1.9rem; border-radius: 1.9rem; background: var(--kn-card); }
.kn-price b { display: block; color: #fff; font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-weight: 800; font-size: clamp(3.4rem, 7vw, 5rem); line-height: 1; letter-spacing: -.04em; }
.kn-price span { color: var(--kn-muted); font-size: 1.05rem; font-weight: 600; }
/* Con la lista abierta: un adelanto de cómo se verá el torneo (pestañas y clasificación de mentira, con barras
   difuminadas en vez de datos) bajo un candado que lo tapa todo. Solo dibujo: nada que tocar ni que revelar. */
.kn-fake { position: relative; max-width: 760px; margin: 0 auto; user-select: none; pointer-events: none; }
.kn-fake__tabs { justify-content: center; margin: 0 0 1rem; }
.kn-fake__tabs span { padding: .45rem .9rem; border-radius: 999px; color: var(--kn-dim); font-weight: 700; font-size: .88rem; }
.kn-fake__tabs span.on { background: var(--kn-mint); color: #0c2238; }
.kn-fake__table { display: grid; gap: 3px; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 98%); mask-image: linear-gradient(to bottom, #000 40%, transparent 98%); }
.kn-fake__row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) repeat(3, 3.4rem); align-items: center; gap: .9rem; min-height: 3.4rem; padding: 0 .9rem 0 0; border-radius: .7rem; background: var(--kn-card); }
.kn-fake__row .pos { align-self: stretch; display: grid; place-items: center; border-radius: .7rem 0 0 .7rem; color: var(--kn-ink); font-weight: 800; }
.kn-fake__row.g1 .pos { background: var(--kn-gold); color: #3a2a00; }
.kn-fake__row.g2 .pos { background: var(--kn-silver); color: #222; }
.kn-fake__row.g3 .pos { background: var(--kn-bronze); color: #3a1c00; }
.kn-fake__row .nm { display: grid; gap: .4rem; }
.kn-fake__bar { display: block; height: .55rem; border-radius: 99px; background: rgba(245, 245, 247, .5); filter: blur(3px); }
.kn-fake__row .nm .kn-fake__bar:first-child { height: .7rem; background: rgba(245, 245, 247, .62); }
.kn-fake__row .nm .kn-fake__bar + .kn-fake__bar { height: .45rem; background: rgba(245, 245, 247, .26); }
.kn-fake__row .num .kn-fake__bar { margin: 0 auto; }
.kn-fake__lock { position: absolute; inset: -1rem; z-index: 2; display: grid; place-content: center; justify-items: center; gap: .35rem; padding: 1rem; text-align: center; pointer-events: auto; background: radial-gradient(closest-side, rgba(0, 0, 0, .78), rgba(0, 0, 0, .15)); }
.kn-fake__lock > span { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin-bottom: .4rem; border: 1px solid rgba(156, 195, 234, .4); border-radius: 50%; background: var(--kn-card); color: var(--kn-mint); font-size: 1.5rem; box-shadow: 0 0 2.5rem rgba(156, 195, 234, .25); }
.kn-fake__lock b { color: #fff; font-family: var(--app-display); font-variation-settings: "wdth" 120, "opsz" 48; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.kn-fake__lock small { color: var(--kn-muted); font-size: .95rem; }
@media (max-width: 575.98px) { .kn-fake__row { grid-template-columns: 2.4rem minmax(0, 1fr) 2.8rem; gap: .7rem; } .kn-fake__row .num ~ .num { display: none; } }
/* Documentos del torneo en el cartel: una tarjeta por documento que se descarga al tocarla */
.kn-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: .7rem; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.kn-doc { display: flex; align-items: center; gap: .9rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1.2rem; background: var(--kn-card); color: var(--kn-ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.kn-doc:hover, .kn-doc:focus-visible { border-color: var(--kn-mint); color: var(--kn-ink); transform: translateY(-2px); }
.kn-doc__icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.8rem; height: 2.8rem; border-radius: .8rem; background: rgba(156, 195, 234, .14); color: var(--kn-mint); font-size: 1.35rem; }
.kn-doc__icon.is-pdf { background: rgba(255, 138, 138, .14); color: #ff8a8a; }
.kn-doc__copy { display: grid; flex: 1 1 auto; min-width: 0; }
.kn-doc__copy strong { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.kn-doc__copy small { color: var(--kn-dim); font-size: .8rem; font-weight: 600; }
.kn-doc__get { flex: 0 0 auto; color: var(--kn-mint); font-size: 1.2rem; }
.kn-names { max-width: 760px; margin: 0 auto; }
.kn-names .name-row { background: var(--kn-card); color: var(--kn-ink); }
.kn-names .name-row:hover { background: #2c2c2e; }
.kn-names .name-row small { color: var(--kn-dim); }
.kn-names .name-row.is-me { box-shadow: inset 0 0 0 2px var(--kn-mint); }
.kn-names .empty { color: var(--kn-muted); text-align: center; }
/* Portada: el torneo en juego (reloj y botones) y «Más torneos» (buscador y listas) en oscuro */
.kn-clock .live__time { display: block; margin: 1.6rem 0 0; font-size: clamp(3.4rem, 9vw, 6.6rem); }
.kn-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2rem; }
.kn-actions .kn-btn { padding: .7rem 1.4rem; font-size: 1rem; }
.kn-btn.is-primary { border-color: transparent; background: var(--kn-mint); color: #0c2238; }
.kn-btn.is-primary:hover { background: #b5d1ee; color: #0c2238; }
.kn-list { max-width: 760px; margin: 0 auto; }
.kn-list h3 { margin: 2.2rem 0 .8rem; color: #fff; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.kn .search { margin: 0 0 1rem; border-color: rgba(255, 255, 255, .16); background: var(--kn-card); color: var(--kn-dim); box-shadow: none; }
.kn .search:focus-within { border-color: var(--kn-mint); box-shadow: 0 0 0 4px rgba(156, 195, 234, .2); }
.kn .search .form-floating > .form-control { color: var(--kn-ink); }
.kn .search .form-floating > label { color: var(--kn-dim); }
.kn .t-row { background: var(--kn-card); color: var(--kn-ink); }
.kn .t-row:hover { background: #2c2c2e; color: #fff; }
.kn .t-copy small, .kn .chev { color: var(--kn-dim); }
.kn .date { background: rgba(156, 195, 234, .14); color: var(--kn-mint); }
.kn .date.is-past { background: #2c2c2e; color: var(--kn-muted); }
.kn .date.is-live { background: #ff6b6b; color: #fff; }
/* El resto de páginas (torneo en juego o jugado, buscador, QR de la mesa, errores): cabecera grande y, debajo, los
   componentes de siempre con el tema oscuro (data-bs-theme="dark" en el marco) */
.kn-hero.is-compact { min-height: 0; padding: 4.2rem 1.1rem 2.6rem; }
.kn-hero.is-compact h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); }
/* Título a dos tonos (como «Más torneos.»): sin resplandor, más ancho, la segunda mitad con el degradado y el punto
   en blanco. La parte en color entra de una vez (el degradado no se puede partir palabra a palabra). */
.kn-hero h1.kn-title { max-width: 18ch; margin: 1.2rem 0 .8rem; font-variation-settings: "wdth" 120, "opsz" 144; font-size: clamp(2.3rem, 6vw, 4.6rem); line-height: .98; letter-spacing: -.05em; }
.kn-hero h1.kn-title span { text-shadow: none; }
.kn-hero h1.kn-title em { display: inline-block; font-style: normal; background: linear-gradient(90deg, var(--kn-mint), var(--kn-sky)); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(.35em); animation: kn-word .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.kn-hero h1.kn-title em i { font-style: normal; color: #fff; -webkit-text-fill-color: #fff; }
.kn-hero.is-compact .kn-when { max-width: 44rem; font-weight: 400; line-height: 1.45; text-wrap: balance; }
.kn-hero h1.kn-title { text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .kn-hero h1.kn-title em { opacity: 1; transform: none; animation: none; } }
.kn-pill.is-done { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: var(--kn-ink); }
.kn-pill.is-done::before { background: var(--kn-dim); box-shadow: none; animation: none; }
.kn-lead { margin: 1rem 0 0; color: var(--kn-muted); font-size: 1.02rem; font-weight: 600; }
.kn-lead b { color: #fff; }
.kn-hero .podio { width: min(100%, 36rem); margin: 2.2rem auto 0; }
.kn-hero .search { width: min(100%, 36rem); margin: 2rem auto 0; text-align: left; }
.kn-body { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 3rem) 4.5rem; }
.kn-body.is-narrow { max-width: 760px; }
.kn-body .tabs { justify-content: center; margin-top: .4rem; }
/* En el móvil, las cuatro pestañas (con «Documentos») en una sola línea */
@media (max-width: 420px) { .kn-body .tabs { flex-wrap: wrap; gap: .3rem .15rem; } .kn-body .tabs a { padding: .45rem .5rem; font-size: .8rem; white-space: nowrap; } }
.kn-body .result-sheet { max-width: 34rem; margin: 1rem auto 0; }
.kn-body .prep-anim { border: 1px solid rgba(255, 255, 255, .08); }
/* «Tu pareja» (js/publico-yo.js): «¿Quién eres?», tu tarjeta, tu fila señalada con «Tú» y la barra fija abajo */
.kn-me-slot { margin: 0; }
.kn-who, .kn-mecard { margin: 0 0 1.2rem; padding: clamp(1.2rem, 2.6vw, 1.8rem); border-radius: 1.6rem; }
.kn-who { background: var(--kn-card); }
.kn-who h2, .kn-mecard h2 { margin: 0 0 .3rem; font-size: 1.35rem; letter-spacing: -.02em; }
.kn-who > p { margin: 0 0 .9rem; color: var(--kn-muted); font-size: .9rem; }
.kn-who .search { margin: 0; background: #111; }
.kn-found { display: grid; gap: .3rem; margin-top: .6rem; }
.kn-found button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .7rem .8rem; border: 0; border-radius: 1rem; background: #2c2c2e; color: var(--kn-ink); text-align: left; }
.kn-found button:hover { background: #3a3a3c; }
.kn-found button > span { display: grid; flex: 1; min-width: 0; }
.kn-found strong { font-weight: 700; }
.kn-found small { color: var(--kn-dim); font-size: .78rem; }
.kn-found em { flex: 0 0 auto; padding: .4rem .8rem; border-radius: 99px; background: var(--kn-mint); color: #0c2238; font-style: normal; font-size: .82rem; font-weight: 800; }
.kn-none { margin: .4rem .2rem 0; color: var(--kn-muted); font-size: .9rem; }
.kn-who__tag { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .5rem; color: #ff8a8a; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.kn-who__tag::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 0 4px rgba(255, 107, 107, .25); animation: kn-beat 1.8s ease-in-out infinite; }
.kn-asking .kn .mesa-row[data-pairs] { cursor: pointer; }
.kn-asking .kn .mesa-row[data-pairs]:hover { background: #2c2c2e; }
.kn-choose { display: grid; gap: .35rem; margin: 2px 0 6px; padding: .8rem; border-radius: 1rem; background: #2c2c2e; list-style: none; box-shadow: inset 0 0 0 1px rgba(156, 195, 234, .35); }
.kn-choose p { margin: 0 0 .2rem; color: var(--kn-ink); font-weight: 800; }
.kn-choose button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .65rem .8rem; border: 0; border-radius: .8rem; background: var(--kn-card); color: var(--kn-ink); text-align: left; }
.kn-choose button > span { display: grid; flex: 1; min-width: 0; }
.kn-choose button small { color: var(--kn-dim); font-size: .78rem; }
.kn-choose button em { flex: 0 0 auto; padding: .35rem .7rem; border-radius: 99px; background: var(--kn-mint); color: #0c2238; font-style: normal; font-size: .78rem; font-weight: 800; }
.kn-choose button.none { justify-content: center; background: none; color: var(--kn-muted); font-weight: 700; }
.kn-mecard { color: #0c2238; background: linear-gradient(135deg, #9cc3ea, #d2e3f5); box-shadow: 0 18px 40px -18px rgba(43, 93, 143, .6); }
.kn-mecard .top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .78; }
.kn-mecard .top button { padding: 0; border: 0; background: none; color: inherit; font-size: .8rem; font-weight: 700; letter-spacing: 0; text-transform: none; text-decoration: underline; }
.kn-mecard h2 { margin: .3rem 0 .9rem; color: #0c2238; font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1.05; }
.kn-mecard .me-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem; }
.kn-mecard .mesa { display: grid; place-items: center; align-content: center; min-width: 5rem; height: 5rem; padding: 0 .7rem; border-radius: 1.3rem; background: #0c2238; color: var(--kn-mint); font-size: 1.8rem; }
.kn-mecard .mesa small { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.kn-mecard .mesa b { font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-size: 2.6rem; font-weight: 800; line-height: .95; }
.kn-mecard .vs { font-size: .92rem; line-height: 1.35; }
.kn-mecard .vs strong { display: block; font-size: 1.02rem; }
.kn-mecard .wait { margin: 0; font-size: .92rem; font-weight: 600; }
.kn-mecard .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.kn-mecard .chips span { padding: .3rem .7rem; border-radius: 99px; background: rgba(12, 34, 56, .1); font-size: .82rem; font-weight: 800; }
/* Entre partidas y al terminar: puesto, subida o bajada, último resultado; al final, la línea de puestos y los datos */
.kn-mecard .move { display: inline-flex; margin-bottom: .35rem; padding: .15rem .6rem; border-radius: 99px; background: rgba(12, 34, 56, .12); font-size: .8rem; font-weight: 800; }
.kn-mecard .move.is-up { color: #fff; background: #2b5d8f; }
.kn-mecard .move.is-down { color: #fff; background: #b4413a; }
/* Partidas de una en una: el título es el selector («Partida ① ② ③»), con «En juego» a la derecha si toca */
.round-head { align-items: center; }
.round-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.round-pager h2 { margin: 0 .35rem 0 0; }
.round-pager button { display: inline-flex; align-items: baseline; justify-content: center; min-width: 2.3rem; height: 2.3rem; padding: 0 .65rem; border: 0; border-radius: 999px; background: var(--kn-card); color: var(--kn-muted); font-family: var(--app-display); font-variation-settings: "wdth" 125; font-size: 1rem; font-weight: 800; line-height: 2.3rem; transition: background-color .15s ease, color .15s ease; }
.round-pager button small { margin-left: .1rem; font-size: .7em; }
.round-pager button:hover { color: var(--kn-ink); }
.round-pager button[aria-pressed="true"] { background: var(--kn-mint); color: #0c2238; }
/* En el móvil caben seis partidas en una línea: botones algo menores y, en vez de «En juego», un punto en la que se juega */
.round-pager button { position: relative; }
@media (max-width: 575.98px) {
  .round-pager { gap: .25rem; }
  .round-pager h2 { margin-right: .25rem; }
  .round-pager button { min-width: 2.1rem; height: 2.1rem; padding: 0 .5rem; line-height: 2.1rem; }
  .round-pager button.is-live::after { content: ""; position: absolute; top: .05rem; right: .05rem; width: .5rem; height: .5rem; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 0 2px #000; }
  .round-head [data-round-live] { display: none; }
}
.kn-mecard .mesa b.len2 { font-size: 2rem; }
.kn-mecard .mesa b.len3 { font-size: 1.55rem; }
.kn-mecard .last { display: block; }
.kn-mecard .last strong { display: inline; font-size: inherit; }
.kn-mecard .next { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid rgba(12, 34, 56, .15); font-size: .82rem; opacity: .85; }
/* «Mis partidas»: las mesas de tu pareja, una debajo de otra (las mismas filas que en «Partidas»), con el puesto tras cada una */
.kn-mine__sum { display: flex; flex-wrap: wrap; gap: .5rem; }
.kn-mine__sum span { padding: .4rem .8rem; border-radius: 12px; background: var(--kn-card); color: var(--kn-muted); font-size: .85rem; }
.kn-mine__sum b { color: var(--kn-ink); font-size: 1rem; font-weight: 800; }
.kn .kn-mine .mesa-row.is-me { box-shadow: none; }
.kn-mine .section-head { margin-top: 1.1rem; }
.kn-mine .section-head:first-child { margin-top: 0; }
.kn-mine__pos { color: var(--kn-muted); font-size: .85rem; font-weight: 700; }
.kn-mine__pos b.up { color: var(--kn-mint); }
.kn-mine__pos b.down { color: #ff8a8a; }
/* Al terminar: la gráfica con alto y letra fijos (no crece con la tarjeta); en una tarjeta ancha, a la derecha de los datos */
.kn-mecard { container-type: inline-size; }
.kn-mecard .traj { margin-top: 1rem; color: #0c2238; }
.kn-mecard .traj .sec { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.kn-mecard .chart { position: relative; height: 7rem; margin: 2.1rem .9rem 2.6rem; }
.kn-mecard .chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kn-mecard .chart polyline { fill: none; stroke: #0c2238; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kn-mecard .chart .pt { position: absolute; transform: translate(-50%, -50%); }
.kn-mecard .chart .pt i { display: block; width: .6rem; height: .6rem; border-radius: 50%; background: #0c2238; }
.kn-mecard .chart .pt.last i { width: .9rem; height: .9rem; box-shadow: 0 0 0 .25rem rgba(12, 34, 56, .18); }
.kn-mecard .chart .pt b { position: absolute; left: 50%; bottom: calc(100% + .3rem); transform: translateX(-50%); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.kn-mecard .chart .pt.last b { font-size: .95rem; }
.kn-mecard .chart .pt.dip b { top: calc(100% + .3rem); bottom: auto; }
.kn-mecard .chart .ax { position: absolute; bottom: -2.4rem; transform: translateX(-50%); font-size: .68rem; font-weight: 700; opacity: .65; }
@container (min-width: 700px) {
    .kn-mecard .me-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 2rem; align-items: start; margin-top: .9rem; }
    .kn-mecard .me-split .facts { grid-row: 1; grid-column: 1; margin-top: 0; }
    .kn-mecard .me-split .traj { grid-row: 1; grid-column: 2; margin-top: 0; }
}
.kn-mecard .facts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .9rem; }
.kn-mecard .fact { padding: .6rem .7rem; border-radius: .9rem; background: rgba(12, 34, 56, .08); }
.kn-mecard .fact b { display: block; font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-size: 1.25rem; font-weight: 800; line-height: 1.05; }
.kn-mecard .fact span { font-size: .74rem; line-height: 1.3; opacity: .8; }
.kn-mebar { position: fixed; left: 50%; bottom: calc(.8rem + env(safe-area-inset-bottom, 0px)); z-index: 30; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; width: min(calc(100% - 1.4rem), 34rem); padding: .5rem .8rem .5rem .5rem; border-radius: 1.3rem; color: #0c2238; background: linear-gradient(135deg, #9cc3ea, #d2e3f5); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); transform: translateX(-50%); animation: kn-bar-in .3s ease-out; }
.kn-mebar[hidden] { display: none; }
@keyframes kn-bar-in { from { transform: translate(-50%, 120%); } }
.kn-mebar .mesa { display: grid; place-items: center; min-width: 3.1rem; height: 3.1rem; padding: 0 .4rem; border-radius: .9rem; background: #0c2238; color: var(--kn-mint); font-family: var(--app-display); font-variation-settings: "wdth" 125; font-size: 1.6rem; font-weight: 800; }
.kn-mebar .txt { display: grid; min-width: 0; }
.kn-mebar strong, .kn-mebar .txt small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kn-mebar strong { font-size: .92rem; }
.kn-mebar .txt small { font-size: .76rem; font-weight: 600; opacity: .8; }
.kn-mebar .pos { text-align: center; font-family: var(--app-display); font-size: 1.3rem; font-weight: 800; line-height: 1; }
.kn-mebar .pos small { display: block; font-family: var(--app-font); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.kn-body:has(+ .kn-mebar) { padding-bottom: 6.5rem; }
.kn .mesa-row.is-names .mesa-copy small { font-size: .72rem; white-space: normal; }
/* Nombres con el mismo peso que en la clasificación; solo tu pareja, en negrita (en las dos) */
.kn .mesa-row.is-names .mesa-copy strong { font-weight: 400; }
/* El número de pareja delante de sus nombres (manda el número: los nombres se pueden repetir) */
.kn .mesa-copy .pair-no { display: inline-block; min-width: 1.6em; margin-right: .45rem; color: var(--app-tone); font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.kn .mesa-row.is-names .mesa-copy strong.is-me, .kn .clasif [data-pair].is-me { font-weight: 700; }
.kn .mesa-row.is-me, .kn .clasif tr.is-me td { background: rgba(156, 195, 234, .14); }
.kn .mesa-row.is-me { box-shadow: inset 0 0 0 2px var(--kn-mint); }
.kn .mesa-row.is-me .mesa-num { background: var(--kn-mint); color: #0c2238; }
/* Tu fila en la clasificación: borde menta entero (como tu mesa en «Partidas»); en el podio, sin fondo, que se vea la
   medalla. El fondo es opaco (menta al 14 % sobre negro): uno translúcido se suma entre celdas y deja rayas. */
.kn .clasif tr.is-me td { background: var(--kn-me); box-shadow: inset 0 2px 0 var(--kn-mint), inset 0 -2px 0 var(--kn-mint); }
.kn .clasif tr.is-me td:first-child { color: var(--kn-mint); box-shadow: inset 2px 0 0 var(--kn-mint), inset 0 2px 0 var(--kn-mint), inset 0 -2px 0 var(--kn-mint); }
.kn .clasif tr.is-me td:last-child { box-shadow: inset -2px 0 0 var(--kn-mint), inset 0 2px 0 var(--kn-mint), inset 0 -2px 0 var(--kn-mint); }
.kn .clasif tr.is-me:is(.g1, .g2, .g3) td { background: var(--app-glass-strong); }
/* Clasificación en movimiento (js/publico-yo.js): la fila se desliza a su puesto nuevo y avisa si sube o baja */
.kn .clasif tr.is-moving td { background: #2c2c2e; }
/* Podio: el puesto en oro, plata y bronce, y un brillo dorado en la fila del primero (como en la pantalla de sala) */
.kn .clasif tr.g1 td:first-child { background: var(--kn-gold); color: #3a2a00; }
.kn .clasif tr.g2 td:first-child { background: var(--kn-silver); color: #222; }
.kn .clasif tr.g3 td:first-child { background: var(--kn-bronze); color: #3a1c00; }
.kn .clasif tr.g1 td.pn { background: linear-gradient(rgba(242, 201, 107, .16), rgba(242, 201, 107, .16)), var(--app-glass-strong); }
.kn .clasif tr.g1 td.nm { background: linear-gradient(90deg, rgba(242, 201, 107, .16), var(--app-glass-strong)); }
.kn .clasif tr.g2 td.pn { background: linear-gradient(rgba(207, 211, 216, .13), rgba(207, 211, 216, .13)), var(--app-glass-strong); }
.kn .clasif tr.g2 td.nm { background: linear-gradient(90deg, rgba(207, 211, 216, .13), var(--app-glass-strong)); }
.kn .clasif tr.g3 td.pn { background: linear-gradient(rgba(217, 154, 108, .15), rgba(217, 154, 108, .15)), var(--app-glass-strong); }
.kn .clasif tr.g3 td.nm { background: linear-gradient(90deg, rgba(217, 154, 108, .15), var(--app-glass-strong)); }
/* Clasificación pública: columnas centradas; nombres y zona, a la izquierda. «Dif.» es siempre la última. */
.clasif--pub th, .clasif--pub td { text-align: center; }
.clasif--pub th.nm, .clasif--pub td.nm, .clasif--pub th.zone, .clasif--pub td.zone { text-align: left; }
.clasif--pub th.pn, .clasif--pub td.pn { width: 4rem; text-align: center; }
.clasif--pub td.pn { color: var(--app-tone); font-weight: 800; }
.clasif--pub td.zone { color: var(--app-muted); }
.kn-move { display: block; font-size: .62rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; animation: kn-move 6s ease-out forwards; }
.kn-move.is-up { color: #9cc3ea; }
.kn-move.is-down { color: #ff8a8a; }
@keyframes kn-move { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.kn [data-pair].is-me::after, .kn .name-row.is-me strong::after { content: "Tú"; margin-left: .45rem; padding: .05rem .5rem; border-radius: 99px; background: var(--kn-mint); color: #0c2238; font-size: .68rem; font-weight: 800; vertical-align: .1em; }
.kn .row-empty { background: var(--kn-card); color: var(--kn-muted); }
.kn-foot { padding: 2.5rem 1.1rem calc(2.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--kn-card); color: #6e6e73; font-size: .85rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .kn-hero::before, .kn-pill::before { animation: none; } .kn-hero h1 span { opacity: 1; transform: none; animation: none; } .kn-dom, .kn-chain.is-loop .kn-dom { animation: none; transform: rotate(64deg); } .kn-rv { opacity: 1; transform: none; transition: none; } .kn-map .arc { stroke-dashoffset: 0; transition: none; } .kn-map .halo { animation: none; } .kn-rank i, .kn-game { transform: none; transition: none; } }

/* Fichas de dominó de marfil: el número arriba y, abajo, de 1 a 6 puntos colocados como en una ficha de verdad (rejilla
   de 3 × 3); raya central con su clavillo dorado y canto. Las usa la lista de parejas (.ficha). */
.pips { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); min-height: 0; padding: 18% 20% 20%; }
.pips u { width: var(--pip, 5px); height: var(--pip, 5px); margin: auto; border-radius: 50%; background: #1a1a1a; }
.pips.f1 u:nth-child(1) { grid-area: 2 / 2; }
.pips.f2 u:nth-child(1) { grid-area: 1 / 1; } .pips.f2 u:nth-child(2) { grid-area: 3 / 3; }
.pips.f3 u:nth-child(1) { grid-area: 1 / 1; } .pips.f3 u:nth-child(2) { grid-area: 2 / 2; } .pips.f3 u:nth-child(3) { grid-area: 3 / 3; }
.pips.f4 u:nth-child(1) { grid-area: 1 / 1; } .pips.f4 u:nth-child(2) { grid-area: 1 / 3; } .pips.f4 u:nth-child(3) { grid-area: 3 / 1; } .pips.f4 u:nth-child(4) { grid-area: 3 / 3; }
.pips.f5 u:nth-child(1) { grid-area: 1 / 1; } .pips.f5 u:nth-child(2) { grid-area: 1 / 3; } .pips.f5 u:nth-child(3) { grid-area: 2 / 2; } .pips.f5 u:nth-child(4) { grid-area: 3 / 1; } .pips.f5 u:nth-child(5) { grid-area: 3 / 3; }
.pips.f6 u:nth-child(1) { grid-area: 1 / 1; } .pips.f6 u:nth-child(2) { grid-area: 2 / 1; } .pips.f6 u:nth-child(3) { grid-area: 3 / 1; } .pips.f6 u:nth-child(4) { grid-area: 1 / 3; } .pips.f6 u:nth-child(5) { grid-area: 2 / 3; } .pips.f6 u:nth-child(6) { grid-area: 3 / 3; }
.ficha { display: grid; grid-template-rows: 1fr 1fr; color: #1a1a1a; background: linear-gradient(160deg, #fffdf6, #ece6d6); }
.ficha { --pip: 4px; position: relative; width: 2.15rem; height: 3.6rem; border-radius: .5rem; box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .08), 2px 3px 0 #bdb5a2, 0 6px 14px rgba(0, 0, 0, .45); }
.ficha b { display: grid; place-items: center; font-family: var(--app-display); font-variation-settings: "wdth" 118, "opsz" 144; font-weight: 800; letter-spacing: -.02em; }
.ficha b { font-size: .95rem; }
.ficha .pips { padding: 14% 22% 16%; }
.ficha::after { content: ""; position: absolute; left: 14%; right: 14%; top: 50%; height: 1.5px; background: rgba(26, 26, 26, .55); }
.ficha::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f5e6b0, #b08a2e); }
/* Lista cerrada: nombres con su ficha; tocar la tuya la recuerda en este móvil para enseñarte tu mesa */
.name-list { display: grid; gap: 3px; margin: .8rem 0 0; padding: 0; list-style: none; }
.name-row { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 3.6rem; padding: .45rem .7rem; border: 0; border-radius: .55rem; background: var(--app-glass-strong); color: var(--app-ink); text-align: left; }
.name-list > li:first-child .name-row { border-top-left-radius: 1.2rem; border-top-right-radius: 1.2rem; }
.name-list > li:last-child .name-row { border-bottom-left-radius: 1.2rem; border-bottom-right-radius: 1.2rem; }
.name-row:hover { background: var(--app-surface-3); }
.name-row.is-me { box-shadow: inset 0 0 0 2px var(--app-tone); }
.name-row .ficha { flex: 0 0 auto; }
.name-row > span:not(.ficha) { display: grid; flex: 1; min-width: 0; }
.name-row strong { font-weight: 650; font-size: .95rem; }
.name-row small { color: var(--app-muted); font-size: .78rem; }
/* «Revolviendo las fichas»: se prepara una partida y aún no se ha publicado */
.prep-anim { position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; gap: .6rem; margin: 0 0 1rem; padding: 1.4rem 1rem 1.2rem; border-radius: 1.6rem; color: #f5f5f7; background: #141416; text-align: center; box-shadow: var(--app-shadow-lg); }
.prep-anim::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 2px, transparent 2.5px); background-size: 20px 20px; }
.shuffle { display: flex; gap: .55rem; height: 4.6rem; align-items: center; perspective: 400px; }
/* Las mismas fichas de marfil que la lista de parejas y el cartel (.ficha): raya con su clavillo dorado y canto */
.shuffle span { position: relative; display: grid; grid-template-rows: 1fr 1fr; width: 2.4rem; height: 4.2rem; border-radius: .5rem; background: linear-gradient(160deg, #fffdf6, #ece6d6); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .08), 0 3px 0 #bdb5a2; animation: ficha-flip 2.4s ease-in-out infinite; }
.shuffle span::before { content: ""; position: absolute; left: 14%; right: 14%; top: 50%; height: 1.5px; margin-top: -.75px; background: rgba(26, 26, 26, .55); }
.shuffle span::after { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f5e6b0, #b08a2e); transform: translate(-50%, -50%); }
.shuffle span i { background-image: radial-gradient(circle, #1a1a1a 2.2px, transparent 2.7px); background-size: 50% 50%; }
.shuffle span:nth-child(2) { animation-delay: .3s; }
.shuffle span:nth-child(3) { animation-delay: .6s; }
.shuffle span:nth-child(4) { animation-delay: .9s; }
@keyframes ficha-flip { 0%, 60%, 100% { transform: rotateY(0); } 30% { transform: rotateY(180deg) translateY(-8px); } }
.prep-anim h2 { margin: .2rem 0 0; color: #fff; font-size: 1.5rem; letter-spacing: -.03em; }
.prep-anim p { margin: 0; max-width: 22rem; color: rgba(255, 255, 255, .8); font-size: .92rem; }
.live-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .74rem; font-weight: 750; }
.live-pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #9cc3ea; box-shadow: 0 0 0 4px rgba(156, 195, 234, .25); animation: buddy-breathe 2s ease-in-out infinite; }
/* «Juegas en la mesa N»: la mesa de tu pareja, en grande, al publicarse la partida */
@media (prefers-reduced-motion: reduce) { .shuffle span { animation: none; } }

/* Pantalla de sala (tele o proyector): escenas a pantalla completa que van pasando solas, con una franja fina arriba
   (qué se ve, cómo va la partida y el reloj). Medidas en --u = el menor de ancho y alto: nunca se pisa, sea la
   pantalla que sea. Oscura o clara, elegido en la propia pantalla. */
.sala-page { background: #050506; }
.sala { --u: min(1vw, 1.78vh); --sala-bg: #050506; --sala-card: #141416; --sala-card-2: #1d1d20; --sala-ink: #fff; --sala-muted: #a8a8ad; --sala-dim: #6e6e73; --sala-faded: #66666b; --sala-line: #26262a; --sala-tone: #9cc3ea; --sala-on-tone: #0c2238; --sala-done: #0f1a26; --sala-warn: #f5b45c; --sala-danger: #ff8a8a; --sala-gold: #f2c96b; --sala-silver: #cfd3d8; --sala-bronze: #d99a6c; --sala-zebra: rgba(156, 195, 234, .09);
    /* Texto en dorado y bronce (importes de los premios): en claro, más oscuros para que se lean sobre su fondo */
    --sala-gold-ink: var(--sala-gold); --sala-bronze-ink: var(--sala-bronze);
    position: relative; isolation: isolate; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: calc(var(--u) * 1.2); height: 100vh; height: 100dvh; padding: calc(var(--u) * 1.3) calc(var(--u) * 2.6) calc(var(--u) * 1); overflow: hidden; color: var(--sala-ink); background: var(--sala-bg); }
.sala::before { content: ""; position: absolute; inset: -30% -10% auto; height: 60%; z-index: -1; background: radial-gradient(50% 60% at 50% 0, rgba(43, 93, 143, .3), transparent 70%); }
.sala.is-light { --sala-bg: #f2f2f5; --sala-card: #fff; --sala-card-2: #e9e9ee; --sala-ink: #111; --sala-muted: #4a4a4f; --sala-dim: #6e6e73; --sala-faded: #a4a4a9; --sala-line: #dcdce1; --sala-tone: #285683; --sala-on-tone: #fff; --sala-done: #e4edf7; --sala-warn: #a3520b; --sala-danger: #c62828; --sala-gold: #e7b94a; --sala-silver: #b9bec4; --sala-bronze: #cc8a5a; --sala-zebra: #e3ecf7; --sala-gold-ink: #8a5a12; --sala-bronze-ink: #8f4f24; }
.sala.is-light::before { display: none; }
/* Franja de arriba */
/* Franja baja (para que la clasificación quepa con 25 filas): título, casillas de las mesas, reloj y el QR a la parte
   pública, todo de la altura del reloj. */
.sala-top { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; align-items: center; gap: calc(var(--u) * 2.4); }
.sala-what small { display: block; margin-top: calc(var(--u) * .45); color: var(--sala-muted); font-size: calc(var(--u) * .95); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sala-what b { display: block; font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-size: calc(var(--u) * 2.5); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.sala-qr { display: flex; align-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * .45); border-radius: calc(var(--u) * 1); background: #fff; color: #1d1d1f; }
.sala-qr span { display: block; width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); }
.sala-qr svg { display: block; width: 100%; height: 100%; }
.sala-qr small { max-width: calc(var(--u) * 6); padding-right: calc(var(--u) * .4); font-size: calc(var(--u) * .85); font-weight: 800; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; }
.sala-live { display: grid; grid-auto-flow: column; align-items: stretch; gap: calc(var(--u) * 2.4); }
.sala-prog { display: grid; justify-items: end; align-content: start; gap: calc(var(--u) * .5); }
/* Una casilla por mesa, como mucho en dos filas (--per casillas por fila, lo pone publico.php): con muchas mesas las
   casillas y sus huecos se estrechan para caber en el ancho que hay. */
.sala-prog .cells { --per: 24; display: grid; grid-template-columns: repeat(var(--per), minmax(0, calc(var(--u) * 1.1))); justify-content: end; gap: calc(var(--u) * .3) min(calc(var(--u) * .3), calc(var(--u) * 10 / var(--per))); width: min(calc(var(--u) * 26), calc(var(--per) * var(--u) * 1.4)); }
.sala-prog .cells i { height: calc(var(--u) * 1.9); border-radius: min(calc(var(--u) * .3), 30%); background: var(--sala-line); }
.sala-prog .cells i.is-done { background: var(--sala-tone); box-shadow: 0 0 calc(var(--u) * .8) rgba(156, 195, 234, .45); }
.sala-prog > span:last-child { color: var(--sala-muted); font-size: calc(var(--u) * 1.1); font-weight: 700; }
.sala-prog b { color: var(--sala-ink); }
/* Entre partidas, en lugar de las casillas: quién prepara la siguiente (se ve todo el rato, también con la clasificación) */
.sala-prog > span.sala-next { display: flex; align-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * .8) calc(var(--u) * 1.4); border-radius: 99px; background: var(--sala-card); color: var(--sala-muted); font-size: calc(var(--u) * 1.6); font-weight: 700; }
.sala-next i { color: var(--sala-tone); }
/* El reloj ocupa todo el alto de la franja: arriba, a la altura de las casillas de las mesas; abajo, de su rótulo */
.sala-clock { display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .4) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1); background: var(--sala-card); }
.sala-digits { font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-size: calc(var(--u) * 4.8); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--sala-tone); transition: color .6s; }
/* Al pasar por 40, 30, 20 y 10 minutos, un pulso corto para que se note que el tiempo avanza */
.live__time.is-tick { display: inline-block; }
.sala-digits.is-tick, .live__time.is-tick { animation: clock-tick 1.2s cubic-bezier(.2, .8, .2, 1) 2; }
@keyframes clock-tick { 0%, 100% { transform: scale(1); filter: none; } 35% { transform: scale(1.12); filter: drop-shadow(0 0 calc(var(--u, 8px) * 1.2) currentColor); } }
@media (prefers-reduced-motion: reduce) { .sala-digits.is-tick, .live__time.is-tick { animation: none; } }
.sala-digits[data-tone="warn"] { color: var(--sala-warn); }
.sala-digits[data-tone="danger"], .sala-digits[data-tone="over"] { color: var(--sala-danger); }
.sala-clock small { max-width: calc(var(--u) * 7); color: var(--sala-muted); font-size: calc(var(--u) * .95); font-weight: 800; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
/* Escenas */
.sala-stage { position: relative; min-height: 0; }
.sala-scene { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; min-height: 0; animation: sala-in .7s cubic-bezier(.2, .8, .2, 1); }
.sala-scene[hidden] { display: none; }
@keyframes sala-in { from { opacity: 0; transform: translateY(calc(var(--u) * 1.6)); } }
/* Antes de empezar: «¡Bienvenidos!» a pantalla completa (sin franja: solo el QR, abajo a la derecha), el logo de la
   asociación en blanco y fichas que caen despacio al fondo. */
.sala[data-kind="welcome"] { grid-template-rows: minmax(0, 1fr); background: radial-gradient(120% 90% at 50% 110%, #1d3a5c 0%, #0b1726 45%, #050506 80%); }
.sala[data-kind="welcome"]::before { display: none; }
.sala[data-kind="welcome"] .sala-top { position: absolute; right: calc(var(--u) * 2.6); bottom: calc(var(--u) * 4); z-index: 2; }
.sala[data-kind="welcome"] .sala-what { display: none; }
.sala[data-kind="welcome"] .sala-qr span { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.sala-welcome { display: grid; justify-items: center; align-content: center; gap: calc(var(--u) * 1.4); text-align: center; }
.sala-welcome__tiles { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sala-welcome__tiles span { position: absolute; top: 0; width: calc(var(--u) * 3.4); height: calc(var(--u) * 6.8); border-radius: calc(var(--u) * .6); background: linear-gradient(160deg, #fdfdfd, #d9e2ec); box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.4) rgba(0, 0, 0, .5); opacity: var(--o); animation: sala-tile linear infinite; }
.sala-welcome__tiles span::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: #9aa8b8; }
.sala-welcome__tiles i { position: absolute; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #1d3a5c; }
@keyframes sala-tile { from { transform: translateY(-15vh) rotate(var(--r)); } to { transform: translateY(110vh) rotate(calc(var(--r) + 140deg)); } }
.sala-welcome__logo { max-width: calc(var(--u) * 30); max-height: calc(var(--u) * 12); filter: drop-shadow(0 calc(var(--u) * .6) calc(var(--u) * 2) rgba(0, 0, 0, .5)); }
.sala-welcome small { color: #b9c6d6; font-size: calc(var(--u) * 1.15); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.sala-welcome h2 { margin: 0; font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-size: calc(var(--u) * 11); font-weight: 800; line-height: .9; letter-spacing: -.045em; background: linear-gradient(180deg, #fff 30%, #9cc3ea); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sala-welcome > b { font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-size: calc(var(--u) * 3.2); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #fff; }
.sala-welcome p { margin: 0; color: #b9c6d6; font-size: calc(var(--u) * 1.6); font-weight: 600; }
.sala-welcome p b { color: #f2c96b; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .sala-welcome__tiles span { animation-play-state: paused; } }
/* Entre partidas: «Revolviendo las fichas» en grande y centrado, con la misma animación de la parte pública */
.sala-prep { display: grid; justify-items: center; align-content: center; gap: calc(var(--u) * 1.4); text-align: center; }
.sala-prep .shuffle { height: calc(var(--u) * 10); gap: calc(var(--u) * 1.2); }
.sala-prep .shuffle span { width: calc(var(--u) * 5); height: calc(var(--u) * 8.8); border-radius: calc(var(--u) * 1); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .08), 0 calc(var(--u) * .5) 0 #bdb5a2, 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(0, 0, 0, .4); }
.sala-prep .shuffle span i { margin: calc(var(--u) * .5); background-image: radial-gradient(circle, #1a1a1a calc(var(--u) * .45), transparent calc(var(--u) * .55)); }
.sala-prep .shuffle span::before { height: calc(var(--u) * .16); margin-top: calc(var(--u) * -.08); }
.sala-prep .live-pill { padding: calc(var(--u) * .45) calc(var(--u) * 1.1); color: var(--sala-ink); background: var(--sala-card); font-size: calc(var(--u) * 1.1); }
.sala-prep h2 { margin: 0; color: var(--sala-ink); font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-size: calc(var(--u) * 5); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.sala-prep p { max-width: 36ch; margin: 0; color: var(--sala-muted); font-size: calc(var(--u) * 1.8); line-height: 1.4; }
.sala-prep p strong { color: var(--sala-ink); }
/* Entrega de premios (torneo terminado): el podio en escalones arriba (1.º en el centro y más alto) y debajo los
   premios agrupados por cuantía en columnas, todas las parejas iguales. El confeti cae una vez al aparecer. */
.sala-prizes { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: calc(var(--u) * 1.4); min-height: 0; height: 100%; overflow: hidden; }
/* Con los premios, el título («Premios») va encima de la escena, en la esquina: el podio sube hasta arriba (el 1.º,
   en el centro, es el más alto; el 2.º y el 3.º, más bajos, empiezan por debajo del título) y las listas ganan alto. */
.sala[data-kind="premios"] { grid-template-rows: minmax(0, 1fr); }
.sala[data-kind="premios"] .sala-top { position: absolute; top: calc(var(--u) * 1.3); left: calc(var(--u) * 2.6); right: calc(var(--u) * 2.6); z-index: 2; pointer-events: none; }
.sala[data-kind="premios"] .sala-top > * { pointer-events: auto; }
.sala-prizes.is-flat { grid-template-rows: minmax(0, 1fr); }
.sala-prizes::before { content: ""; position: absolute; inset: -10% -5% auto; height: 60%; background: radial-gradient(50% 60% at 50% 30%, color-mix(in srgb, var(--sala-gold) 22%, transparent), transparent 70%); pointer-events: none; }
.sala-confetti { position: absolute; inset: 0 0 auto; height: 45%; overflow: hidden; pointer-events: none; }
.sala-confetti i { position: absolute; top: -5%; width: calc(var(--u) * .55); height: calc(var(--u) * 1); border-radius: 2px; opacity: 0; animation: sala-confetti 20s linear infinite; }
.sala-confetti i:nth-child(6n + 1) { background: var(--sala-gold); } .sala-confetti i:nth-child(6n + 2) { background: var(--sala-tone); } .sala-confetti i:nth-child(6n + 3) { background: var(--sala-danger); }
.sala-confetti i:nth-child(6n + 4) { background: var(--sala-ink); } .sala-confetti i:nth-child(6n + 5) { background: var(--sala-bronze); } .sala-confetti i:nth-child(6n) { background: var(--sala-silver); }
/* Cada 20 s: cae durante los 4,5 primeros segundos (el 22,5 % de la vuelta) y el resto, quieto y sin verse */
@keyframes sala-confetti {
    0% { opacity: 1; transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
    18% { opacity: .9; }
    22.5% { opacity: 0; transform: translateY(calc(var(--u) * 26)) rotate(var(--r, 120deg)); }
    100% { opacity: 0; transform: translateY(calc(var(--u) * 26)) rotate(var(--r, 120deg)); }
}
@media (prefers-reduced-motion: reduce) { .sala-confetti { display: none; } }
.sala-podium { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: calc(var(--u) * 1.4); align-items: end; height: calc(var(--u) * 17); }
.sala-podium__p { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--u) * 1.2); align-items: center; align-content: center; padding: calc(var(--u) * 1) calc(var(--u) * 1.5); border-radius: calc(var(--u) * 1.6) calc(var(--u) * 1.6) calc(var(--u) * .5) calc(var(--u) * .5); }
.sala-podium__p .pos { grid-row: 1 / 4; font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-weight: 800; line-height: .8; letter-spacing: -.05em; }
.sala-podium__p .nm { min-width: 0; color: var(--sala-ink); font-family: var(--app-display); font-variation-settings: "wdth" 112, "opsz" 144; font-size: calc(var(--u) * 1.75); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.sala-podium__p .nm span { color: var(--sala-muted); font-weight: 400; }
.sala-podium__p .meta { margin: calc(var(--u) * .35) 0 calc(var(--u) * .6); color: var(--sala-muted); font-size: calc(var(--u) * 1); font-weight: 600; }
.sala-podium__p .chip { justify-self: start; display: inline-flex; align-items: center; gap: .45em; padding: .3em .9em; border-radius: 99px; font-size: calc(var(--u) * 1.15); font-weight: 800; white-space: nowrap; }
.sala-podium__p.is-1 { height: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--sala-gold) 26%, transparent), color-mix(in srgb, var(--sala-gold) 6%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sala-gold) 40%, transparent); }
.sala-podium__p.is-1 .pos { font-size: calc(var(--u) * 9.5); color: var(--sala-gold); }
.sala-podium__p.is-1 .nm { font-size: calc(var(--u) * 2.1); }
.sala-podium__p.is-1 .chip { background: color-mix(in srgb, var(--sala-gold) 22%, transparent); color: var(--sala-gold-ink); }
.sala-podium__p.is-2 { height: 68%; background: linear-gradient(180deg, color-mix(in srgb, var(--sala-silver) 18%, transparent), color-mix(in srgb, var(--sala-silver) 4%, transparent)); }
.sala-podium__p.is-2 .pos { font-size: calc(var(--u) * 7.2); color: var(--sala-silver); }
.sala-podium__p.is-2 .chip { background: color-mix(in srgb, var(--sala-silver) 16%, transparent); color: var(--sala-ink); }
.sala-podium__p.is-3 { height: 58%; background: linear-gradient(180deg, color-mix(in srgb, var(--sala-bronze) 20%, transparent), color-mix(in srgb, var(--sala-bronze) 4%, transparent)); }
.sala-podium__p.is-3 .pos { font-size: calc(var(--u) * 6); color: var(--sala-bronze); }
.sala-podium__p.is-3 .chip { background: color-mix(in srgb, var(--sala-bronze) 20%, transparent); color: var(--sala-bronze-ink); }
/* Debajo del podio, una tabla por tipo de premio, una al lado de otra (cada una con las columnas que necesita, --rows
   filas por columna, lo pone publico.php); cada pareja en su fila con fondo: puesto, número, apellidos y lo que gana. */
.sala-types { --fs: calc(var(--u) * 1.3); position: relative; display: grid; gap: calc(var(--u) * 1.4); min-height: 0; height: 100%; font-size: var(--fs); }
.sala-type { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .45em; min-width: 0; min-height: 0; }
/* El título de la tabla y, debajo, lo que se cobra («60 € cada pareja»): todas con el mismo alto, para que las filas
   empiecen a la misma altura */
.sala-type h3 { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .45em; align-items: baseline; min-width: 0; margin: 0; padding-bottom: .3em; font-size: calc(var(--u) * 1.05); border-bottom: 2px solid var(--sala-line); white-space: nowrap; }
.sala-type h3 i { color: var(--sala-tone); font-size: 1.05em; }
.sala-type h3 b { min-width: 0; overflow: hidden; color: var(--sala-ink); font-family: var(--app-display); font-variation-settings: "wdth" 118; font-size: 1.3em; font-weight: 800; letter-spacing: -.02em; text-overflow: ellipsis; }
.sala-type h3 span { grid-column: 2; overflow: hidden; color: var(--sala-gold-ink); font-size: .8em; font-weight: 800; text-overflow: ellipsis; }
.sala-type { align-content: start; }
.sala-type__rows { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows), 2.15em); grid-auto-columns: minmax(0, 1fr); align-content: start; gap: .3em .55em; min-height: 0; }
.sala-type__rows p { display: grid; grid-template-columns: 2.3em 2em minmax(0, 1fr) auto; align-items: center; gap: .35em; min-height: 0; margin: 0; padding: 0 .6em; border-radius: .5em; background: var(--sala-card); }
.sala-type .k { color: var(--sala-tone); font-family: var(--app-display); font-variation-settings: "wdth" 118; font-weight: 800; }
.sala-type .pn { padding: .05em 0; border-radius: .3em; background: var(--sala-card-2); color: var(--sala-muted); font-family: var(--app-display); font-variation-settings: "wdth" 118; font-size: .78em; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.sala-type .who { overflow: hidden; color: var(--sala-ink); font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.sala-type .who span { color: var(--sala-muted); font-weight: 400; }
.sala-type em { color: var(--sala-gold-ink); font-style: normal; font-weight: 800; white-space: nowrap; }
.sala-note { align-self: center; justify-self: center; max-width: 60%; margin: 0; color: var(--sala-muted); font-size: calc(var(--u) * 2.4); font-weight: 700; text-align: center; }
/* Distribución de mesas: solo número de pareja → mesa, en columnas que se llenan de arriba abajo, como la hoja del
   Excel. publico.php elige columnas, filas y escala (--s) para que ocupe toda la pantalla: hasta 120 parejas. */
.sala-index { --k: calc(var(--u) * var(--s, 1)); padding-bottom: calc(var(--u) * 2.6); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: calc(var(--u) * .6); min-height: 0; }
.sala-index__head, .sala-index__list { display: grid; grid-template-columns: repeat(var(--cols, 8), calc(var(--k) * 9.75)); justify-content: space-evenly; column-gap: calc(var(--k) * 2.4); }
.sala-index__head span { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--k) * 1); text-align: center; padding: 0 0 calc(var(--u) * .4); border-bottom: calc(var(--u) * .18) solid var(--sala-line); color: var(--sala-dim); font-size: calc(var(--u) * clamp(.8, var(--s, 1), 1.4)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sala-index__list { grid-template-rows: repeat(var(--rows, 15), minmax(0, 1fr)); grid-auto-flow: column; min-height: 0; }
.sala-index__head b { margin-right: -.1em; } /* el espaciado de letras deja hueco al final: así queda centrado de verdad */
.sala-pl { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; gap: calc(var(--k) * 1); min-width: 0; min-height: 0; border-bottom: calc(var(--u) * .1) solid var(--sala-line); }
.sala-pl .pn { color: var(--sala-ink); font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-size: calc(var(--k) * 2.1); font-weight: 800; letter-spacing: -.03em; text-align: center; font-variant-numeric: tabular-nums; }
.sala-pl .mt { min-width: calc(var(--k) * 4.4); padding: calc(var(--k) * .35) calc(var(--k) * .6); border-radius: calc(var(--k) * .55); background: var(--sala-card-2); color: var(--sala-tone); font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-size: calc(var(--k) * 2); font-weight: 800; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
/* Quien descansa: una taza en la casilla de la mesa (cabe en cualquier columna; la palabra va para lectores de pantalla) */
.sala-pl .mt.is-bye { color: var(--sala-muted); font-size: calc(var(--k) * 1.6); }
.sala-prog .cells i.is-new { animation: sala-flash 2.6s ease-out; }
@keyframes sala-flash { 0%, 35% { box-shadow: 0 0 0 calc(var(--u) * .3) var(--sala-tone), 0 0 calc(var(--u) * 4) rgba(156, 195, 234, .6); } }
/* Resultados (12 mesas por escena) y clasificación (15 puestos), en una sola columna a todo el ancho como en el Excel:
   número de pareja y sus dos jugadores en columnas propias, para que todo quede alineado de arriba abajo. */
.sala-board { --n: 12; display: grid; grid-template-columns: var(--cols); grid-template-rows: auto repeat(var(--n), minmax(0, 1fr)); gap: 0 calc(var(--u) * 2); width: fit-content; max-width: 100%; min-height: 0; justify-self: center; }
.sala-clasif { --n: 25; }
/* Las columnas miden lo que su contenido (las filas son «subgrid» de la tabla): la tabla, centrada, no se estira y
   los nombres no quedan lejos de sus cifras, como en la hoja del Excel. */
.sala-results { --cols: calc(var(--u) * 5.5) calc(var(--u) * 4.6) minmax(0, max-content) calc(var(--u) * 13) calc(var(--u) * 4.6) minmax(0, max-content); }
/* Con todas las tablas al ancho de la más ancha (publico.php, equalBoards), los nombres reparten lo que sobra */
.sala-results.is-even { --cols: calc(var(--u) * 5.5) calc(var(--u) * 4.6) minmax(0, 1fr) calc(var(--u) * 13) calc(var(--u) * 4.6) minmax(0, 1fr); }
/* Hasta 25 puestos o 16 mesas por pantalla: la tabla usa una unidad más pequeña según sus filas (--f, de publico.php:
   62 % con la página llena, hasta el 100 % con pocas filas) y los números grandes un poco menos, para que quepan. */
.sala-board { --u: calc(min(1vw, 1.78vh) * var(--f, .62)); }
.sala-board .sala-row .pos { font-size: calc(var(--u) * 1.9); }
.sala-board .sala-row .won { font-size: calc(var(--u) * 2.1); }
.sala-board .sala-row .dif { font-size: calc(var(--u) * 1.9); }
.sala-head, .sala-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding-right: calc(var(--u) * 2); }
.sala-head { white-space: nowrap; color: var(--sala-dim); font-size: calc(var(--u) * 1); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sala-head span:first-child { text-align: center; }
.sala-clasif .sala-head span:nth-child(n + 5) { text-align: center; }
.sala-results .sala-head span:nth-child(2), .sala-results .sala-head span:nth-child(4) { grid-column: span 2; }
.sala-results .sala-head span:nth-child(3) { text-align: center; }
.sala-row { grid-template-rows: minmax(0, 1fr); min-height: 0; border-radius: calc(var(--u) * .7); background: transparent; overflow: hidden; }
/* Filas alternas en un azul pastel muy claro, en vez de tarjetas separadas por líneas (el podio lleva su color) */
.sala-board > .sala-row:nth-child(even):not(.is-g1):not(.is-g2):not(.is-g3) { background: var(--sala-zebra); }
.sala-head { padding-bottom: calc(var(--u) * .5); }
.sala-row .pos { align-self: stretch; display: grid; place-items: center; background: transparent; font-size: calc(var(--u) * 2.4); }
.sala-row .pos, .sala-row .pn, .sala-row .won, .sala-row .pts, .sala-row .dif, .sala-row .score b { font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sala-row.is-g1 .pos { background: var(--sala-gold); color: #3a2a00; }
.sala-row.is-g2 .pos { background: var(--sala-silver); color: #222; }
.sala-row.is-g3 .pos { background: var(--sala-bronze); color: #3a1c00; }
.sala-row.is-g1 { background: linear-gradient(90deg, rgba(242, 201, 107, .16), rgba(242, 201, 107, .16) 40%, var(--sala-card) 75%); }
.sala-row.is-g2 { background: linear-gradient(90deg, rgba(207, 211, 216, .13), rgba(207, 211, 216, .13) 40%, var(--sala-card) 75%); }
.sala-row.is-g3 { background: linear-gradient(90deg, rgba(217, 154, 108, .15), rgba(217, 154, 108, .15) 40%, var(--sala-card) 75%); }
/* La pareja: número y los dos jugadores, cada uno en su columna de la fila */
.sala-who { display: contents; }
.sala-row .pn { color: var(--sala-tone); font-size: calc(var(--u) * 2.1); text-align: right; }
.sala-row .nm { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(var(--u) * 1.5); font-weight: 400; }
.sala-results { --n: 16; }
.sala-results .sala-row .nm { font-size: calc(var(--u) * 1.6); }
.sala-row .zone { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--sala-muted); font-size: calc(var(--u) * 1.3); }
.sala-row .won { text-align: right; font-size: calc(var(--u) * 2.4); }
.sala-row .pts { text-align: right; color: var(--sala-muted); font-size: calc(var(--u) * 1.9); }
.sala-row .dif { text-align: right; font-size: calc(var(--u) * 2.1); }
/* Resultados: el marcador en medio; quien gana, con su nombre en negrita y sus puntos en el color de la app */
.sala-row .score { display: flex; justify-content: center; align-items: baseline; gap: calc(var(--u) * .7); }
.sala-row .score b { min-width: calc(var(--u) * 5.4); color: var(--sala-muted); font-size: calc(var(--u) * 2.5); }
.sala-row .score b:first-child { text-align: right; }
.sala-row .score b.is-win { color: var(--sala-tone); }
.sala-row .score i { color: var(--sala-dim); font-style: normal; font-size: calc(var(--u) * 1.7); }
.sala-row .score.is-wait, .sala-row.is-bye .score { color: var(--sala-dim); font-size: calc(var(--u) * 1.05); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sala-row .score.is-wait, .sala-row.is-bye .score { font-size: calc(var(--u) * 1.3); }
.sala-who.is-win .nm { color: var(--sala-ink); font-weight: 600; }
.sala-results .sala-row:not(.is-waiting) .sala-who:not(.is-win) .nm, .sala-results .sala-row .score b:not(.is-win) { color: var(--sala-faded); }
.sala-row.is-bye .pos { color: var(--sala-muted); font-size: calc(var(--u) * 1.9); }
/* Texto centrado de verdad en cada fila: la caja de la línea se recorta a la altura de las mayúsculas (sin el hueco que
   las fuentes dejan para tildes y descendentes, que hacía que todo pareciera caído hacia abajo). */
.sala-row .pos, .sala-row .pn, .sala-row .nm, .sala-row .zone, .sala-row .won, .sala-row .pts, .sala-row .dif, .sala-row .score b, .sala-pl .pn, .sala-pl .mt { text-box: trim-both cap alphabetic; }
/* Los nombres recortan lo que sobra (para los «…»): el mismo margen arriba y abajo deja sitio a tildes y a «g», «y»
   sin descentrar. */
.sala-row .nm, .sala-row .zone { padding-block: .32em; }
/* Aún sin resultado en la partida en juego: apagada (su puesto puede cambiar en cuanto anoten su mesa) */

.sala-row.is-waiting > * { opacity: .5; }
.sala-row.is-waiting > .sala-who > * { opacity: .5; }
/* En resultados, la mesa que aún juega se lee entera (cada uno busca a su rival): solo cambia su marco y «jugando» */
.sala-results .sala-row.is-waiting > *, .sala-results .sala-row.is-waiting > .sala-who > * { opacity: 1; }
.sala-results .sala-row.is-waiting .pos { background: transparent; color: var(--sala-muted); }
.sala-row .mv { margin-left: calc(var(--u) * .8); font-size: calc(var(--u) * 1.3); font-weight: 800; }
.sala-row .mv.is-up { color: var(--sala-tone); }
.sala-row .mv.is-down { color: var(--sala-danger); }
/* Clasificación con la misma letra y el mismo tamaño que los resultados (nombres a 1,6; cifras a 1,75): las cifras con la letra ancha de la app y los nombres con la de
   texto, todas en negro (el número de pareja, en el color de la app); los nombres, grandes. */
/* Las cifras van con la letra ancha: columnas a la medida de 4 cifras (PT 1.546, Dif. +1.200). */
.sala-clasif { --cols: calc(var(--u) * 4.8) calc(var(--u) * 5) minmax(0, max-content) minmax(0, max-content) calc(var(--u) * 3.6) calc(var(--u) * 7.4) calc(var(--u) * 7.4) calc(var(--u) * 9.4); }
.sala-clasif.is-even { --cols: calc(var(--u) * 4.8) calc(var(--u) * 5) minmax(0, 1fr) var(--zone, max-content) calc(var(--u) * 3.6) calc(var(--u) * 7.4) calc(var(--u) * 7.4) calc(var(--u) * 9.4); }
/* Con la partida en curso: dos columnas más a la derecha (a favor y en contra en esa partida, o un guion) */
.sala-clasif.has-cur { --cols: calc(var(--u) * 4.8) calc(var(--u) * 5) minmax(0, max-content) minmax(0, max-content) calc(var(--u) * 3.6) calc(var(--u) * 7.4) calc(var(--u) * 7.4) calc(var(--u) * 9.4) calc(var(--u) * 6.4) calc(var(--u) * 6.4); }
.sala-clasif.has-cur.is-even { --cols: calc(var(--u) * 4.8) calc(var(--u) * 5) minmax(0, 1fr) var(--zone, max-content) calc(var(--u) * 3.6) calc(var(--u) * 7.4) calc(var(--u) * 7.4) calc(var(--u) * 9.4) calc(var(--u) * 6.4) calc(var(--u) * 6.4); }
/* Clasificación: las columnas de números centradas y sin negrita (como una hoja de cálculo, que se lee de lejos sin
   que pesen) */
.sala-clasif .sala-row .won, .sala-clasif .sala-row .pts, .sala-clasif .sala-row .dif, .sala-clasif .sala-row .cur { text-align: center; }
.sala-clasif .sala-row .won, .sala-clasif .sala-row .pts, .sala-clasif .sala-row .dif, .sala-clasif .sala-row .cur, .sala-clasif .sala-row .nm, .sala-clasif .sala-row .zone { font-weight: 400; }
.sala-clasif .cur { text-align: center; }
.sala-clasif .sala-head .cur-head { grid-column: span 2; }
.sala-clasif .cur.is-first { padding-left: calc(var(--u) * 1); border-left: 1px solid var(--sala-line); }
.sala-clasif .sala-row .cur { color: var(--sala-tone); font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; font-size: calc(var(--u) * 1.75); }
.sala-clasif .sala-row .cur.is-none { color: var(--sala-dim); }
.sala-clasif .sala-head { font-size: calc(var(--u) * 1.15); color: var(--sala-muted); }
/* Puesto y pareja, como en los resultados (letra ancha en negrita, el tamaño de siempre); el resto de cifras, a 1,75 */
.sala-clasif .sala-row .won, .sala-clasif .sala-row .pts, .sala-clasif .sala-row .dif { font-size: calc(var(--u) * 1.75); }
.sala-clasif .sala-row .pts { color: var(--sala-ink); }
.sala-clasif .sala-row .nm { color: var(--sala-ink); font-size: calc(var(--u) * 1.6); padding-block: .12em; }
/* Filas de la altura justa de su letra (sin cambiar el tamaño): así caben 25 en la pantalla. */
.sala-clasif .sala-row > *, .sala-clasif .sala-row .sala-who > * { line-height: 1.2; }
.sala-clasif .sala-row .nm, .sala-clasif .sala-row .zone { padding-block: .08em; }
.sala-clasif .sala-row .zone { color: var(--sala-ink); font-size: calc(var(--u) * 1.4); padding-block: .12em; }
/* Todas en negro: quién ha jugado ya se ve en las columnas de la partida en curso (resultado o guion). */
.sala-clasif .sala-row.is-waiting > *, .sala-clasif .sala-row.is-waiting > .sala-who > * { opacity: 1; }
/* Navegadores antiguos (el de las teles, p. ej. Hisense): sin «subgrid», cada fila lleva sus propias columnas, de
   ancho fijo salvo los nombres, que reparten lo que sobra; así siguen alineadas de arriba abajo. Sin min(), la
   unidad sale del ancho (en una tele 16:9 es lo mismo). */
@supports not (grid-template-columns: subgrid) {
  .sala-board { width: 100%; }
  .sala-head, .sala-row { grid-template-columns: var(--cols); column-gap: calc(var(--u) * 2); }
  .sala-results, .sala-results.is-even { --cols: calc(var(--u) * 5.5) calc(var(--u) * 4.6) minmax(0, 1fr) calc(var(--u) * 13) calc(var(--u) * 4.6) minmax(0, 1fr); }
  .sala-clasif, .sala-clasif.is-even { --cols: calc(var(--u) * 4.8) calc(var(--u) * 5) minmax(0, 1fr) calc(var(--u) * 14) calc(var(--u) * 3.6) calc(var(--u) * 7.4) calc(var(--u) * 7.4) calc(var(--u) * 9.4); }
  .sala-clasif.has-cur, .sala-clasif.has-cur.is-even { --cols: calc(var(--u) * 4.8) calc(var(--u) * 5) minmax(0, 1fr) calc(var(--u) * 14) calc(var(--u) * 3.6) calc(var(--u) * 7.4) calc(var(--u) * 7.4) calc(var(--u) * 9.4) calc(var(--u) * 6.4) calc(var(--u) * 6.4); }
}
@supports not (width: min(1px, 2px)) {
  .sala { --u: 1vw; }
  .sala-board { --u: calc(1vw * var(--f, .62)); }
}
/* Arriba, bajo el título, solo los pasos de lo que se está viendo (las páginas de resultados o de la clasificación) */
.sala[data-kind="mesas"] .sala-steps span:not([data-kind="mesas"]), .sala[data-kind="result"] .sala-steps span:not([data-kind="result"]), .sala[data-kind="clasif"] .sala-steps span:not([data-kind="clasif"]) { display: none; }
.sala-steps { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .4); margin-top: calc(var(--u) * .5); }
.sala-steps:not(:has(span:not([hidden]))) { display: none; }
.sala-steps span { padding: calc(var(--u) * .15) calc(var(--u) * .7); border-radius: 99px; color: var(--sala-dim); font-size: calc(var(--u) * .9); font-weight: 800; white-space: nowrap; }
.sala-steps span.on { background: var(--sala-card-2); color: var(--sala-ink); }
/* La barra del tiempo de cada pantalla: la última línea, de lado a lado */
.sala-bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * .35); background: var(--sala-line); overflow: hidden; }
.sala-bar i { display: block; width: 100%; height: 100%; background: var(--sala-tone); transform-origin: left; transform: scaleX(0); }
@keyframes sala-page { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* El tema: dos iconos en la esquina de abajo a la derecha, por encima de todo (discretos hasta pasar el ratón) */
.sala-theme { position: absolute; right: calc(var(--u) * 1.4); bottom: calc(var(--u) * 1); z-index: 5; display: flex; gap: calc(var(--u) * .2); padding: calc(var(--u) * .2); border-radius: 99px; background: var(--sala-card); opacity: .55; transition: opacity .2s; }
.sala-theme:hover, .sala-theme:focus-within { opacity: 1; }
.sala-theme button { display: grid; place-items: center; width: calc(var(--u) * 2); height: calc(var(--u) * 2); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--sala-dim); font-size: calc(var(--u) * 1); }
.sala-theme button.on { background: var(--sala-ink); color: var(--sala-bg); }
/* «Acaba de terminar»: aviso grande unos segundos */
.sala-news { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 5.5); z-index: 5; display: flex; flex-direction: column; gap: calc(var(--u) * 1); width: fit-content; max-width: 80%; margin-inline: auto; }
.sala-news:empty { display: none; }
.sala-news__item { display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.1) calc(var(--u) * 2.2) calc(var(--u) * 1.1) calc(var(--u) * 1.1); border-radius: calc(var(--u) * 1.6); background: var(--sala-tone); color: var(--sala-on-tone); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, .55); animation: sala-news .6s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes sala-news { from { opacity: 0; transform: translateY(60%); } }
.sala-news .n { display: grid; place-items: center; flex: 0 0 auto; width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); border-radius: calc(var(--u) * 1.2); background: var(--sala-on-tone); color: var(--sala-tone); font-family: var(--app-display); font-variation-settings: "wdth" 125; font-size: calc(var(--u) * 3); font-weight: 800; }
.sala-news small { display: block; font-size: calc(var(--u) * 1); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.sala-news strong { display: block; font-size: calc(var(--u) * 1.9); }
@media (max-aspect-ratio: 1/1) { .sala-index__head, .sala-index__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sala-index__head span:nth-child(n + 5) { display: none; } .sala-top { grid-template-columns: minmax(0, 1fr) auto; } .sala-prog { display: none; } }
@media (prefers-reduced-motion: reduce) { .sala-scene, .sala-prog .cells i.is-new, .sala-news__item { animation: none; } }

/* --------------------------------------------------------------------------
   Impresos (imprimir.php): actas con QR, distribución de mesas, clasificación y acreditaciones
   -------------------------------------------------------------------------- */
.print-page { margin: 0; background: #fff; color: #1d1d1f; }
.print-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.2rem; background: #f5f5f7; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.print-bar a { color: #1d1d1f; text-decoration: none; font-weight: 650; }
.print-bar button { padding: .5rem 1.1rem; border: 0; border-radius: 999px; color: #fff; background: #1d1d1f; font-weight: 700; }
.print-empty { padding: 2rem; text-align: center; color: #6e6e73; }
/* Actas: una por hoja A5 vertical (148 × 210 mm, 6 mm de margen) con el orden de las de papel de siempre y el estilo
   de la app: marco redondeado, etiquetas pequeñas en mayúsculas, números en la letra de titulares y líneas grises
   finas donde se escribe a boli. Sin fondos (muchas impresoras no los imprimen). */
.acta { box-sizing: border-box; width: 136mm; height: 198mm; margin: 6mm auto; padding: 4.5mm 5mm; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 3mm; border: .4mm solid #1d1d1f; border-radius: 3mm; background: #fff; color: #1d1d1f; break-after: page; font-size: 9pt; }
.acta:last-of-type { break-after: auto; }
.acta small { display: block; color: #6e6e73; font-size: 6.5pt; font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.acta b { font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.acta__head { display: flex; align-items: center; gap: 3mm; padding-bottom: 2.5mm; border-bottom: .3mm solid #1d1d1f; }
.acta__logo { flex: 0 0 auto; width: 14mm; height: 14mm; object-fit: contain; }
.acta__name { flex: 1; min-width: 0; }
.acta__name strong { display: block; font-family: var(--app-display); font-variation-settings: "wdth" 125, "opsz" 144; font-size: 14pt; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.acta__qr { flex: 0 0 auto; width: 17mm; text-align: center; }
.acta__qr svg { display: block; width: 14mm; height: 14mm; margin: 0 auto; }
.acta__qr small { margin-top: .5mm; font-size: 5pt; letter-spacing: .02em; text-transform: none; font-weight: 600; }
.acta__what { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2mm; }
.acta__what.is-single { grid-template-columns: 1fr 1fr; }
.acta__what > div { display: flex; align-items: center; justify-content: space-between; padding: 1.6mm 2.6mm; border: .3mm solid #c7c7cc; border-radius: 2mm; }
.acta__what b { font-size: 15pt; }
.acta__what .is-mesa { border: .45mm solid #1d1d1f; }
.acta__what .is-mesa b { font-size: 19pt; }
.acta__body { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; min-height: 0; }
.acta__pair { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2mm; min-height: 0; }
.acta__num { display: flex; align-items: baseline; gap: 1.5mm; margin-bottom: 1mm; }
.acta__num b { font-size: 17pt; }
.acta__num span { margin-left: auto; color: #424245; font-size: 7.5pt; font-weight: 600; white-space: nowrap; }
.acta__who p { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9pt; line-height: 1.35; }
.acta__who p small { display: inline; margin-right: 1.2mm; font-size: 6.5pt; letter-spacing: .02em; }
.acta__hands { display: grid; grid-template-columns: 8mm 1fr 1fr; grid-template-rows: auto repeat(18, minmax(0, 1fr)); min-height: 0; border: .3mm solid #8e8e93; border-radius: 1.6mm; overflow: hidden; }
.acta__hands span { padding: 1mm 0; border-bottom: .3mm solid #1d1d1f; color: #424245; font-size: 6.5pt; font-weight: 700; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.acta__hands i { border-bottom: .2mm solid #d1d1d6; }
.acta__hands span:not(:nth-child(3n)), .acta__hands i:not(:nth-child(3n)) { border-right: .2mm solid #d1d1d6; }
.acta__hands i:nth-last-child(-n + 3) { border-bottom: 0; }
.acta__total { display: flex; align-items: center; gap: 2mm; }
.acta__total i { flex: 1; height: 8.5mm; border: .4mm solid #1d1d1f; border-radius: 1.6mm; }
.acta__foot { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 3mm; }
.acta__foot > div { height: 17mm; padding-top: .5mm; border-bottom: .3mm solid #1d1d1f; }
.acta__foot .is-win { padding: 1.5mm 2mm; border: .4mm solid #1d1d1f; border-radius: 2mm; text-align: center; }
.acta__foot .is-win small { color: #1d1d1f; }
.print-note { color: #6e6e73; font-size: .85rem; font-weight: 700; }
/* Acta en blanco: líneas para escribir el torneo, los jugadores, los PG y la diferencia */
.acta__line { display: block; height: 6mm; border-bottom: .2mm solid #8e8e93; }
.acta__head .acta__line { height: 7mm; }
.acta--blank .acta__head { min-height: 16mm; }
.acta--blank .acta__who p { display: flex; align-items: flex-end; gap: 1.2mm; overflow: visible; }
.acta--blank .acta__who p .acta__line { flex: 1; }
.acta__gap { display: inline-block; width: 8mm; height: 3mm; border-bottom: .2mm solid #8e8e93; }
.acta--blank .acta__what > div { min-height: 10mm; }
@media screen { .print-page:has(.acta) { background: #e8e8ed; } .acta { box-shadow: 0 1mm 4mm rgba(0, 0, 0, .15); } }
/* Clasificación en papel: la tabla de la pantalla de sala en claro, en hojas A4 (190 × 277 mm útiles, márgenes de
   10 mm). Mismas clases que la sala (.sala-board, .sala-row…) con una unidad fija en milímetros en vez de la pantalla. */
.paper-stack { display: grid; gap: 8mm; justify-content: center; margin: 8mm auto; }
.paper { --sala-bg: #fff; --sala-card: #fff; --sala-card-2: #e9e9ee; --sala-ink: #111; --sala-muted: #4a4a4f; --sala-dim: #6e6e73; --sala-faded: #a4a4a9; --sala-line: #dcdce1; --sala-tone: #285683; --sala-gold: #e7b94a; --sala-silver: #b9bec4; --sala-bronze: #cc8a5a; --sala-zebra: #eef3f9;
    box-sizing: border-box; width: 190mm; height: 277mm; display: flex; flex-direction: column; overflow: hidden; color: var(--sala-ink); background: #fff; }
@media screen { .print-page:has(.paper) { background: #e8e8ed; } .paper { padding: 0; outline: 10mm solid #fff; box-shadow: 0 0 0 10mm #fff, 0 1mm 6mm 10mm rgba(0, 0, 0, .12); margin: 10mm 0; } }
.paper__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 4mm; margin: 0 0 4mm; padding-bottom: 3mm; border-bottom: .4mm solid var(--sala-ink); }
.paper__head small { display: block; color: var(--sala-dim); font-size: 7.5pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.paper__head h1 { margin: 1mm 0 .5mm; font-family: var(--app-display); font-variation-settings: "wdth" 118, "opsz" 144; font-size: 22pt; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.paper__head p { margin: 0; color: var(--sala-muted); font-size: 10pt; font-weight: 600; }
.paper__head.is-small { margin-bottom: 3mm; padding-bottom: 1.5mm; border-bottom-width: .2mm; }
.paper__tag { flex: 0 0 auto; padding: 1mm 2.5mm; border-radius: 99px; background: #fbefdc; color: #a3520b; font-size: 8pt; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.paper__group { margin: 0 0 2mm; font-size: 11pt; font-weight: 800; }
.paper .sala-board { --u: 1.7mm; width: 100%; grid-template-rows: auto; grid-auto-rows: 6.4mm; row-gap: .35mm; column-gap: calc(var(--u) * 1.3); }
/* Columnas de números más justas que en la sala, para que quepan los nombres largos. */
.paper .sala-clasif.is-even.has-cur { --cols: calc(var(--u) * 4.2) calc(var(--u) * 4.4) minmax(0, 1fr) max-content calc(var(--u) * 3) calc(var(--u) * 5.6) calc(var(--u) * 5.6) calc(var(--u) * 6.4) calc(var(--u) * 5.2) calc(var(--u) * 5.2); }
.paper .sala-head { padding-bottom: 1mm; }
.paper .sala-row { break-inside: avoid; }
.paper .sala-index { --u: 1.7mm; --k: 2.3mm; padding: 0; grid-template-rows: auto auto; gap: 1.5mm; }
.paper .sala-index__head, .paper .sala-index__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 6mm; }
.paper .sala-index__head span { font-size: 7pt; }
.paper .sala-index__list { grid-template-rows: repeat(var(--rows), 7.2mm); }
.paper .sala-pl .mt.is-bye { font-size: 8pt; }
/* Lista de inscritos (imprimir.php?que=inscritos) */
.ins-sum { flex: 0 0 auto; color: var(--sala-muted); font-size: 8pt; line-height: 1.45; text-align: right; }
.ins-sum strong { color: var(--sala-ink); font-size: 10pt; }
.ins-table { width: 100%; border-collapse: collapse; color: var(--sala-ink); font-size: 8.3pt; }
.ins-table th { padding: 0 1.5mm 1.5mm; border-bottom: .3mm solid var(--sala-ink); color: var(--sala-dim); font-size: 6.5pt; font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.ins-table td { height: 5.4mm; padding: 0 1.5mm; border-bottom: .2mm solid var(--sala-line); vertical-align: middle; }
.ins-table tbody tr:nth-child(even) td { background: var(--sala-zebra); }
.ins-table .n { width: 9mm; font-family: var(--app-display); font-variation-settings: "wdth" 118; font-size: 10pt; font-weight: 800; }
.ins-table .who b { font-weight: 800; }
.ins-table .who span, .ins-table .z { color: var(--sala-muted); }
.paper__foot { display: flex; justify-content: space-between; gap: 4mm; margin-top: auto; padding-top: 2mm; color: var(--sala-dim); font-size: 7pt; font-weight: 600; }
@media screen { html:not(.is-painting) :is(.paper-stack, .print-cards, .acta) { zoom: var(--fit, 1); } }
@media print { .paper-stack { display: block; margin: 0; } .paper { margin: 0; break-after: page; } .paper:last-child { break-after: auto; } }
/* Acreditaciones: 90 × 60 mm exactos, pegadas y con esquinas rectas para cortarlas con guillotina (la línea fina de
   corte es un contorno que no ocupa sitio y se comparte entre vecinas); tres por fila en A4 apaisado: nueve por hoja
   (3 × 90 = 270 mm de los 285 útiles; 3 × 60 = 180 de 198). */
.print-cards { display: grid; grid-template-columns: repeat(3, 90mm); grid-auto-rows: 60mm; justify-content: center; gap: 0; margin: 6mm auto; }
.acred { box-sizing: border-box; position: relative; width: 90mm; height: 60mm; display: grid; grid-template-columns: minmax(0, 1fr) 25mm; border: 0; border-radius: 0; outline: .2mm solid #a1a1a6; outline-offset: -.1mm; background: #fff; color: #16171a; break-inside: avoid; overflow: hidden; }
.acred small { display: block; color: #7b7f87; font-size: 4.9pt; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.acred__main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; padding: 3.8mm 3.8mm 3.4mm 4.4mm; }
.acred__head { display: flex; align-items: center; gap: 2mm; min-width: 0; }
.acred__logo { flex: 0 0 auto; width: 7.5mm; height: 6.6mm; object-fit: contain; }
.acred__head div { min-width: 0; }
.acred__head small { font-size: 5pt; font-weight: 700; letter-spacing: .12em; }
.acred__head strong { display: block; overflow: hidden; font-family: var(--app-display); font-variation-settings: "wdth" 115, "opsz" 144; font-size: 8pt; font-weight: 800; letter-spacing: -.015em; line-height: 1.05; white-space: nowrap; text-overflow: ellipsis; }
/* El nombre en gris y los apellidos en seminegrita, en Oswald (alta y estrecha, con minúsculas), todas las acreditaciones
   con la misma letra (22 pt, o menos si el script del impreso ve que alguna no cabe ni abreviada). */
.acred__who { align-self: center; display: grid; justify-items: start; min-width: 0; width: 100%; }
.acred__who span { display: block; width: max-content; white-space: nowrap; font: 600 var(--acred-name, 22pt)/1.02 "Oswald", var(--app-display), sans-serif; }
.acred__who .acred__first { color: #7b7f87; font-weight: 400; }
.acred__fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 4mm; padding-top: 2mm; border-top: .2mm solid #c9ccd2; }
.acred__fields div { min-width: 0; }
.acred__fields p { margin: .5mm 0 0; overflow: hidden; font-size: 6.6pt; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
/* El resguardo: tras la línea de corte (con sus dos muescas), el número de pareja y la fecha, en azul muy claro. */
.acred__stub { position: relative; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 4mm 1.5mm 3.4mm; background: #eef3f9; border-left: .35mm dashed #aab4c2; }
.acred__stub::before, .acred__stub::after { content: ""; position: absolute; left: -2.3mm; width: 4.2mm; height: 4.2mm; border-radius: 50%; background: #fff; border: .2mm solid #a1a1a6; }
.acred__stub::before { top: -2.4mm; }
.acred__stub::after { bottom: -2.4mm; }
.acred__num { align-self: center; width: 22mm; color: #285683; font-family: var(--app-display); font-variation-settings: "wdth" 110, "opsz" 144; font-size: 25pt; font-weight: 800; letter-spacing: -.035em; line-height: .8; text-align: center; font-variant-numeric: tabular-nums; }
.acred__date { color: #3c3f45; font-size: 5.4pt; font-weight: 700; line-height: 1.35; text-align: center; }
.acred__date b { display: block; color: #16171a; font-family: var(--app-display); font-variation-settings: "wdth" 115, "opsz" 144; font-size: 11pt; font-weight: 800; letter-spacing: -.02em; }
@media screen { .print-page:has(.acred) { background: #e8e8ed; } }
.print-bar__actions { display: flex; align-items: center; gap: .6rem; }
.print-bar button.is-light, .pdf-dialog button.is-light { color: #1d1d1f; background: #e3e3e8; }
/* «Descargar en PDF»: nombre del archivo y, si se puede, añadirlo a los documentos del torneo. */
.pdf-dialog { width: min(30rem, calc(100vw - 2rem)); padding: 0; border: 0; border-radius: 1.2rem; color: #1d1d1f; background: #fff; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .3); }
.pdf-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.pdf-dialog form { display: grid; gap: 1rem; padding: 1.4rem; }
.pdf-dialog h2 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.pdf-dialog__field { display: grid; gap: .35rem; }
.pdf-dialog__field span { color: #6e6e73; font-size: .8rem; font-weight: 700; }
.pdf-dialog__field input { padding: .6rem .8rem; border: 1px solid #c7c7cc; border-radius: .7rem; font: inherit; }
.pdf-dialog__switch { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
.pdf-dialog__switch input { flex: 0 0 auto; width: 2.4rem; height: 1.4rem; margin-top: .1rem; appearance: none; border-radius: 99px; background: #d1d1d6; transition: background .2s; position: relative; cursor: pointer; }
.pdf-dialog__switch input::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.pdf-dialog__switch input:checked { background: #2b5d8f; }
.pdf-dialog__switch input:checked::after { transform: translateX(1rem); }
.pdf-dialog__switch input:focus-visible { outline: 2px solid #2b5d8f; outline-offset: 2px; }
.pdf-dialog__switch b { display: block; font-weight: 700; }
.pdf-dialog__switch small { display: block; color: #6e6e73; font-size: .85rem; }
.pdf-dialog__note { margin: 0; padding: .7rem .9rem; border-radius: .8rem; background: #f5f5f7; color: #424245; font-size: .88rem; }
.pdf-dialog__status { margin: 0; color: #424245; font-size: .9rem; font-weight: 600; }
.pdf-dialog__status[data-tone="ok"] { color: #1f7a3d; }
.pdf-dialog__status[data-tone="error"] { color: #c62828; }
.pdf-dialog__actions { display: flex; justify-content: flex-end; gap: .6rem; }
.pdf-dialog__actions button { padding: .55rem 1.2rem; border: 0; border-radius: 999px; color: #fff; background: #1d1d1f; font-weight: 700; }
.pdf-dialog__actions button:disabled { opacity: .6; }
@media (max-width: 600px) { .print-bar { flex-wrap: wrap; } .print-bar strong { display: none; } }
@page { margin: 6mm; }
@media print {
    .print-bar { display: none; }
    .acta { margin: 0 auto; }
    .print-cards { margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   Accesibilidad transversal: movimiento reducido, alto contraste y colores forzados
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (prefers-contrast: more) {
    :root { --app-muted: #45525c; --app-line: rgba(19, 32, 43, .3); --app-line-strong: rgba(19, 32, 43, .5); }
    .card, .row-item, .question, .proposal { border: 1px solid var(--app-line-strong); }
}
@media (forced-colors: active) {
    .card, .btn, .form-control, .row-item, .question, .proposal, .focus-card { border: 1px solid CanvasText; }
    .buddy { forced-color-adjust: none; }
}