/* document.css — hoja del DOCUMENTO CANÓNICO de venta (factura/boleta/nota
 * de venta), compartida por sus tres superficies:
 *
 *   1. La previsualización del checkout (POS), inyectada dentro del modal.
 *   2. La representación impresa HTML (`/cpe/document/<id>/print`,
 *      `/pos/sale/<id>/ticket`).
 *   3. El PDF de esa misma representación.
 *
 * Fuente ÚNICA de estilo del documento: el navegador la carga con <link> y el
 * PDF la INLINEA leyendo este mismo archivo desde `dist/`
 * (`core/print_assets.py`). No hay una segunda copia que mantener — a
 * diferencia de quotation.css, que sí tiene su gemela dentro del template.
 *
 * ─── Cómo está organizada ────────────────────────────────────────────────
 *
 *   BASE            → geometría del PAPEL (A4). Es lo que ve el PDF y lo que
 *                     sale por la impresora: anchos fijos, dos columnas,
 *                     11px. No se toca por ancho de viewport.
 *   @media screen   → la MISMA hoja adaptada a una pantalla: tipografía algo
 *                     mayor (un papel se lee a 20 cm, un monitor no) y ancho
 *                     fluido.
 *   @media screen and (max-width: 639px)
 *                   → reflow de celular: el documento se REORGANIZA (emisor
 *                     arriba, caja fiscal debajo, totales a una columna). NO
 *                     se encoge el A4: escalar una hoja de 760px a 375px
 *                     comprime el encabezado hasta volverlo ilegible, que es
 *                     exactamente el problema que esto resuelve.
 *
 * xhtml2pdf ignora por completo los bloques `@media screen` (verificado: el
 * PDF sale byte a byte idéntico con y sin ellos), así que el papel conserva su
 * geometría sin necesidad de una segunda hoja.
 *
 * ─── Restricciones que explican por qué está escrita así ─────────────────
 *
 *   - xhtml2pdf no entiende flexbox ni grid: la geometría BASE va con <table>
 *     y anchos en porcentaje. El reflow de pantalla sí puede usar flex —
 *     vive en un @media que el PDF nunca lee.
 *   - Todo cuelga de `.fdoc` / `.fdoc-page`. El cuerpo se inyecta DENTRO del
 *     POS, que carga Tailwind: sin ese prefijo, el preflight (selectores de
 *     elemento, especificidad 0,0,1) le ganaría a reglas sueltas y el
 *     documento se vería distinto según dónde se renderice. Con la clase
 *     adelante, nada de la app lo alcanza. Por el mismo motivo `body` NO se
 *     estiliza acá: eso es `.fdoc-page`, que sólo lleva la página imprimible.
 *   - Sin atributos `style=` en el markup: la CSP del POS no los admite
 *     (SECURITY.md §17) y en la vista imprimible pasarían inadvertidos.
 *   - **Sin `:not()` ni pseudo-funciones de selector, ni siquiera dentro de un
 *     `@media screen`**: el parser CSS de xhtml2pdf lee TODA la hoja antes de
 *     evaluar los media, y un `td:not(.fdoc-label)` le hace lanzar
 *     `CSSParseError` — o sea, deja sin PDF a un comprobante fiscal por una
 *     regla que ese PDF ni siquiera iba a aplicar. Hay test que parsea esta
 *     hoja con el motor del PDF (`test_document_stylesheet_parses_for_pdf`).
 */

/* ═══ BASE — geometría del papel (PDF e impresión) ═══════════════════════ */

/* Sólo la PÁGINA imprimible standalone; el fragmento embebido en el POS no
   toca el body de la app. */
.fdoc-page {
    margin: 0;
    padding: 12px;
    background: #fff;
}

.fdoc {
    max-width: 760px;
    margin: 0 auto;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.35;
    color: #111;
    text-align: left;
}

.fdoc h1,
.fdoc h2,
.fdoc p {
    margin: 0;
}

.fdoc table {
    width: 100%;
    border-collapse: collapse;
}

.fdoc td,
.fdoc th {
    background: transparent;
}

/* --- Encabezado: emisor + caja del comprobante ------------------------- */

.fdoc-head td {
    vertical-align: top;
}

.fdoc-emisor h2 {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 4px;
}

.fdoc-emisor p {
    font-size: 11px;
    margin: 1px 0;
    color: #333;
}

.fdoc-box {
    width: 34%;
    border: 2px solid #111;
    text-align: center;
    padding: 8px 6px;
}

.fdoc-box .fdoc-ruc {
    font-size: 12px;
    font-weight: bold;
}

.fdoc-box .fdoc-title {
    font-size: 13px;
    font-weight: bold;
    margin: 4px 0;
}

.fdoc-box .fdoc-number {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Rótulo del estado: reemplaza al número mientras el documento no se emite.
 * Ámbar y en negativo — el mismo cromo del modal de previsualización (ADR
 * 0059): en una caja, confundir "esto va a pasar" con "esto ya pasó" es el
 * error caro. */
.fdoc-box .fdoc-status {
    display: inline-block;
    background: #d97706;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 3px 10px;
}

.fdoc-box .fdoc-pending {
    font-size: 9px;
    color: #92400e;
    margin-top: 4px;
}

/* --- Bloques y metadatos ---------------------------------------------- */

.fdoc-section {
    margin-top: 12px;
}

.fdoc-meta td {
    font-size: 11px;
    padding: 1px 0;
    vertical-align: top;
}

.fdoc-meta .fdoc-label {
    color: #555;
    width: 22%;
}

.fdoc-nota {
    margin-top: 10px;
    padding: 6px 8px;
    border: 1px solid #d97706;
    background: #fffbeb;
    font-size: 10px;
}

/* --- Ítems ------------------------------------------------------------ */

.fdoc-items thead th {
    background: #f0f0f0;
    border: 1px solid #999;
    padding: 5px 6px;
    font-size: 10px;
    font-weight: bold;
    text-align: left;
}

.fdoc-items thead th.fdoc-right {
    text-align: right;
}

.fdoc-items tbody td {
    border: 1px solid #ccc;
    padding: 4px 6px;
    font-size: 10px;
    vertical-align: top;
}

.fdoc-items tbody td.fdoc-right {
    text-align: right;
}

/* Nombres largos de producto (el catálogo los tiene, y sin código de barras
   son la única forma de distinguirlos): parten de línea en vez de estirar la
   tabla. */
.fdoc-items tbody td.fdoc-desc {
    word-break: break-word;
}

.fdoc-items .fdoc-qty {
    width: 14%;
}

.fdoc-items .fdoc-price {
    width: 19%;
}

.fdoc-items .fdoc-amount {
    width: 21%;
}

.fdoc-items .fdoc-note {
    color: #777;
    font-size: 9px;
}

/* --- Totales ---------------------------------------------------------- */

.fdoc-summary {
    margin-top: 10px;
}

.fdoc-summary > tbody > tr > td {
    vertical-align: top;
}

.fdoc-leyenda {
    font-size: 11px;
    padding-right: 12px;
}

.fdoc-tag {
    color: #555;
    font-size: 10px;
}

.fdoc-totals-cell {
    width: 42%;
}

.fdoc-totals td {
    padding: 3px 6px;
    font-size: 11px;
    border-bottom: 1px solid #eee;
}

.fdoc-totals td.fdoc-right {
    text-align: right;
    white-space: nowrap;
}

.fdoc-totals tr.fdoc-grand td {
    border-top: 2px solid #111;
    border-bottom: none;
    font-weight: bold;
    font-size: 13px;
}

/* --- Pie: condiciones de la operación, avisos y bloque fiscal ---------- */

.fdoc-terms {
    margin-top: 10px;
    font-size: 10px;
    color: #333;
}

.fdoc-terms p {
    margin: 1px 0;
}

.fdoc-warning {
    margin-top: 8px;
    color: #b91c1c;
    font-weight: bold;
    font-size: 12px;
}

.fdoc-pending-note {
    margin-top: 10px;
    padding: 6px 8px;
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #92400e;
    font-size: 10px;
}

.fdoc-foot {
    margin-top: 14px;
}

.fdoc-foot td {
    vertical-align: top;
}

.fdoc-foot .fdoc-qrcell {
    width: 130px;
    text-align: center;
}

.fdoc-foot .fdoc-qrcell img {
    width: 120px;
    height: 120px;
}

.fdoc-foot .fdoc-verify {
    font-size: 10px;
    color: #444;
}

.fdoc-foot .fdoc-hash {
    font-size: 9px;
    color: #777;
    word-break: break-all;
    margin-top: 4px;
}

/* --- Acciones (sólo la página imprimible; no van al PDF ni al modal) --- */

.fdoc-actions {
    margin-top: 18px;
    text-align: center;
}

.fdoc-actions a {
    display: inline-block;
    padding: 7px 14px;
    margin: 0 4px;
    background: var(--ft-primary, #163b73);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 12px;
}

@media print {
    .fdoc-actions {
        display: none;
    }

    .fdoc-page {
        padding: 0;
    }
}

/* ═══ PANTALLA — misma hoja, tipografía de monitor ═══════════════════════
 *
 * Un comprobante se diseña para leerse en papel a 20 cm; en un monitor (o en
 * un modal a 1 m de distancia) esos 11px obligan a acercarse. Se sube la
 * escala ~15% SIN tocar el contenido ni la estructura: mismo documento, mismos
 * campos, mismo orden. El PDF y la impresión no leen este bloque.
 */

@media screen {
    .fdoc {
        max-width: 820px;
        font-size: 12.5px;
    }

    .fdoc-emisor h2 {
        font-size: 17px;
    }

    .fdoc-emisor p,
    .fdoc-meta td,
    .fdoc-leyenda,
    .fdoc-totals td {
        font-size: 12.5px;
    }

    .fdoc-box .fdoc-ruc {
        font-size: 13px;
    }

    .fdoc-box .fdoc-title {
        font-size: 14px;
    }

    .fdoc-box .fdoc-number {
        font-size: 17px;
    }

    .fdoc-box .fdoc-status {
        font-size: 13px;
    }

    .fdoc-items thead th,
    .fdoc-items tbody td {
        font-size: 11.5px;
    }

    .fdoc-items thead th {
        padding: 6px;
    }

    .fdoc-items tbody td {
        padding: 6px;
    }

    .fdoc-totals tr.fdoc-grand td {
        font-size: 15px;
    }

    .fdoc-terms,
    .fdoc-pending-note,
    .fdoc-nota {
        font-size: 11.5px;
    }
}

/* ═══ CELULAR (<640px) — el documento se REORGANIZA ══════════════════════
 *
 * Regla de fondo: en 375px no entra la geometría de un A4, y encogerla —con
 * transform, con zoom o metiéndola en un iframe angosto— produce justo lo que
 * se ve en una caja real: emisor y caja fiscal aplastados contra el margen y
 * una cabecera que no se lee. Así que el documento no se achica: se reordena.
 * Sigue siendo el MISMO documento (mismos datos, mismos componentes, mismo
 * estilo); cambia cómo se apilan.
 *
 * Las tablas pasan a `display: block` (celdas incluidas). Es la única forma de
 * romper columnas fijas sin duplicar el markup — y el PDF, que necesita esas
 * columnas, nunca entra acá.
 */

@media screen and (max-width: 639px) {
    .fdoc-page {
        padding: 0;
    }

    .fdoc {
        max-width: none;
        font-size: 12px;
    }

    /* --- Encabezado: emisor arriba, caja fiscal debajo, ambos a ancho
           completo (en dos columnas, "FACTURA ELECTRÓNICA" cae a 116px). --- */
    .fdoc-head,
    .fdoc-head tbody,
    .fdoc-head tr,
    .fdoc-head td {
        display: block;
        width: 100%;
    }

    .fdoc-box {
        width: auto;
        margin-top: 10px;
        padding: 10px 8px;
    }

    .fdoc-emisor h2 {
        font-size: 16px;
    }

    /* --- Metadatos: una grilla de dos columnas (rótulo | valor) por fila.
           Grid y no flex-wrap A PROPÓSITO: con flex, una fila de 4 celdas
           parte donde le alcanza el ancho y deja el rótulo huérfano al final
           de una línea con su valor abajo ("Moneda:" arriba, "PEN" abajo).
           La grilla corta SIEMPRE de a pares. --- */
    .fdoc-meta,
    .fdoc-meta tbody {
        display: block;
    }

    .fdoc-meta tr {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 1px 8px;
        padding: 3px 0;
        border-bottom: 1px solid #f1f1f1;
    }

    .fdoc-meta td {
        display: block;
        padding: 0;
    }

    .fdoc-meta .fdoc-label {
        width: auto;
    }

    /* --- Ítems: conserva las 4 columnas (cant./descripción/P.U./importe) y
           la descripción absorbe el ancho sobrante en varias líneas. --- */
    .fdoc-items {
        table-layout: fixed;
    }

    .fdoc-items thead th,
    .fdoc-items tbody td {
        padding: 5px 4px;
        font-size: 11px;
    }

    .fdoc-items .fdoc-qty {
        width: 17%;
    }

    .fdoc-items .fdoc-price {
        width: 21%;
    }

    .fdoc-items .fdoc-amount {
        width: 23%;
    }

    /* --- Totales: importe en letras ARRIBA y el bloque de totales a ancho
           completo debajo. Dos columnas de 187px cada una no sirven a nadie. --- */
    .fdoc-summary,
    .fdoc-summary > tbody,
    .fdoc-summary > tbody > tr,
    .fdoc-summary > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .fdoc-leyenda {
        padding-right: 0;
        padding-bottom: 8px;
    }

    .fdoc-totals-cell {
        width: 100%;
    }

    .fdoc-totals td {
        padding: 4px 0;
    }

    /* --- Pie fiscal: QR centrado sobre la leyenda de verificación. --- */
    .fdoc-foot,
    .fdoc-foot tbody,
    .fdoc-foot tr,
    .fdoc-foot td {
        display: block;
        width: 100%;
    }

    .fdoc-foot .fdoc-qrcell {
        width: 100%;
        padding-bottom: 8px;
    }
}