/* =============================================================================
   verifactu/styles.css - GandiaTech
   Capa visual de la utilidad "Generador de factura de prueba Veri*factu".

   No redefine el sistema de diseño: extiende los tokens globales declarados
   en :root de assets/css/main.css (--bg, --surface, --ink, --muted, --line,
   --accent, --accent-soft, --accent-text, --sky, --mint, --sand, --r) y
   reutiliza sus clases base (.row, .btn, .panel, .check, .legal,
   .form-response, .page-hero, .crumbs, .calc-disclaimer). Así la herramienta
   se siente una sección nativa de gandia.tech, no un módulo incrustado.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.page-hero h1 em {
    font-style: normal;
    background: linear-gradient(transparent 62%, var(--accent-soft) 62%);
}

.vf-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -14px 0 30px;
}

.vf-badge {
    font: 600 12.5px "Instrument Sans", sans-serif;
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 1px solid rgba(199, 56, 26, .18);
    padding: 7px 13px;
    border-radius: 999px;
}

/* El límite de pruebas se destaca para que no pase desapercibido */
.vf-badge-limite {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* --- Rejilla formulario + vista previa ----------------------------------- */
.vf-grid {
    display: grid;
    grid-template-columns: 1.55fr .95fr;
    gap: 26px;
    align-items: start;
    margin-bottom: 34px;
}

.vf-grid > * { min-width: 0; }

@media (max-width: 980px) {
    .vf-grid { grid-template-columns: 1fr; }
}

/* --- Secciones numeradas del formulario --------------------------------- */
.vf-sec {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 26px;
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.vf-sec-t {
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -.02em;
}

.vf-num {
    font: 700 12px "JetBrains Mono", monospace;
    color: var(--accent-text);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 5px 10px;
    letter-spacing: .06em;
    flex-shrink: 0;
}

/* main.css estira los <label> (display:grid) para igualar la altura de la fila,
   y al ser «align-content: normal» reparte el sobrante entre sus filas: un campo
   con línea de ayuda (NIF/CIF) empujaba hacia abajo e inflaba el input del campo
   de al lado (Nombre / Razón social). Con start, cada campo empieza a contar en
   su primera fila y los inputs quedan alineados a la misma altura. */
.vf-field {
    gap: 7px;
    align-content: start;
}

/* main.css aplica display:grid a los <label>, lo que anula la regla [hidden]
   del navegador: sin esto, el campo "Otro tipo de IVA" nunca se oculta. */
.vf-field[hidden] { display: none; }

.vf-field abbr {
    color: var(--accent-text);
    text-decoration: none;
    font-weight: 700;
}

.vf-hint {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 400;
    line-height: 1.45;
}

.vf-opt {
    font-weight: 400;
    font-size: 12.5px;
    color: var(--muted);
}

/* Mensaje de error por campo (se activa con .invalid desde verifactu.js) */
.vf-err {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-text);
    display: none;
}

.vf-field.invalid .vf-err { display: block; }

.vf-field.invalid input,
.vf-field.invalid select {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

input.mono, .vf-field .mono {
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 13px;
    letter-spacing: .01em;
}

/* Fila de 3 campos: solo aplica la 3ª columna si #ivaOtroField es visible */
.vf-row-3 { grid-template-columns: 1.4fr 1fr; }

.vf-row-3:has(#ivaOtroField:not([hidden])) {
    grid-template-columns: 1.4fr 1fr 1fr;
}

@media (max-width: 760px) {
    .vf-row-3,
    .vf-row-3:has(#ivaOtroField:not([hidden])) {
        grid-template-columns: 1fr;
    }
}

/* --- Selector segmentado base / total ----------------------------------- */
.vf-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.vf-inline-lbl {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
}

.vf-seg {
    display: inline-flex;
    gap: 4px;
    background: var(--bg);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 4px;
}

.vf-seg label { display: block; }

.vf-seg input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.vf-seg span {
    display: block;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background .18s, color .18s;
}

.vf-seg input:checked + span {
    background: var(--ink);
    color: #fff;
}

.vf-seg input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Desglose calculado en vivo ----------------------------------------- */
.vf-calc {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0;
    background: var(--bg);
    border: 1px dashed var(--line);
    border-radius: 18px;
    padding: 16px;
}

.vf-calc > div { display: grid; gap: 4px; min-width: 0; }

.vf-calc dt {
    font: 600 11.5px "Instrument Sans", sans-serif;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
}

.vf-calc dd {
    margin: 0;
    font: 700 21px "Bricolage Grotesque", sans-serif;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}

.vf-calc-total dd { color: var(--accent-text); }

@media (max-width: 520px) {
    .vf-calc { grid-template-columns: 1fr; }
}

/* --- Errores globales y envío ------------------------------------------- */
.vf-errbox {
    background: var(--accent-soft);
    border: 1px solid rgba(30, 34, 48, .08);
    color: var(--accent-text);
    border-radius: 18px;
    padding: 15px 19px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 4px;
}

.vf-submit {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.vf-btn-big {
    padding: 17px 32px;
    font-size: 16.5px;
    min-height: 56px;
}

.vf-btn-sm {
    padding: 10px 18px;
    min-height: 40px;
    font-size: 14px;
    justify-self: start;
}

.vf-note {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}

.btn[disabled] {
    opacity: .6;
    cursor: progress;
    transform: none !important;
}

/* --- Panel de vista previa ---------------------------------------------- */
.vf-aside {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 96px;
}

@media (max-width: 980px) {
    .vf-aside { position: static; }
}

.vf-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px;
    display: grid;
    gap: 16px;
}

.vf-card h3 {
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.vf-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: vfPulse 1.6s infinite;
    flex-shrink: 0;
}

@keyframes vfPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.75); }
}

.vf-kv { display: grid; gap: 8px; }

.vf-kv > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13.5px;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 8px;
}

.vf-kv > div:last-child { border-bottom: 0; padding-bottom: 0; }

.vf-kv span { color: var(--muted); flex-shrink: 0; }

.vf-kv b {
    text-align: right;
    font-weight: 600;
    overflow-wrap: anywhere;
    min-width: 0;
}

.vf-kv-imp b {
    font: 700 17px "Bricolage Grotesque", sans-serif;
    letter-spacing: -.02em;
    color: var(--ink);
}

.vf-hashbox {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    display: grid;
    gap: 8px;
}

.vf-hash-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.vf-hash-top small {
    font: 600 11px "Instrument Sans", sans-serif;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
}

.vf-copy {
    font: 600 11.5px "Instrument Sans", sans-serif;
    background: var(--accent-soft);
    color: var(--accent-text);
    border: 0;
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.vf-copy:hover { background: var(--accent); color: #fff; }

#pvHash {
    display: block;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--ink);
    overflow-wrap: anywhere;
    max-height: 76px;
    overflow-y: auto;
}

.vf-qrwrap {
    display: grid;
    justify-items: center;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
}

/* --- Contador de pruebas restantes por CIF ----------------------------- */
.vf-restantes-ok,
.vf-restantes-bajo,
.vf-restantes-agotado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vf-restantes-ok::before,
.vf-restantes-bajo::before,
.vf-restantes-agotado::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ea86a;
    flex-shrink: 0;
}

.vf-restantes-bajo::before,
.vf-restantes-agotado::before { background: var(--accent); }

.vf-restantes-agotado { color: var(--accent-text); }

/* --- Cadena de cálculo visible (verificable por el usuario) ------------ */
.vf-cadena {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 13px 15px;
    display: grid;
    gap: 9px;
}

.vf-cadena summary {
    cursor: pointer;
    font: 600 13px "Instrument Sans", sans-serif;
    color: var(--accent-text);
    list-style: none;
}

.vf-cadena summary::-webkit-details-marker { display: none; }
.vf-cadena summary::before { content: "▸ "; }
.vf-cadena[open] summary::before { content: "▾ "; }

.vf-cadena > code {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 11.5px;
    line-height: 1.65;
    overflow-wrap: anywhere;
    color: var(--ink);
}

.vf-cadena .vf-hint { font-weight: 400; }
.vf-cadena .vf-hint code { font-size: 11.5px; }

#pvQr {
    width: 172px;
    height: 172px;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 9px;
}

.vf-qr-cap {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    line-height: 1.45;
}

/* Rótulo literal «QR tributario:» que la norma exige sobre el código */
.vf-qr-lbl {
    font: 700 13px "Instrument Sans", sans-serif;
    color: var(--ink);
    text-align: center;
}

.vf-privacy {
    background: var(--mint);
    border: 1px solid rgba(30, 34, 48, .08);
    border-radius: var(--r);
    padding: 18px 20px;
    color: #1c6b45;
    font-size: 13.5px;
    line-height: 1.55;
    display: grid;
    gap: 7px;
}

.vf-privacy b { font-size: 14px; }

.vf-privacy code {
    background: rgba(255, 255, 255, .75);
    padding: 1px 5px;
    border-radius: 6px;
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* --- Bloque "Cómo funciona" --------------------------------------------- */
.vf-how {
    display: grid;
    gap: 16px;
    margin-bottom: 64px;
}

.vf-steps {
    list-style: none;
    counter-reset: vfStep;
    padding: 0;
    margin: 4px 0 0;
    display: grid;
    gap: 12px;
}

.vf-steps li {
    counter-increment: vfStep;
    position: relative;
    padding-left: 42px;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.6;
    /* los <li> son grid items: sin min-width:0 el código nowrap de la cadena
       los ensancha y provoca scroll horizontal en móvil */
    min-width: 0;
}

.vf-steps li::before {
    content: counter(vfStep);
    position: absolute;
    left: 0;
    top: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-text);
    font: 700 13px "JetBrains Mono", monospace;
    display: grid;
    place-items: center;
}

.vf-steps b { color: var(--ink); }

.vf-steps code {
    color: var(--ink);
    overflow-wrap: anywhere;
}

code.vf-chain {
    display: block;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 15px;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 13px;
    margin-top: 6px;
}

.vf-legal-note {
    background: var(--sand);
    border-radius: 18px;
    padding: 19px 21px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink);
    display: grid;
    gap: 8px;
}

.vf-legal-note code {
    background: rgba(255, 255, 255, .7);
    padding: 1px 5px;
    border-radius: 6px;
    font-size: 13px;
}

.vf-disclaimer { margin-top: 6px; }

/* El atributo [hidden] debe ganar a cualquier clase con display (contrato de la
   API HTML): main.css pinta .form-response.error con display:flex, lo que dejaría
   visible una tira de error aunque estuviera oculta. */
.form-response.error[hidden],
.form-response[hidden],
.vf-errbox[hidden],
.vf-toast[hidden] {
    display: none;
}

/* --- Ajustes de formulario en móvil ------------------------------------- */
@media (max-width: 520px) {
    .vf-sec { padding: 20px; }
}

/* --- Toast de estado ----------------------------------------------------- */
.vf-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 70;
    background: var(--ink);
    color: #fff;
    padding: 13px 22px;
    border-radius: 999px;
    font: 600 14.5px "Instrument Sans", sans-serif;
    box-shadow: 0 14px 34px rgba(30, 34, 48, .32);
    max-width: calc(100% - 32px);
    text-align: center;
    animation: vfToastIn .22s ease;
}

.vf-toast.ok  { background: #1c6b45; }
.vf-toast.bad { background: var(--accent-text); }

@keyframes vfToastIn {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}