/* WP Invoice Builder — Mileage Reimbursement Generator */

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

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

/* `[hidden] { display: none }` de la hoja del navegador pierde contra cualquier
   regla de autor con `display`, así que un `.hidden = true` desde JS puede no
   ocultar nada. Este candado cubre todos los toggles de golpe. */
.wib-ml-wrap [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-ml-wrap input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

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

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

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

.wib-ml-editor {
    min-width: 0;
    /* El registro de viajes se adapta al ancho de ESTA tarjeta, no al del
       viewport: en un portátil de 1280px el editor mide ~770px y una media
       query de viewport nunca se enteraría. */
    container: wib-ml-editor / inline-size;
    background: #fff;
    border: 1px solid var(--wib-ml-border);
    border-radius: 12px;
    padding: 28px;
}

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

/* Títulos del generador: son <p>, no <hN> (auditoría SEO — el generador no
   debe competir con los encabezados de la página). Se fija TODO lo que un
   heading traía de la hoja del navegador y lo que un tema suele poner a los
   <p> (margin-bottom, font-size, line-height, color, familia), con prefijo
   .wib-ml-wrap para ganar a reglas tipo `.entry-content p`. */
.wib-ml-wrap .wib-ml-title,
.wib-ml-wrap .wib-ml-section-title,
.wib-ml-wrap .wib-ml-sig-label,
.wib-ml-wrap .wib-ml-preview-title {
    padding: 0 !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    color: var(--wib-ml-text) !important;
    font-family: inherit !important;
    font-style: normal !important;
    text-transform: none !important;
}

.wib-ml-wrap .wib-ml-title {
    margin: 0 0 6px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

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

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

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

.wib-ml-wrap .wib-ml-section-title {
    margin: 0 0 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

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

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

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

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

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

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

.wib-ml-rate-unit {
    font-weight: 400;
    color: #777;
}

.wib-ml-hint {
    margin: 6px 0 0;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    color: #777;
}

/* ── Tabs ── */

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

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

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

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

/* ── Trip log ────────────────────────────────────────────────────────
 * Un viaje = un bloque de DOS líneas, no una fila de nueve columnas.
 *
 *   ┌ fecha ─┬ propósito ───────────────────┬ importe ─┬ ✕ ┐
 *   └ desde ─┴ hasta ─┴ odo ini ┴ odo fin ┴ distancia ─────┘
 *
 * Nueve columnas en los ~800px que mide el editor dejaban cada campo en
 * 70px: "Client visit, projec…", "Destina…", odómetros cortados. En dos
 * líneas cada campo triplica su ancho sin que el bloque crezca casi nada.
 *
 * Rejilla de 14 columnas `minmax(0, 1fr)`: sin suelos en px NO puede
 * desbordar la tarjeta, pase lo que pase con el ancho. Ese es el invariante
 * — lo vigila `tests/trip-grid-fits.js`.
 *
 * Por debajo de 600px de CONTENEDOR (no de viewport: lo que importa es el
 * ancho del panel, no el de la pantalla) el bloque se apila en una ficha.
 */

/* En el contenedor, no en el wrapper: si no hay viajes no queda una línea
   suelta colgando. */
.wib-ml-trip:first-child {
    border-top: 1px solid var(--wib-ml-border);
}

.wib-ml-trip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    align-items: start;
    padding: 12px 10px;
    border-bottom: 1px solid #eff0f2;
    /* El borde de foco no debe empujar el layout: transparente por defecto. */
    border-left: 2px solid transparent;
    transition: background 0.15s ease, border-left-color 0.15s ease;
}

.wib-ml-trip:hover {
    background: #fafbfc;
}

.wib-ml-trip:focus-within {
    background: #f8fafd;
    border-left-color: var(--wib-ml-accent, #0044BB);
}

.wib-ml-trip-cell {
    display: block;
    min-width: 0;
}

/* Ficha estrecha: el propósito a ancho completo (es el texto largo) y borrar
   en la esquina superior derecha, junto a la fecha. Dándole fila propia se
   quedaba solo en medio de un hueco de 50px. */
.wib-ml-trip-cell:nth-child(2) {
    grid-column: 1 / -1;
}

.wib-ml-trip-act {
    grid-row: 1;
    grid-column: 2;
    align-self: end;
    justify-self: end;
    padding-bottom: 2px;
}

.wib-ml-trip-label {
    display: block;
    margin: 0 0 3px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #8a8f98;
    white-space: nowrap;
}

/* Los temas de WordPress inflan los inputs sin piedad (padding de 14px,
   min-height, line-height heredado). Aquí se fija el alto de la caja a mano:
   sin esto un input de texto de 13px acababa midiendo 54px de alto. */
.wib-ml-trip-input {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    /* Sin min-width:0 el tamaño intrínseco del <input> (~170px) actúa de suelo
       de la pista y revienta la rejilla por mucho minmax(0,…) que pongas. */
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 1px solid var(--wib-ml-border) !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    line-height: 1.35 !important;
    color: var(--wib-ml-text) !important;
    background: #fff !important;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wib-ml-trip-input:focus {
    outline: none;
    border-color: var(--wib-ml-accent, #0044BB) !important;
    box-shadow: 0 0 0 3px var(--wib-ml-accent-line, #dfe5f2);
}

/* Cifras alineadas en columna: dígitos de ancho fijo. */
.wib-ml-num .wib-ml-trip-input,
.wib-ml-trip-value {
    font-variant-numeric: tabular-nums;
}

.wib-ml-num .wib-ml-trip-input {
    text-align: right;
}

/* Distancia derivada del odómetro: se ve que es un resultado, no un campo. */
.wib-ml-trip-input--auto {
    background: var(--wib-ml-accent-soft, #f4f6fb) !important;
    border-style: dashed !important;
    color: #444 !important;
    cursor: default;
}

.wib-ml-trip-amount {
    text-align: right;
    white-space: nowrap;
}

/* El padding vertical iguala el de los inputs para que el importe caiga en la
   misma línea de base que el resto de la fila. */
.wib-ml-trip-value {
    display: block;
    padding: 6px 0;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.35;
}

.wib-ml-del-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    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-ml-del-btn:hover,
.wib-ml-del-btn:focus-visible {
    background: #fdf0f0;
    color: #d63638 !important;
}

/* ── Trip log: bloque de dos líneas ──────────────────────────────────
   Se activa cuando el panel del editor da de sí, no cuando lo hace la
   pantalla. Reparto de las 14 columnas:

     línea 1 │ date 1-3 │ purpose 4-11 │ amount 12-13 │ del 14
     línea 2 │ from 1-4 │ to 5-8 │ odo ini 9-10 │ odo fin 11-12 │ dist 13-14
*/

@container wib-ml-editor (min-width: 600px) {
    .wib-ml-trip {
        grid-template-columns: repeat(14, minmax(0, 1fr));
        /* Poco aire entre las dos líneas (son un mismo viaje) y bastante entre
           viajes: es lo que hace que se lean como bloques y no como una sopa
           de campos. */
        gap: 7px;
        padding: 14px 10px;
    }

    /* date */
    .wib-ml-trip-cell:nth-child(1) { grid-column: span 3; }
    /* purpose */
    .wib-ml-trip-cell:nth-child(2) { grid-column: span 7; }

    /* Abrir la segunda línea: al anclarse en la columna 1, la fila 1 ya está
       ocupada y el auto-placement lo baja solo. */
    .wib-ml-trip-cell:nth-child(3) { grid-column: 1 / span 4; }  /* from     */
    .wib-ml-trip-cell:nth-child(4) { grid-column: span 4; }      /* to       */
    .wib-ml-trip-cell:nth-child(5) { grid-column: span 2; }      /* odo ini  */
    .wib-ml-trip-cell:nth-child(6) { grid-column: span 2; }      /* odo fin  */
    .wib-ml-trip-cell:nth-child(7) { grid-column: span 2; }      /* distance */

    /* Importe y borrar: posición fija en la línea 1, a la derecha. Al tener
       fila y columna definidas se colocan antes que el resto, así que el
       auto-placement de los demás ya los esquiva. */
    .wib-ml-trip-amount {
        grid-row: 1;
        grid-column: 11 / span 3;
    }

    .wib-ml-trip-act {
        grid-row: 1;
        grid-column: 14;
    }
}

.wib-ml-trip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.wib-ml-add-btn {
    padding: 8px 14px !important;
    border: 1px dashed var(--wib-ml-border) !important;
    border-radius: 7px !important;
    background: #fff;
    color: var(--wib-ml-accent, #0044BB) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.wib-ml-add-btn--alt {
    border-style: solid !important;
    color: #555 !important;
}

/* ── Signatures ── */

.wib-ml-sig-block {
    padding: 14px 0 4px;
    border-top: 1px dashed var(--wib-ml-border);
}

.wib-ml-sig-block:first-of-type {
    border-top: none;
    padding-top: 0;
}

.wib-ml-wrap .wib-ml-sig-label {
    margin: 0 0 3px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

.wib-ml-sig-note {
    margin: 0 0 10px;
    font-size: 12px !important;
    color: #777;
    line-height: 1.45 !important;
}

/* Las pestañas de firma se repiten por bloque (empleado / aprobador), así que
   se seleccionan por [data-sig-group] en vez de por id. */
.wib-ml-sig-tabs {
    margin-bottom: 10px;
}

.wib-ml-sig-mode {
    margin-bottom: 6px;
}

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

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

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

/* ── Buttons ── */

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

.wib-ml-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-ml-btn--ghost {
    background: #fff;
    border-color: var(--wib-ml-border);
    color: #444 !important;
}

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

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

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

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

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

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

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

.wib-ml-wrap .wib-ml-preview-title {
    margin: 0 0 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

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

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

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

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

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

/* ── The mileage report document ──────────────────────────────────────
 *
 * Dirección: planilla de gastos corporativa. Frente al rent receipt (papel de
 * seguridad, serif, sello) y a la orden de compra (barra maciza, rejilla
 * industrial), aquí el lenguaje es el de una hoja de cálculo bien tipografiada:
 * cabecera clara con filete de acento, una tira de tres cifras arriba —lo
 * primero que mira quien aprueba—, tabla con cebra y cifras monoespaciadas, y
 * el resumen financiero desglosado al pie. Sobrio: lo lee alguien de
 * administración que solo quiere cuadrar números.
 *
 * 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-ml.js): el preview
   se encaja escalándolo, nunca reflowando. Lo que se ve es lo que sale. */
.wib-ml-doc {
    width: 800px;

    /* Autosuficiente: el documento se captura SOLO (su outerHTML se vuelca en la
       pestaña del PDF), así que declara aquí su familia base y su box-sizing en
       vez de heredarlos de .wib-ml-wrap, que no viaja. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

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

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

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

/* ── Header ── */

.wib-ml-doc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-left: 14px;
    border-left: 4px solid var(--wib-ml-accent, #0044BB);
    margin-bottom: 22px;
}

.wib-ml-doc-head-main {
    min-width: 0;
}

.wib-ml-doc-eyebrow {
    font-family: var(--wib-ml-mono);
    font-size: 9px;
    letter-spacing: 1.9px;
    text-transform: uppercase;
    color: var(--wib-ml-muted);
    margin-bottom: 6px;
    min-height: 11px;
}

/* <p>, no <h1>. Sin prefijo .wib-ml-wrap: el documento se rasteriza solo en
   la pestaña del PDF, donde el wrapper no existe. */
.wib-ml-doc .wib-ml-doc-title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.15 !important;
    letter-spacing: -0.3px !important;
    text-transform: none !important;
    color: var(--wib-ml-ink) !important;
}

.wib-ml-doc-head-meta {
    flex-shrink: 0;
    min-width: 210px;
}

.wib-ml-doc-kv {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    border-bottom: 1px solid var(--wib-ml-rule);
}

.wib-ml-doc-kv span {
    font-family: var(--wib-ml-mono);
    font-size: 8.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--wib-ml-muted);
    padding-top: 2px;
}

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

/* ── Stat strip ── */

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

.wib-ml-doc-stat {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
}

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

.wib-ml-doc-stat--total {
    background: var(--wib-ml-accent-soft, #f4f6fb);
}

.wib-ml-doc-stat-label {
    display: block;
    font-family: var(--wib-ml-mono);
    font-size: 8.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--wib-ml-muted);
    margin-bottom: 5px;
}

.wib-ml-doc-stat-val {
    display: block;
    font-family: var(--wib-ml-mono);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.4px;
}

.wib-ml-doc-stat--total .wib-ml-doc-stat-val {
    color: var(--wib-ml-accent, #0044BB);
}

/* ── Parties ── */

.wib-ml-doc-parties {
    display: flex;
    gap: 28px;
    margin-bottom: 20px;
}

.wib-ml-doc-party {
    flex: 1;
    min-width: 0;
}

.wib-ml-doc-label {
    font-family: var(--wib-ml-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--wib-ml-muted);
    margin-bottom: 5px;
}

.wib-ml-doc-party-text {
    white-space: pre-wrap;
    font-size: 12.5px;
    line-height: 1.45;
}

/* ── Trip table ── */

.wib-ml-doc-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.wib-ml-doc-table th {
    padding: 7px 9px;
    border-top: 2px solid var(--wib-ml-accent, #0044BB);
    border-bottom: 1px solid var(--wib-ml-rule);
    background: var(--wib-ml-bg, #f7f8fa);
    font-family: var(--wib-ml-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-align: left;
    color: var(--wib-ml-muted);
    white-space: nowrap;
}

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

/* Anchos explícitos. Dejando que el navegador reparta, la columna de propósito
   se lo comía todo y los destinos se partían a media palabra ("Ravenswort/h"),
   que en un PDF parece un error. */
.wib-ml-doc-table {
    table-layout: fixed;
}

.wib-ml-doc-th-date  { width: 76px; }
.wib-ml-doc-th-place { width: 104px; }
.wib-ml-doc-th-odo   { width: 112px; }
.wib-ml-doc-table th[data-wib="th-distance"] { width: 86px; }
.wib-ml-doc-table th:last-child { width: 84px; }

.wib-ml-doc-td-date {
    white-space: nowrap;
}

/* Solo se parte una palabra si de verdad no cabe, no por gusto. */
.wib-ml-doc-td-place,
.wib-ml-doc-table td {
    word-break: normal;
    overflow-wrap: break-word;
}

.wib-ml-doc-table td {
    padding: 7px 9px;
    border-bottom: 1px solid #eceef1;
    font-size: 12px;
    vertical-align: top;
    word-break: break-word;
}

/* Cebra: en una tabla de muchos viajes ayuda a no saltar de fila al leer. */
.wib-ml-doc-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

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

.wib-ml-doc-td-odo {
    color: var(--wib-ml-muted);
}

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

/* ── Summary ── */

.wib-ml-doc-summary {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 26px;
}

.wib-ml-doc-totals {
    width: 320px;
    border-collapse: collapse;
}

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

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

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

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

/* ── Double signature ── */

.wib-ml-doc-signatures {
    display: flex;
    gap: 34px;
}

.wib-ml-doc-sig {
    flex: 1;
    min-width: 0;
}

.wib-ml-doc-sig-area {
    height: 56px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

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

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

.wib-ml-doc-sig-rule {
    border-top: 1px solid var(--wib-ml-ink);
    margin: 4px 0 6px;
}

.wib-ml-doc-sig-name {
    font-size: 12px;
    font-weight: 600;
    min-height: 14px;
}

.wib-ml-doc-sig-role {
    margin-top: 2px;
    font-family: var(--wib-ml-mono);
    font-size: 8.5px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--wib-ml-muted);
    line-height: 1.4;
}

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

.wib-ml-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, 920px);
    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-ml-modal::backdrop {
    background: rgba(14, 16, 22, 0.62);
}

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

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

.wib-ml-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-ml-border, #e5e5e5);
    background: #fff;
}

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

/* 40px de área táctil: debe cerrarse cómodamente con el pulgar. */
.wib-ml-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-ml-border, #e5e5e5);
    border-radius: 9px;
    background: #fff;
    color: #444 !important;
    cursor: pointer;
}

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

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

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

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

@media (max-width: 1080px) {
    /* minmax(0, 1fr), NO 1fr: con `1fr` el suelo de la pista es el min-content
       del contenido y el documento (800px fijos) desbordaría el viewport. */
    .wib-ml-wrap {
        grid-template-columns: minmax(0, 1fr);
    }
    .wib-ml-preview-panel {
        position: static;
    }
    .wib-ml-preview-container {
        max-height: none;
    }
}

/* El registro de viajes NO se toca aquí: lo gobierna el @container del editor
   (ver "Trip log grid"). Duplicarlo con @media provocaba que a 800px de
   viewport la ficha ganara aunque el editor tuviera sitio para la fila. */
@media (max-width: 860px) {
    .wib-ml-row {
        flex-direction: column;
        gap: 0;
    }

    /* Inputs a 16px: por debajo de eso iOS hace zoom al enfocar. */
    .wib-ml-field input,
    .wib-ml-field select {
        font-size: 16px;
    }

    /* Mismo motivo, para los campos del trip log: solo el tamaño de fuente,
       no toca el layout de columnas (eso sigue gobernado por el @container). */
    .wib-ml-trip-input {
        font-size: 16px !important;
    }

    /* "Start next period" + "Clear form" no caben en una línea por debajo de
       ~400px (nowrap fuerza un ancho mínimo mayor que el hueco disponible). */
    .wib-ml-actions {
        flex-wrap: wrap;
    }

    .wib-ml-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }
    .wib-ml-modal-inner {
        max-height: 100dvh;
        height: 100dvh;
    }
    /* Respeta la barra de gestos / notch de iOS. */
    .wib-ml-modal-body {
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    }
}

/* Phones (≤480px): el padding fijo de 28px/18px de las tarjetas se comía
   demasiado ancho útil en pantallas de 320-414px. */
@media (max-width: 480px) {
    .wib-ml-editor {
        padding: 18px 14px;
    }

    .wib-ml-preview-panel {
        padding: 14px;
    }

    .wib-ml-wrap .wib-ml-title {
        font-size: 19px !important;
    }

    /* Apilados a ancho completo: en línea se quedaban a mitad de palabra. */
    .wib-ml-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wib-ml-actions .wib-ml-btn {
        width: 100%;
        text-align: center;
    }
}

/* ── Sin JavaScript (progressive enhancement) ─────────────────────────
 * El servidor pinta el estado inicial completo; el JS quita .wib-no-js al
 * arrancar. Solo queda resolver lo que normalmente hace el JS:
 *
 * 1. Encaje del preview. kit.scaler() escala el documento (800px fijos) con
 *    transform. Sin JS se mide el panel con un contenedor y se aplica `zoom`
 *    por escalones de 10px, siempre por DEBAJO del ancho real: nunca desborda.
 * 2. El <canvas> del pad de firma: con scripting desactivado el navegador lo
 *    pinta como su contenido alternativo (sin caja). inline-block le devuelve
 *    el recuadro para que el layout no salte al activar JS.
 */
.wib-ml-wrap.wib-no-js .wib-ml-preview-container {
    container: wib-ml-preview / inline-size;
}

.wib-ml-wrap.wib-no-js .wib-ml-scaler {
    width: 800px;
    zoom: 0.25;
}

@container wib-ml-preview (min-width: 240px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.3; } }
@container wib-ml-preview (min-width: 250px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.3125; } }
@container wib-ml-preview (min-width: 260px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.325; } }
@container wib-ml-preview (min-width: 270px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.3375; } }
@container wib-ml-preview (min-width: 280px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.35; } }
@container wib-ml-preview (min-width: 290px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.3625; } }
@container wib-ml-preview (min-width: 300px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.375; } }
@container wib-ml-preview (min-width: 310px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.3875; } }
@container wib-ml-preview (min-width: 320px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.4; } }
@container wib-ml-preview (min-width: 330px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.4125; } }
@container wib-ml-preview (min-width: 340px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.425; } }
@container wib-ml-preview (min-width: 350px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.4375; } }
@container wib-ml-preview (min-width: 360px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.45; } }
@container wib-ml-preview (min-width: 370px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.4625; } }
@container wib-ml-preview (min-width: 380px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.475; } }
@container wib-ml-preview (min-width: 390px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.4875; } }
@container wib-ml-preview (min-width: 400px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.5; } }
@container wib-ml-preview (min-width: 410px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.5125; } }
@container wib-ml-preview (min-width: 420px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.525; } }
@container wib-ml-preview (min-width: 430px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.5375; } }
@container wib-ml-preview (min-width: 440px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.55; } }
@container wib-ml-preview (min-width: 450px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.5625; } }
@container wib-ml-preview (min-width: 460px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.575; } }
@container wib-ml-preview (min-width: 470px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.5875; } }
@container wib-ml-preview (min-width: 480px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.6; } }
@container wib-ml-preview (min-width: 490px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.6125; } }
@container wib-ml-preview (min-width: 500px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.625; } }
@container wib-ml-preview (min-width: 510px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.6375; } }
@container wib-ml-preview (min-width: 520px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.65; } }
@container wib-ml-preview (min-width: 530px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.6625; } }
@container wib-ml-preview (min-width: 540px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.675; } }
@container wib-ml-preview (min-width: 550px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.6875; } }
@container wib-ml-preview (min-width: 560px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.7; } }
@container wib-ml-preview (min-width: 570px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.7125; } }
@container wib-ml-preview (min-width: 580px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.725; } }
@container wib-ml-preview (min-width: 590px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.7375; } }
@container wib-ml-preview (min-width: 600px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.75; } }
@container wib-ml-preview (min-width: 610px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.7625; } }
@container wib-ml-preview (min-width: 620px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.775; } }
@container wib-ml-preview (min-width: 630px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.7875; } }
@container wib-ml-preview (min-width: 640px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.8; } }
@container wib-ml-preview (min-width: 650px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.8125; } }
@container wib-ml-preview (min-width: 660px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.825; } }
@container wib-ml-preview (min-width: 670px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.8375; } }
@container wib-ml-preview (min-width: 680px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.85; } }
@container wib-ml-preview (min-width: 690px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.8625; } }
@container wib-ml-preview (min-width: 700px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.875; } }
@container wib-ml-preview (min-width: 710px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.8875; } }
@container wib-ml-preview (min-width: 720px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.9; } }
@container wib-ml-preview (min-width: 730px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.9125; } }
@container wib-ml-preview (min-width: 740px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.925; } }
@container wib-ml-preview (min-width: 750px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.9375; } }
@container wib-ml-preview (min-width: 760px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.95; } }
@container wib-ml-preview (min-width: 770px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.9625; } }
@container wib-ml-preview (min-width: 780px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.975; } }
@container wib-ml-preview (min-width: 790px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 0.9875; } }
@container wib-ml-preview (min-width: 800px) { .wib-ml-wrap.wib-no-js .wib-ml-scaler { zoom: 1; } }

.wib-ml-wrap.wib-no-js .wib-ml-sig-canvas {
    /* inline-block, no block: el canvas con JS es un reemplazado en línea y
       deja el mismo hueco de línea base debajo. */
    display: inline-block;
}