/* =============================================================================
   Hoja de estilos de impresión — Fase 6. Aplica con media="print" a toda
   pantalla del panel (carta y A4; el tamaño real lo decide el diálogo de
   impresión del navegador, aquí solo se fija el margen). Reglas:
     - Nunca un fondo oscuro: fuerza tema claro sin importar data-theme,
       para que "imprimir en tema oscuro" nunca saque una hoja negra.
     - Oculta navegación, selectores y botones — nada interactivo tiene
       sentido en papel.
     - Deja ver SOLO el contenido: indicadores, semáforo, matriz, tablas.
   ============================================================================= */

@media print {
    @page {
        margin: 12mm;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    :root,
    :root[data-theme="dark"],
    :root:not([data-theme="light"]) {
        --bg: #ffffff;
        --bg-elevated: #ffffff;
        --paper: #ffffff;
        --ink: #12151c;
        --text: #12151c;
        --text-muted: #4b5160;
        --border: #cfd2d6;
        --border-strong: #9aa0a8;
        /* Medidor de anillo (Ronda 3B): trazo sólido en tinta sobre pista
           gris; se lee igual en una impresora sin color. */
        --anillo-trazo: var(--ink);
        --anillo-pista: var(--border);
    }

    /* El anillo siempre sale lleno en papel, aunque se imprima a media
       animación. */
    .anillo-trazo {
        stroke-dasharray: var(--anillo-valor) 100 !important;
        transition: none !important;
    }

    html, body {
        background: #ffffff !important;
        color: #12151c !important;
    }

    .barra-lateral,
    .fondo-menu-movil,
    .abrir-menu-movil,
    .encabezado .menu-usuario,
    .encabezado .selectores-encabezado,
    .matriz-toolbar,
    .matriz-lista-celda,
    .pestanas-control,
    .form-vista-matriz,
    .matriz-panel-ayuda,
    .lista-corta-flecha,
    .flash,
    .estado-vacio .icono-vacio,
    a.boton-texto,
    .boton,
    .boton-primario,
    .boton-secundario,
    button,
    input[type="submit"],
    [data-accion] {
        display: none !important;
    }

    .shell { display: block !important; }
    .contenido-panel { margin: 0 !important; padding: 0 !important; width: 100% !important; }
    .encabezado { border: none !important; padding: 0 0 8px !important; }

    .encabezado-impresion { display: flex !important; }

    .matriz-svg-envoltura { overflow: visible !important; }
    .matriz-svg { width: 100% !important; height: auto !important; }
    .matriz-punto { transition: none !important; }

    .kanban-tablero { display: block !important; }
    .kanban-columna { break-inside: avoid; margin-bottom: 10px; }
    .kanban-tarjeta { break-inside: avoid; }

    table, .tabla-densa { font-size: 10pt; }
    tr, .tarjeta, .kanban-tarjeta, .semaforo-fila, .top10-fila { break-inside: avoid; }

    a[href]::after { content: none !important; }
}

/* El encabezado de impresión vive oculto en pantalla y solo aparece en el
   media query de arriba — así cada pantalla de Fase 6 puede incluirlo una
   vez sin ensuciar la vista normal. */
.encabezado-impresion {
    display: none;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid #12151c;
    padding-bottom: 10px;
    margin-bottom: 16px;
}
.encabezado-impresion .marca-impresion { font-weight: 700; font-size: 1.1rem; }
.encabezado-impresion .meta-impresion { font-size: 0.8rem; color: #4b5160; text-align: right; }

/* =============================================================================
   Ronda 4 — documentos impresos (centro /imprimir). Una sola plantilla
   (app/views/impresion/plantilla.php) para matriz, registro, fichas, planes
   y comparación. Todo va bajo .documento-impreso: estas reglas no tocan la
   impresión de las pantallas del panel (las de arriba).

   En pantalla, la hoja se ve como papel (ancho real de carta o A4, márgenes
   de 12 mm). Al imprimir, la tabla marco repite encabezado y pie en cada
   página; las tablas de datos repiten sus encabezados de columna y nunca
   parten una fila; los títulos no quedan solos al pie.
   Colores: solo tokens (la página fija data-theme="light"). El único fondo
   de color es el semáforo.
   ============================================================================= */

.documento-impreso {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 10pt;
    line-height: 1.35;
}
.documento-impreso .mono { font-family: var(--font-mono); }

/* --- Barra de vista previa (solo pantalla) ------------------------------- */
.vista-previa-barra {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}
.vista-previa-texto a { color: var(--route-texto); }
.vista-previa-ayuda { display: block; color: var(--text-muted); font-size: 0.8125rem; margin-top: 2px; }
.vista-previa-barra .boton { flex-shrink: 0; min-height: 44px; }
.vista-previa-barra [data-imprimir][hidden] { display: none; } /* .boton le ganaba a [hidden] */

/* --- La hoja en pantalla ------------------------------------------------- */
.hojas {
    box-sizing: border-box;
    width: 215.9mm;
    margin: 16px auto 32px;
    padding: 12mm;
    background: var(--bg-elevated);
    box-shadow: var(--sombra-card);
}
.hoja-horizontal .hojas { width: 279.4mm; }
.papel-a4 .hojas { width: 210mm; }
.papel-a4.hoja-horizontal .hojas { width: 297mm; }
@media screen and (max-width: 1100px) {
    .hojas, .hoja-horizontal .hojas, .papel-a4 .hojas, .papel-a4.hoja-horizontal .hojas {
        width: auto;
        margin: 0;
        padding: 16px;
        box-shadow: none;
    }
    .vista-previa-barra { flex-direction: column; align-items: stretch; }
    /* La tabla marco no crece con su contenido (si no, toda la página se
       desbordaba a lo ancho); las tablas de datos se desplazan dentro. */
    .marco-impresion { table-layout: fixed; }
    .documento-impreso .imp-tabla { display: block; overflow-x: auto; }
    .imp-encabezado { flex-wrap: wrap; }
    .imp-documento, .imp-documento-nombre { text-align: left; }
    .imp-calificacion-bloque { min-width: 0; }
    .imp-definicion > div { grid-template-columns: 1fr; gap: 0; }
}
@media screen and (max-width: 700px) {
    /* "Ambas" en el teléfono: una matriz debajo de la otra, no de 170 px. */
    .imp-matrices { flex-direction: column; }
    .imp-matriz { max-width: none; width: 100%; }
}

/* --- Tabla marco: encabezado y pie que se repiten ------------------------ */
.marco-impresion { width: 100%; border-collapse: collapse; }
.marco-impresion > thead > tr > td,
.marco-impresion > tfoot > tr > td,
.marco-impresion > tbody > tr > td { padding: 0; border: 0; vertical-align: top; }
.marco-impresion > thead { display: table-header-group; }
/* Sin márgenes dentro del encabezado y el pie que se repiten: Chrome los
   recorta al medir la repetición y el pie final salía unos px más alto que
   lo reservado — cuando la última fila llenaba la hoja, el pie se iba solo a
   una hoja en blanco (revisión de interfaz). El aire va como relleno de la
   celda, que sí se mide igual en cada hoja. */
.marco-impresion > thead > tr > td { padding-bottom: 8px; }
.marco-impresion > tfoot > tr > td { padding-top: 8px; }
.marco-impresion > tfoot { display: table-footer-group; }
/* El renglón del marco SÍ se parte entre hojas: la regla general de arriba
   (tr { break-inside: avoid }, para las pantallas) lo volvía indivisible y
   Firefox mandaba todo el documento a la hoja 2, dejando la 1 en blanco. */
.marco-impresion > tbody > tr,
.marco-impresion > tbody > tr > td { break-inside: auto !important; page-break-inside: auto !important; }
/* Una hoja nueva (cada ficha) empieza en página nueva. */
.marco-impresion + .marco-impresion { break-before: page; page-break-before: always; }
@media screen {
    .marco-impresion + .marco-impresion { margin-top: 12mm; border-top: 1px dashed var(--border-strong); }
    .marco-impresion + .marco-impresion > thead > tr > td { padding-top: 12mm; }
}

.imp-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    padding-bottom: 5px;
    border-bottom: 1.5pt solid var(--ink);
}
.imp-marca { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
/* Ronda 4C, Parte C: el logo del cliente 75 % más grande (antes 30 × 120 px),
   sin perder la proporción y sin empujar el nombre del documento. */
.imp-logo { max-height: 53px; max-width: 210px; width: auto; height: auto; flex: none; object-fit: contain; }
.imp-marca > div { min-width: 0; }
.imp-empresa { display: block; font-family: var(--font-display); font-weight: 700; font-size: 11.5pt; }
.imp-ciclo, .imp-fecha { display: block; font-size: 8.5pt; color: var(--text-muted); }
.imp-documento { text-align: right; flex: 0 1 auto; min-width: 0; max-width: 38%; }
.imp-zona { white-space: nowrap; }
/* Ronda 4C, Parte B: los textos del encabezado se acomodan en renglones en
   lugar de empujar el margen derecho (nombre de empresa largo, "Impreso el…"
   con su zona). */
.imp-documento-nombre { display: block; font-weight: 600; font-size: 10pt; }
.imp-cerrado {
    margin: 6px 0 0;
    padding: 3px 8px;
    border: 1pt solid var(--ink);
    display: inline-block;
    font-weight: 600;
    font-size: 9pt;
}
.imp-pie {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
    border-top: 0.75pt solid var(--border-strong);
    font-size: 8pt;
    color: var(--text-muted);
}
.imp-pie-marca { font-weight: 600; color: var(--ink); }
/* Ronda 4C, Parte D: el logo del producto, discreto (el protagonista es el logo del cliente). */
.imp-pie-logo { display: block; max-height: 14px; max-width: 90px; width: auto; height: auto; object-fit: contain; }

/* --- Títulos y textos ---------------------------------------------------- */
.imp-titulo { break-after: avoid; page-break-after: avoid; margin-bottom: 8px; }
.imp-titulo h1 {
    font-family: var(--font-display);
    font-size: 15pt;
    line-height: 1.2;
    margin: 6px 0 2px;
}
.imp-sobretitulo { margin: 4px 0 0; font-size: 8.5pt; color: var(--text-muted); }
.imp-filtros { margin: 0; font-size: 9pt; color: var(--text-muted); }
.documento-impreso h2 {
    font-family: var(--font-display);
    font-size: 11pt;
    margin: 12px 0 4px;
    break-after: avoid;
    page-break-after: avoid;
}
.imp-tenue { color: var(--text-muted); }
.imp-vacio { color: var(--text-muted); font-style: italic; }
.mantener-juntos { break-inside: avoid; page-break-inside: avoid; }
.imp-rotulo { display: block; font-size: 8pt; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.imp-marca-apetito,
.imp-marca-vencido {
    display: inline-block;
    padding: 0 5px;
    border: 1pt solid var(--ink);
    border-radius: 3px;
    font-size: 7.5pt;
    font-weight: 700;
    white-space: nowrap;
}

/* --- Tablas de datos ----------------------------------------------------- */
.imp-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
    margin: 10px 0 4px;
}
.imp-tabla thead { display: table-header-group; }
.imp-tabla tr { break-inside: avoid; page-break-inside: avoid; }
.imp-tabla th {
    text-align: left;
    font-weight: 600;
    padding: 4px 6px;
    border-bottom: 1pt solid var(--ink);
    vertical-align: bottom;
}
.imp-tabla td { padding: 4px 6px; border-bottom: 0.5pt solid var(--border); vertical-align: top; }
.imp-tabla .imp-grupo th {
    font-family: var(--font-display);
    font-size: 10.5pt;
    border-bottom: 0;
    padding: 6px 0 2px;
}
.imp-tabla .col-numero, .imp-tabla .col-celda { width: 1%; white-space: nowrap; }
.imp-tabla .col-conteo { text-align: right; white-space: nowrap; width: 1%; }
.imp-tabla th.col-conteo { text-align: right; }
.imp-registro .col-nombre { min-width: 30mm; }
/* Ronda 4C, Parte B: las columnas de prosa con su parte del ancho. Sin la
   palabra más larga empujando, el reparto automático las dejaba de 2 cm. */
.imp-registro th.col-nombre { width: 24%; }
.imp-registro th.col-descripcion { width: 26%; }
.imp-registro th.col-dueno, .imp-registro th.col-area, .imp-registro th.col-categoria { width: 10%; }
.imp-registro th.col-icr, .imp-registro th.col-controles, .imp-registro th.col-planes { white-space: normal; }
.imp-registro-denso .medidor-barra { display: none; }
/* Revisión de interfaz (4C): con 8 columnas o más, anchos fijos (con
   table-layout: auto el navegador no respetaba los porcentajes y la prosa
   quedaba angosta); las cifras van justas y el resto es para la prosa. */
.imp-registro-denso { table-layout: fixed; }
.imp-registro-denso th.col-numero { width: 4.5%; }
.imp-registro-denso th.col-nombre { width: 18%; }
.imp-registro-denso th.col-categoria { width: 9%; }
.imp-registro-denso th.col-area { width: 8%; }
.imp-registro-denso th.col-dueno { width: 9.5%; }
.imp-registro-denso th.col-inherente, .imp-registro-denso th.col-residual { width: 8%; }
.imp-registro-denso th.col-icr { width: 7.5%; }
.imp-registro-denso th.col-controles { width: 7.5%; }
.imp-registro-denso th.col-planes { width: 6%; }
.imp-registro-denso td { overflow-wrap: anywhere; }
/* Encabezados: letra un poco menor y cortes con guion, nunca a media sílaba. */
.imp-registro-denso th { font-size: 7.5pt; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; white-space: normal; }
/* La cifra y la banda pueden ir en dos renglones: nunca se enciman con la columna de al lado. */
.imp-registro-denso .medidor { flex-wrap: wrap; gap: 2px; white-space: normal; }
/* Cortes de palabra con guion (el documento es lang="es"). */
.imp-registro td { hyphens: auto; -webkit-hyphens: auto; }
.imp-tabla .col-fecha, .imp-tabla .col-estado, .imp-tabla .col-tipo,
.imp-tabla .col-situacion, .imp-tabla .col-efectividad, .imp-tabla .col-icr { white-space: nowrap; width: 1%; }
.imp-tabla .col-medidor { white-space: nowrap; width: 1%; }
.imp-tabla .col-riesgo { width: 28%; }
.imp-tabla .col-persona { width: 16%; }
.imp-tabla .col-prosa { font-size: 8.5pt; }
.imp-tabla .col-banda { width: 1%; white-space: nowrap; }
.imp-lista-celdas .imp-inicio-celda td { border-top: 1pt solid var(--border-strong); }
.documento-impreso .medidor { gap: 6px; }
.documento-impreso .insignia { font-size: 8pt; }

/* --- Matriz en papel ----------------------------------------------------- */
.imp-matrices { display: flex; gap: 8mm; justify-content: center; align-items: flex-start; margin: 4px 0 6px; break-inside: avoid; page-break-inside: avoid; }
.imp-matriz { margin: 0; flex: 1 1 0; max-width: 165mm; min-width: 0; } /* min-width: Firefox no dejaba encogerse a las dos matrices "lado a lado" en hoja vertical (Ronda 4C) */
.imp-matrices-2 .imp-matriz { max-width: none; }
.imp-matriz figcaption { font-weight: 600; font-size: 10pt; text-align: center; margin-bottom: 2px; }
.matriz-impresa { display: block; width: 100%; height: auto; }
.mi-celda { stroke: var(--bg-elevated); stroke-width: 2; }
.mi-celda-bajo { fill: var(--r-low); }
.mi-celda-moderado { fill: var(--r-mod); }
.mi-celda-alto { fill: var(--r-high); }
.mi-celda-critico { fill: var(--r-crit); }
.mi-banda { font: 600 10px var(--font-body); }
.mi-banda-bajo, .mi-banda-critico { fill: var(--texto-sobre-color); }
.mi-banda-moderado, .mi-banda-alto { fill: var(--ink); }
.mi-pastilla { fill: var(--bg-elevated); stroke: var(--ink); stroke-width: 1.2; }
.mi-numero, .mi-conteo { font: 700 11px var(--font-mono); fill: var(--ink); text-anchor: middle; }
.mi-conteo { font-family: var(--font-body); font-size: 10.5px; }
.mi-remite { font: 600 9.5px var(--font-body); text-anchor: middle; }
.mi-eje { font: 11px var(--font-body); fill: var(--text-muted); }
.mi-eje-titulo { font: 600 11px var(--font-body); fill: var(--ink); }

.imp-leyenda {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 0;
    margin: 4px 0 8px;
    font-size: 9pt;
    break-inside: avoid;
    page-break-inside: avoid;
}
.imp-leyenda li { display: flex; align-items: center; gap: 5px; }
.imp-leyenda-muestra { width: 12px; height: 12px; border: 0.75pt solid var(--ink); }
.imp-leyenda-bajo { background: var(--r-low); }
.imp-leyenda-moderado { background: var(--r-mod); }
.imp-leyenda-alto { background: var(--r-high); }
.imp-leyenda-critico { background: var(--r-crit); }
.imp-leyenda .imp-leyenda-nota { flex-basis: 100%; color: var(--text-muted); font-size: 8.5pt; }

/* --- Fichas -------------------------------------------------------------- */
.imp-calificacion,
.imp-resumen-comparacion {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 8px 0;
    margin: 4px 0 6px;
    border-top: 0.5pt solid var(--border);
    border-bottom: 0.5pt solid var(--border);
}
.imp-calificacion-bloque { display: flex; flex-direction: column; gap: 3px; min-width: 150px; font-size: 9pt; }
.imp-calificacion-bloque > span { align-self: flex-start; }
.imp-definicion { margin: 0; display: grid; grid-template-columns: 1fr; gap: 4px; }
.imp-definicion > div { display: grid; grid-template-columns: 34mm 1fr; gap: 8px; }
.imp-definicion dt { font-weight: 600; font-size: 9pt; }
.imp-definicion dd { margin: 0; font-size: 9pt; }

@media print {
    html, body.documento-impreso { background: var(--bg-elevated) !important; }
    .vista-previa-barra { display: none !important; }
    .hojas { width: auto !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
    .documento-impreso table { font-size: inherit; }
    .documento-impreso .imp-tabla { font-size: 9pt; }
    .documento-impreso a[href]::after { content: none !important; }
}

/* Anchos fijos donde el reparto automático estrujaba la columna de prosa
   (la tabla de planes): la tabla toma los anchos de su <colgroup>. */
.imp-planes { table-layout: fixed; }
.imp-planes .ancho-riesgo { width: 19%; }
.imp-planes .ancho-persona { width: 12%; }
.imp-planes .ancho-fecha { width: 12%; }
.imp-planes .ancho-avance { width: 7%; }
.imp-planes .ancho-situacion { width: 11%; }
.imp-planes td, .imp-planes th { padding-left: 4px; padding-right: 4px; }
.imp-planes td { overflow-wrap: break-word; }
.imp-planes th { overflow-wrap: normal; hyphens: manual; }
.imp-planes .col-fecha, .imp-planes .col-situacion, .imp-planes .col-conteo { white-space: normal; width: auto; }

/* Pie al fondo de cada página impresa (ver plantilla.php). */
.imp-pie-fijo { display: none; }
@media print {
    .imp-pie-fijo { display: block; position: fixed; left: 0; right: 0; bottom: 0; }
    .marco-impresion > tfoot .imp-pie { visibility: hidden; }
}

/* Revisión de integridad: avisos de confiabilidad del registro impreso. */
.imp-nota { margin: 4px 0 0; font-size: 8.5pt; color: var(--ink); }
.imp-marca-fila { font-size: 8pt; color: var(--text-muted); white-space: nowrap; }

/* Ronda 4C, Parte B — un documento horizontal impreso en hoja vertical.
   Safari no respeta la orientación que pide @page (size: landscape) e imprime
   en vertical si nadie elige "Horizontal" en el diálogo; el registro con
   muchas columnas se salía del margen derecho. En hoja vertical, el registro
   pasa a columnas fijas, letra más chica y corte en cualquier punto: se ve
   apretado, pero nada se sale. El centro y la barra de vista previa piden
   elegir "Horizontal". */
@media print and (orientation: portrait) {
    .documento-registro .imp-registro { table-layout: fixed; font-size: 7.5pt; }
    .documento-registro .imp-registro th,
    .documento-registro .imp-registro td { overflow-wrap: anywhere; white-space: normal; padding: 3px 3px; }
    /* Los anchos fijos del registro denso (8+ columnas) se respetan también en vertical (revisión de interfaz, vuelta 2). */
    .documento-registro .imp-registro:not(.imp-registro-denso) th,
    .documento-registro .imp-registro:not(.imp-registro-denso) td { width: auto; }
    .documento-registro .imp-registro-denso th { overflow-wrap: normal; font-size: 6.75pt; }
    .documento-registro .imp-registro .medidor { flex-wrap: wrap; gap: 2px; white-space: normal; }
    .documento-registro .imp-registro .medidor-barra { display: none; }
    .documento-registro .imp-registro .imp-marca-apetito { white-space: normal; }
}