/* ===========================================================
   INTERMODA · Shell del kiosco (mapa + panel lateral)
   Componentes adaptados de KioskoIntermoda2/styles.css a los
   tokens reales de styles/theme.css. Se carga después de
   theme.css. No incluye el "device mockup" del prototipo
   (stage/device/bezel) — en producción el kiosko ocupa todo
   el viewport.
   =========================================================== */

/* Resets acotados a .kiosk para no afectar otras vistas (index.php, map.php,
   fallback SSR de pavilion/expositor/event/search) que cargan el mismo head.php
   pero no usan el layout de shell. */
/* Sin `background: none` aquí a propósito: el selector compuesto ".kiosk
   button" tiene más especificidad que cualquier regla de una sola clase
   (.header-home-btn, .home-action, .search-clear, .panel-back, etc.), así
   que pisaba el fondo de TODOS los botones del shell. Cada botón real ya
   define su propio background, así que basta con resetear borde/cursor/tipografía. */
.kiosk button { font: inherit; color: inherit; border: none; cursor: pointer; }
.kiosk input { font: inherit; color: inherit; outline: none; border: none; background: transparent; }

/* ===========================================================
   LAYOUT GENERAL
   =========================================================== */
.kiosk {
    height: 100vh;
    height: 100dvh; /* en móvil, 100vh no descuenta la barra de direcciones del navegador y corta contenido; dvh sí. Fallback: si el navegador no soporta dvh, ignora esta línea y usa la de arriba. */
    display: grid;
    grid-template-rows: 112px 1fr 80px;
    position: relative;
    background: var(--bg);
    overflow: hidden;
}

/* ===========================================================
   HEADER
   =========================================================== */
.app-header {
    grid-row: 1;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    background: var(--primary);
    box-shadow: var(--shadow-1);
}
.brand { display: flex; align-items: center; }
.brand-logo { height: 44px; width: auto; display: block; }
.header-meta { display: flex; align-items: center; }
.meta-block { display: flex; align-items: center; gap: 10px; }
.meta-block.clock { flex-direction: column; align-items: center; gap: 0; }
.clock-time { font-size: 22px; font-weight: 700; color: var(--on-primary); line-height: 1.1; }
.clock-date { font-size: 12px; color: rgba(255,255,255,.75); text-transform: capitalize; margin-top: 2px; }

/* Botón "Inicio" fijo en el header (reemplaza al FAB flotante: ese dependía
   de que showView() lo mostrara/ocultara y en algunos flujos se quedaba sin
   actualizar — el header es persistente y siempre visible, sin ese riesgo). */
.header-home-btn {
    display: flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 18px 0 14px; border-radius: var(--radius-full);
    background: rgba(255,255,255,.16); color: var(--on-primary);
    font-size: 15px; font-weight: 600; flex-shrink: 0;
}
.header-home-btn:active { background: rgba(255,255,255,.28); }
.header-home-btn .material-symbols-rounded { font-size: 22px !important; color: var(--on-primary); }

/* ===========================================================
   MAPA PERSISTENTE (capa de fondo compartida por home/explorar/panel)
   =========================================================== */
.kiosk-map-layer {
    grid-row: 1 / -1;
    grid-column: 1;
    position: relative;
}
.kiosk-map-layer,
.kiosk-map-layer #map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#map { background: var(--surface-2); z-index: 1; }
.clickable-area {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
}
.leaflet-popup-content-wrapper { border-radius: var(--radius-sm) !important; }

/* ===========================================================
   VIEWS (encima del mapa persistente)
   =========================================================== */
.view-container {
    grid-row: 2 / 3;
    grid-column: 1;
    position: relative;
    z-index: 10;
    overflow: hidden; /* cada .view maneja su propio scroll interno si lo necesita */
    pointer-events: none; /* deja pasar clics/drag/zoom al mapa donde no hay contenido */
}
.view[hidden] { display: none; }
/* Solo el contenido interactivo real recapta punteros; el resto del área de
   cada vista queda transparente a eventos para poder arrastrar/hacer zoom
   al mapa persistente que está debajo. */
.home-card,
.view-explore-pabellones,
.side-panel {
    pointer-events: auto;
}

/* HOME */
.view-home {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.home-card {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-3);
    padding: 40px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.home-card-head { text-align: center; }
.home-eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.home-title { font-size: 34px; font-weight: 800; color: var(--text); letter-spacing: -.02em; line-height: 1.1; margin-top: 8px; }

.search-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 64px;
    padding: 0 20px;
    background: var(--surface);
    border: 2px solid var(--outline);
    border-radius: var(--radius-full);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-bar:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-container); }
.search-bar .material-symbols-rounded { font-size: 26px !important; color: var(--text-3); }
.search-bar:focus-within > .material-symbols-rounded:first-child { color: var(--primary); }
.search-bar input { flex: 1; min-width: 0; height: 100%; font-size: 18px; color: var(--text); }
.search-bar input::placeholder { color: var(--text-3); }
.search-clear {
    width: 36px; height: 36px; border-radius: var(--radius-full);
    display: none; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--text-2); flex-shrink: 0;
}
.search-clear.visible { display: flex; }
.filter-icon {
    width: 36px; height: 36px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--text-2); flex-shrink: 0;
}
.filter-icon .material-symbols-rounded { font-size: 20px !important; color: inherit; }

.home-divider { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.home-divider::before, .home-divider::after { content: ""; flex: 1; height: 1px; background: var(--outline); }

.home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home-action {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px 16px; min-height: 150px;
    background: var(--surface); border: 2px solid var(--outline); border-radius: var(--radius-lg);
    text-align: center; transition: transform .2s var(--ease), border-color .2s, background .2s;
}
.home-action:active { transform: scale(.97); border-color: var(--primary); background: var(--primary-container); }
.home-action-icon { width: 64px; height: 64px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.home-action-icon .material-symbols-rounded { font-size: 34px !important; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.home-action-icon-primary { background: var(--primary-container); color: var(--primary); }
.home-action-icon-accent { background: var(--accent-container); color: #b34400; }
.home-action-title { font-size: 17px; font-weight: 700; color: var(--text); }
.home-action-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; }

.home-action-secondary {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    background: var(--surface); border: 2px solid var(--outline); border-radius: var(--radius-lg);
    text-align: left; transition: transform .2s var(--ease), border-color .2s, background .2s;
}
.home-action-secondary:active { transform: scale(.98); border-color: var(--primary); background: var(--primary-container); }
.home-action-secondary > .material-symbols-rounded {
    font-size: 24px !important; color: var(--primary); background: var(--primary-container);
    width: 42px; height: 42px; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.home-action-sec-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-action-sec-title { font-size: 16px; font-weight: 700; color: var(--text); }
.home-action-sec-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.home-action-sec-arrow { font-size: 20px !important; color: var(--text-3); }

.home-next-event {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--surface-2); border-radius: var(--radius-md); cursor: pointer;
}
.home-next-event-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.home-next-event-text { flex: 1; min-width: 0; }
.home-next-event-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.home-next-event-name { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-next-event-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.home-next-event-arrow { font-size: 18px !important; color: var(--text-3); }

/* EXPLORAR PABELLONES */
.view-explore-pabellones { height: 100%; overflow-y: auto; padding: 24px 40px 40px; background: rgba(251,248,251,.96); backdrop-filter: blur(6px); }
.explore-head { padding: 8px 0 24px; }
.explore-head h1 { font-size: 32px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.explore-head p { font-size: 15px; color: var(--text-2); margin-top: 8px; }
.pabellon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pabellon-card {
    position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3;
    box-shadow: var(--shadow-1); cursor: pointer; background: var(--surface-2);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pabellon-card:active { transform: scale(.98); box-shadow: var(--shadow-2); }
.pabellon-cover { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pabellon-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; color: #fff; z-index: 2; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.65) 100%); }
.pabellon-name { font-size: 18px; font-weight: 700; }
.pabellon-count { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; margin-top: 6px; background: rgba(255,255,255,.22); padding: 4px 10px; border-radius: var(--radius-full); }
.pabellon-count .material-symbols-rounded { font-size: 14px !important; }

/* PANEL LATERAL (mapa + lista/detalle) */
.view-map { height: 100%; }
.side-panel {
    position: absolute; top: 0; bottom: 0; left: 0; width: 399px;
    background: var(--surface); border-right: 1px solid var(--outline);
    box-shadow: var(--shadow-3); display: flex; flex-direction: column; overflow: hidden;
}
.panel-header { padding: 18px 18px 14px; border-bottom: 1px solid var(--outline); display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; position: relative; }
.panel-header-top { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.panel-back { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); flex-shrink: 0; }
.panel-title-wrap { flex: 1; min-width: 0; }
.panel-title { font-size: 20px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-subtitle { font-size: 13px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-bar-panel { height: 52px; padding: 0 14px; gap: 10px; border: 1.5px solid var(--outline); }
.search-bar-panel input { font-size: 15px; }
.filter-container { position: relative; }
.filter-options {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    margin-top: 8px; padding: 14px; gap: 16px; background: var(--surface);
    border: 1px solid var(--outline); border-radius: var(--radius-md); box-shadow: var(--shadow-3);
}
.filter-options.d-flex-visible { display: flex; }
.checkbox-label { display: block; font-size: 13px; color: var(--text-2); padding: 4px 0; }
.checkbox-label input { accent-color: var(--accent); margin-right: 6px; }
.panel-body { flex: 1; overflow-y: auto; }

.panel-list { padding: 6px 8px 12px; }
.panel-list-section-title { padding: 14px 10px 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.panel-list-item { display: flex; align-items: center; gap: 14px; padding: 14px 10px; border-radius: var(--radius-md); cursor: pointer; transition: background .2s var(--ease); }
.panel-list-item:active { background: var(--surface-2); }
.panel-list-item + .panel-list-item { border-top: 1px solid var(--outline); }
.panel-list-item.no-divider + .panel-list-item { border-top: none; }
.panel-list-thumb { width: 56px; height: 56px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; flex-shrink: 0; background-size: cover; background-position: center; }
.panel-list-thumb .material-symbols-rounded { font-size: 28px !important; color: #fff; }
.panel-list-info { flex: 1; min-width: 0; }
.panel-list-name { font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-list-meta { font-size: 12px; color: var(--text-3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-list-tags { font-size: 11px; opacity: .8; }
.panel-list-tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-full); flex-shrink: 0; }
.panel-list-tag.tag-pab { color: var(--primary); background: var(--primary-container); }
.panel-list-tag.tag-eve { color: #b34400; background: var(--accent-container); }
.panel-empty { padding: 60px 20px; text-align: center; color: var(--text-3); }
.panel-empty .material-symbols-rounded { font-size: 44px !important; color: var(--outline-strong); margin-bottom: 8px; }
.panel-empty-title { font-size: 15px; font-weight: 600; color: var(--text-2); }
.panel-empty-sub { font-size: 12px; margin-top: 4px; }

.panel-detail { padding: 18px 18px 24px; }
.panel-detail-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.panel-detail-image { width: 96px; height: 96px; border-radius: var(--radius-lg); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 30px; background-size: cover; background-position: center; }
.panel-detail-head-info { flex: 1; min-width: 0; }
.panel-detail-eyebrow { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-full); background: var(--primary-container); color: var(--primary); margin-bottom: 8px; }
.panel-detail-eyebrow.is-event { background: var(--accent-container); color: #b34400; }
.panel-detail-name { font-size: 19px; font-weight: 800; color: var(--text); line-height: 1.2; }
.panel-detail-razon { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.panel-detail-desc { font-size: 14px; color: var(--text-2); margin-top: 10px; line-height: 1.4; }

/* Ficha de evento: la miniatura del header es el propio QR (en vez de un
   ícono decorativo), así la descripción puede ir a todo el ancho abajo. */
.panel-detail-qr-block { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.panel-detail-image-qr { background: #fff; border: 1px solid var(--outline); padding: 8px; }
.panel-detail-qr-img { width: 100%; height: 100%; object-fit: contain; }
.panel-detail-qr-caption { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.panel-description-text { font-size: 13px; line-height: 1.55; color: var(--text-2); white-space: pre-line; }

.panel-qr-hero { display: flex; align-items: center; gap: 14px; padding: 16px; background: linear-gradient(135deg, var(--primary-container) 0%, var(--accent-container) 100%); border-radius: var(--radius-lg); margin-bottom: 18px; }
.panel-qr-hero-img { width: 88px; height: 88px; background: #fff; border-radius: var(--radius-sm); padding: 6px; flex-shrink: 0; box-shadow: var(--shadow-1); object-fit: contain; }
.panel-qr-hero-text { flex: 1; min-width: 0; }
.panel-qr-hero-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.panel-qr-hero-title { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 4px; }
.panel-qr-hero-sub { font-size: 12px; color: var(--text-2); margin-top: 4px; }

.panel-section { margin-top: 18px; }
.panel-section-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.panel-section-title .material-symbols-rounded { font-size: 16px !important; color: var(--primary); }
.panel-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-chip { font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--text-2); padding: 6px 12px; border-radius: var(--radius-full); border: 1px solid var(--outline); }
.panel-chip.is-stand { background: var(--accent-container); color: #8a3a00; border: none; font-weight: 700; }

.panel-meta-list { display: flex; flex-direction: column; gap: 8px; }
.panel-meta-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface-1); border: 1px solid var(--outline); border-radius: var(--radius-md); }
.panel-meta-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--primary-container); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.panel-meta-icon .material-symbols-rounded { font-size: 18px !important; }
.panel-meta-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.panel-meta-value { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 1px; }

/* Etiqueta "Estás aquí" / destino sobre el mapa */
.map-tag { position: absolute; background: var(--primary); color: #fff; padding: 6px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; box-shadow: var(--shadow-2); pointer-events: none; z-index: 15; }
.map-tag.is-destination { background: var(--accent); }

/* Pines de origen (tótem) y destino (stand) en la ruta trazada */
.map-pin {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; border: 3px solid #fff; box-shadow: var(--shadow-2);
}
.map-pin .material-symbols-rounded {
    font-size: 24px !important;
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.map-pin-origin { background: var(--primary); }
.map-pin-destination { background: var(--accent); }

/* Línea de ruta punteada en movimiento (marcha hormiga) */
.route-line-animated {
    stroke-dasharray: 14 10;
    animation: routeLineDash 0.9s linear infinite;
}
@keyframes routeLineDash {
    to { stroke-dashoffset: -24; }
}

/* Botón grande "Buscar" (lupa) del teclado en pantalla */
.simple-keyboard .hg-button-ent {
    flex-grow: 3 !important;
    background-color: var(--primary) !important;
    color: var(--on-primary) !important;
    font-weight: 600;
    font-size: 1.1em;
}
.simple-keyboard .hg-button-ent:active {
    background-color: var(--primary-hover) !important;
}

/* TECLADO EN PANTALLA COMPARTIDO (docked, se acopla al buscador con foco).
   El wrapper controla posición/visibilidad; el botón "Cerrar" flota arriba
   a la derecha, fuera del propio teclado, para que sea inconfundible. */
.kiosk .keyboard-wrap {
    position: absolute;
    left: 24px; right: 24px; bottom: 16px;
    z-index: 50;
    visibility: hidden;
    opacity: 0;
    /* Clave: sin esto, el teclado (forzado visible más abajo con !important
       para contrarrestar el `visibility:hidden` legacy de style.css) seguía
       recibiendo clics aunque estuviera invisible, tapando el contenido de
       debajo (p. ej. los resultados de búsqueda) y reabriéndose al tocarlo. */
    pointer-events: none;
    transition: visibility 0s linear .2s, opacity .2s ease;
}
.kiosk .keyboard-wrap.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}
.kiosk .keyboard-wrap .simple-keyboard {
    position: static;
    margin-top: 0;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: var(--shadow-3);
}
.keyboard-close-btn {
    position: absolute;
    top: -64px; right: 0;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--outline);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-2);
    box-shadow: var(--shadow-3);
    z-index: 51;
}
.keyboard-close-btn .material-symbols-rounded { font-size: 26px !important; }
.keyboard-close-btn:active { background: var(--surface-2); }

/* FOOTER */
.app-footer {
    grid-row: 3;
    z-index: 20;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--surface); border-top: 1px solid var(--outline);
    color: var(--text-3); font-size: 13px;
}

/* LOGO BOX (logos de expositores) */
.logo-box { position: relative; overflow: hidden; background: var(--surface-2); }
.logo-box .logo-bg, .logo-box .logo-fg { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-box .logo-bg { object-fit: cover; filter: blur(14px) saturate(1.3); transform: scale(1.4); z-index: 0; }
.logo-box .logo-fg { object-fit: contain; padding: 10%; z-index: 1; background: rgba(255,255,255,.9); }

@media (max-width: 900px) {
    .pabellon-grid { grid-template-columns: repeat(2, 1fr); }
}

/* BOTÓN ALTERNAR MAPA/PANEL (solo móvil, ver @media 720px más abajo: en
   escritorio/tótem el panel y el mapa conviven lado a lado y este botón no
   tiene sentido, por eso el display:none es incondicional aquí). */
.map-toggle-btn {
    display: none;
    position: absolute; bottom: 24px; right: 24px; z-index: 40;
    align-items: center; gap: 8px; height: 48px; padding: 0 20px;
    border-radius: var(--radius-full);
    background: var(--primary); color: var(--on-primary);
    font-size: 14px; font-weight: 700; box-shadow: var(--shadow-3);
}
.map-toggle-btn .material-symbols-rounded { font-size: 20px !important; }

/* ===========================================================
   RESPONSIVE · MÓVIL
   El shell nació para el tótem fijo (1080x1980). Estos breakpoints lo
   adaptan a un navegador de celular sin tocar el layout de escritorio/tótem
   (todo lo de arriba sigue siendo el caso base, "desktop-first").
   =========================================================== */
@media (max-width: 720px) {
    .kiosk { grid-template-rows: 68px 1fr 52px; }

    .app-header { padding: 0 14px; }
    .brand-logo { height: 30px; }
    .clock-time { font-size: 14px; }
    .clock-date { font-size: 10px; }
    .header-home-btn { height: 36px; padding: 0 14px 0 10px; font-size: 13px; gap: 6px; }
    .header-home-btn .material-symbols-rounded { font-size: 18px !important; }

    /* En pantalla angosta el panel deja de convivir con el mapa (399px lo
       cubriría casi todo) y pasa a ocupar toda la vista, como una pantalla
       de lista/detalle normal de app móvil. panelFitPadding() en
       kiosk-panel.js mide el ancho real del panel en vivo, así que no hace
       falta tocar JS para esto. */
    .side-panel { width: 100%; border-right: none; }
    /* Con el toggle activo (kiosk-panel.js agrega .map-focus a .kiosk), el
       panel se oculta y deja ver el mapa/ruta a pantalla completa. */
    .kiosk.map-focus .side-panel { display: none; }
    .map-toggle-btn:not([hidden]) { display: flex; }

    .view-home { padding: 16px; }
    .home-card { max-width: 100%; padding: 28px 20px 24px; gap: 16px; }
    .home-title { font-size: 24px; }
    .search-bar { height: 54px; padding: 0 14px; }
    .search-bar input { font-size: 16px; } /* <16px dispara zoom automático al enfocar en iOS Safari */
    .home-actions { gap: 10px; }
    .home-action { min-height: 118px; padding: 16px 10px; gap: 10px; }
    .home-action-icon { width: 52px; height: 52px; }
    .home-action-icon .material-symbols-rounded { font-size: 28px !important; }
    .home-action-title { font-size: 15px; }
    .home-action-secondary { padding: 14px 14px; }

    .view-explore-pabellones { padding: 16px 16px 24px; }
    .explore-head h1 { font-size: 24px; }
    .pabellon-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .panel-header { padding: 14px 14px 10px; }
    .panel-detail { padding: 14px 14px 20px; }
    .search-bar-panel input { font-size: 16px; }

    /* El QR sirve para que un tótem/otra persona se lleve la ficha al
       celular — en el propio celular no tiene sentido (ya está viendo la
       ficha ahí mismo). Se oculta el QR y todo lo que habla de "escanear",
       pero la descripción real del expositor/evento se mantiene visible. */
    .panel-detail-qr-block { display: none; }
    .panel-qr-hero-img,
    .panel-qr-hero-label,
    .panel-qr-hero-title { display: none; }
    .panel-qr-hero { background: none; padding: 0; gap: 0; }
    .panel-qr-hero-sub { font-size: 13px; color: var(--text-2); }
}

@media (max-width: 380px) {
    /* Muy poco ancho: se sacrifica la fecha/hora del header para que el logo
       y el botón de Inicio no queden apretados. */
    .header-meta { display: none; }
    .header-home-btn span:not(.material-symbols-rounded) { display: none; }
    .header-home-btn { width: 36px; height: 36px; padding: 0; justify-content: center; gap: 0; }

    .home-actions { grid-template-columns: 1fr; }
}