/* ═══════════════════════════════════════════════════════════════════════════ Estudio Científico Pro · Aspecto de los añadidos de la v1.45 Msc. Néstor Fabio Montoya Palacios · 2026 Modo clase, compartir por enlace y QR, y cinta simple. Todo con los tokens de css/tokens.css: ni un color suelto, y el modo oscuro sale solo. Las clases van prefijadas (esci-clase-, esci-qr-, esci-simple-) para que nada de aquí pueda tocar lo que ya funcionaba. ═══════════════════════════════════════════════════════════════════════════ */ /* ── MODO CLASE ─────────────────────────────────────────────────────────── */ /* Se enciende poniendo data-clase="1" en . Se apaga quitándolo: no queda ningún estilo colgando. */ html[data-clase="1"] .esci-ribbon, html[data-clase="1"] .esci-tx-dock, html[data-clase="1"] .esci-status, html[data-clase="1"] .esci-side, html[data-clase="1"] .esci-topbar .esci-ibtn:not([data-cmd="pantalla-completa"]):not([data-cmd="minimizar"]):not([data-cmd="maximizar"]):not([data-cmd="cerrar"]), html[data-clase="1"] .esci-topbar .esci-vsep, html[data-clase="1"] .esci-ctxbar { display: none !important; } html[data-clase="1"] .esci-topbar { min-height: 34px; } html[data-clase="1"] .esci-region { transition: opacity .22s ease, filter .22s ease; } /* foco: lo que no toca ahora se apaga, no se esconde. El estudiante sigue viendo dónde está en la hoja, pero mira a un solo sitio. */ html[data-clase="foco"] .esci-region { opacity: .18; filter: saturate(.25); } html[data-clase="foco"] .esci-region.is-clase-foco { opacity: 1; filter: none; outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .04); } html[data-theme="dark"][data-clase="foco"] .esci-region.is-clase-foco { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .18); } /* barra de abajo: los mandos de la clase, grandes y a mano */ .esci-clase-barra { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 900; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; background: var(--chassis); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(20, 30, 45, .10), 0 16px 40px -18px rgba(20, 30, 45, .45); font: 500 13px/1.2 var(--ui, 'IBM Plex Sans', system-ui, sans-serif); color: var(--ink); } .esci-clase-barra button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; } .esci-clase-barra button:hover { background: var(--key-hover); border-color: var(--key-hover-line); } .esci-clase-barra button.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .esci-clase-barra button:disabled { opacity: .4; cursor: default; } .esci-clase-barra .esci-clase-paso { min-width: 74px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-3); } .esci-clase-barra .esci-clase-crono { min-width: 66px; text-align: center; font-family: var(--mono, 'IBM Plex Mono', monospace); font-size: 15px; font-variant-numeric: tabular-nums; } .esci-clase-barra .esci-clase-crono.is-corriendo { color: var(--accent); } .esci-clase-barra .esci-vsep { width: 1px; height: 22px; background: var(--line); } @media (pointer: coarse) { .esci-clase-barra button { min-width: 46px; height: 46px; } } /* puntero de clase: un círculo que sigue al ratón, para señalar en la proyección sin taparlo todo con el cursor del sistema */ .esci-clase-puntero { position: fixed; z-index: 950; pointer-events: none; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--bad) 0 5px, rgba(0, 0, 0, 0) 6px); box-shadow: 0 0 0 2px var(--bad-soft), 0 0 22px 6px var(--bad-soft); } html[data-clase] .esci-clase-puntero[hidden] { display: none; } /* el cartel del principio: qué teclas mandan */ .esci-clase-ayuda { position: fixed; z-index: 940; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 18px 22px; border-radius: 10px; max-width: 460px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 20px 60px -20px rgba(20, 30, 45, .5); font: 400 14px/1.55 var(--ui, 'IBM Plex Sans', system-ui, sans-serif); } .esci-clase-ayuda h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; } .esci-clase-ayuda kbd { display: inline-block; min-width: 18px; padding: 1px 6px; margin: 0 2px; border: 1px solid var(--key-line); border-bottom-width: 2px; border-radius: 4px; background: var(--key); font: 500 12px/1.5 var(--mono, monospace); } .esci-clase-ayuda p { margin: 6px 0 0; color: var(--ink-2); } /* ── COMPARTIR: enlace y QR ─────────────────────────────────────────────── */ .esci-qr-caja { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; } .esci-qr-lienzo { flex: 0 0 auto; padding: 12px; border-radius: 8px; background: #FFFFFF; /* un QR se lee sobre blanco, siempre */ border: 1px solid var(--line); } .esci-qr-lienzo canvas { display: block; image-rendering: pixelated; } .esci-qr-datos { flex: 1 1 240px; min-width: 220px; font-size: 13px; color: var(--ink-2); } .esci-qr-datos p { margin: 0 0 10px; } .esci-qr-url { width: 100%; box-sizing: border-box; padding: 7px 9px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--sunk); color: var(--ink); font: 400 12px/1.4 var(--mono, monospace); resize: vertical; min-height: 74px; } .esci-qr-barra { display: flex; gap: 8px; flex-wrap: wrap; } .esci-qr-medida { font-size: 12px; color: var(--ink-4); margin-top: 8px; } .esci-qr-medida b { color: var(--ink-2); font-weight: 600; } /* ── CINTA SIMPLE ───────────────────────────────────────────────────────── */ /* Esconde las pestañas densas y deja las de todos los días. El buscador Ctrl+K sigue llegando a todo, así que no se pierde nada. */ html[data-cinta="simple"] #esci-rtab-unidades, html[data-cinta="simple"] #esci-rtab-constantes, html[data-cinta="simple"] #esci-rtab-mates { display: none; } .esci-simple-aviso { font-size: 12px; color: var(--ink-3); } /* ── TECLADO v1.46: filas fijas y tres clases de tecla ──────────────────── */ /* filas de columnas fijas: el 7 encima del 4, siempre */ .esci-kbd-row.is-fija { grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); } .esci-kbd-rows.is-fijo { gap: 4px; } .esci-kbd-rows.is-fijo .esci-key { min-height: 34px; border-radius: 6px; padding: 2px 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; } .esci-kbd-rows.is-fijo .esci-key-cara { display: flex; align-items: center; justify-content: center; max-width: 100%; overflow: hidden; } .esci-kbd-rows.is-fijo .esci-key .katex { font-size: 14px; line-height: 1.1; } .esci-kbd-rows.is-fijo .esci-key.is-apretada .katex { font-size: 11.5px; } /* número: blanca, grande, de calculadora */ .esci-kbd-rows.is-fijo .esci-key.is-num { background: var(--surface); font-weight: 600; } .esci-kbd-rows.is-fijo .esci-key.is-num .katex { font-size: 16px; } /* operador: sobre el chasis, con el acento al pasar */ .esci-kbd-rows.is-fijo .esci-key.is-op { background: var(--sunk); color: var(--ink-2); } .esci-kbd-rows.is-fijo .esci-key.is-op:hover { color: var(--accent); } /* función: en redonda, un poco más pequeña, cabe «arcsenh» */ .esci-kbd-rows.is-fijo .esci-key.is-fn .katex { font-size: 12.5px; } .esci-kbd-rows.is-fijo .esci-key.is-unidad { font-family: var(--mono); } /* acción del cursor */ .esci-kbd-rows.is-fijo .esci-key.is-act { background: var(--chassis-2); color: var(--ink-3); } /* variable de la hoja: verde de definición, con su valor debajo */ .esci-kbd-rows.is-fijo .esci-key.is-var { background: var(--define-bg); border-color: color-mix(in srgb, var(--define) 35%, transparent); min-height: 42px; } .esci-kbd-rows.is-fijo .esci-key.is-var .katex { font-size: 15px; color: var(--define); } .esci-kbd-rows.is-fijo .esci-key.is-var:hover { background: var(--accent-soft); border-color: var(--accent-ring); } .esci-key-sub { font: 400 9.5px/1.1 var(--mono); color: var(--ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .esci-kbd-vacio { padding: 14px 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); } .esci-kbd-vacio code { font-family: var(--mono); background: var(--sunk); padding: 1px 5px; border-radius: 4px; color: var(--ink-2); } /* pestañas del teclado: con los rótulos cortos caben las ocho sin recortar */ .esci-kbd-tab { font-family: var(--mono); letter-spacing: 0; padding: 0 2px; font-size: 11px; } @media (pointer: coarse) { .esci-kbd-rows.is-fijo .esci-key { min-height: 42px; } } /* ── REGIÓN A TROZOS (v1.46) ────────────────────────────────────────────── */ .esci-trozos .esci-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px; min-width: 420px; } .esci-tz-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .esci-tz-tit { display: flex; align-items: center; gap: 4px; color: var(--ink-2); font: 500 15px/1 var(--mono); } .esci-tz-tit .esci-ico { color: var(--accent); margin-right: 4px; } .esci-tz-txt { color: var(--ink-3); } .esci-tz-in { height: 28px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: 400 14px/1 var(--mono); outline: none; min-width: 0; } .esci-tz-in:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); } .esci-tz-in.is-nombre { width: 34px; text-align: center; font-weight: 600; color: var(--define); } .esci-tz-in.is-var { width: 30px; text-align: center; font-style: italic; } .esci-tz-modos { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .esci-tz-modo { height: 26px; padding: 0 11px; border: 0; background: transparent; color: var(--ink-3); font: 500 12px/1 var(--sans, inherit); cursor: pointer; } .esci-tz-modo.is-on { background: var(--accent); color: var(--on-accent); } .esci-tz-modo:not(.is-on):hover { background: var(--accent-soft); color: var(--accent); } .esci-tz-ramas { display: flex; flex-direction: column; gap: 4px; } .esci-tz-rama { display: grid; grid-template-columns: 14px minmax(120px, 1fr) auto 64px auto 64px 26px; gap: 6px; align-items: center; } .esci-tz-llave { font: 400 22px/1 var(--mono); color: var(--ink-3); text-align: center; } .esci-tz-si { font: italic 400 13px/1 var(--serif, Georgia, serif); color: var(--ink-3); } .esci-tz-cond { font: 400 12.5px/1 var(--mono); color: var(--ink-2); white-space: nowrap; } .esci-tz-lim { text-align: center; } .esci-tz-lim::placeholder { color: var(--ink-4); font-style: italic; } .esci-tz-quita { width: 26px; height: 26px; min-width: 0; padding: 0; color: var(--ink-4); } .esci-tz-quita:hover { color: var(--bad); } .esci-tz-pie { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .esci-tz-pie .esci-mbtn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; font-size: 12.5px; } .esci-tz-pie .esci-mbtn.is-on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); } .esci-tz-L { font: 600 15px/1 var(--serif, Georgia, serif); } .esci-tz-formas { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 8px; background: var(--result-bg); border: 1px solid var(--result-line); overflow-x: auto; } .esci-tz-forma { color: var(--ink); } .esci-tz-forma .katex-display { margin: 4px 0; text-align: left; } .esci-tz-forma.is-esc, .esci-tz-forma.is-des { color: var(--ink-2); font-size: 15px; } .esci-tz-forma.is-des { border-top: 1px dashed var(--result-line); padding-top: 4px; color: var(--ink-3); font-size: 14px; } .esci-tz-err { padding: 6px 10px; border-radius: 6px; background: var(--bad-soft); color: var(--bad); font-size: 12.5px; } .esci-tz-plano { height: 240px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); } .esci-tz-plano[hidden] { display: none; } html[data-theme="dark"] .esci-tz-formas { background: var(--result-bg); } /* el panel de vista del plano solo con la región elegida, como en las gráficas */ .esci-trozos .ggl-panel { transform: scale(.86); transform-origin: top right; } .esci-trozos:not(.esci-selected) .ggl-panel { display: none; } .esci-tz-forma.is-esc .katex, .esci-tz-forma.is-des .katex { font-size: 1em; } /* ── PANEL MATERIALES (v1.46) ───────────────────────────────────────────── */ .esci-mat { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px 10px; font-size: 12.5px; } .esci-mat-props { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; } .esci-mat-prop { display: flex; flex-direction: column; align-items: center; gap: 1px; height: 40px; padding: 2px 1px; border: 1px solid var(--key-line); border-radius: 6px; background: var(--key); color: var(--ink-2); cursor: pointer; font: inherit; overflow: hidden; } .esci-mat-prop .katex { font-size: 13px; } .esci-mat-prop small { font-size: 9px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .esci-mat-prop:hover { background: var(--key-hover); border-color: var(--key-hover-line); color: var(--accent); } .esci-mat-prop.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .esci-mat-prop.is-on small { color: var(--on-accent); opacity: .85; } .esci-mat-barra { display: flex; gap: 6px; align-items: center; } .esci-mat-cat { flex: 1; min-width: 0; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; padding: 0 6px; } .esci-mat-cmp { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--chassis); color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; } .esci-mat-cmp:hover, .esci-mat-cmp.is-on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); } .esci-mat-tabla { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; background: var(--surface); } .esci-mat-cab, .esci-mat-fila { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 0 6px 0 4px; } .esci-mat-cab { background: var(--chassis-2); border-bottom: 1px solid var(--line-soft); min-height: 28px; } .esci-mat-th { border: 0; background: transparent; color: var(--ink-3); font: 600 10.5px/1.2 var(--sans, inherit); letter-spacing: .05em; text-transform: uppercase; text-align: left; padding: 4px 2px; cursor: pointer; } .esci-mat-th.is-on { color: var(--accent); } .esci-mat-th:hover { color: var(--accent); } .esci-mat-th:last-child { text-align: right; } .esci-mat-fila { min-height: 32px; border-bottom: 1px solid var(--line-soft); } .esci-mat-fila:last-child { border-bottom: 0; } .esci-mat-fila:hover { background: var(--accent-soft); } .esci-mat-fila.is-abierta { background: var(--sunk); } .esci-mat-chk { margin: 0; accent-color: var(--accent); } .esci-mat-nombre { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; padding: 3px 2px; cursor: pointer; } .esci-mat-n { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .esci-mat-f { font: 400 10px/1.1 var(--mono); color: var(--ink-4); } .esci-mat-celda { display: inline-flex; align-items: center; gap: 3px; justify-content: flex-end; } .esci-mat-val { border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--result); font: 500 12.5px/1.2 var(--mono); padding: 3px 5px; cursor: pointer; white-space: nowrap; } .esci-mat-val:hover { background: var(--result-bg); border-color: var(--result-line); } .esci-mat-def { width: 24px; height: 22px; border: 1px solid var(--line-soft); border-radius: 5px; background: var(--chassis); color: var(--ink-3); font: 600 10.5px/1 var(--mono); cursor: pointer; padding: 0; } .esci-mat-def:hover { background: var(--define-bg); color: var(--define); border-color: var(--define); } .esci-mat-raya { color: var(--ink-4); padding: 0 8px; } .esci-mat-detalle { display: flex; flex-direction: column; padding: 4px 8px 8px 30px; background: var(--sunk); border-bottom: 1px solid var(--line-soft); gap: 2px; } .esci-mat-dfila { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 26px; } .esci-mat-drot .katex { font-size: 12px; } .esci-mat-dnom { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .esci-mat-pie { margin: 2px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink-4); } .esci-mat-comparar { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px; background: var(--surface); overflow-x: auto; } .esci-mat-cfila { display: grid; grid-template-columns: 34px repeat(auto-fit, minmax(70px, 1fr)); gap: 4px; align-items: center; min-height: 28px; border-bottom: 1px solid var(--line-soft); } .esci-mat-cfila.is-cab { font-weight: 600; font-size: 11.5px; color: var(--ink-2); } .esci-mat-cnom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; } .esci-mat-cfila .esci-mat-celda { justify-content: flex-end; } .esci-mat-cfila .esci-mat-val { font-size: 11.5px; padding: 2px 3px; } .esci-mat-comparar .esci-mat-cmp { align-self: flex-start; margin-top: 6px; }