/* WP Invoice Builder — Estimate & Proposal Generator
 *
 * Dirección de diseño: "mesa de presupuestos". Papel cálido en vez de blanco
 * clínico, tinta casi negra, un único acento (el que el admin configure) y un
 * serif editorial —Instrument Serif— para los titulares, que rima con el
 * documento contractual que se acaba imprimiendo. Las cifras siempre en
 * monoespaciada de sistema: en una herramienta de dinero las columnas tienen que
 * cuadrar a ojo.
 *
 * El documento (más abajo, sección "El documento") NO participa de nada de esto:
 * es Times sobre A4 y se compone aparte.
 */

/* Instrument Serif (OFL 1.1) — auto-alojada en public/assets/fonts.
   Nada de CDN: el plugin se instala en sitios de terceros y una petición a un
   tercero en cada carga es una dependencia (y un problema de privacidad) que no
   hace falta. 30 KB en total, y solo en las páginas con el shortcode. */
@font-face {
    font-family: "Instrument Serif WIB";
    src: url("../fonts/instrument-serif-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Serif WIB";
    src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

    #wib-est-root {
    --wib-est-accent: #0044BB;

    --wib-est-ink: #16181d;
    --wib-est-ink-2: #4a4f59;
    --wib-est-ink-3: #82878f;
    --wib-est-paper: #f4f1ea;
    --wib-est-card: #fffdfa;
    --wib-est-field: #faf8f4;
    --wib-est-rule: #e4dfd4;
    --wib-est-rule-2: #efebe2;
    --wib-est-warn: #a55b12;

    --wib-est-display: "Instrument Serif WIB", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --wib-est-ui: "Avenir Next", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
    --wib-est-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    max-width: 1080px;
    margin: 0 auto !important;
    padding: 0 !important;
    /* Base de la que tira el `inherit` del reset. */
    font-family: var(--wib-est-ui) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: left !important;
    color: var(--wib-est-ink) !important;
    box-sizing: border-box;

    /* Textura del papel: dos manchas de acento diluidísimas. No es decoración
       gratuita — separa la herramienta del fondo del tema de WordPress, que
       puede ser cualquier cosa. */
    background:
        radial-gradient(1100px 420px at 12% -8%, var(--wib-est-accent-soft, rgba(0,68,187,0.07)), transparent 70%),
        radial-gradient(760px 380px at 108% 4%, rgba(0, 0, 0, 0.035), transparent 68%),
        var(--wib-est-paper);
    border-radius: 20px !important;
}

    #wib-est-root * {
    box-sizing: border-box;
}

/* El documento vive fuera de pantalla (a la izquierda) y mide 794px fijos.
   `overflow-x: clip` corta ese desbordamiento sin crear contexto de scroll —
   `hidden` habría convertido la barra pegajosa del pie en no-pegajosa. */#wib-est-root {
    position: relative;
    overflow-x: clip;
}

/* La regla `[hidden]` de la hoja del navegador pierde contra CUALQUIER regla de
   autor que declare display. Las fases, los avisos y el placeholder del logo se
   togglean con `hidden` desde JS: este candado los cubre todos de una vez. */
#wib-est-root [hidden],
.wib-est-wrap [hidden],
.wib-est-scope [hidden] {
    display: none !important;
}

/* Sin flechitas en los campos numéricos: en importes y cantidades no aportan
   nada y disparan cambios accidentales con la rueda del ratón. */#wib-est-root input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

    #wib-est-root input[type="number"]::-webkit-outer-spin-button,
#wib-est-root input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0 !important;
}

    #wib-est-root .wib-est-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

    #wib-est-root .wib-est-editor {
    padding: 40px 36px 30px !important;
}

/* ── Blindaje contra la tipografía del tema ──────────────────────────
 *
 * Elementor (y casi cualquier constructor) declara su tipografía por TIPO de
 * elemento y con !important: `.elementor-widget-container p` con font-size !important. Entre dos !important gana el selector más específico, así que
 * `!important` a secas en una clase suelta (0,1,0) PIERDE contra eso (0,2,0) —
 * medido: los "Flat rate · Hour · Room" de las tarjetas de oficio salían a 19px.
 *
 * Por eso la tipografía del editor se declara como `.wib-est-wrap <tag>.<clase>`
 * (0,2,1): gana sin recurrir a un #id ni a un `*` que arrastraría con todo. Si
 * mañana otro texto aparece pisado, el arreglo es exactamente este patrón.
 *
 * OJO: esto vale SOLO para el chrome del editor. Las reglas de `.wib-est-doc*`
 * no llevan prefijo a propósito — ese HTML se captura y se vuelca en la pestaña
 * del PDF, fuera de `.wib-est-wrap`, y allí el prefijo no casaría con nada. */

/* ── Cabecera ───────────────────────────────────────────────────────── */

/* Hero en blanco liso con filete, sobre el papel del editor: se lee como bloque
   propio, del mismo material que la tarjeta de las fases. */#wib-est-root .wib-est-header {
    margin-bottom: 30px !important;
    padding: 30px 32px 32px !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid var(--wib-est-rule) !important;
    box-shadow: 0 1px 2px rgba(22, 24, 29, 0.04), 0 18px 40px -28px rgba(22, 24, 29, 0.4) !important;
}

    #wib-est-root span.wib-est-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 2.4px !important;
    text-transform: uppercase !important;
    color: var(--wib-est-accent) !important;
}

    #wib-est-root .wib-est-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--wib-est-accent) !important;
}

/* Los titulares del generador son <p> con clase, no <h*>: la página anfitriona
   manda en el esquema de encabezados (SEO). Por eso cada uno declara TODA su
   tipografía —margen, cuerpo, peso, interlineado, tracking, color y familia—:
   ni los valores por defecto de un <h*> ni los que el tema pone a los <p> deben
   notarse. */
    #wib-est-root p.wib-est-title {
    display: block;
    width: 100%;
    max-width: none;
    margin: 12px 0 10px !important;
    font-family: var(--wib-est-display) !important;
    font-size: clamp(30px, 4.4vw, 48px) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.06 !important;
    letter-spacing: -0.5px !important;
    text-transform: none !important;
    color: var(--wib-est-ink) !important;
}

/* La segunda mitad del titular, en cursiva y en acento. En LÍNEA, no en bloque:
   el nombre completo se lee de un tirón y solo parte cuando de verdad no cabe. */#wib-est-root .wib-est-title em {
    display: inline;
    margin-left: 0.25em !important;
    font-style: italic !important;
    color: var(--wib-est-accent) !important;
}

    #wib-est-root p.wib-est-sub {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    color: var(--wib-est-ink-2) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* ── Rail de progreso ───────────────────────────────────────────────── */#wib-est-root .wib-est-rail {
    position: relative;
    margin-bottom: 26px !important;
}

/* La línea vive detrás de los puntos, a la altura de su centro. */#wib-est-root .wib-est-rail .wib-est-rail-track {
    position: absolute;
    top: 17px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--wib-est-rule) !important;
    border-radius: 2px !important;
}#wib-est-rail-fill {
    display: block;
    height: 100% !important;
    width: 0;
    background: var(--wib-est-accent) !important;
    border-radius: 2px !important;
    transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}#wib-est-steps {
    position: relative;
    display: flex;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}#wib-est-steps li.wib-est-step {
    flex: 1;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}#wib-est-steps button.wib-est-step-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: var(--wib-est-ink-3) !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    cursor: pointer;
}#wib-est-steps button.wib-est-step-btn:disabled {
    cursor: default;
}#wib-est-steps span.wib-est-step-dot {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid var(--wib-est-rule) !important;
    background: var(--wib-est-card) !important;
    font-family: var(--wib-est-mono) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--wib-est-ink-3) !important;
    transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, color 200ms ease;
}#wib-est-steps .wib-est-step-check {
    position: absolute;
    width: 15px;
    height: 15px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 160ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}#wib-est-steps .wib-est-step--done span.wib-est-step-dot {
    border-color: var(--wib-est-accent) !important;
    background: var(--wib-est-accent) !important;
    color: #fff !important;
}#wib-est-steps .wib-est-step--done span.wib-est-step-num {
    opacity: 0;
}#wib-est-steps .wib-est-step--done .wib-est-step-check {
    opacity: 1;
    transform: scale(1);
}#wib-est-steps .wib-est-step--done button.wib-est-step-btn {
    color: var(--wib-est-ink-2) !important;
}#wib-est-steps .wib-est-step--active span.wib-est-step-dot {
    border-color: var(--wib-est-accent) !important;
    background: var(--wib-est-card) !important;
    color: var(--wib-est-accent) !important;
    transform: scale(1.1);
    box-shadow: 0 0 0 6px var(--wib-est-accent-glow, rgba(0, 68, 187, 0.15)) !important;
}#wib-est-steps .wib-est-step--active button.wib-est-step-btn {
    color: var(--wib-est-ink) !important;
    font-weight: 600 !important;
}#wib-est-steps button.wib-est-step-btn:not(:disabled):hover span.wib-est-step-dot {
    border-color: var(--wib-est-accent) !important;
}

/* ── Tarjeta ────────────────────────────────────────────────────────── */#wib-est-root .wib-est-card {
    position: relative;
    background: var(--wib-est-card) !important;
    border: 1px solid var(--wib-est-rule) !important;
    border-radius: 16px !important;
    padding: 32px 34px 0 !important;
    box-shadow: 0 1px 2px rgba(22, 24, 29, 0.04), 0 18px 40px -28px rgba(22, 24, 29, 0.4) !important;
}

    #wib-est-root p.wib-est-kicker {
    margin: 0 0 8px !important;
    font-family: var(--wib-est-mono) !important;
    font-size: 11px !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    color: var(--wib-est-accent) !important;
}

    #wib-est-root p.wib-est-phase-title {
    display: block;
    margin: 0 0 8px !important;
    font-family: var(--wib-est-display) !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-transform: none !important;
    line-height: 1.15 !important;
    letter-spacing: -0.2px !important;
    color: var(--wib-est-ink) !important;
}

    #wib-est-root p.wib-est-hint {
    margin: 0 0 24px !important;
    width: 100%;
    max-width: none;
    color: var(--wib-est-ink-2) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
}

    #wib-est-root p.wib-est-group-title {
    display: block;
    margin: 0 0 16px !important;
    font-family: var(--wib-est-ui) !important;
    font-size: 11px !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    color: var(--wib-est-ink-3) !important;
}

    #wib-est-root .wib-est-sep {
    height: 1px;
    margin: 30px 0 24px !important;
    border: none !important;
    background: var(--wib-est-rule-2) !important;
}

/* Cada fase entra con un escalonado corto: da la sensación de avanzar de
   verdad, no de que el formulario cambia de golpe. */#wib-est-root .wib-est-phase > * {
    animation: wib-est-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

    #wib-est-root .wib-est-phase > *:nth-child(1) { animation-delay: 0ms; }

    #wib-est-root .wib-est-phase > *:nth-child(2) { animation-delay: 40ms; }

    #wib-est-root .wib-est-phase > *:nth-child(3) { animation-delay: 80ms; }

    #wib-est-root .wib-est-phase > *:nth-child(4) { animation-delay: 120ms; }

    #wib-est-root .wib-est-phase > *:nth-child(n+5) { animation-delay: 160ms; }

@keyframes wib-est-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ── Campos ─────────────────────────────────────────────────────────── */#wib-est-root .wib-est-field {
    margin-bottom: 18px !important;
    flex: 1;
    min-width: 0;
}

    #wib-est-root .wib-est-field label {
    display: block;
    margin-bottom: 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    color: var(--wib-est-ink-2) !important;
}

    #wib-est-root .wib-est-field input,
#wib-est-root .wib-est-field select,
#wib-est-root .wib-est-field textarea {
    width: 100%;
    padding: 12px 14px !important;
    border: 1px solid var(--wib-est-rule) !important;
    border-radius: 10px !important;
    background: var(--wib-est-field) !important;
    color: var(--wib-est-ink) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

    #wib-est-root .wib-est-field textarea {
    resize: vertical;
}

    #wib-est-root .wib-est-field input::placeholder,
#wib-est-root .wib-est-field textarea::placeholder {
    color: #b3b0a8 !important;
}

    #wib-est-root .wib-est-field input:focus,
#wib-est-root .wib-est-field select:focus,
#wib-est-root .wib-est-field textarea:focus {
    outline: none;
    background: #fff !important;
    border-color: var(--wib-est-accent) !important;
    box-shadow: 0 0 0 4px var(--wib-est-accent-glow, rgba(0, 68, 187, 0.15)) !important;
}

/* Campo señalado por el botón Continue: no es un error del usuario, es un "te
   falta esto". Por eso ámbar y no rojo. */#wib-est-root .wib-est-field.is-missing input,
#wib-est-root .wib-est-field.is-missing select,
#wib-est-root .wib-est-field.is-missing textarea {
    border-color: var(--wib-est-warn) !important;
    background: #fdf7ef !important;
}

    #wib-est-root .wib-est-mono {
    font-family: var(--wib-est-mono) !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
}

    #wib-est-root .wib-est-row {
    display: flex;
    gap: 18px;
}

    #wib-est-root .wib-est-field--narrow {
    max-width: 320px;
}

/* Sufijo pegado al campo (el % del impuesto). */#wib-est-root .wib-est-affix {
    position: relative;
}

    #wib-est-root .wib-est-affix input {
    padding-right: 42px !important;
}

    #wib-est-root span.wib-est-affix-tag {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-family: var(--wib-est-mono) !important;
    font-size: 13px !important;
    color: var(--wib-est-ink-3) !important;
    pointer-events: none;
}

/* ── Oficios ────────────────────────────────────────────────────────── */#wib-est-root .wib-est-trades {
    margin-bottom: 4px !important;
}

    #wib-est-root .wib-est-sector + .wib-est-sector {
    margin-top: 22px !important;
}

/* Epígrafe con filete que ocupa el resto de la línea: ordena los cuatro
   sectores sin meter más cajas. */#wib-est-root p.wib-est-sector-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px !important;
    font-family: var(--wib-est-ui) !important;
    font-size: 10.5px !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    color: var(--wib-est-ink-3) !important;
}

    #wib-est-root .wib-est-sector-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wib-est-rule-2) !important;
}

    #wib-est-root .wib-est-trade-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

    #wib-est-root .wib-est-trade {
    position: relative;
    display: block;
    padding: 16px 16px 14px !important;
    border: 1px solid var(--wib-est-rule) !important;
    border-radius: 13px !important;
    background: var(--wib-est-field) !important;
    cursor: pointer;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease,
                box-shadow 180ms ease, background 180ms ease;
}

    #wib-est-root .wib-est-trade:hover {
    transform: translateY(-2px);
    border-color: var(--wib-est-accent-line, #c9d2ea) !important;
    background: #fff !important;
    box-shadow: 0 10px 24px -18px rgba(22, 24, 29, 0.55) !important;
}

/* El input real sigue ahí (radio de verdad: teclado, flechas, lectores de
   pantalla); solo es invisible. El foco se pinta en la tarjeta. */#wib-est-root .wib-est-trade-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0 !important;
}

    #wib-est-root .wib-est-trade:focus-within {
    border-color: var(--wib-est-accent) !important;
    box-shadow: 0 0 0 4px var(--wib-est-accent-glow, rgba(0, 68, 187, 0.15)) !important;
}

    #wib-est-root .wib-est-trade-icon {
    display: block;
    width: 26px;
    height: 26px;
    margin-bottom: 12px !important;
    color: var(--wib-est-accent) !important;
}

    #wib-est-root span.wib-est-trade-name {
    display: block;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: var(--wib-est-ink) !important;
}

    #wib-est-root span.wib-est-trade-units {
    display: block;
    margin-top: 4px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    color: var(--wib-est-ink-3) !important;
}

    #wib-est-root .wib-est-trade-tick {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50% !important;
    background: var(--wib-est-accent) !important;
    color: #fff !important;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 160ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

    #wib-est-root .wib-est-trade-tick svg {
    width: 11px;
    height: 11px;
}

    #wib-est-root .wib-est-trade-input:checked ~ .wib-est-trade-tick {
    opacity: 1;
    transform: scale(1);
}

    #wib-est-root .wib-est-trade:has(.wib-est-trade-input:checked) {
    border-color: var(--wib-est-accent) !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px var(--wib-est-accent) !important;
}

/* Reserva para navegadores sin :has() — la tarjeta elegida se marca igual
   porque el JS le pone la clase. */#wib-est-root .wib-est-trade.is-picked {
    border-color: var(--wib-est-accent) !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px var(--wib-est-accent) !important;
}

/* ── Logo + nombre ──────────────────────────────────────────────────── */#wib-est-root .wib-est-brand-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px !important;
}

    #wib-est-root .wib-est-brand-fields {
    flex: 1;
    min-width: 0;
}

    #wib-est-root .wib-est-logo-box {
    position: relative;
    flex: none;
    width: 132px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #cdc7ba !important;
    border-radius: 13px !important;
    background: var(--wib-est-field) !important;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 160ms ease, background 160ms ease;
}

    #wib-est-root .wib-est-logo-box:hover {
    border-color: var(--wib-est-accent) !important;
    background: #fff !important;
}

    #wib-est-root .wib-est-logo-box:focus-within {
    outline: none;
    border-color: var(--wib-est-accent) !important;
    box-shadow: 0 0 0 4px var(--wib-est-accent-glow, rgba(0, 68, 187, 0.15)) !important;
}

    #wib-est-root span.wib-est-logo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--wib-est-ink-3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

    #wib-est-root span.wib-est-logo-hint {
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 0.4px !important;
    text-transform: none !important;
    color: #b3b0a8 !important;
}

    #wib-est-root .wib-est-logo-thumb {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #fff !important;
}

/* El input cubre la caja entera: cualquier clic dentro abre el selector, y el
   teclado lo alcanza igual porque sigue siendo el mismo control. */#wib-est-root .wib-est-logo-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

    #wib-est-root button.wib-est-link-btn {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: var(--wib-est-accent) !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ── Tabla de ítems ─────────────────────────────────────────────────── */#wib-est-root .wib-est-items-scroll {
    overflow-x: auto;
    border: 1px solid var(--wib-est-rule) !important;
    border-radius: 13px !important;
    background: var(--wib-est-card) !important;
}

    #wib-est-root .wib-est-items {
    width: 100%;
    min-width: 640px;
    margin: 0 !important;
    border-collapse: collapse;
    font-size: 14px !important;
}

    #wib-est-root .wib-est-items th {
    padding: 11px 12px !important;
    background: var(--wib-est-field) !important;
    border-bottom: 1px solid var(--wib-est-rule) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
    color: var(--wib-est-ink-3) !important;
    text-align: left !important;
    white-space: nowrap;
}

    #wib-est-root .wib-est-items td {
    padding: 5px 7px !important;
    border-bottom: 1px solid var(--wib-est-rule-2) !important;
    vertical-align: middle;
}

    #wib-est-root .wib-est-items tbody tr:last-child td {
    border-bottom: none !important;
}

    #wib-est-root .wib-est-items tbody tr {
    transition: background 140ms ease;
}

    #wib-est-root .wib-est-items tbody tr:hover,
#wib-est-root .wib-est-items tbody tr:focus-within {
    background: var(--wib-est-accent-soft, #f7f8fa) !important;
}

    #wib-est-root .wib-est-th-num,
#wib-est-root .wib-est-td-num { text-align: right !important; }

    #wib-est-root .wib-est-th-unit,
#wib-est-root .wib-est-td-unit { width: 180px; }

    #wib-est-root .wib-est-th-qty,
#wib-est-root .wib-est-td-qty { width: 80px; }

    #wib-est-root .wib-est-th-price,
#wib-est-root .wib-est-td-price { width: 110px; }

    #wib-est-root .wib-est-th-total,
#wib-est-root .wib-est-td-total { width: 122px; }

    #wib-est-root .wib-est-th-act,
#wib-est-root .wib-est-td-act { width: 46px; }

/* Los campos de la tabla van blindados con !important.
 *
 * Son los únicos <input> del generador que viven dentro de una <table>, y los
 * temas de WordPress los pisan sin piedad (borde, fondo, padding, alto de
 * línea): sin el blindaje, cada tema pintaba la rejilla de ítems a su manera.
 *
 * OJO al tocar esto: una declaración !important gana a CUALQUIER regla normal,
 * por específica que sea. Todo lo que sobrescriba estas propiedades más abajo
 * —el foco, las cifras en monoespaciada, las fichas de móvil— tiene que llevar
 * !important también, o deja de aplicarse en silencio. */#wib-est-root .wib-est-item-input {
    width: 100% !important;
    padding: 9px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--wib-est-ink) !important;
    font-family: inherit !important;
    font-size: 14px !important;
}

    #wib-est-root .wib-est-item-input::placeholder {
    color: #b3b0a8 !important;
}

    #wib-est-root .wib-est-item-input:focus {
    outline: none;
    background: #fff !important;
    border-color: var(--wib-est-accent) !important;
    box-shadow: 0 0 0 3px var(--wib-est-accent-glow, rgba(0, 68, 187, 0.15)) !important;
}

    #wib-est-root .wib-est-item-unit {
    font-size: 13px !important;
}

/* Cifras tabulares y monoespaciadas: las columnas de dinero cuadran de verdad. */#wib-est-root .wib-est-td-num .wib-est-item-input,
#wib-est-root .wib-est-td-total {
    font-family: var(--wib-est-mono) !important;
    font-size: 13px !important;
    font-variant-numeric: tabular-nums;
    text-align: right !important;
}

    #wib-est-root .wib-est-td-total {
    padding-right: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap;
}

/* Una línea todavía a cero se pinta apagada: la vista distingue de un vistazo lo
   que ya suma de lo que está a medio rellenar. */#wib-est-root .wib-est-td-total--zero {
    color: #bdb9b0 !important;
    font-weight: 400 !important;
}

    #wib-est-root button.wib-est-del-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: none !important;
    color: #b3aea4 !important;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

    #wib-est-root button.wib-est-del-btn:hover,
#wib-est-root button.wib-est-del-btn:focus-visible {
    border-color: #efc9c9 !important;
    background: #fdf3f3 !important;
    color: #c1362f !important;
}

    #wib-est-root .wib-est-items-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 14px 0 22px !important;
}

    #wib-est-root button.wib-est-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px !important;
    border: 1px solid var(--wib-est-rule) !important;
    border-radius: 10px !important;
    background: var(--wib-est-card) !important;
    color: var(--wib-est-ink) !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

    #wib-est-root button.wib-est-add-btn:hover {
    border-color: var(--wib-est-accent) !important;
    color: var(--wib-est-accent) !important;
    transform: translateY(-1px);
}

    #wib-est-root p.wib-est-items-sub {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
    color: var(--wib-est-ink-3) !important;
}

/* ── Revisión ───────────────────────────────────────────────────────── */#wib-est-root .wib-est-review-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 22px !important;
}

    #wib-est-root .wib-est-review {
    border: 1px solid var(--wib-est-rule) !important;
    border-radius: 13px !important;
    overflow: hidden;
}

    #wib-est-root .wib-est-review-row {
    display: flex;
    gap: 16px;
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--wib-est-rule-2) !important;
    font-size: 13.5px !important;
}

    #wib-est-root .wib-est-review-row:last-child { border-bottom: none !important; }

    #wib-est-root span.wib-est-review-label {
    flex: none;
    width: 118px;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--wib-est-ink-3) !important;
    padding-top: 2px !important;
}

    #wib-est-root span.wib-est-review-value {
    min-width: 0;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

/* El resumen es el "ticket": tinta oscura, cifras en mono, total en serif. */#wib-est-root .wib-est-summary {
    margin: 0 !important;
    padding: 20px 22px !important;
    border-radius: 13px !important;
    background: var(--wib-est-ink) !important;
    color: #f2efe9 !important;
}

    #wib-est-root .wib-est-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0 !important;
}

    #wib-est-root .wib-est-summary dt {
    margin: 0 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: rgba(242, 239, 233, 0.62) !important;
}

    #wib-est-root .wib-est-summary dd {
    margin: 0 !important;
    font-family: var(--wib-est-mono) !important;
    font-size: 14px !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

    #wib-est-root .wib-est-summary-row--grand {
    margin-top: 10px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(242, 239, 233, 0.18) !important;
}

    #wib-est-root .wib-est-summary-row--grand dt {
    font-size: 11px !important;
    color: rgba(242, 239, 233, 0.8) !important;
}

    #wib-est-root .wib-est-summary-row--grand dd {
    font-family: var(--wib-est-display) !important;
    font-size: 32px !important;
    line-height: 1 !important;
    letter-spacing: 0.4px !important;
    color: #fff !important;
}

/* ── Botones ────────────────────────────────────────────────────────── */#wib-est-root button.wib-est-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 22px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    cursor: pointer;
    transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms ease,
                background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

    #wib-est-root button.wib-est-btn--primary {
    background: var(--wib-est-accent) !important;
    border-color: var(--wib-est-accent) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px -14px var(--wib-est-accent) !important;
}

    #wib-est-root button.wib-est-btn--primary:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -14px var(--wib-est-accent) !important;
}

    #wib-est-root button.wib-est-btn--ghost {
    background: var(--wib-est-card) !important;
    border-color: var(--wib-est-rule) !important;
    color: var(--wib-est-ink) !important;
}

    #wib-est-root button.wib-est-btn--ghost:not(:disabled):hover {
    border-color: var(--wib-est-accent) !important;
    color: var(--wib-est-accent) !important;
}

    #wib-est-root button.wib-est-btn--quiet {
    background: none !important;
    border-color: transparent !important;
    color: var(--wib-est-ink-2) !important;
    font-weight: 500 !important;
}

    #wib-est-root button.wib-est-btn--quiet:hover {
    color: var(--wib-est-ink) !important;
    background: var(--wib-est-field) !important;
}

    #wib-est-root button.wib-est-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    box-shadow: none !important;
}

    #wib-est-root .wib-est-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* ── Navegación (pie de la tarjeta) ─────────────────────────────────── */#wib-est-root .wib-est-nav {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px -34px 0 !important;
    padding: 16px 34px !important;
    border-top: 1px solid var(--wib-est-rule-2) !important;
    border-radius: 0 0 15px 15px !important;
    /* Opaca y con sombra hacia arriba: el contenido de la fase pasa por debajo
       al hacer scroll, y con transparencia el texto se leía a través de la
       barra. Sin backdrop-filter, que html2canvas y los navegadores viejos
       tratan de formas distintas. */
    background: var(--wib-est-card);
    box-shadow: 0 -12px 20px -18px rgba(22, 24, 29, 0.5) !important;
}

    #wib-est-root .wib-est-nav-mid {
    flex: 1;
    min-width: 0;
}

    #wib-est-root p.wib-est-blocked {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--wib-est-warn) !important;
}

    #wib-est-root p.wib-est-running {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
    color: var(--wib-est-ink-3) !important;
}

    #wib-est-root p.wib-est-missing {
    margin: 0 0 16px !important;
    padding: 12px 14px !important;
    border-left: 3px solid var(--wib-est-warn) !important;
    border-radius: 0 8px 8px 0 !important;
    background: #fdf7ef !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--wib-est-warn) !important;
}

/* Selector deliberadamente largo.
 *
 * Elementor declara su tipografía de párrafo con !important, y entre dos
 * declaraciones !important gana la MÁS ESPECÍFICA — así que aquí el !important
 * solo no bastaba: hay que subir el peso del selector. Tres clases + el tipo de
 * elemento (0,3,1) pasan por encima de lo que Elementor pone en el widget, sin
 * llegar a un #id ni a un `* !important` que arrastraría con todo. El <span>
 * interior se ata al padre porque Elementor también estila los hijos. */#wib-est-root .wib-est-editor p.wib-est-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 24px 0 0 !important;
    color: var(--wib-est-ink-3) !important;
    font-family: var(--wib-est-ui) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

    #wib-est-root .wib-est-editor p.wib-est-disclaimer span {
    font: inherit !important;
    color: inherit !important;
    letter-spacing: inherit !important;
}

    #wib-est-root .wib-est-disclaimer-icon {
    flex: none;
    margin-top: 2px !important;
}


/* Textos que heredaban su tipografía del padre: sin regla propia, la del tema
   (por tipo de elemento) llegaba antes. Ver el bloque "Blindaje" de arriba. */#wib-est-steps span.wib-est-step-label {
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    font-family: var(--wib-est-ui) !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: inherit !important;
}#wib-est-steps span.wib-est-step-num {
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--wib-est-mono) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: inherit !important;
}

    #wib-est-root span.wib-est-req {
    font-size: inherit !important;
    color: var(--wib-est-accent) !important;
}

    #wib-est-root .wib-est-field label {
    font-size: 11px !important;
    font-family: var(--wib-est-ui) !important;
    font-weight: 700 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    color: var(--wib-est-ink-2) !important;
}

    #wib-est-root .wib-est-summary dt {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}

    #wib-est-root .wib-est-summary dd {
    font-family: var(--wib-est-mono) !important;
    font-size: 14px !important;
}

    #wib-est-root .wib-est-summary-row--grand dd {
    font-family: var(--wib-est-display) !important;
    font-size: 32px !important;
    line-height: 1 !important;
    color: #fff !important;
}

    #wib-est-root p.wib-est-items-sub b,
#wib-est-root p.wib-est-running b {
    font-family: var(--wib-est-mono) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--wib-est-ink) !important;
    font-variant-numeric: tabular-nums;
}

    #wib-est-root p.wib-est-items-sub b { font-size: 19px !important; }

    #wib-est-root p.wib-est-running b { font-size: 17px !important; }

    .wib-est-scope span.wib-est-modal-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    color: var(--wib-est-ink-3) !important;
}


/* Etiquetas sueltas dentro de un <p> ya blindado: heredan de su padre en vez de
   quedarse con lo que el tema imponga a los <span>. */
#wib-est-root p.wib-est-running > span,
#wib-est-root p.wib-est-items-sub > span {
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    color: inherit !important;
}

/* ── Host del documento ─────────────────────────────────────────────── */

/* Fuera de pantalla, NUNCA display:none ni visibility:hidden: el paginador de
   wib-est.js decide los saltos midiendo alturas reales, y un elemento oculto
   mide cero — el documento saldría de una página y el PDF recortado. Aquí se
   maqueta de verdad, simplemente no se ve. El popup lo mueve y lo devuelve. */.wib-est-scope .wib-est-preview-host {
    position: absolute;
    left: -10000px;
    top: 0;
    width: 794px;
}

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

/* Quien haya pedido menos movimiento, menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    #wib-est-root *,
#wib-est-root *::before,
#wib-est-root *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ── El documento ────────────────────────────────────────────────────
 *
 * Dirección: documento contractual paginado, al modo de un contrato de despacho
 * (LawDepot y compañía). Nada de barra de color a sangre: papel blanco, Times a
 * 12pt/18pt, título centrado en versales, cláusulas numeradas con epígrafe en
 * negrita subrayada, cabecera corrida con "Page X of Y" y bloque de firmas al
 * pie. Un presupuesto se lee y se firma como un contrato, no como un folleto.
 *
 * El acento del backoffice sobrevive solo en detalles de un pixel (los filetes
 * del encabezado de página y de la tabla): el color no debe competir con el
 * texto en un documento que alguien va a imprimir en blanco y negro.
 *
 * 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.
 */.wib-est-doc {
    /* El documento se captura SOLO (el outerHTML se vuelca en la pestaña del
       PDF), así que declara aquí su tipografía y su box-sizing en vez de
       heredarlos de .wib-est-wrap, que no viaja. */
    font-family: "Times New Roman", Times, Georgia, serif;
    font-size: 12pt !important;
    line-height: 18pt !important;
    color: #000 !important;
    background: transparent !important;
}.wib-est-doc,
.wib-est-doc * {
    box-sizing: border-box;
}

/* ── La página ──
 *
 * A4 a 96dpi: 794 × 1123 px. Es el mismo ratio que la hoja de jsPDF (210×297mm),
 * así que cada caja entra en una página del PDF sin deformarse. Las medidas
 * están duplicadas en PAGE_W/PAGE_H de wib-est.js — test-estimate.js vigila que
 * no se separen. */.wib-est-page {
    position: relative;
    width: 794px !important;
    height: 1123px !important;
    padding: 64px 72px 56px !important;
    background: #fff !important;
    overflow: hidden;
}.wib-est-page + .wib-est-page {
    margin-top: 18px !important;   /* solo en pantalla: en el PDF cada caja es una hoja */
}

/* Cabecera corrida. En la primera página no se imprime —ahí manda el título—,
   igual que en los contratos: el encabezado sirve para reconocer las hojas
   sueltas, y la primera ya se reconoce sola. */.wib-est-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    height: 30px !important;
    margin-bottom: 22px !important;
    padding-bottom: 5px !important;
    border-bottom: 1px solid var(--wib-est-accent, #000) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 8.5pt !important;
    line-height: 1.2 !important;
    color: #333 !important;
}.wib-est-page--first .wib-est-page-head {
    border-bottom: none !important;
    visibility: hidden;
}.wib-est-page-head-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}.wib-est-page-head-num {
    flex: none;
}.wib-est-page-body {
    /* Alto útil de la caja de tipo: 1123 − 64/56 de padding − 52 de cabecera,
       con holgura para no pisar el pie (que va en position:absolute). Es la
       medida contra la que wib-est.js decide el salto de página, y por eso
       vive duplicada en CONTENT_H — el self-check vigila que coincidan. */
    height: 912px;
    overflow: hidden;
}.wib-est-page-foot {
    position: absolute;
    left: 72px;
    right: 72px;
    bottom: 30px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 8pt !important;
    line-height: 1.3 !important;
    color: #666 !important;
}

/* ── Bloques del documento ── */.wib-est-doc-logo-row {
    display: flex;
    justify-content: center;
    margin-bottom: 16px !important;
}.wib-est-doc-logo {
    max-height: 70px;
    max-width: 260px;
    object-fit: contain;
}/* <p>, no <h1> (ver docBlocks en wib-est.js): lleva toda su tipografía
   declarada para que ni el tema ni la hoja del navegador cambien el título en
   pantalla ni en el PDF. `.wib-est-doc p.` sube el peso por encima de los
   `.contenedor p` con !important de los constructores. */
.wib-est-doc p.wib-est-doc-title {
    display: block;
    margin: 6px 0 30px !important;
    padding: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18pt !important;
    font-weight: 700 !important;
    font-style: normal !important;
    color: #000 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}.wib-est-doc-p {
    margin: 0 0 18pt !important;
    text-align: left !important;
    word-break: break-word;
}.wib-est-doc-p--dated {
    font-weight: 700 !important;
}

/* Las partes, en dos columnas con su "(the …)" debajo, como en un contrato. */.wib-est-doc-parties {
    display: flex;
    gap: 34px;
    margin: 0 0 22pt !important;
}.wib-est-doc-party {
    flex: 1;
    min-width: 0;
}.wib-est-doc-party-role {
    margin-bottom: 2px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11pt !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
}.wib-est-doc-party-detail {
    line-height: 16pt !important;
    white-space: pre-line;
    word-break: break-word;
}.wib-est-doc-party-name {
    font-weight: 700 !important;
}.wib-est-doc-party-tag {
    font-style: italic !important;
}

/* Cláusula: epígrafe en negrita subrayada + cuerpo numerado. La numeración la
   pone el JS (no un contador CSS) porque el bloque puede empezar en una página y
   seguir en la siguiente, y un contador se reiniciaría con él. */.wib-est-doc-clause-head {
    margin: 0 0 6pt !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    page-break-after: avoid;
}.wib-est-doc-clause {
    margin: 0 0 18pt !important;
    padding-left: 34px !important;
    text-indent: -34px;
    word-break: break-word;
}.wib-est-doc-clause-num {
    display: inline-block;
    width: 34px !important;
    text-indent: 0;
}.wib-est-doc-sub {
    margin: 0 0 8pt 34px !important;
    padding-left: 18px !important;
    text-indent: -18px;
}

/* ── Tabla del desglose ── */.wib-est-doc-table {
    width: 100% !important;
    margin: 0 0 12pt !important;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9.5pt !important;
    line-height: 1.4 !important;
}.wib-est-doc-table th {
    padding: 6px 8px !important;
    border-bottom: 1.5px solid #000 !important;
    font-size: 8pt !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    vertical-align: bottom;
}.wib-est-doc-table td {
    padding: 7px 8px !important;
    border-bottom: 1px solid #c9ccd1 !important;
    vertical-align: top;
    word-break: break-word;
}.wib-est-doc-th-num,
.wib-est-doc-td-num {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}.wib-est-doc-th-unit,
.wib-est-doc-td-unit {
    width: 118px !important;
}.wib-est-doc-th-qty,
.wib-est-doc-td-qty {
    width: 58px !important;
}.wib-est-doc-th-price,
.wib-est-doc-td-price {
    width: 92px !important;
}.wib-est-doc-th-amount,
.wib-est-doc-td-amount {
    width: 100px !important;
    font-weight: 700 !important;
}

/* Aviso de continuación cuando el desglose parte en dos páginas: sin él, media
   tabla huérfana parece un documento incompleto. */.wib-est-doc-table-cont {
    margin: -6pt 0 12pt !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 8pt !important;
    font-style: italic !important;
    color: #555 !important;
}

/* ── Totales ── */.wib-est-doc-totals-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 18pt !important;
}.wib-est-doc-totals {
    width: 340px !important;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10pt !important;
}.wib-est-doc-totals td {
    padding: 5px 8px !important;
}.wib-est-doc-total-val {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}.wib-est-doc-grand td {
    border-top: 1.5px solid #000 !important;
    border-bottom: 3px double #000 !important;
    font-size: 11.5pt !important;
    font-weight: 700 !important;
}

/* ── Firmas ── */.wib-est-doc-sign {
    display: flex;
    gap: 44px;
    margin-top: 12pt !important;
}.wib-est-doc-sign-party {
    flex: 1;
    min-width: 0;
}.wib-est-doc-sign-per {
    margin-bottom: 26px !important;
}.wib-est-doc-sign-line {
    border-bottom: 1px solid #000 !important;
    height: 1px !important;
}.wib-est-doc-sign-cap {
    margin-top: 4px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 8.5pt !important;
    color: #333 !important;
}.wib-est-doc-sign-name {
    margin-top: 14px !important;
    font-weight: 700 !important;
    word-break: break-word;
}.wib-est-doc-sign-date {
    margin-top: 22px !important;
}


/* ── Popup de preview ───────────────────────────────────────────────── */.wib-est-scope .wib-est-modal {
    /* El centrado nativo del <dialog> lo dan `inset:0` + `margin:auto`, y un
       reset del tema que ponga margin 0 en todo —habitual en WordPress— lo anula
       dejándolo clavado en una esquina. Una clase gana a `*` por especificidad. */
    position: fixed;
    inset: 0;
    margin: auto !important;

    /* Ajustado al ancho real del documento (794px + el aire del cuerpo): así la
       hoja llena el popup en vez de flotar en un mar de gris. Por debajo de eso
       el scaler la encoge sola. */
    width: min(96vw, 866px);
    max-width: 96vw;
    max-height: 92dvh;
    padding: 0 !important;
    border: none !important;
    border-radius: 16px !important;
    background: var(--wib-est-card, #fffdfa) !important;
    box-shadow: 0 30px 80px rgba(22, 24, 29, 0.42) !important;
    overflow: hidden;
}

    .wib-est-scope .wib-est-modal::backdrop {
    background: rgba(14, 16, 22, 0.62) !important;
}

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

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

    .wib-est-scope .wib-est-modal-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 12px 18px !important;
    border-bottom: 1px solid var(--wib-est-rule, #e4dfd4) !important;
    background: var(--wib-est-card, #fffdfa) !important;
}

/* 40px de área táctil: debe cerrarse cómodamente con el pulgar. */.wib-est-scope button.wib-est-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-est-rule, #e4dfd4) !important;
    border-radius: 10px !important;
    background: var(--wib-est-card, #fffdfa) !important;
    color: var(--wib-est-ink-2, #4a4f59) !important;
    cursor: pointer;
}

    .wib-est-scope button.wib-est-modal-close:hover {
    background: var(--wib-est-field, #faf8f4) !important;
    color: var(--wib-est-ink, #16181d) !important;
}

    .wib-est-scope .wib-est-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px !important;
    background: var(--wib-est-paper, #f4f1ea) !important;
}.wib-est-modal-body .wib-est-page {
    box-shadow: 0 8px 28px -12px rgba(22, 24, 29, 0.3) !important;
}

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

@media (max-width: 860px) {
    #wib-est-root {
        border-radius: 0 !important;
    }

    #wib-est-root .wib-est-editor {
        padding: 26px 16px 20px !important;
    }

    /* El header no se achicaba con el resto del editor/tarjeta: se quedaba con
       32px de relleno lateral en un móvil de 320-375px, robándole ancho al
       título justo cuando más falta hace. */
    #wib-est-root .wib-est-header {
        margin-bottom: 22px !important;
        padding: 22px 18px 24px !important;
        border-radius: 14px !important;
    }

    #wib-est-root .wib-est-card {
        padding: 22px 18px 0 !important;
        border-radius: 14px !important;
    }

    #wib-est-root .wib-est-row {
        flex-direction: column;
        gap: 0;
    }

    #wib-est-root .wib-est-trade-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    #wib-est-root .wib-est-review-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Cinco etiquetas no caben sin partirse en tres líneas cada una: en estrecho
       el rail se queda en los puntos y el paso se nombra en el kicker de la
       fase ("Step 3 of 5"), que ya está ahí. */#wib-est-steps span.wib-est-step-label {
        display: none;
    }

    #wib-est-root .wib-est-rail-track {
        left: 12%;
        right: 12%;
    }

    #wib-est-root .wib-est-nav {
        margin: 22px -18px 0 !important;
        padding: 14px 18px calc(14px + env(safe-area-inset-bottom)) !important;
    }

    #wib-est-root .wib-est-actions .wib-est-btn {
        flex: 1 1 auto;
    }

    /* ── La tabla de ítems, en fichas ──
       Una tabla de 6 columnas en un móvil solo se puede leer con scroll lateral,
       y esto se rellena al pie de una obra con una mano. Cada línea pasa a ser
       una ficha con sus etiquetas delante — mismo DOM, misma delegación de
       eventos, cero JS extra. */#wib-est-root .wib-est-items-scroll {
        border: none !important;
        background: none !important;
        overflow: visible;
    }

    #wib-est-root .wib-est-items,
#wib-est-root .wib-est-items tbody,
#wib-est-root .wib-est-items tr,
#wib-est-root .wib-est-items td {
        display: block;
        width: auto;
        min-width: 0;
    }

    #wib-est-root .wib-est-items thead {
        display: none;
    }

    #wib-est-root .wib-est-items tr {
        position: relative;
        margin-bottom: 12px !important;
        padding: 12px 12px 8px !important;
        border: 1px solid var(--wib-est-rule) !important;
        border-radius: 13px !important;
        background: var(--wib-est-card) !important;
    }

    #wib-est-root .wib-est-items td {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 4px 0 !important;
        border: none !important;
    }
    /* `width:100%` dentro de una celda flex NO encoge: el input se llevaba el
       ancho completo Y la etiqueta empujaba 84px más, desbordando la página
       entera a la derecha. Con flex:1 + min-width:0 el input ocupa lo que queda. */#wib-est-root .wib-est-items td .wib-est-item-input {
        flex: 1;
        width: auto !important;
        min-width: 0;
    }

    #wib-est-root .wib-est-items td::before {
        content: attr(data-label);
        flex: none;
        width: 84px;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 1.2px !important;
        text-transform: uppercase !important;
        color: var(--wib-est-ink-3) !important;
    }
    /* La descripción manda: sin etiqueta y a ancho completo. */#wib-est-root .wib-est-items td:first-child::before {
        display: none;
    }

    #wib-est-root .wib-est-items td:first-child .wib-est-item-input {
        padding-left: 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    #wib-est-root .wib-est-item-input {
        background: var(--wib-est-field) !important;
    }

    #wib-est-root .wib-est-td-num .wib-est-item-input {
        text-align: left !important;
    }

    #wib-est-root .wib-est-td-total {
        justify-content: space-between;
        padding: 8px 0 2px !important;
        margin-top: 4px !important;
        border-top: 1px solid var(--wib-est-rule-2) !important;
        font-size: 16px !important;
        text-align: left !important;
    }

    #wib-est-root .wib-est-td-act {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 0 !important;
    }

    #wib-est-root .wib-est-td-act::before {
        display: none;
    }

    .wib-est-scope .wib-est-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0 !important;
    }

    .wib-est-scope .wib-est-modal-inner {
        max-height: 100dvh;
        height: 100dvh;
    }
    /* Respeta la barra de gestos / notch de iOS. */.wib-est-scope .wib-est-modal-body {
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 560px) {
    #wib-est-root .wib-est-trade-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #wib-est-root .wib-est-brand-row {
        flex-direction: column;
    }

    #wib-est-root .wib-est-nav {
        flex-wrap: wrap;
    }

    #wib-est-root .wib-est-nav-mid {
        order: 3;
        flex-basis: 100%;
    }

    #wib-est-root button.wib-est-btn {
        padding: 12px 16px !important;
    }

    /* El total grande (32px, sin wrap) y el subtotal de ítems viven en cajas
       de ~210-250px en un móvil estrecho: una cifra de varias cifras
       ("$12,345.67") se saca de la caja y `overflow-x: clip` del root se la
       come en silencio. Se deja envolver y se achica un poco. */
    #wib-est-root .wib-est-summary-row--grand {
        flex-wrap: wrap;
    }

    #wib-est-root .wib-est-summary-row--grand dd {
        width: 100%;
        white-space: normal !important;
        text-align: right !important;
        font-size: 27px !important;
    }

    #wib-est-root p.wib-est-items-sub,
    #wib-est-root p.wib-est-running {
        flex-wrap: wrap;
    }
}

/* ── Teléfonos muy estrechos (≤400px) ────────────────────────────────
   A 320-375px, 2 columnas de tarjetas de oficio siguen cabiendo pero el aire
   interno (16px de padding + icono de 26px) las deja apretadas: se recorta
   el relleno y se achican icono/texto para que no se lean pegadas. */
@media (max-width: 400px) {
    #wib-est-root .wib-est-trade {
        padding: 12px 10px 10px !important;
    }

    #wib-est-root .wib-est-trade-icon {
        width: 22px;
        height: 22px;
        margin-bottom: 8px !important;
    }

    #wib-est-root span.wib-est-trade-name {
        font-size: 13.5px !important;
    }

    #wib-est-root span.wib-est-trade-units {
        font-size: 10.5px !important;
    }

    #wib-est-root .wib-est-summary-row--grand dd {
        font-size: 24px !important;
    }
}
/* ── Reset frente al tema anfitrión ──────────────────────────────────
 *
 * Elementor y compañía declaran tipografía, fondos, bordes y espaciados sobre
 * TIPOS de elemento —`.elementor-widget-container ol li span`, con !important—
 * y con !important. Entre dos !important gana el selector MÁS ESPECÍFICO, así
 * que un `!important` en una clase suelta (0,1,0) pierde contra eso (0,2,3): es
 * lo que dejaba el stepper con fondo amarillo y el número a 22px.
 *
 * Por eso TODO el editor cuelga de `#wib-est-root`: un id pesa (1,0,0) y no hay
 * combinación de clases que lo alcance. Este bloque neutraliza lo que el tema
 * fuerza sobre elementos genéricos; las reglas de componente que vienen después
 * llevan una clase más y lo sobrescriben donde toca.
 *
 * Fuera de aquí quedan a propósito: inputs, selects y botones (cada uno declara
 * lo suyo) y todo `.wib-est-doc*` / `.wib-est-page*`, que se captura FUERA del
 * wrap en la pestaña del PDF y con prefijo no casaría con nada. */
#wib-est-root p,
#wib-est-root span,
#wib-est-root b,
#wib-est-root em,
#wib-est-root ol,
#wib-est-root li,
#wib-est-root dl,
#wib-est-root dt,
#wib-est-root dd,
#wib-est-root label,
#wib-est-root hr {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-style: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    text-align: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
    list-style: none !important;
    width: auto;
    max-width: none;
    min-height: 0;
}


/* ── Sin JavaScript ──────────────────────────────────────────────────
 *
 * `wib-no-js` llega en el HTML del servidor y el JS lo quita al arrancar. Sin
 * JS (y así es como leen la página muchos rastreadores) el asistente no puede
 * pasar de fase, así que las fases 1–4 se muestran apiladas en orden, con los
 * valores iniciales que el servidor ya pintó. Quedan fuera solo las piezas que
 * no tienen sentido sin JS: la barra Continue/Back (pegajosa: taparía los
 * campos) y la revisión con la descarga del PDF. Con JS nada de esto aplica. */
/* Solo con JavaScript DESACTIVADO en el navegador. Antes colgaba solo de la
   clase .wib-no-js, que también está presente en el primer pintado de quien SÍ
   tiene JS: se veían las fases apiladas y al arrancar el JS saltaba al
   asistente (CLS). Los crawlers leen el HTML igualmente. */
@media (scripting: none) {
  #wib-est-root.wib-no-js .wib-est-phase[data-phase="2"],
  #wib-est-root.wib-no-js .wib-est-phase[data-phase="3"],
  #wib-est-root.wib-no-js .wib-est-phase[data-phase="4"] {
      display: block !important;
  }

  #wib-est-root.wib-no-js .wib-est-phase + .wib-est-phase {
      margin-top: 34px !important;
      padding-top: 30px !important;
      border-top: 1px solid var(--wib-est-rule-2) !important;
  }

  /* Sin escalonado de entrada: el estado final (visible) es el de partida. */
  #wib-est-root.wib-no-js .wib-est-phase > * {
      animation: none !important;
      opacity: 1;
      transform: none;
  }

  #wib-est-root.wib-no-js .wib-est-nav,
  #wib-est-root.wib-no-js .wib-est-phase[data-phase="5"] {
      display: none !important;
  }

  /* La tarjeta cedía su relleno inferior a la barra de navegación. */
  #wib-est-root.wib-no-js .wib-est-card {
      padding-bottom: 34px !important;
  }

  @media (max-width: 860px) {
      #wib-est-root.wib-no-js .wib-est-card {
          padding-bottom: 22px !important;
      }
  }
}