@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --azul: #163A6B;
  --azul-claro: #3E6AA8;
  --azul-palido: #DCE6F4;
  --amarillo: #F4B400;
  --crema: #FAF6EC;
  --texto: #1B2430;
  --fondo: #FAF6EC;
  /* Estados (avisos, errores, ok) y superficies. */
  --blanco: #FFFFFF;
  --texto-suave: #5B6578;
  --error-fondo: #FDECEA;
  --error-texto: #A1302A;
  --error-fuerte: #C62828;
  --error-fila: #FFF7F6;
  --aviso-fondo: #FFF4D6;
  --aviso-texto: #7A5A00;
  --aviso-fila: #FFFCF2;
  --ok-fondo: #E6F4EA;
  --ok-texto: #1E7C34;
  --suite-fondo: #F3E8FD;
  --suite-texto: #6A2C9C;
  --borde-suave: rgba(22, 58, 107, 0.25);
  --negro: #000000;
  --error-campo: #B3261E;
  --error-campo-fondo: #FDF3F2;
  --texto-ayuda: #5B6574;
  --texto-secundario: #4A5462;
  --texto-oscuro: #3A4659;
  --gris-azulado: #5B6B85;
  --gris-fondo: #EEEAE0;
  --gris-credito: #A3A9B4;
  --gris-credito-hover: #7C8492;
  --arena: #EDE6D3;
  --crema-claro: #FDFBF5;
  --azul-hover: #D3DFF0;
  --texto-sobre-oscuro: #E8EEF8;
  --borde-campo: #C9D3E3;
  --campo-bloqueado: #F1EFE8;
  --info-fondo: #E8F0FE;
  --info-texto: #1A4D99;
  --advertencia-fondo: #FFF8E1;
  --advertencia-texto: #8A6D00;
  --aviso-suave: #FFF6D6;
  --aviso-texto-oscuro: #6B4F00;
  --plazo-texto: #5A4300;
  --whatsapp: #25D366;
  /* Los mismos colores en "r, g, b" para usarlos con transparencia:
     rgba(var(--azul-rgb), 0.15). */
  --azul-rgb: 22, 58, 107;
  --crema-rgb: 250, 246, 236;
  --negro-rgb: 0, 0, 0;
  --gris-credito-rgb: 163, 169, 180;
  --noche-rgb: 8, 18, 36;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Work Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  background: var(--fondo);
  overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Fraunces', serif; }

/* ---------------------------------------------------------------------- */
/* Header + nav con submenús (En Vivo, Estadísticas, Info)                */
/* ---------------------------------------------------------------------- */

.site-header {
  background: var(--azul);
  padding: 0.9rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--crema);
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.brand-mark svg { display: block; }

/* Escudo real de la FVA (versión blanca, sobre el azul del header).
   width/height en el <img> son las medidas reales del PNG (200x240) para
   que el navegador reserve el espacio; acá se fija el alto visible y el
   ancho se calcula solo, sin deformar. */
.brand-logo {
  height: 4.5rem;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.brand-text { line-height: 1.1; }
.brand-text .brand-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 0.95rem; }
.brand-text .brand-subtitle {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--azul-palido);
  font-weight: 600;
  text-transform: uppercase;
}

.site-nav > ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  align-items: center;
}

/* Bug real (2026-09-21): ".site-nav ul" (descendiente, sin ">") también
   aplicaba display:flex a los <ul class="dropdown-menu"> anidados, y con
   igual especificidad que ".dropdown-menu { display:none }" ganaba por
   venir después en la hoja — los tres desplegables quedaban siempre
   abiertos. Fix: escopado a hijos directos con ">" arriba. */

.site-nav > ul > li { position: relative; }

.site-nav a,
.site-nav > ul > li > span {
  color: var(--crema);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.site-nav > ul > li > span {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.site-nav a.active {
  border-bottom: 2px solid var(--amarillo);
  padding-bottom: 4px;
}

.site-nav a:hover,
.site-nav .dropdown.open > span {
  color: var(--amarillo);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.6rem;
  background: var(--blanco);
  min-width: 190px;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(var(--azul-rgb), 0.22);
  z-index: 30;
  flex-direction: column;
  gap: 0.65rem;
}

.dropdown-menu.dropdown-menu-wide {
  min-width: 260px;
  left: auto;
  right: 0;
}

/* Enlaces de los desplegables. "li a" les da más especificidad (0,2,2) que
   ".site-nav a", ".site-nav a:hover" y ".site-nav a.active" (0,2,1): quedan
   azules sobre el fondo blanco, también al pasar el mouse, sin !important. */
.site-nav .dropdown-menu li a {
  color: var(--azul);
  font-weight: 500;
  font-size: 0.88rem;
}

/* Bug real (2026-09-21, reportado por Jose): con :hover/:focus-within el
   desplegable se cerraba al intentar mover el mouse desde el item del
   navbar hasta las opciones (el cursor sale del área ".dropdown" en el
   trayecto). Fix pedido explícitamente: abrir solo con click (toggle vía
   clase ".open" puesta por app/static/js/nav.js) y cerrar al hacer click
   fuera o con Escape — ver nav.js. */
.dropdown.open > .dropdown-menu {
  display: flex;
}

.cta-button {
  background: var(--crema);
  color: var(--azul);
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.cta-button:hover { background: var(--amarillo); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ---------------------------------------------------------------------- */
/* Redes sociales (navbar + footer) y botón flotante de WhatsApp          */
/* ---------------------------------------------------------------------- */
/* Mismo patrón de la Olimpiada de FIDE (chessolympiad2026.fide.com):
   iconos circulares chicos justo antes del botón de acción del navbar —
   confirmado mirando el sitio real (ahí son YouTube/Instagram/X/Facebook;
   acá van Facebook/Instagram/TikTok/YouTube a pedido de Jose). Enlaces
   placeholder ("#") hasta tener los perfiles oficiales reales — ver
   `_social_icons.html`. */

.social-icons {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.social-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-header .social-icon {
  background: rgba(var(--crema-rgb), 0.14);
  color: var(--crema);
}
.site-header .social-icon:hover { background: var(--amarillo); color: var(--azul); }

.site-footer .social-icon {
  background: var(--azul);
  color: var(--crema);
}
.site-footer .social-icon:hover { background: var(--amarillo); color: var(--azul); }

.footer-social {
  display: flex;
  justify-content: center;
  margin-bottom: 1.4rem;
}

.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(var(--negro-rgb), 0.28);
  z-index: 200;
  transition: transform 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }

/* Botón "volver arriba": encima del de WhatsApp, aparece al bajar
   (subir.js agrega .visible pasados ~400 px de scroll). */
.subir-float {
  position: fixed;
  right: 29px;
  bottom: 94px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--azul);
  color: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(var(--negro-rgb), 0.25);
  z-index: 200;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.subir-float[hidden] { display: none; }
.subir-float.visible { opacity: 1; transform: none; pointer-events: auto; }
.subir-float:hover { background: var(--azul-claro); }
.subir-float:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* ---------------------------------------------------------------------- */
/* Hero (portada)                                                          */
/* ---------------------------------------------------------------------- */

.hero {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  padding: 3rem 2rem 1rem 2rem;
  align-items: flex-start;
}

.hero-left {
  flex: 1 1 460px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.hero-title {
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  line-height: 1.06;
  font-weight: 600;
  color: var(--azul);
  margin: 0;
}

.hero-title .accent { color: var(--azul-claro); }

.hero-meta {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.hero-meta .categorias {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--azul-claro);
}

.hero-meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amarillo);
  flex: none;
}

.hero-meta .federacion { font-size: 1.1rem; color: var(--azul); }

.hero-rule {
  margin-top: 1.1rem;
  height: 4px;
  width: 84px;
  background: var(--amarillo);
  border-radius: 2px;
}

.hero-fechas {
  margin-top: 1.1rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--azul);
}

.hero-sede {
  margin-top: 0.2rem;
  font-size: 0.95rem;
  color: var(--azul-claro);
}

/* Banner oficial del Mundial (1600x593). Se muestra completo, sin recortar,
   porque trae texto (fechas, sede, logos) en ambos extremos. */
.hero-photo {
  width: 100%;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--azul-palido) 0%, var(--arena) 100%);
  border: 1px solid rgba(var(--azul-rgb), 0.15);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-photo img { display: block; width: 100%; height: auto; }

.hero-photo .hero-photo-label {
  position: absolute;
  bottom: 16px;
  left: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--azul);
  opacity: 0.65;
}

/* Mosaico animado de piezas */

.piece-mosaic {
  flex: 1 1 360px;
  min-width: 280px;
  /* "height" a propósito, no "min-height": las filas "fr" del grid solo se
     reparten en proporción cuando el contenedor tiene una altura DEFINIDA;
     con min-height nada más, la fila 1 (peón + tablero, sin contenido alto)
     colapsaba a ~0 y esos íconos quedaban invisibles, mientras que las filas
     2-3 (con el rey/caballo, altos) sí se veían — bug real encontrado al
     revisar la captura de pantalla, no visible con solo leer el CSS. */
  height: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  grid-template-rows: 0.85fr 1fr 1fr;
  grid-template-areas: "pawn pawn check" "king diamond knight" "king rook knight";
  gap: 10px;
}

.piece-mosaic .cell {
  background: var(--azul-palido);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.piece-mosaic .cell-pawn { grid-area: pawn; }
.piece-mosaic .cell-check {
  grid-area: check;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  /* Bug real (2026-09-21): ".cell" define "align-items:center" pensado
     para su layout flex (icono centrado). Ese "align-items" no se resetea
     solo porque acá cambiamos "display" a grid, y en un grid
     "align-items:center" hace que cada celda se dimensione a su
     CONTENIDO (0×0, porque los ".check-sq" están vacíos) y la centre
     dentro del track — el ancho salía bien porque "justify-items"
     (eje columna) sí quedaba en su default "stretch", pero el alto
     colapsaba a 0. Fix: forzar stretch en ambos ejes para este grid. */
  align-items: stretch;
  justify-items: stretch;
}
.piece-mosaic .cell-king { grid-area: king; }
.piece-mosaic .cell-diamond { grid-area: diamond; }
.piece-mosaic .cell-rook { grid-area: rook; }
.piece-mosaic .cell-knight { grid-area: knight; }

.piece-mosaic .check-sq { background: var(--azul); }
.piece-mosaic .check-sq.off { background: transparent; }

.piece-mosaic .diamond-shape {
  width: 46px;
  height: 46px;
  background: var(--amarillo);
  transform: rotate(45deg);
  border-radius: 6px;
}

@keyframes fva-shift-a { 0%,100% { transform: translate(0,0) rotate(0deg); } 33% { transform: translate(7px,-6px) rotate(-4deg); } 66% { transform: translate(-6px,4px) rotate(3deg); } }
@keyframes fva-shift-b { 0%,100% { transform: translate(0,0) rotate(0deg); } 33% { transform: translate(-8px,5px) rotate(3deg); } 66% { transform: translate(5px,-5px) rotate(-3deg); } }
@keyframes fva-shift-c { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(4px,6px) scale(1.04); } 66% { transform: translate(-5px,-4px) scale(0.97); } }
/* Bug real (2026-09-21): una animación CSS reemplaza por completo el valor
   de "transform" del elemento mientras corre — no lo compone con el
   "transform: rotate(45deg)" estático de ".diamond-shape" — así que el
   diamante se veía como cuadrado (0deg) apenas arrancaba la animación.
   Fix: hornear los +45° base dentro de cada keyframe. */
@keyframes fva-shift-d { 0%,100% { transform: translate(0,0) rotate(45deg); } 33% { transform: translate(-5px,-6px) rotate(51deg); } 66% { transform: translate(6px,5px) rotate(39deg); } }

.fva-piece { animation-duration: 9s; animation-timing-function: steps(3, end); animation-iteration-count: infinite; }
.fva-p1 { animation-name: fva-shift-a; }
.fva-p2 { animation-name: fva-shift-b; }
.fva-p3 { animation-name: fva-shift-c; }
.fva-p4 { animation-name: fva-shift-d; }
.fva-p5 { animation-name: fva-shift-b; }
.fva-p6 { animation-name: fva-shift-a; }

@media (prefers-reduced-motion: reduce) {
  .fva-piece { animation: none; }
}

.hero-note {
  padding: 0.5rem 2rem 2rem 2rem;
  font-size: 0.78rem;
  color: var(--azul-claro);
}

/* ---------------------------------------------------------------------- */
/* Secciones de portada pendientes de contenido real (2026-09-21)         */
/* ---------------------------------------------------------------------- */
/* Todas las secciones nuevas de home.html (En Vivo, Sobre el Mundial,
   Calendario, Noticias, franja de patrocinadores) siguen el mismo patrón
   visual que ya usaba el placeholder de la foto de la sede: una caja con
   degradé azul-pálido/crema, borde suave, y una nota en azul de qué falta
   ahí — así se ve intencional (parte del diseño) mientras no hay contenido
   real, en vez de un hueco en blanco o un error. */

.pending-box {
  background: linear-gradient(135deg, var(--azul-palido) 0%, var(--arena) 100%);
  border: 1px solid rgba(var(--azul-rgb), 0.15);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 2rem 1.5rem;
  color: var(--azul);
}

.pending-note {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--azul);
  opacity: 0.65;
  max-width: 460px;
}

.section-divider {
  height: 1px;
  background: var(--azul-palido);
  margin: 0 2rem;
}

.section { padding: 3rem 2rem; }
.section-inner { max-width: 1100px; margin: 0 auto; }

.section-title {
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--azul);
  margin: 0 0 1.4rem 0;
}

/* En Vivo — embed de YouTube */
.embed-box { max-width: 860px; margin: 0 auto; aspect-ratio: 16 / 9; }
.embed-box svg { opacity: 0.55; }
.video-box { max-width: 860px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
  background: var(--negro); box-shadow: 0 10px 30px rgba(var(--azul-rgb), 0.18); }
.video-box iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Sobre el Mundial — descripción del evento + reseña de la sede */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.about-col h2 { margin-bottom: 0.9rem; }
.about-col .pending-note {
  max-width: none;
  text-align: left;
  opacity: 0.85;
  font-size: 0.92rem;
  font-weight: 500;
}

/* Textos de "Sobre el Mundial" y de la sede */
.about-col p { line-height: 1.65; margin: 0 0 1rem 0; }
.about-link {
  display: inline-block;
  margin-top: 0.3rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--azul);
  text-decoration: none;
  border-bottom: 2px solid var(--amarillo);
}
.about-link:hover { color: var(--azul-claro); }

/* Calendario de la portada: una card por día (datos en app/programa.py).
   El color del borde superior dice qué pasa ese día: azul = ronda,
   amarillo = ceremonia, azul pálido = llegada/salida, punteado = libre. */
.schedule-days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.schedule-day {
  background: var(--blanco);
  border: 1px solid rgba(var(--azul-rgb), 0.15);
  border-top: 5px solid var(--azul);
  border-radius: 14px;
  padding: 1rem 1rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.schedule-day.tipo-ceremonia { border-top-color: var(--amarillo); }
.schedule-day.tipo-llegada { border-top-color: var(--azul-palido); background: var(--crema-claro); }
.schedule-day.tipo-libre { border-top-style: dashed; border-top-color: var(--azul-claro); background: transparent; }
.schedule-date { display: flex; align-items: center; gap: 0.6rem; }
.schedule-num {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--azul);
}
.schedule-wd {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-claro);
  line-height: 1.3;
}
.schedule-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.schedule-events li { display: flex; flex-direction: column; }
.schedule-time { font-size: 0.75rem; font-weight: 700; color: var(--azul-claro); }
.schedule-what { font-size: 0.92rem; font-weight: 600; color: var(--texto); }
.section-note-global a { color: var(--azul); font-weight: 700; }

.section-note-global {
  margin-top: 1.2rem;
  font-size: 0.8rem;
  color: var(--azul-claro);
  text-align: center;
}

/* Noticias */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
}
.news-card { min-height: 190px; }
.news-card svg { opacity: 0.5; }
.news-card-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1rem; }

/* Franja de patrocinantes (antes del footer). Fila quieta y centrada si
   los logos caben; si no, patrocinantes.js agrega .is-marquee y la fila se
   mueve de izquierda a derecha en bucle. El espacio entre logos es padding
   de cada <li> (no "gap") para que las dos copias de la marquesina midan
   exactamente igual y el bucle no tenga salto. */
.sponsors {
  padding: 2.2rem 0 2rem 0;
  border-top: 1px solid var(--azul-palido);
  text-align: center;
}
.sponsors-title {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul-claro);
  margin: 0 0 1.4rem 0;
}
.sponsors-viewport { overflow: hidden; padding: 0 2rem; }
.sponsors-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sponsor { flex: none; padding: 0 1.75rem; }
.sponsor img { display: block; height: 80px; width: auto; }
.sponsor a { display: block; }

.sponsors-viewport.is-marquee {
  padding: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--negro) 6%, var(--negro) 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--negro) 6%, var(--negro) 94%, transparent);
}
.is-marquee .sponsors-track {
  justify-content: flex-start;
  width: max-content;
  animation: sponsors-derecha var(--sponsors-duracion, 30s) linear infinite;
}
.is-marquee:hover .sponsors-track { animation-play-state: paused; }

@keyframes sponsors-derecha {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .is-marquee .sponsors-track { animation: none; transform: none; }
  .sponsors-viewport.is-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* Footer — redes + copyright */
.site-footer { padding: 2.5rem 2rem 2rem 2rem; text-align: center; }
.footer-copy { color: var(--azul-claro); font-size: 0.85rem; margin: 0; }

@media (max-width: 640px) {
  .site-header { padding: 0.8rem 1.2rem; }
  .brand-logo { height: 3.5rem; }
  .hero { padding: 2rem 1.2rem 0.5rem 1.2rem; gap: 2rem; }
  .piece-mosaic { height: 260px; }

  /* Bug real (2026-09-21, reportado por Jose): en pantallas angostas el
     navbar hace flex-wrap y "Info" puede terminar cerca del borde
     izquierdo; su desplegable ancho seguía anclado con "right:0" (pensado
     para cuando Info está pegado a la derecha en desktop), así que el
     menú de 260px se salía por la izquierda de la pantalla y quedaba
     invisible. Fix: en este breakpoint el desplegable deja de ser
     absolute y pasa a fluir en el documento (ancho acotado a la
     ventana), así nunca puede quedar fuera de pantalla sin importar en
     qué línea haya envuelto el item. */
  .dropdown-menu {
    position: static;
    width: max-content;
    max-width: calc(100vw - 2.4rem);
    margin-top: 0.5rem;
    margin-bottom: 0.4rem;
  }

  .dropdown-menu.dropdown-menu-wide {
    left: auto;
    right: auto;
    min-width: 0;
  }

  .section { padding: 2rem 1.2rem; }
  .section-divider { margin: 0 1.2rem; }
  .about-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .sponsors-viewport { padding: 0 1.2rem; }
  .sponsor { padding: 0 1.2rem; }
  .sponsor img { height: 56px; }

  .whatsapp-float { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .subir-float { right: 18px; bottom: 78px; }
}

/* ---------------------------------------------------------------------- */
/* Resto del sitio                                                        */
/* ---------------------------------------------------------------------- */

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.site-footer {
  text-align: center;
  color: var(--azul-claro);
  font-size: 0.85rem;
  padding: 2rem 1rem;
}

.form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 320px; }
.form label { font-weight: 600; margin-top: 0.5rem; }
.form input { padding: 0.5rem; font-size: 1rem; }
.form button {
  margin-top: 1rem;
  padding: 0.6rem;
  background: var(--azul);
  color: var(--crema);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.flashes { list-style: none; padding: 0; }
.flash { padding: 0.6rem 1rem; margin-bottom: 0.5rem; border-radius: 4px; }
.flash-error { background: var(--error-fondo); color: var(--error-texto); }
.flash-warning { background: var(--advertencia-fondo); color: var(--advertencia-texto); }
.flash-info { background: var(--info-fondo); color: var(--info-texto); }
.flash-success { background: var(--ok-fondo); color: var(--ok-texto); }

/* Página de Sede */
.hero-sede a { color: inherit; text-decoration-color: var(--amarillo); text-underline-offset: 3px; }
.sede-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: start; }
.sede-lead { font-size: 1.1rem; line-height: 1.55; color: var(--azul); margin: 0 0 1.4rem 0; }
.sede-datos { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.2rem; margin: 0 0 1.6rem 0; }
.sede-datos dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--azul-claro); padding-top: 0.15rem; }
.sede-datos dd { margin: 0; color: var(--texto); }
.sede-mapa-link {
  display: inline-block;
  background: var(--azul);
  color: var(--crema);
  border-radius: 999px;
  padding: 0.65rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.sede-mapa-link:hover { background: var(--amarillo); color: var(--azul); }
.sede-pendiente { text-align: left; margin-top: 1.6rem; }
.sede-mapa { border-radius: 20px; overflow: hidden; border: 1px solid rgba(var(--azul-rgb), 0.15); aspect-ratio: 4 / 3; background: var(--azul-palido); }
.sede-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 760px) {
  .sede-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Páginas de contenido (Programa, Reglamento)                            */
/* ---------------------------------------------------------------------- */
.page-title { font-size: 2.1rem; font-weight: 600; color: var(--azul); margin: 0.5rem 0 0.8rem 0; }
.page-lead { font-size: 1.05rem; line-height: 1.6; color: var(--azul); margin: 0 0 1.6rem 0; }
.page-nota { margin-top: 2.4rem; font-size: 0.88rem; color: var(--azul-claro); }
.page-nota a, .info-bloque a { color: var(--azul); }

.info-bloque { margin-top: 2.2rem; }
.info-bloque h2 { font-size: 1.3rem; font-weight: 600; color: var(--azul); margin: 0 0 0.7rem 0; }
.info-bloque p, .info-bloque li { line-height: 1.6; }
.info-bloque ul, .info-bloque ol { padding-left: 1.2rem; margin: 0; }
.info-bloque li + li { margin-top: 0.4rem; }

.tabla-simple { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-bottom: 0.8rem; }
.tabla-simple th, .tabla-simple td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--azul-palido); }
.tabla-simple th { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--azul-claro); }

.programa-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--azul-palido); }
.programa-dia {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0 1rem 0.9rem;
  border-bottom: 1px solid var(--azul-palido);
  border-left: 4px solid var(--azul);
}
.programa-dia.tipo-ceremonia { border-left-color: var(--amarillo); }
.programa-dia.tipo-llegada { border-left-color: var(--azul-palido); }
.programa-dia.tipo-libre { border-left-style: dashed; border-left-color: var(--azul-claro); }
.programa-fecha { display: flex; align-items: center; gap: 0.6rem; }
.programa-num { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--azul); }
.programa-wd { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--azul-claro); line-height: 1.3; }
.programa-eventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; justify-content: center; }
.programa-eventos li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.6rem; }
.programa-hora { font-weight: 700; color: var(--azul-claro); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .schedule-days { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .schedule-num { font-size: 1.8rem; }
  .programa-dia { grid-template-columns: 1fr; gap: 0.5rem; }
  .programa-eventos li { grid-template-columns: 5.5rem 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Registro de delegaciones (portal público y panel admin)                */
/* ---------------------------------------------------------------------- */
.container-ancho { max-width: 1100px; }
.container-planilla { max-width: 1480px; }  /* room list: planilla + lista de federaciones */

.tarjetas-registro { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin: 1.5rem 0; }
.tarjeta-registro { background: var(--blanco); border: 1px solid rgba(var(--azul-rgb), 0.15); border-radius: 16px; padding: 1.4rem; }
.tarjeta-registro h2 { margin: 0 0 0.6rem 0; color: var(--azul); font-size: 1.25rem; }
.tarjeta-registro p { line-height: 1.55; }

.form-registro { display: flex; flex-direction: column; gap: 1.2rem; }
.bloque { border: 1px solid rgba(var(--azul-rgb), 0.15); border-radius: 14px; padding: 1rem 1.2rem 1.2rem 1.2rem; margin: 0; background: var(--blanco); }
.bloque[hidden] { display: none; }
.bloque legend { font-family: 'Fraunces', serif; font-weight: 600; color: var(--azul); padding: 0 0.4rem; }
.grid-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem 1.2rem; }
.campo { display: flex; flex-direction: column; gap: 0.3rem; }
.campo label { display: flex; flex-direction: column; font-size: 0.85rem; }
.campo-en { font-weight: 600; color: var(--texto); }
.campo-es { font-size: 0.75rem; color: var(--azul-claro); font-weight: 500; }
.req { color: var(--error-campo); }
.campo input[type=text], .campo input[type=email], .campo input[type=tel], .campo input[type=date],
.campo input[type=datetime-local], .campo select, .revision-form textarea, .zona-peligro input[type=text] {
  font: inherit; font-size: 0.95rem; padding: 0.55rem 0.65rem; border: 1px solid rgba(var(--azul-rgb), 0.3);
  border-radius: 8px; background: var(--blanco); color: var(--texto); width: 100%;
}
.campo input:focus, .campo select:focus, .revision-form textarea:focus { outline: 2px solid var(--azul-claro); outline-offset: 1px; }
.campo-ayuda { font-size: 0.75rem; color: var(--texto-ayuda); line-height: 1.4; }
.campo-error input, .campo-error select { border-color: var(--error-campo); background: var(--error-campo-fondo); }
.campo-msg { color: var(--error-campo); font-size: 0.8rem; font-weight: 600; }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; }
.check input { margin-top: 0.25rem; }
.campo label.check { flex-direction: row; }
.archivo-actual { margin: 0; font-size: 0.85rem; color: var(--ok-texto); font-weight: 600; }

.boton { align-self: flex-start; border: none; cursor: pointer; font: inherit; }
.boton-sec { display: inline-block; font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.45rem 0.9rem;
  border-radius: 999px; border: 1px solid var(--azul); background: var(--blanco); color: var(--azul); cursor: pointer; text-decoration: none; }
.boton-sec:hover { background: var(--azul-palido); }
.boton-link { background: none; border: none; padding: 0; font: inherit; color: var(--error-campo); cursor: pointer; text-decoration: underline; }
.boton-ok { background: var(--ok-texto); color: var(--blanco); border-radius: 999px; padding: 0.6rem 1.2rem; font-weight: 700; }
.boton-aviso { background: var(--amarillo); color: var(--azul); border-radius: 999px; padding: 0.6rem 1.2rem; font-weight: 700; }
.boton-peligro { background: var(--error-campo); color: var(--blanco); border-radius: 999px; padding: 0.6rem 1.2rem; font-weight: 700; }
.boton-enviar { background: var(--ok-texto); }

.fide-fila { display: flex; gap: 0.5rem; }
.fide-fila input { flex: 1; }
.fide-resultado { margin-top: 0.4rem; padding: 0.6rem 0.8rem; border-radius: 8px; background: var(--azul-palido); font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.fide-resultado.fide-no { background: var(--error-fondo); color: var(--error-texto); }
.fide-datos { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; color: var(--azul); }

.enlace-privado { word-break: break-all; background: var(--azul-palido); padding: 0.8rem 1rem; border-radius: 10px; font-size: 0.95rem; }

.portal-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.portal-sub { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--azul-claro); }
.portal-acciones { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin: 1.4rem 0; }
.portal-acciones form { margin: 0; }

.estado { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--azul-palido); color: var(--azul); white-space: nowrap; }
.estado-aprobada { background: var(--ok-fondo); color: var(--ok-texto); }
.estado-cambios, .estado-modificada, .estado-importada { background: var(--aviso-fondo); color: var(--aviso-texto); }
.estado-rechazada { background: var(--error-fondo); color: var(--error-texto); }
.estado-enviada { background: var(--info-fondo); color: var(--info-texto); }

.tabla-scroll { overflow-x: auto; }
.tabla-registro td { vertical-align: top; }
.tabla-registro small { color: var(--texto-ayuda); }
.acciones { white-space: nowrap; }
.acciones form { display: inline; margin-left: 0.6rem; }
.pendiente { color: var(--aviso-texto); font-size: 0.85rem; }
.completo { color: var(--ok-texto); font-weight: 600; font-size: 0.85rem; }
.badge { display: inline-block; min-width: 1.6rem; text-align: center; padding: 0.1rem 0.45rem; border-radius: 999px; font-weight: 700; font-size: 0.8rem; }
.badge-error { background: var(--error-fondo); color: var(--error-texto); }
.badge-aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }

.admin-nav { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; padding: 0.7rem 1rem; margin-bottom: 1.4rem;
  background: var(--azul-palido); border-radius: 12px; font-size: 0.9rem; font-weight: 600; }
.admin-nav a { color: var(--azul); }
.admin-nav-user { margin-left: auto; font-weight: 500; color: var(--texto-ayuda); }

.filtro { display: flex; gap: 0.6rem; align-items: center; margin: 1rem 0; }
.filtro select { font: inherit; padding: 0.35rem 0.5rem; border-radius: 8px; }

.avisos { list-style: none; padding: 0; margin: 0.8rem 0; display: flex; flex-direction: column; gap: 0.35rem; }
.avisos li, .aviso-aviso, .aviso-error { font-size: 0.85rem; padding: 0.4rem 0.7rem; border-radius: 8px; }
.aviso-aviso { background: var(--aviso-fondo); color: var(--aviso-texto-oscuro); }
.aviso-error { background: var(--error-fondo); color: var(--error-texto); font-weight: 600; }

.revision { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; margin: 1.2rem 0 2rem 0; }
.revision-form { display: flex; flex-direction: column; gap: 0.6rem; background: var(--blanco); border: 1px solid rgba(var(--azul-rgb), 0.15); border-radius: 14px; padding: 1rem; margin: 0; }
.revision-form label { font-size: 0.85rem; font-weight: 600; }
.revision-botones { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }

.ficha { background: var(--blanco); border: 1px solid rgba(var(--azul-rgb), 0.15); border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.ficha-cabecera { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.ficha-cabecera h3 { margin: 0; color: var(--azul); }
.ficha-cabecera p { margin: 0.2rem 0 0 0; font-size: 0.9rem; }
.ficha-acciones { display: flex; gap: 0.8rem; align-items: center; }
.ficha-acciones form { margin: 0; }
.ficha-fide { margin: 0.7rem 0; padding: 0.5rem 0.7rem; background: var(--azul-palido); border-radius: 8px; font-size: 0.85rem; }
.en-linea { display: inline; margin-left: 0.5rem; }
.ficha-datos { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; margin: 0.6rem 0; font-size: 0.88rem; }
.ficha-datos dt { font-weight: 700; color: var(--azul-claro); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 0.15rem; }
.ficha-datos dd { margin: 0; }

.zona-peligro { margin-top: 2.5rem; padding: 1rem; border: 1px dashed var(--error-campo); border-radius: 12px; }
.zona-peligro summary { cursor: pointer; color: var(--error-campo); font-weight: 700; }
.zona-peligro form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; max-width: 420px; }

@media (max-width: 760px) {
  .revision { grid-template-columns: 1fr; }
  .ficha-datos { grid-template-columns: 1fr; }
  .ficha-datos dt { padding-top: 0.5rem; }
}

/* Tabla del portal como tarjetas en móvil (sin desplazamiento lateral). */
@media (max-width: 640px) {
  .tabla-tarjetas thead { display: none; }
  .tabla-tarjetas tr { display: block; border: 1px solid rgba(var(--azul-rgb), 0.15); border-radius: 12px; padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; background: var(--blanco); }
  .tabla-tarjetas td { display: flex; gap: 0.8rem; border: none; padding: 0.25rem 0; }
  .tabla-tarjetas td[data-label]::before { content: attr(data-label); flex: 0 0 5.5rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--azul-claro); padding-top: 0.15rem; }
  .tabla-tarjetas td.acciones { padding-top: 0.5rem; }
}

/* ---------------------------------------------------------------------- */
/* Noticias (copiadas del WordPress de fva.org.ve, etiqueta mundial-sub20) */
/* ---------------------------------------------------------------------- */
.noticia-card { display: flex; flex-direction: column; background: var(--blanco); border: 1px solid rgba(var(--azul-rgb), 0.15);
  border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--texto); transition: box-shadow 0.15s ease, transform 0.15s ease; }
.noticia-card:hover { box-shadow: 0 10px 24px rgba(var(--azul-rgb), 0.15); transform: translateY(-2px); }
.noticia-card-img { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--azul-palido) 0%, var(--arena) 100%); }
.noticia-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.noticia-card-texto { padding: 1rem 1.1rem 1.2rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.noticia-card-texto h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; color: var(--azul);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.noticia-card-texto p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--texto-secundario);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.noticia-fecha { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--azul-claro); }
.noticia-portada { width: 100%; height: auto; border-radius: 16px; margin: 0.5rem 0 1.5rem 0; display: block; }
.noticias-mas { margin-top: 3rem; }

/* Cuerpo del post: los bloques de WordPress (figure, galería, citas) sin el
   CSS del tema original (mismo criterio que en fva/). */
.noticia-cuerpo { font-size: 1.02rem; line-height: 1.7; }
.noticia-cuerpo p { margin: 0 0 1.1rem 0; }
.noticia-cuerpo img { max-width: 100%; height: auto; display: block; border-radius: 10px; }
.noticia-cuerpo figure { margin: 0 0 1.1rem 0; }
.noticia-cuerpo figcaption { font-size: 0.85rem; color: var(--texto-ayuda); margin-top: 0.4rem; text-align: center; }
.noticia-cuerpo blockquote { margin: 0 0 1.1rem 0; padding: 0.25rem 0 0.25rem 1.1rem; border-left: 3px solid var(--amarillo); font-style: italic; color: var(--texto-secundario); }
.noticia-cuerpo .wp-block-gallery { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.noticia-cuerpo .wp-block-gallery figure { flex: 1 1 240px; margin: 0; }
.noticia-cuerpo iframe { max-width: 100%; }
.noticia-cuerpo a { color: var(--azul); }
/* auto-fill (no auto-fit): con una o dos noticias las tarjetas mantienen su
   ancho de columna en vez de estirarse a todo el ancho. */
.noticias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }

/* Banderas (app/static/img/banderas/<código FIDE>.svg) */
.bandera { width: 1.6rem; height: 1.2rem; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(var(--negro-rgb), 0.12); flex: none; vertical-align: middle; }
.bandera-grande { width: 2.6rem; height: 1.95rem; margin-right: 0.7rem; }
.bandera-vacia { display: inline-block; background: var(--azul-palido); }
.con-bandera { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
td.con-bandera { display: table-cell; }
td.con-bandera .bandera { margin-right: 0.45rem; }
.lista-federaciones { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }
.lista-federaciones li { display: flex; align-items: center; gap: 0.7rem; background: var(--blanco); border: 1px solid rgba(var(--azul-rgb), 0.15); border-radius: 10px; padding: 0.6rem 0.8rem; }
.fed-nombre { flex: 1; min-width: 0; font-weight: 600; color: var(--azul); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fed-cuenta { font-size: 0.8rem; font-weight: 700; color: var(--azul-claro); white-space: nowrap; }
.form-enviar { display: flex; flex-direction: column; gap: 0.6rem; max-width: 560px; }

/* Contactos del directorio de FIDE (panel admin) */
.directorio-fide { background: var(--azul-palido); border-radius: 12px; padding: 0.9rem 1.1rem; margin: 0.8rem 0 1.2rem 0; font-size: 0.88rem; }
.directorio-fide summary { cursor: pointer; font-weight: 700; color: var(--azul); }
.directorio-fide ul { list-style: none; padding: 0; margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.directorio-fide li { display: flex; gap: 0.7rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.directorio-fide p { margin: 0.4rem 0; }

/* ---------------------------------------------------------------------- */
/* Menú móvil: botón de tres rayas (pedido de Jose, 14-oct-2026)          */
/* ---------------------------------------------------------------------- */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: rgba(var(--crema-rgb), 0.14);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--crema);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle:hover, .menu-toggle:focus-visible { background: rgba(var(--crema-rgb), 0.24); }
/* Abierto: las tres rayas forman una X */
.menu-abierto .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-abierto .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-abierto .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1200px) {
  .menu-toggle { display: flex; margin-left: auto; }
  .site-nav, .site-header .header-actions { display: none; width: 100%; }
  .menu-abierto .site-nav { display: block; }
  .menu-abierto .header-actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--crema-rgb), 0.18);
  }

  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li { border-bottom: 1px solid rgba(var(--crema-rgb), 0.12); }
  .site-nav > ul > li:last-child { border-bottom: none; }
  .site-nav > ul > li > a,
  .site-nav > ul > li > span { display: flex; padding: 0.85rem 0.2rem; font-size: 1rem; }
  .site-nav a.active { border-bottom: none; color: var(--amarillo); padding-bottom: 0.85rem; }

  /* Los submenús se abren dentro del panel, a todo lo ancho */
  .dropdown-menu,
  .dropdown-menu.dropdown-menu-wide {
    position: static;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0 0 0.8rem 0;
    box-shadow: none;
  }
  .site-nav .dropdown-menu li a { display: block; padding: 0.2rem 0; font-size: 0.95rem; }
}
.dropdown-menu { list-style: none; }
.aviso-jefes { background: var(--azul-palido); border-left: 4px solid var(--amarillo); border-radius: 12px;
  padding: 1.1rem 1.4rem; margin-bottom: 2rem; }
.aviso-jefes h2 { margin-top: 0; }
.info-bloque.aviso-jefes .sede-mapa-link { color: var(--crema); margin-top: 0.4rem; }
.info-bloque.aviso-jefes .sede-mapa-link:hover { color: var(--azul); }

/* Info: inscripción, alojamiento, viaje (reestructuración 16-oct-2026) */
.aviso-plazo { background: var(--aviso-suave); border-left: 4px solid var(--amarillo); border-radius: 12px; padding: 1rem 1.3rem;
  margin: 0 0 1.4rem 0; display: flex; flex-direction: column; gap: 0.3rem; color: var(--azul); }
.aviso-plazo strong { font-size: 1.1rem; }
.aviso-plazo span { font-size: 0.92rem; }
.botones-doc { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin: 0.4rem 0 0.3rem 0; }
.pasos { padding-left: 1.3rem; }
.pasos li { margin-bottom: 0.7rem; }
.sede-texto { margin: 1rem 0; }
.sede-enlaces { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.sede-texto a { color: var(--azul); }

/* Unificar delegaciones duplicadas (admin) */
.duplicados { background: var(--aviso-suave); border-left: 4px solid var(--amarillo); border-radius: 12px; padding: 0.9rem 1.2rem; margin: 0.8rem 0 1.2rem 0; }
.duplicados h2 { margin: 0 0 0.4rem 0; font-size: 1.05rem; color: var(--azul); }
.duplicados p { font-size: 0.9rem; }
.duplicado-fila { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  border-top: 1px solid rgba(var(--azul-rgb), 0.12); padding: 0.7rem 0; }
.duplicado-fila .check { display: flex; gap: 0.35rem; align-items: center; font-size: 0.88rem; }

/* Pestañas tipo ventana (Delegaciones) */
.pestanas { margin-top: 1rem; }
.pestanas-barra { display: none; }
.pestanas-activas .pestanas-barra { display: flex; gap: 0.3rem; border-bottom: 2px solid var(--azul); flex-wrap: wrap; }
.pestanas-barra [role=tab] { font: inherit; font-weight: 700; font-size: 0.95rem; color: var(--azul); cursor: pointer;
  background: var(--azul-palido); border: 2px solid transparent; border-bottom: none; border-radius: 12px 12px 0 0;
  padding: 0.65rem 1.2rem; margin-bottom: -2px; display: flex; align-items: center; gap: 0.5rem; }
.pestanas-barra [role=tab]:hover { background: var(--azul-hover); }
.pestanas-barra [role=tab][aria-selected=true] { background: var(--blanco); border-color: var(--azul); border-bottom: 2px solid var(--blanco); }
.pestanas-barra [role=tab]:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.pestana-num { background: var(--azul); color: var(--crema); border-radius: 999px; font-size: 0.75rem; padding: 0.1rem 0.5rem; }
.pestana-panel { padding: 1.2rem 0 0.4rem 0; }
.pestanas-activas .pestana-panel { background: var(--blanco); border: 2px solid var(--azul); border-top: none;
  border-radius: 0 0 14px 14px; padding: 1.2rem 1.3rem; }
.pestanas-activas .pestana-titulo { display: none; }
.pestana-titulo { color: var(--azul); }
.tabla-jugadores td:first-child { color: var(--gris-azulado); width: 2.5rem; }
/* Una línea por jugador también en PC: nada se parte dentro de la celda.
   El nombre toma el espacio libre y, si no cabe, termina en "…"; el país
   también (nombre completo al pasar el mouse, atributo title). */
.tabla-jugadores { font-size: 0.93rem; }
.tabla-jugadores td, .tabla-jugadores th { white-space: nowrap; }
.tabla-jugadores .col-nombre { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tabla-jugadores .col-pais { max-width: 11.5rem; overflow: hidden; text-overflow: ellipsis; }
.tabla-jugadores td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-jugadores th:last-child { text-align: right; }
.tabla-jugadores .col-fide { font-variant-numeric: tabular-nums; }
.pais-codigo { display: none; font-weight: 600; letter-spacing: 0.02em; }
.titulo-fide { display: inline-block; background: var(--amarillo); color: var(--azul); font-weight: 800; font-size: 0.72rem;
  border-radius: 6px; padding: 0.05rem 0.35rem; margin-right: 0.2rem; }
@media (max-width: 640px) {
  .pestanas-activas .pestanas-barra { flex-wrap: nowrap; gap: 0.2rem; }
  .pestanas-barra [role=tab] { flex: 1 1 0; justify-content: center; padding: 0.55rem 0.3rem; font-size: 0.82rem; gap: 0.3rem; }
  .pestana-num { font-size: 0.68rem; padding: 0.05rem 0.4rem; }
  .pestanas-activas .pestana-panel { padding: 0.9rem 0.6rem; }
  .tabla-jugadores .col-fide, .tabla-jugadores .pais-nombre { display: none; }
  .tabla-jugadores .pais-codigo { display: inline; }
  .tabla-jugadores { font-size: 0.82rem; }
  .tabla-jugadores th { font-size: 0.66rem; }
  .tabla-jugadores td, .tabla-jugadores th { padding: 0.55rem 0.3rem; white-space: nowrap; }
  .tabla-jugadores td:first-child { width: 1.6rem; }
  /* El nombre ocupa el espacio que sobra y, si no cabe, se corta con "…" */
  .tabla-jugadores .col-nombre { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .tabla-jugadores .titulo-fide { font-size: 0.62rem; padding: 0.02rem 0.25rem; }
  .tabla-jugadores .bandera { width: 1.3rem; }
}

/* Selector de idioma ES | EN (navbar) */
.selector-idioma { display: flex; border: 1px solid rgba(var(--crema-rgb), 0.35); border-radius: 999px; overflow: hidden; flex: none; }
.selector-idioma a { color: var(--crema); text-decoration: none; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.35rem 0.6rem; }
.selector-idioma a:hover { background: rgba(var(--crema-rgb), 0.14); }
.selector-idioma a[aria-current="true"] { background: var(--crema); color: var(--azul); }
@media (min-width: 1201px) {
  /* El menú ocupa el espacio entre el logo y el bloque derecho, centrado en él */
  .site-header .site-nav { flex: 1; display: flex; justify-content: center; }
  .site-header .site-nav > ul { flex-wrap: nowrap; gap: clamp(0.9rem, 1.5vw, 1.6rem); white-space: nowrap; }
  .site-header .selector-idioma { margin-right: -0.2rem; }
}
@media (max-width: 1200px) {
  .site-header { flex-wrap: wrap; gap: 0.6rem; }
  .site-header .brand { order: 0; }
  .site-header .selector-idioma { order: 1; margin-left: auto; }
  .site-header .menu-toggle { order: 2; margin-left: 0.6rem; }
  .site-header .site-nav { order: 3; }
  .site-header .header-actions { order: 4; }
}
@media (max-width: 420px) {
  .site-header { padding-left: 0.9rem; padding-right: 0.9rem; }
  .site-header .brand { gap: 0.5rem; }
  .brand-logo { height: 3rem; }
  .brand-text .brand-subtitle { font-size: 0.55rem; letter-spacing: 0.05em; }
  .selector-idioma a { padding: 0.3rem 0.5rem; }
}

/* Paseos del día libre */
.paseos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; margin: 1rem 0; }
.paseo-card { display: flex; flex-direction: column; background: var(--blanco); border-radius: 16px; overflow: hidden; text-decoration: none;
  color: inherit; box-shadow: 0 6px 20px rgba(var(--azul-rgb), 0.1); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.paseo-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(var(--azul-rgb), 0.18); }
.paseo-card-img { position: relative; aspect-ratio: 16 / 9; background: var(--azul); }
.paseo-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paseo-play { position: absolute; inset: 0; margin: auto; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(var(--azul-rgb), 0.82);
  color: var(--blanco); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; padding-left: 0.2rem; }
.paseo-card-texto { padding: 0.9rem 1.1rem 1.1rem 1.1rem; }
.paseo-card-texto h3 { margin: 0.2rem 0 0.4rem 0; color: var(--azul); font-size: 1.15rem; }
.paseo-card-texto p { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.paseo-region { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris-azulado); }
.paseo-video { margin: 1.2rem 0; }
.section-lead { margin: -0.3rem 0 0.4rem 0; color: var(--gris-azulado); }

/* Galería de fotos con visor (paseos) */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.7rem; margin: 1rem 0 1.6rem 0; }
.galeria-item { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--azul-palido); }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.galeria-item:hover img { transform: scale(1.05); }
/* Página Galería: videos en cuadrícula. */
.galeria-titulo { margin: 2rem 0 0.8rem; }
.galeria-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 1.4rem; }
.galeria-videos-chicos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.galeria-video { margin: 0; }
.galeria-video .video-box { max-width: none; border-radius: 14px; }
.galeria-video figcaption { margin-top: 0.5rem; font-weight: 600; color: var(--azul); font-size: 0.95rem; }
.galeria-vacia { color: var(--texto-suave); font-style: italic; }
.visor { border: none; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.visor::backdrop { background: rgba(var(--noche-rgb), 0.92); }
.visor[open] { display: flex; align-items: center; justify-content: center; }
.visor figure { margin: 0; max-width: 88vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.visor figure img { max-width: 88vw; max-height: 82vh; object-fit: contain; border-radius: 8px; }
.visor figcaption { color: var(--texto-sobre-oscuro); font-size: 0.85rem; }
.visor button { position: fixed; background: rgba(var(--crema-rgb), 0.15); color: var(--blanco); border: none; cursor: pointer;
  border-radius: 50%; width: 3rem; height: 3rem; font-size: 1.8rem; line-height: 1; }
.visor button:hover { background: rgba(var(--crema-rgb), 0.3); }
.visor-cerrar { top: 1rem; right: 1rem; }
.visor-ant { left: 1rem; top: 50%; transform: translateY(-50%); }
.visor-sig { right: 1rem; top: 50%; transform: translateY(-50%); }
.footer-credito { margin: 0.9rem auto 0 auto; padding-top: 0.75rem; max-width: 420px; font-size: 0.72rem; color: var(--gris-credito);
  border-top: 1px solid rgba(var(--gris-credito-rgb), 0.35); }
.footer-credito a { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(var(--gris-credito-rgb), 0.5); }
.footer-credito a:hover { color: var(--gris-credito-hover); border-bottom-color: currentColor; }

/* Lista de delegaciones (admin): una línea por dato, "…" si no cabe y el
   texto completo al pasar el mouse (title). Filas parejas, sin saltos. */
.tabla-delegaciones { table-layout: fixed; width: 100%; min-width: 860px; }
.tabla-delegaciones col.c-pais { width: 20%; }
.tabla-delegaciones col.c-jefe { width: 16.5%; }
.tabla-delegaciones col.c-num { width: 5%; }
.tabla-delegaciones col.c-correo { width: 11%; }
.tabla-delegaciones col.c-portal { width: 7.5%; }
.tabla-delegaciones col.c-resp { width: 9%; }
.tabla-delegaciones col.c-estado { width: 11%; }
.tabla-delegaciones col.c-publica { width: 10%; }
.tabla-delegaciones th, .tabla-delegaciones td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tabla-delegaciones .corta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-delegaciones .fila-pais .bandera { margin-right: 0.45rem; }
.tabla-delegaciones .estado { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tabla-delegaciones .badge { min-width: 0; font-size: 0.68rem; padding: 0.05rem 0.35rem; vertical-align: middle; }

/* Comisión Técnica FVA (portal de jugadores venezolanos y marca pública) */
.campo-ancho { grid-column: 1 / -1; }
.campo textarea { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--borde-campo); border-radius: 6px; background: var(--blanco); resize: vertical; }
.campo textarea:focus { outline: 2px solid var(--azul-claro); outline-offset: 1px; }
.campo input[readonly] { background: var(--campo-bloqueado); color: var(--texto-suave); }
.plazo-comision { background: var(--aviso-fondo); color: var(--plazo-texto); padding: 0.5rem 0.8rem; border-radius: 6px; font-size: 0.9rem; max-width: 26rem; }
.badge-comision { background: var(--azul-palido); color: var(--azul); font-weight: 600; }
.cabecera-acciones { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.cabecera-acciones .en-linea { margin-left: 0; }

/* Respuesta de asistencia (botones del correo) */
.asistencia { max-width: 36rem; margin: 0 auto; }
.asistencia-opciones { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.asistencia-opcion { display: flex; gap: 0.6rem; align-items: center; border: 1px solid rgba(var(--azul-rgb), 0.25);
  border-radius: 10px; padding: 0.7rem 0.9rem; cursor: pointer; font-weight: 600; background: var(--blanco); }
.asistencia-opcion input { accent-color: var(--azul); width: 1.1rem; height: 1.1rem; margin: 0; }
.asistencia-opcion:has(input:checked) { border-color: var(--azul); background: var(--azul-palido); }

/* Píldoras de seguimiento (correo, portal, respuesta) en el panel */
.pill { display: inline-block; max-width: 100%; font-size: 0.74rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.pill-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.pill-warn { background: var(--aviso-fondo); color: var(--aviso-texto); }
.pill-err { background: var(--error-fondo); color: var(--error-texto); }
.pill-az { background: var(--azul-palido); color: var(--azul); }
.pill-gris { background: var(--gris-fondo); color: var(--texto-suave); }
.pill.corta { overflow: hidden; text-overflow: ellipsis; }
.filtro { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; }
.seguimiento { background: var(--blanco); border: 1px solid rgba(var(--azul-rgb), 0.15); border-radius: 12px; padding: 0.8rem 1rem; margin: 1rem 0; }
.seguimiento summary { cursor: pointer; font-weight: 700; color: var(--azul); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.historial { list-style: none; padding: 0; margin: 0.6rem 0; display: grid; gap: 0.45rem; font-size: 0.88rem; }
.historial li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.6rem; }
.historial time { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.historial small { display: block; color: var(--texto-suave); }
.cifras { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0; }
.cifra { background: var(--blanco); border: 1px solid rgba(var(--azul-rgb), 0.15); border-radius: 10px; padding: 0.5rem 0.8rem; min-width: 8.5rem; }
.cifra b { display: block; font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--azul); font-variant-numeric: tabular-nums; }
.cifra span { font-size: 0.78rem; color: var(--texto-suave); }
.tabla-delegaciones .pill.corta { display: inline-block; max-width: 100%; }

/* Delegaciones: página ancha para la tabla de jugadores; los textos conservan
   un ancho de lectura cómodo. */
.pagina-delegaciones .page-lead, .pagina-delegaciones > .info-bloque { max-width: 760px; }
.pagina-delegaciones .tabla-jugadores .col-pais { max-width: 15rem; }

/* Viaje: avisos destacados, consulta de visa y recaudos */
.nota-destacada { display: flex; gap: 0.8rem; align-items: flex-start; background: var(--azul-palido);
  border-left: 4px solid var(--amarillo); border-radius: 10px; padding: 0.9rem 1rem; margin: 0.8rem 0 1.1rem; }
.nota-icono { flex: none; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--amarillo); color: var(--azul); font-weight: 800; font-size: 0.95rem; line-height: 1; }
.consulta-visa { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; margin: 0.6rem 0 0.8rem; }
.consulta-visa label { font-weight: 600; }
.consulta-visa select { font: inherit; padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid rgba(var(--azul-rgb), 0.3); background: var(--blanco); max-width: 100%; }
.resultado-visa { flex-basis: 100%; margin: 0.2rem 0 0; padding: 0.6rem 0.8rem; border-radius: 8px; font-weight: 600; }
.resultado-si { background: var(--ok-fondo); color: var(--ok-texto); }
.resultado-no { background: var(--aviso-fondo); color: var(--aviso-texto); }
.lista-exentos summary { cursor: pointer; font-weight: 600; color: var(--azul); }
.lista-exentos .lista-federaciones { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.recaudos { margin: 0.4rem 0 0.6rem; padding-left: 1.1rem; }
.recaudos li { margin-bottom: 0.35rem; }
.recaudos-titulo { margin: 0.6rem 0 0.2rem; font-weight: 600; }
.recaudos-opcionales { color: var(--texto-oscuro); }
.pasos li.paso-destacado { background: var(--azul-palido); border-left: 4px solid var(--amarillo); border-radius: 8px; padding: 0.6rem 0.8rem; }

/* ---------------------------------------------------------------------- */
/* Room list (admin)                                                      */
/* ---------------------------------------------------------------------- */
.globo { display: inline-block; min-width: 1.25rem; padding: 0 0.35rem; border-radius: 999px; background: var(--error-fuerte); color: var(--blanco);
  font-size: 0.72rem; font-weight: 700; line-height: 1.25rem; text-align: center; vertical-align: middle; font-family: 'Work Sans', sans-serif; }
.aviso-info { background: var(--azul-palido); color: var(--azul); }
.boton-link-az { color: var(--azul-claro); font-size: 0.82rem; }
.badge-menor { background: var(--aviso-fondo); color: var(--aviso-texto); font-size: 0.7rem; min-width: 0; }
.tipo-hab { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 6px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.tipo-double { background: var(--azul-palido); color: var(--azul); }
.tipo-single { background: var(--ok-fondo); color: var(--ok-texto); }
.tipo-suite { background: var(--suite-fondo); color: var(--suite-texto); }
.emparejar { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.45rem; }
.emparejar select { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.4rem; border-radius: 6px; max-width: 19rem; }
/* Room list: lista de federaciones a la izquierda + planilla (una fila = una habitación). */
.rl-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; margin: 0.8rem 0 0.6rem; }
.rl-pc { background: var(--blanco); border: 1px solid rgba(var(--azul-rgb), 0.15); border-radius: 10px; padding: 0.5rem 0.75rem; }
.rl-pc b { display: block; font-family: 'Fraunces', serif; font-size: 1.35rem; color: var(--azul); font-variant-numeric: tabular-nums; }
.rl-pc span { font-size: 0.76rem; color: var(--texto-suave); }
.rl-pc.mal { background: var(--error-fondo); border-color: var(--error-texto); }
.rl-pc.mal b { color: var(--error-texto); }
.rl-pc.ok { background: var(--ok-fondo); border-color: var(--ok-texto); }
.rl-pc.ok b { color: var(--ok-texto); }
.rl-listo { padding: 0.55rem 0.9rem; border-radius: 10px; font-weight: 700; margin: 0.2rem 0 1rem; }
.rl-listo.no { background: var(--error-fondo); color: var(--error-texto); }
.rl-listo.si { background: var(--ok-fondo); color: var(--ok-texto); }
.rl-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-top: 1rem; }
.rl-lado { background: var(--blanco); border: 1px solid rgba(var(--azul-rgb), 0.15); border-radius: 12px; padding: 0.5rem;
  position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.rl-lado a { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.55rem; border-radius: 8px; text-decoration: none;
  color: var(--texto); font-size: 0.88rem; }
.rl-lado a:hover { background: var(--azul-hover); }
.rl-lado a.activa { background: var(--azul-palido); font-weight: 700; color: var(--azul); }
.rl-lado h3 { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--azul-claro); margin: 0.6rem 0.55rem 0.3rem;
  font-family: 'Work Sans', sans-serif; }
.rl-lado .bandera { width: 18px; vertical-align: -2px; }
.rl-lado-nombre { display: flex; flex-direction: column; min-width: 0; }
.rl-conf { display: block; font-size: 0.7rem; font-weight: 600; margin-top: 0.05rem; color: var(--texto-suave); }
.rl-pend { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--error-texto); white-space: nowrap; }
.rl-pend.ok { color: var(--ok-texto); }
.c-ok, .c-confirmada { color: var(--ok-texto); }
.c-enviada { color: var(--info-texto); }
.c-cambio, .c-cambio_confirmada { color: var(--error-texto); }
.rl-estado { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
  background: var(--gris-fondo); color: var(--texto-suave); }
.rl-estado.c-confirmada { background: var(--ok-fondo); }
.rl-estado.c-enviada { background: var(--info-fondo); }
.rl-estado.c-cambio, .rl-estado.c-cambio_confirmada { background: var(--error-fondo); }
.rl-ficha { background: var(--blanco); border: 1px solid rgba(var(--azul-rgb), 0.15); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.rl-cab { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.rl-cab h2 { margin: 0 0 0.4rem; display: flex; gap: 0.5rem; align-items: center; }
.rl-datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.8rem; font-size: 0.88rem; margin: 0; }
.rl-datos dt { color: var(--texto-suave); }
.rl-datos dd { margin: 0; }
.rl-botones { display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem; }
.rl-botones form { margin: 0; }
.rl-botones .boton-sec, .rl-botones .boton { width: 100%; text-align: center; }
.rl-historia { font-size: 0.8rem; color: var(--texto-suave); margin: 0.8rem 0 0; }
.rl-planilla { width: 100%; border-collapse: collapse; font-size: 0.86rem; background: var(--blanco); }
.rl-planilla th { background: var(--azul); color: var(--blanco); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.45rem 0.5rem; text-align: left; white-space: nowrap; }
.rl-planilla td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--azul-palido); vertical-align: top; }
.rl-planilla tr.rl-fed td { background: var(--azul-palido); font-weight: 700; color: var(--azul); padding: 0.5rem 0.6rem; }
.rl-planilla tr.rl-fed a { color: var(--azul); }
.rl-planilla tr.rl-fed small { font-weight: 500; color: var(--texto-suave); margin-left: 0.4rem; }
.rl-planilla tr.rl-aviso td, .rl-planilla tr.rl-sin td { background: var(--aviso-fila); }
.rl-planilla tr.rl-error td { background: var(--error-fila); }
.rl-planilla tr.rl-avisos td { border-top: 0; padding-top: 0; }
.rl-planilla .bandera { width: 18px; margin-right: 0.35rem; vertical-align: -2px; }
.rl-planilla .emparejar { margin-top: 0; }
.rl-planilla .emparejar select { font: inherit; font-size: 0.82rem; padding: 0.25rem 0.35rem; border-radius: 6px; max-width: 13rem; }
.rl-planilla input { font: inherit; font-size: 0.82rem; padding: 0.25rem 0.35rem; border: 1px solid var(--borde-campo); border-radius: 5px;
  background: var(--blanco); }
.rl-planilla .input-error { border-color: var(--error-fuerte); background: var(--error-fondo); }
.rl-num { color: var(--texto-suave); font-variant-numeric: tabular-nums; width: 2rem; }
.rl-nom { font-weight: 600; }
.rl-sub { display: block; font-size: 0.74rem; color: var(--texto-suave); }
.rl-sub .en-linea { margin-left: 0.3rem; }
.rl-vacio { color: var(--texto-suave); font-style: italic; }
.rl-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rl-fecha .pill { display: block; width: max-content; margin-top: 0.15rem; font-size: 0.7rem; }
.rl-ubica { white-space: nowrap; }
.rl-hotel { width: 7rem; }
.rl-contenido .filtro { margin-top: 0; }
.filtro-compacto select { width: auto; font-size: 0.9rem; padding: 0.3rem 0.5rem; }
.rl-planilla td.rl-h { min-width: 10.5rem; }
.rl-corto { width: 3.4rem; }
.rl-notas { width: 10rem; }
.rl-alerta { display: inline-block; margin-right: 0.8rem; font-size: 0.78rem; font-weight: 600; color: var(--aviso-texto); }
.rl-alerta.error { color: var(--error-texto); }
@media (max-width: 900px) {
  .rl-layout { grid-template-columns: minmax(0, 1fr); }
  .rl-lado { position: static; max-height: none; }
  .rl-cab { grid-template-columns: 1fr; }
}
/* Estadísticas (presupuesto). */
.est-tabla td, .est-tabla th { white-space: nowrap; }
.est-tabla .est-n { text-align: right; font-variant-numeric: tabular-nums; }
.est-tabla .bandera { width: 18px; margin-right: 0.35rem; vertical-align: -2px; }
.est-bloque td { background: var(--azul-palido); color: var(--azul); font-weight: 700; }
.est-bloque small { font-weight: 500; color: var(--texto-suave); margin-left: 0.4rem; white-space: normal; }
.est-total td { font-weight: 700; border-top: 2px solid var(--azul-palido); }
.est-general td { background: var(--aviso-fila); }
.est-vacio { color: var(--texto-suave); font-style: italic; }

/* Botones que solo hacen falta sin JS (filtro-auto.js les pone hidden). */
/* Facturación (proformas y pagos). */
.fa-dos { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.2rem; align-items: start; }
.fa-h { font-size: 1.05rem; margin: 0 0 0.5rem; }
.fa-bandera { width: 34px; margin-right: 0.6rem; vertical-align: 2px; }
.fa-tabla td { vertical-align: top; }
.fa-tabla .est-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fa-linea { display: flex; justify-content: space-between; gap: 1rem; line-height: 1.45; padding: 0.1rem 0;
  border-bottom: 1px dotted var(--azul-palido); }
.fa-linea:last-child { border-bottom: 0; }
.fa-monto-l { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fa-ajuste { background: var(--aviso-fila); }
.fa-linea small { color: var(--texto-suave); }
.fa-suma { font-weight: 700; }
.fa-opciones { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; }
.fa-chk { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; white-space: nowrap; }
.fa-emitir { margin-top: 0.8rem; }
.fa-emitir select { width: auto; font-size: 0.9rem; padding: 0.3rem 0.5rem; }
.fa-anulada td { color: var(--texto-suave); text-decoration: line-through; }
.fa-vieja td { color: var(--texto-suave); }
.fa-det summary { cursor: pointer; color: var(--azul-claro); font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.fa-det[open] .fa-opciones { margin-top: 0.4rem; padding: 0.5rem 0.6rem; background: var(--azul-palido); border-radius: 8px; gap: 0.4rem; }
.fa-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.8rem; }
.fa-campo label { display: inline-flex; align-items: center; gap: 0.2rem; }
.fa-campo select { font: inherit; font-size: 0.8rem; padding: 0.2rem 0.3rem; border-radius: 5px; }
.fa-num { width: 3rem; font: inherit; font-size: 0.8rem; padding: 0.2rem 0.3rem; border: 1px solid var(--borde-campo); border-radius: 5px; }
.fa-monto { width: 5rem; }
.fa-chk-caja { margin-top: 0.6rem; white-space: normal; }
.fa-caja .fa-chk { display: flex; }
.fa-caja .fa-chk input { width: auto; }
.fa-anulada td:last-child, .fa-anulada td:nth-last-child(2) { text-decoration: none; }
.fa-acciones { white-space: nowrap; }
.fa-cod { white-space: nowrap; }
.fa-acciones form { margin-left: 0.4rem; }
.fa-caja label { display: block; font-size: 0.8rem; color: var(--texto-suave); margin: 0.5rem 0 0.15rem; }
.fa-caja input, .fa-caja select { width: 100%; font: inherit; font-size: 0.88rem; padding: 0.35rem 0.5rem;
  border: 1px solid var(--borde-campo); border-radius: 6px; background: var(--blanco); }
.fa-ajustes { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; gap: 0.35rem; font-size: 0.85rem; }
.fa-sub { display: block; color: var(--texto-suave); font-size: 0.74rem; }
.fa-falta { color: var(--error-texto); font-weight: 600; }
.pago { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.p-no { background: var(--error-fondo); color: var(--error-texto); }
.p-ant { background: var(--aviso-fondo); color: var(--aviso-texto); }
.p-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.p-bor { background: var(--gris-fondo); color: var(--texto-suave); }
@media (max-width: 900px) { .fa-dos { grid-template-columns: minmax(0, 1fr); } }

/* Registro del personal. */
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.grid-campos > [hidden] { display: none; }
.pe-enlace { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pe-enlace code { background: var(--azul-palido); padding: 0.2rem 0.5rem; border-radius: 6px; word-break: break-all; }
.pe-enlace .rl-sub { flex-basis: 100%; }
.pe-mini { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; display: block; }
.pe-tabla td { vertical-align: middle; white-space: normal; }
.pe-tallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem 1.6rem; }
.pe-cabecera { display: grid; grid-template-columns: 160px 1fr; gap: 1.4rem; align-items: start; margin-bottom: 1.5rem; }
.pe-fotos { display: grid; gap: 0.5rem; }
.pe-foto { width: 160px; height: 200px; object-fit: cover; border-radius: 12px; display: block; }
.pe-revision textarea { width: 100%; font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--borde-campo); border-radius: 8px; }
.pe-revision label { font-size: 0.85rem; color: var(--texto-suave); }
@media (max-width: 600px) { .pe-cabecera { grid-template-columns: 1fr; } }

[data-sin-js][hidden] { display: none; }

/* Antes en atributos style="" de las plantillas. */
.flashes.flashes-sitio { max-width: 720px; margin: 1.5rem auto 0 auto; }


/* Enlace personal del atleta de la Comisión Técnica (/registro/j/<token>). */
.pasos-atleta { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 1.2rem 0; list-style: none; counter-reset: paso; }
.pasos-atleta li { counter-increment: paso; flex: 1 1 14rem; background: var(--azul-palido); border-radius: 10px; padding: 0.7rem 0.9rem; font-weight: 600; }
.pasos-atleta li::before { content: counter(paso) ". "; color: var(--azul); }
.pasos-atleta li.hecho { background: var(--ok-fondo); }
.pasos-atleta li.hecho::before { content: "✓ "; color: var(--ok-texto); }
.pasos-atleta a { color: var(--azul); text-decoration: none; }
.atleta-pago { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.atleta-total { display: flex; flex-direction: column; gap: 0.35rem; background: var(--aviso-fondo); border-radius: 10px; padding: 0.9rem 1rem; }
.atleta-total .boton-sec { align-self: flex-start; margin-top: 0.4rem; }
.atleta-banco { background: var(--azul-palido); border-radius: 10px; padding: 0.9rem 1rem; line-height: 1.6; }
.fila-form { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0; }
.fila-form input[type="text"], .fila-form input[type="date"] { padding: 0.25rem 0.4rem; font-size: 0.85rem; }

/* Vista de solo lectura del enlace del atleta en el panel */
.form-registro[inert], form[inert] { opacity: 0.6; }

/* Panel de cobros de la Comisión: columnas fijas; lo largo se corta con "…" (el texto completo va en title) */
.tabla-comision { table-layout: fixed; width: 100%; min-width: 860px; }
.tabla-comision col.c-atleta { width: 25%; }
.tabla-comision col.c-elo { width: 12%; }
.tabla-comision col.c-correo { width: 20%; }
.tabla-comision col.c-acomp { width: 7%; }
.tabla-comision col.c-proforma { width: 19%; }
.tabla-comision col.c-instr { width: 17%; }
.tabla-comision th, .tabla-comision td { overflow: hidden; vertical-align: middle; }
.tabla-comision .corta { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-comision .pago.corta { display: block; width: fit-content; margin-top: 0.15rem; }

/* Panel de presidentes de asociación: columnas fijas; lo largo se corta con "…" */
.tabla-presidentes { table-layout: fixed; width: 100%; min-width: 860px; }
.tabla-presidentes col.c-asoc { width: 14%; }
.tabla-presidentes col.c-nombre { width: 24%; }
.tabla-presidentes col.c-correo { width: 22%; }
.tabla-presidentes col.c-acomp { width: 16%; }
.tabla-presidentes col.c-estado { width: 10%; }
.tabla-presidentes col.c-invit { width: 14%; }
.tabla-presidentes th, .tabla-presidentes td { overflow: hidden; vertical-align: middle; }
.tabla-presidentes .corta { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-presidentes .pago.corta { width: fit-content; }