/* ═══════════════════════════════════════════════════════════════════════════
   Estudio Científico Pro · Cuadros de colores (v1.119)
   Msc. Néstor Fabio Montoya Palacios · 2026

   Los «tcolorbox» de LaTeX dentro de la hoja: una región de texto con
   `data.cuadro` (js/math/cuadros.js hace las cuentas; js/regions/text-region.js
   monta el DOM). Todo cuelga de `.esci-cq`: sin cuadro no se aplica NADA de
   este archivo y la región de texto se ve exactamente como siempre.

   Lo que pone la región (por variables, calculadas en el motor):
     --cq-marco --cq-fondo --cq-fondo2 --cq-banda --cq-letra-banda
     --cq-letra-tit --cq-tinta --cq-deco --cq-deco-suave --cq-radio
     --cq-radio-in --cq-grosor --cq-linea --cq-bt --cq-br --cq-bb --cq-bl
     --cq-sombra

   Reglas de la casa para que «PDF fiel» (html2canvas) lo calque igual:
     · nada de filter, backdrop-filter, mix-blend-mode ni color-mix: los
       colores mezclados los calcula el motor;
     · la SOMBRA va en la caja de dentro (.esci-cq-caja), no en la región: la
       selección de la hoja es el box-shadow de la región y no se pisan;
     · se imprime con sus colores (print-color-adjust: exact).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── la caja ───────────────────────────────────────────────────────────── */
.esci-cq .esci-cq-caja {
  position: relative; box-sizing: border-box; font-size: var(--fs-text, 16px);
  border-style: var(--cq-linea, solid); border-color: var(--cq-marco);
  border-width: var(--cq-bt) var(--cq-br) var(--cq-bb) var(--cq-bl);
  border-radius: var(--cq-radio); background: var(--cq-fondo); box-shadow: var(--cq-sombra);
  color: var(--cq-tinta);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.esci-cq.cq-con-degradado .esci-cq-caja { background: linear-gradient(135deg, var(--cq-fondo) 0%, var(--cq-fondo2) 100%); }
/* el texto de dentro: aire alrededor, como el «left/right/top» de tcolorbox */
.esci-cq .esci-cq-caja > .esci-tx-env { padding: .55em 1em .75em; }
.esci-cq.cq-t-banda .esci-cq-caja > .esci-tx-env { padding-top: .65em; }
.esci-cq.cq-t-etiqueta:not(.cq-sin-titulo) .esci-cq-caja > .esci-tx-env { padding-top: 1.05em; }
.esci-cq.cq-t-linea:not(.cq-sin-titulo) .esci-cq-caja > .esci-tx-env { padding-top: .3em; }
.esci-cq.cq-con-fin .esci-cq-caja > .esci-tx-env { padding-bottom: 1.6em; }
/* dentro de la caja el cuerpo no lleva su relleno propio de 2 × 4 px */
.esci-cq .esci-cq-caja .esci-tx-body { padding: 0; }
.esci-cq .esci-cq-caja .esci-tx-body.is-vacio::before { left: 0; top: 0; }

/* alto fijo (asas): la caja llena la región y el texto se desplaza dentro */
.esci-tx.is-altofijo.esci-cq .esci-cq-caja { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.esci-tx.is-altofijo.esci-cq .esci-cq-caja > .esci-cq-tit { flex: none; }

/* ── el título ─────────────────────────────────────────────────────────── */
/* z-index: la etiqueta y la pestaña se montan sobre el lienzo del texto (que
   va después y es «relative»): sin él, un clic en el título caía en el cuerpo */
.esci-cq .esci-cq-tit {
  position: relative; z-index: 2;
  display: flex; align-items: baseline; gap: .42em; box-sizing: border-box;
  font: 600 .9em/1.35 var(--sans); letter-spacing: .005em;
  padding: .7em 1em .1em; color: var(--cq-letra-tit);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.esci-cq .esci-cq-ico { flex: none; font-size: .95em; }
/* el icono de Font Awesome es un <i> VACÍO (se pinta con ::before): se esconde por su clase */
.esci-cq .esci-cq-ico.is-vacio { display: none; }
.esci-cq .esci-cq-rot { flex: none; white-space: nowrap; font-weight: 700; }
.esci-cq .esci-cq-rot:empty { display: none; }
.esci-cq .esci-cq-txt { flex: 1 1 auto; min-width: 2.5em; outline: none; font-weight: 600; cursor: text; overflow-wrap: anywhere; }
.esci-cq .esci-cq-txt .katex { font-size: 1.04em; }
/* «Escribe un título…» solo mientras el cuadro está elegido o se escribe en
   él; nunca al imprimir ni al calcar */
.esci-cq .esci-cq-txt:empty::before { content: none; }
.esci-cq.esci-selected .esci-cq-txt:empty::before,
.esci-cq .esci-cq-txt:empty:focus::before { content: attr(data-placeholder); font-weight: 400; font-style: italic; opacity: .6; }
.esci-cq .esci-cq-txt:focus { box-shadow: 0 2px 0 -1px currentColor; }
.esci-cq.cq-sin-titulo .esci-cq-tit { display: none; }
/* el cuadro libre sin título: la fila no ocupa sitio hasta que se elige */
.esci-cq.cq-tit-vacio:not(.esci-selected) .esci-cq-tit:not(:focus-within) { display: none; }

/* en banda: la franja de color de arriba, con las esquinas de la caja */
.esci-cq.cq-t-banda .esci-cq-tit {
  background: var(--cq-banda); color: var(--cq-letra-banda); padding: .45em 1em;
  border-radius: var(--cq-radio-in) var(--cq-radio-in) 0 0;
}
/* en pestaña: sobresale por encima del marco, pegada a él */
.esci-cq.cq-t-pestana:not(.cq-sin-titulo) .esci-cq-caja { margin-top: 2.05em; }
.esci-cq.cq-t-pestana.cq-tit-vacio:not(.esci-selected) .esci-cq-caja { margin-top: 0; }
.esci-cq.cq-t-pestana .esci-cq-tit {
  position: absolute; bottom: 100%; left: calc(-1 * var(--cq-bl)); max-width: calc(100% - 1.5em);
  background: var(--cq-banda); color: var(--cq-letra-banda); padding: .34em 1em .3em;
  border-radius: 8px 8px 0 0; white-space: nowrap; overflow: hidden;
}
/* centrada SIN transform: html2canvas («PDF fiel») recorta mal un elemento
   movido con transform y overflow: hidden (se vio con la etiqueta: el título
   salía cortado por la mitad en el calco) */
.esci-cq.cq-t-pestana.cq-p-centro .esci-cq-tit { left: 0; right: 0; margin: 0 auto; width: max-content; }
.esci-cq.cq-t-pestana.cq-p-der .esci-cq-tit { left: auto; right: calc(-1 * var(--cq-br)); }
/* en etiqueta: flota sobre el borde de arriba («attach boxed title») */
.esci-cq.cq-t-etiqueta:not(.cq-sin-titulo) .esci-cq-caja { margin-top: .95em; }
.esci-cq.cq-t-etiqueta.cq-tit-vacio:not(.esci-selected) .esci-cq-caja { margin-top: 0; }
.esci-cq.cq-t-etiqueta .esci-cq-tit {
  /* centrada sobre la raya de arriba: media etiqueta (1,87 em de alto con su
     relleno: 1,35 de renglón + 2 × 0,26) y medio grosor del borde */
  position: absolute; top: calc(-0.935em - var(--cq-bt) / 2); left: .9em; max-width: calc(100% - 1.8em);
  background: var(--cq-banda); color: var(--cq-letra-banda); padding: .26em .85em;
  border-radius: 6px; white-space: nowrap; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
}
.esci-cq.cq-t-etiqueta.cq-p-centro .esci-cq-tit { left: 0; right: 0; margin: 0 auto; width: max-content; }
.esci-cq.cq-t-etiqueta.cq-p-der .esci-cq-tit { left: auto; right: .9em; }
.esci-cq.cq-t-pestana .esci-cq-txt, .esci-cq.cq-t-etiqueta .esci-cq-txt { overflow-wrap: normal; }

/* el ∎ de la demostración */
.esci-cq .esci-cq-fin { position: absolute; right: .9em; bottom: .5em; color: var(--cq-marco); font-size: 1.05em; line-height: 1; pointer-events: none; }

/* ── adornos de cada forma ─────────────────────────────────────────────── */
.esci-cq .esci-cq-deco { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.esci-cq .esci-cq-deco:empty { display: none; }

/* esquinas recortadas: dos esquinas cortadas en diagonal, sin marco */
.esci-cq.cq-a-recortada .esci-cq-caja {
  border-radius: 0;
  background: linear-gradient(135deg, transparent var(--cq-radio), var(--cq-fondo) var(--cq-radio)) top left / 51% 100% no-repeat,
              linear-gradient(-45deg, transparent var(--cq-radio), var(--cq-fondo) var(--cq-radio)) bottom right / 51% 100% no-repeat;
}
/* pizarra: verde de tiza con su marco de madera y letra de tablero */
.esci-cq.cq-a-pizarra .esci-cq-caja { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .28), inset 0 0 24px rgba(0, 0, 0, .25), var(--cq-sombra); }
.esci-cq.cq-a-pizarra .esci-cq-tit { font-family: var(--letra-patrick-hand, var(--sans)); font-size: 1.05em; font-weight: 400; letter-spacing: .02em; }
.esci-cq.cq-a-pizarra .esci-cq-rot, .esci-cq.cq-a-pizarra .esci-cq-txt { font-weight: 400; }
.esci-cq.cq-a-pizarra .esci-tx-body { font-family: var(--letra-patrick-hand, var(--serif)); }
/* papel de cuaderno: renglones azules y el margen rojo */
.esci-cq.cq-a-cuaderno .esci-cq-caja > .esci-tx-env {
  padding-left: 46px;
  background-image: linear-gradient(to right, transparent 34px, #e57373 34px, #e57373 35.5px, transparent 35.5px),
                    linear-gradient(to bottom, transparent 94%, var(--cq-deco) 94%);
  background-size: 100% 100%, 100% 1.5em; background-repeat: no-repeat, repeat;
  background-origin: padding-box, content-box;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.esci-cq.cq-a-cuaderno .esci-cq-tit { padding-left: 46px; }
.esci-cq.cq-a-cuaderno .esci-tx-body { font-family: var(--letra-kalam, var(--serif)); line-height: 1.5; }
.esci-cq.cq-a-cuaderno .esci-tx-body p { margin: 0; }
/* post-it: la cinta adhesiva arriba y letra a mano */
.esci-cq.cq-a-postit .esci-cq-deco::before {
  content: ''; position: absolute; top: -11px; left: 50%; width: 86px; height: 22px; margin-left: -43px;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(15, 23, 42, .08); transform: rotate(-3deg);
}
.esci-cq.cq-a-postit .esci-tx-body { font-family: var(--letra-patrick-hand, var(--serif)); font-size: 1.06em; }
.esci-cq.cq-a-postit .esci-cq-tit { font-family: var(--letra-patrick-hand, var(--sans)); font-size: 1.02em; }
/* neón: brillo del color en el marco y en el título */
.esci-cq.cq-a-neon .esci-cq-tit { text-shadow: 0 0 6px var(--cq-marco), 0 0 14px var(--cq-marco); }
/* tarjeta moderna: el icono en un círculo */
.esci-cq.cq-a-tarjeta .esci-cq-tit { align-items: center; padding-top: .85em; }
.esci-cq.cq-a-tarjeta .esci-cq-ico:not(.is-vacio) {
  display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em;
  border-radius: 50%; background: var(--cq-deco-suave); color: var(--cq-marco);
}
/* cita: comillas grandes de adorno */
.esci-cq.cq-a-cita .esci-cq-deco::before {
  content: '\201C'; position: absolute; left: .16em; top: -.08em;
  font: 700 3.2em/1 Georgia, 'Times New Roman', serif; color: var(--cq-marco); opacity: .26;
}
.esci-cq.cq-a-cita .esci-cq-caja > .esci-tx-env { padding-left: 3em; }
.esci-cq.cq-a-cita .esci-cq-tit { padding-left: 3.35em; }
.esci-cq.cq-a-cita .esci-tx-body { font-style: italic; }
/* cinta en la esquina: una banda en diagonal con el icono */
.esci-cq.cq-a-cinta .esci-cq-deco { overflow: hidden; }
.esci-cq .esci-cq-cinta {
  position: absolute; top: 16px; right: -36px; width: 124px; height: 24px; transform: rotate(45deg);
  background: var(--cq-banda); color: var(--cq-letra-banda); text-align: center;
  font: 700 12px/24px var(--sans); box-shadow: 0 1px 3px rgba(15, 23, 42, .28);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.esci-cq.cq-a-cinta .esci-cq-tit, .esci-cq.cq-a-cinta .esci-cq-caja > .esci-tx-env { padding-right: 3.6em; }
/* esquinas marcadas: dos escuadras de color */
.esci-cq.cq-a-esquinas .esci-cq-deco::before,
.esci-cq.cq-a-esquinas .esci-cq-deco::after { content: ''; position: absolute; width: 24px; height: 24px; border: 0 solid var(--cq-marco); }
.esci-cq.cq-a-esquinas .esci-cq-deco::before { top: 0; left: 0; border-width: 3px 0 0 3px; }
.esci-cq.cq-a-esquinas .esci-cq-deco::after { right: 0; bottom: 0; border-width: 0 3px 3px 0; }
/* rayas arriba y abajo: el título algo más espaciado, como un libro */
.esci-cq.cq-a-minimal .esci-cq-tit { letter-spacing: .03em; }

/* ── imprimir y calcar ─────────────────────────────────────────────────── */
@media print {
  .esci-cq .esci-cq-caja, .esci-cq .esci-cq-tit, .esci-cq .esci-cq-cinta, .esci-cq .esci-cq-caja > .esci-tx-env {
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
  .esci-cq .esci-cq-txt:empty::before { content: none !important; }
  .esci-cq.cq-tit-vacio .esci-cq-tit { display: none !important; }
  .esci-cq .esci-cq-caja { break-inside: avoid; }
}
.esci-calco .esci-cq .esci-cq-txt:empty::before { content: none !important; }
/* html2canvas pinta una sombra difuminada sin difuminar (un aro gris macizo
   alrededor del cuadro): en el calco de «PDF fiel» los cuadros salen planos */
.esci-calco .esci-cq .esci-cq-caja { box-shadow: none !important; }
.esci-calco .esci-cq.cq-tit-vacio .esci-cq-tit { display: none !important; }

/* ── la galería (js/ui/cuadros-galeria.js) ─────────────────────────────── */
.esci-cqg {
  position: fixed; z-index: 1200; width: min(720px, calc(100vw - 24px)); max-height: min(80vh, 640px);
  display: flex; flex-direction: column; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden;
}
.esci-cqg-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid var(--line-soft); }
.esci-cqg-tit { font: 600 var(--fs-ui)/1.3 var(--sans); flex: 1 1 auto; }
.esci-cqg-tit small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--fs-ui-sm); }
.esci-cqg-cerrar { min-width: 32px; height: 32px; border: 1px solid var(--key-line); background: var(--key); color: var(--ink); border-radius: var(--r-sm); cursor: pointer; }
.esci-cqg-cuerpo { overflow-y: auto; padding: 6px 12px 12px; }
.esci-cqg-grupo { font: 600 var(--fs-label)/1.6 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin: 10px 2px 6px; }
.esci-cqg-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.esci-cqg-ficha {
  display: flex; flex-direction: column; gap: 5px; padding: 8px 8px 6px; min-height: 40px; text-align: left;
  border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--paper, #fff); cursor: pointer; color: var(--ink);
}
.esci-cqg-ficha:hover, .esci-cqg-ficha:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); outline: none; }
.esci-cqg-ficha.is-actual { border-color: var(--accent); background: var(--accent-soft); }
.esci-cqg-nom { font: 500 var(--fs-ui-sm)/1.25 var(--sans); }
/* a lo ancho de su ficha: con el título en pestaña o en etiqueta (que no
   ocupan sitio) la miniatura se encogía hasta casi nada */
.esci-cqg-mini { --fs-text: 9px; font-size: 9px; padding: 12px 4px 4px; pointer-events: none; width: 100%; box-sizing: border-box; align-self: stretch; }
.esci-cqg-mini .esci-cq-tit { font-size: 8.5px; }
.esci-cqg-mini .esci-cq-caja > .esci-tx-env { padding: 5px 8px 7px; }
.esci-cqg-mini .esci-cq-cinta { top: 8px; right: -30px; width: 90px; height: 14px; font-size: 8px; line-height: 14px; }
.esci-cqg-raya { height: 4px; border-radius: 2px; background: currentColor; opacity: .32; margin: 4px 0; }
.esci-cqg-raya.is-corta { width: 62%; }
.esci-cqg-pie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line-soft); font: 400 var(--fs-ui-sm)/1.3 var(--sans); color: var(--ink-3); }
@media (pointer: coarse) {
  .esci-cqg-ficha { min-height: 64px; }
  .esci-cqg-cerrar { min-width: 40px; height: 40px; }
}
@media print { .esci-cqg { display: none !important; } }