:root {
    --brand-blue: #00f2ff;
    --brand-purple: #b000ff;
    --brand-amber: #ffb700;
    --bg-dark: #050505;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    color: white;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}
.accessible-focus:focus-visible {
    outline: 4px solid var(--brand-blue) !important;
    outline-offset: 4px !important;
    background-color: #1a202c !important;
}
/* Conexión en la cuadrícula del recorrido: el botón grande lleva directo al
   destino; la dirección/relación se ve chica debajo del nombre y el botón
   "i" de la esquina abre el detalle (indicaciones, obstáculos, aclaración). */
.grid-link-cell { position: relative; }
.grid-link-dir {
    font-size: 0.8rem;
    font-weight: 600;
    color: #c4b5fd;
    line-height: 1.2;
}
.grid-link-cell > button:first-child { padding-right: 2.75rem; padding-left: 2.75rem; }
.grid-link-info {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 2px solid #a78bfa;
    background: #1e1b2e;
    color: #ede9fe;
    font: italic 700 1.05rem/1 Georgia, 'Times New Roman', serif;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grid-link-info:hover { background: #4c1d95; }
.tab-active {
    border-bottom: 4px solid var(--brand-blue);
    color: var(--brand-blue);
}
/* Encabezados de sección del recorrido (Elementos, Obstáculos, Conexiones,
   Rutas frecuentes, etc.). Se enfocan por programa (tabindex="-1") desde la
   navegación por deslizar, pero eran <h3> de ancho completo con texto
   centrado: las zonas en blanco a los lados del texto quedaban DENTRO del
   encabezado, así que tocar ahí —o explorarlo con TalkBack— lo enfocaba y
   pintaba su borde aunque se tocara "un lugar vacío". Se limita el ancho al
   del texto (centrado con márgenes auto) para que esas zonas dejen de
   pertenecer al encabezado; el texto sigue centrado y multilínea. */
#welcome-routes-title,
#exp-pois-title,
#exp-obstacles-title,
#exp-links-title,
#exp-grid-items-title,
#exp-grid-links-title,
#complementary-links-title {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}
/* Barra inferior de acciones del recorrido: fija al pie del viewport y siempre
   visible mientras se recorre. Tailwind precompilado no trae la utilidad
   `fixed` ni el inset del área segura, así que se resuelven acá (sin rebuild).
   La visibilidad la maneja updateTabsUI con .hidden (solo en la pestaña
   explorer). z-40 igual que el header sticky: uno arriba, otro abajo, no se
   pisan. */
.exp-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.7);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Interruptor de modo de visualización dentro de la barra inferior. role=switch:
   aria-checked="true" = cuadrícula. Muestra "Vista" + dos simbolitos (☰ clásico,
   ▦ cuadrícula); el del modo activo se resalta con FONDO además de color, para no
   depender solo del color (WCAG 1.4.1). Compacto para caber en una fila en móvil.
   La etiqueta va en texto claro de alto contraste. Tailwind precompilado no trae
   estas utilidades, van acá. */
.exp-switch {
    background-color: hsla(0, 0%, 100%, 0.1);
    min-height: 44px;
}
.exp-switch:hover {
    background-color: hsla(0, 0%, 100%, 0.2);
}
.exp-switch-label {
    color: rgb(229, 231, 235); /* gray-200 */
}
.exp-switch-syms {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.exp-sym {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    color: hsla(0, 0%, 100%, 0.55);
    transition: color 0.15s ease, background-color 0.15s ease;
}
/* El símbolo del modo activo (clásico si aria-checked="false", cuadrícula si
   "true") se resalta con fondo cyan y glifo oscuro: contraste alto y una pista
   no cromática (la caja rellena) que distingue el estado. */
.exp-switch[aria-checked="false"] .exp-sym-list,
.exp-switch[aria-checked="true"] .exp-sym-grid {
    color: #0a1416;
    background-color: rgb(6, 182, 212); /* cyan-500 */
}

/* Reserva espacio al pie para que ni el contenido ni el footer queden tapados
   por la barra fija. Se aplica a #view-map (que engloba el contenido y el footer)
   y solo en la pestaña Recorrer: updateTabsUI la togglea junto con la barra.
   9rem cubre el alto de 2 filas en móvil; se suma el área segura de iOS. */
.exp-has-bottom-bar {
    padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

dialog {
    margin: auto;
    background-color: #111;
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 1.5rem; 
    padding: 0;
    width: 95%;
    max-width: 600px;
    max-height: 90vh;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}
dialog[open] {
    display: flex;
    flex-direction: column;
    animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

audio {
    width: 100%;
    height: 48px;
    border-radius: 0.75rem;
    outline: none;
}
audio::-webkit-media-controls-panel {
    background-color: #1a1a1a;
    color: white;
}
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
    color: white;
}

/* Cuadrados de la pestaña Menú (categorías y platos): proporción 1:1
   (aspect-square no está en el tailwind precompilado). El contenido puede
   empujar el alto si el nombre es largo, por eso min-height y no height fijo. */
.menu-tile {
    aspect-ratio: 1 / 1;
    min-height: 6rem;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }