/* =============================================
   EDITOR LATEX — Adaptado al sitio RaizCuadrada
   Usa las variables CSS del sitio principal
   ============================================= */


/* ===== HIDE SITE COMPONENTS IN EDITOR MODE ===== */
html, body.editor-mode {
    overflow: hidden !important;
    height: 100vh !important;
}
body.editor-mode .sidebar,
body.editor-mode .topbar,
body.editor-mode .sb-collapse,
body.editor-mode .sb-hover-lock {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
body.editor-mode .topbar {
    transform: translateY(-100%);
    display: none !important;
}
body.editor-mode .sb-collapse,
body.editor-mode .sb-hover-lock {
    transform: none;
    opacity: 0;
    pointer-events: none;
}

/* Bottombar ALWAYS visible on PC */
body.editor-mode .bottom-bar {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1), opacity .25s ease,
        left .35s cubic-bezier(0.4, 0, 0.2, 1), width .35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Boton .sticky-navbar-btn de la barra superior del recurso: contrae la
   barra de navegacion del sitio (inicio, tema, recientes, compartir,
   buscar) deslizandola fuera de la pantalla. En PC esta fijada arriba y
   sale por ahi; en movil esta fijada abajo y sale por abajo. Esta regla
   va justo despues de la anterior para ganarle el !important. */
body.navbar-hidden .bottom-bar {
    opacity: 0 !important;
    pointer-events: none !important;
}
@media (min-width: 901px) {
    body.navbar-hidden .bottom-bar {
        transform: translateY(calc(-100% - 28px)) !important;
    }
}
@media (max-width: 900px) {
    body.navbar-hidden .bottom-bar {
        transform: translateY(calc(100% + 40px)) !important;
    }
}

/* ---- Espacio reservado para la barra de navegacion del sitio ----
   --navbar-h es la banda que ocupa la barra, y el recurso se apoya
   DESPUES de ella: sticky bar 14px + banda, paneles 60px + banda, barra
   de herramientas 68px + banda. Con la barra visible eso da los 80 /
   126 / 134 px de siempre; con body.navbar-hidden la banda vale 0 y el
   recurso sube a ocupar su sitio. En movil la banda va al borde
   inferior (padding-bottom de la pagina) en vez de arriba. */
:root { --navbar-h: 66px; }
@media (max-width: 900px) {
    :root { --navbar-h: 76px; }
}
body.navbar-hidden { --navbar-h: 0px; }

/* Content shifts left when sidebar is hidden.
   --ed-content-pl = padding izquierdo base del contenedor en PC. La
   redefinen las paginas con otro gutter (editor.html / graficadora.html /
   conicas.html usan 0, editorecuaciones.html usa 12). Lo necesita el
   bloque reveal-nav de mas abajo para desplazar una sola vez. */
body.editor-mode .content,
body.editor-mode main.content {
    --ed-content-pl: 0px;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Las páginas editor definen su propio padding (8/12/12): la regla
   anterior era para el .content del sitio y les deja el lado
   izquierdo en 0 (asimetría en celulares). Lo restauramos solo en
   móvil para que el contenedor quede centrado con las mismas
   márgenes a ambos lados (como conicas.html). */
@media (max-width: 900px) {
    body.editor-mode .content.editor-page,
    body.editor-mode main.editor-page {
        padding-left: 12px !important;
        margin-left: 0 !important;
    }
}

/* REVEALED STATE — sidebar shown */
body.editor-mode.reveal-nav .sidebar {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 1000;
}
body.editor-mode.reveal-nav .backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
}
/* PC: el desplazamiento por la sidebar del sitio se aplica UNA sola vez,
   sobre el padding del contenedor (gutter base + --sb-w + los 40px de
   canal que usa el resto del sitio). Antes el --sb-w se sumaba DOS veces
   (padding de .content + margin-left de .editor-main) y la barra lateral
   de herramientas del recurso quedaba a cientos de px del primer panel.
   Ahora la barra de herramientas, que es fija, se ancla al borde izquierdo
   del contenedor y .editor-main conserva su margin-left base de 74px: la
   separacion entre ambas es EXACTAMENTE la misma con la sidebar del sitio
   visible o no. En movil la sidebar del sitio es un drawer superpuesto,
   asi que no desplaza nada (antes empujaba la barra de herramientas
   fuera de la pantalla). */
@media (min-width: 901px) {
    body.editor-mode.reveal-nav .content,
    body.editor-mode.reveal-nav main.content,
    body.editor-mode.reveal-nav .content.editor-page,
    body.editor-mode.reveal-nav main.content.editor-page {
        padding-left: calc(var(--ed-content-pl, 0px) + var(--sb-w) + 40px) !important;
    }
    body.editor-mode.reveal-nav .editor-sidebar {
        left: calc(var(--sb-w) + 54px);
    }
    body.editor-mode.reveal-nav .editor-main {
        margin-left: 74px;
    }
    body.editor-mode.reveal-nav .editor-sticky-bar {
        left: calc(var(--sb-w) + 40px);
    }
}

/* REVEALED STATE — bottombar shown (mobile) */
body.editor-mode.reveal-bottom .bottom-bar {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    z-index: 999;
}

/* ===== EDITOR STICKY TOOLBAR (tri-mtoc style) ===== */
.editor-sticky-bar {
    position: fixed;
    /* se apoya justo debajo de la barra de navegacion del sitio */
    top: calc(14px + var(--navbar-h, 0px));
    left: 0;
    right: 0;
    z-index: 2401;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 6px 24px;
    background: var(--glass-strong);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.editor-sticky-bar::-webkit-scrollbar { display: none; }

.editor-sticky-bar .sticky-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.editor-sticky-bar .sticky-left,
.editor-sticky-bar .sticky-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.editor-sticky-bar .sticky-right {
    margin-left: auto;
}

.editor-sticky-bar .sticky-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all .2s ease;
    height: 32px;
}
.editor-sticky-bar .sticky-btn i {
    font-size: 14px;
}
.editor-sticky-bar .sticky-btn:hover {
    color: var(--text);
    background: var(--surface);
}
.editor-sticky-bar .sticky-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.editor-sticky-bar .sticky-sep {
    width: 1px;
    height: 22px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 8px;
}

.editor-sticky-bar .sticky-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    padding-right: 2px;
}

/* Boton que contrae la barra de navegacion del sitio (inicio, tema,
   recientes, compartir, buscar). Va antes del grupo "Modo:"/"Tipo:",
   justo detras del menu hamburguesa (que en PC esta oculto, asi que
   queda como primer control de la barra). Mismo lenguaje visual que
   .editor-sidebar-btn (el boton de mostrar/ocultar navegacion) pero con
   las medidas de los botones de esta barra. */
.sticky-navbar-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    /* Barra visible = boton marcado, con el borde morado. Al
       contracting la barra se desmarca (ver mas abajo). */
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent);
    /* mismo tamano de icono que el boton del sidebar (18px en PC,
       13px en movil, ver el bloque responsive de mas abajo) */
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition),
        border-color var(--transition), transform var(--transition);
}
.sticky-navbar-btn:hover,
body.navbar-hidden .sticky-navbar-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}
.sticky-navbar-btn:active { transform: scale(0.92); }
/* Barra contraida: el boton se desmarca */
body.navbar-hidden .sticky-navbar-btn,
.sticky-navbar-btn.active {
    background: transparent;
    color: var(--muted);
    border-color: var(--border);
}
/* PC: deseleccionado tampoco lleva borde, igual que el sidebar */
@media (min-width: 901px) {
    body.navbar-hidden .sticky-navbar-btn,
    .sticky-navbar-btn.active { border-color: transparent; }
}

.editor-sticky-bar .sticky-info {
    font-size: 11px;
    color: var(--muted);
    flex-shrink: 0;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
}
.editor-sticky-bar .sticky-info i {
    font-size: 13px;
}

.editor-sticky-bar .sticky-btn.primary {
    background: var(--accent);
    color: var(--accent-text-on);
    border-color: var(--accent);
}
.editor-sticky-bar .sticky-btn.primary:hover {
    opacity: 0.9;
}

.editor-sticky-bar .sticky-btn.icon-only {
    padding: 6px 8px;
    min-width: 32px;
    justify-content: center;
}

/* ===== TOGGLE BUTTON (now inside sidebar) ===== */

/* ===== EDITOR PAGE LAYOUT ===== */
.editor-page {
    max-width: 100% !important;
    width: 100% !important;
    padding: 8px 12px 12px !important;
    margin: 0 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Remove body padding that the site normally applies */
body.editor-mode {
    padding-left: 0 !important;
    padding-top: 0 !important;
}
@media (min-width: 901px) {
    body.editor-mode {
        padding-left: 0 !important;
    }
}

/* Hide footer in editor mode — not needed */
body.editor-mode .footer-global,
body.editor-mode .footer {
    display: none !important;
}

/* ===== EDITOR TOPBAR ===== */
.editor-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.editor-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.editor-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mode-switch {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.mode-btn {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
}
.mode-btn + .mode-btn { border-left: 1px solid var(--border); }
.mode-btn:hover { color: var(--text); background: var(--surface-2); }
.mode-btn.active { background: var(--accent); color: var(--accent-text-on); }
.mode-btn.active:hover { opacity: 0.9; }

.editor-tb-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    padding: 6px 12px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.editor-tb-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.editor-tb-btn.icon-only { padding: 6px 8px; }

.editor-btn-primary {
    background: var(--accent);
    color: var(--accent-text-on);
    border: none;
    padding: 7px 16px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
    font-family: inherit;
}
.editor-btn-primary:hover { opacity: 0.9; }

.topbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
}

/* ===== EDITOR MAIN LAYOUT ===== */
.editor-main {
    display: flex;
    flex: 1;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    min-height: 0;
    /* Top offset: account for editor-page 8px padding, tight gap */
    margin-top: 116px;
}

/* PC: sidebar fixed on left, main fills remaining space */
@media (min-width: 901px) {
    .editor-main {
        margin-left: 74px;
        /* arranca bajo la barra sticky (14 + banda + 46 de alto) */
        margin-top: calc(60px + var(--navbar-h, 0px));
        gap: 4px;
    }
    .editor-sticky-bar {
        margin: 0 16px;
        left: 16px;
        right: 16px;
    }
}

/* Mobile: sidebar on top as horizontal bar */
@media (max-width: 900px) {
    .editor-main {
        flex-direction: column;
        margin-top: 56px;
    }
}

/* ===== EDITOR LEFT SIDEBAR (frosted glass) ===== */
.editor-sidebar {
    flex-shrink: 0;
    background: color-mix(in srgb, var(--surface) 50%, transparent);
    backdrop-filter: blur(30px) saturate(1.6);
    -webkit-backdrop-filter: blur(30px) saturate(1.6);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .editor-sidebar {
        background: var(--surface);
    }
}

/* PC: vertical sidebar on left */
@media (min-width: 901px) {
    .editor-sidebar {
        position: fixed;
        left: 14px;
        /* arranca bajo la barra sticky, como los paneles */
        top: calc(68px + var(--navbar-h, 0px));
        bottom: 14px;
        width: 56px;
        z-index: 2500;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 6px 0;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--scroll-thumb) transparent;
    }
    .editor-tools-grid {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 100%;
        align-items: center;
    }
    .editor-sidebar-btn {
        width: 42px;
        height: 42px;
        flex-direction: column;
        gap: 1px;
    }
    .editor-sidebar-btn i { font-size: 18px; }
    .editor-sidebar-btn span { font-size: 9px; }
    .toggle-nav-btn {
        margin-bottom: 4px;
        border-bottom: 1px solid var(--border);
        border-radius: var(--r-sm) var(--r-sm) 0 0;
    }
}

/* Mobile: horizontal bar — detailed mobile rules live at the end of this file
   (they must come after the base .editor-sidebar-btn rules to win the cascade) */

.editor-sidebar-btn {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 9px;
    transition: all 0.15s;
    position: relative;
}
.editor-sidebar-btn i { font-size: 18px; }
.editor-sidebar-btn:hover { background: var(--surface-2); color: var(--text); }
/* Selected tool: pill style (same look on PC and mobile) */
.editor-sidebar-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.editor-sidebar-divider {
    width: 24px;
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.editor-sidebar-spacer { flex: 1; }

/* ===== EDITOR AREA ===== */
.editor-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ===== SPLIT PANE ===== */
.split-pane {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-width: 0;
}

.editor-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 6px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    flex-shrink: 0;
}

.editor-panel-header i { font-size: 14px; }

.preview-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
}

.editor-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 16px 20px 20px;
    background: var(--bg);
}

.editor-content::-webkit-scrollbar { width: 5px; }
.editor-content::-webkit-scrollbar-track { background: transparent; }
.editor-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.resize-handle {
    width: 3px;
    background: var(--border);
    cursor: col-resize;
    transition: background 0.2s;
    flex-shrink: 0;
}
.resize-handle:hover { background: var(--accent); }

/* Preview panel */
.preview-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-2);
}

.preview-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 16px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* ===== Tabs Editar / Vista previa (solo movil y tablet) =====
   En pantallas grandes se mantiene el split de dos columnas; por
   debajo de 900px el split es ilegible, asi que se muestra un panel
   a la vez y estos botones eligen cual. */
.editor-tabs { display: none; }

@media (max-width: 900px) {
    .editor-tabs {
        display: flex;
        gap: 4px;
        padding: 4px;
        margin-bottom: 6px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 12px;
    }
    .editor-tabs .editor-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 10px;
        border: 1px solid transparent;
        border-radius: 9px;
        background: transparent;
        color: var(--muted);
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.15s;
    }
    .editor-tabs .editor-tab i { font-size: 14px; }
    .editor-tabs .editor-tab:hover { color: var(--text); background: var(--bg); }
    .editor-tabs .editor-tab.active {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--accent-text-on);
    }

    /* una columna y un solo panel visible */
    .split-pane { flex-direction: column; }
    .split-pane > .resize-handle { display: none; }
    /* !important necesario: switchMode() escribe display en linea sobre
       #editorPanel y #latexModePanel, y lo inline gana a una regla normal */
    .split-pane.tab-editor > .preview-panel { display: none !important; }
    .split-pane.tab-preview > .editor-panel { display: none !important; }
}

.preview-paper,
.preview-page {
    background: white;
    width: 816px;
    height: 1056px;
    padding: 60px 50px;
    border-radius: 4px;
    box-shadow: 0 1px 12px rgba(0,0,0,0.08);
    color: #1a1a2e;
    /* La fuente la pone el JS en linea segun lo que se eligio en Formato. Si
       aqui se fijara una serif, el Computer Modern elegido nunca se veria. */
    font-family: var(--doc-font, 'Computer Modern', 'CMU Serif', 'Latin Modern Roman', 'STIX Two Text', serif);
    line-height: 1.6;
    font-size: 11pt;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.preview-page {
    margin-bottom: 24px;
    flex-shrink: 0;
    page-break-after: always;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.preview-paper { }

.preview-paper h1 { font-size: 18pt; margin: 0 0 8px 0; }
.preview-paper h2 { font-size: 14pt; margin: 16px 0 8px 0; border-bottom: 1px solid #eee; padding-bottom: 4px; }
.preview-paper h3 { font-size: 12pt; margin: 12px 0 6px 0; }
.preview-paper p { margin: 6px 0; text-align: justify; }
.preview-paper .author { font-size: 11pt; color: #555; margin-bottom: 4px; }
.preview-paper .date { font-size: 11pt; color: #777; margin-bottom: 20px; }
.preview-paper .abstract { font-style: italic; font-size: 10pt; color: #666; border-left: 3px solid #999; padding-left: 12px; margin: 12px 0; }
.preview-paper .figure-placeholder { border: 2px dashed #ccc; padding: 30px; text-align: center; color: #aaa; margin: 12px 0; border-radius: 4px; }
.preview-paper table { border-collapse: collapse; margin: 12px 0; font-size: 10pt; width: 100%; }
.preview-paper td, .preview-paper th { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
.preview-paper th { background: #f5f5f5; font-weight: bold; }
.preview-paper .math-block { text-align: center; margin: 12px 0; overflow: visible; max-width: 100%; }
.preview-paper .katex-display { margin: 0; overflow: visible; }
.preview-paper .katex-display > .katex { max-width: 100%; }
.preview-paper .eq-number { float: right; color: #666; }
.preview-paper ol, .preview-paper ul { margin: 6px 0 6px 20px; }
.preview-paper pre { background: #f4f4f4; padding: 10px; border-radius: 6px; overflow-x: auto; font-size: 9pt; }

.preview-page h1 { font-size: 18pt; margin: 0 0 8px 0; }
.preview-page h2 { font-size: 14pt; margin: 16px 0 8px 0; border-bottom: 1px solid #eee; padding-bottom: 4px; }
.preview-page h3 { font-size: 12pt; margin: 12px 0 6px 0; }
.preview-page p { margin: 6px 0; text-align: justify; }
.preview-page .author { font-size: 11pt; color: #555; margin-bottom: 4px; }
.preview-page .date { font-size: 11pt; color: #777; margin-bottom: 20px; }
.preview-page .abstract { font-style: italic; font-size: 10pt; color: #666; border-left: 3px solid #999; padding-left: 12px; margin: 12px 0; }
.preview-page .figure-placeholder { border: 2px dashed #ccc; padding: 30px; text-align: center; color: #aaa; margin: 12px 0; border-radius: 4px; }
.preview-page table { border-collapse: collapse; margin: 12px 0; font-size: 10pt; width: 100%; }
.preview-page td, .preview-page th { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
.preview-page th { background: #f5f5f5; font-weight: bold; }
.preview-page .math-block { text-align: center; margin: 12px 0; overflow: visible; max-width: 100%; }
.preview-page .katex-display { margin: 0; overflow: visible; }
.preview-page .katex-display > .katex { max-width: 100%; }
.preview-page .eq-number { float: right; color: #666; }
.preview-page ol, .preview-page ul { margin: 6px 0 6px 20px; }
.preview-page pre { background: #f4f4f4; padding: 10px; border-radius: 6px; overflow-x: auto; font-size: 9pt; }
.preview-page .minted-preview { background: #f8f8f8; border: 1px solid #ddd; border-radius: 6px; margin: 12px 0; overflow: hidden; }
.preview-page .minted-header { background: #e8e8e8; padding: 6px 12px; font-size: 9pt; font-weight: 600; color: #666; }
.preview-page pre code { font-size: 9pt; line-height: 1.5; }

.preview-page-num {
    margin-top: auto;
    text-align: center;
    font-size: 8pt;
    color: #bbb;
    padding-top: 16px;
}

.preview-page-sep {
    height: 8px;
}

/* ===== DOCUMENT BLOCKS ===== */
/* ===== BLOCKS — MODERN CONSISTENT UI ===== */
.doc-block {
    position: relative;
    margin: 22px 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    cursor: grab;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.doc-block:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.doc-block.selected {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md);
}
.doc-block.dragging { opacity: 0.4; transform: scale(0.98); }
.doc-block.drag-over { border-color: var(--accent); border-style: dashed; }

.doc-block-controls {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: 4px;
    z-index: 11;
}
.doc-block:hover .doc-block-controls { display: flex; }

.block-ctrl-btn {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s;
    box-shadow: var(--shadow-sm);
}
.block-ctrl-btn i { font-size: 14px; }
.block-ctrl-btn:hover { background: #FCA5A5; color: #fff; border-color: #FCA5A5; transform: scale(1.1); }
.block-ctrl-btn.move-btn:hover { background: var(--accent); color: var(--accent-text-on); border-color: var(--accent); }

.doc-block-label {
    position: absolute;
    left: 12px;
    top: -10px;
    background: var(--accent);
    color: var(--accent-text-on);
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 6px;
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    z-index: 11;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    pointer-events: none;
}

/* Individual block inner styles — consistent padding + accent bar */
.block-inner {
    padding: 18px 20px;
}
.block-title {
    background: var(--surface);
    padding: 18px 20px;
}
.block-author {
    background: var(--surface);
    padding: 14px 20px;
}
.block-date { padding: 14px 20px; }
.block-abstract {
    padding: 16px 20px;
    background: var(--surface);
}
.block-section { padding: 16px 20px; }
.block-text { padding: 16px 20px; }
.block-equation {
    background: var(--surface);
    padding: 16px 20px;
}
.block-graph {
    background: var(--surface);
    padding: 16px 20px;
}
.block-table {
    background: var(--surface);
    padding: 16px 20px;
}
.block-figure { padding: 16px 20px; }
.block-list { padding: 16px 20px; }
.block-code {
    background: var(--surface);
    padding: 16px 20px;
}
.block-container {
    padding: 16px 20px;
}
.block-spacer { padding: 16px 20px; }

/* Container Block - New Styles */
.container-section {
    margin-bottom: 16px;
}

.container-section:last-child {
    margin-bottom: 0;
}

.container-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.container-preset-btn {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 2px solid;
    position: relative;
}

.container-preset-btn i {
    font-size: 20px;
    margin-bottom: 2px;
}

.container-preset-btn span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.container-preset-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.container-preset-btn.active {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px var(--accent), 0 4px 12px rgba(0,0,0,0.2);
}

.container-preset-btn:active {
    transform: scale(0.98);
}

.container-customize-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.container-input-group {
    flex: 2;
    min-width: 200px;
}

.container-input-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.container-color-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.container-color-group label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.color-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.color-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
}

.color-input-wrapper input[type="color"] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    padding: 0;
}

.color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-input-wrapper input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

.color-value {
    font-size: 11px;
    font-family: monospace;
    color: var(--muted);
    text-transform: uppercase;
}

.container-width-control {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.width-presets {
    display: flex;
    gap: 8px;
}

.width-preset-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.width-preset-btn:hover {
    background: var(--surface);
    color: var(--text);
    border-color: var(--accent);
}

.width-preset-btn.active {
    background: var(--accent);
    color: var(--accent-text-on);
    border-color: var(--accent);
}

/* La fila de ancho del contenedor usa el MISMO control que la figura, el
   espacio y los sliders de rotacion (clase .geo-zoom-ctl). Antes tenia un
   componente propio (.width-slider-wrapper): 100 px de ancho en vez de 90,
   sin iconos de zoom y con otro color de valor. */
.geo-zoom-ctl-label .geo-zoom-label {
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-right: 2px;
}
/* Los hijos se alinean al centro y con la misma altura que en las otras filas
   (que miden 16 px), para que la fila del contenedor no desentone. */
.geo-zoom-ctl-label .geo-size-val {
    font-size: 10px;
    line-height: 1;
    color: var(--muted);
    min-width: 34px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.geo-zoom-ctl-label i { font-size: 13px; line-height: 1; }

.container-textarea {
    width: 100%;
    min-height: 100px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s ease;
}

.container-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.container-live-preview {
    transition: all 0.2s ease;
}

.container-preview-header {
    transition: background 0.2s ease;
}

/* Responsive adjustments for container block */
@media (max-width: 600px) {
    .container-presets-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .container-customize-row {
        flex-direction: column;
    }

    .container-input-group {
        min-width: 100%;
    }

    .container-color-group {
        width: 100%;
    }
}

/* ===== FORM ELEMENTS ===== */
.editor-page input[type="text"],
.editor-page input[type="number"],
.editor-page textarea,
.editor-page select {
    font-family: inherit;
}

.editor-page input[type="text"],
.editor-page input[type="number"] {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 7px 10px;
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}
.editor-page input[type="text"]:focus,
.editor-page input[type="number"]:focus { border-color: var(--accent); }

.editor-page textarea {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 8px 10px;
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: 13px;
    outline: none;
    resize: vertical;
    min-height: 56px;
    font-family: inherit;
    transition: border-color 0.15s;
    line-height: 1.5;
}
.editor-page textarea:focus { border-color: var(--accent); }

.editor-page select {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 8px;
    border-radius: var(--r-sm);
    font-size: 12px;
    outline: none;
    cursor: pointer;
}

.block-title input {
    background: transparent;
    border: none;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    padding: 4px 0;
}
.block-title input::placeholder { color: var(--muted); }
.block-title input:focus { border: none; }

.block-author input,
.block-date input { text-align: center; }

.block-section input[placeholder*="seccion"],
.block-section input[placeholder*="Seccion"] {
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
}

/* ===== EQUATION BLOCK ===== */
.eq-input-area {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.eq-input-area textarea {
    flex: 1;
    font-family: 'Fira Code', 'Consolas', monospace;
    min-height: 40px;
}

.eq-preview-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 12px 20px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    color: var(--text);
}

/* ===== GLOBAL FORM ELEMENTS ===== */
.block-editor-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
    margin-bottom: 4px;
    white-space: nowrap;
}

.block-editor input[type="text"],
.block-editor input[type="number"],
.block-editor textarea {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    padding: 8px 12px;
    font-size: 12px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.block-editor input[type="text"]:focus,
.block-editor input[type="number"]:focus,
.block-editor textarea:focus {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.block-editor input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    padding: 2px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
}
.block-editor input[type="color"]:hover,
.graph-row input[type="color"]:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
    transform: scale(1.08);
}
.block-editor input[type="color"]:active,
.graph-row input[type="color"]:active {
    transform: scale(0.95);
}
.block-editor input[type="color"]::-webkit-color-swatch-wrapper,
.graph-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 1px;
    border-radius: 5px;
    overflow: hidden;
}
.block-editor input[type="color"]::-webkit-color-swatch,
.graph-row input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.block-editor input[type="color"]::-moz-color-swatch,
.graph-row input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.graph-row input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    padding: 2px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.block-editor select {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    padding: 7px 12px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}
.block-editor select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.block-editor input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    width: 100%;
}
.block-editor input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.1s;
}
.block-editor input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.block-editor input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
}

/* ===== SIZE CONTROL ROWS (site look) ===== */
.geo-size-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.geo-size-controls label {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}
.geo-size-controls input[type="range"] {
    flex: 1;
}
.geo-size-controls .geo-size-val {
    font-size: 10px;
    color: var(--muted);
    min-width: 34px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Site slider — same look as the integrales.html zoom control */
.geo-zoom-ctl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
}
.geo-size-controls label.geo-zoom-ctl {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.geo-zoom-ctl i {
    font-size: 13px;
}
.geo-zoom-ctl input[type="range"] {
    width: 90px;
    flex: none;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.geo-zoom-ctl input[type="range"]::-webkit-slider-thumb {
    width: 13px;
    height: 13px;
}
.geo-zoom-ctl input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;
}

/* Spacer block live preview */
.spacer-live-preview {
    background-color: var(--surface-2);
    background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(216, 180, 254, 0.14) 4px 8px);
    border: 1px dashed rgba(216, 180, 254, 0.45);
    border-radius: 10px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: height 0.15s ease;
}
.spacer-live-preview span {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.block-editor input[type="checkbox"] {
    accent-color: var(--accent);
    width: auto;
    cursor: pointer;
}
.block-editor button {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}
.block-editor button:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
}

/* ===== GRAPH BLOCK ===== */
.graph-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-bottom: 10px;
}
.graph-controls label {
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.graph-controls input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: none;
    cursor: pointer;
    padding: 2px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.graph-controls input[type="color"]:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    transform: scale(1.08);
}
.graph-controls input[type="color"]::-webkit-color-swatch-wrapper { padding: 1px; }
.graph-controls input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; cursor: pointer; }
.graph-controls input[type="color"]::-moz-color-swatch { border: none; border-radius: 3px; cursor: pointer; }
.graph-controls input, .graph-controls select {
    width: 100%;
    box-sizing: border-box;
}

.graph-preview {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    min-height: 160px;
}
.graph-canvas { width: 100%; height: auto; aspect-ratio: 5/4; border-radius: 8px; }

.graph-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.graph-tab {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}
.graph-tab:hover { color: var(--text); background: var(--surface-2); }
.graph-tab.active { background: var(--accent); color: var(--accent-text-on); border-color: var(--accent); font-weight: 600; }

/* Slider row for 3D controls */
/* Graph single-row layout */
.graph-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    grid-column: 1 / -1;
    flex-wrap: wrap;
}
.graph-row > div {
    flex: 1;
    min-width: 0;
}

/* 3D slider columns */
.graph-slider-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.graph-slider-col label {
    font-size: 10px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0;
}
.graph-slider-col input[type="range"] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.graph-slider-col input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.1s;
}
.graph-slider-col input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.graph-slider-col input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: pointer;
}
.graph-slider-val {
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Modern checkbox */
.graph-check {
    font-size: 11px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
    margin-bottom: 0;
}
.graph-check input[type="checkbox"] {
    cursor: pointer;
}

/* ===== UNIFORM CHECKBOX (purple, site style) ===== */
.editor-page input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin: 0;
    vertical-align: middle;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.editor-page input[type="checkbox"]:hover { border-color: var(--accent); }
.editor-page input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.editor-page input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid var(--accent-text-on);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.editor-page input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 1px;
}

.graph-section-label {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0 2px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
    width: 100%;
    font-weight: 600;
    grid-column: 1 / -1;
}

.graph-presets { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.graph-preset-btn {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
    font-weight: 500;
}
.graph-preset-btn:hover { background: var(--accent); color: var(--accent-text-on); border-color: var(--accent); transform: translateY(-1px); }

/* Extra curves */
.graph-extra-curve {
    grid-column: 1 / -1;
    padding: 6px 8px;
    background: var(--surface-2);
    border-radius: 10px;
    border: 1px solid var(--border);
}
.graph-extra-curve input[type="text"] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    padding: 3px 6px;
    font-size: 11px;
    outline: none;
}
.graph-extra-curve input[type="text"]:focus {
    border-color: var(--accent);
}
.graph-add-curve-btn {
    width: 100%;
    padding: 6px 10px;
    border: 1.5px dashed var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
    font-weight: 500;
}
.graph-add-curve-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-1px);
}

/* ===== TABLE BLOCK ===== */
.table-size-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.table-size-controls button {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    color: var(--text);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
}
.table-size-controls button:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.05); }
.table-size-controls span { font-size: 12px; color: var(--muted); font-weight: 500; }
.table-editor { overflow-x: auto; }
.table-editor table { width: 100%; border-collapse: collapse; border-radius: 8px; overflow: hidden; }
.table-editor td, .table-editor th { border: 1px solid var(--border); padding: 0; border-radius: 0; }
.editor-page .table-editor td input,
.editor-page .table-editor th input {
    width: 100%; background: var(--surface);
    border: none; border-radius: 0 !important; padding: 6px 10px;
    color: var(--text); font-size: 12px;
    outline: none; text-align: center;
    transition: background 0.15s;
}
.table-editor td input:focus, .table-editor th input:focus { background: var(--accent-soft); }
.editor-page .table-editor th input { background: var(--surface-2); font-weight: 600; }

/* ===== FIGURE BLOCK ===== */
.figure-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
}
.figure-drop-zone:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.figure-drop-zone i { font-size: 28px; margin-bottom: 8px; display: block; color: var(--accent); }
.figure-drop-zone p { font-size: 12px; }
.figure-caption { margin-top: 8px; }
.figure-caption input { text-align: center; }

/* ===== LIST BLOCK ===== */
.block-list select { margin-bottom: 8px; }
.list-item { display: flex; gap: 6px; margin-bottom: 4px; }
.list-item input { flex: 1; padding: 6px 10px; }
.list-item button {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--accent);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.list-item button i { font-size: 14px; }
.list-item button:hover {
    background: var(--accent);
    color: var(--accent-text-on);
    border-color: var(--accent);
    transform: scale(1.05);
}

.list-add-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 16px;
    border: 2px dashed var(--accent);
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.2s;
}
.list-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent-text-on);
    background: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(147,51,234,0.2);
}
.list-add-btn i { font-size: 14px; }

/* ===== CODE BLOCK ===== */
.block-code select {
    margin-bottom: 10px;
    max-width: 200px;
}
.block-code textarea {
    background: var(--surface);
    color: #6EE7B7;
    font-family: 'Fira Code', 'Consolas', monospace;
    min-height: 120px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    line-height: 1.8;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
}

/* ===== SIDEBAR SAVED DOC CARDS ===== */
.saved-doc-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    min-width: 42px;
    max-width: 50px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 8px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
}
.saved-doc-card:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.saved-doc-card i {
    font-size: 16px;
    color: var(--accent);
}
.saved-doc-card span {
    font-size: 8px;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.saved-doc-x {
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 10px !important;
    color: var(--muted) !important;
    padding: 0 2px;
    line-height: 1;
    border-radius: 3px;
}
.saved-doc-x:hover {
    color: #e11d48 !important;
    background: rgba(225,29,72,0.1);
}


/* ===== EDITOR MODALS (site-style) ===== */
.editor-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.editor-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.editor-modal-panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    max-width: 600px;
    width: 100%;
    max-height: min(86vh, 720px);
    overflow-y: auto;
    padding: clamp(1.6rem, 4vw, 2.4rem);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 5001;
}
.editor-modal-overlay.visible .editor-modal-panel {
    transform: translateY(0) scale(1);
}
.editor-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 18px;
    transition: all 0.2s;
}
.editor-modal-close:hover {
    background: var(--accent);
    color: var(--accent-text-on);
    transform: rotate(90deg);
}
.editor-modal-title {
    font-family: 'Manufacturing Consent', cursive;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 400;
    margin-bottom: 20px;
    color: var(--text);
    text-align: center;
    padding-right: 40px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* Add Block Modal */
.add-block-panel { max-width: 600px; }

.add-block-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.add-block-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
}
.add-block-option:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(147,51,234,0.15);
}
.add-block-option i { font-size: 24px; margin-bottom: 8px; display: block; color: var(--accent); }
.add-block-option .title { font-size: 11px; font-weight: 600; color: var(--text); }

/* Mini titulos de seccion dentro de la cuadricula del modal:
   agrupan los bloques (Texto / Matematicas / Contenido / Estructura) */
.add-block-section-title {
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 8px 0 -2px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--border);
}
.add-block-grid > .add-block-section-title:first-child { margin-top: 0; }
.add-block-section-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: -6px 0 10px;
}

/* Tool quick-pick: the tapped tool's block(s) sit big on top (accent filled),
   the rest shrink into a compact grid below — both PC and mobile */
#addBlockFeatured {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border);
}
#addBlockFeatured:empty { display: none; }
#addBlockFeatured .add-block-option {
    flex: 0 1 calc(50% - 5px);
    padding: 20px 10px 18px;
    border-radius: 18px;
    border: 1px solid var(--accent);
    background: var(--accent-soft);
}
#addBlockFeatured .add-block-option i {
    font-size: 30px;
    margin-bottom: 8px;
}
#addBlockFeatured .add-block-option .title {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
}
#addBlockFeatured .add-block-option:hover {
    box-shadow: 0 8px 20px rgba(147, 51, 234, 0.22);
}

.add-block-grid.compact {
    gap: 7px;
}
.add-block-grid.compact .add-block-option {
    padding: 8px 4px;
    border-radius: 10px;
    background: var(--surface-2);
}
.add-block-grid.compact .add-block-option i {
    font-size: 15px;
    margin-bottom: 3px;
    opacity: 0.8;
}
.add-block-grid.compact .add-block-option .title {
    font-size: 8.5px;
    font-weight: 500;
    color: var(--muted);
}
.add-block-grid.compact .add-block-option:hover {
    background: var(--surface-2);
    border-color: var(--accent);
    transform: none;
}
.add-block-grid.compact .add-block-option:hover i { color: var(--accent); opacity: 1; }
.add-block-grid.compact .add-block-option:hover .title { color: var(--accent); }

/* Template Modal */
.template-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.template-card {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.25s;
}
.template-card:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(147,51,234,0.15);
}
.template-card i { font-size: 24px; color: var(--accent); margin-bottom: 10px; display: block; }
.template-card h4 { margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.template-card p { font-size: 11px; color: var(--muted); line-height: 1.5; }

/* ===== LATEX CODE PANEL ===== */
.latex-code-panel {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 280px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 2600;
}
.latex-code-panel.visible { display: flex; flex-direction: column; }

@media (min-width: 901px) {
    .latex-code-panel {
        left: 86px;
        right: 14px;
        border-radius: 12px 12px 0 0;
        border: 1px solid var(--border);
        border-bottom: none;
    }
}

.latex-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}
.latex-code-body { flex: 1; overflow: auto; }
.latex-code-body textarea {
    width: 100%; height: 100%;
    background: var(--bg); border: none;
    padding: 16px; color: #6EE7B7;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 12px; resize: none;
    line-height: 1.5; tab-size: 2;
}

/* LaTeX mode editor */
.latex-editor {
    flex: 1; width: 100%;
    background: var(--bg); border: none;
    padding: 20px; color: #6EE7B7;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 12px; resize: none;
    line-height: 1.6; tab-size: 2;
}

/* ===== RICH TEXT TOOLBAR ===== */
.rich-toolbar {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
    padding: 4px 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    align-items: center;
    flex-wrap: wrap;
}
.rich-toolbar button {
    width: 26px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.12s;
    font-family: inherit;
}
.rich-toolbar button:hover { background: var(--surface); color: var(--text); border-color: var(--border); }
.rich-toolbar button.active { background: var(--accent); color: var(--accent-text-on); }
.rich-toolbar .sep { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
.rich-toolbar .color-swatch {
    width: 20px; height: 20px;
    border-radius: 4px;
    border: 2px solid var(--border);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.rich-toolbar .color-swatch input[type="color"] {
    position: absolute; inset: -4px;
    width: 28px; height: 28px;
    border: none; cursor: pointer; opacity: 0;
}
.rich-toolbar .toolbar-label {
    font-size: 9px;
    color: var(--muted);
    margin-right: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rich-toolbar .font-size-select {
    height: 22px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 10px;
    font-family: inherit;
    padding: 0 2px;
    cursor: pointer;
    outline: none;
}

/* ===== EQUATION MODE TOGGLE ===== */
.eq-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    width: fit-content;
}
.eq-mode-toggle button {
    padding: 6px 14px;
    border: none;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.12s;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}
.eq-mode-toggle button + button { border-left: 1px solid var(--border); }
.eq-mode-toggle button:hover { color: var(--text); background: var(--surface); }
.eq-mode-toggle button.active { background: var(--accent); color: var(--accent-text-on); }

/* MathLive field */
.mathlive-wrap {
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
    border: 1px solid var(--border);
    border-radius: 20px 24px 24px 20px;
    padding: 12px 22px;
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: text;
    transition: all 0.3s ease;
}
.mathlive-wrap:focus-within {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
    transform: translateY(-2px);
}
.mathlive-wrap math-field {
    font-size: 18px;
    width: 100%;
    min-height: 24px;
    line-height: 1.4;
    --caret-color: currentColor;
    --selection-background-color: rgba(120,120,120,0.18);
    --smart-fence-color: #7a7a7a;
    --primary-color: var(--text);
    --accent-color: var(--accent);
    --keyboard-accent-color: var(--accent);
    --highlight-color: var(--accent-soft);
    --placeholder-color: var(--muted);
    --correct-color: var(--muted);
    --incorrect-color: var(--muted);
    --contains-highlight-background-color: rgba(120,120,120,0.12);
    --keyboard-background: var(--surface);
    --keyboard-text: var(--text);
    --keyboard-border: var(--border);
    --keyboard-toolbar-background: var(--surface-2);
    --keyboard-toolbar-text: var(--muted);
    --keycap-background: var(--surface-2);
    --keycap-text: var(--text);
    --keycap-border: var(--border);
    --keycap-secondary-background: var(--surface-2);
    --keycap-secondary-text: var(--muted);
    --variant-keycap-background: var(--surface-2);
    --variant-keycap-text: var(--text);
    --keycap-highlight-background: var(--surface-2);
    --keycap-highlight-text: var(--text);
    --keycap-active-background: var(--border);
    --keycap-active-text: var(--text);
}
.mathlive-wrap math-field:focus { outline: none; }
.mathlive-wrap math-field::part(container) { border: none; background: transparent; box-shadow: none; padding: 0; }
.mathlive-wrap math-field::part(content) { min-height: 24px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; padding: 0; }
.mathlive-wrap math-field::part(virtual-keyboard-toggle), .mathlive-wrap math-field::part(menu-toggle) { color: var(--muted); }

/* Dark mode MathLive theming */
[data-theme="dark"] .mathlive-wrap {
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
[data-theme="dark"] .mathlive-wrap:focus-within {
    background: var(--surface);
    box-shadow: 0 0 0 2px rgba(216, 180, 254, 0.2);
}
[data-theme="dark"] .mathlive-wrap math-field {
    --keyboard-background: #18181c;
    --keyboard-text: #f2f0f7;
    --keyboard-border: #2a2a31;
    --keyboard-toolbar-background: #212127;
    --keyboard-toolbar-text: #b9b6c4;
    --keycap-background: #212127;
    --keycap-text: #f2f0f7;
    --keycap-border: #2f2f37;
    --keycap-secondary-background: #2a2a31;
    --keycap-secondary-text: #d8b4fe;
    --variant-keycap-background: #212127;
    --variant-keycap-text: #f2f0f7;
    --keycap-highlight-background: #3a2547;
    --keycap-highlight-text: #d8b4fe;
    --keycap-active-background: #d8b4fe;
    --keycap-active-text: #18181c;
}

/* Light mode MathLive theming */
[data-theme="light"] .mathlive-wrap math-field {
    --keyboard-background: var(--surface);
    --keyboard-text: #000000;
    --keyboard-border: #ecdfef;
    --keyboard-toolbar-background: #f9f9f9;
    --keyboard-toolbar-text: #000000;
    --keycap-background: #f9f9f9;
    --keycap-text: #000000;
    --keycap-border: #000000;
    --keycap-secondary-background: #EFEFEC;
    --keycap-secondary-text: #4e185e;
    --variant-keycap-background: #f9f9f9;
    --variant-keycap-text: #000000;
    --keycap-highlight-background: #3a2547;
    --keycap-highlight-text: #4e185e;
    --keycap-active-background: #4e185e;
    --keycap-active-text: #ffffff;
}

/* ===== HELPERS ===== */
.text-muted { color: var(--muted); font-size: 11px; }

.save-status {
    font-size: 11px;
    color: var(--muted);
    transition: color 0.3s, opacity 0.3s;
    white-space: nowrap;
}
.save-status.saved {
    color: #6EE7B7;
    opacity: 1;
}
.save-status.loaded {
    color: var(--accent);
    opacity: 1;
}
.save-status.error {
    color: #FCA5A5;
    opacity: 1;
}

/* ===== LATEX CONTAINER BLOCK ===== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--muted);
    gap: 12px;
}
.empty-state i { font-size: 40px; opacity: 0.2; }
.empty-state p { font-size: 13px; }

/* ===== NOTIFICATION ===== */
.editor-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--accent);
    color: var(--accent-text-on);
    padding: 10px 18px;
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 600;
    z-index: 500;
    transform: translateY(80px);
    transition: transform 0.25s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.editor-notification.show { transform: translateY(0); }



/* ===== MINTED CODE BLOCK PREVIEW (always light, matches paper) ===== */
.minted-preview {
    background: #f8f8f6;
    border: 1px solid #e2e2dd;
    border-radius: 8px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 10pt;
    color: #1a1a1a;
}
.minted-preview .minted-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f0efec;
    border-bottom: 1px solid #e2e2dd;
}
.minted-preview .minted-lang {
    font-size: 10px;
    font-weight: 600;
    color: #66665e;
}
.minted-preview .minted-caption {
    font-size: 10px;
    color: #66665e;
}
.minted-preview pre {
    margin: 0;
    padding: 16px 18px;
    overflow-x: auto;
    background: #f8f8f6;
}
.minted-preview pre code {
    font-family: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
    font-size: 12px;
    line-height: 1.7;
    color: #1a1a1a;
    white-space: pre;
    tab-size: 4;
}

/* ===== BAR CHART (Fallback CSS) ===== */
.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 0 10px; }
.bar-chart .bar {
    flex: 1; background: var(--accent);
    border-radius: 4px 4px 0 0;
    transition: height 0.3s;
    position: relative; min-width: 20px;
}
.bar-chart .bar-label {
    position: absolute; bottom: -20px; left: 50%;
    transform: translateX(-50%);
    font-size: 10px; color: #666; white-space: nowrap;
}
.function-plot { width: 100%; height: 200px; }

/* ===== SCROLLBAR ===== */
.editor-page ::-webkit-scrollbar { width: 5px; height: 5px; }
.editor-page ::-webkit-scrollbar-track { background: transparent; }
.editor-page ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.editor-page ::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ===== BOTTOM BAR FIX FOR EDITOR ===== */
@media (min-width: 901px) {
    .editor-page {
        padding-left: 0 !important;
    }
}

/* ===== PRINT ===== */
@media print {
    .editor-topbar, .editor-sidebar, .latex-code-panel, .editor-notification, .editor-tabs { display: none !important; }
    .preview-paper, .preview-page { border: none; box-shadow: none; margin: 0; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .editor-topbar {
        flex-direction: column;
        align-items: stretch;
    }
    .editor-topbar-left, .editor-topbar-right {
        justify-content: center;
    }
    .add-block-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .template-grid {
        grid-template-columns: 1fr;
    }
    .add-block-panel {
        min-width: auto;
        width: 95%;
    }
    .split-pane {
        flex-direction: column;
    }
    .resize-handle {
        width: 100%;
        height: 3px;
        cursor: row-resize;
    }
}

@media (max-width: 480px) {
    .add-block-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Site hamburger only shows on mobile (the editor bar has it as first item) */
.sticky-menu-btn {
    display: none;
}

/* ============================================================
   MOBILE LAYOUT (<=900px) — sticky bar on top, tools grid below
   Rules here live at the end of the file so they win over the
   base .editor-sidebar-btn styles (equal specificity).
   PC layout (>=901px) is untouched.
   ============================================================ */
@media (max-width: 900px) {
    /* Sticky toolbar: pinned to the top, laid out as exactly two rows */
    .editor-sticky-bar {
        top: 8px;
        left: 8px;
        right: 8px;
        margin: 0;
        align-items: center;
        gap: 4px 6px;
        padding: 5px 6px;
        border-radius: 16px;
        flex-wrap: wrap;
        overflow-x: visible;
        white-space: normal;
        max-width: calc(100vw - 16px);
    }

    /* Tools bar (Selec/Texto/Ecuacion/...): fila horizontal FIJA, siempre
       visible. Antes era position: relative, asi que al hacer scroll (por
       ejemplo al agregar un bloque) se iba de pantalla con el resto del
       contenedor. Ahora se fija debajo de la barra sticky y .editor-main
       reserva su alto con var(--toolsbar-h) para no quedar tapado. */
    .editor-sidebar {
        position: fixed;
        top: calc(var(--stickybar-bottom, 76px) + 4px);
        left: 8px;
        right: 8px;
        width: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0;
        border-radius: 14px;
        padding: 4px;
        box-shadow: var(--shadow-md);
        background: var(--surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        z-index: 2400;
    }
    .editor-sidebar::-webkit-scrollbar { height: 0; }
    /* La rejilla de herramientas toma todo el ancho que deja el boton de
       menu y cada boton estira hasta llenar su celda, para que no queden
       huecos a los lados. min-width:0 deja que la rejilla encoja por
       debajo de su min-content en pantallas muy estrechas. */
    .editor-sidebar .editor-tools-grid {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
    .editor-sidebar .editor-tools-grid .editor-sidebar-btn {
        width: 100%;
        min-width: 0;
        height: 32px;
    }
    /* El menu de navegacion va con display:none en movil (lo sustituye el
       hamburger), asi que la rejilla se queda con todo el ancho de la barra. */
    .editor-sidebar-spacer,
    .editor-sidebar-divider { display: none; }

    /* Tabs (Editar / Vista previa): misma idea que la barra de herramientas,
       fija y siempre visible. El HTML la pone como hermana de .editor-area
       para que no dependa del layout del panel. */
    .editor-tabs {
        position: fixed;
        top: calc(var(--stickybar-bottom, 76px) + 4px + var(--toolsbar-h, 42px) + 4px);
        left: 8px;
        right: 8px;
        width: auto;
        margin-bottom: 0;
        z-index: 2399;
        background: var(--surface);
        box-shadow: var(--shadow-md);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Las dos barras de arriba son fixed y ya no ocupan flujo, asi que
       .editor-main reserva sus alturas medidas en js/main.js y arranca por
       debajo de ellas en vez de quedar tapado. */
    .editor-main {
        margin-top: calc(
            var(--stickybar-bottom, 76px) + 8px
            + var(--toolsbar-h, 42px) + 4px
            + var(--tabbar-h, 46px)
        );
    }
    /* Hide saved docs on mobile */
    #savedDocsSectionSidebar { display: none !important; }
    .editor-tools-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 3px;
        padding: 0;
        width: 100%;
    }
    .editor-sidebar-btn {
        width: 100%;
        height: 32px;
        flex-direction: column;
        gap: 1px;
        border-radius: 8px;
        font-size: 8px;
        background: var(--surface-2);
        border: 1px solid transparent;
    }
    .editor-sidebar-btn i { font-size: 13px; }
    .editor-sidebar-btn span { font-size: 7px; }
    .editor-sidebar-btn:hover { background: var(--accent-soft); color: var(--accent); }
    .editor-sidebar-btn.active {
        background: var(--accent-soft);
        border-color: var(--accent);
    }
    .editor-sidebar-btn.active::before { display: none; }

    /* Site-style hamburger: opens the drawer with the site's own logic */
    .sticky-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border: 1px solid var(--border);
        border-radius: 50%;
        background: var(--surface);
        color: var(--text);
        font-size: 15px;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        transition: background-color 0.2s, transform 0.2s, border-color 0.2s;
    }
    .sticky-menu-btn:hover { color: var(--accent); border-color: var(--accent); }
    .sticky-menu-btn:active { transform: scale(0.92); }

    /* The "show/hide navigation" toggle is replaced by the hamburger */
    .toggle-nav-btn { display: none; }

    /* Compact controls: small but still comfortable to tap */
    .editor-sticky-bar .sticky-btn {
        height: 26px;
        font-size: 9px;
        padding: 2px 6px;
        gap: 3px;
        border-radius: 8px;
        letter-spacing: 0;
    }
    .editor-sticky-bar .sticky-btn i { font-size: 11px; }
    .editor-sticky-bar .sticky-btn.icon-only { min-width: 26px; padding: 0; }
    /* Group labels and live status texts are dropped on mobile: they were
       making a row wrap (e.g. when the "Cargado..." text changed width) */
    .editor-sticky-bar .sticky-label { display: none; }
    .editor-sticky-bar .sticky-sep { height: 12px; margin: 0 1px; }
    .editor-sticky-bar .sticky-info,
    .editor-sticky-bar .save-status { display: none !important; }
    .sticky-menu-btn { width: 26px; height: 26px; font-size: 13px; }
    .sticky-navbar-btn { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }

    /* Mobile: graph row wraps with more gap */
    .graph-row {
        gap: 10px;
    }
    .graph-row > div {
        min-width: calc(50% - 10px);
    }
    .graph-check {
        min-width: calc(50% - 10px);
    }

    /* Level 1: hamburger + mode/add groups spread across the width */
    .editor-sticky-bar .sticky-left {
        flex: 1;
        gap: 4px;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    /* Level 2: move/undo/redo, nuevo + downloads on their own row */
    .editor-sticky-bar .sticky-right {
        flex: 1 1 100%;
        margin-left: 0;
        gap: 4px;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    /* The separators around the hidden status texts are not needed */
    .editor-sticky-bar .sticky-right > .sticky-sep { display: none; }

    /* On mobile the editor leaves the site sidebar alone, so the native
       drawer (.active) slides over the editor when the hamburger is tapped */
    body.editor-mode .sidebar {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }
}

/* ============================================================
   FIX MOVIL (debe ser lo ÚLTIMO del archivo): margen izquierdo
   simétrico en las páginas editor. La regla de arriba del todo
   (body.editor-mode .content / body.editor-mode main.content,
   especificidad 0,0,2,2, padding-left: 0 !important) dejaba el
   contenedor pegado al borde izquierdo del celular. Se compensa
   con selectores de especificidad igual o mayor y más tardíos.
   ============================================================ */
@media (max-width: 900px) {
    body.editor-mode .content.editor-page,
    body.editor-mode main.editor-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ===== UNIFIED SLIDER — same look on every editor slider (purple circle) ===== */
.editor-page input[type="range"] {
    width: 90px;
    flex: none;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.editor-page input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.1s;
}
.editor-page input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.editor-page input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* ============================================================
   SALIDA DOCUMENTO / DIAPOSITIVAS  +  AJUSTES DE PAGINA
   ============================================================ */

/* La pill de modo. Se parece a .eq-mode-toggle, que ya existia, para que las
   dos cosas se lean igual y no parezca una pieza nueva pegada encima. */
.modo-pill {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-2);
    margin: 6px 0;
}
.modo-pill button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.modo-pill button + button { border-left: 1px solid var(--border); }
.modo-pill button:hover { color: var(--text); background: var(--surface); }
.modo-pill button.active { background: var(--accent); color: var(--accent-text-on); }
.modo-pill.compacto button { padding: 5px 11px; font-size: 11px; }

/* Panel de ajustes de pagina */
.pg-campo { margin-bottom: 14px; }
.pg-campo label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pg-campo select,
.pg-margen input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}
.pg-campo select:focus,
.pg-margen input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}
.pg-margenes-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pg-margenes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pg-margen label {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 4px;
}
.pg-resumen {
    margin-top: 16px;
    padding: 9px 12px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.pg-aviso {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--accent-soft);
    border-radius: var(--r-sm);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
    margin-top: 4px;
}
.pg-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* ============================================================
   MODO DIAPOSITIVAS
   ============================================================ */

.slide-wrap { flex-shrink: 0; }

/* ============================================================
   MODO DIAPOSITIVA: aspecto beamer
   ============================================================
   Beamer usa sans por defecto, no serif, y tiene una barra fina de color
   abajo con los simbolos de navegacion. Ademas el color de enfasis
   (structure) pinta los titulos y los bloques. Todo eso se hace aqui con
   la variable --slide-accent, que por defecto es el morado del sitio y
   cambia solo con el tema claro/oscuro. */
.slide-frame {
    --acento-slide: var(--slide-accent, var(--accent, #4e185e));
    background: #fff;
    color: #1a1a2e;
    /* Computer Modern por defecto, como en beamer. Sans solo si el alumno
       elige una fuente sin serifa. */
    font-family: var(--doc-font, 'Computer Modern', 'CMU Serif', 'Latin Modern Roman', 'STIX Two Text', serif);
    line-height: 1.45;
    /* El marco se pinta dentro de .slide-wrap con la transformacion de escala
       puesta en linea. Antes el wrap era flex y encogia el marco desde su
       ancho real (1280px) hasta el ancho del contenedor, y encima la
       transformacion lo volvia a reducir: la diapositiva salia casi cuadrada
       en vez de respetar la proporcion que eligio el alumno. */
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 6px;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* La barra de abajo: es lo que mas dice "esto es beamer" de un vistazo. */
.slide-frame::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: var(--acento-slide);
    opacity: .85;
}

/* El titulo va arriba, como el frametitle de beamer. */
.slide-title {
    font-size: 24pt;
    font-weight: 700;
    color: var(--acento-slide);
    padding-bottom: 9px;
    margin-bottom: 14px;
    border-bottom: 2px solid color-mix(in srgb, var(--acento-slide) 35%, transparent);
    flex-shrink: 0;
    text-align: left;
    line-height: 1.25;
}
.slide-frame.sin-titulo .slide-body { justify-content: center; }

.slide-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    font-size: 15pt;
}
.slide-body p { margin: 10px 0; text-align: center; }
.slide-body ul, .slide-body ol { font-size: 15pt; text-align: left; }
.slide-body h1 { font-size: 30pt; margin: 0 0 12px 0; }
.slide-body h2 { font-size: 22pt; margin: 0 0 10px 0; border: none; padding: 0; color: var(--acento-slide); }

/* La portada: titulo grande y centrado, como la primera lamina de una
   charla. */
.slide-body.portada { justify-content: center; }
.slide-body.portada h1 { font-size: 40pt; margin: 0 0 6px 0; border: none; }
.slide-body.portada .author { font-size: 20pt; color: #666; margin-top: 22px; }
.slide-body.portada h1 + .author { border-top: 2px solid var(--acento-slide); padding-top: 22px; }

.slide-foot {
    position: absolute;
    right: 18px;
    bottom: 14px;
    font-size: 10pt;
    color: #bbb;
    font-variant-numeric: tabular-nums;
}

/* ---- Columnas: dos o tres bloques uno al lado del otro ----
   El \begin{columns} de beamer. Cada columna lleva su propio titulo en el
   color de enfasis, que es lo que separa a simple vista donde acaba una
   y empieza la otra. */
.columns-preview {
    display: grid;
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    align-items: start;
    text-align: left;
}
.col-celda { min-width: 0; }
.col-titulo {
    font-weight: 700;
    color: var(--acento-slide, var(--slide-accent, #4e185e));
    font-size: 15pt;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid color-mix(in srgb, var(--acento-slide, #4e185e) 30%, transparent);
}
.col-texto { font-size: 14pt; line-height: 1.45; }

/* ---- La caja (block) de beamer: recuadro con barra de titulo ---- */
.beamer-box {
    border: 1.5px solid var(--acento-slide, var(--slide-accent, #4e185e));
    border-radius: 5px;
    overflow: hidden;
    text-align: left;
    margin: 6px 0;
}
.beamer-box .bb-titulo {
    background: var(--acento-slide, var(--slide-accent, #4e185e));
    color: #fff;
    font-weight: 700;
    font-size: 13pt;
    padding: 6px 12px;
}
.beamer-box .bb-texto {
    padding: 12px 14px;
    font-size: 14pt;
    line-height: 1.45;
    background: color-mix(in srgb, var(--acento-slide, #4e185e) 5%, #fff);
}

/* ---- Texto destacado: la frase que se quiere que se lea ---- */
.slide-highlight {
    font-size: 21pt;
    font-weight: 700;
    color: var(--acento-slide, var(--slide-accent, #4e185e));
    text-align: center;
    line-height: 1.35;
    margin: 8px 0;
}

/* ---- Aviso: info, correcto, atencion o error ---- */
.slide-alert-block {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-left: 5px solid #3b82f6;
    background: #eff6ff;
    border-radius: 4px;
    padding: 11px 14px;
    text-align: left;
    font-size: 14pt;
    margin: 6px 0;
}
.slide-alert-block .sa-cabecera {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}
.slide-alert-block .sa-texto { font-size: 13pt; line-height: 1.4; }
.slide-alert-block.nivel-ok    { border-left-color: #16a34a; background: #f0fdf4; }
.slide-alert-block.nivel-warn  { border-left-color: #d97706; background: #fffbeb; }
.slide-alert-block.nivel-error { border-left-color: #dc2626; background: #fef2f2; }

/* ---- Nota del orador: no se proyecta ---- */
.slide-note-block {
    border: 1px dashed #c9c9c4;
    border-radius: 6px;
    background: var(--surface-2, #f4f4f1);
    padding: 9px 12px;
}
.sn-cabecera {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted, #666);
    text-transform: uppercase;
    letter-spacing: .4px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.sn-no-se-proyecta {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e4e4df);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
    color: var(--muted, #666);
}
.sn-textarea, .sh-textarea, .bb-textarea, .sa-textarea, .col-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border, #e4e4df);
    border-radius: 5px;
    padding: 8px 10px;
    font: inherit;
    resize: vertical;
    background: var(--surface, #fff);
    color: var(--text, #1a1a1a);
}
.sh-textarea {
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    color: var(--slide-accent, var(--accent, #4e185e));
}

/* ---- Editor: como se ven los bloques nuevos mientras se escriben ---- */
.columns-block {
    border: 1px solid var(--border, #e4e4df);
    border-radius: 7px;
    padding: 11px;
    background: var(--surface, #fff);
}
.columns-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted, #666);
    margin-bottom: 9px;
}
.columns-count {
    background: var(--surface-2, #f0f0ed);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
}
.columns-cabecera button { margin-left: auto; }
.col-campo { margin-bottom: 8px; }
.col-campo:last-child { margin-bottom: 0; }
.col-campo label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted, #666);
    margin-bottom: 3px;
}

.beamer-box .bb-titulo { display: flex; align-items: center; gap: 7px; }
.bb-title-input {
    flex: 1;
    border: none;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    outline: none;
}
.bb-title-input::placeholder { color: rgba(255, 255, 255, .75); }

.sa-cabecera .sa-nivel {
    border: 1px solid var(--border, #e4e4df);
    background: var(--surface, #fff);
    color: var(--muted, #666);
    border-radius: 5px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.sa-cabecera .sa-nivel.on { border-color: var(--accent); color: var(--accent); }
.sa-title {
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 700;
    outline: none;
    flex: 1;
    color: var(--text, #1a1a1a);
}
.slide-alert-block.nivel-info .sa-cabecera > .ti { color: #3b82f6; }
.slide-alert-block.nivel-ok .sa-cabecera > .ti { color: #16a34a; }
.slide-alert-block.nivel-warn .sa-cabecera > .ti { color: #d97706; }
.slide-alert-block.nivel-error .sa-cabecera > .ti { color: #dc2626; }

/* ---- El selector de tipo dentro del modal de Formato ----
   Se eligio sacar el boton de "Salida" de la barra: ahi quedaba a un clic de
   cambiarle el tipo a un documento ya escrito. Aqui se elige antes. */
.tipo-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tipo-selector.fijado { opacity: .75; }
.tipo-opcion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
    padding: 12px 14px;
    border: 1.5px solid var(--border, #e4e4df);
    border-radius: 10px;
    background: var(--surface, #fff);
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.tipo-opcion:hover:not(:disabled) {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.tipo-opcion .ti { font-size: 18px; color: var(--muted, #666); }
.tipo-opcion .tipo-nombre { font-size: 13px; font-weight: 700; color: var(--text, #1a1a1a); }
.tipo-opcion .tipo-desc { font-size: 11px; color: var(--muted, #666); line-height: 1.4; }
.tipo-opcion.activo { border-color: var(--accent); background: var(--accent-soft); }
.tipo-opcion.activo .ti { color: var(--accent); }
.tipo-opcion:disabled { cursor: not-allowed; }

/* ---- El selector de color de enfasis ----
   Se le da el mismo aspecto que los inputs de color de los bloques y los
   graficos, y no el cuadrado nativo del navegador. */
.accent-fila { display: flex; align-items: center; gap: 9px; }
.accent-fila input[type=color] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border: 2px solid var(--border, #e4e4df);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.accent-fila input[type=color]:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
    transform: scale(1.08);
}
.accent-fila input[type=color]:active { transform: scale(.95); }
.accent-fila input[type=color]::-webkit-color-swatch-wrapper { padding: 1px; border-radius: 5px; overflow: hidden; }
.accent-fila input[type=color]::-webkit-color-swatch { border: none; border-radius: 4px; cursor: pointer; }
.accent-fila input[type=color]::-moz-color-swatch { border: none; border-radius: 4px; cursor: pointer; }
.accent-valor {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted, #666);
    font-variant-numeric: tabular-nums;
}
.pg-mini-boton {
    border: 1px solid var(--border, #e4e4df);
    background: var(--surface, #fff);
    color: var(--muted, #666);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pg-mini-boton:hover { border-color: var(--accent); color: var(--accent); }
.pg-ayuda { font-size: 11px; color: var(--muted, #666); margin: 6px 0 0; line-height: 1.5; }
.pg-ayuda code {
    background: var(--surface-2, #f0f0ed);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
}

.preview-desborde i { flex-shrink: 0; }