/* =========================================================
   Colegio Agropecuario Realicó — Sistema de Gestión Académica
   Hoja de estilos base.

   Paleta y tipografía propias del proyecto: verdes de alfalfa y
   dorado de trigo en vez de la estética genérica de "software SaaS",
   y el gesto de los surcos arados como motivo gráfico de marca.
   ========================================================= */

:root {
    --color-bg: #F5F6F1;
    --color-surface: #FFFFFF;
    --color-surface-2: #EEF1E9;
    --color-ink: #1C2620;
    --color-ink-suave: #566057;
    --color-primary: #3F6B4A;
    --color-primary-fuerte: #2E4F37;
    --color-accent: #C99A2E;
    --color-accent-suave: #EFD9A0;
    --color-line: #DCE0D6;
    --color-danger: #B3432B;
    --color-info: #2F5D73;

    --fuente-display: 'Space Grotesk', system-ui, sans-serif;
    --fuente-texto: 'Inter', system-ui, sans-serif;
    --fuente-datos: 'IBM Plex Mono', 'Courier New', monospace;

    --ancho-sidebar: 264px;
    --ancho-sidebar-colapsado: 76px;
    --alto-navbar: 64px;
    --radio: 10px;
    --sombra: 0 1px 2px rgba(28, 38, 32, 0.06), 0 8px 24px rgba(28, 38, 32, 0.06);
}

[data-tema="oscuro"] {
    --color-bg: #10140F;
    --color-surface: #171C15;
    --color-surface-2: #1D231A;
    --color-ink: #E9ECE3;
    --color-ink-suave: #A7B0A2;
    --color-primary: #6FA37D;
    --color-primary-fuerte: #8CC29A;
    --color-accent: #E8B93A;
    --color-accent-suave: #4A3F1C;
    --color-line: #2A3225;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--fuente-texto);
    -webkit-font-smoothing: antialiased;
    /* Red de seguridad: nada debería desbordar horizontalmente, pero
       si algo lo hace (una tabla ancha, un nombre largo, etc.) esto
       evita que aparezca scroll horizontal en toda la página — el
       elemento causante puede seguir viéndose cortado, pero ya no
       arrastra el resto del layout con él. */
    overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--fuente-display); letter-spacing: -0.01em; }
a { color: var(--color-primary-fuerte); }

.app-shell {
    display: grid;
    grid-template-columns: var(--ancho-sidebar) 1fr;
    grid-template-rows: var(--alto-navbar) 1fr;
    grid-template-areas: "navbar navbar" "sidebar main";
    min-height: 100vh;
    transition: grid-template-columns .2s ease;
}
/* Modo compacto: SOLO existe en escritorio (el JS nunca agrega esta
   clase por debajo de 900px) — antes esta misma clase también se
   usaba en móvil con el significado opuesto ("sidebar abierto"), y
   como esta regla vive fuera del media query tiene más especificidad
   que la regla de móvil, así que siempre ganaba: el texto quedaba
   oculto y el contenido comprimido a los 76px del modo compacto,
   incluso en el celular. Separar los nombres saca ese conflicto de raíz. */
/* min-width: 901px a propósito (el espejo exacto del max-width: 900px
   de más abajo): así, aunque el navegador tenga guardada la cookie
   "sidebar_compacto=1" de una visita anterior en escritorio, esta
   regla queda estructuralmente inalcanzable en pantallas chicas —
   no depende de que el JS "se acuerde" de no aplicar la clase ahí,
   el CSS mismo no puede activarse fuera de escritorio. */
@media (min-width: 901px) {
    .app-shell.app-shell--sidebar-compacto { grid-template-columns: var(--ancho-sidebar-colapsado) 1fr; }
}

.app-navbar {
    grid-area: navbar;
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.25rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
    position: sticky; top: 0; z-index: 20;
}
.app-navbar__toggle {
    border: none; background: transparent; color: var(--color-ink);
    font-size: 1.25rem; padding: .4rem .6rem; border-radius: var(--radio); line-height: 1;
}
.app-navbar__toggle:hover { background: var(--color-surface-2); }
.app-navbar__marca {
    display: flex; align-items: center; gap: .6rem;
    text-decoration: none; color: var(--color-ink);
    font-family: var(--fuente-display); font-weight: 600; margin-right: auto;
    /* min-width:0 es necesario para que este ítem flex pueda encogerse
       más allá del ancho de su propio texto — sin esto, un nombre de
       colegio largo empuja el resto del navbar (y con él, la página
       entera) más allá del ancho de la pantalla en vez de truncarse. */
    min-width: 0;
}
.app-navbar__marca-icono { color: var(--color-primary); display: inline-flex; flex-shrink: 0; }
.app-navbar__marca-texto {
    font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 400px) {
    .app-navbar__marca-texto { display: none; }
}

.app-navbar__buscador {
    position: relative; display: flex; align-items: center;
    width: 260px; max-width: 40vw;
}
.app-navbar__buscador-icono {
    position: absolute; left: .75rem; color: var(--color-ink-suave); font-size: .9rem; pointer-events: none;
}
.app-navbar__buscador-input {
    width: 100%; padding: .45rem .75rem .45rem 2.1rem; border-radius: 999px;
    border: 1px solid var(--color-line); background: var(--color-surface-2); color: var(--color-ink);
    font-size: .85rem;
}
.app-navbar__buscador-input:focus {
    outline: none; border-color: var(--color-primary); background: var(--color-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
@media (max-width: 720px) {
    .app-navbar__buscador { display: none; }
}

.app-navbar__acciones { display: flex; align-items: center; gap: .5rem; }
.app-navbar__accion {
    border: none; background: transparent; color: var(--color-ink);
    font-size: 1.05rem; width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.app-navbar__accion:hover { background: var(--color-surface-2); }
[data-icono-claro] { display: none; }
[data-tema="oscuro"] [data-icono-oscuro] { display: none; }
[data-tema="oscuro"] [data-icono-claro] { display: inline; }
.app-navbar__usuario-btn {
    border: none; background: transparent; display: flex; align-items: center; gap: .5rem;
    color: var(--color-ink); padding: .3rem .5rem; border-radius: var(--radio);
}
.app-navbar__usuario-btn:hover { background: var(--color-surface-2); }
.app-navbar__avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--fuente-display); font-weight: 600; font-size: .85rem; text-transform: uppercase;
}

.app-sidebar {
    grid-area: sidebar; background: var(--color-surface);
    border-right: 1px solid var(--color-line); overflow-y: auto; padding: 1rem .75rem;
}
.app-sidebar__seccion {
    display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-ink-suave); padding: 0 .75rem; margin-bottom: .5rem;
}
.app-sidebar__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.app-sidebar__link {
    display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem;
    border-radius: var(--radio); color: var(--color-ink); text-decoration: none; font-size: .9rem;
}
.app-sidebar__link:hover { background: var(--color-surface-2); }
.app-sidebar__link--activo { background: var(--color-primary); color: #fff; }
.app-sidebar__link--deshabilitado { color: var(--color-ink-suave); cursor: not-allowed; }
.app-sidebar__badge {
    margin-left: auto; font-size: .65rem; background: var(--color-surface-2);
    color: var(--color-ink-suave); padding: .1rem .4rem; border-radius: 999px; white-space: nowrap;
}
@media (min-width: 901px) {
    .app-shell.app-shell--sidebar-compacto .app-sidebar__texto,
    .app-shell.app-shell--sidebar-compacto .app-sidebar__seccion,
    .app-shell.app-shell--sidebar-compacto .app-sidebar__badge { display: none; }
}

.app-main { grid-area: main; padding: 1.75rem; }
.app-main__inner { max-width: 1180px; margin: 0 auto; }

@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar {
        position: fixed; left: 0; top: var(--alto-navbar); bottom: 0;
        width: min(var(--ancho-sidebar), 84vw); transform: translateX(-100%);
        transition: transform .2s ease; z-index: 1040; box-shadow: var(--sombra);
    }
    /* Clase propia de móvil, nunca la de "modo compacto" de escritorio:
       así el texto del sidebar (app-sidebar__texto, etc.) nunca queda
       alcanzado por la regla que lo oculta en modo compacto, porque esa
       regla exige la otra clase, que acá jamás se aplica. */
    .app-shell--sidebar-abierto .app-sidebar { transform: translateX(0); }
    .app-shell--sidebar-abierto .app-sidebar-backdrop { display: block; }
    .app-main { padding: 1.25rem; max-width: 100vw; overflow-x: hidden; }
}

.app-sidebar-backdrop {
    display: none; position: fixed; inset: 0; top: var(--alto-navbar);
    background: rgba(15, 20, 13, .45); z-index: 1035; border: none; padding: 0;
}

.page-header { margin-bottom: 1.5rem; }
.page-header__breadcrumb { font-size: .8rem; margin-bottom: .35rem; }
.page-header__titulo { font-size: 1.5rem; margin: 0 0 .25rem; }
.page-header__subtitulo { color: var(--color-ink-suave); margin: 0; }

/* ---------- Dashboard: accesos directos ---------- */

.accesos-directos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.acceso-directo {
    display: flex; align-items: center; gap: .9rem;
    background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radio);
    padding: 1.1rem 1.3rem; text-decoration: none; color: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: border-color .15s ease, transform .1s ease;
}
.acceso-directo:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.acceso-directo__icono {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-surface-2); color: var(--color-primary-fuerte); font-size: 1.4rem;
}
.acceso-directo__texto { flex: 1; display: flex; flex-direction: column; }
.acceso-directo__texto strong { font-size: 1rem; }
.acceso-directo__texto small { color: var(--color-ink-suave); }
.acceso-directo__flecha { color: var(--color-ink-suave); font-size: 1.1rem; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi-card {
    background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radio);
    padding: 1.1rem 1.2rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .2rem;
}
.kpi-card__icono { color: var(--color-ink-suave); font-size: 1.3rem; margin-bottom: .3rem; }
.kpi-card__valor { font-family: var(--fuente-datos); font-size: 1.8rem; font-weight: 500; }
.kpi-card__etiqueta { font-weight: 600; }
.kpi-card__nota { color: var(--color-ink-suave); font-size: .78rem; }
.kpi-card--disponible .kpi-card__icono { color: var(--color-accent); }

.dashboard-aviso {
    display: flex; gap: .75rem; align-items: flex-start;
    background: var(--color-surface-2); border: 1px solid var(--color-line); border-radius: var(--radio);
    padding: 1rem 1.2rem; color: var(--color-ink-suave);
}
.dashboard-aviso i { color: var(--color-primary); font-size: 1.1rem; margin-top: .15rem; }
.dashboard-aviso p { margin: 0; }

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-fuerte);
    --bs-btn-hover-border-color: var(--color-primary-fuerte);
}

.login-body { margin: 0; min-height: 100vh; background: var(--color-bg); color: var(--color-ink); font-family: var(--fuente-texto); }
.login-tema-toggle {
    position: fixed; top: 1rem; right: 1rem; z-index: 10;
    border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink);
    width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-marca {
    position: relative; background: var(--color-primary-fuerte); color: #F5F6F1;
    display: flex; align-items: center; justify-content: center; padding: 3rem; overflow: hidden;
}
.login-marca__surcos {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(100deg, rgba(245, 246, 241, 0.06) 0px, rgba(245, 246, 241, 0.06) 2px, transparent 2px, transparent 34px);
}
.login-marca__contenido { position: relative; max-width: 380px; text-align: left; }
.login-marca__icono { display: inline-flex; color: var(--color-accent); margin-bottom: 1.25rem; }
.login-marca__titulo { font-size: 1.9rem; line-height: 1.15; margin: 0 0 .75rem; }
.login-marca__bajada { color: rgba(245, 246, 241, 0.82); margin: 0; }
.login-formulario { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-formulario__card {
    width: 100%; max-width: 380px; background: var(--color-surface); border: 1px solid var(--color-line);
    border-radius: var(--radio); padding: 2rem; box-shadow: var(--sombra);
}
.login-formulario__titulo { margin: 0 0 .25rem; font-size: 1.3rem; }
.login-formulario__subtitulo { color: var(--color-ink-suave); margin: 0 0 1.25rem; font-size: .9rem; }
.login-formulario__boton { margin-top: .5rem; }
.login-formulario__ayuda { margin: 1.1rem 0 0; font-size: .8rem; color: var(--color-ink-suave); text-align: center; }
@media (max-width: 860px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-marca { padding: 2.5rem 1.5rem; min-height: 220px; }
}

.pagina-error {
    min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center;
    background: var(--color-bg); color: var(--color-ink); font-family: var(--fuente-texto);
}
.pagina-error__caja { text-align: center; }
.pagina-error__caja h1 { font-size: 4rem; margin: 0; color: var(--color-primary); }

.toast-contenedor { position: fixed; top: 1rem; right: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; }
.toast--grande { min-width: 320px; font-size: 1rem; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.toast--grande .toast-body { padding: .9rem 1rem; }
.toast--grande .bi { font-size: 1.15rem; vertical-align: -2px; }

.admin-subnav .nav-link { color: var(--color-ink-suave); border-radius: var(--radio); font-size: .9rem; padding: .45rem .9rem; }
.admin-subnav .nav-link.active { background: var(--color-primary); color: #fff; }
.admin-subnav .nav-link:not(.active):hover { background: var(--color-surface-2); }

.filtros-card, .tabla-card {
    background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radio);
    padding: 1.1rem 1.2rem; box-shadow: var(--sombra);
}

/* ---------- Asistencia: tarjetas táctiles por alumno ---------- */

.lista-asistencia { display: flex; flex-direction: column; gap: .6rem; }
.asistencia-fila {
    background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radio);
    padding: .9rem 1rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center;
}
.asistencia-fila__info { display: flex; flex-direction: column; }
.asistencia-fila__info strong { font-size: .95rem; }
.asistencia-fila__legajo { font-family: var(--fuente-datos); font-size: .78rem; color: var(--color-ink-suave); }
.asistencia-fila__obs { grid-column: 1 / -1; }
.asistencia-fila__horarios { grid-column: 1 / -1; display: flex; gap: .75rem; max-width: 320px; }
.asistencia-fila__horarios > div { flex: 1; }

.estado-selector { display: flex; gap: .4rem; flex-wrap: wrap; }
.estado-selector__input {
    position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.estado-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 42px; min-width: 64px; padding: .4rem .8rem;
    border-radius: 999px; border: 1.5px solid var(--color-line);
    background: var(--color-surface-2); color: var(--color-ink-suave);
    font-size: .82rem; font-weight: 600; cursor: pointer; user-select: none;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.estado-selector__input:focus-visible + .estado-chip { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.estado-chip:hover { border-color: var(--color-primary); }

.estado-selector__input:checked + .estado-chip--presente { background: #D9EFDD; border-color: #4C9A5C; color: #245C31; }
.estado-selector__input:checked + .estado-chip--ausente { background: #F8D7D9; border-color: #C04650; color: #7A1F27; }
.estado-selector__input:checked + .estado-chip--tarde { background: #FBEBC5; border-color: #C99A2E; color: #7A5A0F; }
.estado-selector__input:checked + .estado-chip--justificado { background: #D6E4F0; border-color: #3F76A8; color: #1F4A6E; }

[data-tema="oscuro"] .estado-selector__input:checked + .estado-chip--presente { background: #21331F; border-color: #4C9A5C; color: #A6E6B4; }
[data-tema="oscuro"] .estado-selector__input:checked + .estado-chip--ausente { background: #3A1E20; border-color: #C04650; color: #F4B4B8; }
[data-tema="oscuro"] .estado-selector__input:checked + .estado-chip--tarde { background: #362C11; border-color: #C99A2E; color: #F0D384; }
[data-tema="oscuro"] .estado-selector__input:checked + .estado-chip--justificado { background: #1B2B39; border-color: #3F76A8; color: #A9CDEB; }

/* En mobile: la fila pasa a apilarse (info arriba, chips abajo, ancho completo),
   y el botón de guardar queda fijo abajo de la pantalla para no tener que
   volver a scrollear hasta el final después de marcar cada alumno. */
@media (max-width: 640px) {
    .asistencia-fila { grid-template-columns: 1fr; }
    .estado-chip { flex: 1 1 auto; min-width: 0; }
    .form-asistencia-mobile { padding-bottom: 5.5rem; }
    .barra-guardar-mobile {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        background: var(--color-surface); border-top: 1px solid var(--color-line);
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 10px rgba(0,0,0,.08);
    }
}

.permisos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem 1.5rem; }
.permisos-grid__item { display: flex; align-items: flex-start; gap: .5rem; padding: .35rem 0; }

.auditoria-json {
    background: var(--color-surface-2); border: 1px solid var(--color-line); border-radius: var(--radio);
    padding: .6rem .75rem; font-family: var(--fuente-datos); font-size: .78rem;
    white-space: pre-wrap; word-break: break-word; max-width: 420px;
}
details > summary { cursor: pointer; color: var(--color-primary-fuerte); }

/* ---------- Alumnos: avatares, ficha, datos personales ---------- */

.avatar-alumno,
.avatar-persona {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-surface-2); flex-shrink: 0;
}
.avatar-alumno--inicial,
.avatar-persona--inicial {
    background: var(--color-primary); color: #fff; font-family: var(--fuente-display);
    font-weight: 600; text-transform: uppercase;
}
.avatar-alumno--grande,
.avatar-persona--grande { width: 72px; height: 72px; font-size: 1.6rem; }

.ficha-alumno-header {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.ficha-alumno-header__datos { flex: 1; min-width: 240px; }
.ficha-alumno-header__acciones { display: flex; align-items: center; gap: .5rem; }

.ficha-datos {
    display: grid; grid-template-columns: 200px 1fr; gap: .6rem 1rem; margin: 0;
}
.ficha-datos dt { color: var(--color-ink-suave); font-weight: 500; }
.ficha-datos dd { margin: 0; }
@media (max-width: 700px) {
    .ficha-datos { grid-template-columns: 1fr; }
    .ficha-datos dt { margin-top: .5rem; }
}

/* ---------- Horarios: grilla semanal ---------- */

.horario-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .75rem;
}
.horario-grid__dia { min-width: 0; }
.horario-grid__dia-titulo {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-ink-suave); border-bottom: 1px solid var(--color-line);
    padding-bottom: .35rem; margin-bottom: .5rem;
}
.horario-bloque {
    background: var(--color-surface-2);
    border: 1px solid var(--color-line);
    border-radius: var(--radio);
    padding: .5rem .6rem;
    margin-bottom: .5rem;
    font-size: .8rem;
}
.horario-bloque__hora { font-family: var(--fuente-datos); font-weight: 600; color: var(--color-primary-fuerte); }
.horario-bloque__materia { font-weight: 600; margin-top: .1rem; }
.horario-bloque__detalle { color: var(--color-ink-suave); font-size: .75rem; }

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

/* ---------- Tour guiado de bienvenida ---------- */

.tour-overlay {
    position: fixed; inset: 0; z-index: 1090;
    background: rgba(15, 20, 13, .55);
}

.tour-resaltado {
    position: relative; z-index: 1091;
    outline: 3px solid var(--color-primary);
    outline-offset: 4px; border-radius: 10px;
    background: var(--color-surface);
}

.tour-card {
    position: fixed; z-index: 1092;
    width: min(340px, calc(100vw - 32px));
    background: var(--color-surface); border-radius: var(--radio);
    padding: 1.25rem 1.4rem; box-shadow: 0 10px 30px rgba(0,0,0,.25);
    border: 1px solid var(--color-line);
}
.tour-card__contador { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary-fuerte); margin-bottom: .4rem; }
.tour-card__titulo { font-size: 1.05rem; margin: 0 0 .5rem; font-family: var(--fuente-display); }
.tour-card__texto { font-size: .88rem; color: var(--color-ink); margin: 0 0 1.1rem; line-height: 1.45; }
.tour-card__botones { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tour-card__saltar { background: none; border: none; color: var(--color-ink-suave); font-size: .82rem; cursor: pointer; padding: .3rem 0; }
.tour-card__saltar:hover { color: var(--color-ink); text-decoration: underline; }
.tour-card__nav { display: flex; gap: .5rem; }
.tour-card__anterior, .tour-card__siguiente {
    border: none; border-radius: 999px; padding: .45rem 1rem; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.tour-card__anterior { background: var(--color-surface-2); color: var(--color-ink); }
.tour-card__siguiente { background: var(--color-primary); color: #fff; }
.tour-card__siguiente:hover { background: var(--color-primary-fuerte); }

@media (max-width: 900px) {
    /* Refuerzo en CSS de lo que ya hace tour.js: en celular/tablet la
       tarjeta del recorrido siempre queda centrada, nunca "pegada" al
       elemento resaltado — así el texto no salta de lugar en cada paso. */
    .tour-card {
        top: 50% !important; left: 50% !important; right: auto !important;
        transform: translate(-50%, -50%) !important;
    }
}