/* mathlive-custom.css - Estilos globales para MathLive */
.smart-input-block { margin-bottom: 25px; }
.smart-input-shell { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; }
.smart-input-main { min-width: 0; }
.smart-text-input { margin-bottom: 0 !important; }

.mathquill-host {
    display: none; min-height: 56px; width: 100%;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 20px;
    transition: all 0.3s ease;
    padding: 12px 22px; color: var(--text); align-items: center; cursor: text;
    position: relative;
}
.mathquill-host.active { display: flex; }
/* Pista "Ej: ..." sobre el math-field vacio (data-pista, LaTeX con KaTeX) */
.pista-input {
    position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
    max-width: calc(100% - 54px); color: var(--muted); opacity: .75;
    font-size: 15px; line-height: 1.4; pointer-events: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pista-input .katex { font-size: 1em; color: inherit; }
.mathquill-host:focus-within {
    background: var(--surface); border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
    transform: translateY(-2px);
}

.mathquill-editor {
    width: 100%; min-height: 24px; font-size: 15px; line-height: 1.4;
    display: block; border: none; background: transparent; color: inherit;
    --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);
}
.mathquill-editor:focus, .mathquill-editor:focus-within { outline: none; }
.mathquill-editor::part(container) { border: none; background: transparent; box-shadow: none; padding: 0; }
.mathquill-editor::part(content) { min-height: 24px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; padding: 0; }
.mathquill-editor::part(virtual-keyboard-toggle), .mathquill-editor::part(menu-toggle) { color: var(--muted); }

math-virtual-keyboard {
    left: var(--sb-w); width: calc(100vw - var(--sb-w));
    background: var(--surface); color: var(--text); border-top: 1px solid var(--border);
    z-index: 2000; box-shadow: none;
    --keyboard-zindex: 2000;
    --accent-color: var(--accent, var(--text));
    --keyboard-accent-color: var(--accent, var(--text));
    --primary-color: var(--text);
    --secondary-color: var(--muted);
    --highlight-color: var(--accent-soft);
    --highlight-text-color: var(--text);
    --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-active-background: var(--border);
    --keycap-active-text: var(--text);
    --keycap-highlight-background: var(--border);
    --keycap-highlight-text: var(--text);
    --keycap-secondary-background: var(--surface-2);
    --keycap-secondary-text: var(--muted);
    --variant-keycap-background: var(--surface-2);
    --variant-keycap-text: var(--text);
    --keycap-accent-color: var(--accent, var(--text));
}

math-virtual-keyboard::part(keycap[data-action="expand", data-variant="command"]) {
    background: var(--keycap-background);
}

/* ---- Keyboard theming: luz vs oscuro (colores de acento del sitio) ---- */
/* MODO CLARO: teclado claro, acento morado oscuro del sitio (#4e185e) */
[data-theme="light"], 
[data-theme="light"] body,
[data-theme="light"] :root {
  --keyboard-background: #ffffff;
    --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;
    --keycap-accent-color: #4e185e;
    --accent-color: #4e185e;
    --keyboard-accent-color: #4e185e;
    --primary-color: #f2f0f7;
    --highlight-color: #3a2547;
    --highlight-text-color: #4e185e;
    --secondary-color: #bab7c2;
}
[data-theme="light"] math-virtual-keyboard::part(container),
[data-theme="light"] math-virtual-keyboard::part(toolbar) {
    background: #f4f4f1;
    color: #29272c;
}
[data-theme="light"] math-virtual-keyboard::part(keycap) {
    background: #ffffff;
    color: #29272c;
    border: 1px solid #e0dfdb;
}
[data-theme="light"] math-virtual-keyboard::part(secondary-keycap) {
    background: #efefec;
    color: #4e185e;
}
/* HOVER de las teclas en modo claro.

   MathLive pinta el hover casi blanco (#f9f9f9) sobre teclas que ya son
   blanco puro, asi que el contraste es durisimo y ademas no se aprecia
   claramente que tecla estas pulsando. Aqui se usa un gris muy claro
   (#eceae6), un salto sutil pero perceptible.

   El color viene de la paleta del sitio (--surface-2 / #eceae6), asi que
   los dos renglones siguientes en modo oscuro. */
[data-theme="light"] .MLK__keycap:hover,
[data-theme="light"] .MLK__keycap.is-hovered {
    background: #eceae6 !important;
}
/* En oscuro el hover ya es un gris claro sobre teclas oscuras: se suaviza
   igual, bajando el brillo en lugar de aclararlo. */
[data-theme="dark"] .MLK__keycap:hover,
[data-theme="dark"] .MLK__keycap.is-hovered {
    background: #2f2f37 !important;
}

/* MODO OSCURO: teclado oscuro, acento lila claro del sitio (#d8b4fe) */


[data-theme="dark"], 
[data-theme="dark"] body,
[data-theme="dark"] :root {
     --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;
    --keycap-accent-color: #d8b4fe;
    --accent-color: #d8b4fe;
    --keyboard-accent-color: #d8b4fe;
    --primary-color: #f2f0f7;
    --highlight-color: #3a2547;
    --highlight-text-color: #d8b4fe;
    --secondary-color: #b9b6c4;
    border-top: 1px solid #2a2a31;
}


[data-theme="dark"] math-virtual-keyboard {
    --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;
    --keycap-accent-color: #d8b4fe;
    --accent-color: #d8b4fe;
    --keyboard-accent-color: #d8b4fe;
    --primary-color: #f2f0f7;
    --highlight-color: #3a2547;
    --highlight-text-color: #d8b4fe;
    --secondary-color: #b9b6c4;
    background: #18181c;
    color: #f2f0f7;
    border-top: 1px solid #2a2a31;
}
[data-theme="dark"] math-virtual-keyboard::part(container),
[data-theme="dark"] math-virtual-keyboard::part(toolbar) {
    background: #212127;
    color: #f2f0f7;
}
[data-theme="dark"] math-virtual-keyboard::part(keycap) {
    background: #212127;
    color: #f2f0f7;
    border: 1px solid #2f2f37;
}
[data-theme="dark"] math-virtual-keyboard::part(secondary-keycap) {
    background: #2a2a31;
    color: #d8b4fe;
}

/* Con el teclado abierto, las páginas normales (ecuaciones, derivadas,
   integrales...) ahora DEJAN la sidebar de recursos visible: el teclado
   se superpone por encima de todo (z-index 3200, ver bloque PC). El
   padding inferior solo reserva espacio para poder seguir leyendo el
   final del contenido por encima del teclado. */
body.mathlive-keyboard-open .content:not(.editor-page) {
    padding-bottom: calc(var(--mathlive-keyboard-height, 0px) + 36px);
}

/* MÓVIL: teclado por encima de la barra de navegación inferior
   (inicio/tema/recientes/compartir). La .bottom-bar móvil tiene
   bottom:14px y altura ~66px (top ≈ 80px), así que eleva el teclado.
   En MathLive 0.109 el teclado real es un <div class="ML__keyboard">
   (position:fixed) colgado de <body>, así que se mueve con transform. */
@media (max-width: 900px) {
    body.mathlive-keyboard-open .ML__keyboard,
    body.mathlive-keyboard-open math-virtual-keyboard {
        z-index: 2500 !important;
        transform: translateY(-96px) !important;
        border-radius: 15px;
    }
    body.mathlive-keyboard-open .bottom-bar {
        z-index: 2450;
    }

    /* Boton de "mostrar/ocultar la barra de navegacion" (editor.html,
       editorecuaciones.html y graficadora.html): al contraer la barra ya no
       hay nada a lo que reservar esos 96 px, asi que el teclado baja hasta el
       borde inferior de la pantalla. Sin esta regla se quedaba 96 px en el
       aire. Se deja el hueco de la barra de seguridad del movil (safe-area),
       que lo pone MathLive en '--_padding-bottom'. */
    body.mathlive-keyboard-open.navbar-hidden .ML__keyboard,
    body.mathlive-keyboard-open.navbar-hidden math-virtual-keyboard {
        transform: none !important;
    }
}

/* PC: el teclado debe superponerse a TODO (tanto en las páginas de
   editor — .editor-sidebar z-index 2500, sticky 2401 — como en las
   páginas normales — sidebar de recursos 2600). A ancho completo por
   encima de la sidebar. */
@media (min-width: 901px) {
    body.mathlive-keyboard-open .ML__keyboard,
    body.mathlive-keyboard-open math-virtual-keyboard {
        z-index: 3200 !important;
        left: 0;
        width: 100vw;
    }
}

.input-toggle-btn {
    width: 40px; min-width: 40px; padding: 0;
    border: 1px solid var(--accent); border-radius: 12px;
    background: var(--accent-soft); color: var(--accent); display: inline-flex;
    align-items: center; justify-content: center; cursor: pointer; transition: 0.3s ease;
}
.input-toggle-btn:hover { background: var(--accent); color: var(--accent-text-on); border-color: var(--accent); transform: translateY(-3px) scale(1.01); }
.input-toggle-btn:not(.active) i { font-size: 1.05rem; }
.input-toggle-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.input-toggle-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Dark theme */
[data-theme="dark"] .mathquill-host { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
[data-theme="dark"] .mathquill-host:focus-within { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
[data-theme="dark"] .mathquill-editor, [data-theme="dark"] math-field {
    --selection-background-color: rgba(180,180,180,0.18); --smart-fence-color: #a3a3a3;
    --primary-color: #ffffff; --accent-color: var(--accent); --keyboard-accent-color: var(--accent);
    --highlight-color: var(--accent-soft); --highlight-text-color: var(--text);
    --placeholder-color: var(--muted);
    --keyboard-background: var(--surface-2); --keyboard-text: var(--text);
    --keyboard-border: var(--border); --keyboard-toolbar-background: var(--surface);
    --keyboard-toolbar-text: var(--text); --keycap-background: var(--surface-2);
    --keycap-text: var(--text); --keycap-secondary-background: var(--surface);
    --keycap-secondary-text: var(--text); --variant-keycap-background: var(--surface);
    --variant-keycap-text: var(--text); --keycap-highlight-background: var(--border);
    --keycap-highlight-text: var(--text); --keycap-active-background: var(--border);
    --keycap-active-text: var(--text); --keycap-accent-color: var(--accent);
}
[data-theme="dark"] .input-toggle-btn { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
[data-theme="dark"] .input-toggle-btn:hover { background: var(--accent); color: var(--accent-text-on); border-color: var(--accent); }
[data-theme="dark"] .input-toggle-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* MÓVIL en las calculadoras con MathLive (ecuaciones, derivadas, integrales):
   el teclado virtual se abre solo al enfocar el campo, asi que su boton no
   aporta nada y ocupa sitio. En su lugar vuelve el menu de tres rayitas, que
   da acceso a copiar/pegar/limpiar. El campo auxiliar .rc-check-x0 se excluye
   porque es estrecho y su menu se oculta a proposito. */
@media (max-width: 500px) {
    body.math-menu-mobile math-field:not(.rc-check-x0)::part(virtual-keyboard-toggle) { display: none !important; }
    body.math-menu-mobile math-field:not(.rc-check-x0)::part(menu-toggle) { display: inline-flex !important; }
}

/* MÓVIL: ocultar el menú de tres rayitas de MathLive en campos angostos.
   Se EXCLUYEN los editores (editor.html y editorecuaciones.html, que
   marcan <body class="editor-mode">): allí las tres rayitas siguen
   visibles porque hacen falta para copiar/pegar/limpiar. */
@media (max-width: 500px) {
    body:not(.editor-mode) math-field::part(menu-toggle),
    body:not(.editor-mode) .mathquill-editor::part(menu-toggle) {
        display: none;
    }
    body.editor-mode math-field::part(menu-toggle),
    body.editor-mode .ece-mathfield::part(menu-toggle),
    body.editor-mode .mathquill-editor::part(menu-toggle) {
        display: inline-flex;
    }
}

/* Tecla de fracción del teclado: MathLive compone '\frac{#@}{#?}' con KaTeX
   y sale del tamaño de la tecla entera (36x42px), bastante mas grande que
   los glifos vecinos (~11x21px). La clase 'frac-mini' la pone
   mathlive-core.js; aqui solo se reduce el contenido.

   No se toca la altura de la tecla: las 42px son la altura fija de la fila
   que comparten todas las teclas, y bajarla desalinearia la fila. */
.frac-mini .ML__latex {
    font-size: 0.62em !important;
}

/* Teclas de funcion anadidas a la pestana de simbolos de las calculadoras
   ('sec', 'csc', 'cot', '\sec^{-1}', '\sinh'...). La clase 'fn-tecla' y la
   'fn-ancha' las pone mathlive-core.js. En escritorio no hace falta nada: se
   ven a tamano normal, compuestas por KaTeX como 'sin'/'cos'. */
/* En escritorio estas teclas ya salen a tamano normal (no hay regla: es el de
   MathLive), que es lo que se pedia: que se vean igual que 'sin'/'cos'. */
@media (max-width: 500px) {
    /* En movil la fila sostiene 9 teclas en 390 px y, sin ensanchar, solo
       quedan 20 px de hueco de texto. Las teclas de funcion van ensanchadas
       a 46 px (regla de abajo), asi que la letra se baja a 0.68em para que
       el rotulo mas largo, 'coth^{-1}', entre entero. */
    .MLK__keycap.fn-tecla {
        font-size: 0.68em !important;
    }
    /* Las teclas de funcion se ensanchan (las 14): MathLive da el mismo ancho
       a todas las teclas de un layout e ignora su propiedad 'width' (se
       probaron 1.45 y 1.75 y no movieron ni un pixel), asi que el ajuste se
       hace aqui. Sin 'flex: 0 0 auto' el flex las encogeria de vuelta.
       Con nueve teclas por renglón la fila mas cargada suma 4x36 + 5x46 = 374 px
       de los 390 disponibles. */
    .MLK__keycap.fn-ancha {
        flex: 0 0 auto !important;
        width: 46px !important;
    }
}

/* Pestañas nuevas de los editores (Fórmulas, Acentos, Textos y estilos): van a
   cuatro columnas y, en móvil, cada tecla necesita el doble de ancho (a seis
   columnas el hueco de texto son 20 px y los rótulos no caben). */
@media (max-width: 500px) {
    .MLK__keycap.fn-gwide {
        flex: 0 0 auto !important;
        width: 86px !important;
    }
    /* Las fórmulas conservan las cuatro columnas de siempre (a cinco, con 76 px
       por tecla, las fórmulas largas se cortaban de lado). */
    /* Separadores: en las pestañas nuevas rellenan huecos, no sirven de nada. */
    .MLK__keycap.fn-gwide + .MLK__keycap.separator {
        display: none !important;
    }
}

/* ------------------------------------------------------------------
   Teclado de alto FIJO en los editores (no en las calculadoras).

   Cada pestaña del teclado de editors tiene un número de renglones distinto
   (de 3 a 5) y MathLive ajusta la altura al cambiar de pestaña. El alto
   reservado para el teclado se publica después, en un frame posterior, así
   que durante ese hueco las teclas se veían salirse del teclado y luego
   volvían a su sitio de golpe: el 'salto tardío' al cambiar de pestaña.

   Aquí la placa del teclado se da una altura fija, la de la pestaña más alta
   (5 renglones), y la fila de acción —shift, flechas, borrado y enter— se
   empuja abajo con 'margin-top: auto', de forma que además de no moverse el
   teclado entero, esos botones siempre están en el mismo sitio.
   ------------------------------------------------------------------ */
html.teclado-editor .MLK__layer {
    min-height: 306px;
}
html.teclado-editor .MLK__rows {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* El sobrante queda ARRIBA (bajo la barra de pestañas) y no abajo, para
       que las teclas apoyen siempre en el borde inferior de la pantalla: con
       la barra de navegación contraída el teclado queda pegado a ese borde y
       un hueco debajo se nota mucho. */
    justify-content: flex-end;
}
/* Las filas cogen parte de la altura sobrante para que las teclas sean más
   cómodas, pero con tope: si no, en las pestañas de tres renglones (Lógica,
   Espacios) salían teclas de 111 px de alto. */
html.teclado-editor .MLK__rows > .MLK__row {
    flex: 1 1 auto;
    max-height: 44px;
}
@media (max-width: 500px) {
    html.teclado-editor .MLK__rows > .MLK__row {
        max-height: 40px;
    }
}
/* La fila de acción (la que lleva la tecla de mayúsculas) no necesita regla
   propia: con 'justify-content: flex-end' y las filas con tope, ya queda
   apoyada abajo, igual que el resto. */
@media (max-width: 500px) {
    html.teclado-editor .MLK__layer {
        min-height: min(326px, 54vh);
    }
}

/* Tecla de mayúsculas de las pestañas con dos capas: se dibuja con las clases
   de MathLive ('shift bottom left') para que se vea igual que la de la 123,
   sin color propio. Lo único que se añade es 'es-activa' mientras se ve la
   segunda capa, con un borde claro para saber en cuál se está (la 123 hace lo
   mismo con su indicador de bloqueo de mayúsculas). */
.MLK__keycap.rc-capa-tecla.es-activa {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35) !important;
}

/* Botones de la pestaña de Espacios: muestran el comando de LaTeX en
   monoespaciado, así que se les deja algo de aire y sin recorte. */
.MLK__keycap.fn-espacio .ML__latex {
    font-size: 13px !important;
}

/* Pestaña de Acentos: son 22 acentos en OCHO columnas (tres renglones justos),
   así que la fila se reparte el ancho a partes iguales y el LaTeX de cada
   tecla lleva tamaño propio para que quepa entero. */
.MLK__keycap.fn-formula {
    overflow: hidden !important;
}
.MLK__keycap.fn-formula .ML__latex {
    font-size: 11px !important;
}
.MLK__keycap.fn-acento .ML__latex {
    font-size: 20px !important;
}
/* Pestaña de Paréntesis: seis columnas (cuatro renglones) para que los
   delimitadores, que van vacíos, se vean con cuerpo. Las teclas también se
   hacen más altas que las de 42 px: los delimitadores angulares grandes
   ('\Biggl\langle') son lo más alto de la pestaña y a 42 px se cortaban. */
.MLK__keycap.fn-paren {
    min-height: 44px !important;
}
.MLK__keycap.fn-paren .ML__latex {
    font-size: 19px !important;
}
/* Pestaña de Flechas: ocho columnas (cinco renglones) para las 38 flechas del
   catálogo. Comparte tamaños con Paréntesis. */
.MLK__keycap.fn-flecha {
    min-height: 44px !important;
}
.MLK__keycap.fn-flecha .ML__latex {
    font-size: 24px !important;
}
/* Pestaña de Cálculo: siete columnas (cuatro renglones). El contenido es alto
   —fracciones y límites— así que las teclas van más altas que las de 42 px. */
.MLK__keycap.fn-calculo {
    min-height: 44px !important;
}
.MLK__keycap.fn-calculo .ML__latex {
    font-size: 20px !important;
}
/* Pestaña de Espacios: los botones llevan su nombre ('espacio corto'…), que es
   más largo que un símbolo suelto, así que van un poco más altos que los de 42
   px para que el texto no se corte. */
.MLK__keycap.fn-espacio {
    min-height: 44px !important;
}
/* El nombre va dentro de '\text{...}' y KaTeX lo compone en su tamaño natural,
   que en escritorio salía desproporcionado respecto a las demás teclas. */
.MLK__keycap.fn-espacio .ML__latex {
    font-size: 14px !important;
}
@media (max-width: 500px) {
    .MLK__keycap.fn-espacio {
        min-height: 40px !important;
        /* En móvil hay cinco espacios en un renglón y el ancho fijo de 86 px de
           '.fn-gwide' (puesto para los acentos) se salía de la pantalla: aquí
           las teclas se reparten el ancho disponible. */
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
    .MLK__keycap.fn-espacio .ML__latex {
        font-size: 10px !important;
    }
}
/* El teclado NUNCA debe salirse por abajo. MathLive ancla la placa al alto que
   él mismo calcula ('--_keyboard-height'), que se queda corto en las pestañas
   altas —Fórmulas y Textos y estilos— y entonces la última fila de teclas
   queda debajo del borde de la ventana, sin poder pulsarse. Anclándola abajo
   con 'fixed' DENTRO del contenedor (que lleva el 'transform' del móvil) la
   placa crece hacia arriba y siempre se ve entera. */
.MLK__plate {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}
/* Y NUNCA debe salirse por los lados. MathLive reparte el ancho de las teclas
   de la capa '123' con medidas fijas en píxeles, y la suma se pasa del ancho
   del teclado en cuanto la ventana es más estrecha que esa suma (o mientras
   MathLive mide, que es justo cuando cambia de pestaña): entonces la última
   columna de teclas queda cortada contra el borde y parece que el teclado
   'se sale'.

   Con 'min-width: 0' las teclas pueden encogerse hasta lo que toque en vez de
   negarse a hacerlo, y con 'clip' horizontal en las filas la fila no puede
   pintarse fuera del ancho del teclado. 'clip' y no 'hidden' a propósito:
   'hidden' crea un contenedor de desplazamiento y recortaría el panel de
   variantes que se abre al mantener pulsada una tecla. */
.MLK__rows {
    overflow-x: clip !important;
    max-width: 100% !important;
}
.MLK__row {
    max-width: 100% !important;
}
.MLK__keycap {
    min-width: 0 !important;
    max-width: 100% !important;
}
/* Pestañas de Lógica, Conjuntos, Desigualdades y Trig: símbolos sueltos. No
   necesitan teclas más altas que las de 42 px. */
.MLK__keycap.fn-simbolo {
    min-height: 44px !important;
}
.MLK__keycap.fn-simbolo .ML__latex {
    font-size: 22px !important;
}
/* Pestaña de Matrices: siete columnas (tres renglones). Lo más alto de aquí
   es la identidad 4×4, así que las teclas necesitan bastante más cuerpo que
   las de 42 px; si no, se cortan. El sistema de cuatro ecuaciones es lo más
   alto de todo el teclado (cuatro renglones de casos), y con la fuente normal
   se salía de la tecla: lleva una clase aparte para ir más pequeño. */
.MLK__keycap.fn-matriz {
    min-height: 48px !important;
}
.MLK__keycap.fn-matriz .ML__latex {
    font-size: 11px !important;
}
.MLK__keycap.fn-matriz.fn-menor .ML__latex {
    font-size: 11px !important;
}
/* Pestaña de Fracciones: seis columnas (tres renglones). Una fracción
   encimada es alta, pero no tanto como una matriz, así que las teclas van
   bastante más bajas que en Matrices. */
.MLK__keycap.fn-fraccion {
    min-height: 44px !important;
}
.MLK__keycap.fn-fraccion .ML__latex {
    font-size: 18px !important;
}
@media (max-width: 500px) {
    .MLK__keycap.fn-formula {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
    .MLK__keycap.fn-formula .ML__latex {
        font-size: 7px !important;
    }
    .MLK__keycap.fn-acento {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
    .MLK__keycap.fn-acento .ML__latex {
        font-size: 14px !important;
    }
    .MLK__keycap.fn-paren {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 40px !important;
    }
    .MLK__keycap.fn-paren .ML__latex {
        font-size: 16px !important;
    }
    .MLK__keycap.fn-flecha {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 40px !important;
    }
    .MLK__keycap.fn-flecha .ML__latex {
        font-size: 24px !important;
    }
    .MLK__keycap.fn-calculo {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 40px !important;
    }
    .MLK__keycap.fn-calculo .ML__latex {
        font-size: 14px !important;
    }
    .MLK__keycap.fn-simbolo {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 40px !important;
    }
    .MLK__keycap.fn-simbolo .ML__latex {
        font-size: 17px !important;
    }
    .MLK__keycap.fn-matriz {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 44px !important;
    }
    /* En un móvil de 390 px la matriz de 7 columnas deja 55 px por tecla, y con
       12 px los delimitadores de la matriz 2×2 no entran: se recortan por
       dentro. Con 8 px sí caben. */
    .MLK__keycap.fn-matriz .ML__latex {
        font-size: 8px !important;
    }
    .MLK__keycap.fn-matriz.fn-menor .ML__latex {
        font-size: 9px !important;
    }
    .MLK__keycap.fn-fraccion {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 40px !important;
    }
    .MLK__keycap.fn-fraccion .ML__latex {
        font-size: 13px !important;
    }
}
/* Botón de renglón nuevo: tiene que verse claro que es una acción, no un
   símbolo más. */
.MLK__keycap.rc-enter-cap {
    border-color: var(--accent, #7c5cff) !important;
}
.MLK__keycap.rc-enter-cap .rc-enter {
    font-size: 0.82em;
    white-space: nowrap;
}

/* La barra de pestañas debe repartirse en las filas que haga falta SIEMPRE, no
   solo en pantallas estrechas. MathLive pone 'nowrap' y deja la barra en una
   sola línea con scroll lateral: en un móvil en horizontal el ancho llega a
   844 px, así que la regla de móvil no se activaba, las dieciséis pestañas no
   cabían en una línea y el usuario solo veía las tres primeras (las de las
   calculadoras) hasta que deslizaba. Con 'wrap' siempre se ven todas, en
   cualquier ancho y orientación. */
.MLK__toolbar > div {
    flex-wrap: wrap !important;
    row-gap: 2px !important;
    overflow-x: clip !important;
}
   no caben en 390 px con la fuente del teclado: a 16 px 'Textos y estilos' se
   sale de la pantalla y empuja fuera las últimas. Con 11 px entran todas. */
/* OJO: la pestaña ACTIVA no es '.layer-switch', MathLive la pinta como
   'div.selected'. Si estas reglas no la incluyen se queda a 16 px mientras
   las demás van a 9 px, y entonces se ve como texto plano grande en lugar de
   como un rótulo en LaTeX. */
@media (max-width: 500px) {
    .MLK__toolbar .layer-switch,
    .MLK__toolbar .selected {
        font-size: 9px !important;
        /* Con nueve pestañas el margen lateral de 2px por tecla (36px en total)
           es lo que hace que la última se salga de la pantalla. */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Y si aun así no caben en una línea, mejor que la barra se parta en dos
       que esconder pestañas: en un móvil a 9px los rótulos ya son JUSTO, y
       partir la barra mantiene los nombres completos. El 'wrap' ya se aplica
       arriba, sin mirar el ancho. */
}

/* Los rótulos de las pestañas de los editores se pintan con KaTeX (ver
   aplicarRotulosLatex en mathlive-core.js). KaTeX multiplica por 1.21 el tamaño
   de la fuente, así que los títulos salían bastante más grandes que antes de
   pasarlos por LaTeX. En móvil la barra ya va a 9 px, así que solo se bajan
   un poco. */
.MLK__toolbar .layer-switch .katex,
.MLK__toolbar .selected .katex {
    font-size: 0.8em !important;
}
@media (max-width: 500px) {
    .MLK__toolbar .layer-switch .katex,
    .MLK__toolbar .selected .katex {
        font-size: 0.95em !important;
    }
}

/* Las pestañas nuevas de los editores (Fórmulas, Textos y estilos) van a
   cuatro columnas. En pantalla grande, si las teclas se quedan con el ancho
   por defecto (90 px) los rótulos largos ('Límite notable', 'Puntos medios')
   se recortan: se estiran para repartirse la fila. */
@media (min-width: 501px) {
    .MLK__keycap.fn-gwide {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: 320px !important;
    }
    /* Los espacios llevan un nombre en español, no un rótulo larguísimo: no
       necesitan todo el ancho de las fórmulas. */
    .MLK__keycap.fn-espacio {
        max-width: 200px !important;
    }
    /* Las fórmulas se estiran algo más: a 11 px las más largas (la de la
       derivada, la de Newton) necesitan unos 350 px para no recortarse. */
    .MLK__keycap.fn-formula {
        max-width: 380px !important;
    }
    .MLK__keycap.fn-acento {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: 170px !important;
    }
    .MLK__keycap.fn-paren {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: 170px !important;
    }
    .MLK__keycap.fn-flecha {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: 170px !important;
    }
    .MLK__keycap.fn-calculo {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: 190px !important;
    }
    .MLK__keycap.fn-simbolo {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: 150px !important;
    }
    .MLK__keycap.fn-matriz {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: 220px !important;
    }
    .MLK__keycap.fn-fraccion {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: 190px !important;
    }
}