/* ============================================================
   Documentos: Informe Técnico y Plan de Acción
   ------------------------------------------------------------
   Rescatado íntegro de la versión anterior. Es intencionalmente
   distinto del resto de la aplicación: no es una pantalla, es un
   documento imprimible en papel carta, y sigue
   GUIA_TECNICA_DISEÑO_INFORMES.md y los dos PDF de referencia.
   Paleta propia (chocolate/crema) y sin radios ni sombras.
   ============================================================ */

/* ============================================================
   V5 — Documentos rediseñados (línea gráfica chocolate/crema)
   ============================================================ */

/* Paleta oficial de los informes — Flat Editorial.
   Sustituye a la chocolate/crema del Vol.5 por indicación de la Guía
   Técnica: lienzo blanco, formas rectilíneas, contraste por borde. */
:root {
    --choc: #1c1816;        /* chocolate / carbón cálido — corporativo */
    --choc-soft: #443e3b;   /* pizarra cálido — texto secundario */
    --doc-gold: #c59b27;    /* dorado arquitectónico — acento */
    --doc-gold-dark: #a07a1b;
    --doc-muted: #78716c;   /* metadatos y divisores */
    --bg-white: #ffffff;    /* lienzo del documento */
    --bg-subtle: #fafaf9;   /* tarjetas secundarias */

    /* Alias de la paleta anterior: el resto del CSS los sigue nombrando.
       Apuntan a los valores nuevos para no tocar 40 reglas de golpe. */
    --crema: var(--bg-subtle);
    --crema-2: var(--doc-muted);
    --hueso: var(--bg-white);
    --font-doc: 'Outfit', 'Archivo', sans-serif;

    /* Estas cinco vivían en la hoja de la aplicación. Ahora se definen
       aquí: el documento tiene su propio sistema visual y no debe
       romperse si la paleta de las pantallas cambia. */
    --font-display: 'Outfit', 'Inter Tight', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Prioridad, sobre papel blanco: se usan como fondo con texto oscuro. */
    --pr-alta:  #e0836a;
    --pr-media: #e6b95f;
    --pr-baja:  #9fb0a6;
    --on-pr:    #2b1a10;
}

/* ---------- Regla de formas rectilíneas (90°) ----------
   Sin esquinas redondeadas y sin sombras difuminadas: la
   tridimensionalidad se logra con bordes nítidos de 1 y 2 px. */
.plan-doc, .plan-doc * {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.plan-doc { font-family: var(--font-body); }
.plan-doc h1, .plan-doc h2, .plan-doc h3, .plan-doc .p-firm {
    font-family: var(--font-doc); font-weight: 600;
}
.plan-doc h1 { font-weight: 700; }

/* Insignia ejecutiva del tipo de informe, bajo el título. */
.report-type-banner {
    display: inline-flex; align-items: baseline; gap: .6rem;
    margin-top: .7rem; padding: .4rem .9rem;
    background: var(--choc); color: var(--bg-white);
    border-left: 3px solid var(--doc-gold);
}
.report-type-banner span {
    font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--doc-gold);
}
.report-type-banner strong {
    font-family: var(--font-doc); font-size: .84rem; font-weight: 600;
}

/* ============================================================
   INFORME TÉCNICO — maquetación editorial (Guía Técnica)
   ============================================================ */

.it { background: var(--bg-white); color: var(--choc); font-family: var(--font-body); }

/* Cintillo superior: firma a la izquierda, tipo de dosier a la derecha. */
.it-topbar {
    display: flex; justify-content: space-between; gap: 1rem;
    font-size: .56rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--doc-muted); padding-bottom: .5rem;
    border-bottom: 1px solid #e7e5e4; margin-bottom: 1.1rem;
}
.it-topbar b { color: var(--doc-gold); font-weight: 700; }

/* Cabecera */
.it-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.4rem; }
.it-firma {
    font-family: var(--font-doc); font-weight: 600; font-size: .8rem;
    letter-spacing: .26em; text-transform: uppercase; color: var(--choc);
}
.it-h1 {
    font-family: var(--font-doc); font-weight: 700; color: var(--choc);
    font-size: 1.62rem; line-height: 1.15; margin: .25rem 0 0;
}
.it-sub { color: var(--choc-soft); font-size: .82rem; margin: .55rem 0 0; }

/* Distintivo de modalidad: contorno en consultoría, relleno en workshop. */
.it-modo {
    font-size: .6rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; padding: .38rem .7rem; white-space: nowrap;
    border: 1px solid var(--choc); color: var(--choc);
}
.it-modo--relleno { background: var(--doc-gold); border-color: var(--doc-gold); color: var(--bg-white); }

/* Franja de metadatos: cuatro columnas con divisores */
.it-meta {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid #d6d3d1; margin: 1rem 0 1.4rem;
}
.it-meta > div { padding: .55rem .8rem; border-left: 1px solid #d6d3d1; }
.it-meta > div:first-child { border-left: 0; }
.it-meta dt {
    font-size: .53rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--doc-muted); margin-bottom: .2rem;
}
.it-meta dd { margin: 0; font-size: .82rem; font-weight: 600; color: var(--choc); }

/* Encabezado de sección: cuadro numerado + título + regla */
.it-sec { margin-bottom: 1.15rem; }
.it-sec-h {
    display: flex; align-items: center; gap: .6rem;
    border-bottom: 2px solid var(--choc); padding-bottom: .4rem; margin-bottom: .7rem;
}
.it-num {
    width: 19px; height: 19px; flex: 0 0 19px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--choc); color: var(--bg-white);
    font-family: var(--font-doc); font-weight: 700; font-size: .68rem;
}
.it-sec-h h2 {
    font-family: var(--font-doc); font-weight: 600; font-size: 1rem;
    color: var(--choc); margin: 0; border: 0; padding: 0; letter-spacing: 0;
    text-transform: none; background: none;
}

/* Resumen ejecutivo y CTA: bloque oscuro con filo dorado */
.it-oscuro {
    background: var(--choc); color: #e7e5e4;
    border-left: 5px solid var(--doc-gold); padding: .9rem 1.1rem;
    font-size: .8rem; line-height: 1.6;
}

/* Tarjeta de área */
.it-card { border: 1px solid #d6d3d1; padding: .8rem .9rem .9rem; margin-bottom: .8rem; }
.it-card-h {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: .6rem;
}
.it-card-h b { font-family: var(--font-doc); font-weight: 600; font-size: .92rem; color: var(--choc); }
.it-card-h .val { font-family: var(--font-doc); font-size: .9rem; color: var(--choc-soft); }

.it-chip {
    font-size: .55rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; padding: .22rem .5rem; border: 1px solid;
}
.it-chip.pr-alta { color: #b04a2a; border-color: #e0836a; background: #fdf4f1; }
.it-chip.pr-media { color: #8a6410; border-color: #e6b95f; background: #fdf9ef; }
.it-chip.pr-baja { color: #4f6357; border-color: #9fb0a6; background: #f4f7f5; }

/* Pareja de fotografías con cintillo inferior */
.it-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.it-fotos--4 { grid-template-columns: repeat(4, 1fr); }
.it-fotos--4 .it-foto img { height: 106px; }
.it-foto { position: relative; overflow: hidden; }
.it-foto img { width: 100%; height: 128px; object-fit: cover; display: block; }
.it-foto figcaption {
    position: absolute; left: 0; bottom: 0;
    background: rgba(28, 24, 22, .88); color: var(--bg-white);
    font-size: .52rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .26rem .5rem;
}
.it-sinfoto {
    height: 128px; border: 1px dashed #d6d3d1; color: var(--doc-muted);
    font-size: .7rem; display: flex; align-items: center; justify-content: center;
}

/* Bloque etiquetado (diagnóstico, objetivo, brecha, observación) */
.it-nota { background: var(--bg-subtle); border: 1px solid #e7e5e4; padding: .55rem .7rem; margin-top: .55rem; }
.it-nota dt {
    font-size: .53rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--doc-muted); margin-bottom: .18rem;
}
.it-nota dd { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--choc-soft); }

/* Comparativa: dos columnas con flecha dorada */
.it-cmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; }
.it-cmp-lbl {
    font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--doc-muted); margin-bottom: .3rem; font-weight: 700;
}
.it-flecha { color: var(--doc-gold); font-size: 1.35rem; line-height: 1; }

/* Matriz de tres columnas (hallazgos, requerimientos) */
.it-matriz { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.it-mat-col { border: 1px solid #d6d3d1; border-top: 3px solid var(--choc); padding: .6rem .7rem .7rem; }
.it-mat-col.oro { border-top-color: var(--doc-gold); }
.it-mat-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.it-mat-h b { font-family: var(--font-doc); font-weight: 600; font-size: .8rem; color: var(--choc); }
.it-mat-col p { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--choc-soft); }

/* Ruta: seis etapas, las cumplidas en oscuro */
.it-ruta { display: grid; grid-template-columns: repeat(6, 1fr); }
.it-etapa { border: 1px solid #d6d3d1; border-left: 0; padding: .5rem .3rem; text-align: center; }
.it-etapa:first-child { border-left: 1px solid #d6d3d1; }
.it-etapa .n { font-family: var(--font-doc); font-weight: 700; font-size: .74rem; color: var(--doc-gold); }
.it-etapa .t { font-size: .62rem; color: var(--doc-muted); margin-top: .1rem; }
.it-etapa.on { background: var(--choc); border-color: var(--choc); }
.it-etapa.on .n { color: var(--doc-gold); }
.it-etapa.on .t { color: var(--bg-white); font-weight: 600; }

/* Sección 8: bloque horizontal compacto con botón y QR */
.it-cta { display: flex; align-items: center; gap: 1rem; }
.it-cta-txt { flex: 1; }
.it-cta-h {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-doc); font-weight: 600; font-size: .92rem;
    color: var(--doc-gold); margin-bottom: .35rem;
}
.it-cta-h .it-num { background: var(--doc-gold); color: var(--choc); }
.it-cta p { margin: 0 0 .6rem; font-size: .78rem; line-height: 1.55; color: #d6d3d1; }
.it-wa {
    display: inline-block; background: var(--doc-gold); color: var(--choc);
    font-family: var(--font-doc); font-weight: 700; font-size: .72rem;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .5rem .9rem; text-decoration: none;
}
.it-qr { text-align: center; flex: 0 0 auto; }
.it-qr svg { display: block; background: var(--bg-white); padding: 4px; }
.it-qr span {
    display: block; font-size: .5rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--doc-gold); margin-top: .25rem;
}

@media print {
    .it-card, .it-cmp, .it-matriz, .it-ruta, .it-cta, .it-fotos, .it-sec-h {
        page-break-inside: avoid !important; break-inside: avoid !important;
    }
    .it-sec-h { break-after: avoid !important; }
}

@media (max-width: 720px) {
    .it-meta, .it-matriz { grid-template-columns: 1fr; }
    .it-meta > div { border-left: 0; border-top: 1px solid #d6d3d1; }
    .it-meta > div:first-child { border-top: 0; }
    .it-ruta { grid-template-columns: repeat(3, 1fr); }
    .it-cmp { grid-template-columns: 1fr; }
    .it-cta { flex-direction: column; align-items: flex-start; }
}

/* ---------- Superficies del documento ----------
   Lienzo blanco en las dos modalidades; las tarjetas se distinguen por
   un fondo apenas cálido y un borde nítido, no por relieve. */
.doc-v5-plan, .doc-v5-informe { background: var(--bg-white); color: var(--choc); }

.doc-v5-plan .plan-box, .doc-v5-informe .plan-box {
    background: var(--bg-subtle);
    border: 1px solid #e7e5e4;
    border-top: 2px solid var(--choc);
}
.doc-v5-plan .plan-box h2, .doc-v5-informe .plan-box h2 {
    color: var(--choc); border-top: 0; border-bottom: 1px solid #e7e5e4;
    font-family: var(--font-doc); font-weight: 600;
}
.doc-v5-plan .plan-sec > h3, .doc-v5-informe .plan-sec > h3 {
    color: var(--choc); border-top: 2px solid var(--doc-gold);
    border-bottom: 1px solid #e7e5e4; background: transparent;
}
.doc-v5-plan .plan-box h4, .doc-v5-informe .plan-box h4 { color: var(--doc-muted); }
.doc-v5-plan .plan-box p, .doc-v5-plan .plan-box li,
.doc-v5-informe .plan-box p, .doc-v5-informe .plan-box li { color: var(--choc-soft); }

.plan-doc .p-head { border-bottom: 2px solid var(--choc); }
.plan-doc .p-firm { color: var(--choc); letter-spacing: .22em; }
.plan-doc .p-meta { color: var(--doc-muted); }

/* Acentos dorados: números de sección, flechas y el botón principal. */
.doc-v5-plan .cta-box, .doc-v5-informe .cta-box {
    border: 2px solid var(--doc-gold); background: var(--bg-subtle);
}
.doc-v5-plan .cta-label, .doc-v5-informe .cta-label { color: var(--doc-gold); }
.doc-v5-plan .cta-btn, .doc-v5-informe .cta-btn {
    background: var(--choc); color: var(--bg-white); font-family: var(--font-doc);
}
.doc-v5-plan .cta-note, .doc-v5-informe .cta-note { color: var(--doc-muted); }
.cmp-flecha { color: var(--doc-gold); }
.area-doc .area-sub { color: var(--doc-gold); }
.info-pin { border-color: var(--doc-gold); }
.info-lbl { color: var(--choc); }

/* Alturas fotográficas deterministas: la guía fija 115–130 px para que
   una tarjeta quepa entera y no deje media hoja en blanco. */
.doc-grid-fotos img { height: 128px; }
.cmp-lado img, .cmp-vacio { height: 128px; }

/* Barra superior con fecha/hora (izq) + nota de demo (der, oculta al imprimir) */
.doc-topline {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .62rem; color: #9c8a76; margin-bottom: 1rem;
}
.doc-demo-note { color: #b6a690; }

/* Encabezado del documento en chocolate */
.doc-v5-plan .p-head, .doc-v5-informe .p-head {
    border-bottom: 2px solid var(--choc); text-align: center;
    padding-bottom: 1rem; margin-bottom: 1.6rem;
}
.doc-v5-plan .p-firm, .doc-v5-informe .p-firm { color: var(--choc); }
.doc-v5-plan .p-head h1, .doc-v5-informe .p-head h1 { color: var(--choc); }
.doc-v5-plan .p-meta, .doc-v5-informe .p-meta { color: var(--choc-soft); }

/* Plan de Acción: fondo blanco, cajas crema, bordes biselados */
.doc-v5-plan { background: #ffffff; color: var(--choc); }
.doc-v5-plan .plan-box {
    background: var(--crema); border: 1px solid var(--crema-2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(74,46,32,.08);
    border-radius: 8px;
}
/* Informe: fondo crema, cajas blanco hueso */
.doc-v5-informe { background: var(--crema); color: var(--choc); }
.doc-v5-informe .plan-box {
    background: var(--hueso); border: 1px solid #e7dcc4;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(74,46,32,.08);
    border-radius: 8px;
}

/* Líneas y textos chocolate; etiquetas más grandes que los datos (Vol.5) */
.doc-v5-plan .plan-box h2, .doc-v5-informe .plan-box h2 {
    color: var(--choc); border-top: 3px solid var(--choc); border-bottom: 1px solid #d8c9ac;
}
.doc-v5-plan .plan-sec > h3, .doc-v5-informe .plan-sec > h3 {
    color: var(--choc); border-top: 3px solid var(--choc-soft); border-bottom: 1px solid #d8c9ac;
    background: transparent;
}
.doc-v5-plan .plan-box h4, .doc-v5-informe .plan-box h4 {
    color: var(--choc-soft); font-size: .72rem; letter-spacing: .12em; font-weight: 700;
}
.doc-v5-plan .plan-box p, .doc-v5-plan .plan-box li,
.doc-v5-informe .plan-box p, .doc-v5-informe .plan-box li {
    color: #3a2519; font-size: .82rem;
}

.dg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }

/* Infografía de procesos numerada (crema → chocolate) */
.infografia { display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; justify-content: center; padding: 1rem .5rem; position: relative; }
.info-step { width: 118px; text-align: center; }
.info-pin {
    width: 46px; height: 46px; margin: 0 auto .5rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--crema) calc((1 - var(--k)) * 100%), var(--choc));
    border: 3px solid var(--choc-soft);
    box-shadow: 0 4px 10px rgba(74,46,32,.18);
}
.info-pin span {
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    color: color-mix(in srgb, var(--choc) calc((1 - var(--k)) * 100%), var(--hueso));
}
.info-lbl { font-size: .72rem; color: var(--choc); line-height: 1.3; }

/* Cuadrícula de fotos con pie sombreado */
.doc-grid-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .5rem; }
.doc-grid-fotos figure { position: relative; margin: 0; border-radius: 6px; overflow: hidden; }
.doc-grid-fotos img { width: 100%; height: 150px; object-fit: cover; display: block; }
.doc-grid-fotos figcaption {
    position: absolute; left: 0; bottom: 0; right: 0;
    background: linear-gradient(transparent, rgba(74,46,32,.75));
    color: #fff; font-size: .66rem; padding: .5rem .5rem .3rem; text-align: left;
}
.doc-nofotos { color: #9c8a76; font-size: .78rem; }

/* CTA "Próximo Paso" del Vol.5 */
.doc-v5-plan .cta-box, .doc-v5-informe .cta-box {
    border: 2px dashed var(--choc-soft); background: rgba(244,234,214,.5);
}
.doc-v5-plan .cta-label, .doc-v5-informe .cta-label { color: var(--choc-soft); }
.doc-v5-plan .cta-btn, .doc-v5-informe .cta-btn { background: var(--choc); color: var(--hueso); }
.doc-v5-plan .cta-note, .doc-v5-informe .cta-note { color: var(--choc-soft); }

.alcance-box p { font-style: italic; }


/* ---------- Informe visual: tarjeta por área ---------- */

.area-doc h2 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pr-tag {
    font-size: .62rem; letter-spacing: .1em; padding: .18rem .55rem;
    border-radius: 999px; color: #2b1a10; font-weight: 700; white-space: nowrap;
}
.pr-tag.pr-alta { background: var(--pr-alta); }
.pr-tag.pr-media { background: var(--pr-media); }
.pr-tag.pr-baja { background: var(--pr-baja); }

.area-doc .area-dolor {
    font-style: italic; color: var(--choc-soft) !important;
    border-left: 2px solid #d8c9ac; padding-left: .7rem; margin: 0 0 .9rem;
}
.area-doc .area-sub {
    font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--choc-soft); margin: 1rem 0 .45rem; font-weight: 700;
    border: 0; padding: 0; background: none;
}
.area-doc .area-sub:first-of-type { margin-top: .3rem; }

/* La comparativa: la cocina que hay frente a la cocina que quiere.
   Es el argumento de venta del informe entero. */
.cmp {
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: .6rem; align-items: center; margin: .5rem 0 .8rem;
}
.cmp-lado { margin: 0; }
.cmp-lado figcaption {
    font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--choc-soft); margin-bottom: .3rem; font-weight: 700;
}
.cmp-lado img {
    width: 100%; height: 210px; object-fit: cover; display: block;
    border-radius: 6px; border: 1px solid #e0d3b8;
}
.cmp-vacio {
    height: 210px; display: flex; align-items: center; justify-content: center;
    border: 1px dashed #d8c9ac; border-radius: 6px;
    color: #b6a690; font-size: .72rem;
}
.cmp-flecha { color: var(--choc-soft); font-size: 1.5rem; line-height: 1; }

.hallazgos { list-style: none; padding: 0; margin: 0; }
.hallazgos li { margin-bottom: .5rem; }
.hallazgos li b {
    display: block; font-size: .64rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--choc-soft);
}

@media print {
    .area-doc { break-inside: auto; }
    .cmp { break-inside: avoid; }
    .cmp-lado img, .cmp-vacio { height: 175px; }
    .area-doc .area-sub { break-after: avoid; }
}

@media (max-width: 640px) {
    .cmp { grid-template-columns: 1fr; }
    .cmp-flecha { transform: rotate(90deg); justify-self: center; }
}

/* ---------- Aprovechamiento del espacio ----------
   Datos Generales son siete campos cortos: en dos columnas ocupaban
   cuatro filas de aire. En tres, tres. */
.doc-v5-plan .dg-grid, .doc-v5-informe .dg-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: .15rem 1.4rem;
}
.doc-v5-plan .dg-grid h4, .doc-v5-informe .dg-grid h4 { margin-top: .55rem; }

/* Dos secciones cortas comparten fila en vez de una franja cada una. */
.doc-v5-plan .plan-cols, .doc-v5-informe .plan-cols {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem; margin-bottom: 1.3rem; align-items: start;
}

.doc-v5-plan .plan-sec, .doc-v5-informe .plan-sec { margin-bottom: 1.3rem; }
.doc-v5-plan .plan-box, .doc-v5-informe .plan-box { padding: 1rem 1.15rem; }

/* Fotos medianas: 150px se veían miniatura en una hoja carta. */
.doc-grid-fotos img { height: 190px; }

@media print {
    /* Márgenes del papel: sin esto el navegador pone los suyos y el
       documento queda estrecho y descentrado. */
    @page { size: letter portrait; margin: 0.4in 0.5in; }

    .doc-demo-note { display: none !important; }
    .doc-v5-informe { break-before: page; }

    /* --- El corte de página, que era el problema ---
       'break-inside: avoid' sobre una caja alta la empuja ENTERA a la hoja
       siguiente y deja media página en blanco. Las cajas largas ahora sí
       pueden partirse; lo que se mantiene unido es lo que se ve mal roto:
       una foto a la mitad, o un título huérfano al pie de la hoja. */
    .doc-v5-plan .plan-box, .doc-v5-informe .plan-box { break-inside: auto; }
    .doc-v5-plan .plan-cols > .plan-box,
    .doc-v5-informe .plan-cols > .plan-box { break-inside: avoid; }

    /* Flujo continuo, sin saltos forzados: obligar un salto deja el resto
       de la hoja en blanco. Solo se protege lo que se ve mal partido. */
    .doc-grid-fotos, .doc-grid-fotos figure,
    .area-doc, .cmp, .infografia, .cta-box, .hallazgos {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    /* La tarjeta de área sí puede partirse si por sí sola no cabe en una
       hoja; de lo contrario empujaría una página entera vacía. */
    .area-doc { break-inside: auto !important; }

    /* Un encabezado nunca se queda solo al final de una hoja. */
    .doc-v5-plan h2, .doc-v5-plan h3, .doc-v5-plan h4,
    .doc-v5-informe h2, .doc-v5-informe h3, .doc-v5-informe h4 {
        break-after: avoid; break-inside: avoid;
    }
    /* Ni un párrafo suelta una línea huérfana. */
    .doc-v5-plan p, .doc-v5-plan li,
    .doc-v5-informe p, .doc-v5-informe li { orphans: 3; widows: 3; }

    /* El documento ES su color. Los navegadores descartan los fondos al
       imprimir salvo que se les diga lo contrario, y sin esto el papel perdía
       las cajas crema, los pines de la infografía, las etiquetas de prioridad
       —Alta y Baja salían idénticas— y el botón del próximo paso, que queda
       en crema sobre blanco: invisible. */
    .plan-doc, .plan-doc * {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }

    /* Nada de la aplicación se cuela en el documento del cliente. */
    #toast-wrap, #estado-sinc, .modal-overlay { display: none !important; }
    .shell { min-height: 0; }
    .doc-grid-fotos img { height: 165px; }
}

@media (max-width: 900px) {
    .doc-v5-plan .dg-grid, .doc-v5-informe .dg-grid { grid-template-columns: 1fr 1fr; }
    .doc-v5-plan .plan-cols, .doc-v5-informe .plan-cols { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    /* Los selectores de .doc-v5-* tienen más especificidad y las media
       queries no aportan ninguna: sin nombrarlos aquí, los Datos Generales
       se quedaban en dos columnas en el celular del cliente. */
    .dg-grid, .doc-grid-fotos,
    .doc-v5-plan .dg-grid, .doc-v5-informe .dg-grid { grid-template-columns: 1fr; }
}