/* =============================================
   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 (lo usa
   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;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 48px) !important;
    overflow: hidden;
}

/* 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;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sticky-actions-left-mobile,
.sticky-actions-right-mobile {
    display: flex;
    align-items: center;
    gap: 6px;
}

.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:", 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;
    height: 100% !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;
}

/* móvil: el contenedor centrado con las mismas márgenes a ambos
   lados. La regla body.editor-mode main.content (padding-left: 0
   !important, especificidad 0,0,2,2) ganaba a esta; 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;
    }
}
@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;
        margin-right: 354px;
        /* arranca bajo la barra sticky (14 + banda + 46 de alto) */
        margin-top: calc(60px + var(--navbar-h, 0px));
        margin-bottom: 2px;
        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;
}

.preview-paper,
.preview-page {
    background: white;
    width: 100%;
    max-width: 816px;
    height: 1056px;
    padding: 60px 50px;
    border-radius: 4px;
    box-shadow: 0 1px 12px rgba(0,0,0,0.08);
    color: #222;
    font-family: 'CMU Serif', 'Latin Modern Roman', 'Times New Roman', 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: 22pt; margin: 0 0 8px 0; }
.preview-paper h2 { font-size: 14pt; margin: 16px 0 8px 0; border-bottom: 1px solid #ddd; padding-bottom: 4px; }
.preview-paper h3 { font-size: 12pt; margin: 12px 0 6px 0; }
.preview-paper p { margin: 0 0 8px 0; text-align: justify; }
.preview-paper .author { font-size: 12pt; color: #555; margin-bottom: 4px; }
.preview-paper .date { font-size: 11pt; color: #777; margin-bottom: 20px; }
.preview-paper .abstract { font-style: italic; padding: 0 20px; margin: 12px 0; color: #444; border-left: 3px solid #ccc; }
.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 auto; font-size: 10pt; }
.preview-paper td, .preview-paper th { border: 1px solid #999; padding: 4px 12px; text-align: center; }
.preview-paper th { background: #f0f0f0; }
.preview-paper .math-block { text-align: center; margin: 16px 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-page h1 { font-size: 22pt; margin: 0 0 8px 0; }
.preview-page h2 { font-size: 14pt; margin: 16px 0 8px 0; border-bottom: 1px solid #ddd; padding-bottom: 4px; }
.preview-page h3 { font-size: 12pt; margin: 12px 0 6px 0; }
.preview-page p { margin: 0 0 8px 0; text-align: justify; }
.preview-page .author { font-size: 12pt; color: #555; margin-bottom: 4px; }
.preview-page .date { font-size: 11pt; color: #777; margin-bottom: 20px; }
.preview-page .abstract { font-style: italic; padding: 0 20px; margin: 12px 0; color: #444; border-left: 3px solid #ccc; }
.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 auto; font-size: 10pt; }
.preview-page td, .preview-page th { border: 1px solid #999; padding: 4px 12px; text-align: center; }
.preview-page th { background: #f0f0f0; }
.preview-page .math-block { text-align: center; margin: 16px 0; overflow: visible; max-width: 100%; }
.preview-page .katex-display { margin: 0; overflow: visible; }
.preview-page .katex-display > .katex { max-width: 100%; }

.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-geometry {
    background: var(--surface);
    padding: 16px 20px;
}
.block-container {
    padding: 16px 20px;
}
.container-preset-btn {
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.container-preset-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.container-preset-btn:active { transform: scale(0.97); }

/* ===== 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);
}

/* Symbol palette */
.symbol-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
    padding: 10px;
    background: var(--surface-2);
    border-radius: 10px;
    border: 1px solid var(--border);
}

.symbol-btn {
    width: 34px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.15s;
    font-family: 'CMU Serif', serif;
}
.symbol-btn:hover { background: var(--accent); color: var(--accent-text-on); border-color: var(--accent); transform: scale(1.1); }

.symbol-category {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 0 2px;
    width: 100%;
    font-weight: 600;
}

/* ===== 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;
}
.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;
}

/* ===== GEOMETRY BLOCK ===== */
.geom-canvas-wrap {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    min-height: 180px;
}
.geom-canvas-wrap canvas { width: 100%; height: auto; display: block; border-radius: 8px; }
.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;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
}
.geo-size-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--surface);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ===== 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); }

/* 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: 9px;
    font-weight: 700;
    color: #4e185e;
    background: rgba(78, 24, 94, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.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; }

/* ===== PER-FUNCTION INLINE PARAMS ===== */
.graf-fn-params {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 6px 12px 8px;
    margin-left: 36px;
    border-top: 1px solid var(--border);
}
.graf-fn-param-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 120px;
    flex: 1 1 120px;
}
.graf-fn-param-key {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 14px;
    color: var(--accent);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.graf-fn-param-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 2px;
    background: var(--border);
    outline: none;
    cursor: pointer;
    min-width: 60px;
}
.graf-fn-param-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform 0.15s;
}
.graf-fn-param-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.graf-fn-param-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    cursor: pointer;
}
.graf-fn-param-val {
    width: 48px;
    padding: 2px 3px;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface-2, #f5f5f5);
    color: var(--text);
    flex-shrink: 0;
    outline: none;
}
.graf-fn-param-val:focus {
    border-color: var(--accent);
}
.graf-fn-param-val::-webkit-inner-spin-button,
.graf-fn-param-val::-webkit-outer-spin-button {
    opacity: 1;
}
body.dark .graf-fn-params {
    border-top-color: var(--border);
}
body.dark .graf-fn-param-val {
    background: color-mix(in srgb, var(--surface) 50%, var(--surface-2));
}
body.dark .graf-fn-param-slider {
    background: color-mix(in srgb, var(--border) 80%, var(--surface));
}

/* ===== 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); }

/* El zoom por pellizco lo lleva graficadora.js en los tres modos (2D,
   3D y polar). Sin esto el navegador se queda con el gesto y hace su
   propio zoom de página en vez de dejarle llegar el touchmove.
   touch-action no se hereda, asi que hay que ponerlo tambien en los
   hijos por los que el usuario apoya los dedos (el svg del area de
   dibujo y la capa de eventos), no solo en el contenedor. */
#plot-container,
#plot-container .main-svg,
#plot-container .nsewdrag,
#plot-container .draglayer,
#plot-container .infolayer,
#plot-container .modebar-container {
    touch-action: none;
}

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

/* Movil: la barra del sitio esta fijada abajo, asi que la banda que
   ocupa se reserva como padding inferior de la pagina. Con la barra
   visible queda 12px de margen por encima de ella; al contractingla
   (--navbar-h -> 0) el contenedor de la grafica crece hasta el borde
   inferior de la pantalla, dejando solo esos 12px.
   El alto se reinicia a 100dvh porque la regla de editor mode de mas
   arriba (height: calc(100vh - 48px), tambien en movil) recortaba 48px
   al pie y dejaba esa banda muerta siempre visible. */
@media (max-width: 900px) {
    html,
    body.editor-mode {
        height: 100vh !important;
        height: 100dvh !important;
    }
    body.editor-mode .content,
    body.editor-mode main.content {
        height: 100vh !important;
        height: 100dvh !important;
        padding-bottom: calc(12px + var(--navbar-h, 0px) + env(safe-area-inset-bottom)) !important;
    }
}

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

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .editor-main {
        /* sigue el borde inferior real de la barra sticky */
        margin-top: calc(var(--stickybar-bottom, 76px) + 8px);
    }
    .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/...): sits at top, no sticky */
    .editor-sidebar {
        position: relative;
        width: 100%;
        margin-bottom: 6px;
        border-radius: 14px;
        padding: 4px;
        box-shadow: var(--shadow-md);
        background: var(--surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        z-index: 2400;
    }
    /* 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; }

    /* 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: undo/redo/fullscreen left, Limpiar/Agregar right */
    .editor-sticky-bar .sticky-right {
        flex: 1 1 100%;
        margin-left: 0;
        gap: 4px;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    .sticky-actions-left-mobile,
    .sticky-actions-right-mobile {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
    }
    /* 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;
    }
}

/* ================================================================
   GRAFICADORA — layout overrides
   ================================================================ */

/* ---- Desktop: unified — hide preview, editor fills 100% ---- */
@media (min-width: 901px) {
    .preview-panel { display: none !important; }
    .resize-handle { display: none !important; }

    .editor-panel {
        flex: 1 !important;
        min-width: 0;
        border-right: none !important;
    }

    .split-pane {
        display: flex;
        flex: 1;
        overflow: hidden;
    }

    /* PC: la barra inferior del sitio flota arriba, así que la página
       editor ocupa el 100% del alto (graficadora.css arriba la recortaba
       calc(100vh - 48px), dejando la gráfica 46px por encima del fondo
       de la sidebar y el panel de funciones) */
    body.editor-mode .content,
    body.editor-mode main.content {
        height: 100vh !important;
    }

    /* Graph fills entire area */
    #plot-container {
        flex-grow: 1;
        height: 100%;
        position: relative;
    }

    .editor-content {
        display: flex;
        flex-direction: column;
        padding: 0 !important;
        overflow: hidden;
    }

    .editor-panel-header {
        display: none;
    }
}

/* ---- Mobile: editor = graph (big), preview = tools ---- */
@media (max-width: 900px) {
    .split-pane {
        flex-direction: column;
    }

    .editor-panel {
        flex: 1;
        min-height: 0;
    }

    .preview-panel {
        display: none !important;
    }

    .resize-handle { display: none; }

    #plot-container {
        flex-grow: 1;
        height: 100%;
        min-height: 0;
        position: relative;
    }

    .editor-content {
        display: flex;
        flex-direction: column;
    }

    .editor-panel-header { display: flex; }

    #grafToolsPanel {
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

/* ---- Sticky bar: 2 rows on mobile ---- */
@media (max-width: 900px) {
    .editor-sticky-bar {
        top: 8px;
        left: 8px;
        right: 8px;
        padding: 5px 6px;
        border-radius: 16px;
        flex-wrap: wrap;
        max-width: calc(100vw - 16px);
        overflow-x: visible;
        white-space: normal;
        gap: 4px 6px;
    }

    /* Row 1: hamburger + mode buttons */
    .editor-sticky-bar .sticky-left {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        align-items: center;
        justify-content: flex-start;
        flex: 1 1 100%;
    }
    /* Row 2: undo/redo/fullscreen left, Limpiar/Agregar right */
    .editor-sticky-bar .sticky-right {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        align-items: center;
        justify-content: space-between;
        flex: 1 1 100%;
        margin-left: 0;
    }
    .sticky-actions-left-mobile,
    .sticky-actions-right-mobile {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
    }

    /* Hide label on mobile */
    .editor-sticky-bar .sticky-label { display: none; }

    /* Compact buttons */
    .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-sep { display: none; }

    /* Hide "Limpiar" text on mobile, keep icon */
    .sticky-btn[onclick="clearAll()"] span { display: none; }

    /* Hamburger compact */
    .sticky-menu-btn { width: 26px; height: 26px; font-size: 13px; }
    .sticky-navbar-btn { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
}

/* ---- Sidebar tools grid: 2 columns on mobile ---- */
@media (max-width: 900px) {
    .editor-tools-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
        width: 100%;
    }
    body[data-graph-mode="3d"] .editor-tools-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    /* Campos tiene 4 botones (Selec/Ejemplos/Rangos/Config) y tambien
       deben caber en UN renglon, como en 3D. */
    body[data-graph-section="campos"] .editor-tools-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .editor-sidebar {
        position: relative;
        width: 100%;
        margin-bottom: 6px;
        border-radius: 14px;
        padding: 4px;
        box-shadow: var(--shadow-md);
    }
}

/* ---- Hide footer ---- */
[data-rc="footer"] { display: none !important; }

/* ================================================================
   FLOATING INPUT BAR
   ================================================================ */

/* ---- PC: fixed right panel, same height as sidebar tools ---- */
.graf-input-bar {
    display: none;
}
@media (min-width: 901px) {
    .graf-input-bar {
        display: block;
        position: fixed;
        /* arranca bajo la barra sticky, como los paneles */
        top: calc(68px + var(--navbar-h, 0px));
        bottom: 14px;
        right: 14px;
        width: 340px;
        z-index: 2500;
    }
    .graf-input-bar-inner {
        height: 100%;
        display: flex;
        flex-direction: column;
        background: color-mix(in srgb, var(--surface) 60%, transparent);
        backdrop-filter: blur(30px) saturate(1.8);
        -webkit-backdrop-filter: blur(30px) saturate(1.8);
        border: 1px solid var(--border);
        border-radius: var(--r-lg, 18px);
        box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.05) inset;
        overflow: hidden;
    }
    @supports not (background: color-mix(in srgb, red 50%, blue)) {
        .graf-input-bar-inner { background: var(--surface); }
    }
    .graf-input-header {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface-2) 40%, transparent);
    }
    .graf-input-title {
        font-size: .78rem;
        letter-spacing: 1px;
    }
    #editorContent { padding-right: 0 !important; }
}

/* ---- Mobile: hide old input bar, replaced by card ---- */

/* ---- Input header ---- */
.graf-input-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.graf-input-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.graf-input-title i { font-size: 14px; }
.graf-input-add-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all .2s ease;
    font-size: 14px;
}
.graf-input-add-btn:hover {
    background: var(--accent);
    color: #fff;
}

/* ---- Plot button ---- */
.graf-plot-btn {
    width: auto;
    max-width: 220px;
    margin: 16px auto 16px;
    padding: 10px 24px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    letter-spacing: .3px;
}
.graf-plot-btn:hover {
    background: var(--accent);
    color: var(--accent-text-on);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
.graf-plot-btn:active {
    transform: scale(.97);
}

/* ---- Function list ---- */
.graf-input-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}
.graf-input-list::-webkit-scrollbar { width: 4px; }
.graf-input-list::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }

/* ---- Function row ---- */
.graf-fn-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    transition: background .2s;
}
.graf-fn-row:last-child { border-bottom: none; }
.graf-fn-row:hover { background: color-mix(in srgb, var(--accent-soft) 30%, transparent); }

/* Label input */
.graf-fn-label-input {
    width: 36px;
    min-width: 36px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-align: center;
    outline: none;
    padding: 0 2px;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
    flex-shrink: 0;
    cursor: text;
}
.graf-fn-label-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
    background: var(--surface);
}

/* Color picker wrapper */
.graf-fn-color-wrap {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.graf-fn-color {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 2px solid var(--border);
    cursor: pointer;
    padding: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
}
.graf-fn-color::-webkit-color-swatch-wrapper { padding: 2px; }
.graf-fn-color::-webkit-color-swatch { border: none; border-radius: 4px; }
.graf-fn-color::-moz-color-swatch { border: none; border-radius: 4px; }
.graf-fn-color:hover { border-color: var(--accent); transform: scale(1.08); }

/* Input shell */
.graf-fn-input-shell {
    flex: 1;
    min-width: 0;
}
.graf-fn-input-main { min-width: 0; }

/* Function text input */
.graf-fn-text-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font-size: .85rem;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.graf-fn-text-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.graf-fn-text-input::placeholder {
    color: var(--muted);
    opacity: .6;
    font-family: inherit;
}

/* Remove button */
.graf-fn-remove {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--muted);
    font-size: 14px;
    flex-shrink: 0;
    transition: all .15s;
}
.graf-fn-remove:hover {
    background: rgba(239, 68, 68, .1);
    color: #ef4444;
}

/* ---- Empty state ---- */
.graf-input-empty {
    padding: 16px 12px;
    text-align: center;
    color: var(--muted);
    font-size: .8rem;
}

/* ---- Mobile: tighter spacing ---- */
@media (max-width: 900px) {
    .graf-fn-row { padding: 4px 8px; gap: 4px; }
    .graf-fn-label-input { width: 28px; min-width: 28px; height: 24px; font-size: .6rem; }
    .graf-fn-color-wrap { width: 24px; height: 24px; }
    .graf-fn-color { width: 24px; height: 24px; border-radius: 6px; }
    .graf-fn-remove { width: 20px; height: 20px; font-size: 11px; }
    .graf-fn-text-input { padding: 4px 8px; font-size: .78rem; border-radius: 8px; min-height: 28px; }
    .graf-input-header { padding: 4px 8px; }
    .graf-input-title { font-size: .65rem; }
    .graf-input-add-btn { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; }
}

/* ================================================================
   MOBILE FUNCTION CARD + FAB
   ================================================================ */
.graf-fab {
    display: none;
    position: fixed;
    bottom: var(--fab-clearance, 90px);
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--accent);
    color: var(--accent-text-on);
    border: none;
    font-size: 20px;
    cursor: pointer;
    z-index: 2450;
    box-shadow: none;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: center;
    justify-content: center;
}
.graf-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: none;
}
.graf-fab.active {
    background: var(--surface-2);
    color: var(--accent);
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    transform: rotate(45deg);
}
/* En movil la barra de navegacion del sitio vive abajo (--navbar-h) y el
   FAB se apoya a 90px para quedar por encima de ella. Con la barra
   oculta (body.navbar-hidden -> --navbar-h: 0 y la barra sale por
   abajo) no queda banda inferior y el boton baja al borde de la
   pantalla. Con el teclado abierto la regla de mas abajo lo mantiene
   por encima de la placa MathLive. */
@media (max-width: 900px) {
    body.navbar-hidden {
        --fab-clearance: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}
.graf-card-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2490;
    opacity: 0;
    transition: opacity .3s ease;
}
.graf-card-overlay.open {
    opacity: 1;
}
.graf-card {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2500;
    max-height: 70vh;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,.2);
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.graf-card.open {
    transform: translateY(0);
}
.graf-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.graf-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.graf-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.graf-card-add {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all .2s;
}
.graf-card-add:hover {
    background: var(--accent);
    color: #fff;
}
.graf-card-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--text);
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all .2s;
}
.graf-card-close:hover {
    background: var(--accent);
    color: var(--accent-text-on);
}
.graf-card-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
}
.graf-card-footer {
    padding: 10px 16px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.graf-card-footer .graf-plot-btn {
    width: 100%;
    max-width: 100%;
    margin: 0;
}
.graf-card-footer .panel3d-examples-btn {
    width: 100%;
    margin: 0;
}

@media (max-width: 900px) {
    .graf-fab { display: flex; }
    .graf-card-overlay.open { display: block; }
    .graf-card { display: flex; }
    /* Hide old bottom bar */
    .graf-input-bar { display: none !important; }
    #previewPanel { display: none !important; }
}
.tp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .3s ease, visibility .3s ease;
}
.tp-overlay[style*="display: flex"],
.tp-overlay[style*="display:flex"] {
    opacity: 1;
}
.tp-modal {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 18px);
    width: 90%;
    max-width: 480px;
    max-height: min(86vh, 640px);
    overflow-y: auto;
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.3));
    padding: clamp(1.6rem, 4vw, 2.4rem);
    transform: translateY(20px) scale(0.97);
    transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.tp-overlay[style*="display: flex"] .tp-modal,
.tp-overlay[style*="display:flex"] .tp-modal {
    transform: translateY(0) scale(1);
}
.tp-close-x {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    background: var(--surface-2);
    font-size: 18px;
    cursor: pointer;
    color: var(--text);
    transition: all .2s;
    z-index: 2;
}
.tp-close-x:hover {
    background: var(--accent);
    color: var(--accent-text-on);
    transform: rotate(90deg);
}
.tp-body { padding: 0; }
.tp-title {
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 400;
    font-family: 'Manufacturing Consent', 'Playfair Display', Georgia, serif;
    color: var(--text);
    margin-bottom: 6px;
    text-align: center;
    width: 100%;
    padding-right: 40px;
}
.tp-sub {
    font-size: .88rem;
    color: var(--muted);
    margin-bottom: 18px;
    text-align: center;
    line-height: 1.5;
}
.tp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 4px;
}
.tp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    color: var(--text);
}
.tp-card i { font-size: 28px; color: var(--accent); line-height: 1; }
.tp-card strong { font-size: .82rem; }
.tp-card span { font-size: .68rem; color: var(--muted); }
.tp-card:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.tp-fn-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: .85rem;
    color: var(--text);
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tp-fn-btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateX(4px);
}
.tp-fn-btn code {
    font-size: .75rem;
    color: var(--muted);
}
.tp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.tp-row label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    min-width: 50px;
}
.tp-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font-size: .85rem;
    font-family: inherit;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.tp-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.tp-apply-btn {
    width: 100%;
    padding: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}
.tp-apply-btn:hover {
    background: var(--accent);
    color: var(--accent-text-on);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
.tp-body input[type="range"] {
    accent-color: var(--accent);
}

/* Checkbox en modales (tp): misma estetica uniforme del sitio */
.tp-body 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;
}
.tp-body input[type="checkbox"]:hover { border-color: var(--accent); }
.tp-body input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.tp-body 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);
}
.tp-body input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 1px;
}
/* Color input en modales (tp): mismo look que panel3d-color-input */
.tp-body input[type="color"] {
    width: 28px;
    height: 28px;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
}
.tp-body input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.tp-body input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }
.tp-body input[type="color"]::-moz-color-swatch { border: none; border-radius: 4px; }
.tp-body input[type="color"]:hover { border-color: var(--accent); transform: scale(1.08); }
.tp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
    margin-top: 12px;
    color: var(--text);
}
.tp-table th, .tp-table td {
    padding: 8px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    text-align: center;
}
.tp-table th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    font-weight: 700;
    background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}
#tblOutput {
    max-height: 300px;
    overflow-y: auto;
    margin: 12px 0;
    border-radius: 12px;
    border: 1px solid var(--border);
}

/* ================================================================
   3D CONTROLS PANEL
   ================================================================ */
.panel3d-controls {
    position: fixed;
    right: 16px;
    top: 130px;
    bottom: 20px;
    width: 340px;
    z-index: 100;
    display: flex;
    flex-direction: column;
}
/* PC: el panel 3D toma la misma geometria que el de 2D (.graf-input-bar):
   arranca bajo la barra sticky mas la banda que ocupa la navbar del sitio
   y cierra a 14px del borde. Asi, al contracting la navbar (--navbar-h -> 0)
   crece 66px hacia arriba igual que en 2D, en vez de quedarse corto con
   top fijo. */
@media (min-width: 901px) {
    .panel3d-controls {
        top: calc(68px + var(--navbar-h, 0px));
        bottom: 14px;
        right: 14px;
    }
}
.panel3d-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    backdrop-filter: blur(30px) saturate(1.8);
    -webkit-backdrop-filter: blur(30px) saturate(1.8);
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 18px);
    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.05) inset;
    overflow: hidden;
}
.panel3d-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 40%, transparent);
}
.panel3d-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.panel3d-title i { font-size: 14px; }
.panel3d-add-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all .2s ease;
    font-size: 14px;
}
.panel3d-add-btn:hover {
    background: var(--accent);
    color: #fff;
}
.panel3d-fn-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 60px;
}
.panel3d-section {
    padding: 12px 16px;
    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.panel3d-subtitle {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.panel3d-examples-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.panel3d-examples-btn i {
    color: var(--accent);
}
.panel3d-examples-btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.panel3d-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.panel3d-row label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted);
    min-width: 90px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.panel3d-row input[type="range"] {
    flex: 1;
    accent-color: var(--accent);
}
.panel3d-row input[type="color"] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}
.panel3d-color-wrap {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.panel3d-color-input {
    width: 28px !important;
    height: 28px !important;
    border: 2px solid var(--border) !important;
    border-radius: 8px !important;
    cursor: pointer;
    padding: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}
.panel3d-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.panel3d-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.panel3d-color-input::-moz-color-swatch { border: none; border-radius: 4px; }
.panel3d-color-input:hover { border-color: var(--accent) !important; transform: scale(1.08); }
.panel3d-row input[type="checkbox"] {
    accent-color: var(--accent);
}
.panel3d-val {
    font-size: .75rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 24px;
    text-align: center;
}
/* El valor del rango 3D es un input numerico editable (admite cualquier
   valor, no solo los que caben en el slider) */
input.panel3d-val {
    width: 66px;
    min-width: 66px;
    padding: 5px 6px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--accent);
    font-family: inherit;
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    transition: border-color .2s, box-shadow .2s;
}
input.panel3d-val:hover { border-color: var(--accent); }
input.panel3d-val:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
/* sin flechitas: el campo queda compacto como el slider que tiene al lado */
input.panel3d-val::-webkit-outer-spin-button,
input.panel3d-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.panel3d-val { -moz-appearance: textfield; appearance: textfield; }

/* Boton cancelar del modal de aviso de rango */
.tp-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.tp-cancel-btn {
    flex: 1;
    padding: 10px;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: inherit;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    transition: all .2s ease;
}
.tp-cancel-btn:hover { color: var(--text); border-color: var(--muted); }

/* --- 3D func-row styles --- */
#functionsContainer3d .func-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    transition: background .2s;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}
#functionsContainer3d .func-row:last-child { border-bottom: none; }
#functionsContainer3d .func-row:hover {
    background: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}
.func-label-input {
    width: 36px;
    min-width: 36px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-align: center;
    outline: none;
    padding: 0 2px;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
    flex-shrink: 0;
    cursor: text;
}
.func-label-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
    background: var(--surface);
}
.func-delete {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    font-size: 14px;
    transition: all .2s;
}
.func-delete:hover { color: #ef4444; background: color-mix(in srgb, #ef4444 10%, transparent); }
.func-row .eq-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 10px;
    background: #EFEFEC;
    color: var(--text);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: .85rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}
.func-row .eq-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.func-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
}
.func-color-wrap {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.func-color {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 2px solid var(--border);
    cursor: pointer;
    padding: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}
.func-color::-webkit-color-swatch-wrapper { padding: 2px; }
.func-color::-webkit-color-swatch { border: none; border-radius: 4px; }
.func-color::-moz-color-swatch { border: none; border-radius: 4px; }
.func-color:hover { border-color: var(--accent); transform: scale(1.08); }
.func-row-controls {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}
/* Cada control va con su etiqueta arriba: asi las tres columnas caben en
   un solo renglon sin que la fila se parta ni los controles se pisen. */
.func-ctrl-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    min-width: 0;
}
.func-ctrl-group:first-child {
    flex: 1 1 0;
}
.func-ctrl-group:nth-child(2) {
    flex: 1 1 0;
}
.func-ctrl-group:last-child {
    flex: 0 0 auto;
}
.func-ctrl-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
}
.func-subtitle {
    font-size: .65rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex-shrink: 0;
}
.func-row .type-select,
.func-row .scheme-select {
    flex: 1;
    /* min-width:0 es lo que permite que el <select> se achique dentro de su
       columna en vez de desbordarla y pisar el control de al lado. */
    min-width: 0;
    width: 100%;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 8px;
    background: #EFEFEC;
    color: var(--text);
    font-size: .75rem;
    font-family: inherit;
    outline: none;
    appearance: auto;
    transition: border-color .2s;
}
.func-row .type-select:focus,
.func-row .scheme-select:focus { border-color: var(--accent); }
.func-row .opacity-slider {
    width: 76px;
    flex-shrink: 0;
    accent-color: var(--accent);
    height: 4px;
}

/* Mobile 3D panel - uses card system */
@media (max-width: 900px) {
    .panel3d-controls {
        display: none !important;
    }
}

/* Dark mode: 3D inputs use surface colors instead of #EFEFEC */
[data-theme="dark"] .func-row .eq-input,
[data-theme="dark"] .func-row .scheme-select,
[data-theme="dark"] .func-row .type-select {
    background: color-mix(in srgb, var(--surface) 50%, var(--surface-2));
    color: var(--text);
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
    /* el selector explicita/implicita se pinta con la paleta oscura:
       sin esto el desplegable nativo sigue en colores claros */
    color-scheme: dark;
}
[data-theme="dark"] .func-row .type-select option,
[data-theme="dark"] .func-row .scheme-select option {
    background: var(--surface-2);
    color: var(--text);
}
[data-theme="dark"] .func-row .opacity-slider {
    color-scheme: dark;
}
[data-theme="dark"] .func-row .type-select:focus,
[data-theme="dark"] .func-row .scheme-select:focus {
    border-color: var(--accent);
}

/* ================================================================
   MOBILE LAYOUT (<=900px) — barra de herramientas SEPARADA del
   contenedor. Mismo tratamiento que editor.html y
   editorecuaciones.html: la barra (Selec/Herram/Estilos/Tabla/
   Rangos/Ejemplos + menu) queda fija bajo la barra sticky y
   .editor-main reserva su alto medido en js/main.js, en vez de
   quedar la barra pegada dentro de la tarjeta del grafico.

   Este bloque va al final del archivo a proposito: gana por orden a
   los .editor-sidebar { position: relative } de los bloques moviles
   de arriba (misma especificidad, ultima regla gana) y aplica igual
   en modo 2D y 3D — el alto real lo mide --toolsbar-h, asi que si
   body[data-graph-mode="3d"] cambia las columnas de la rejilla la
   reserva se ajusta sola.

   PC (>=901px) queda intacto.
   ================================================================ */
@media (max-width: 900px) {
    .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 (Selec/Herram/Estilos/Tabla/Rangos/
       Ejemplos) toma todo el ancho que deja el boton de menu y cada boton
       estira hasta llenar su celda, sin huecos a los lados.
       min-width:0 deja que encoja por debajo de su min-content en
       pantallas muy estrechas; el alto lo sigue midiendo --toolsbar-h. */
    .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; }

    /* La barra ya no ocupa flujo, asi que .editor-main arranca por debajo
       de ella en vez de quedar tapado. Sin --tabbar-h: esta pagina no
       tiene las tabs Editar/Vista previa. */
    .editor-main {
        margin-top: calc(
            var(--stickybar-bottom, 76px) + 8px
            + var(--toolsbar-h, 42px) + 4px
        );
    }
}

/* ===== MATHLIVE: modo ecuacion en los inputs de funciones ===== */
.graf-input-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.graf-math-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 14px;
    cursor: pointer;
    transition: all .2s ease;
}
.graf-math-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.graf-math-toggle.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}
.graf-card-actions .graf-math-toggle {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 15px;
}

/* En modo ecuacion el math-field ocupa el lugar del input de texto */
body.mathlive-mode .graf-fn-input-main .graf-fn-text-input,
body.mathlive-mode .func-row-main .eq-input { display: none; }
body.mathlive-mode .graf-fn-input-main .gf-math-host,
body.mathlive-mode .func-row-main .func-math-host { display: flex; }

.graf-fn-input-main .gf-math-host,
.func-row-main .func-math-host {
    min-height: 28px;
    padding: 3px 8px;
    border-radius: 8px;
    align-items: center;
    cursor: text;
    box-sizing: border-box;
}
.graf-fn-input-main .gf-math-host { width: 100%; }
.func-row-main .func-math-host { flex: 1; min-width: 0; }
.gf-math-host .mathquill-editor,
.func-math-host .mathquill-editor {
    width: 100%;
    min-height: 20px;
    font-size: .78rem;
    line-height: 1.3;
}
.gf-math-host .mathquill-editor::part(content),
.func-math-host .mathquill-editor::part(content) { min-height: 20px; }

/* El aviso de la pagina viene oculto por defecto: se muestra al usarlo */
.editor-notification.graf-show { display: flex !important; transform: translateY(0); }

/* Sin boton de menu (tres rayitas) en los math-fields de esta pagina:
   solo queda el de teclado, que es el que se usa. */
math-field::part(menu-toggle) { display: none !important; }

/* En movil el teclado virtual tapaba la tarjeta de funciones.
   graficadora.js mide la altura real del teclado visible y la publica en
   --graf-kb-height (0 cuando no hay teclado): con eso la tarjeta se sube
   por encima del teclado (y el FAB tambien), de modo que las filas quedan
   visibles y la lista sigue scrolleable. */
@media (max-width: 900px) {
    .graf-card {
        transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1),
                    bottom .2s ease, max-height .2s ease;
    }
    body.mathlive-mode .graf-card {
        bottom: var(--graf-kb-height, 0px);
        max-height: min(70vh, calc(100vh - var(--graf-kb-height, 0px) - 56px));
    }
    body.mathlive-mode .graf-fab {
        bottom: max(var(--fab-clearance, 90px), calc(var(--graf-kb-height, 0px) + 16px));
    }
}

/* En esta pagina el teclado va pegado al borde inferior, sin la
   separacion de 96px que mathlive-custom.css aplica en el resto del sitio
   (ahi reserva sitio para la barra de navegacion inferior). La regla de
   mathlive-custom.css tiene la misma especificidad pero se carga despues,
   por eso se sube la especificidad aqui (doble clase / body extra). */
@media (max-width: 900px) {
    body.mathlive-keyboard-open .ML__keyboard.ML__keyboard,
    body.mathlive-keyboard-open body math-virtual-keyboard {
        transform: none !important;
        border-radius: 15px 15px 0 0;
    }
}

/* ================================================================
   CAMPOS VECTORIALES 2D
   Bloques del panel #panelCamposControls (reutiliza la geometria de
   .panel3d-* y las filas .graf-fn-* de 2D).
   ================================================================ */
.campos-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 1px 0;
}
.campos-field .graf-fn-row { border-bottom: none; padding-left: 0; padding-right: 0; }
.campos-section {
    padding: 8px 2px;
    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.campos-section .panel3d-row:last-child { margin-bottom: 0; }
.campos-switch-row { justify-content: space-between; gap: 8px; }
.campos-switch-row label { min-width: 0; white-space: normal; }
.campo-scheme {
    flex: 1;
    min-width: 0;
    background: color-mix(in srgb, var(--surface) 55%, var(--surface-2));
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: .78rem;
}
[data-theme="dark"] .campo-scheme { color-scheme: dark; }
/* Color del esquema solido: aparece junto al select cuando toca */
.campo-solid-color { flex-shrink: 0; }
.campos-toggles {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    /* buen margen lateral sin llegar al borde del panel */
    padding: 2px 6px 0;
}
.campos-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Los tres reparten el ancho del panel en un solo renglon */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.campos-pill i { flex-shrink: 0; }
.campos-pill span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.campos-pill:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}
.campos-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text-on, #fff);
}
.campos-pill i { font-size: 15px; }
.campos-legend-bar {
    height: 14px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: linear-gradient(to right, #00007f, #0000ff, #00ffff, #ffff00, #ff0000, #7f0000);
    margin-bottom: 6px;
}
.campos-legend-scale {
    display: flex;
    justify-content: space-between;
    font-size: .68rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
/* Boton "Animar" de la barra de herramientas: activo mientras gira la
   escena 3D o corren las particulas de Campos. Icono pausa cuando esta
   animando. En movil queda solo el icono para no romper la fila. */
/* Solo visible en 3D y Campos: en 2D y Polares no aparece */
#animateToolBtn { display: none; }
body[data-graph-section="3d"] #animateToolBtn,
body[data-graph-section="campos"] #animateToolBtn {
    display: inline-flex;
}
#animateToolBtn.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}
@media (max-width: 900px) {
    #animateToolBtn .anim-label { display: none; }
    #animateToolBtn { max-width: 46px; padding-left: 8px; padding-right: 8px; }
}

/* Tiras de leyenda de la barra de herramientas (solo movil): un solo
   renglon horizontal SIN titulo, debajo/al lado de Selec/Ejemplos/
   Rangos/Config. En PC quedan ocultas: la leyenda vive en el panel de
   funciones de cada modo. */
/* Barra horizontal PROPIA, debajo de la barra de herramientas (solo
   movil): sin titulo, a todo el ancho util. En PC queda oculta: la
   leyenda vive en el panel de funciones de cada modo. */
.graf-legend-strip {
    display: none;
    position: fixed;
    top: calc(var(--stickybar-bottom, 76px) + 4px + var(--toolsbar-h, 42px) + 6px);
    left: 8px;
    right: 8px;
    z-index: 2399;
    align-items: center;
    height: 20px;
    padding: 4px 10px;
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
}
.graf-legend-strip.on { display: flex; }
.graf-legend-strip .campos-legend-bar {
    height: 10px;
    margin-bottom: 0;
    flex: 1 1 auto;
}
/* El contenido se esconde bajo la barra extra: se baja el margen solo
   cuando la tira esta visible */
body.legend-strip-on .editor-main {
    margin-top: calc(
        var(--stickybar-bottom, 76px) + 8px
        + var(--toolsbar-h, 42px) + 34px
    );
}
@media (min-width: 901px) {
    .graf-legend-strip { display: none !important; }
}
/* Movil: la fila de interruptores se compacta para caber en un renglon.
   Ademas, en movil la lista de Campos viaja a la tarjeta y ahi ya hay un
   boton fijo "Actualizar campo" en el pie: el boton propio de la lista
   sobra y se oculta (solo el hijo directo de la lista). */
@media (max-width: 900px) {
    .campos-toggles { gap: 5px; padding: 2px 2px 0; }
    .campos-pill { height: 30px; padding: 0 6px; gap: 4px; font-size: .68rem; }
    #camposControlsList > .graf-plot-btn { display: none; }
}
#panelCamposControls .graf-plot-btn { margin-top: 4px; }
/* La leyenda 3D usa los mismos margenes laterales que la de Campos
   (la lista de Campos vive en .panel3d-fn-list, que almohadilla 12px) */
#legendSection3d { padding-left: 14px; padding-right: 14px; }