/* Celular acostado: barra fina arriba, botones en una columna a la izquierda y el mapa ocupando el resto.
   Se carga al final y solo aplica a pantallas bajas en horizontal (teléfonos). */

/* Aviso para girar el celular cuando está parado. */
.girar { display: none; }
@media (orientation: portrait) and (max-width: 600px) and (pointer: coarse) {
  body:not(.en-portada) .girar { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; background: #1c4f86; color: #fff; text-align: center; font: 700 20px var(--titulos); letter-spacing: .04em; }
  .girar i { font-size: 64px; animation: girar 2s ease-in-out infinite; }
  .girar small { font: 500 14px var(--texto); opacity: .85; letter-spacing: 0; }
}
@keyframes girar { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

@media (orientation: landscape) and (max-height: 520px) {
  /* Menú: los cuatro modos en una sola fila. */
  .menu-ppal { padding: 10px 40px 10px; gap: 6px; }
  .mn-cinta { padding: 4px 16px; }
  .mn-acceso > span { width: 38px; height: 38px; font-size: 16px; border-width: 3px; }
  .mn-acceso { font-size: 11px; }
  .mn-modos { flex-wrap: nowrap; gap: 18px; }
  .mn-modo { width: 160px; gap: 4px; }
  .mn-circ { width: 112px; border-width: 10px; font-size: 40px; }
  .mn-modo strong { font-size: 19px; }
  .mn-modo small { font-size: 11px; }
  .pt-casa { width: min(560px, 70vw); margin-top: 6px; }
  .pt-cintas { top: 14px; }
  .pt-cinta { height: 44px; }
  .juego { display: grid; grid-template-columns: 82px 1fr; grid-template-rows: auto 1fr; height: 100dvh; }
  .juego > .barra { grid-column: 1 / -1; grid-row: 1; padding: 3px 10px; gap: 4px 10px; }
  .juego > .cuerpo { grid-column: 2; grid-row: 2; min-height: 0; }
  .juego > .nav-movil { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-top: 0; border-right: 1px solid var(--borde); box-shadow: 4px 0 12px rgba(0, 0, 0, .06); overflow: hidden; }
  .nav-movil button { flex: none; padding: 5px 2px; font-size: 9.5px; }
  .nav-movil button i { font-size: 17px; }
  .nav-movil .nav-fin { margin-top: auto; flex: none; flex-direction: column; gap: 2px; padding: 8px 2px; font-size: 11px; line-height: 1.05; text-align: center; }
  .col-mapa { padding: 4px 6px 42px; }
  /* Al lado del mapa entra el panel nacional (Congreso proyectado e ingresos). */
  .juego > .cuerpo { display: grid; grid-template-columns: 1fr minmax(240px, 38%); }
  .juego .col-panel { display: flex !important; flex-direction: column; min-height: 0; border-left: 1px solid var(--borde); }
  .juego .col-panel .tabs { display: none; }
  .juego .col-panel .panel { overflow-y: auto; padding: 8px 10px; font-size: 13px; }
  .juego .col-panel .panel h4 { margin: 6px 0 4px; font-size: 13px; }
  .nav-movil [data-a="ver-nacional"] { display: none; }
  /* La línea de tiempo se achica a la tira de semanas. */
  .barra .lt-texto { display: none; }
  .barra .linea-tiempo { min-width: 0; }
  .barra h1, .barra .quien b { font-size: 15px; }
  .barra .quien small { display: none; }
  /* La lista de lobbys o regiones se abre al costado del mapa, sin taparlo entero. */
  .cajon { inset: 0 auto 0 0; width: min(340px, 60%); }
  /* Ventanas: entran a lo alto con su propio desplazamiento si hace falta. */
  .caja-modal, .vprov, .vgrupo, .ficha { max-height: calc(100dvh - 16px); overflow-y: auto; }
  #modal { padding: 8px; }
  /* Ventana de provincia: ancha, encabezado en una línea y las dos columnas lado a lado. */
  .vprov { width: min(820px, 100%); }
  .vp-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 6px 56px 6px 12px; }
  .vp-cab > svg, .vp-cab .vp-region { display: none; }
  .vp-cab h2 { font-size: 22px; margin: 0; }
  .vp-cab h2 .bandera { height: 22px; }
  .vp-stats { display: flex; gap: 6px; margin: 0; flex: 1; }
  .vp-stat { padding: 3px 8px; gap: 6px; }
  .vp-stat b, .vp-stat strong { font-size: 14px; }
  .vp-stat small { font-size: 9px; }
  .vp-cab .cerrar-x { top: 8px; right: 10px; width: 32px; height: 32px; }
  .vp-cab .reloj-chip { right: 50px; top: 8px; font-size: 13px; }
  .vp-cuerpo { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 16px; padding: 4px 12px; }
  .vp-col { padding: 0; }
  .vp-sep { margin: 2px 0; font-size: 10px; }
  .vp-monto b { font-size: 30px; line-height: 1; }
  .vp-monto small { font-size: 10px; }
  .vp-slider .btn.redondo { width: 30px; height: 30px; }
  .vp-limites { font-size: 10px; }
  .vp-bancas b { font-size: 22px; }
  .vp-aviso { display: none; }
  .vp-podio { transform: scale(.8); transform-origin: top center; margin-bottom: -22px; }
  .blqs .banca-blq { width: 15px; height: 12px; border-radius: 2px; }
  .blqs.medias .banca-blq { width: 13px; height: 11px; }
  #vp-efecto .chips { flex-wrap: nowrap; overflow: hidden; }
  .ficha-izq .ficha-nombre small { font-size: 12px; }
  .blqs.muchas .banca-blq { width: 9px; height: 8px; }
  /* Ventana de lobby: encabezado más bajo. */
  .vg-cab { height: 52px; }
  .vg-cab h2 { font-size: 24px; }
  .vg-stats > div { padding: 4px 8px; }
  .vg-info { font-size: 11px; margin: 4px 0 0; }
  /* Ficha del candidato: retrato a la izquierda y bonos a la derecha. */
  .ficha { grid-template-columns: 220px 1fr; width: min(820px, 100%); }
  .ficha-izq { padding: 8px; }
  .ficha-izq .ficha-agua { display: block; }
  .ficha-nombre { font-size: 26px; }
  .ficha-rol { font-size: 11px; }
  .ficha-foto { width: 150px; height: 170px; }
  .ficha-izq .ficha-vice { position: absolute; left: 6px; bottom: 6px; width: 60px; height: 70px; }
  .ficha-der { padding: 8px 12px; }
  .ficha-lista li { font-size: 10.5px; grid-template-columns: 16px 42px 1fr; gap: 3px; line-height: 1.05; }
  .ficha-lista b { font-size: 13px; }
  .ficha-lista .signo { transform: scale(.8); }
  .ficha-lista small, .ficha-lista .de-vice { font-size: 9px; }
  .ficha-der { padding: 6px 10px; }
  .ficha-cols h4 { margin: 0 0 3px; padding: 2px 6px; font-size: 13px; }
  /* La aclaración y el renglón del vice no entran: el vice ya se ve en su foto, al lado del candidato. */
  .ficha-der > .ayuda, .ficha-der > .vice-elegido { display: none; }
  .ficha-btns { margin-top: 6px; }
  .ficha-btns .btn { height: 40px; min-height: 0; font-size: 15px; }
  /* Cómo se juega: en dos columnas de texto chico. */
  .caja-modal:has(.lista) { width: min(820px, 100%); }
  .cuerpo-modal .lista { columns: 3; column-gap: 16px; font-size: 11px; line-height: 1.3; }
  .cuerpo-modal .lista li { break-inside: avoid; margin-bottom: 3px; }
  .ficha-cols { gap: 10px; }
  .ficha-der > .cerrar-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; }
  .vice-elegido { padding: 3px 8px; }
  .vice-elegido img { width: 22px; height: 22px; }
  .ficha-btns { margin-top: 4px; }
  .ficha-btns .btn { height: 36px; }
  .caja-modal:has(.lista) header { padding: 6px 14px; }
  .caja-modal:has(.lista) header h3 { font-size: 18px; }
  .caja-modal:has(.lista) footer { padding: 6px 14px; }
  .caja-modal:has(.lista) .cuerpo-modal { padding: 6px 14px; }
  .cuerpo-modal .lista { font-size: 10.5px; }
  .ficha-lista { gap: 1px; }
  .vp-pie { padding: 6px 12px; }
  .vp-pie .btn { min-height: 0; height: 40px; font-size: 15px; }
  .consejo { bottom: 10px; left: calc(50% + 41px); width: min(560px, calc(100% - 110px)); padding: 8px 10px; }
  .consejo p { font-size: 13px; }
}

/* Celular acostado: ninguna pantalla se corta. Si algo no entra en el alto, la pantalla se desliza (el juego tiene
   su propio armado y no se toca). */
@media (orientation: landscape) and (max-height: 520px) {
  #app > :not(.juego) { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .un-jugador .uj-difs .mn-circ { width: 50px; border-width: 5px; font-size: 20px; }
  .un-jugador .uj-difs .mn-modo { gap: 2px; }
  .un-jugador .uj-difs .mn-modo strong { font-size: 16px; }
  .un-jugador .uj-etiqueta { margin: 2px 0 0; font-size: 13px; }
  .un-jugador .uj-tiempos button { padding: 5px 12px; }
  .un-jugador .uj-ayuda { margin: 4px auto 2px; font-size: 12px; }
  .un-jugador .uj-jugar { margin: 2px auto 6px; padding-top: 7px; padding-bottom: 7px; }
}
@media (orientation: landscape) and (max-height: 400px) {
  .un-jugador .uj-ayuda { display: none; }
}
/* Elegir partido: los seis en una fila, más chicos; y el pie con el botón, más bajo. */
@media (orientation: landscape) and (max-height: 520px) {
  .seleccion { padding: 8px 16px 10px; }
  .seleccion > .sub { margin: 2px 0 4px; }
  .seleccion > .pie-seleccion { bottom: -10px; margin: 0 -16px -10px; padding: 6px 16px 10px; }
  .tarjetas.muchas:has(> .tarjeta.partido) { flex-wrap: nowrap; gap: 10px; padding-bottom: 4px; }
  .tarjetas.muchas > .tarjeta.partido { flex: 0 1 112px; width: auto; min-width: 0; }
  .tarjeta.partido .tarjeta-arte { height: min(118px, 34dvh); }
  .tarjeta.partido .logo-partido { width: 72%; height: auto; max-height: 80%; }
  .tarjetas.muchas .tarjeta.partido .tarjeta-pie { min-height: 0; padding: 5px 4px 6px; font-size: 12px; }
  .tarjeta.partido .tarjeta-pie * { font-size: 13px; line-height: 1.05; }
}
/* Elegir candidato (y tienda): las cartas se achican enteras (zoom mantiene el diseño de cada carta) para que entre
   al menos una fila completa con el título y el botón. */
@media (orientation: landscape) and (max-height: 520px) {
  .seleccion .tarjetas > .tarjeta.cand { zoom: .66; }
  .seleccion .tarjetas.muchas { gap: 10px; }
}
/* Partida: el cajón de lobbys y regiones, más ancho para que no se corten nombres ni montos; cabecera más baja. */
@media (orientation: landscape) and (max-height: 520px) {
  .cajon { width: min(480px, calc(100vw - 110px)); }
  .cajon-cab { padding: 6px 12px; }
  .cajon-cab b { font-size: 17px; }
}
/* Repetición del turno y escrutinio: en el celular acostado, la provincia a la izquierda y la Cámara a la derecha,
   todo en una pantalla (antes iban una debajo de la otra y la Cámara quedaba afuera). */
@media (orientation: landscape) and (max-height: 520px) {
  .rep { min-height: 0; height: 100dvh; }
  .rep-cab { padding: 4px 10px; gap: 6px; }
  .rep-cont b { font-size: 24px; }
  .rep-cont span { font-size: 15px; }
  .rep-ctrl button { width: 32px; height: 32px; }
  .rep-ctrl .rep-play { width: 38px; height: 38px; font-size: 14px; }
  .rep-ctrl .rep-omitir { padding: 0 10px; font-size: 13px; }
  .rep-tit { font-size: 11px; }
  .rep-prog { height: 5px; margin-top: 3px; }
  .rep-cuerpo { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(250px, 44%); overflow: hidden; }
  .rep-der { order: -1; min-height: 0; padding: 2px 10px; overflow: hidden; justify-content: safe center; }
  .rep-izq { min-height: 0; padding: 6px 10px; overflow-y: auto; justify-content: safe center; border-left: 1px solid rgba(127, 127, 127, .2); }
  .rep-prov > svg, .rep-sil { width: 96px !important; height: 72px !important; top: 6px; }
  .rep-prov h3 { font-size: 20px; margin: 0; }
  .rep-sub { font-size: 11px; margin: 1px 0; }
  .rep-podio { padding-top: 10px; gap: 8px; }
  .podio-circ { width: 40px; height: 40px; font-size: 15px; border-width: 3px; }
  .podio-lugar.primero .podio-circ { width: 50px; height: 50px; font-size: 19px; }
  .podio-nombre { font-size: 11px; }
  .podio-sub { font-size: 9.5px; }
  .podio-gana { top: -12px; font-size: 8.5px; }
  .rep-sig { margin-top: 2px; font-size: 10.5px; }
  .rep-total-tit { margin: 2px 0; font-size: 11px; }
  .rep-barra { height: 20px; margin-bottom: 4px; }
  .rep-barra span { font-size: 9.5px; }
  .rep-filas { gap: 2px; grid-template-columns: 1fr; }
  .rep-fila { padding: 2px 6px; gap: 5px; }
  .rep-nom { font-size: 13px; }
  .rep-nom .cara { width: 20px; height: 20px; }
  .rep-num { font-size: 14px; padding: 0; }
  .rep-pres { grid-template-columns: 28px minmax(80px, 1fr) 1fr 90px; padding: 2px 6px; }
}
/* Decisiones de campaña: más anchas y con las tres posturas una al lado de la otra, para que entren sin deslizar. */
@media (orientation: landscape) and (max-height: 520px) {
  .caja-modal.decision { width: min(760px, calc(100vw - 16px)); }
  .caja-modal.decision > header { padding-top: 6px; padding-bottom: 6px; }
  .caja-modal.decision .cuerpo-modal { padding-top: 6px; }
  .caja-modal.decision .dec-contexto { margin: 0 0 6px; font-size: 13px; }
  .caja-modal.decision .dec-opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .caja-modal.decision .dec-op { height: 100%; align-items: flex-start; font-size: 13px; }
  .caja-modal.decision .ayuda { margin: 6px 0 0; font-size: 11.5px; }
}
/* Escrutinio: filas de candidatos más bajas para que entren todos. */
@media (orientation: landscape) and (max-height: 520px) {
  .rep-pres { margin-bottom: 2px; padding: 1px 6px; }
  .rep-izq > * { flex-shrink: 0; }
  .rep-pres .cara { width: 26px; height: 26px; }
  .rep-pres-nom { font-size: 13px; line-height: 1.05; }
  .rep-votos b { font-size: 16px; }
  .rep-votos small { font-size: 10px; }
}
/* Resultado final: cabecera en una línea (título más chico y botones al lado) para dejarle lugar al resultado. */
@media (orientation: landscape) and (max-height: 520px) {
  .noche-cab { padding: 6px 12px; gap: 10px; }
  .noche-cab h1 { font-size: 21px; line-height: 1.05; margin: 0; }
  .noche-cab .fecha { margin: 2px 0 0; font-size: 11.5px; }
  .noche-botones { flex-wrap: nowrap; gap: 8px; }
  .noche-botones .btn { padding: 7px 12px; font-size: 14px; white-space: nowrap; }
  .noche-tabs > * { padding-top: 6px; padding-bottom: 6px; }
}
/* Online: modos y botones más compactos para que entren sin deslizar. */
@media (orientation: landscape) and (max-height: 520px) {
  .on-caja { gap: 6px; }
  .on-nombre, .on-nombre input { min-height: 0; padding-top: 4px; padding-bottom: 4px; }
  .on-modo { padding: 6px 10px; }
  .on-modo > i { font-size: 22px; }
  .on-modo small { font-size: 11px; line-height: 1.15; }
  .on-caja .mn-modos .mn-circ { width: 64px; border-width: 6px; font-size: 24px; }
  .on-caja .mn-modo { gap: 2px; }
  .on-caja .mn-modo strong { font-size: 15px; }
}

/* Zona segura (notch, isla, barra de inicio): cada pantalla mide el alto útil (--alto, en ajuste.css) en lugar de
   100dvh, así nada queda debajo del recorte ni de la barra. En la compu --alto es igual a 100dvh. */
#app { height: var(--alto); }
.juego, .seleccion, .noche, .sb-pag, .alianzas { height: var(--alto); }
.portada, .menu-ppal { min-height: var(--alto); }
.seleccion.paso-final { max-height: var(--alto); }
/* La barra de abajo ya no suma el margen del sistema: lo pone el body. */
.nav-movil { padding-bottom: 6px; }
/* Carteles fijos que podrían caer debajo del notch o de la barra. */
.girar { padding: max(24px, var(--sa-t)) max(24px, var(--sa-r)) max(24px, var(--sa-b)) max(24px, var(--sa-l)); }
.consejo { bottom: calc(74px + var(--sa-b)); }
.barra > .btn-naranja, .gob-barra > .btn-naranja, .alianzas .barra > .btn-naranja { right: calc(12px + var(--sa-r)); bottom: calc(12px + var(--sa-b)); }
@media (orientation: landscape) and (max-height: 520px) {
  .juego { height: var(--alto); }
  .juego > .nav-movil { padding-bottom: 4px; }
  #app > :not(.juego) { max-height: var(--alto); }
  .rep { height: var(--alto); }
  .caja-modal, .vprov, .vgrupo, .ficha { max-height: calc(var(--alto) - 16px); }
  #modal { padding: max(8px, var(--sa-t)) max(8px, var(--sa-r)) max(8px, var(--sa-b)) max(8px, var(--sa-l)); }
  /* En el celular acostado la barra de inicio de iPhone es fina: alcanza con la mitad de su margen. */
  :root { --sa-b: calc(env(safe-area-inset-bottom, 0px) / 2); }
}
/* Abrir sobres: todo el sobre se puede deslizar para cortarlo (sin que la página se mueva) y en el celular acostado
   entra entero, con aire arriba para que la tira no quede pegada al borde. */
.p2-sobre { touch-action: none; cursor: ew-resize; }
@media (orientation: landscape) and (max-height: 520px) {
  .viaje-t.p2 { gap: 6px; padding: calc(10px + var(--sa-t)) var(--sa-r) var(--sa-b) var(--sa-l); }
  .viaje-t.p2 .p2-zona { height: min(312px, calc(var(--alto) - 84px)); width: calc(min(312px, calc(var(--alto) - 84px)) * .64); }
  .p2-ayuda { font-size: 13px; margin: 0; }
}
.p2-sobre.cae { pointer-events: none; }
.p2-sobre[hidden] { display: none; }
/* Las cartas se arrastran con el dedo sin que el navegador lo tome como desplazamiento. */
.p2-mazo, .p2-pos { touch-action: none; }