/* ═══════════════════════════════════════════════════════════════════════════
   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 */
/* v1.128 · TEXTO CORRIDO, no una fila flexible: con `display: flex` el título
   que no cabía en un renglón se envolvía en una COLUMNA estrecha a la derecha
   del rótulo («Observación. Lo que se ve al / mover el día 7»; en la terminal,
   cinco renglones de una palabra). Ahora el segundo renglón vuelve al margen,
   como en un libro. `text-align: left` explícito: si no, heredaba el centrado
   del párrafo. La tarjeta y el ornamental, que sí alinean, siguen en flex. */
.esci-cq .esci-cq-tit {
  position: relative; z-index: 2;
  display: block; text-align: left; 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 { display: inline-block; margin-right: .42em; 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; }
/* «Teorema 1.» no se parte nunca */
.esci-cq .esci-cq-rot { white-space: nowrap; font-weight: 700; margin-right: .32em; }
.esci-cq .esci-cq-rot:empty { display: none; }
/* `break-word` y no `anywhere` (v1.128): `anywhere` deja que el título encoja
   por debajo de una palabra, y «Las mesetas» salía «Las / meset / as» */
.esci-cq .esci-cq-txt { display: inline; outline: none; font-weight: 600; cursor: text; overflow-wrap: break-word; }
/* sin título, un hueco donde hacer clic para escribirlo */
.esci-cq .esci-cq-txt:empty { display: inline-block; min-width: 2.5em; }
.esci-cq.cq-a-tarjeta .esci-cq-tit, .esci-cq.cq-a-ornamental .esci-cq-tit { display: flex; align-items: baseline; }
.esci-cq.cq-a-tarjeta .esci-cq-tit > *, .esci-cq.cq-a-ornamental .esci-cq-tit > * { flex: none; }
.esci-cq.cq-a-tarjeta .esci-cq-txt, .esci-cq.cq-a-ornamental .esci-cq-txt { flex: 0 1 auto; display: block; }
.esci-cq.cq-a-ornamental .esci-cq-tit { text-align: center; }
.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; text-overflow: ellipsis;
}
/* 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; text-overflow: ellipsis; box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
}
/* v1.128 · La pestaña y la etiqueta son de UN renglón: un título que no cabe
   se cortaba en seco («…rectilíneo unifo») y nadie lo notaba hasta tenerlo
   impreso. Ahora termina en «…» (el título es texto corrido, así que la
   elipsis la pone el propio renglón), el globo del ratón dice el título
   entero y un aviso propone acortarlo (js/ui/cuadros-galeria.js). */
.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 ─────────────────────────────────────────────── */
/* z-index 3: por encima del título (z-index 2), que si no tapaba los puntos
   de la terminal y la chincheta; no recibe clics (pointer-events: none) */
.esci-cq .esci-cq-deco { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 3; }
.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; }

/* ── v1.127 · las formas nuevas ────────────────────────────────────────── */
/* sombra sólida: la sombra la calcula el motor (sin difuminar, del marco) */
.esci-cq.cq-a-solida .esci-cq-caja { margin: 0 10px 10px 0; }
/* plano (cianotipo): letra de rotulador técnico */
.esci-cq.cq-a-plano .esci-cq-tit { font-family: var(--mono, monospace); font-variant: all-small-caps; letter-spacing: .08em; }
/* terminal: los tres puntos de la ventana y letra de máquina */
.esci-cq.cq-a-terminal .esci-tx-body { font-family: var(--mono, 'IBM Plex Mono', monospace); }
.esci-cq.cq-a-terminal .esci-cq-tit { padding-left: 5.2em; font-family: var(--mono, monospace); }
.esci-cq .esci-cq-puntos { position: absolute; top: .78em; left: .9em; width: 2.9em; height: .7em; }
.esci-cq .esci-cq-puntos::before {
  content: ''; position: absolute; left: 0; top: 0; width: .7em; height: .7em; border-radius: 50%;
  background: #ff5f57; box-shadow: 1.05em 0 0 #febc2e, 2.1em 0 0 #28c840;
}
.esci-cq.cq-a-terminal.cq-sin-titulo .esci-cq-caja > .esci-tx-env { padding-top: 1.9em; }
/* esquina doblada: la esquina de abajo a la derecha, doblada hacia dentro */
/* v1.128 · La caja pierde un triángulo de 16 px de cateto (11,3 px medidos
   sobre la diagonal: 16/√2) y la solapa es EXACTAMENTE ese triángulo, vuelto
   hacia dentro. Antes la caja pintaba una banda parda de 8 px en diagonal y la
   solapa medía 22 px: se veía una mancha y un recuadrito claro. */
.esci-cq.cq-a-esquina .esci-cq-caja {
  background: linear-gradient(315deg, transparent 11.3px, var(--cq-fondo) 11.3px);
}
.esci-cq .esci-cq-doblez {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  background: linear-gradient(315deg, transparent 50%, var(--cq-doblez, var(--cq-marco)) 50%);
  box-shadow: -1px -1px 2px rgba(15, 23, 42, .12);
}
/* libro con lomo: el lomo con dos filetes claros */
.esci-cq.cq-a-lomo .esci-cq-deco::before {
  content: ''; position: absolute; left: calc(-1 * var(--cq-bl) + 3px); top: 6px; bottom: 6px; width: 2px;
  background: rgba(255, 255, 255, .55);
}
/* boleto: dos medias lunas recortadas a los lados */
.esci-cq.cq-a-ticket .esci-cq-deco::before,
.esci-cq.cq-a-ticket .esci-cq-deco::after {
  content: ''; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: var(--paper, #fff); border: var(--cq-grosor) dashed var(--cq-marco);
}
.esci-cq.cq-a-ticket .esci-cq-deco::before { left: -11px; }
.esci-cq.cq-a-ticket .esci-cq-deco::after { right: -11px; }
.esci-cq.cq-a-ticket .esci-cq-caja > .esci-tx-env, .esci-cq.cq-a-ticket .esci-cq-tit { padding-left: 1.6em; padding-right: 1.6em; }
/* icono grande al lado: una columna del color de la banda con el icono */
/* v1.128 · el cuerpo (4 em de 16 px) y el título (4,45 em de su letra al 90 %)
   empiezan los dos a 64 px, a 14 px de la columna de 49,7 px (2,7 em × 1,15).
   Con 3,7 em el título quedaba a 3 px de la columna y el cuerpo a 9, sin alinearse. */
.esci-cq.cq-a-icono .esci-cq-caja > .esci-tx-env { padding-left: 4em; }
.esci-cq.cq-a-icono .esci-cq-tit { padding-left: 4.45em; }
.esci-cq.cq-a-icono .esci-cq-tit .esci-cq-ico { display: none; }
.esci-cq .esci-cq-icogrande {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2.7em; display: flex; align-items: center; justify-content: center;
  background: var(--cq-banda); color: var(--cq-letra-banda); font-size: 1.15em;
  border-radius: var(--cq-radio) 0 0 var(--cq-radio);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.esci-cq.cq-a-icono.cq-sin-icono .esci-cq-icogrande { display: none; }
.esci-cq.cq-a-icono.cq-sin-icono .esci-cq-caja > .esci-tx-env, .esci-cq.cq-a-icono.cq-sin-icono .esci-cq-tit { padding-left: 1em; }
/* borde en degradado: el marco son dos colores que se funden */
.esci-cq.cq-a-bordedeg .esci-cq-caja { border-color: var(--cq-marco) var(--cq-marco2, var(--cq-marco)) var(--cq-marco2, var(--cq-marco)) var(--cq-marco); }
.esci-cq.cq-a-bordedeg .esci-cq-deco::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: calc(-1 * var(--cq-bt)); height: var(--cq-bt);
  background: linear-gradient(90deg, var(--cq-marco), var(--cq-marco2, var(--cq-marco)));
}
/* pergamino: letra con serifa y el título en versalitas */
.esci-cq.cq-a-pergamino .esci-tx-body { font-style: italic; }
.esci-cq.cq-a-pergamino .esci-cq-tit { font-family: var(--serif, Georgia, serif); font-variant: small-caps; letter-spacing: .04em; font-size: 1em; }
/* marco ornamental: un filete interior y cuatro rombos en las esquinas */
.esci-cq .esci-cq-orla { position: absolute; inset: 5px; border: 1px solid var(--cq-marco); border-radius: 1px; }
.esci-cq .esci-cq-orla::before, .esci-cq .esci-cq-orla::after {
  content: ''; position: absolute; width: 9px; height: 9px; background: var(--cq-marco); transform: rotate(45deg);
}
.esci-cq .esci-cq-orla::before { left: -5px; top: -5px; }
.esci-cq .esci-cq-orla::after { right: -5px; bottom: -5px; }
.esci-cq.cq-a-ornamental .esci-cq-caja > .esci-tx-env, .esci-cq.cq-a-ornamental .esci-cq-tit { padding-left: 1.4em; padding-right: 1.4em; }
.esci-cq.cq-a-ornamental .esci-cq-tit { font-family: var(--serif, Georgia, serif); justify-content: center; letter-spacing: .05em; }
/* resaltador: el trazo del rotulador, más torcido de un lado */
.esci-cq.cq-a-resaltador .esci-cq-caja { border-radius: 3px 14px 4px 12px; }
.esci-cq.cq-a-resaltador .esci-cq-tit .esci-cq-txt, .esci-cq.cq-a-resaltador .esci-cq-rot { text-decoration: underline; text-decoration-color: var(--cq-marco); text-decoration-thickness: 3px; text-underline-offset: 3px; }
/* franja de precaución: rayas amarillas y negras arriba */
.esci-cq.cq-a-precaucion .esci-cq-caja { padding-top: 9px; }
.esci-cq .esci-cq-franja {
  position: absolute; left: 0; right: 0; top: 0; height: 9px;
  background: linear-gradient(135deg, var(--cq-deco) 25%, var(--cq-marco) 25%, var(--cq-marco) 50%, var(--cq-deco) 50%, var(--cq-deco) 75%, var(--cq-marco) 75%);
  background-size: 18px 18px; border-radius: var(--cq-radio-in) var(--cq-radio-in) 0 0;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* bocadillo: la colita abajo a la izquierda */
.esci-cq.cq-a-burbuja .esci-cq-caja { margin-bottom: 14px; }
.esci-cq .esci-cq-cola {
  position: absolute; left: 22px; top: 100%; width: 0; height: 0; margin-top: var(--cq-bb);
  border-style: solid; border-width: 14px 16px 0 0; border-color: var(--cq-marco) transparent transparent transparent;
}

/* ── v1.127 · el fondo con dibujo (el color lo aclara el motor: --cq-patron) ── */
.esci-cq.cq-pat-cuadricula .esci-cq-caja > .esci-tx-env {
  background-image: linear-gradient(var(--cq-patron) 1px, transparent 1px), linear-gradient(90deg, var(--cq-patron) 1px, transparent 1px);
  background-size: 18px 18px;
}
.esci-cq.cq-pat-puntos .esci-cq-caja > .esci-tx-env { background-image: radial-gradient(var(--cq-patron) 1.3px, transparent 1.6px); background-size: 14px 14px; }
.esci-cq.cq-pat-rayas .esci-cq-caja > .esci-tx-env {
  background-image: linear-gradient(135deg, var(--cq-patron) 25%, transparent 25%, transparent 50%, var(--cq-patron) 50%, var(--cq-patron) 75%, transparent 75%);
  background-size: 16px 16px;
}
.esci-cq.cq-pat-renglones .esci-cq-caja > .esci-tx-env { background-image: linear-gradient(to bottom, transparent 94%, var(--cq-patron) 94%); background-size: 100% 1.5em; }
.esci-cq[class*='cq-pat-'] .esci-cq-caja > .esci-tx-env { border-radius: 0 0 var(--cq-radio-in) var(--cq-radio-in); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ── v1.127 · los adornos elegidos (data.cuadro.deco) ───────────────────── */
.esci-cq .esci-cq-dk { position: absolute; pointer-events: none; color: var(--cq-marco); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.esci-cq .esci-cq-dk-chincheta { top: -13px; left: 50%; margin-left: -9px; font-size: 20px; color: #d23c32; transform: rotate(28deg); }
.esci-cq .esci-cq-dk-clip { top: -16px; right: 22px; font-size: 26px; color: #7b8794; transform: rotate(-22deg); }
.esci-cq .esci-cq-dk-cinta {
  top: -11px; left: 50%; width: 92px; height: 22px; margin-left: -46px;
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(15, 23, 42, .1); transform: rotate(-3deg);
}
.esci-cq .esci-cq-dk-esquinas { inset: -4px; }
.esci-cq .esci-cq-dk-esquinas::before, .esci-cq .esci-cq-dk-esquinas::after { content: ''; position: absolute; width: 22px; height: 22px; border: 0 solid var(--cq-marco); }
.esci-cq .esci-cq-dk-esquinas::before { top: 0; left: 0; border-width: 3px 0 0 3px; }
.esci-cq .esci-cq-dk-esquinas::after { right: 0; bottom: 0; border-width: 0 3px 3px 0; }
.esci-cq .esci-cq-dk-estrellas { top: -10px; right: 14px; display: flex; gap: 3px; font-size: 13px; color: #f2b01e; }
.esci-cq .esci-cq-dk-estrellas i:nth-child(2) { font-size: 17px; margin-top: -4px; }
.esci-cq .esci-cq-dk-marca { right: 14px; bottom: 6px; font-size: 64px; line-height: 1; opacity: .09; }
.esci-cq .esci-cq-dk-sello {
  right: 14px; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%;
  border: 3px double var(--cq-marco); display: flex; align-items: center; justify-content: center;
  font-size: 22px; opacity: .55; transform: rotate(-14deg);
}
.esci-cq.cq-d-sello .esci-cq-caja > .esci-tx-env { padding-right: 4.6em; }
.esci-cq.cq-d-marca .esci-cq-caja > .esci-tx-env { position: relative; z-index: 1; }

/* ── 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; }
/* v1.127 · la sombra SÓLIDA no se difumina: html2canvas la pinta tal cual */
.esci-calco .esci-cq.cq-a-solida .esci-cq-caja { box-shadow: var(--cq-sombra) !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); }
/* v1.128 · `margin-top: auto`: las miniaturas miden de 63 a 82 px según la
   forma y el nombre subía y bajaba de ficha en ficha; ahora va al pie de la
   ficha, que la rejilla ya estira a lo alto de su fila */
.esci-cqg-nom { font: 500 var(--fs-ui-sm)/1.25 var(--sans); margin-top: auto; }
/* 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); }
/* v1.127 · el buscador de la galería */
.esci-cqg-busca {
  flex: none; margin: 8px 12px 0; height: 32px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--key-line); border-radius: var(--r-sm);
  background: var(--paper, #fff); color: var(--ink); font: 400 var(--fs-ui-sm)/1 var(--sans);
}
.esci-cqg-busca:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.esci-cqg-grupo[hidden], .esci-cqg-rejilla[hidden], .esci-cqg-ficha[hidden] { display: none; }
/* v1.127 · el panel «Diseñar el cuadro» y la rejilla de iconos */
.esci-cqg.esci-cqd { width: min(380px, calc(100vw - 24px)); max-height: min(86vh, 680px); }
.esci-cqg.esci-cqi { width: min(400px, calc(100vw - 24px)); }
.esci-cqd-fila { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.esci-cqd-fila .esci-tx-sel { flex: 1 1 140px; min-width: 0; }
.esci-cqd-gal { height: 32px; padding: 0 10px; }
.esci-cqd-color {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line);
  cursor: pointer; padding: 0; font: 700 11px/1 var(--sans); color: var(--ink-2); background: var(--key);
}
/* v1.128 · el anillo del elegido: un hueco del color del panel y un aro de
   tinta. Con 2 px de acento casi no se veía sobre el círculo azul */
.esci-cqd-color.is-actual { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.esci-cqd-picker { width: 32px; height: 26px; padding: 0; border: 1px solid var(--key-line); border-radius: var(--r-sm); background: none; cursor: pointer; }
.esci-cqd-fila.es-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; }
.esci-cqi .esci-cqd-fila.es-iconos { padding: 8px 12px 12px; max-height: 320px; overflow-y: auto; }
/* en el panel, los iconos se desplazan solos: adorno y fondo quedan a la vista */
.esci-cqd .esci-cqd-fila.es-iconos { max-height: 158px; overflow-y: auto; padding: 2px; }
.esci-cqd-ico {
  height: 34px; min-width: 34px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--paper, #fff);
  color: var(--ink); cursor: pointer; font: 600 10px/1 var(--sans); padding: 0;
}
.esci-cqd-ico i { font-size: 15px; }
/* v1.128 · «el del tipo»: su icono con la marca «auto» debajo (antes, la
   palabra «Tipo» en 10 px sobre un botón de icono, que no se entendía) */
.esci-cqd-ico.es-tipo { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.esci-cqd-ico.es-tipo i { font-size: 13px; }
.esci-cqd-ico.es-tipo small { font: 600 8.5px/1 var(--sans); letter-spacing: .02em; color: var(--ink-3); }
.esci-cqd-ico.es-tipo.is-actual small { color: inherit; }
.esci-cqd-ico:hover, .esci-cqd-chip:hover { border-color: var(--accent); }
.esci-cqd-ico.is-actual, .esci-cqd-chip.is-actual { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.esci-cqd-chip {
  height: 28px; padding: 0 10px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--paper, #fff);
  color: var(--ink); cursor: pointer; font: 500 var(--fs-ui-sm)/1 var(--sans);
}
.esci-cqd-nota { flex-basis: 100%; color: var(--ink-3); font: 400 var(--fs-ui-sm)/1.35 var(--sans); }
@media (pointer: coarse) {
  .esci-cqd-ico { height: 42px; }
  .esci-cqd-color { width: 32px; height: 32px; }
}
@media print { .esci-cqd, .esci-cqi { display: none !important; } }
@media (pointer: coarse) {
  .esci-cqg-ficha { min-height: 64px; }
  .esci-cqg-cerrar { min-width: 40px; height: 40px; }
}
@media print { .esci-cqg { display: none !important; } }