/* =============================================================================
   LOS PAPELES DE COMERCIALES — el estado de cuenta (y, desde la etapa 8, el
   recibo). Etapa 2 de `docs/RUNBOOK-PAPELES-COMERCIALES.md`.
   =============================================================================
   TODO selector de este archivo va bajo `.cm-ui .cm-pp-*`, y el prefijo no es
   capricho: `.cm-tab` se eligió una vez sin mirar, ya existía —era la pestaña de
   unidad del formulario de pre-carga, con su `display: flex`— y las cinco cajas
   del tablero terminaron fuera de pantalla **con 33 aserciones en verde y
   ninguna mintiendo** (`feedback_choque_de_clase_dentro_del_mismo_scope`). El
   banco de esta etapa vuelve a mirarlo: ningún `.cm-pp-*` puede existir en
   `comerciales-ui.css`, y ningún selector de acá puede vivir fuera de él.

   LO QUE SE REUSA, y por eso no está acá: `.cm-velo` (el fondo del modal),
   `.cm-btn` / `.cm-btn.secundario` (los botones), `.cm-x` (la cruz) y
   `.cm-risk.alerta` (los avisos). Un diálogo que estrena vocabulario propio se
   ve de otro sistema.

   ══ EL PAPEL ES PAPEL ══════════════════════════════════════════════════════
   Adentro de `.cm-pp-hoja` **no hay un solo píxel**: todo va en milímetros y en
   puntos, que son las unidades con las que después se dibuja el PDF. Las
   medidas están todas en §3 del runbook y se repiten acá al lado de cada una.
   Y el fondo es BLANCO SIEMPRE: la hoja no hereda el lienzo del módulo.

   Los colores son los de §3.5 —todos existen en `core/tokens.css`, ninguno se
   inventa— pero se escriben con su número y no con `var(--navy)`, por un motivo
   concreto: **el PDF de la etapa 3 usa estos mismos valores como RGB literales**
   y el cable que compara los dos dibujantes exige que digan lo mismo. Un token
   que cambie de valor tiene que cambiar acá a mano, a la vista.
   ========================================================================== */

/* =============================================================================
   1. EL DIÁLOGO — donde se mira la hoja antes de mandarla
   =============================================================================
   LAS TRES REGLAS VAN JUNTAS Y NINGUNA SOBRA
   (`feedback_el_dialogo_no_reparte_alto_y_el_pie_se_corta`): la caja es la
   COLUMNA (`flex-direction: column; min-height: 0; overflow: hidden`), el
   cuerpo es el único que crece y escrolla (`flex: 1 1 auto; min-height: 0`), y
   el pie NO SE ENCOGE (`flex: none`). Sin las tres, el cuerpo crece con su
   contenido y los dos botones quedan cortados por abajo — con todas las
   aserciones sobre el marcado en verde, porque los botones existen y contestan
   si se los aprieta por código.

   Por eso no se reusa `.cm-ficha`: es una caja con `overflow: auto` y cabecera
   sticky, pensada para una ficha sin pie de botones. */
.cm-ui .cm-pp-velo {
    /* El velo del módulo trae 18 px de aire. A 390 px eso son 36 px que le
       faltan a la hoja, y la hoja ya es lo más ancho que hay. */
    padding: clamp(8px, 2vw, 18px);
}
.cm-ui .cm-pp-dlg {
    width: min(940px, 100%);
    max-height: 92vh;
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    background: var(--surface);
    border-radius: var(--r-card);
    box-shadow: var(--e3);
}
.cm-ui .cm-pp-dlg-h {
    flex: none;
    display: flex; gap: 6px 12px; align-items: baseline; flex-wrap: wrap;
    background: var(--navy); color: #fff; padding: 11px 17px;
}
.cm-ui .cm-pp-dlg-h .doc { font-weight: 700; font-size: .92rem; }
.cm-ui .cm-pp-dlg-h .cli { font-size: .8rem; opacity: .85; }
.cm-ui .cm-pp-dlg-h .cm-x { margin-left: auto; }

.cm-ui .cm-pp-dlg-b {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    padding: clamp(8px, 1.6vw, 16px);
    background: var(--canvas);
}
.cm-ui .cm-pp-dlg-p {
    flex: none;
    padding: 10px 14px;
    border-top: 1px solid var(--hair);
    background: var(--surface);
}
.cm-ui .cm-pp-dlg-btns {
    display: flex; gap: 8px; align-items: center;
    justify-content: flex-end; flex-wrap: wrap;
}
/* El motivo por el que el botón está apagado. Va a la IZQUIERDA del botón que
   explica y no en un `title`: una señal que sólo existe al apuntar no existe
   (`feedback_una_senal_que_solo_existe_al_apuntar_no_existe`). */
.cm-ui .cm-pp-pdf-no {
    margin-right: auto; max-width: 48ch;
    font-size: .72rem; line-height: 1.5; color: var(--faint);
}
.cm-ui .cm-pp-dlg-p .cm-btn[disabled] {
    cursor: not-allowed; opacity: .5;
    background: var(--surface); color: var(--muted);
    border-color: var(--hair-strong); box-shadow: none;
}
.cm-ui .cm-pp-dlg-p .cm-btn[disabled]:hover { transform: none; }
.cm-ui .cm-pp-avisos { margin: 0 0 10px; }
.cm-ui .cm-pp-avisos .cm-risk { margin-top: 0; }
.cm-ui .cm-pp-avisos .cm-risk + .cm-risk { margin-top: 7px; }

/* --- El visor: la hoja de 210 mm adentro de una pantalla de 390 px ---------
   210 mm son 794 px y a 390 px NO ENTRA. De las dos salidas —escalar o
   scrollear de costado— el scroll horizontal ya se pagó cuatro veces en este
   módulo: lo que queda afuera es siempre la última columna, y acá la última
   columna es la plata.

   Se escala con `zoom` y no con `transform: scale()` porque `zoom` REFLOWEA: el
   visor ocupa el alto ya escalado en vez de dejar un hueco blanco debajo del
   tamaño que la hoja tendría sin escalar. El factor lo calcula y lo escribe
   `ppHtmlAjustar()` en cada apertura y en cada `resize`. */
.cm-ui .cm-pp-visor { zoom: var(--pp-zoom, 1); }
/* La lupa, y SOLO con la lupa puesta: el scroll de costado existe porque
   alguien lo pidió. Sin este `.ampliado` sería el scroll que aparece solo y se
   lleva la última columna, que en esta hoja es la plata. */
.cm-ui .cm-pp-dlg-b.ampliado { overflow-x: auto; }

/* =============================================================================
   2. LA HOJA — A4, 210 × 297 mm (§3)
   ========================================================================== */
.cm-ui .cm-pp-papel { display: block; }
.cm-ui .cm-pp-papel .cm-pp-hoja + .cm-pp-hoja { margin-top: 6mm; }

.cm-ui .cm-pp-hoja {
    /* La paleta de §3.5, con su número. Ver la cabecera del archivo. */
    --pp-navy: #002b6b;        /* la banda, el pie, los totales               */
    --pp-navy-500: #154a94;    /* los saldos a favor. NUNCA verde: verde diría
                                  «está bien», y un crédito no es una nota
                                  buena ni mala, es plata del cliente         */
    --pp-ambar: #a0690a;       /* la franja, y sólo la franja                 */
    --pp-warn: #a85900;        /* lo vencido                                  */
    --pp-crit: #c62828;        /* lo vencido hace mucho                       */
    --pp-ink: #1c2232;         /* texto                                       */
    --pp-gris: #6b7787;        /* rótulos y notas                             */
    --pp-gris-2: #4a5265;      /* texto secundario                            */
    --pp-hair: #e4e8f0;        /* la raya entre filas                         */
    --pp-borde: #c9d2e2;       /* bordes                                      */
    --pp-caja: #dfe4ee;        /* las cajas                                   */
    --pp-pie: #becdeb;         /* el texto del pie sobre navy                 */

    box-sizing: border-box;
    width: 210mm;
    /* `min-height` y no `height`: si el paginado se pasa de la cuenta, la hoja
       CRECE y se ve, en vez de recortar filas en silencio. El banco mide que
       ninguna pase de 297 mm — que es la forma de enterarse de que
       `PP_FILAS_HOJA1` quedó grande. */
    min-height: 297mm;
    margin: 0 auto;
    display: flex; flex-direction: column;
    background: #fff;                       /* el papel no hereda el lienzo   */
    color: var(--pp-ink);
    /* La misma familia que dibuja el PDF (jsPDF usa Helvetica): que los dos
       papeles se parezcan empieza por acá. */
    font-family: Helvetica, Arial, 'Segoe UI', sans-serif;
    font-size: 7.4pt;
    line-height: 1.35;
    box-shadow: 0 .3mm 2mm rgba(10, 25, 60, .16);
}

/* --- 2.1 El encabezado «la barra» (§3.1) ---------------------------------- */
.cm-ui .cm-pp-banda {
    flex: none;
    height: 16mm;                            /* la vieja eran 42 mm           */
    padding: 0 14mm;
    display: flex; align-items: center; justify-content: space-between; gap: 8mm;
    background: var(--pp-navy);
}
/* Blanco sobre el navy, SIN cuadro blanco detrás. */
.cm-ui .cm-pp-logo { width: 24mm; height: auto; display: block; }
.cm-ui .cm-pp-doc {
    color: #fff; font-size: 8pt; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; text-align: right;
}
.cm-ui .cm-pp-franja { flex: none; height: 1mm; background: var(--pp-ambar); }

.cm-ui .cm-pp-emisor {
    flex: none;
    margin-top: 3mm; padding: 0 14mm;
    display: flex; justify-content: space-between; gap: 6mm;
    font-size: 6.6pt; color: var(--pp-gris);
}
.cm-ui .cm-pp-emisor span:last-child { text-align: right; white-space: nowrap; }

/* --- 2.2 El pie (§3.2): 10 mm, para que acompañe al encabezado ------------- */
.cm-ui .cm-pp-pie {
    flex: none; margin-top: auto;
    height: 10mm; padding: 0 14mm;
    display: flex; align-items: center; justify-content: space-between; gap: 6mm;
    background: var(--pp-navy);
    color: var(--pp-pie); font-size: 6.6pt;
}
.cm-ui .cm-pp-pie b { color: #fff; font-weight: 700; }
.cm-ui .cm-pp-pie span:last-child { text-align: right; white-space: nowrap; }

/* --- 2.3 El cuerpo (§3.3) ------------------------------------------------- */
/* `flex: 1 0 auto` — CRECE para llenar la hoja corta, pero NO SE ENCOGE. Si se
   encogiera, una hoja con más filas de las que entran seguiría midiendo 297 mm
   con el contenido desbordando por abajo: taparía el pie y se montaría sobre la
   banda de la hoja siguiente, y la medición del banco daría verde porque la
   CAJA sigue midiendo lo que tiene que medir. Sin encogerse, la hoja crece y el
   banco lo ve (bloque 3: «ninguna hoja se pasa de 297 mm»). */
.cm-ui .cm-pp-cuerpo { flex: 1 0 auto; padding: 5mm 14mm 0; }

/* La línea del cliente */
.cm-ui .cm-pp-cli {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 6mm;
}
.cm-ui .cm-pp-cli .q { display: flex; flex-direction: column; gap: .8mm; }
.cm-ui .cm-pp-cli .n { font-size: 12pt; font-weight: 700; line-height: 1.2; }
.cm-ui .cm-pp-cli .s {
    font-size: 7.5pt; color: var(--pp-gris-2);
    font-variant-numeric: tabular-nums;
}
.cm-ui .cm-pp-cli .c { font-size: 7pt; color: var(--pp-gris); white-space: nowrap; }
/* La repetición de la hoja 2 en adelante (§3.4): una hoja suelta tiene que
   poder decir de quién es. */
.cm-ui .cm-pp-cli.rep { gap: 3mm; align-items: baseline; justify-content: flex-start; }
.cm-ui .cm-pp-cli.rep .n { font-size: 10pt; }

/* Los cuatro KPI, en una tira. Cifras a tamaño de ficha, nunca display
   (`feedback_evitar_numeros_gigantes`). */
.cm-ui .cm-pp-kpis {
    margin-top: 4mm;
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: .25mm solid var(--pp-caja); border-radius: 2mm;
    overflow: hidden;
}
.cm-ui .cm-pp-kpi {
    padding: 2.2mm 3mm;
    display: flex; flex-direction: column; gap: .6mm;
    border-left: .25mm solid var(--pp-caja);
}
.cm-ui .cm-pp-kpi:first-child { border-left: none; }
.cm-ui .cm-pp-kpi .r {
    font-size: 5.9pt; font-weight: 700; color: var(--pp-gris);
    letter-spacing: .08em; text-transform: uppercase;
}
.cm-ui .cm-pp-kpi .v {
    font-size: 11pt; font-weight: 700; line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.cm-ui .cm-pp-kpi .n { font-size: 6.4pt; color: var(--pp-gris); line-height: 1.35; }

/* Las cinco cajas de antigüedad — CELDAS, NUNCA BARRAS: 21 de 143 clientes
   traen alguna en negativo y una barra de largo negativo no se dibuja. */
.cm-ui .cm-pp-edades { margin-top: 4mm; }
.cm-ui .cm-pp-edades-r {
    display: block; margin-bottom: 1.4mm;
    font-size: 5.9pt; font-weight: 700; color: var(--pp-gris);
    letter-spacing: .08em; text-transform: uppercase;
}
.cm-ui .cm-pp-edades-t {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6mm;
}
.cm-ui .cm-pp-edad {
    padding: 1.8mm 2mm;
    border: .25mm solid var(--pp-caja); border-radius: 2mm;
    display: flex; flex-direction: column; gap: .6mm;
}
.cm-ui .cm-pp-edad .r { font-size: 5.8pt; color: var(--pp-gris); }
.cm-ui .cm-pp-edad .v {
    font-size: 8pt; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* --- 2.4 La tabla --------------------------------------------------------- */
/* `table-layout: fixed` con anchos por columna: sin eso el `width` de un `<th>`
   es una pista, la celda del comprobante largo crece y le come el ancho a la de
   al lado, y la última columna —el importe— sale cortada. */
.cm-ui .cm-pp-tabla {
    width: 100%; margin-top: 4mm;
    border-collapse: collapse; table-layout: fixed;
}
.cm-ui .cm-pp-tabla th {
    padding: 1.6mm 2.2mm; text-align: left;
    font-size: 6pt; font-weight: 700; color: var(--pp-gris);
    letter-spacing: .08em; text-transform: uppercase;
    border-bottom: .3mm solid var(--pp-borde);
}
.cm-ui .cm-pp-tabla td {
    padding: 1.6mm 2.2mm; vertical-align: top;
    font-size: 7.4pt;
    /* La raya va ARRIBA de cada fila y no abajo: así el renglón de la nota del
       pago parcial —que es la continuación de la fila de arriba— se cuelga sin
       una raya en el medio partiéndolos en dos. */
    border-top: .2mm solid var(--pp-hair);
}
.cm-ui .cm-pp-tabla tbody tr:first-child td { border-top: none; }
.cm-ui .cm-pp-tabla th.cp, .cm-ui .cm-pp-tabla td.cp { width: 37%; }
.cm-ui .cm-pp-tabla th.fe, .cm-ui .cm-pp-tabla td.fe { width: 12%; }
.cm-ui .cm-pp-tabla th.vt, .cm-ui .cm-pp-tabla td.vt { width: 21%; }
.cm-ui .cm-pp-tabla th.im, .cm-ui .cm-pp-tabla td.im { width: 15%; text-align: right; }
.cm-ui .cm-pp-tabla .cp .rot { font-weight: 700; }
/* El número NO se parte. «Factura de Crédito Electrónica MiPyMEs» es un rótulo
   largo y arrastraba el número al renglón de abajo cortado por la mitad
   (`0008-` arriba y `00006630` abajo): un número de comprobante partido es lo
   que el cliente copia mal cuando lo va a pagar. Que envuelva el rótulo. */
.cm-ui .cm-pp-tabla .cp .num { white-space: nowrap; }
.cm-ui .cm-pp-tabla .cp .num,
.cm-ui .cm-pp-tabla .fe,
.cm-ui .cm-pp-tabla .vt,
.cm-ui .cm-pp-tabla .im { font-variant-numeric: tabular-nums; }
.cm-ui .cm-pp-tabla .vt small {
    display: block; margin-top: .5mm;
    font-size: 6.3pt; color: var(--pp-gris);
}

/* EL TONO LO TRAE EL MODELO; acá es un color y nada más. Cinco y no más. */
.cm-ui .cm-pp-tabla tr.t-vencido .vt small { color: var(--pp-warn); }
.cm-ui .cm-pp-tabla tr.t-critico .vt small { color: var(--pp-crit); font-weight: 700; }
.cm-ui .cm-pp-tabla tr.t-vencido .im.debe .p { color: var(--pp-warn); font-weight: 700; }
.cm-ui .cm-pp-tabla tr.t-critico .im.debe .p { color: var(--pp-crit); font-weight: 700; }
.cm-ui .cm-pp-tabla tr.t-favor .vt small,
.cm-ui .cm-pp-tabla tr.t-favor .im.favor .p { color: var(--pp-navy-500); font-weight: 700; }

/* La nota del pago parcial (decisión 8 de §1): un renglón chico DEBAJO de la
   fila y alineado con el importe que explica, sólo en las 16 filas de 196 que
   la tienen. No es una columna «Total» (§7). */
.cm-ui .cm-pp-tabla tr.cm-pp-nota td {
    border-top: none; padding: 0 2.2mm 1.6mm;
    font-size: 6.3pt; font-style: italic; color: var(--pp-gris-2);
    text-align: right;
}

/* El total: el cliente va a sumar la columna y tiene que darle. */
.cm-ui .cm-pp-tabla tr.cm-pp-total td {
    border-top: .5mm solid var(--pp-navy);
    padding: 2.2mm; font-size: 8.6pt; font-weight: 700; color: var(--pp-navy);
}
.cm-ui .cm-pp-tabla tr.cm-pp-total.favor td { color: var(--pp-navy-500); }

/* La raya del dato que no hay. Nunca un `$ 0,00` que nadie contó. */
.cm-ui .cm-pp-raya { color: var(--pp-gris); }

/* --- 2.4b EL CUERPO DEL RECIBO (etapa 8) ----------------------------------- */
/* El importe en letras: la cifra escrita DOS VECES, que es lo que hace que un
   recibo sea un recibo. Se destaca sobre un fondo apenas gris para que se lea
   como una afirmación y no como una nota al pie. */
.cm-ui .cm-pp-letras {
    margin: 4mm 0 0; padding: 2mm 3mm;
    background: #f6f8fc;
    border: .25mm solid var(--pp-caja); border-radius: 2mm;
    font-size: 7.6pt; font-weight: 700; color: var(--pp-navy); line-height: 1.35;
}

/* LAS DOS CAJAS DE LA CUENTA, una al lado de la otra: «Valores recibidos» a la
   izquierda —que es lo que el cliente coteja contra su chequera— y «Aplicado a»
   a la derecha. `1fr 1fr` fijo y no `auto-fit`: en una hoja A4 siempre entran
   las dos, y dejarlas apilarse haría que el papel de la pantalla y el del PDF
   —que dibuja dos columnas siempre— tuvieran formas distintas. */
.cm-ui .cm-pp-cajas {
    margin-top: 4mm;
    display: grid; grid-template-columns: 1fr 1fr; gap: 5mm;
    align-items: start;
}
.cm-ui .cm-pp-caja {
    /* `min-width: 0` — el número de un cheque son diecisiete dígitos que no se
       parten por ningún lado, y un item de grid mide por defecto su
       `min-content`. Sin esto, la caja crece más que su columna y el importe se
       va afuera de la hoja. Lo pagó la pantalla de Cobranzas a 390 px. */
    min-width: 0;
    padding: 2mm 2.4mm 1.6mm;
    border: .25mm solid var(--pp-caja); border-radius: 2mm;
}
.cm-ui .cm-pp-caja h5 {
    margin: 0 0 1.2mm;
    font-size: 5.9pt; font-weight: 700; color: var(--pp-gris);
    letter-spacing: .08em; text-transform: uppercase;
}
.cm-ui .cm-pp-caja-nada {
    margin: 1mm 0; font-size: 6.6pt; font-style: italic; color: var(--pp-gris);
}
/* Un renglón: el rótulo y su detalle a la izquierda, el importe a la derecha. */
.cm-ui .cm-pp-ln {
    display: flex; justify-content: space-between; gap: 3mm; align-items: baseline;
    padding: 1.4mm 0;
    border-top: .2mm solid var(--pp-hair);
}
.cm-ui .cm-pp-ln:first-of-type { border-top: none; }
.cm-ui .cm-pp-ln .d { min-width: 0; }
.cm-ui .cm-pp-ln .rot { font-weight: 700; }
.cm-ui .cm-pp-ln .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* …y el número largo del cheque se parte donde sea: sin esto, `min-width: 0`
   sólo mueve el desborde adentro de la caja en vez de sacarlo de la hoja. */
.cm-ui .cm-pp-ln .d small {
    display: block; margin-top: .4mm;
    font-size: 6.3pt; color: var(--pp-gris); overflow-wrap: anywhere;
}
.cm-ui .cm-pp-ln .p {
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cm-ui .cm-pp-ln.t-favor .p { color: var(--pp-navy-500); font-weight: 700; }

/* El total de cada caja, con la misma raya navy que el del estado de cuenta: es
   la misma clase de suma y el cliente la va a verificar igual. */
.cm-ui .cm-pp-caja-tot {
    display: flex; justify-content: space-between; gap: 3mm;
    margin-top: 1.6mm; padding-top: 1.2mm;
    border-top: .4mm solid var(--pp-navy);
    font-size: 8pt; font-weight: 700; color: var(--pp-navy);
}
.cm-ui .cm-pp-caja-tot .p { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* «Quedan a cuenta» cuelga del total de lo aplicado, sin raya propia: es la
   diferencia entre las dos columnas, no un tercer total. Navy-500, nunca ámbar:
   es plata del cliente, no un aviso. */
.cm-ui .cm-pp-caja-tot.acuenta {
    margin-top: 1mm; padding-top: 0; border-top: none;
    font-size: 7.4pt; color: var(--pp-navy-500);
}

/* --- 2.5 Las tres cosas que la hoja dice con palabras ---------------------- */
/* Cero comprobantes pendientes SÍ es un papel, y es una noticia. */
.cm-ui .cm-pp-nada {
    margin-top: 6mm; padding: 9mm 8mm;
    border: .3mm dashed var(--pp-borde); border-radius: 2mm;
    text-align: center;
}
.cm-ui .cm-pp-nada h4 { margin: 0; font-size: 9.5pt; font-weight: 700; }
.cm-ui .cm-pp-nada p {
    margin: 2mm auto 0; max-width: 90mm;
    font-size: 7.4pt; color: var(--pp-gris-2); line-height: 1.5;
}

/* «Continúa en la hoja N de M» (§3.4) */
.cm-ui .cm-pp-sigue {
    margin: 3mm 0 0; padding-top: 2mm;
    border-top: .2mm dotted var(--pp-borde);
    text-align: right; font-style: italic;
    font-size: 6.6pt; color: var(--pp-gris);
}

/* La leyenda, al pie del cuerpo */
.cm-ui .cm-pp-leyenda {
    margin: 5mm 0 4mm; padding: 3mm 0 0;
    list-style: none;
    border-top: .2mm dotted var(--pp-borde);
    font-size: 6.6pt; color: var(--pp-gris); line-height: 1.5;
}
.cm-ui .cm-pp-leyenda li + li { margin-top: 1.2mm; }

/* --- 2.6 El cliente que NO tiene papel ------------------------------------ */
/* No es una hoja en cero: es un cartel. Un cero acá le diría «está al día» a un
   cliente del que no sabemos nada. Y como no es papel, se viste con la
   tipografía del módulo y no con la del documento. */
.cm-ui .cm-pp-cartel {
    margin: 0 auto; max-width: 460px; padding: 30px 26px;
    background: var(--surface); border-radius: var(--r-card);
    border: 1px dashed var(--hair-strong); box-shadow: var(--e1);
    text-align: center; color: var(--muted);
}
.cm-ui .cm-pp-cartel .material-symbols-outlined {
    font-size: 30px; color: var(--hair-strong);
}
.cm-ui .cm-pp-cartel h4 {
    margin: 8px 0 0; font-size: .95rem; font-weight: 700; color: var(--ink);
}
.cm-ui .cm-pp-cartel p {
    margin: 8px auto 0; max-width: 52ch;
    font-size: .78rem; line-height: 1.6; text-align: left;
}

/* =============================================================================
   3. IMPRIMIR desde el navegador
   =============================================================================
   El PDF llega en la etapa 3. Mientras tanto, si alguien manda a imprimir con
   el diálogo abierto, que salga la hoja y no el cromo del diálogo. No alcanza
   para esconder el resto de la aplicación —eso sería una regla fuera de
   `.cm-ui .cm-pp-*`— así que el papel de verdad sigue siendo el PDF. */
@media print {
    .cm-ui .cm-pp-velo { position: static; padding: 0; background: none; display: block; }
    .cm-ui .cm-pp-dlg {
        width: auto; max-height: none; overflow: visible;
        border-radius: 0; box-shadow: none;
    }
    .cm-ui .cm-pp-dlg-h, .cm-ui .cm-pp-dlg-p { display: none; }
    .cm-ui .cm-pp-dlg-b { overflow: visible; padding: 0; background: #fff; }
    .cm-ui .cm-pp-visor { zoom: 1 !important; }
    .cm-ui .cm-pp-hoja { box-shadow: none; break-after: page; }
    .cm-ui .cm-pp-papel .cm-pp-hoja + .cm-pp-hoja { margin-top: 0; }
}