/* ============================================================
   Editor de Ecuaciones — capa de estilos sobre editor.css
   Layout: split-pane del Editor LaTeX (editor | preview)
   ============================================================ */

/* ---------- entrada LaTeX ---------- */
.ece-input {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    padding: 14px 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: .92rem;
    line-height: 1.55;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.ece-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ---------- toolbar de símbolos (renderizados en KaTeX) ----------
   Todas las categorías se muestran a la vez, apiladas. */
.ece-cats {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px;
    max-height: 520px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.ece-cat-title {
    margin: 0 0 8px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
}

.ece-symbols {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
}

.ece-sym {
    min-width: 44px;
    min-height: 40px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #EFEFEC;
    color: var(--text);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: all .2s ease;
}

/* LaTeX de estructuras (matrices, sistemas): permite el salto de línea
   para que el contenido nunca se salga del botón */
.ece-sym .katex-html {
    white-space: normal;
    word-break: break-word;
}

/* botones con icono Tabler (espacios, colores, texto, enter...) */
.ece-sym-icon {
    flex-direction: column;
    gap: 3px;
    min-height: 52px;
}

.ece-sym-icon i {
    font-size: 18px;
    color: var(--accent);
}

.ece-sym-icon span {
    font-size: .62rem;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.1;
}

.ece-sym:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px var(--accent-soft);
}

.ece-sym:active {
    transform: scale(.94);
}

/* símbolo LaTeX renderizado dentro del botón */
.ece-sym .katex {
    font-size: 1.02em;
    max-width: 100%;
    overflow: hidden;
}

.ece-sym-plain {
    font-family: Georgia, 'Times New Roman', serif;
}

/* ---------- PC: paneles 50/50 (igual que el Editor LaTeX) ----------
   Centrado idéntico a conicas.html: restauramos el padding izquierdo
   que la regla de editor.css (@media PC) anula a 0 — con la misma
   especificidad (body + clase) y cargando después de editor.css. */
body.editor-mode .editor-page {
    --ed-content-pl: 12px;
    padding: 8px 12px 12px !important;
}

/* ---------- chips de acceso rápido a categorías ---------- */
.ece-cat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

/* móvil: las herramientas (Selec/Texto/...) dan paso al índice de categorías */
.ece-cat-nav-side {
    display: none;
}

/* PC: las herramientas vuelven, el índice de categorías no existe aquí */
@media (min-width: 901px) {
    .ece-cat-nav-side {
        display: none !important;
    }
    .ece-cat-nav {
        display: flex;
    }
}

@media (max-width: 900px) {
    .ece-cat-nav {
        display: none;
    }

    /* barra lateral convertida en índice de categorías: mismo look que la
       barra de herramientas del Editor LaTeX (grid 5 col, dos niveles) */
    .ece-cat-nav-side {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 3px;
        padding: 0;
        width: 100%;
    }

    .ece-cat-nav-side .ece-cat-chip {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        width: 100%;
        min-width: 0;
        height: 32px;
        padding: 2px;
        font-size: 8px;
        line-height: 1.1;
        border-radius: 8px;
        text-align: center;
        background: var(--surface-2);
        border: 1px solid transparent;
    }

    .ece-cat-nav-side .ece-cat-chip i {
        font-size: 13px;
    }

    .ece-cat-nav-side .ece-cat-chip span {
        font-size: 7px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ece-cat-nav-side .ece-cat-chip:hover {
        background: var(--accent-soft);
        color: var(--accent);
    }

    .ece-cat-nav-side .ece-cat-chip.active {
        background: var(--accent-soft);
        border-color: var(--accent);
        color: var(--accent);
    }
}

.ece-cat-chip {
    font-family: inherit;
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    transition: color .18s, border-color .18s, background .18s;
}

.ece-cat-chip:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.ece-cat-chip.active {
    color: var(--accent-text-on, #fff);
    background: var(--accent);
    border-color: var(--accent);
}

/* ---------- contenedor de símbolos ---------- */
/* claro: contenedor blanco, botones #EFEFEC · oscuro: #18181C / #212127 */
.ece-toolbar {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

[data-theme="dark"] .ece-toolbar {
    background: #18181c;
}

[data-theme="dark"] .ece-sym {
    background: #212127;
}

/* móvil: sin barra de herramientas (las categorías viven en el sidebar) */
@media (max-width: 900px) {
    .editor-sidebar .toggle-nav-btn,
    .editor-sidebar .editor-tools-grid {
        display: none !important;
    }
}

/* ---------- host del input: textarea (LaTeX) + math-field (Interactivo) ---------- */
.ece-input-host {
    position: relative;
}

/* MODO INTERACTIVO: sin símbolos ni secciones — solo el math-field
   con su teclado y la vista previa. La barra lateral de herramientas
   (Selec./Texto/Ecuación/Tabla/Lista) se conserva en PC. */
body.ece-mode-interactive .ece-cat-nav,
body.ece-mode-interactive .ece-toolbar {
    display: none !important;
}

@media (max-width: 900px) {
    body.ece-mode-interactive .editor-sidebar {
        display: none !important;
    }
}

/* PC: la fila 2 se pega a la derecha de la barra, en una sola línea
   con divisoria antes de las descargas */
@media (min-width: 901px) {
    .sticky-row2 {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
    }

    .sticky-row2 .sticky-sep {
        display: block;
    }
}
.ece-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

/* tab = pill contenedora con botón principal + X de eliminar */
.ece-doc-tab {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 3px 4px 3px 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: border-color .18s, background .18s;
}

.ece-doc-tab:hover {
    border-color: var(--accent-soft);
}

.ece-doc-tab.active {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.ece-doc-tab-main {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px 4px 4px;
    font-size: .78rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: color .18s;
}

.ece-doc-tab-main i {
    font-size: 13px;
}

.ece-doc-tab.active .ece-doc-tab-main {
    color: var(--accent);
}

.ece-doc-tab-main:hover {
    color: var(--accent);
}

.ece-doc-tab-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    opacity: .65;
    transition: opacity .18s, color .18s, background .18s;
}

.ece-doc-tab-x:hover {
    opacity: 1;
    color: #e05252;
    background: color-mix(in srgb, #e05252 12%, transparent);
}

.ece-doc-tab-x i {
    font-size: 12px;
}

/* la barra lateral se conserva en PC: el margen sigue siendo necesario */

.ece-input-host .ece-mathfield {
    display: none;
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    font-size: 1.15rem;
    transition: border-color .2s;
    /* mismas variables que .mathquill-editor: caret, selección y
       controles internos en el acento del sitio (no el azul default) */
    --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);
    --contains-highlight-background-color: rgba(120,120,120,0.12);
}

/* toggle de teclado y menú (las tres rayitas) en el acento del sitio */
.ece-mathfield:focus, .ece-mathfield:focus-within { outline: none; }
/* el anillo de foco del sitio (no el ámbar default de MathLive) */
.ece-mathfield::part(container) {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.ece-mathfield:focus-within::part(container),
.ece-mathfield:focus::part(container) {
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.ece-mathfield::part(virtual-keyboard-toggle),
.ece-mathfield::part(menu-toggle) {
    color: var(--accent);
}
.ece-mathfield::part(menu-toggle):hover,
.ece-mathfield::part(virtual-keyboard-toggle):hover {
    color: var(--accent);
    opacity: .75;
}

/* override oscuro de las variables (la regla base tiene más
   especificidad que las reglas de tema de mathlive-custom.css) */
[data-theme="dark"] .ece-input-host .ece-mathfield {
    --selection-background-color: rgba(180,180,180,0.18);
    --smart-fence-color: #a3a3a3;
    --primary-color: #ffffff;
}

.ece-input-host.active .ece-mathfield {
    display: block;
}

.ece-input-host.active .ece-input {
    display: none;
}

/* ---------- panel del editor: columna fija, solo la lista de
   categorías scrollea (sin scrollbars anidadas) ---------- */
.ece-editor-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ece-editor-content .ece-input {
    flex-shrink: 0;
}

.ece-editor-content .ece-toolbar {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ece-editor-content .ece-cats {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

/* ---------- modal de exportación: aire y jerarquía ---------- */
#eceExportModal .modal {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#eceExportModal .modal-title {
    margin: 0;
}

#eceExportModal .modal-desc {
    margin: 0;
}

#eceExportModal .close-modal {
    top: 18px;
    right: 18px;
}

#eceExportModal .ece-export-which,
#eceExportModal .ece-export-opts,
#eceExportModal .ece-export-actions {
    gap: 14px;
}

#eceExportModal .ece-scale-ctl {
    gap: 8px;
}

#eceExportModal .ece-field-select {
    padding: 13px 40px 13px 14px;
}

#eceExportModal .ece-export-actions .ece-btn {
    padding: 13px 10px;
    font-size: .92rem;
}

/* chevron Tabler de los selects (el nativo está apagado) */
.ece-scale-ctl,
.ece-export-which {
    position: relative;
}

.ece-select-chev {
    position: absolute;
    right: 14px;
    bottom: 15px;
    pointer-events: none;
    font-size: 15px;
    color: var(--muted);
    transition: color .18s;
}

.ece-scale-ctl:focus-within .ece-select-chev {
    color: var(--accent);
}

/* ---------- vista previa: bloque por cada ecuación ---------- */
.ece-pv-doc {
    width: 100%;
    padding: 10px 6px;
    border-radius: 12px;
    border: 1px dashed transparent;
    cursor: pointer;
    transition: border-color .18s, background .18s;
}

.ece-pv-doc:hover {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border-color: var(--border);
}

.ece-pv-doc.activo {
    border-color: var(--accent-soft);
}

.ece-pv-render {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

/* ---------- panel de vista previa ---------- */
.ece-preview-content {
    padding: 14px 16px 16px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ece-preview {
    /* el visor llena el espacio de su contenedor (panel de vista previa) */
    flex: 1 1 auto;
    min-height: 220px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow: auto;
}

.ece-preview-inner {
    min-width: 0;
    max-width: 100%;
    transform-origin: center center;
    transition: font-size .15s ease, transform .15s ease;
}

.ece-preview-inner .katex {
    font-size: 1.5em;
}

.ece-empty {
    color: var(--muted);
    font-size: .9rem;
    opacity: .7;
}

.ece-error {
    color: #d0446c;
    font-size: .88rem;
}

/* ---------- exportación: banda compacta bajo el visor ----------
   Dos filas limpias: acciones (PNG/SVG/PDF) y opciones (Escala/Fondo) */
.ece-export {
    flex-shrink: 0;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ece-export-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ece-export-actions .ece-btn {
    width: 100%;
    padding: 11px 8px;
}

.ece-export-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ece-export-opts .ece-scale-ctl {
    min-width: 0;
}

.ece-scale-ctl {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 130px;
    min-width: 120px;
}

.ece-field-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
}

.ece-field-select {
    width: 100%;
    padding: 10px 34px 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-size: .88rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    transition: border-color .2s;
}

.ece-field-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* botones (patrón canónico del sitio) */
.ece-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    border: none;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ece-btn i {
    font-size: 16px;
}

.ece-btn-primary {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.ece-btn-primary:hover {
    background: var(--accent);
    color: var(--accent-text-on);
    transform: translateY(-3px) scale(1.01);
}

.ece-btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.ece-btn-ghost:hover {
    background: var(--surface);
    border-color: var(--accent-soft);
    transform: translateY(-2px);
}

/* estado copiado (igual que el modal compartir) */
.ece-btn .ic-done {
    display: none;
}

.ece-btn.copiado .ic-copy {
    display: none;
}

.ece-btn.copiado .ic-done {
    display: inline-block;
    color: #2e8b57;
}

.ece-hint {
    display: none;
    margin-top: 8px;
    font-size: .74rem;
    color: var(--muted);
    opacity: .85;
}

@media (min-width: 901px) {
    .ece-hint {
        display: block;
    }
}

/* ---------- zoom (dentro del header del panel) ---------- */
.ece-zoom-ctl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.ece-zoom-ctl i {
    font-size: 13px;
}

.ece-zoom-ctl input[type="range"] {
    width: 90px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.ece-zoom-ctl input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.ece-zoom-ctl input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* ---------- táctil: sin sticky-hover, feedback por presión ---------- */
@media (hover: none) {
    .ece-sym:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ============================================================
   MÓVIL (≤900px) — misma filosofía que el Editor LaTeX:
   paneles apilados, toolbar compacta, visor con prioridad
   y despejado de la barra inferior del sitio
   ============================================================ */
@media (max-width: 900px) {

    /* ---- LAYOUT APP: todo visible a la vez, sin scroll global ----
       La columna .editor-main llena exactamente el alto disponible
       (bajo la barra sticky superior y sobre la barra inferior del sitio;
       dvh = viewport real del móvil) y cada panel reparte el espacio:
       editor arriba con su propia lista con scroll, preview fijo abajo. */
    .editor-main {
        /* la barra sticky es fixed: el contenido necesita margen que la
           esquive. --stickybar-bottom = borde inferior real de la barra
           (lo mide js/main.js, 76px con las 2 filas de siempre) + 8px */
        margin-top: calc(var(--stickybar-bottom, 76px) + 8px);
        margin-bottom: 0;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    body.editor-mode .editor-page {
        height: 100dvh !important;
        /* despeja la barra inferior fija (inicio/tema/recientes/…); el
           --navbar-h se va a 0 al contracting la barra y los paneles crecen */
        padding-bottom: calc(12px + var(--navbar-h, 0px) + env(safe-area-inset-bottom)) !important;
    }

    .split-pane {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .editor-panel {
        flex: 1 1 52%;
        min-height: 224px;
        overflow: hidden;
    }

    .preview-panel {
        /* reparte el espacio con el editor; el visor llena su contenedor */
        flex: 1 1 48%;
        min-height: 0;
        overflow: hidden;
    }

    /* válvula de seguridad: en pantallas muy cortas se desliza dentro
       del split en vez de recortar la banda de exportación */
    .split-pane {
        overflow-y: auto;
    }

    /* la separación respecto de la barra inferior del sitio la da el
       padding de la página — no un margen que le quite altura al editor */
    .preview-panel {
        margin-bottom: 0;
    }

    /* input: 16px evita el auto-zoom de iOS al enfocar */
    .ece-input {
        font-size: 1rem;
        min-height: 72px;
        padding: 10px 14px;
        border-radius: 12px;
    }

    .ece-toolbar {
        border-radius: 12px;
    }

    .ece-cats {
        gap: 12px;
        padding: 10px;
    }

    .ece-cat-title {
        margin-bottom: 6px;
        font-size: .68rem;
    }

    /* símbolos: grid que llena el ancho con targets táctiles grandes */
    .ece-symbols {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        gap: 6px;
        padding: 8px;
        overflow: hidden;
    }

    .ece-sym {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: 6px 4px;
        font-size: 1.08rem;
        border-radius: 10px;
        white-space: normal;
    }

    /* el KaTeX de los botones no puede sobresalir: se contiene y centra */
    .ece-sym .katex-display {
        margin: 0;
        transform: scale(.85);
        transform-origin: center center;
    }

    .ece-sym .katex {
        max-width: 100%;
        overflow: hidden;
    }

    .ece-sym-icon {
        min-height: 58px;
    }

    .ece-sym-icon i {
        font-size: 17px;
    }

    .ece-sym-icon span {
        font-size: .58rem;
    }

    /* visor: alto cómodo, scroll propio y margen inferior compacto */
    .ece-preview-content {
        padding: 10px 10px 12px;
    }

    /* visor: llena el contenedor de vista previa (la exportación vive
       ahora en la barra superior y su modal) */
    .ece-preview {
        min-height: 0;
        padding: 14px 10px;
    }

    .ece-preview-inner .katex {
        font-size: 1.3em;
        max-width: 100%;
        overflow-x: auto;
    }

    .ece-export-actions .ece-btn {
        padding: 11px 8px;
    }

    .ece-zoom-ctl input[type="range"] {
        width: 64px;
        height: 5px;
    }

    /* modo interactivo: el editor se reduce a su input y la vista
       previa se queda con el resto de la pantalla */
    body.ece-mode-interactive .editor-panel {
        flex: 0 0 auto;
        min-height: 0;
    }

    body.ece-mode-interactive .preview-panel {
        flex: 1 1 auto;
    }

    /* barra superior: misma filosofía que editor.html — sin labels,
       separadores cortos, botones compactos */
    .editor-sticky-bar .sticky-label,
    .editor-sticky-bar .sticky-sep {
        display: none;
    }

    .editor-sticky-bar .sticky-btn {
        height: 26px;
        padding: 0 8px;
        font-size: 11px;
    }

    .editor-sticky-bar .sticky-btn.icon-only {
        min-width: 28px;
        padding: 0 6px;
    }

    /* fila 2: deshacer/rehacer a la izquierda, descargas a la derecha */
    .sticky-row2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
    }

    .sticky-row2 .sticky-sep {
        display: none;
    }

    .sticky-row2 .sticky-btn {
        height: 26px;
        padding: 0 8px;
        font-size: 11px;
    }

    .sticky-row2 .sticky-btn.icon-only {
        min-width: 28px;
        padding: 0 6px;
    }

    .ece-zoom-ctl input[type="range"]::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }

    .ece-zoom-ctl input[type="range"]::-moz-range-thumb {
        width: 16px;
        height: 16px;
    }

    .ece-hint {
        display: none !important;
    }
}

/* ============================================================
   MÓVIL: contenedor centrado con las MISMAS márgenes laterales
   que conicas.html (12px simétricos), sin ningún desplazamiento
   lateral heredado de editor.css. Selectores con especificidad
   mayor o igual que body.editor-mode main.content (0,0,2,2).
   ============================================================ */
@media (max-width: 900px) {
    body.editor-mode .content.editor-page,
    body.editor-mode main.editor-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.editor-mode .editor-main {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================================
   PANTALLAS ESTRECHAS (<=416px): la barra superior se ve igual
   que en 417px+, es decir en las mismas DOS filas. El problema
   era que la fila 1 (hamburguesa + navbar + Interactivo/LaTeX +
   Ejemplo/Ecuacion) necesita ~410px; por debajo de eso .sticky-left
   se partia en dos lineas, la barra crecia a 3 filas y el contenido
   se metia debajo de ella. Aqui se compactan los controles de la
   fila 1 y se le prohibe partirse (flex-wrap: nowrap).
   ============================================================ */
@media (max-width: 416px) {
    .editor-sticky-bar .sticky-left {
        flex-wrap: nowrap;
        min-width: 0;
        gap: 4px;
    }

    .editor-sticky-bar .sticky-left .sticky-group { gap: 4px; }

    .editor-sticky-bar .sticky-left .sticky-btn {
        height: 24px;
        padding: 0 5px;
        font-size: 9px;
        gap: 3px;
    }

    .editor-sticky-bar .sticky-left .sticky-btn i { font-size: 10px; }

    .editor-sticky-bar .sticky-menu-btn,
    .editor-sticky-bar .sticky-navbar-btn {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    /* la fila 2 (deshacer/rehacer + PNG/PDF/SVG) se iguala a la fila 1 */
    .sticky-row2 { gap: 6px; }
    .sticky-row2 .sticky-btn,
    .sticky-row2 .sticky-btn.icon-only {
        height: 24px;
        padding: 0 5px;
        font-size: 9px;
        min-width: 24px;
    }

    /* red de seguridad: si aun no cabe (viewport < 320px o tipografia
       muy grande), la barra se desplaza en horizontal en vez de
       desbordarse fuera de su caja redondeada */
    .editor-sticky-bar { overflow-x: auto; }
}

/* ============================================================
   ÍNDICE DE CATEGORÍAS FIJO EN MÓVIL
   En móvil las herramientas (Selec./Texto/Limpiar/Tabla/Lista) y
   el toggle de navegación se ocultan, así que la barra lateral
   queda siendo solo el índice de categorías (16 chips en rejilla
   de 8 columnas). Se le aplica el mismo tratamiento que a la barra
   de herramientas del Editor LaTeX: tarjeta fija bajo la barra
   sticky, con el alto reservado por main.js en --toolsbar-h, para
   que no se vaya de pantalla al hacer scroll.
   ============================================================ */
@media (max-width: 900px) {
    /* La regla genérica de editor.css deja la barra en flex-direction:row
       con overflow-x:auto porque en el Editor LaTeX es una fila de botones.
       Aquí su contenido es una rejilla, así que va en columna y sin scroll. */
    .editor-sidebar {
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
        gap: 0;
        padding: 6px;
    }

    /* La rejilla ocupa todo el ancho de la tarjeta */
    .editor-sidebar .ece-cat-nav-side {
        width: 100%;
    }

    /* Esta página no tiene las tabs Editar/Vista previa, así que --tabbar-h
       nunca se publica (no existe #editorTabs) y no debe reservar espacio:
       si se dejara, quedarían 46px vacíos bajo la barra. */
    .editor-main {
        margin-top: calc(var(--stickybar-bottom, 76px) + 8px + var(--toolsbar-h, 42px));
    }

    /* Modo interactivo: la barra lateral está oculta, así que no hay nada
       que reservar y el margen se queda solo en la barra sticky. */
    body.ece-mode-interactive .editor-main {
        margin-top: calc(var(--stickybar-bottom, 76px) + 8px);
    }

}

/* El split en dos columnas (editor | vista previa) solo existia en el
   tramo 769-900px. Por debajo de 769px el apilado en columna con tirador
   horizontal ya lo hacia editor.css (bloque de 768px) y es el diseno que
   esta pagina tenia antes de sincronizar: el layout de aqui reparte alto
   con flex 52%/48% y min-height, que solo funcionan en columna. */
@media (min-width: 769px) and (max-width: 900px) {
    .split-pane {
        flex-direction: row;
    }

    .split-pane > .resize-handle {
        display: block;
    }
}

/* editor.css oculta el tirador en todo el movil por el juego de tabs.
   En esta pagina el tirador horizontal es el repartidor 52/48 del alto, asi
   que se devuelve con las medidas que tenia antes del sync. */
@media (max-width: 768px) {
    .split-pane > .resize-handle {
        display: block;
        width: 100%;
        height: 3px;
        cursor: row-resize;
    }
}