/* ==========================================================================
   RAUMLAB-CHROME — header, panel de navegación y footer compartidos por
   TODOS los módulos de RaumLab (in_SITE, trans_FORMA, espacio_INM).

   ÚNICO archivo real — no hay una copia por módulo. Antes cada módulo tenía
   su propia copia de este archivo ("sin build step, no hay forma de
   compartir un solo archivo real" fue la decisión original), y terminaron
   desincronizándose sin que nadie lo notara hasta compararlos lado a lado:
   font-weight/color faltante en el body de dos de los tres (letra más
   fina/gruesa entre módulos), el mecanismo de "Volver al Inicio" de
   in_SITE quedado atrás. Vive acá (en raumlab/, el ancestro común de los
   tres) precisamente para que eso deje de poder pasar — no hace falta build
   step para que tres carpetas hermanas referencien un mismo archivo por
   ruta relativa, que es todo lo que esto necesitaba en realidad.

   Si algo necesita ser distinto en un módulo puntual, ese módulo lo
   sobreescribe en SU PROPIO CSS (cargado después de este) — no se vuelve a
   bifurcar este archivo.
   ========================================================================== */

:root {
    --bg-navy: #141414;
    --surface-border: rgba(255, 255, 255, 0.09);
    --border-fine: rgba(242, 239, 233, 0.3);
    --text-color: #ffffff;
    --font-geist: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-space: 'Space Grotesk', sans-serif;
    --header-h: 118px;
    --footer-h: 72px;
}

html {
    background-color: var(--bg-navy);
}

body.rc-body {
    color: var(--text-color);
    font-family: var(--font-geist);
    font-weight: 300;
    min-height: 100vh;
    background-color: var(--bg-navy);
    position: relative;
}

/* CAPA DE FONDO — antes tenía fondo.jpg (16MB); gris oscuro liso, mismo
   color que usa raumlab/style.css para el hub. */
.rc-bg-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: var(--bg-navy);
}

/* CONTENEDOR FIJO (BARRA SUPERIOR) */
.rc-header-stack {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
}

/* position:relative como referencia para el ícono centrado (position:
   absolute, independiente del flujo flex de hamburguesa/texto/idioma). */
.rc-topbar {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 14px 32px 10px;
    /* El ícono (56px, centrado con position:absolute) necesita más alto
       del que le da el contenido de la fila (hamburguesa/texto/idioma,
       ~23px) — min-height asegura que entre completo sin sobresalir. */
    min-height: 84px;
}

.rc-hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
}

.rc-hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rc-hamburger-icon .bar {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--text-color);
}

.rc-topbar-logo {
    margin-left: 10px;
    font-family: var(--font-geist);
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    text-decoration: none;
    color: var(--text-color);
}

.rc-topbar-logo .logo-raum { font-weight: 400; }
.rc-topbar-logo .logo-lab { font-weight: 100; }

/* Ícono centrado horizontalmente en la barra (independiente de
   hamburguesa/texto/idioma, por eso position:absolute), alineado por abajo
   con esos tres — mismo bottom que el padding-bottom de .rc-topbar, para
   que su borde inferior coincida con el de ellos en vez de quedar
   centrado. */
.rc-topbar-logo-icon {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    height: 56px;
    width: auto;
    display: block;
}

/* Empuja el selector de idioma al extremo derecho — hamburguesa y texto
   quedan juntos a la izquierda, sin depender de justify-content:
   space-between (que los separaría según el ancho de cada uno). */
.rc-lang-pill {
    margin-left: auto;
}

.rc-header-rule {
    height: 0.5px;
    margin: 0 32px;
    /* Semiopaca en vez de blanco sólido: en celular, un 0.5px 100% opaco
       puede redondear a un píxel entero según la densidad de pantalla y
       leerse mucho más grueso que en escritorio — bajar la opacidad
       mantiene la línea fina sin depender de esa rendericación. */
    background: rgba(255, 255, 255, 0.35);
}

.rc-lang-pill {
    font-family: var(--font-geist);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--text-color);
    background: transparent;
    border: none;
    padding: 5px 10px;
    cursor: default;
}

/* PANEL DE NAVEGACIÓN (toggle) */
.rc-nav-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    z-index: 250;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(10px);
    padding: calc(var(--header-h) + 30px) 32px 40px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.rc-nav-panel.open {
    transform: translateX(0);
}

.rc-nav-list {
    list-style: none;
    font-family: var(--font-space);
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
    padding: 0;
}

.rc-nav-link {
    display: inline-block;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.rc-nav-link:hover,
.rc-nav-link:focus-visible { font-weight: 700; }

.rc-nav-link.active {
    font-weight: 700;
    color: #ffffff;
}

.rc-nav-link[aria-disabled="true"] {
    cursor: default;
    opacity: 0.45;
}
.rc-nav-link[aria-disabled="true"]:hover { font-weight: 400; }

.rc-nav-sublist {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* El espacio antes del primer ítem va en el hijo, no en el propio <ul>:
   con box-sizing:border-box, un padding/margin puesto directo en el
   elemento que se colapsa (max-height:0) no se recorta — el padding
   empuja el alto mínimo del propio elemento por encima de max-height, y
   el margin (probado antes) queda afuera de lo que overflow:hidden
   recorta. Puesto en el <li>, en cambio, sí queda contenido dentro del
   área que el <ul> recorta al colapsar. Mismo fix que raumlab/style.css. */
.rc-nav-sublist li:first-child {
    margin-top: 12px;
}

.rc-nav-item.has-sub.open .rc-nav-sublist {
    max-height: 220px;
}

.rc-nav-sublist a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.03em;
}

.rc-nav-sublist a:hover,
.rc-nav-sublist a:focus-visible { font-weight: 700; }

.rc-nav-sublist a.active {
    font-weight: 700;
    color: #ffffff;
}

/* estereo_GRAF en el submenú de Recursos — mismo criterio que
   raumlab/style.css (.nav-sublist span[aria-disabled="true"]), acá
   porque el resto de los módulos comparte este chrome en vez del suyo
   propio. */
.rc-nav-sublist span[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
}

.rc-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 240;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.rc-nav-scrim.open {
    opacity: 1;
    pointer-events: auto;
}

/* CONTENIDO PRINCIPAL — solo lo usan las páginas de in_SITE que scrollean
   normalmente (portada, sin layout fijo de 3 columnas). trans_FORMA y
   espacio_INM no lo necesitan (su contenido va directo en #app-main). */
.rc-main {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: calc(var(--header-h) + 40px) 32px calc(var(--footer-h) + 40px);
}

/* PANTALLA DE INTRODUCCIÓN — texto de presentación del módulo, mismo en
   los tres (in_SITE, trans_FORMA, espacio_INM), tal cual aparece en su card
   de la landing: lede (regular) + detalle (fino), misma distinción de peso
   que .card-lede/.card-detail en raumlab/style.css. Vive acá porque la
   comparten los tres, no solo in_SITE (que antes la tenía en su propio
   portada.css, fusionada en un solo párrafo de un solo peso).

   .rc-intro-screen es el contenedor de esta pantalla en in_SITE — a
   propósito NO usa .rc-main (que tiene max-width:1180px + margin:0 auto,
   o sea se centra en pantallas anchas): acá el margen izquierdo tiene que
   medirse desde el borde real de la ventana, igual que en espacio_INM y
   trans_FORMA (que no tienen ningún centrado), no desde una caja centrada. */
.rc-intro-screen {
    position: relative;
    z-index: 2;
    padding: calc(var(--header-h) + 24px) 32px calc(var(--footer-h) + 40px) 35px;
}

.rc-intro-lede {
    max-width: 420px;
    font-family: var(--font-geist);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0 0 12px;
}

.rc-intro-detail {
    max-width: 420px;
    font-family: var(--font-geist);
    font-size: 0.9rem;
    font-weight: 100;
    line-height: 1.7;
    color: var(--text-color);
    margin: 0;
}

/* MIGA DE PAN + SUBNAV DEL MÓDULO — variante "suelta", para dentro de
   .rc-main (scrollea con la página). La variante fija para layouts de 3
   columnas es .rc-module-subheader más abajo, que sobreescribe estas mismas
   clases anidándolas. */
.rc-breadcrumb {
    font-family: var(--font-space);
    font-size: 0.78rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: var(--text-color);
    margin-bottom: 18px;
}

.rc-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 48px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--surface-border);
}

/* a: navegación real entre páginas (in_SITE). button: cambio de modo
   dentro de una sola página (trans_FORMA, espacio_INM). */
.rc-subnav a,
.rc-subnav button {
    font-family: var(--font-geist);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.03em;
    color: var(--text-color);
    text-decoration: none;
    background: none;
    border: none;
    padding-bottom: 14px;
    margin: 0 0 -15px;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: font-weight 0.2s ease, border-color 0.2s ease;
}

.rc-subnav a:hover,
.rc-subnav button:not(:disabled):hover {
    font-weight: 500;
}

.rc-subnav a.active,
.rc-subnav button.active {
    border-bottom-color: var(--text-color);
    font-weight: 500;
}

.rc-subnav button:disabled {
    cursor: default;
    opacity: 0.4;
}

/* Variante compacta del breadcrumb+subnav para páginas con layout fijo de
   3 columnas (editor, visualizador, colección, trans_FORMA, espacio_INM) —
   va dentro del header fijo en vez de scrollear con el contenido. Grid de
   3 columnas simétricas para que el subnav quede centrado en la página,
   con el breadcrumb pegado a la izquierda sin correrlo. */
.rc-module-subheader {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 32px 14px;
}

.rc-module-subheader .rc-breadcrumb {
    grid-column: 1;
    justify-self: start;
    margin-bottom: 0;
}

.rc-module-subheader .rc-subnav {
    grid-column: 2;
    justify-self: center;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    gap: 28px;
    flex-wrap: nowrap;
}

.rc-module-subheader .rc-subnav a,
.rc-module-subheader .rc-subnav button {
    padding-bottom: 2px;
    margin: 0;
    white-space: nowrap;
}

/* ENLACE DE RETORNO AL HUB — fijo, siempre visible sobre cualquier
   pantalla del módulo (no vive dentro del contenido que se reemplaza),
   igual posición exacta en TODOS los módulos de RaumLab. */
.rc-back-link {
    position: fixed;
    left: 32px;
    bottom: calc(var(--footer-h) + 18px);
    z-index: 260;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-geist);
    font-weight: 300;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}

.rc-back-link .back-arrow-img {
    display: block;
    width: 14px;
    height: 14px;
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
}

.rc-back-link:hover,
.rc-back-link:focus-visible {
    font-weight: 700;
}
.rc-back-link:hover .back-arrow-img {
    transform: rotate(-90deg) scale(1.2);
}

/* FOOTER — fijo al borde inferior real de la ventana. Sin scroll de página
   en ningún módulo (ver la regla propia de cada uno), así que esto es
   literalmente siempre lo último visible, en el mismo lugar. */
.rc-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    padding: 0 0 20px;
    text-align: center;
}

.rc-footer-rule {
    height: 0.5px;
    margin: 0 32px 16px;
    background: rgba(255, 255, 255, 0.35);
}

.rc-footer-copyright {
    margin: 0;
    font-size: 0.7rem;
    color: var(--text-color);
    font-family: var(--font-geist);
    line-height: 1.4;
}

/* Enlaces de modo del módulo dentro del panel de navegación — solo existen
   para celular, donde reemplazan a la fila fija .rc-module-subheader (no
   entra en un ancho angosto). En escritorio esos mismos enlaces ya están
   en el header. */
.rc-nav-modes {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --header-h: 110px;
        --footer-h: 46px;
        --mobile-bottom-reserve: calc(var(--footer-h) + 50px);
    }

    /* Header/footer son transparentes por diseño en escritorio (el
       contenido nunca llega hasta ahí). En celular el contenido SÍ
       scrollea por debajo de ambos — vidrio esmerilado (mismo tinte que
       --bg-navy, con transparencia + blur) en vez de opaco liso: separa
       el contenido sin perder la sensación de capa flotante. rgba(20,20,20)
       son los componentes de --bg-navy (#141414). */
    .rc-header-stack {
        background-color: rgba(20, 20, 20, 0.82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .rc-footer {
        background-color: rgba(20, 20, 20, 0.82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        padding: 0 0 10px;
    }

    .rc-footer-rule {
        margin: 0 32px 8px;
    }

    .rc-footer-copyright {
        font-size: 0.6rem;
    }

    /* En celular no entra el grid de 3 columnas de escritorio (breadcrumb +
       subnav + espaciador) — pasa a ser una fila de pestañas horizontal,
       centrada, en el mismo lugar (bajo el header fijo) en vez de existir
       solo adentro del panel hamburguesa. El breadcrumb se oculta porque
       compite por el mismo ancho angosto y la identidad del módulo ya es
       implícita en pantalla. */
    .rc-module-subheader {
        display: block;
        padding: 0;
    }

    .rc-module-subheader .rc-breadcrumb {
        display: none;
    }

    .rc-module-subheader .rc-subnav {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 20px;
        margin: 0;
        padding: 10px 20px 12px;
        border-bottom: 1px solid var(--surface-border);
    }

    .rc-module-subheader .rc-subnav::-webkit-scrollbar {
        display: none;
    }

    /* La lista de modos duplicada dentro del panel hamburguesa ya no hace
       falta: los mismos modos ahora viven en la fila de pestañas de arriba
       (.rc-module-subheader), fija y siempre visible. Dejarla también acá
       era redundante y confuso — el panel hamburguesa en celular queda
       solo para Recursos/Investigación/Educación/etc. */
    .rc-nav-modes {
        display: none;
    }

    .rc-main { padding: calc(var(--header-h) + 24px) 20px var(--mobile-bottom-reserve); }
    .rc-intro-screen { padding: calc(var(--header-h) + 20px) 20px var(--mobile-bottom-reserve) 35px; }
    .rc-nav-panel { width: 100%; }
    .rc-back-link { left: 20px; }
}