/* docs.css - Sistema de Diseño y Estilos Premium para Zooki Docs */

/* ═══════════════════════════════════════════════════════════════
   1. VARIABLES Y TOKENS DE DISEÑO
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Le dice al navegador que la interfaz es oscura, para que dibuje sus
       scrollbars nativos en variante oscura. Sin esto los asumía claros y
       el track salía blanco, lo que cantaba dentro del panel del índice. */
    color-scheme: dark;

    /* Mismo stack tipográfico que Factus (Astro Starlight): fuentes del
       sistema, sin webfonts. En Windows resuelve a Segoe UI / Consolas.
       Además evita la petición a Google Fonts y funciona sin conexión. */
    --font-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
                 "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-heading: var(--font-sans);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace;

    /* Colores del Tema Oscuro Premium, calibrados con los tonos reales
       tomados de Factus: #23262F para el navbar/chrome (más claro, para que
       la navegación se distinga) y #17181C para el área de lectura interna
       (más oscura, pero lejos del casi-negro puro de antes: #0b0f14). Esa
       combinación anterior (contenido MÁS oscuro que el sidebar, y ambos
       casi negros) era la causa de que costara leer en sesiones largas. */
    --bg-main: #17181c;
    --bg-sidebar: #23262f;
    --bg-card: #22242b;
    --bg-card-hover: #2a2e37;
    --bg-code: #1c1e24;
    --border-color: rgba(255, 255, 255, 0.09);
    --border-highlight: rgba(59, 130, 246, 0.25);

    --text-primary: #f1f5f9;
    --text-secondary: #a3b0c2;
    --text-muted: #6d7c92;

    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-glow: rgba(59, 130, 246, 0.15);
    --accent-glow-strong: rgba(59, 130, 246, 0.3);
    /* Pastilla del ítem activo del sidebar, estilo Factus: un lavanda claro
       con texto oscuro encima (invierte el brillo respecto al resto del
       sidebar oscuro) en vez de un azul sólido con texto blanco. Este efecto
       de "chip claro sobre chrome oscuro" solo funciona en tema oscuro; en
       tema claro se sobrescribe más abajo por un botón azul sólido normal. */
    --accent-solid: #c7d2fe;
    --accent-solid-text: #1e1b4b;

    /* Fondos de componentes con color propio (diagramas), separados de
       --bg-main/--bg-card para poder invertirlos limpiamente en tema claro */
    --bg-diagram: #22242b;
    --bg-viewport: #17181c;

    /* Contorno del recuadro de la tecla "/" en el buscador: blanco marcado
       sobre el navbar oscuro (se invierte en tema claro más abajo). */
    --kbd-outline: #ffffff;

    /* Layout */
    --sidebar-width: 304px;
    --toc-width: 300px;
    --topbar-height: 64px; /* Header superior de escritorio */
    --header-height: 0px; /* Sólo aplica en móvil */
    --transition-speed: 0.25s;
    --border-radius: 12px;
}

/* Tema Claro: se activa con [data-theme="light"] en <html>, aplicado antes
   del primer pintado por el script anti-parpadeo en el <head>. Replica cada
   token del tema oscuro; --accent* se mantiene igual (color de marca),
   salvo el ligero ajuste de --accent para contraste AA sobre fondo blanco. */
:root[data-theme="light"] {
    color-scheme: light;

    --bg-main: #f8fafc;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --bg-code: #f1f5f9;
    --border-color: rgba(15, 23, 42, 0.08);
    --border-highlight: rgba(37, 99, 235, 0.25);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-glow: rgba(37, 99, 235, 0.12);
    --accent-glow-strong: rgba(37, 99, 235, 0.25);

    /* El chip lavanda-sobre-oscuro de Factus no tiene contraste en un
       sidebar ya claro: en tema claro el ítem activo vuelve a ser un botón
       azul sólido con texto blanco, el patrón estándar en fondos claros. */
    --accent-solid: #2563eb;
    --accent-solid-text: #ffffff;

    --bg-diagram: #f8fafc;
    --bg-viewport: #eef2f7;

    /* En fondo claro un contorno blanco sería invisible: se usa el color
       de texto principal para conservar el mismo nivel de contraste. */
    --kbd-outline: #0f172a;
}

/* Reset y Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Sin personalización del scrollbar: se usa el del navegador. El thumb
   anterior (blanco al 10%) casi desaparecía sobre el fondo oscuro. */

/* ═══════════════════════════════════════════════════════════════
   2. ESTRUCTURA Y LAYOUT
   ═══════════════════════════════════════════════════════════════ */
/* Header Superior (Escritorio): logo, búsqueda global y tema.
   Ocupa todo el ancho, por encima de las tres columnas. */
.app-topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--topbar-height);
    padding: 0 24px;
    background-color: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
}

/* Separado del logo pero a la izquierda del centro: el margen izquierdo es
   proporcional al ancho de la ventana y el derecho absorbe el resto. */
.app-topbar .global-search-btn {
    width: 280px;
    flex-shrink: 0;
    margin-left: 12vw;
    margin-right: auto;
}

.app-topbar .theme-toggle-btn {
    flex-shrink: 0;
    width: auto;
    margin-bottom: 0;
}

.app-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.mobile-header {
    display: none;
}

/* Barra Lateral Izquierda */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--topbar-height);
    bottom: 0;
    left: 0;
    z-index: 100;
    transition: transform var(--transition-speed) ease;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.15));
}

.brand-logo-img-mobile {
    max-height: 24px;
    width: auto;
    object-fit: contain;
    margin-right: 8px;
}

.brand-icon {
    font-size: 28px;
    color: var(--accent);
    filter: drop-shadow(0 0 8px var(--accent-glow-strong));
}

.brand-text h1 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

/* Disparador de la búsqueda global (Ctrl+K) — vive en el header superior */
.global-search-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Mismo tono que el área de lectura (--bg-main), para que el buscador
       se lea como un hueco sobre el navbar, que es más claro (--bg-sidebar). */
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.global-search-btn span {
    flex: 1;
    text-align: left;
    color: var(--text-secondary);
}

/* Indicador del atajo: recuadro pequeño y minimalista con la tecla "/".
   Solo contorno, sin relleno, con línea marcada para que se note. */
.global-search-btn kbd {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    font-family: var(--font-sans);
    font-size: 10.5px;
    line-height: 1;
    color: var(--kbd-outline);
    background: none;
    border: 1px solid var(--kbd-outline);
    border-radius: 4px;
}

.global-search-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Menú de Navegación */
.sidebar-menu {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
}

.menu-section {
    margin-bottom: 16px;
}

.menu-section-title {
    display: block;
    padding: 0 12px 6px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.sidebar-menu ul {
    list-style: none;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 7px 14px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    /* Solo color y fondo: con `all`, cualquier cambio de caja (bordes,
       padding) se animaba y el ítem parecía escalarse al activarse. */
    transition: color var(--transition-speed) ease,
                background-color var(--transition-speed) ease;
    margin-bottom: 1px;
}

.menu-item:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.02);
}

/* Sin borde: la pastilla vive en .menu-item-row. Un borde aquí sumaba 2px
   al alto del ítem activo y lo desplazaba respecto de los inactivos. */
.menu-item.active {
    color: var(--accent-solid-text);
    background-color: var(--accent-solid);
}

/* Sub-navegación colapsable (secciones H2 de cada documento).
   El resaltado (hover / activo) vive en la FILA, no en el enlace, para que
   la pastilla cubra también el chevron y ambos se lean como una sola pieza. */
.menu-item-row {
    display: flex;
    align-items: center;
    margin-bottom: 1px;
    border-radius: 8px;
    transition: background-color var(--transition-speed) ease;
}

.menu-item-row .menu-item {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    background-color: transparent;
}

.menu-item-row:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.menu-item-row:hover .menu-item {
    color: var(--text-primary);
    background-color: transparent;
}

.menu-item-row.active {
    background-color: var(--accent-solid);
}

.menu-item-row.active .menu-item,
.menu-item-row.active .menu-item.active {
    background-color: transparent;
    color: var(--accent-solid-text);
}

.menu-item-row.active .submenu-toggle {
    color: var(--accent-solid-text);
}

.submenu-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    font-size: 11px;
    transition: all var(--transition-speed);
}

.submenu-toggle:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.04);
}

.submenu-toggle i {
    transition: transform var(--transition-speed);
}

li.expanded .menu-item-row .submenu-toggle i {
    transform: rotate(90deg);
}

.submenu {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    padding-left: 30px;
    border-left: 1px solid var(--border-color);
    margin: 0 0 0 26px;
    transition: max-height var(--transition-speed) ease;
}

li.expanded > .submenu {
    max-height: 2000px;
}

.submenu-item {
    display: block;
    padding: 4px 10px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12.5px;
    line-height: 1.4;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all var(--transition-speed);
}

.submenu-item:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.03);
}

.submenu-item.active {
    color: var(--accent-solid-text);
    font-weight: 600;
    background-color: var(--accent-solid);
}

.sidebar-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-muted);
}

/* Toggle de tema claro/oscuro */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 12px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.theme-toggle-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.footer-links {
    margin-top: 8px;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-speed);
}

.footer-links a:hover {
    color: var(--accent);
}

/* Área de Contenido Principal */
.main-content {
    margin-left: var(--sidebar-width);
    margin-right: var(--toc-width);
    margin-top: var(--topbar-height);
    flex: 1;
    min-width: 0; /* Previene desbordamiento en flex */
    padding: 40px;
    min-height: 100vh;
}

/* Contenedor del documento */
.document-container {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
}

/* Loader de Carga */
.loading-overlay {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.05);
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    margin: 0 auto 16px auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Tabla de Contenido (TOC) - Barra Derecha.
   direction: rtl mueve su scrollbar al borde izquierdo del contenedor, para
   que no quede pegada a la barra de scroll general de la página. El
   contenido interno vuelve a ltr para que el texto se lea normal. */
.toc-sidebar {
    width: var(--toc-width);
    position: fixed;
    top: var(--topbar-height);
    bottom: 0;
    right: 0;
    padding: 22px 24px 40px 24px;
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
    direction: rtl;
}

.toc-container {
    position: sticky;
    top: 0;
    direction: ltr;
}

.toc-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Sin borde ni cambio de padding entre estados: el ítem activo solo cambia
   de color, para que la lista no se desplace al hacer scroll. */
.toc-item {
    font-size: 13.5px;
    color: var(--text-secondary);
    text-decoration: none;
    display: block;
    line-height: 1.45;
    transition: color var(--transition-speed);
}

.toc-item.indent-1 {
    padding-left: 20px;
}

.toc-item:hover {
    color: var(--text-primary);
}

.toc-item.active {
    color: var(--accent-hover);
}

/* ═══════════════════════════════════════════════════════════════
   3. ESTILOS DE RENDERIZADO DE MARKDOWN (markdown-body)
   ═══════════════════════════════════════════════════════════════ */
.markdown-body {
    font-size: 15.5px;
    color: var(--text-secondary);
    transition: opacity 0.15s ease-in-out;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 16px;
    line-height: 1.25;
    /* El header superior es fijo y tapa los primeros 64px de la ventana.
       Sin este margen de scroll, al saltar a una sección desde el índice o
       desde un enlace #doc--slug el encabezado quedaba oculto detrás de él. */
    scroll-margin-top: calc(var(--topbar-height) + 20px);
}

.markdown-body h1 {
    font-size: 32px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    margin-top: 0;
    margin-bottom: 24px;
}

.markdown-body h2 {
    font-size: 22px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-top: 40px;
}

.markdown-body h3 {
    font-size: 18px;
}

.markdown-body p {
    margin-bottom: 16px;
}

/* Listas */
.markdown-body ul,
.markdown-body ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.markdown-body li {
    margin-bottom: 6px;
}

/* Tablas */
.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    margin-top: 16px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.markdown-body th {
    background-color: var(--bg-sidebar);
    color: var(--text-primary);
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--border-color);
}

.markdown-body td {
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}

.markdown-body tr:last-child td {
    border-bottom: none;
}

.markdown-body tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.01);
}

.markdown-body tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Código y Fenced Blocks */
.markdown-body code {
    font-family: var(--font-mono);
    font-size: 85%;
    background-color: var(--bg-code);
    padding: 3px 6px;
    border-radius: 4px;
    color: var(--accent-hover);
}

.markdown-body pre {
    background-color: var(--bg-code);
    border: 1px solid var(--border-color);
    padding: 18px;
    border-radius: var(--border-radius);
    overflow-x: auto;
    margin-bottom: 24px;
}

.markdown-body pre code {
    padding: 0;
    background: none;
    font-size: 13px;
    color: var(--text-primary);
}

/* Alertas/Blockquotes del Estilo GitHub */
.markdown-body blockquote {
    padding: 16px 20px;
    margin-bottom: 20px;
    border-left: 4px solid var(--text-muted);
    background-color: rgba(255, 255, 255, 0.01);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    color: var(--text-primary);
}

.markdown-body blockquote p:last-child {
    margin-bottom: 0;
}

/* Estilos específicos de tipos de alerta basados en el texto */
.markdown-body blockquote:has(strong:contains("IMPORTANT")),
.markdown-body blockquote:has(strong:contains("IMPORTANTE")) {
    border-left-color: var(--accent);
    background-color: rgba(59, 130, 246, 0.03);
}

.markdown-body blockquote:has(strong:contains("WARNING")),
.markdown-body blockquote:has(strong:contains("ADVERTENCIA")) {
    border-left-color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.03);
}

.markdown-body blockquote:has(strong:contains("CAUTION")),
.markdown-body blockquote:has(strong:contains("PELIGRO")) {
    border-left-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.03);
}

.markdown-body blockquote:has(strong:contains("TIP")),
.markdown-body blockquote:has(strong:contains("CONSEJO")) {
    border-left-color: #10b981;
    background-color: rgba(16, 185, 129, 0.03);
}

/* Enlaces */
.markdown-body a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-speed);
}

.markdown-body a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Grid de Cards (Bento/Dashboard) en README */
.markdown-body .docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 40px;
}

.markdown-body .docs-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    transition: all var(--transition-speed);
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.markdown-body .docs-card:hover {
    border-color: var(--border-highlight);
    background-color: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 0 12px var(--accent-glow);
}

.markdown-body .docs-card h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.markdown-body .docs-card h3 i {
    color: var(--accent);
}

.markdown-body .docs-card p {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-secondary);
}

/* Contenedores de Mermaid para evitar saltos o colores rotos */
.mermaid {
    background-color: var(--bg-diagram);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 24px 0;
    display: flex;
    /* `safe center` centra el diagrama cuando cabe, pero se alinea al inicio
       si desborda: con `center` a secas el borde izquierdo queda recortado y
       fuera del alcance del scroll. */
    justify-content: center;
    justify-content: safe center;
    overflow-x: auto;
}

/* Highlight de términos buscados */
mark {
    background-color: rgba(234, 179, 8, 0.3);
    color: var(--text-primary);
    padding: 1px 3px;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   PALETA DE BÚSQUEDA GLOBAL (Ctrl+K)
   ═══════════════════════════════════════════════════════════════ */
.command-palette-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 200;
    padding: 12vh 20px 20px 20px;
}

.command-palette-overlay.visible {
    display: flex;
    justify-content: center;
    /* flex-start evita que el align-items:stretch por defecto estire la
       paleta a todo el alto del overlay cuando hay pocos resultados. */
    align-items: flex-start;
}

.command-palette {
    width: 100%;
    max-width: 620px;
    max-height: 70vh;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Campo de búsqueda: caja propia con borde, que se enciende en azul al
   tener el foco (el input siempre lo tiene mientras la paleta está abierta). */
.cp-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px;
    padding: 12px 14px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.cp-search-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.cp-search-icon {
    font-size: 18px;
    color: var(--accent);
    flex-shrink: 0;
}

.cp-search-box input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 16px;
}

.cp-search-box input::placeholder {
    color: var(--text-muted);
}

.cp-clear-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.cp-clear-btn:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.06);
}

/* El display:flex de arriba pisa el display:none que el navegador aplica a
   [hidden], así que hay que restituirlo explícitamente. */
.cp-clear-btn[hidden] {
    display: none;
}

/* Sin flex-grow: la paleta se ajusta al alto de sus resultados en vez de
   estirarse siempre hasta el máximo, igual que en la referencia. */
.cp-results {
    overflow-y: auto;
    padding: 0 8px 8px 8px;
}

.cp-empty {
    padding: 28px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13.5px;
}

/* Pie con los atajos de teclado y la atribución del motor de búsqueda */
.cp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-card);
}

.cp-hints {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-muted);
}

.cp-hints span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cp-hints kbd {
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1;
    color: var(--text-secondary);
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 6px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.cp-attribution {
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Azul de marca de Algolia, requerido junto a la atribución del plan gratuito */
.cp-algolia {
    color: #5468ff;
    font-weight: 700;
}

.cp-group {
    margin-bottom: 8px;
}

.cp-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 4px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

/* Marca del grupo del documento abierto, que siempre sale primero. */
.cp-group-badge {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.3px;
    text-transform: none;
    color: var(--accent);
    background: var(--accent-glow);
}

/* Cada resultado es una tarjeta con fondo propio: ícono en recuadro,
   título y, debajo, el extracto del contenido donde cayó la coincidencia. */
.cp-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: var(--bg-card);
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-sans);
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.cp-item-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 13px;
}

.cp-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-item-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Botón para quitar una búsqueda del historial de recientes */
.cp-remove-recent {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.cp-remove-recent:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.cp-result-item:hover .cp-remove-recent,
.cp-result-item.selected .cp-remove-recent {
    color: var(--accent-solid-text);
}

.cp-result-item:hover .cp-remove-recent:hover,
.cp-result-item.selected .cp-remove-recent:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

/* La flecha ↵ solo se muestra en el resultado resaltado, indicando que
   Enter lo abrirá. */
.cp-item-enter {
    flex-shrink: 0;
    font-size: 15px;
    opacity: 0;
    transition: opacity var(--transition-speed);
}

.cp-result-item:hover,
.cp-result-item.selected {
    background-color: var(--accent-solid);
    border-color: var(--accent-solid);
}

.cp-result-item:hover .cp-item-title,
.cp-result-item.selected .cp-item-title,
.cp-result-item:hover .cp-item-desc,
.cp-result-item.selected .cp-item-desc,
.cp-result-item:hover .cp-item-enter,
.cp-result-item.selected .cp-item-enter {
    color: var(--accent-solid-text);
}

.cp-result-item:hover .cp-item-enter,
.cp-result-item.selected .cp-item-enter {
    opacity: 0.75;
}

.cp-result-item:hover .cp-item-icon,
.cp-result-item.selected .cp-item-icon {
    background-color: rgba(255, 255, 255, 0.35);
    border-color: transparent;
    color: var(--accent-solid-text);
}

.cp-result-item mark {
    background-color: rgba(234, 179, 8, 0.35);
    color: inherit;
}

/* Sobre la pastilla lavanda, el resaltado amarillo no contrasta: se cambia
   por negrita con el mismo color de texto. */
.cp-result-item:hover mark,
.cp-result-item.selected mark {
    background-color: transparent;
    font-weight: 700;
    color: var(--accent-solid-text);
}

/* ═══════════════════════════════════════════════════════════════
   4. ADAPTABILIDAD (RESPONSIVE)
   ═══════════════════════════════════════════════════════════════ */

/* Ocultar barra lateral de contenidos en pantallas medianas */
@media (max-width: 1200px) {
    .main-content {
        margin-right: 0;
        padding: 40px 30px;
    }
    .toc-sidebar {
        display: none;
    }
}

/* Mostrar cabecera móvil y colapsar barra lateral en pantallas pequeñas */
@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }

    .app-topbar {
        display: none;
    }

    .app-container {
        flex-direction: column;
    }

    .mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: var(--header-height);
        background-color: var(--bg-sidebar);
        border-bottom: 1px solid var(--border-color);
        padding: 0 16px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 110;
        backdrop-filter: blur(12px);
    }
    
    .mobile-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 18px;
    }
    
    .mobile-logo .brand-icon {
        font-size: 20px;
    }
    
    .icon-btn {
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 20px;
        cursor: pointer;
        padding: 8px;
    }
    
    .sidebar {
        transform: translateX(-100%);
        top: 0;
        bottom: 0;
        height: 100vh;
        width: var(--sidebar-width);
        max-width: 88vw;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 99;
        backdrop-filter: blur(2px);
    }
    
    .sidebar-overlay.visible {
        display: block;
    }
    
    .main-content {
        margin-left: 0;
        margin-top: var(--header-height);
        padding: 24px 16px;
    }
    
    .markdown-body h1 {
        font-size: 26px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   5. ESTILOS DE IMPRESIÓN / EXPORTAR A PDF
   ═══════════════════════════════════════════════════════════════ */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .app-topbar,
    .sidebar,
    .toc-sidebar,
    .mobile-header,
    .sidebar-overlay,
    .command-palette-overlay,
    .doc-dl-menu,
    .pdf-preview-overlay {
        display: none !important;
    }
    
    .main-content {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }
    
    .document-container {
        max-width: 100% !important;
    }
    
    .markdown-body {
        color: black !important;
    }
    
    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3,
    .markdown-body h4 {
        color: black !important;
        page-break-after: avoid;
    }
    
    .markdown-body pre {
        background: #f3f4f6 !important;
        border: 1px solid #d1d5db !important;
        page-break-inside: avoid;
    }
    
    .markdown-body code {
        color: black !important;
        background: #f3f4f6 !important;
    }
    
    .markdown-body table {
        border-color: #d1d5db !important;
        page-break-inside: avoid;
    }
    
    .markdown-body th {
        background-color: #f3f4f6 !important;
        color: black !important;
        border-bottom-color: #d1d5db !important;
    }
    
    .markdown-body td {
        border-bottom-color: #e5e7eb !important;
    }
    
    .mermaid {
        border-color: #d1d5db !important;
        background: #f9fafb !important;
        page-break-inside: avoid;
    }
}

/* ═══════════════════════════════════════════════════════════════
   6. VISOR DE DIAGRAMAS INTERACTIVO (SVG Viewer)
   ═══════════════════════════════════════════════════════════════ */
.svg-viewer-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin: 24px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.svg-viewer-toolbar {
    background-color: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.svg-viewer-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.viewer-btn {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.viewer-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-card-hover);
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

.viewer-btn.link-btn {
    width: auto;
    height: auto;
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    text-decoration: none !important;
}

.viewer-status {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-primary);
    min-width: 48px;
    text-align: center;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.svg-viewport {
    width: 100%;
    height: 600px;
    overflow: auto;
    background-color: var(--bg-viewport);
    position: relative;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
}

.svg-viewport.grabbing {
    cursor: grabbing;
}

.svg-pan-container {
    width: 2500px; /* Base size */
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    flex-shrink: 0;
}

#mer-svg-object {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none; /* Evita que el img/object capture eventos de mouse, permitiendo arrastrar el viewport */
}

/* Pantalla Completa para el Visor */
.svg-viewer-card.fullscreen-mode {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
    border: none;
}

.svg-viewer-card.fullscreen-mode .svg-viewport {
    height: calc(100vh - 61px); /* Restar altura del toolbar */
    border-radius: 0;
}



/* ===== Visor de diagramas Mermaid (zoom/pan + draw.io) ===== */
.mmd-viewer{border:1px solid var(--border-color);border-radius:var(--border-radius,12px);overflow:hidden;margin:20px 0;background:var(--bg-card);}
.mmd-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:7px 10px;border-bottom:1px solid var(--border-color);background:var(--bg-main);font-size:12px;}
.mmd-toolbar button,.mmd-toolbar a{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);border-radius:7px;padding:4px 9px;cursor:pointer;font-size:12px;line-height:1;text-decoration:none;transition:background .15s,color .15s,border-color .15s;}
.mmd-toolbar button:hover,.mmd-toolbar a:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.mmd-toolbar .mmd-zoom{min-width:46px;text-align:center;color:var(--text-muted);border:none;background:none;padding:0;}
.mmd-toolbar .mmd-sep{flex:1 1 auto;}
.mmd-toolbar .mmd-dl,.mmd-toolbar .mmd-open{border-color:var(--accent);color:var(--accent);}
.mmd-viewport{position:relative;height:70vh;max-height:720px;overflow:hidden;background:var(--bg-viewport);cursor:grab;}
.mmd-viewport.grabbing{cursor:grabbing;}
.mmd-pan{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;}
.mmd-pan .mermaid{margin:0;}
.mmd-viewer.fullscreen-mode{width:100vw;height:100vh;border-radius:0;}
.mmd-viewer.fullscreen-mode .mmd-viewport{height:calc(100vh - 46px);max-height:none;}

/* Visor Mermaid: clic para activar zoom/scroll */
.mmd-viewport{position:relative;}
.mmd-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.03);cursor:pointer;z-index:3;transition:opacity .15s;}
.mmd-hint span{display:inline-flex;align-items:center;gap:.5em;background:var(--bg-card,#fff);border:1px solid var(--border-color,#ddd);color:var(--text-muted,#666);padding:7px 15px;border-radius:999px;font-size:13px;font-weight:500;box-shadow:0 2px 10px rgba(0,0,0,.14);} 
.mmd-viewer.mmd-active .mmd-hint{display:none;}
.mmd-viewer.mmd-active .mmd-viewport{box-shadow:inset 0 0 0 2px var(--accent,#7c3aed);}

/* ─── Ver y descargar el documento (specs/descargas-documentacion.md) ─── */
/* Botón de la barra superior: hereda el aspecto de .theme-toggle-btn. */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.doc-dl-trigger[hidden] {
    display: none;
}

.doc-dl-caret {
    font-size: 9px;
    opacity: 0.7;
}

.doc-dl-trigger[aria-expanded="true"] {
    color: var(--text-primary);
    border-color: var(--accent);
}

.mobile-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Menú: uno solo, fijo, colocado por docs.js bajo el botón que lo abrió. */
.doc-dl-menu {
    position: fixed;
    z-index: 130;
    min-width: 200px;
    padding: 6px;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.doc-dl-menu[hidden] {
    display: none;
}

.doc-dl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.doc-dl-item i {
    width: 16px;
    text-align: center;
    color: var(--text-muted);
}

.doc-dl-item:hover,
.doc-dl-item:focus-visible {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
    outline: none;
}

.doc-dl-item:hover i,
.doc-dl-item:focus-visible i {
    color: var(--accent);
}

/* Vista previa del PDF: modal grande, como la de imprimir. */
.pdf-preview-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 210;
    padding: 24px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.pdf-preview-overlay.visible {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

body.pdf-preview-open {
    overflow: hidden;
}

.pdf-preview {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.pdf-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px 10px 18px;
    border-bottom: 1px solid var(--border-color);
}

.pdf-preview-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-preview-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pp-btn,
.pp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: none;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.pp-btn {
    padding: 0 12px;
}

.pp-icon {
    width: 32px;
}

.pp-btn:hover,
.pp-icon:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.pp-btn-primary {
    color: var(--accent-solid-text);
    background-color: var(--accent-solid);
    border-color: var(--accent-solid);
}

.pp-btn-primary:hover {
    color: var(--accent-solid-text);
    filter: brightness(0.95);
}

.pdf-preview-frame {
    flex: 1;
    width: 100%;
    border: 0;
    background-color: var(--bg-main);
}

/* Tablet: el modal ocupa casi toda la pantalla y los botones de texto
   quedan solo con su ícono para que quepa el título. */
@media (max-width: 1023px) {
    .pdf-preview-overlay {
        padding: 12px;
    }

    .pp-btn span {
        display: none;
    }
}

/* Códigos enlazados (RN-411, HU-4.13…): discretos para no recargar el texto. */
.markdown-body a.doc-ref-codigo {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    font-weight: inherit;
}
.markdown-body tr:target, .markdown-body tr.doc-fila-destino {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}