/* WP Invoice Builder — Purchase Order Generator */

.wib-po-wrap {
    --wib-po-accent: #0044BB;
    --wib-po-text: #1d2327;
    --wib-po-border: #e5e5e5;
    --wib-po-bg: #f7f8fa;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--wib-po-text);
    box-sizing: border-box;
}

/* El `[hidden] { display: none }` de la hoja del navegador pierde contra
   CUALQUIER regla de autor que ponga `display`, así que un elemento con
   .hidden = true en JS seguía viéndose (era el caso del placeholder del logo:
   se veía el icono "Logo" por debajo de la imagen subida). Este candado cubre
   de una vez los siete sitios donde wib-po.js togglea `hidden`. */
.wib-po-wrap [hidden] {
    display: none !important;
}

/* El documento viaja SOLO (outerHTML) a la pestaña del PDF, fuera de
   .wib-po-wrap, y ahí también tiene que valer el candado. */
.wib-po-doc [hidden] {
    display: none !important;
}

/* Sin flechitas en los campos numéricos: en importes y cantidades no aportan
   nada, roban ~20px de ancho y disparan cambios accidentales con la rueda del
   ratón. Se aplica a todo el generador en vez de clase por clase, así los
   campos que se añadan mañana también salen limpios. */
.wib-po-wrap input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.wib-po-wrap input[type="number"]::-webkit-outer-spin-button,
.wib-po-wrap input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.wib-po-wrap * {
    box-sizing: border-box;
}

/* ── Editor ─────────────────────────────────────────────────────────── */

.wib-po-editor {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--wib-po-border);
    border-radius: 12px;
    padding: 28px;
}

.wib-po-header {
    margin-bottom: 22px;
}

/* Los títulos del generador son <p>, no <h*> (SEO: la página que lo aloja
   manda en la jerarquía de encabezados). Se fija TODO lo que antes ponía la
   hoja del navegador para el <h2>/<h3>, y con `.wib-po-wrap` delante +
   !important para ganar a los `p` / `.entry-content p` de los temas
   (margin-bottom, font-size, line-height, color, font-family). */
.wib-po-wrap .wib-po-title {
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    color: var(--wib-po-text) !important;
}

.wib-po-sub {
    margin: 0;
    color: #555;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.wib-po-section {
    padding: 18px 0;
    border-top: 1px solid var(--wib-po-border);
}

.wib-po-section:first-of-type {
    border-top: none;
}

.wib-po-wrap .wib-po-section-title {
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    color: var(--wib-po-text) !important;
}

.wib-po-req {
    color: #d63638;
}

.wib-po-field {
    margin-bottom: 14px;
    flex: 1;
    min-width: 0;
}

.wib-po-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
}

.wib-po-field input,
.wib-po-field select,
.wib-po-field textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--wib-po-border);
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    color: var(--wib-po-text);
    font-family: inherit;
}

.wib-po-field input:focus,
.wib-po-field select:focus,
.wib-po-field textarea:focus {
    outline: none;
    border-color: var(--wib-po-accent, #0044BB);
    box-shadow: 0 0 0 3px var(--wib-po-accent-line, #dfe5f2);
}

.wib-po-row {
    display: flex;
    gap: 14px;
}

.wib-po-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    cursor: pointer;
    margin-bottom: 12px;
}

.wib-po-checkbox input {
    width: 17px;
    height: 17px;
    accent-color: var(--wib-po-accent, #0044BB);
    flex-shrink: 0;
}

/* ── Logo picker ── */

.wib-po-logo-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.wib-po-logo-box {
    position: relative;
    flex: none;
    width: 148px;
    height: 88px;
    display: grid;
    /* minmax(0, 1fr) y NO `auto`: con la pista automática su alto depende del
       contenido, así que el `max-height: 100%` de la imagen no tiene contra
       qué resolverse, se ignora y el logo se sale de la caja. Con la pista
       definida el porcentaje sí resuelve. */
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    padding: 8px;
    border: 1px dashed #cfd4dc;
    border-radius: 10px;
    background: #fcfcfd;
    cursor: pointer;
    /* !important porque los temas de WP suelen soltar un `overflow: visible`
       global; sin esto un logo alto se sale de la caja. */
    overflow: hidden !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wib-po-logo-box:hover {
    border-color: var(--wib-po-accent, #0044BB);
    background: #f7f9fe;
}

/* El input de fichero tapa la caja entera, así que el foco de teclado se ve
   en él, no en el div con role=button. */
.wib-po-logo-box:focus-within,
.wib-po-logo-box:focus-visible {
    outline: none;
    border-color: var(--wib-po-accent, #0044BB);
    border-style: solid;
    box-shadow: 0 0 0 3px var(--wib-po-accent-line, #dfe5f2);
}

.wib-po-logo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11.5px !important;
    font-weight: 500;
    line-height: 1.3;
    color: #8a8f98;
    text-align: center;
    pointer-events: none;
}

.wib-po-logo-hint {
    font-size: 10px !important;
    font-weight: 400;
    color: #a8adb5;
}

/* El tema no puede tocar la caja de la imagen: si le cuela un width/height
   propio, el logo revienta el recuadro. */
.wib-po-logo-thumb {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
}

.wib-po-logo-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.wib-po-logo-actions {
    display: flex;
    align-items: center;
}

.wib-po-link-btn {
    background: none;
    border: none;
    color: var(--wib-po-accent, #0044BB) !important;
    font-size: 13px !important;
    cursor: pointer;
    padding: 0 !important;
    margin-top: 8px;
}

/* ── Tabs / signature ── */

.wib-po-tabs {
    display: inline-flex;
    border: 1px solid var(--wib-po-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
}

.wib-po-tab {
    padding: 8px 18px !important;
    background: #fff;
    border: none;
    border-right: 1px solid var(--wib-po-border) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
    color: #666 !important;
}

.wib-po-tab:last-child {
    border-right: none;
}

.wib-po-tab--active {
    background: var(--wib-po-accent, #0044BB);
    color: #fff !important;
}

.wib-po-sig-mode {
    margin-bottom: 8px;
}

.wib-po-sig-canvas {
    width: 100%;
    height: 130px;
    border: 1px dashed var(--wib-po-border);
    border-radius: 8px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

/* Sin JS el navegador pinta un <canvas> como su contenido de reserva (vacío)
   y la caja de firma desaparecía, con salto de maquetación. inline-block da la
   misma caja (y la misma línea base) que el canvas reemplazado. */
.wib-no-js .wib-po-sig-canvas {
    display: inline-block;
}

.wib-po-sig-typed {
    width: 100% !important;
    padding: 14px 12px;
    border: 1px dashed var(--wib-po-border) !important;
    border-radius: 8px !important;
    font-size: 28px !important;
    font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive !important;
    color: #1a1a4d !important;
}

/* ── Editor items table ── */

.wib-po-items-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* El scroll horizontal solo debe existir cuando de verdad no cabe; sin el
       min-width de la tabla esto no se dispara nunca y las columnas se
       aplastan hasta ser inservibles. */
    margin-bottom: 12px;
}

.wib-po-items {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
    /* `fixed` y no `auto`: con auto, el ancho intrínseco de los inputs repartía
       el espacio a partes iguales y Qty/Unit price se quedaban con 170px cada
       una mientras Description —el único campo con texto largo— truncaba. Con
       fixed mandan los width de los <th> y el sobrante entero va a Description. */
    table-layout: fixed;
}

.wib-po-items th {
    padding: 0 8px 8px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #8a8f98;
    border-bottom: 1px solid var(--wib-po-border);
    white-space: nowrap;
}

.wib-po-items td {
    padding: 4px;
    vertical-align: middle;
    border-bottom: 1px solid #f2f3f5;
}

.wib-po-items tbody tr:last-child td {
    border-bottom: none;
}

.wib-po-items tbody tr {
    transition: background 0.15s ease;
}

.wib-po-items tbody tr:hover {
    background: #fafbfc;
}

.wib-po-items tbody tr:focus-within {
    background: #f8fafd;
}

.wib-po-th-num,
.wib-po-td-num {
    text-align: right;
}

/* Anchos fijos para todo lo que no es texto libre; Description se queda con lo
   que sobre. Suma = 446px, y la tabla arranca en 560px de min-width. */
.wib-po-th-sku,
.wib-po-td-sku {
    width: 108px;
}

.wib-po-th-qty,
.wib-po-td-qty {
    width: 78px;
}

.wib-po-th-price,
.wib-po-td-price {
    width: 110px;
}

.wib-po-th-total,
.wib-po-td-total {
    width: 116px;
}

.wib-po-th-act,
.wib-po-td-act {
    width: 34px;
}

.wib-po-item-input {
    display: block !important;
    width: 100% !important;
    /* El alto va candado: los temas de WP sueltan padding y min-height propios
       y dejaban las filas en 46px para un texto de 13.5px. */
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border: 1px solid var(--wib-po-border) !important;
    border-radius: 5px !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    line-height: 1.35 !important;
    color: var(--wib-po-text) !important;
    background: #fff !important;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wib-po-item-input::placeholder {
    color: #b3b8c0;
}

.wib-po-item-input:focus {
    outline: none;
    /* !important porque el `border` de arriba lo lleva: sin esto el foco no
       cambiaría de color. */
    border-color: var(--wib-po-accent, #0044BB) !important;
    box-shadow: 0 0 0 3px var(--wib-po-accent-line, #dfe5f2);
}

.wib-po-td-num .wib-po-item-input {
    text-align: right;
}

/* Cifras alineadas en vertical: dígitos de ancho fijo. */
.wib-po-td-num .wib-po-item-input,
.wib-po-td-total,
.wib-po-summary dd {
    font-variant-numeric: tabular-nums;
}

.wib-po-td-total {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    padding-right: 8px !important;
}

/* Una línea aún sin importe no debe competir con las que sí lo tienen. */
.wib-po-td-total--zero {
    font-weight: 500;
    color: #b3b8c0;
}

.wib-po-del-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: #c2c6cc !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.wib-po-del-btn:hover,
.wib-po-del-btn:focus-visible {
    background: #fdf0f0;
    color: #d63638 !important;
}

.wib-po-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px !important;
    border: 1px dashed #cfd4dc !important;
    border-radius: 8px !important;
    background: #fff;
    color: var(--wib-po-accent, #0044BB) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wib-po-add-btn:hover {
    border-color: var(--wib-po-accent, #0044BB) !important;
    background: #f7f9fe;
}

/* ── Totales del editor ──────────────────────────────────────────────
   Los importes vivían solo en la vista previa: para ajustar el impuesto había
   que mirar a otro panel. Aquí se ven al lado de los campos que los mueven. */

.wib-po-totals-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
}

.wib-po-totals-inputs {
    display: flex;
    gap: 14px;
    flex: 1 1 260px;
    max-width: 340px;
    margin: 0;
}

/* Ojo: el margin-bottom de .wib-po-field se deja tal cual a propósito. A
   partir de 980px estos dos campos se apilan (`gap: 0` más abajo) y ese margen
   es lo único que los separa. */

/* Estos dos campos viven pegados a la tabla, así que se les candan el alto
   igual que a las celdas: si no, el tema los deja en 46px al lado de filas de
   34px y el bloque entero parece descuadrado. */
.wib-po-totals-inputs input {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
}

.wib-po-summary {
    flex: 0 1 260px;
    min-width: 220px;
    margin: 0 !important;
    padding: 12px 14px;
    border: 1px solid var(--wib-po-border);
    border-radius: 10px;
    background: #fafbfc;
}

.wib-po-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 3px 0;
}

.wib-po-summary dt {
    margin: 0 !important;
    font-size: 12.5px;
    font-weight: 500;
    color: #6b7280;
}

.wib-po-summary dd {
    margin: 0 !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.wib-po-summary-row--grand {
    margin-top: 6px;
    padding-top: 9px;
    border-top: 1px solid var(--wib-po-border);
}

.wib-po-summary-row--grand dt {
    font-size: 13px;
    font-weight: 600;
    color: var(--wib-po-text);
}

.wib-po-summary-row--grand dd {
    font-size: 17px;
    font-weight: 700;
    color: var(--wib-po-accent, #0044BB);
}

/* ── Buttons ── */

.wib-po-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--wib-po-border);
}

.wib-po-btn {
    padding: 11px 22px !important;
    border-radius: 7px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}

.wib-po-btn--ghost {
    background: #fff;
    border-color: var(--wib-po-border);
    color: #444 !important;
}

.wib-po-btn--primary {
    background: var(--wib-po-accent, #0044BB);
    color: #fff;
}

.wib-po-btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.wib-po-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.wib-po-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0;
    padding: 12px 14px;
    background: var(--wib-po-bg);
    border: 1px solid var(--wib-po-border);
    border-radius: 8px;
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #6b7280;
}

.wib-po-disclaimer-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: #9aa1ac;
}

/* ── Preview panel ──────────────────────────────────────────────────── */

.wib-po-preview-panel {
    min-width: 0;
    position: sticky;
    top: 24px;
    align-self: start;
    background: #fff;
    border: 1px solid var(--wib-po-border);
    border-radius: 12px;
    padding: 18px;
}

.wib-po-wrap .wib-po-preview-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    color: var(--wib-po-text) !important;
}

.wib-po-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.wib-po-preview-actions .wib-po-btn {
    flex: 1;
    padding: 10px 14px !important;
    font-size: 13px !important;
}

.wib-po-missing {
    margin: 0 0 14px;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #b8590a;
}

.wib-po-scaler {
    transform-origin: top left;
    /* El JS le fija width/height ya escalados; así esto lo centra de verdad. */
    margin-inline: auto;
}

.wib-po-preview-container {
    border-radius: 8px;
    overflow: hidden auto;
    background: var(--wib-po-bg);
    max-height: calc(100vh - 210px);
}


/* ── Sin JS: encaje del preview solo con CSS ─────────────────────────────
   Con JS, kit.scaler() escala el documento (780px fijos) con transform al
   ancho de la columna. Sin JS (crawlers, JS bloqueado o roto) el documento
   desbordaba y salía cortado. Aquí el contenedor pasa a ser un size container
   y el scaler recibe un `zoom` escalonado cada 20px: nunca desborda y, como
   mucho, queda ~20px más estrecho que la columna. El JS quita `wib-no-js`
   al arrancar, así que con JS nada de esto aplica. */
.wib-no-js .wib-po-preview-container {
    container-type: inline-size;
}

.wib-no-js .wib-po-scaler {
    width: 780px;
    zoom: 0.2308;
}

@container (min-width: 200px) { .wib-no-js .wib-po-scaler { zoom: 0.2564; } }
@container (min-width: 220px) { .wib-no-js .wib-po-scaler { zoom: 0.282; } }
@container (min-width: 240px) { .wib-no-js .wib-po-scaler { zoom: 0.3076; } }
@container (min-width: 260px) { .wib-no-js .wib-po-scaler { zoom: 0.3333; } }
@container (min-width: 280px) { .wib-no-js .wib-po-scaler { zoom: 0.3589; } }
@container (min-width: 300px) { .wib-no-js .wib-po-scaler { zoom: 0.3846; } }
@container (min-width: 320px) { .wib-no-js .wib-po-scaler { zoom: 0.4102; } }
@container (min-width: 340px) { .wib-no-js .wib-po-scaler { zoom: 0.4358; } }
@container (min-width: 360px) { .wib-no-js .wib-po-scaler { zoom: 0.4615; } }
@container (min-width: 380px) { .wib-no-js .wib-po-scaler { zoom: 0.4871; } }
@container (min-width: 400px) { .wib-no-js .wib-po-scaler { zoom: 0.5128; } }
@container (min-width: 420px) { .wib-no-js .wib-po-scaler { zoom: 0.5384; } }
@container (min-width: 440px) { .wib-no-js .wib-po-scaler { zoom: 0.5641; } }
@container (min-width: 460px) { .wib-no-js .wib-po-scaler { zoom: 0.5897; } }
@container (min-width: 480px) { .wib-no-js .wib-po-scaler { zoom: 0.6153; } }
@container (min-width: 500px) { .wib-no-js .wib-po-scaler { zoom: 0.641; } }
@container (min-width: 520px) { .wib-no-js .wib-po-scaler { zoom: 0.6666; } }
@container (min-width: 540px) { .wib-no-js .wib-po-scaler { zoom: 0.6923; } }
@container (min-width: 560px) { .wib-no-js .wib-po-scaler { zoom: 0.7179; } }
@container (min-width: 580px) { .wib-no-js .wib-po-scaler { zoom: 0.7435; } }
@container (min-width: 600px) { .wib-no-js .wib-po-scaler { zoom: 0.7692; } }
@container (min-width: 620px) { .wib-no-js .wib-po-scaler { zoom: 0.7948; } }
@container (min-width: 640px) { .wib-no-js .wib-po-scaler { zoom: 0.8205; } }
@container (min-width: 660px) { .wib-no-js .wib-po-scaler { zoom: 0.8461; } }
@container (min-width: 680px) { .wib-no-js .wib-po-scaler { zoom: 0.8717; } }
@container (min-width: 700px) { .wib-no-js .wib-po-scaler { zoom: 0.8974; } }
@container (min-width: 720px) { .wib-no-js .wib-po-scaler { zoom: 0.923; } }
@container (min-width: 740px) { .wib-no-js .wib-po-scaler { zoom: 0.9487; } }
@container (min-width: 760px) { .wib-no-js .wib-po-scaler { zoom: 0.9743; } }
@container (min-width: 780px) { .wib-no-js .wib-po-scaler { zoom: 1; } }

/* ── The purchase order document ──────────────────────────────────────
 *
 * Dirección: formulario de compras industrial. Frente al rent receipt (serif,
 * papel de seguridad, sello), aquí el mensaje es precisión administrativa:
 * barra de acento plana sin degradado, esquinas rectas, bloques enrejados con
 * filetes de un pixel, cifras y códigos en monoespaciada para que las columnas
 * cuadren de verdad, y una caja de autorización con marco. Denso y utilitario:
 * es un documento que alguien va a cotejar contra un albarán.
 *
 * Se usan STACKS del sistema, no webfonts: el PDF se rasteriza en una pestaña
 * nueva y una fuente sin cargar saldría con la de reserva.
 *
 * html2canvas 1.4.1: sin color-mix()/oklch (los tintes llegan precalculados
 * como rgba desde PHP), sin backdrop-filter, sin conic-gradient.
 */

/* Ancho FIJO igual al de captura del PDF (DOC_WIDTH en wib-po.js): el preview
   se encaja escalándolo, nunca reflowando. Lo que se ve es lo que sale. */
.wib-po-doc {
    width: 780px;

    /* El documento se captura SOLO (su outerHTML se vuelca en la pestaña del
       PDF), así que no puede heredar nada de .wib-po-wrap: sin esto salía en
       serif y con box-sizing content-box en el PDF, mientras en pantalla se
       veía en sans y border-box. El documento debe ser autosuficiente. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --wib-po-ink: #15181c;
    --wib-po-muted: #6b7280;
    --wib-po-rule: #d8dbe0;
    --wib-po-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    background: #fff;
    color: var(--wib-po-ink);
    font-size: 13px;
    line-height: 1.45;
}

.wib-po-doc,
.wib-po-doc * {
    box-sizing: border-box;
}

/* ── Header bar ── */

.wib-po-doc-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 28px;
    background: var(--wib-po-accent, #0044BB);
    color: #fff;
}

.wib-po-doc-bar-left {
    min-width: 0;
}

.wib-po-doc-kicker {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    line-height: 1.1;
}

.wib-po-doc-no {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 7px;
}

.wib-po-doc-no-label {
    font-size: 9.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.wib-po-doc-no-val {
    font-family: var(--wib-po-mono);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.wib-po-doc-bar-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
    max-width: 46%;
}

.wib-po-doc-logo {
    max-height: 42px;
    max-width: 190px;
    object-fit: contain;
}

.wib-po-doc-buyer-name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}

.wib-po-doc-body {
    padding: 22px 28px 26px;
}

/* ── Three boxed blocks ── */

.wib-po-doc-grid {
    display: flex;
    gap: 0;
    border: 1px solid var(--wib-po-rule);
    margin-bottom: 20px;
}

.wib-po-doc-block {
    flex: 1;
    min-width: 0;
}

.wib-po-doc-block + .wib-po-doc-block {
    border-left: 1px solid var(--wib-po-rule);
}

.wib-po-doc-block-head {
    padding: 6px 11px;
    background: var(--wib-po-bg, #f7f8fa);
    border-bottom: 1px solid var(--wib-po-rule);
    font-family: var(--wib-po-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--wib-po-muted);
}

.wib-po-doc-block-body {
    padding: 10px 11px;
    white-space: pre-wrap;
    font-size: 12.5px;
    min-height: 66px;
}

.wib-po-doc-kv {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    white-space: normal;
    margin-bottom: 3px;
}

.wib-po-doc-kv span {
    color: var(--wib-po-muted);
    font-size: 11.5px;
}

.wib-po-doc-kv b {
    font-family: var(--wib-po-mono);
    font-size: 11.5px;
    font-weight: 600;
    text-align: right;
}

/* ── Items table ── */

.wib-po-doc-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.wib-po-doc-table th {
    padding: 7px 10px;
    background: var(--wib-po-accent, #0044BB);
    color: #fff;
    font-family: var(--wib-po-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.wib-po-doc-th-num {
    text-align: right !important;
}

.wib-po-doc-th-sku {
    width: 96px;
}

.wib-po-doc-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--wib-po-rule);
    font-size: 12.5px;
    vertical-align: top;
    word-break: break-word;
}

.wib-po-doc-td-num {
    text-align: right;
    white-space: nowrap;
    font-family: var(--wib-po-mono);
    font-size: 12px;
}

.wib-po-doc-td-sku {
    font-family: var(--wib-po-mono);
    font-size: 11.5px;
    color: var(--wib-po-muted);
    white-space: nowrap;
}

.wib-po-doc-td-amount {
    font-weight: 600;
}

/* ── Totals ── */

.wib-po-doc-totals-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 14px 0 20px;
}

.wib-po-doc-totals {
    width: 290px;
    border-collapse: collapse;
}

.wib-po-doc-totals td {
    padding: 5px 10px;
    font-size: 12.5px;
    color: var(--wib-po-muted);
}

.wib-po-doc-total-val {
    text-align: right;
    font-family: var(--wib-po-mono);
    font-weight: 600;
    color: var(--wib-po-ink);
    white-space: nowrap;
}

.wib-po-doc-grand td {
    padding-top: 9px;
    border-top: 2px solid var(--wib-po-accent, #0044BB);
    font-size: 14px;
    font-weight: 700;
    color: var(--wib-po-ink);
}

.wib-po-doc-grand .wib-po-doc-total-val {
    font-size: 17px;
    color: var(--wib-po-accent, #0044BB);
}

/* ── Notes ── */

.wib-po-doc-notes {
    border: 1px solid var(--wib-po-rule);
    margin-bottom: 22px;
}

.wib-po-doc-notes-text {
    padding: 11px;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 1.55;
    color: #3a4048;
}

/* ── Authorization box ── */

.wib-po-doc-auth {
    width: 300px;
    margin-left: auto;
    border: 1px solid var(--wib-po-rule);
}

.wib-po-doc-auth-head {
    padding: 6px 11px;
    background: var(--wib-po-bg, #f7f8fa);
    border-bottom: 1px solid var(--wib-po-rule);
    font-family: var(--wib-po-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--wib-po-muted);
}

.wib-po-doc-auth-sig {
    height: 62px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 4px 11px;
}

.wib-po-doc-sig-img {
    max-height: 54px;
    max-width: 100%;
    object-fit: contain;
}

.wib-po-doc-sig-typed {
    font-size: 27px;
    line-height: 1.1;
    font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive;
    color: #1a1a4d;
}

.wib-po-doc-auth-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px 9px;
    border-top: 1px solid var(--wib-po-rule);
}

.wib-po-doc-auth-name {
    font-size: 12px;
    font-weight: 600;
}

.wib-po-doc-auth-date {
    font-family: var(--wib-po-mono);
    font-size: 10.5px;
    color: var(--wib-po-muted);
    white-space: nowrap;
}

/* ── Preview popup ───────────────────────────────────────────────────── */

.wib-po-modal {
    /* Centrado explícito en lugar de heredar el del navegador: un <dialog>
       modal se centra por `inset:0` + `margin:auto` de la hoja del navegador, y
       un reset del tema tipo `* { margin: 0 }` —habitual en WordPress— lo anula
       dejándolo clavado en una esquina. Una clase gana a `*` por especificidad. */
    position: fixed;
    inset: 0;
    margin: auto;

    width: min(94vw, 900px);
    max-width: 94vw;
    max-height: 92dvh;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    overflow: hidden;
}

.wib-po-modal::backdrop {
    background: rgba(14, 16, 22, 0.62);
}

.wib-po-modal:not([open]) {
    display: none;
}

.wib-po-modal-inner {
    display: flex;
    flex-direction: column;
    max-height: 92dvh;
}

.wib-po-modal-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 12px 18px;
    border-bottom: 1px solid var(--wib-po-border, #e5e5e5);
    background: #fff;
}

.wib-po-modal-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--wib-po-text, #1d2327);
}

/* 40px de área táctil: debe cerrarse cómodamente con el pulgar. */
.wib-po-modal-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border: 1px solid var(--wib-po-border, #e5e5e5);
    border-radius: 9px;
    background: #fff;
    color: #444 !important;
    cursor: pointer;
}

.wib-po-modal-close:hover {
    background: var(--wib-po-bg, #f7f8fa);
    color: #000 !important;
}

.wib-po-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px;
    background: #eef0f4;
}

.wib-po-modal-body .wib-po-doc {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 980px) {
    /* minmax(0, 1fr), NO 1fr: con `1fr` el suelo de la pista es el min-content
       del contenido y el documento (780px fijos) desbordaría el viewport. */
    .wib-po-wrap {
        grid-template-columns: minmax(0, 1fr);
    }
    .wib-po-preview-panel {
        position: static;
    }
    .wib-po-row,
    .wib-po-totals-inputs {
        flex-direction: column;
        gap: 0;
        max-width: none;
    }
    .wib-po-preview-container {
        max-height: none;
    }
    .wib-po-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }
    .wib-po-modal-inner {
        max-height: 100dvh;
        height: 100dvh;
    }
    /* Respeta la barra de gestos / notch de iOS. */
    .wib-po-modal-body {
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    }

    /* Safari hace zoom automático al enfocar un input con font-size < 16px. */
    .wib-po-field input,
    .wib-po-field select,
    .wib-po-field textarea,
    .wib-po-checkbox,
    .wib-po-sig-typed {
        font-size: 16px !important;
    }

    /* Sin flex-wrap, "Start next PO" + "Clear form" se salían del editor y
       provocaban scroll horizontal de toda la página. */
    .wib-po-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .wib-po-editor {
        padding: 20px 16px;
    }
    .wib-po-preview-panel {
        padding: 14px;
    }
    .wib-po-wrap .wib-po-title {
        font-size: 19px !important;
    }
    .wib-po-sub {
        font-size: 13px !important;
    }
    .wib-po-logo-row {
        flex-wrap: wrap;
    }
    /* A ancho completo y apilados: en dos columnas no cabían cómodamente
       junto al texto traducido en algunos idiomas. */
    .wib-po-actions {
        flex-direction: column;
    }
    .wib-po-actions .wib-po-btn {
        width: 100%;
    }
    .wib-po-totals-bar {
        gap: 14px;
    }
    .wib-po-summary {
        flex-basis: 100%;
        max-width: none;
    }
    .wib-po-preview-actions .wib-po-btn {
        padding: 10px 8px !important;
    }
}

@media (max-width: 400px) {
    .wib-po-editor {
        padding: 16px 12px;
    }
    .wib-po-preview-panel {
        padding: 12px;
    }
    .wib-po-logo-box {
        width: 120px;
        height: 76px;
    }
    .wib-po-summary-row--grand dd {
        font-size: 15px;
    }
    .wib-po-btn {
        padding: 10px 14px !important;
    }
}