/*
 * Documentación del integrador.
 *
 * Estética: superficies de vidrio (blur + borde de 1px translúcido), tipografía
 * del sistema —SF en Apple—, y cada bloque de contenido como una tarjeta con
 * profundidad. El socio pasa horas leyendo esto durante su integración: la
 * densidad y el contraste están calibrados para lectura larga, no para captura
 * de pantalla.
 */

:root {
    --fondo: #0b0d12;
    --fondo-alto: #10131a;
    --superficie: rgba(255, 255, 255, 0.04);
    --superficie-alta: rgba(255, 255, 255, 0.07);
    --borde: rgba(255, 255, 255, 0.09);
    --borde-vivo: rgba(255, 255, 255, 0.16);
    --texto: #f2f4f8;
    --texto-medio: #c3c9d6;
    --texto-tenue: #8b93a5;
    --acento: #5b8cff;
    --acento-suave: rgba(91, 140, 255, 0.14);
    --alto-barra: 60px;
    --ancho-indice: 250px;
    --radio: 14px;
    --sombra: 0 18px 40px -18px rgba(0, 0, 0, 0.85);
    --transicion: 180ms cubic-bezier(0.32, 0.72, 0, 1);
}

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

*::-webkit-scrollbar {
    height: 9px;
    width: 9px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 99px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

html {
    scroll-behavior: smooth;
}

/* Bloquea el scroll SIN `overflow: hidden` en el body: eso crea un contexto de
   apilado que anula el `backdrop-filter` del modal, y el vidrio deja de
   desenfocar el texto de la página. */
html.modal-abierto {
    overflow: hidden;
}

body {
    margin: 0;
    background:
        radial-gradient(1100px 520px at 78% -8%, rgba(91, 140, 255, 0.11), transparent 70%),
        radial-gradient(760px 420px at 10% 4%, rgba(140, 91, 255, 0.07), transparent 70%), var(--fondo);
    color: var(--texto);
    font:
        16.5px/1.6 -apple-system,
        BlinkMacSystemFont,
        'SF Pro Text',
        'Segoe UI',
        Roboto,
        sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.011em;
}

/* ---------------------------------------------------------------- barra --- */

.barra {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--alto-barra);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    background: rgba(11, 13, 18, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--borde);
}

.marca {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.marca-nombre {
    font-weight: 650;
    letter-spacing: -0.02em;
}

.marca-nota {
    font-size: 12px;
    color: var(--texto-tenue);
    margin-top: -1px;
}

.acciones {
    display: flex;
    align-items: center;
    gap: 12px;
}

.idioma {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--texto-tenue);
}

.idioma select {
    background: var(--superficie);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: 9px;
    padding: 6px 9px;
    font: inherit;
    cursor: pointer;
}

.volver {
    color: var(--texto-medio);
    text-decoration: none;
    font-size: 13.5px;
    padding: 7px 14px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 999px;
    transition: var(--transicion);
}

.volver:hover {
    color: var(--texto);
    background: var(--superficie-alta);
    border-color: var(--borde-vivo);
}

/* --------------------------------------------------------------- cuerpo --- */

.cuerpo {
    display: grid;
    grid-template-columns: var(--ancho-indice) minmax(0, 1fr);
    max-width: 1220px;
    margin: 0 auto;
    gap: 44px;
    padding: 0 24px;
}

.indice {
    position: sticky;
    top: var(--alto-barra);
    align-self: start;
    max-height: calc(100vh - var(--alto-barra));
    overflow-y: auto;
    padding: 26px 0 40px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.indice a {
    color: var(--texto-tenue);
    text-decoration: none;
    font-size: 13.5px;
    padding: 7px 12px;
    border-radius: 9px;
    transition: var(--transicion);
}

.indice a:hover {
    color: var(--texto);
    background: var(--superficie);
}

.indice a.sub {
    padding-left: 26px;
    font-size: 13px;
}

.indice a.activo {
    color: var(--texto);
    background: var(--acento-suave);
    box-shadow: inset 2px 0 0 var(--acento);
}

.documento {
    padding: 30px 0 120px;
    min-width: 0;
}

.estado {
    color: var(--texto-tenue);
}

/* ------------------------------------------------------------- markdown --- */

.markdown h1 {
    font-size: 38px;
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 700;
    margin: 0 0 16px;
    background: linear-gradient(180deg, #ffffff, #a9b3c7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.markdown h2 {
    font-size: 25px;
    line-height: 1.22;
    letter-spacing: -0.026em;
    font-weight: 650;
    margin: 34px 0 14px;
    scroll-margin-top: calc(var(--alto-barra) + 18px);
}

.markdown h3 {
    font-size: 18.5px;
    letter-spacing: -0.018em;
    font-weight: 620;
    margin: 24px 0 8px;
    scroll-margin-top: calc(var(--alto-barra) + 18px);
}

.markdown p,
.markdown li {
    color: var(--texto-medio);
    margin: 0 0 11px;
}

.markdown ul,
.markdown ol {
    margin: 11px 0;
    padding-left: 22px;
}

.markdown li {
    margin-bottom: 5px;
}

.markdown li::marker {
    color: var(--texto-tenue);
}

.markdown a {
    color: var(--acento);
    text-decoration-color: rgba(91, 140, 255, 0.4);
    text-underline-offset: 3px;
}

.markdown strong {
    color: var(--texto);
    font-weight: 620;
}

.markdown code {
    font:
        14.5px/1.5 ui-monospace,
        'SF Mono',
        SFMono-Regular,
        Menlo,
        monospace;
    background: var(--superficie-alta);
    border: 1px solid var(--borde);
    border-radius: 6px;
    padding: 1.5px 6px;
    letter-spacing: -0.01em;
}

/* El separador de sección cae justo antes del h2: es su línea, sin hueco. */
.markdown hr {
    border: 0;
    border-top: 1px solid var(--borde);
    margin: 40px 0 0;
}

.markdown hr + h2 {
    margin-top: 28px;
}

/* ------------------------------------------------------- bloque de código - */

.bloque {
    position: relative;
    margin: 16px 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    box-shadow: var(--sombra);
    overflow: hidden;
    transition: var(--transicion);
}

.bloque:hover {
    border-color: var(--borde-vivo);
}

.bloque-barra {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px 11px 16px;
    border-bottom: 1px solid var(--borde);
    background: rgba(255, 255, 255, 0.025);
}

/* Semáforo de ventana: convierte el bloque en algo que se lee como una app,
   no como un rectángulo de texto. Es decorativo — oculto para lectores. */
.semaforo {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.semaforo span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.semaforo span:nth-child(1) {
    background: #ff5f57;
}

.semaforo span:nth-child(2) {
    background: #febc2e;
}

.semaforo span:nth-child(3) {
    background: #28c840;
}

.bloque-acciones {
    margin-left: auto;
}

.bloque-lenguaje {
    font:
        11.5px/1 ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.bloque-acciones {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.bloque-boton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--superficie-alta);
    color: var(--texto-medio);
    border: 1px solid var(--borde);
    border-radius: 9px;
    padding: 7px 13px;
    font:
        13px/1 ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    cursor: pointer;
    transition: var(--transicion);
}

.bloque-boton svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.bloque-boton:hover {
    color: var(--texto);
    background: rgba(255, 255, 255, 0.11);
    border-color: var(--borde-vivo);
    transform: translateY(-1px);
}

.bloque-boton:active {
    transform: translateY(0) scale(0.97);
}

/* Acción destacada (Modo Cine): llena de color para que se lea como el gesto
   principal de la tarjeta, igual que en un IDE. */
.bloque-boton.destacado {
    background: linear-gradient(180deg, #4c7ef3, #3a63d0);
    border-color: rgba(120, 160, 255, 0.5);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(76, 126, 243, 0.75);
}

.bloque-boton.destacado:hover {
    background: linear-gradient(180deg, #5c8bff, #4470dd);
}

.bloque-boton.hecho {
    color: #6ee7a8;
    border-color: rgba(110, 231, 168, 0.4);
    background: rgba(110, 231, 168, 0.12);
}

/* Marco interior: el código vive en su propia caja dentro de la tarjeta. Esa
   segunda capa es lo que da profundidad y separa el ejemplo de su cabecera. */
.markdown pre {
    margin: 14px;
    padding: 16px 18px;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.markdown pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: 14px;
}

/* ---------------------------------------------------------------- tabla --- */

.tabla-caja {
    margin: 16px 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

/* Scrollea DENTRO de su caja: el contrato tiene tablas anchas y la página
   nunca debe scrollear en horizontal. */
.tabla-caja > div {
    overflow-x: auto;
}

.markdown table {
    border-collapse: collapse;
    width: 100%;
    font-size: 15px;
    margin: 0;
}

.markdown th,
.markdown td {
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--borde);
}

.markdown th {
    background: rgba(255, 255, 255, 0.035);
    font-weight: 620;
    color: var(--texto);
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.markdown tbody tr:last-child td {
    border-bottom: 0;
}

.markdown tbody tr {
    transition: background var(--transicion);
}

.markdown tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}

/* ---------------------------------------------------------------- modal --- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 4vw;
    /* Velo MUY claro: el desenfoque solo se percibe si la página se sigue
       viendo detrás. Con un fondo opaco no hay nada que desenfocar y el modal
       parece pegado sobre negro. */
    /* Velo BLANCO, no negro: aclara la página de atrás para que la ventana
       —que es oscura— resalte contra ella. Un velo oscuro dejaba fondo y caja
       al mismo tono y la ventana se perdía. */
    background: rgba(190, 205, 235, 0.16);
    backdrop-filter: saturate(200%) brightness(1.5) blur(9px);
    -webkit-backdrop-filter: saturate(200%) brightness(1.5) blur(9px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-caja {
    width: min(1080px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    /* La caja se ajusta al contenido: un ejemplo de una línea no debe abrir
       una ventana de 90vh con el resto vacío. El tope lo pone max-height. */
    height: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    /* Vidrio: translúcida y con blur propio, más un reflejo de 1px arriba —
       el borde superior claro es lo que en macOS da la sensación de material. */
    background: linear-gradient(180deg, rgba(46, 52, 68, 0.4), rgba(26, 30, 42, 0.46));
    backdrop-filter: saturate(180%) blur(40px);
    -webkit-backdrop-filter: saturate(180%) blur(40px);
    box-shadow:
        0 50px 100px -25px rgba(0, 0, 0, 0.85),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    overflow: hidden;
    transform: scale(0.94) translateY(14px);
    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

.modal.visible .modal-caja {
    transform: scale(1) translateY(0);
}

.modal-barra {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--borde);
    background: rgba(255, 255, 255, 0.045);
}

.modal-caja pre {
    margin: 16px;
    padding: 22px;
    overflow: auto;
    /* `flex: 1` estiraba el bloque a toda la altura disponible y dejaba un
       vacío enorme bajo un ejemplo corto. Crece con el texto y se limita al
       llegar al tope de la caja. */
    flex: 0 1 auto;
    /* Apenas un velo: el negro sólido acá era lo que mataba el efecto —el
       vidrio de la caja no sirve de nada si el bloque de código lo tapa. */
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
    *,
    .modal,
    .modal-caja {
        transition-duration: 1ms !important;
        scroll-behavior: auto;
    }
}

@media (max-width: 880px) {
    .cuerpo {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .indice {
        position: static;
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        padding: 18px 0 0;
    }

    .indice a {
        border: 1px solid var(--borde);
        border-radius: 999px;
        background: var(--superficie);
    }

    .indice a.sub {
        display: none;
    }

    .markdown h1 {
        font-size: 30px;
    }
}

/* ------------------------------------------------- vidrio de verdad ------ */
/*
 * Tres capas apilaban opacidad y mataban el efecto: el velo, la caja y el
 * bloque de código —más el fondo propio del tema de resaltado—. Acá se anulan
 * todas: el modal deja pasar la luz de la página y solo aporta desenfoque.
 */

.modal-caja {
    background: linear-gradient(180deg, rgba(26, 30, 42, 0.93), rgba(16, 19, 28, 0.95)) !important;
    backdrop-filter: saturate(180%) blur(30px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(30px) !important;
}

.modal-caja pre,
.modal-caja .hljs,
.modal-caja code {
    background: transparent !important;
}

.modal-caja pre {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.modal-barra {
    background: rgba(255, 255, 255, 0.07) !important;
}

/* ------------------------------------------------------------- móvil ----- */
/*
 * En celular la página se estiraba más allá del viewport y dejaba una franja
 * muerta a la derecha: basta con que UN hijo desborde —una tabla, una URL
 * larga, un bloque de código— para que el body entero crezca. Se corta el
 * desbordamiento en la raíz y se le da a cada sospechoso su propio scroll.
 */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.markdown {
    overflow-wrap: anywhere;
}

@media (max-width: 880px) {
    :root {
        --alto-barra: auto;
    }

    /* La barra pasa a dos filas: en una sola, marca + idioma + volver no
       entran y empujaban el ancho. */
    .barra {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 16px;
        position: static;
    }

    .acciones {
        width: 100%;
        justify-content: space-between;
    }

    .cuerpo {
        padding: 0 16px;
    }

    .documento {
        padding: 18px 0 80px;
    }

    body {
        font-size: 16px;
    }

    .markdown h1 {
        font-size: 27px;
    }

    .markdown h2 {
        font-size: 21px;
    }

    /* El índice horizontal se desliza en su propio carril en vez de apilar
       once píldoras en vertical antes del contenido. */
    .indice {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 14px 0 4px;
        -webkit-overflow-scrolling: touch;
    }

    .indice a {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .markdown pre {
        margin: 10px;
        padding: 12px;
        font-size: 13px;
    }

    .bloque-barra {
        padding: 9px 10px 9px 12px;
    }

    .bloque-boton span {
        display: none;
    }

    .bloque-boton {
        padding: 7px 10px;
    }

    .modal {
        padding: 12px;
    }

    .modal-caja {
        max-height: 88vh;
    }
}

/* ---------------------------------------------------------- banderas ----- */

.idioma {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 999px;
}

.bandera {
    background: none;
    border: 0;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    filter: saturate(0.5) opacity(0.55);
    transition: var(--transicion);
}

.bandera:hover {
    filter: saturate(1) opacity(0.9);
    background: var(--superficie-alta);
}

.bandera.activa {
    filter: none;
    background: var(--acento-suave);
    box-shadow: inset 0 0 0 1px rgba(91, 140, 255, 0.45);
}