/* ===========================================================================
   Petunia — hoja de estilo
   Marca Petunia: naranja/rojo/dorado. Diseño limpio tipo app de
   gestión: barra superior de marca, contenido en tarjetas, acentos cálidos.
   =========================================================================== */

:root {
    --marca-naranja: #f5821f;
    --marca-rojo: #e2231a;
    --marca-dorado: #fbb040;
    --tinta: #1f2630;
    --tinta-suave: #5b6573;
    --linea: #e4e7eb;
    --fondo: #f3f4f6;
    --blanco: #ffffff;
    --ok: #0a7d28;
    --error: #b00020;
    --radio: 10px;
    --sombra: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-size: 15px;
    line-height: 1.5;
}

/* ---------- Barra superior ---------- */
.cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--blanco);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--marca-dorado), var(--marca-naranja), var(--marca-rojo)) 1;
    padding: 0 1.5rem;
    height: 60px;
    box-shadow: var(--sombra);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cabecera .marca {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.cabecera .marca img {
    height: 30px;
    width: auto;
    display: block;
}

/* ---- Barra de accesos rápidos (siempre visible, bajo el menú) ---- */
.barra-acciones {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1.5rem;
    background: #fbfbfc;
    border-bottom: 1px solid var(--linea);
}

.barra-acciones .accion {
    padding: .35rem .85rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--blanco);
    background: var(--marca-naranja);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1.4;
}

.barra-acciones .accion:hover { background: var(--marca-rojo); }

/* ---- Campo de búsqueda resaltado ---- */
input.busca {
    width: 100%;
    border: 2px solid var(--marca-naranja);
    background: #fff8f2;
    border-radius: 9px;
    padding: .55rem .85rem;
    font-size: .95rem;
    color: var(--tinta);
}

input.busca::placeholder { color: var(--tinta-suave); }

input.busca:focus {
    outline: none;
    border-color: var(--marca-rojo);
    background: var(--blanco);
    box-shadow: 0 0 0 3px rgba(245, 130, 31, .2);
}

/* ---- Menú con submenús ---- */
.menu-bar { margin-left: auto; }

.menu {
    list-style: none;
    display: flex;
    gap: .15rem;
    margin: 0;
    padding: 0;
    align-items: center;
}

.menu > li { position: relative; }

.menu > li > a,
.menu > li > .top {
    display: flex;
    align-items: center;
    gap: .25rem;
    color: var(--tinta-suave);
    text-decoration: none;
    padding: .5rem .7rem;
    border-radius: var(--radio);
    font-weight: 500;
    font-size: .92rem;
    cursor: pointer;
    white-space: nowrap;
}

.menu > li > .top i { font-style: normal; font-size: .7rem; opacity: .7; }
.menu > li > a:hover,
.menu > li:hover > .top { background: var(--fondo); color: var(--tinta); }
.menu > li.activa > a,
.menu > li.activa > .top { color: var(--marca-rojo); background: #fff4ec; }

/* Submenú desplegable */
.submenu {
    list-style: none;
    margin: 0;
    padding: .35rem;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 230px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
    display: none;
    z-index: 50;
}

.menu > li:hover > .submenu { display: block; }

.submenu li { margin: 0; }

.submenu a,
.submenu .deshab {
    display: block;
    padding: .5rem .6rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--tinta);
    font-size: .9rem;
}

.submenu a:hover { background: #fff4ec; color: var(--marca-rojo); }
.submenu a.activa { color: var(--marca-rojo); font-weight: 600; }
.submenu .deshab { color: #b3b9c2; cursor: default; }
.submenu .deshab::after { content: " · próximamente"; font-size: .72rem; opacity: .8; }

.cabecera .usuario {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--tinta-suave);
    font-size: .9rem;
    white-space: nowrap;
}

.cabecera .usuario img.logo-empresa {
    height: 28px;
    width: auto;
    border-radius: 4px;
}

.cabecera .usuario a { color: var(--marca-rojo); text-decoration: none; font-weight: 600; }

/* Contabilidad de PRUEBAS. Deliberadamente llamativo: el error que evita —tomar una
   contabilidad de probadores por una real, o al revés— es caro y silencioso. */
.cabecera .usuario .distintivo-pruebas {
    background: #b45309;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .15rem .45rem;
    border-radius: 4px;
}

/* ---------- Contenido ---------- */
main {
    padding: 1.75rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Páginas que necesitan todo el ancho (Diario, grillas grandes) */
main.ancho {
    max-width: none;
    padding: 1.25rem 1.5rem 1rem;
}

/* Contenedor con scroll horizontal para tablas anchas */
.tabla-scroll { overflow-x: auto; border-radius: var(--radio); }

/* Tabla compacta (Diario) */
table.compacta { box-shadow: none; }
table.compacta th, table.compacta td { padding: .3rem .55rem; font-size: .82rem; white-space: nowrap; }
table.compacta td.concepto { white-space: normal; min-width: 240px; }

/* Filas intercaladas (zebra) en el Diario */
table.compacta tbody tr:nth-child(even) { background: #f6f7f9; }

/* Borrador en rosa (como el original), con intercalado; fila seleccionada en azul */
tbody.borrador tr:nth-child(odd) { background: #fdecec; }
tbody.borrador tr:nth-child(even) { background: #f8dddd; }
tbody tr.sel, tbody.borrador tr.sel { background: #cfe3ff !important; }
table.compacta tbody tr:hover { background: #fff3ea; }
tbody.borrador tr:hover { background: #f6cccc; }

/* Barra de estado inferior: saldo de la cuenta seleccionada */
.barra-estado {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #e9edf2;
    border-top: 1px solid #cfd6df;
    padding: .5rem .75rem;
    margin-top: .5rem;
    font-size: .85rem;
    box-shadow: 0 -2px 6px rgba(16, 24, 40, .08);
}

.barra-estado .be-cta { font-weight: 600; }
.barra-estado .be-saldos { margin-left: auto; white-space: nowrap; }
.barra-estado b { font-variant-numeric: tabular-nums; }

h1 {
    font-size: 1.5rem;
    margin: 0 0 1.25rem;
}

a { color: var(--marca-rojo); }

/* ---------- Tarjetas / fieldset ---------- */
fieldset {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.25rem 1.25rem .75rem;
    margin: 0 0 1.25rem;
}

legend {
    font-weight: 700;
    color: var(--tinta);
    padding: 0 .4rem;
}

/* Rejilla de campos dentro de fieldset */
fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem 1.25rem;
}

fieldset > legend { grid-column: 1 / -1; }

/* ---------- Formularios ---------- */
label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .85rem;
    color: var(--tinta-suave);
    margin: 0;
}

/* Checkboxes y radios: en línea */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    color: var(--tinta);
    font-size: .9rem;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="file"],
textarea,
select {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--linea);
    border-radius: 8px;
    font-size: .9rem;
    background: var(--blanco);
    color: var(--tinta);
    transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--marca-naranja);
    box-shadow: 0 0 0 3px rgba(245, 130, 31, .15);
}

textarea { resize: vertical; font-family: inherit; }

/* ---------- Bloques de código (documentación API) ---------- */
pre {
    background: #1f2630;
    color: #e7ebf0;
    padding: .85rem 1rem;
    border-radius: 10px;
    overflow-x: auto;
    font-size: .82rem;
    line-height: 1.5;
    margin: .4rem 0;
}

pre code { background: none; color: inherit; padding: 0; }

code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    background: #f1f3f5;
    padding: .1rem .35rem;
    border-radius: 5px;
    font-size: .85em;
}

.metodo {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: .12rem .5rem;
    border-radius: 6px;
    color: #fff;
    letter-spacing: .03em;
}

.metodo-get { background: #0a7d28; }
.metodo-post { background: #1f6fd6; }

.endpoint {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--blanco);
    box-shadow: var(--sombra);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.endpoint h3 {
    margin: .2rem 0 .4rem;
    font-size: 1rem;
    font-family: ui-monospace, Consolas, monospace;
}

.endpoint .params { font-size: .85rem; color: var(--tinta-suave); }
.endpoint .params li { margin: .1rem 0; }

input:disabled {
    background: #f6f7f9;
    color: var(--tinta-suave);
    cursor: not-allowed;
}

/* `hidden` tiene que ganar SIEMPRE, y aquí hace falta decirlo.
 *
 * El navegador trae `[hidden] { display: none }`, pero eso es de su hoja de estilos, y CUALQUIER
 * regla nuestra la pisa: la de aquí abajo (`button { display: inline-block }`) hacía que un botón
 * con `hidden` se siguiera viendo. No es un detalle de una pantalla: en la web hay dos docenas de
 * sitios que ocultan cosas con `.hidden = true`, y todos los que sean botones estaban afectados.
 * Se descubrió con el botón de archivar del importador, que salía sin filtro puesto. */
[hidden] { display: none !important; }

button, .boton {
    display: inline-block;
    background: var(--marca-rojo);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .55rem 1.1rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s;
}

button:hover, .boton:hover { filter: brightness(1.07); }

.boton-sec {
    background: var(--blanco);
    color: var(--tinta);
    border: 1px solid var(--linea);
}

/* Variantes de color de los botones.
 *
 * El rojo de la marca es el color por omisión y se lo lleva todo, así que no distingue nada. Con
 * estas dos, una pantalla puede agrupar por lo que hace: azul lo que ENTRA (subir un fichero),
 * verde lo que PREPARA sin tocar la contabilidad (proponer, reintentar un adjunto). El rojo se
 * queda para lo que escribe en los libros, que es lo que conviene que destaque. */
.boton-verde { background: #0a7d28; }
.boton-azul  { background: #1f5fbf; }

/* ---------- Tablas ---------- */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--blanco);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra);
}

th, td {
    padding: .6rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--linea);
}

thead th {
    background: #fbfbfc;
    color: var(--tinta-suave);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

tbody tr:hover { background: #fff7f1; }

th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Avisos ---------- */
.ok { color: var(--ok); font-weight: 600; }
.error { color: var(--error); font-weight: 500; }

/* ---------- Toasts (avisos flotantes abajo-derecha) ---------- */
.toast-container {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    z-index: 1000;
}

.toast {
    min-width: 240px;
    max-width: 380px;
    padding: .75rem 1rem;
    border-radius: 10px;
    color: #fff;
    font-size: .9rem;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .22);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s, transform .25s;
}

.toast.visible { opacity: 1; transform: translateY(0); }
.toast-ok { background: var(--ok); }
.toast-error { background: var(--error); }

/* ---------- Modales (popups) ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 1rem;
    z-index: 500;
    overflow-y: auto;
}

.modal {
    background: var(--blanco);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(16, 24, 40, .3);
    width: 100%;
    max-width: 760px;
}

.modal.modal-grande { max-width: 1200px; }

/* Mayor: cabecera de controles, rejilla con scroll y caja de acumulados */
.mayor-cab { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; margin-bottom: .75rem; }
.mayor-cab label { flex-direction: row; align-items: center; gap: .4rem; }
.mayor-tools { margin-left: auto; display: flex; gap: .4rem; }
.mayor-grid { max-height: 55vh; overflow: auto; }

.acumulados {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: .75rem;
    padding: .6rem .9rem;
    background: #e9edf2;
    border: 1px solid #cfd6df;
    border-radius: 10px;
    font-size: .9rem;
}
.acumulados .tit { font-weight: 600; }
.acumulados b { font-variant-numeric: tabular-nums; }

/* Nuevo asiento: cabecera, rejilla editable, pie con totales y descuadre */
.asiento-cab { display: flex; flex-wrap: wrap; gap: .75rem 1.2rem; align-items: end; margin-bottom: .6rem; }
.asiento-cab label { flex-direction: row; align-items: center; gap: .4rem; }
.asiento-cab .as-copiar { margin-left: auto; }
.asiento-grid { max-height: 50vh; overflow: auto; }
.asiento-grid table { width: 100%; }
.asiento-grid input { width: 100%; box-sizing: border-box; padding: .2rem .35rem; font-size: .82rem; }
.asiento-grid input.num { text-align: right; font-variant-numeric: tabular-nums; }
.asiento-grid td.as-cta-cell { display: flex; gap: .25rem; align-items: center; }
.asiento-grid td.as-cta-cell .as-cuenta { width: 130px; }
.asiento-grid td.as-desc { color: #555; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.asiento-grid td.as-desc.error { color: #c0392b; font-weight: 600; }
.asiento-grid .as-buscar, .asiento-grid .as-del { padding: .1rem .4rem; line-height: 1; }

.asiento-pie { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: .7rem; }
.asiento-pie .as-info { color: #444; font-size: .85rem; }
.asiento-pie .as-info span { margin-right: 1rem; font-variant-numeric: tabular-nums; }
.asiento-pie .as-totales { margin-left: auto; display: flex; gap: 1.4rem; align-items: center; }
.asiento-pie .as-totales b { font-variant-numeric: tabular-nums; }
.as-descuadre { padding: .35rem .7rem; border-radius: 8px; background: #d7f0ff; color: #0a4a66; font-weight: 600; font-variant-numeric: tabular-nums; }
.as-descuadre.rojo { background: #ffe0d6; color: #a32b0d; }

.asiento-acciones { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .9rem; }

/* Barra de acciones de la pestaña Borrador del Diario (Renumerar / Contabilizar) */
.borrador-acciones { display: flex; align-items: center; gap: .6rem; margin: .4rem 0 .6rem; }
.borrador-acciones span { color: var(--tinta-suave, #667); font-size: .85rem; margin-right: auto; }

/* Líneas en borrador dentro del Mayor (cuentan en el saldo, pero se distinguen) */
.mayor-grid tr.borr td { background: #fff3e0; font-style: italic; }

/* Saldo inicial del Mayor: no es un movimiento, es el arrastre anterior al rango */
.mayor-grid tr.mayor-inicial td { background: #eef2f7; color: #445; border-bottom: 1px solid #c9d3e0; }
.mayor-grid tr.mayor-inicial small { color: #778; }

/* Punteo de vencimientos: ✅ realizado entero, P realizado en parte */
.mayor-grid td.punteo { text-align: center; }
.mayor-grid .punteo-parcial { color: #b26a00; font-weight: 700; }

/* Diálogo de IVA (Fase C) y botón IVA por línea del asiento */
.as-acciones-linea { white-space: nowrap; }
.as-iva { font-size: .72rem; padding: .15rem .35rem; }
.as-iva.con-iva { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.as-ci { font-size: .72rem; padding: .15rem .35rem; }
.as-ci.con-iva { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.as-reparto { font-size: .72rem; padding: .15rem .35rem; }
.as-reparto.con-iva { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.as-reparto.reparto-mal { background: #b71c1c; color: #fff; border-color: #b71c1c; }
.rep-cta { margin: 0 0 .5rem; }
.rep-alta { display: flex; gap: .4rem; align-items: center; margin-bottom: .3rem; flex-wrap: wrap; }
.rep-alta #rep-ci { flex: 1 1 12rem; }
.rep-alta #rep-importe { width: 8rem; }
.rep-tot { display: flex; gap: .8rem; align-items: center; margin-top: .4rem; }
.rep-tot .error { color: #b71c1c; }
.iva-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; }
.iva-grid label { display: flex; flex-direction: column; gap: .15rem; font-size: .82rem; }
.iva-grid input[readonly] { background: #f2f2ea; }
.iva-grid small { min-height: 1em; color: var(--tinta-suave, #667); }
.iva-grid small.error { color: #b71c1c; }
.iva-dialogo { max-height: 74vh; overflow-y: auto; }
.iva-rectif { display: flex; align-items: center; gap: .5rem; }
.iva-rectif select { flex: 1; min-width: 0; }
.iva-rectif input[type="text"] { width: 11rem; }
.iva-checks { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }

/* Fichero documento en la cabecera del asiento */
.asiento-checks { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .1rem 0 .3rem; padding-top: .3rem; border-top: 1px solid var(--linea, #e3e3d8); }
.mayor-acciones { display: flex; gap: .5rem; margin: .4rem 0; }

/* Balance de Sumas y Saldos */
.bss-filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; margin-bottom: .7rem; }
.bss-grupo { border: 1px solid var(--linea, #e3e3d8); border-radius: 6px; padding: .35rem .6rem .5rem; margin: 0; }
.bss-grupo legend { font-size: .78rem; color: var(--tinta-suave, #667); padding: 0 .3rem; }
.bss-grupo label { display: flex; align-items: center; gap: .3rem; font-size: .82rem; }
.bss-grupo input[type="date"] { font-size: .82rem; }
.bss-diarios { display: flex; flex-direction: column; gap: .15rem; max-height: 7.5rem; overflow-y: auto; }
.bss-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; width: 100%; }
.bss-nivel td { font-weight: bold; background: #f4f4ec; }
#b-tabla tr.sel td { background: #dfeaff; }
.bss-totales { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.li-portipo { margin-top: .5rem; font-size: .85rem; color: var(--tinta-suave, #556); }
.li-portipo .li-tip { display: inline-block; background: #f4f4ec; border-radius: 4px; padding: .1rem .4rem; margin: 0 .3rem .3rem 0; }
.li-regimenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .15rem .8rem; margin-top: .35rem; }
.li-series { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
#li-tabla tr.sel td { background: #dfeaff; }
.mayor-grid tr.sel td { background: #dfeaff; }
.asiento-cab2 { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin: .2rem 0 .5rem; }
.asiento-cab2 label { display: flex; flex-direction: column; gap: .15rem; font-size: .82rem; }
.as-info #as-mayor { margin-left: .6rem; font-size: .78rem; padding: .12rem .4rem; }
.as-fichero { flex-direction: row !important; align-items: center; gap: .4rem !important; font-size: .82rem; }
.as-fichero input[type="file"] { max-width: 15rem; font-size: .78rem; }
#as-doc-actual { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; }
.iva-check { flex-direction: row !important; align-items: center; gap: .3rem !important; white-space: nowrap; }

.modal-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--linea);
}

.modal-cab h2 { margin: 0; font-size: 1.15rem; }

.modal-x {
    background: none;
    color: var(--tinta-suave);
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 .4rem;
    cursor: pointer;
}

.modal-x:hover { color: var(--tinta); filter: none; }
.modal-cuerpo { padding: 1.25rem; }

/* Rejilla de formulario reutilizable (misma que fieldset, sin la tarjeta) */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem 1.25rem;
}

.form-grid .ancho-total { grid-column: 1 / -1; }

/* Pestañas dentro de un modal */
.modal-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--linea);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.modal-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .5rem .8rem;
    color: var(--tinta-suave);
    font-weight: 500;
    cursor: pointer;
}

.modal-tab:hover { color: var(--tinta); filter: none; }
.modal-tab.activo { color: var(--marca-rojo); border-bottom-color: var(--marca-rojo); }
.modal-pane { display: none; }
.modal-pane.activo { display: block; }

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

/* ---------- Login ---------- */
.login-wrap {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: var(--blanco);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
    padding: 2rem 2.25rem;
    width: 360px;
}

.login-card .marca {
    text-align: center;
    margin-bottom: 1.25rem;
}

.login-card .marca img { height: 46px; }

.login-card form { display: flex; flex-direction: column; gap: .9rem; }

/* El enlace de "he olvidado mi contraseña": presente, pero sin competir con el botón. */
.login-card .pie-login { margin: 1rem 0 0; text-align: center; font-size: .9rem; }
.login-card .pie-login a { color: #666; }

@media (max-width: 900px) {
    fieldset { grid-template-columns: 1fr; }
    .cabecera { flex-wrap: wrap; height: auto; padding: .6rem 1rem; }
    .menu-bar { order: 3; width: 100%; margin-left: 0; }
    .menu { flex-wrap: wrap; }
    .submenu { right: auto; left: 0; }
}

/* ---- Liquidación de IVA (modelo 303) ---- */
td.cen, th.cen { text-align: center; }
td.vacia { color: #888; font-style: italic; }
.lq-rango { align-self: center; color: #555; font-weight: 600; margin-left: .5rem; }
.lq-tit { font-size: 1rem; margin: 1rem 0 .3rem; color: #444; }
.lq-total { margin-left: auto; font-size: .95rem; }
.lq-total.positivo b { color: #1a7f37; }   /* a compensar/devolver */
.lq-total.negativo b { color: #c0392b; }   /* a ingresar */
.lq-nota { color: #b26a00; font-style: italic; }
p.aviso { color: #555; background: #f3f4f6; border: 1px solid #e0e3e8;
          padding: .6rem .8rem; border-radius: 6px; }
.lq-botonera { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 1rem; }
#lq-rep tbody tr, #lq-sop tbody tr, .lq-tabla tbody tr { cursor: pointer; }
#lq-rep tbody tr:hover, #lq-sop tbody tr:hover, .lq-tabla tbody tr:hover { background: #fff4e6; }
.lq-info { max-width: 40rem; }
.lq-info td:last-child { font-variant-numeric: tabular-nums; }
.modal.modal-mediano { max-width: 640px; }
.lq-303form { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.lq-303form label { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
.lq-303form label.iva-check { flex-direction: row; align-items: center; gap: .4rem; }
.lq-303form input[type="text"], .lq-303form select { padding: .35rem .5rem; }
.lq-303comp { border: 1px solid #d8dbe0; border-radius: 6px; padding: .5rem .7rem; }
.lq-303comp > label { margin-bottom: .3rem; }
.lq-303comp-sub { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
                  padding-left: 1.2rem; }
.lq-303comp-sub label { font-size: .85rem; }
.lq-303comp-sub input:disabled + span, .lq-303comp-sub label:has(input:disabled) { color: #999; }

@media print {
    .cabecera, .barra-acciones, .lq-botonera, #lq-form, .menu-bar { display: none !important; }
    body { background: #fff; }
    main { margin: 0; padding: 0; }
    .lq-rango { display: inline; }
    .barra-estado { position: static; box-shadow: none; }
    /* Columnas de acciones dentro de una tabla: no se imprimen. */
    .sin-imp { display: none !important; }
}

/* ---- Herramientas de asientos (utilidades_diario): tarjetas de operaciones ---- */
.ud-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem; align-items: start; margin-top: 1rem; }
.ud-card { border: 1px solid var(--linea, #e2e2e2); border-radius: 10px; padding: 1rem 1.1rem; }
.ud-card h2 { font-size: 1.05rem; margin: 0 0 .3rem; }
.ud-card .ud-ayuda { color: var(--tinta-suave); font-size: .85rem; margin: 0 0 .8rem; }
.ud-form { display: flex; flex-direction: column; gap: .55rem; }
.ud-form label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
.ud-form label.ud-check { flex-direction: row; align-items: center; gap: .4rem; }
.ud-form input, .ud-form select { padding: .35rem .5rem; }
.ud-form button { margin-top: .3rem; align-self: flex-start; }
.ud-card.ud-peligro { border-color: #e0b4b4; }
.dg-res { font-size: .85rem; color: var(--tinta-suave); margin-top: .5rem; }
.ud-btn-peligro { background: #c0392b; color: #fff; }

/* ---- Plan de cuentas: separador entre "Nueva cuenta" y los botones de exportar/importar ---- */
.pc-io-sep { display: inline-block; width: 1px; height: 1.4em; background: var(--linea, #e2e2e2);
    margin: 0 .4rem; vertical-align: middle; }

/* ---- Retenciones IRPF (retenciones.js): cuadre de totales y apuntes en borrador ---- */
.rt-cuadre { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: .5rem 0 1.2rem;
    padding: .6rem .9rem; border: 1px solid var(--linea, #e2e2e2); border-radius: 8px;
    font-size: .88rem; }
tr.rt-borrador td { background: rgba(255, 196, 0, .12); }

/* ---- Alta rápida de factura (factura.js): lanzador introfecha + diálogo soportado ---- */
.fac-cab { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fac-cab label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; }
.fac-herram { border: 1px solid var(--linea, #e2e2e2); border-radius: 8px; padding: .8rem 1rem 1rem; }
.fac-herram h4 { margin: 0 0 .6rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #666; }
.fac-herram button { display: block; width: 100%; text-align: left; margin: .35rem 0; }
.fac-herram button:disabled { opacity: .5; cursor: not-allowed; }
.fac-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem 1rem; }
.fac-grid > label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; grid-column: span 2; min-width: 0; }
.fac-grid > label.s1 { grid-column: span 1; } .fac-grid > label.s3 { grid-column: span 3; }
.fac-grid > label.s4 { grid-column: span 4; } .fac-grid > label.s6 { grid-column: span 6; }
.fac-grid > label.fac-chk { flex-direction: row; align-items: center; gap: .4rem; }
.fac-grid input, .fac-grid select { width: 100%; box-sizing: border-box; }
.fac-desc { font-style: normal; font-size: .72rem; color: #777; min-height: .9em; }
.fac-ret { border: 1px solid var(--linea, #e2e2e2); border-radius: 8px; padding: .3rem .9rem .9rem; margin: 1rem 0; }
.fac-ret legend { font-size: .85rem; padding: 0 .4rem; }
.fac-ret-body.off { opacity: .45; pointer-events: none; }
.fac-total { text-align: right; font-size: 1rem; margin: .4rem 0 1rem; }
.fac-total b { color: var(--acento, #c0392b); }
@media (max-width: 820px) { .fac-grid { grid-template-columns: repeat(2, 1fr); } .fac-grid > label, .fac-grid > label.s1, .fac-grid > label.s3, .fac-grid > label.s4, .fac-grid > label.s6 { grid-column: span 2; } }

/* campo de cuenta con buscador (factura.js) */
.fac-cta { display: flex; gap: .3rem; align-items: stretch; }
.fac-cta > input { flex: 1; min-width: 0; }
.fac-cta > .fac-buscar { flex: 0 0 auto; padding: .2rem .5rem; }

/* bloques de IVA (factura.js FR-2) */
.fac-blq { border: 1px solid var(--linea, #e2e2e2); border-radius: 8px; padding: .2rem .9rem .8rem; margin-bottom: .7rem; }
.fac-blq-cab { font-weight: 700; font-size: .85rem; color: var(--acento, #c0392b); display: flex; align-items: center; gap: .4rem; margin: .2rem 0 .5rem; }
.fac-blq-body.off { opacity: .45; pointer-events: none; }

/* ---- Factura FR-2: aspecto ameno (bloques plegables, secciones, barra de totales) ---- */
.fac-seccion { display: flex; align-items: center; margin: .2rem 0 .5rem; }
.fac-seccion-tit { font-weight: 700; font-size: .9rem; color: var(--acento, #c0392b); text-transform: uppercase; letter-spacing: .03em; }
.fac-blq-body.plegado { display: none; }
.fac-blq { transition: border-color .15s, background .15s; }
.fac-blq-1 { border-color: var(--acento, #c0392b); background: rgba(192, 57, 43, .03); }
.fac-blq-activo { border-color: var(--acento, #c0392b); background: rgba(192, 57, 43, .03); }
.fac-blq-toggle { cursor: pointer; user-select: none; margin: 0; padding: .25rem 0; }
.fac-blq-tag { display: inline-block; background: var(--acento, #c0392b); color: #fff; font-weight: 700; font-size: .72rem; padding: .12rem .5rem; border-radius: 999px; letter-spacing: .02em; }
.fac-blq-toggle .fac-blq-tag { background: #9aa0a6; }
.fac-blq-toggle input:checked ~ .fac-blq-tag { background: var(--acento, #c0392b); }
.fac-blq-hint { font-size: .74rem; color: #888; font-weight: 400; }
.fac-imp { text-align: right; }
.fac-datos { border: 1px solid var(--linea, #e2e2e2); border-radius: 8px; padding: .3rem .9rem .9rem; margin: 1rem 0 .7rem; }
.fac-datos > legend, .fac-ret > legend { font-size: .85rem; font-weight: 600; padding: 0 .4rem; color: #555; }
.fac-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1rem; padding: .7rem .9rem; border-top: 2px solid var(--linea, #e2e2e2); background: rgba(0,0,0,.02); border-radius: 8px; }
.fac-totales { display: flex; gap: 1.4rem; align-items: baseline; flex-wrap: wrap; font-size: .9rem; }
.fac-totales span { color: #666; }
.fac-totales b { color: #222; font-size: 1.05rem; margin-left: .3rem; }
.fac-total-fin b { color: var(--acento, #c0392b); font-size: 1.25rem; }
.fac-botones { display: flex; gap: .6rem; }
@media (prefers-color-scheme: dark) {
  .fac-blq-1, .fac-blq-activo { background: rgba(255,255,255,.04); }
  .fac-barra { background: rgba(255,255,255,.04); }
  .fac-totales b { color: #eee; }
}

/* Detalles fiscales plegables (factura FR-2b) */
.fac-mas { border: 1px solid var(--linea, #e2e2e2); border-radius: 8px; padding: .2rem .6rem; margin: .3rem 0 .7rem; background: rgba(0,0,0,.015); }
.fac-mas > summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: #555; padding: .4rem .3rem; user-select: none; }
.fac-mas[open] > summary { border-bottom: 1px solid var(--linea, #e2e2e2); margin-bottom: .6rem; }
.fac-mas .fac-grid { padding: .2rem .3rem .5rem; }
@media (prefers-color-scheme: dark) { .fac-mas { background: rgba(255,255,255,.03); } }

/* Detalles fiscales: autoflow para que las casillas con etiqueta larga no se partan */
.fac-mas .fac-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.fac-mas .fac-grid > label { grid-column: auto !important; }
.fac-mas .fac-chk { justify-content: flex-start; white-space: nowrap; }

/* ---- Asientos predefinidos: pantalla Ejecutar (predefinidos.js) ---- */
.pred-layout { display: flex; gap: 1rem; align-items: flex-start; }
.pred-arbol { flex: 0 0 16rem; max-width: 100%; max-height: 62vh; overflow: auto; border: 1px solid var(--linea, #e2e2e2); border-radius: 8px; padding: .5rem .6rem; }
.pred-grupo h4 { margin: .4rem 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #666; }
.pred-grupo ul { list-style: none; margin: 0 0 .6rem; padding: 0; }
.pred-grupo li { margin: .15rem 0; }
.pred-modelo { width: 100%; text-align: left; background: none; border: 1px solid transparent; padding: .3rem .5rem; border-radius: 6px; cursor: pointer; color: #333; font-weight: 500; }
.pred-modelo:hover { background: rgba(192,57,43,.06); color: #333; }
.pred-modelo.sel, .pred-modelo.sel:hover { background: var(--acento, #c0392b); color: #fff; }
@media (prefers-color-scheme: dark) { .pred-modelo { color: #e8e8e8; } .pred-modelo:hover { color: #e8e8e8; } }
.pred-vacio { color: #999; font-size: .8rem; padding: .2rem .4rem; }
.pred-panel { flex: 1 1 30rem; min-width: 18rem; }
.pred-nombre { margin: 0 0 .8rem; }
.pred-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem 1rem; margin-bottom: 1rem; }
.pred-var { display: flex; flex-direction: column; gap: .2rem; }
.pred-var-tit { font-weight: 600; font-size: .85rem; }
.pred-var-tit em { font-weight: 400; color: #888; }
.pred-var-desc { font-size: .74rem; color: #777; }
.pred-var-meta { font-size: .7rem; color: #999; font-family: ui-monospace, monospace; }
.pred-var input[readonly] { background: #f2f2f2; }
.pred-var-calc input[readonly] { background: #eef3ee; }
.pred-avisos { color: #b8860b; font-size: .82rem; margin: .3rem 0; }
.pred-prev-tit { margin: 1rem 0 .4rem; }
.pred-prev-tot { margin-top: .5rem; font-size: .9rem; }
.pred-prev-tot .ok { color: #1e8b3b; font-weight: 700; }
.pred-prev-tot .mal { color: #c0392b; font-weight: 700; }
/* Ejecutar: barra de orientación (3 pasos), separador de toolbar, estado vacío, aspiradora */
.pred-intro { font-size: .86rem; color: #444; background: #f3f7fc; border: 1px solid #d9e3f0; border-radius: 8px; padding: .5rem .75rem; margin-bottom: .7rem; line-height: 1.5; }
.pred-pasos { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.pred-pasos > span { background: #fff; border: 1px solid #cdd8e6; border-radius: 999px; padding: .1rem .6rem; font-size: .78rem; font-weight: 600; color: #1a4b7a; }
.pred-tb-sep { width: 1px; align-self: stretch; background: var(--linea, #e2e2e2); margin: 0 .15rem; }
.pred-elige { font-size: .95rem; color: #444; line-height: 1.6; }
.pred-panel-hint { font-size: .82rem; color: #555; margin: 0 0 .8rem; line-height: 1.5; }
.pred-aspir-cols { margin: .3rem 0 .6rem; padding-left: 1.2rem; font-size: .84rem; line-height: 1.7; }
.pred-aspir-cols em { color: #1e8b3b; font-style: normal; font-size: .9em; }
@media (max-width: 820px) { .pred-layout { flex-direction: column; } .pred-arbol { flex-basis: auto; width: 100%; } }
@media (prefers-color-scheme: dark) {
    .pred-intro { background: rgba(255,255,255,.03); border-color: #345; color: #cdd; }
    .pred-pasos > span { background: #223; border-color: #456; color: #9bd; }
    .pred-elige, .pred-panel-hint { color: #bbb; }
}

/* ---- Editor de predefinidos (predefinidos.js FR-6c) ---- */
.pred-toolbar { display: flex; gap: .5rem; margin-bottom: .7rem; flex-wrap: wrap; }
/* ---- Gestión de tipos (FR-6d) ---- */
.pred-tipos-tab { width: 100%; border-collapse: collapse; margin: .4rem 0; }
.pred-tipos-tab th, .pred-tipos-tab td { padding: .3rem .4rem; border-bottom: 1px solid var(--linea, #e2e2e2); text-align: left; color: #333; }
.pred-tipos-tab td.tp-uso { text-align: center; color: #666; }
.pred-tipos-tab .tp-desc { width: 100%; box-sizing: border-box; }
.pred-tipos-nuevo { display: flex; gap: .4rem; margin-top: .6rem; align-items: center; }
.pred-tipos-nuevo #tp-ncod { width: 8rem; }
.pred-tipos-nuevo #tp-ndesc { flex: 1; }
.pred-tipos-pie { margin-top: .9rem; text-align: right; }
.pred-flags, .pred-chk { display: inline-flex; }
.pred-flags { flex-wrap: wrap; gap: .3rem 1rem; padding: .3rem .2rem; }
.pred-chk { align-items: center; gap: .35rem; font-size: .82rem; }
/* El editor NO usa la rejilla de 2 columnas del fieldset: cada sección a lo ancho */
.pred-editor .fac-datos { display: block; }
/* Tabla de variables: columnas fijas para que NADA se corte */
.pred-edtabla { width: 100%; table-layout: fixed; }
.pred-edtabla th { white-space: normal; vertical-align: bottom; font-size: .74rem; line-height: 1.2; color: #555; }
.pred-edtabla input[type="text"], .pred-edtabla select { width: 100%; box-sizing: border-box; }
.pred-edtabla td { padding: .25rem .3rem; }
.pred-edtabla th:nth-child(1), .pred-edtabla td:nth-child(1) { width: 12%; }
.pred-edtabla th:nth-child(2), .pred-edtabla td:nth-child(2) { width: 14%; }
.pred-edtabla th:nth-child(3), .pred-edtabla td:nth-child(3) { width: 30%; }
.pred-edtabla th:nth-child(4), .pred-edtabla td:nth-child(4) { width: 28%; }
.pred-edtabla th:nth-child(5), .pred-edtabla td:nth-child(5) { width: 8%; text-align: center; }
.pred-edtabla th:nth-child(6), .pred-edtabla td:nth-child(6) { width: 8%; text-align: center; }
/* Chips de variables */
.pred-chips-box { margin-top: .6rem; }
.pred-chips-help { display: block; font-size: .8rem; color: #555; margin-bottom: .35rem; }
.pred-chips { font-size: .8rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pred-chips-vacio { color: #999; font-style: italic; font-size: .8rem; }
.pred-chip { background: #eef; border: 1px solid #ccd; border-radius: 999px; padding: .12rem .6rem; font-size: .8rem; cursor: pointer; }
.pred-chip:hover { background: var(--acento, #c0392b); color: #fff; }
/* Líneas del asiento: cabecera + filas alineadas en rejilla */
.pred-hint { font-size: .82rem; color: #555; margin: .1rem 0 .6rem; line-height: 1.5; }
.pred-lineas-cab, .pred-linea-core {
    display: grid;
    grid-template-columns: 8.5rem minmax(8rem,1.3fr) minmax(9rem,1.5fr) 6.5rem 4rem 8rem;
    gap: .45rem; align-items: center;
}
.pred-lineas-cab > span:nth-child(6) { text-align: right; }
.pred-lineas-cab { padding: 0 .5rem .25rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; color: #888; }
.pred-linea { border: 1px solid var(--linea, #e2e2e2); border-radius: 8px; padding: .45rem .5rem; margin-bottom: .5rem; }
.pred-linea-core input, .pred-linea-core select { box-sizing: border-box; width: 100%; }
.el-btns { display: flex; gap: .3rem; }
.pred-linea-extra { margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed var(--linea, #e2e2e2); display: flex; gap: 1rem; flex-wrap: wrap; }
.pred-linea-extra.off { display: none; }
.pred-ef-sec { flex: 1 1 20rem; }
.pred-ef-sec h5 { margin: 0 0 .4rem; font-size: .74rem; text-transform: uppercase; color: var(--acento, #c0392b); }
.pred-ef-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .45rem .6rem; }
.pred-ef { display: flex; flex-direction: column; gap: .12rem; font-size: .74rem; }
.pred-ef > span { color: #777; }
.pred-ef input { width: 100%; box-sizing: border-box; }
/* Ayuda (guía) arriba del editor */
.pred-ayuda { border: 1px solid #d9e3f0; border-radius: 8px; padding: .3rem .7rem; margin: 0 0 1rem; background: #f3f7fc; }
.pred-ayuda > summary { cursor: pointer; font-weight: 600; font-size: .9rem; padding: .35rem .1rem; color: #1a4b7a; }
.pred-ayuda-cuerpo { padding: .2rem .2rem .5rem; }
.pred-ayuda-cuerpo p { font-size: .86rem; line-height: 1.6; margin: .3rem 0; }
.pred-guia { margin: .5rem 0; padding-left: 1.2rem; font-size: .85rem; line-height: 1.6; }
.pred-guia li { margin-bottom: .35rem; }
.pred-sub { margin: .4rem 0; }
.pred-sub > summary { cursor: pointer; font-size: .82rem; color: #1a4b7a; font-weight: 600; }
.pred-chuleta { margin: .4rem 0; font-size: .82rem; line-height: 1.7; }
.pred-ayuda code, .pred-chuleta code { background: #e6edf5; padding: .05rem .35rem; border-radius: 4px; font-size: .82em; }
.pred-probador { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; padding: .5rem 0 .2rem; margin-top: .4rem; border-top: 1px solid #d9e3f0; }
.pred-probador-tit { font-weight: 600; font-size: .82rem; align-self: center; }
.pred-probador label { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; }
.pred-test-res { font-weight: 700; color: #1e8b3b; align-self: center; }
@media (prefers-color-scheme: dark) {
    .pred-chip { background: #334; border-color: #556; color: #cde; }
    .pred-ayuda { background: rgba(255,255,255,.03); border-color: #345; }
    .pred-ayuda > summary, .pred-sub > summary { color: #8fbceb; }
    .pred-ayuda code, .pred-chuleta code { background: #2a3340; }
    .pred-edtabla th { color: #aaa; } .pred-hint, .pred-chips-help { color: #aaa; }
}

/* Selector de contabilidad (Mini Central): lista de accesos del usuario. */
.lista-contabilidades { list-style: none; margin: .6rem 0 0; padding: 0; }
.lista-contabilidades li { margin-bottom: .4rem; }
.lista-contabilidades button {
    width: 100%; text-align: left; padding: .7rem .9rem;
    background: var(--fondo-suave, #f5f5f7); color: inherit;
    border: 1px solid var(--borde, #d9d9e0); border-radius: .4rem;
    font-size: 1rem; cursor: pointer;
}
.lista-contabilidades button:hover { border-color: var(--acento, #7a3fa0); }
.lista-contabilidades button.activa { border-color: var(--acento, #7a3fa0); font-weight: 600; }
.lista-contabilidades small { display: block; opacity: .65; font-weight: 400; }

/* Botón de ayuda «?» en la cabecera del asiento y su diálogo. */
.boton-ayuda {
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    border: 1px solid var(--borde, #d9d9e0); background: var(--fondo-suave, #f5f5f7);
    color: inherit; font-weight: 700; cursor: pointer; line-height: 1; padding: 0;
}
.boton-ayuda:hover { border-color: var(--acento, #7a3fa0); color: var(--acento, #7a3fa0); }
.ayuda-rectif h3 { margin: .9rem 0 .3rem; font-size: .95rem; }
.ayuda-rectif p, .ayuda-rectif ul { margin: .3rem 0; font-size: .9rem; line-height: 1.45; }
.ayuda-rectif ul { padding-left: 1.2rem; }
.ayuda-rectif table { margin: .4rem 0; width: auto; min-width: 24rem; }
.ayuda-rectif small { opacity: .7; }
.aviso-rectif {
    background: #fff6e5; border: 1px solid #e8c37a; border-radius: .35rem;
    padding: .5rem .7rem; font-size: .85rem; line-height: 1.4; margin-bottom: .3rem;
}

/* Importar facturas (zona de preparación). Todo con prefijo `imp-`. */
.imp-intro { color: var(--tinta-suave, #556); font-size: .9rem; max-width: 64rem; line-height: 1.5; }
.imp-intro-nota { font-style: italic; opacity: .85; }
.imp-tit { margin-top: 2rem; font-size: 1.05rem; }
.imp-mono { font-family: ui-monospace, Consolas, monospace; font-size: .85em; }
.imp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.imp-subir {
    display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
    margin: 1rem 0; padding: .8rem 1rem;
    border: 1px solid var(--linea, #e3e3d8); border-radius: .5rem;
    background: var(--fondo-suave, #f5f5f7);
}
.imp-subir label { font-weight: 600; font-size: .9rem; }
.imp-estado { font-size: .85rem; color: var(--tinta-suave, #556); }

/* El motivo del rechazo puede traer una línea por problema: se respetan los saltos. */
.imp-rechazo {
    white-space: pre-wrap; background: #fdf0f0; border: 1px solid #e0a0a0;
    border-radius: .4rem; padding: .7rem .9rem; margin: .8rem 0;
    font-size: .85rem; line-height: 1.5; max-width: 72rem;
}

.imp-tabla { max-width: 82rem; }
.imp-tabla-mini { font-size: .85rem; margin: .3rem 0; }
/* Ficha del documento original: dos columnas, la etiqueta a la izquierda. */
.imp-tabla-fina { max-width: 56rem; font-size: .85rem; margin: .4rem 0 .6rem; }
.imp-tabla-fina th { text-align: left; font-weight: 600; white-space: nowrap; width: 12rem; }

/* Las dos formas de subir un lote, una al lado de otra: son alternativas, no pasos. En pantalla
   estrecha se apilan solas. */
.imp-entradas, .imp-preparar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: .8rem; margin: .8rem 0;
}
.imp-entrada, .imp-preparar-uno {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: .8rem 1rem;
}
.imp-entrada label { display: block; font-weight: 600; margin-bottom: .4rem; }
.imp-entrada input[type=file] { display: block; width: 100%; margin-bottom: .6rem; }
.imp-preparar-uno .imp-nota { display: block; margin-top: .4rem; }

/* Aprobar, debajo del listado y separado: es lo único que escribe en la contabilidad. */
.imp-aprobar-lote { margin-top: 1rem; }
/* El botón de ver el original, dentro del recuadro del asiento. */
.imp-ver-doc { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .8rem 0 0; }

/* Filtro de la lista de lotes: desplegable, botón de archivar en bloque y su explicación. */
.imp-filtros {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .6rem 0 .8rem;
}
.imp-filtros label { font-weight: 600; }
/* El desplegable se ajusta a su contenido: un `select` suelto en un flex se estira a todo el
   ancho y parece un campo de texto vacío. */
.imp-filtros select { width: auto; min-width: 16rem; flex: 0 0 auto; }
.imp-filtros .imp-nota { flex: 1 1 18rem; }
/* El botón de archivar de cada fila: discreto, porque la fila entera abre el lote. */
.imp-tabla .imp-archivar { font-size: .78rem; padding: .1rem .5rem; }

/* Distintivos de una línea del asiento previsto: lleva IVA, retención o imputación. */
.imp-marca {
    display: inline-block; border: 1px solid var(--borde, #ccd); border-radius: .25rem;
    padding: 0 .3rem; font-size: .7rem; font-weight: 600; color: var(--tinta-suave, #556);
    vertical-align: .05rem;
}
/* El asiento que se va a crear.
 *
 * Destaca sobre el resto de la ficha a propósito: todo lo demás es lo que se ha leído y lo que se
 * propone, pero ESTO es lo que va a entrar en la contabilidad. Es lo que hay que mirar antes de
 * pulsar, así que no puede parecer un bloque más. */
.imp-asiento-previo {
    background: var(--fondo-suave, #f5f5f7);
    border: 4px solid var(--borde, #ccd);
    border-radius: .6rem;
    padding: 1rem 1.2rem 1.1rem;
    margin: 1rem 0 .4rem;
}
/* Va con `.imp-bloque` delante porque si no gana `.imp-bloque h3`, que pinta los encabezados de
   la ficha pequeños y en morado. Este tiene que ser lo contrario: grande y negro. */
.imp-bloque .imp-asiento-previo-tit {
    margin: 0 0 .8rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #111;
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* La tabla va sobre blanco: sobre el gris del bloque las filas se leen peor. */
.imp-asiento-previo .imp-tabla { background: #fff; }
/* La cuenta de cada línea de gasto se escribe aquí mismo. Estrecho y monoespaciado, para que la
   columna siga leyéndose como una columna de cuentas y no como un formulario. */
.imp-cta-linea {
    width: 9.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem; padding: .15rem .35rem;
}
.imp-asiento-previo tfoot td { border-top: 2px solid var(--borde, #ccd); }

/* Un hueco del asiento previsto que hay que rellenar antes de poder aprobar. */
.imp-falta { color: #b91c1c; font-weight: 600; font-style: italic; }
/* El nombre de la cuenta, debajo de su código. Pequeño y en gris: acompaña al código, no compite
   con él. En rojo cuando la cuenta no existe o no admite apuntes, que es lo que hay que ver. */
.imp-cta-nombre {
    font-size: .74rem; line-height: 1.3; color: var(--tinta-suave, #556);
    margin-top: .1rem; font-family: inherit; max-width: 16rem;
}
.imp-cta-mala { color: #b91c1c; font-weight: 600; }
/* Motivo por el que algo no se puede hacer, dentro de un bloque (no flotante: se lee con calma). */
.imp-rechazo-inline {
    background: #fdf0f0; border: 1px solid #e0a0a0; border-radius: .4rem;
    padding: .5rem .7rem; margin: .5rem 0; font-size: .85rem; line-height: 1.5; max-width: 72rem;
}
.imp-fila { cursor: pointer; }
.imp-fila:hover { background: var(--fondo-suave, #f5f5f7); }
/* «Esta pestaña se ha quedado atrás»: se despliega una versión nueva y quien tenía la página
   abierta sigue con el JavaScript viejo. Va abajo y fijo, para que no tape lo que se esté
   mirando pero tampoco se pueda pasar por alto. No recarga solo: quien esté a mitad de un
   formulario perdería lo escrito. */
.aviso-version {
    position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 9000;
    display: flex; align-items: center; gap: .8rem; max-width: min(46rem, 94vw);
    padding: .6rem 1rem; border: 1px solid #c9a227; border-radius: .5rem;
    background: #fdf6dd; color: #4a3c05; font-size: .88rem; line-height: 1.4;
    box-shadow: 0 .3rem .9rem rgba(0, 0, 0, .18);
}
.aviso-version button {
    flex: 0 0 auto; padding: .3rem .8rem; border: 1px solid #c9a227; border-radius: .3rem;
    background: #fff; color: #4a3c05; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.aviso-version button:hover { background: #f6edcd; }

.imp-motivo { font-size: .78rem; color: var(--tinta-suave, #556); margin-top: .15rem; }
.imp-motivo .imp-mas { color: var(--acento, #7a3fa0); font-weight: 600; white-space: nowrap; }

/* Las DOS listas de la ficha. Se distinguen a propósito: la de arriba es trabajo pendiente y la
   de abajo no lo es. Con el mismo aspecto, lo segundo escondía a lo primero. */
.imp-decisiones li { color: var(--error, #b3261e); }
.imp-informativos li { color: var(--tinta-suave, #556); }

.imp-estado-chip {
    display: inline-block; border: 1px solid; border-radius: 999px;
    padding: .05rem .45rem; font-size: .75rem; font-weight: 600; white-space: nowrap;
}

.imp-bloque {
    border: 1px solid var(--linea, #e3e3d8); border-radius: .5rem;
    padding: .2rem 1rem 1rem; margin: 1rem 0; max-width: 82rem;
}
.imp-bloque h3 { font-size: .92rem; margin: .9rem 0 .5rem; color: var(--acento, #7a3fa0); }
.imp-bloque ul { margin: .3rem 0; padding-left: 1.2rem; font-size: .88rem; line-height: 1.5; }
.imp-bloque-revisar { background: #fff6e5; border-color: #e8c37a; }

.imp-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .5rem 1.2rem; }
.imp-campos > div { font-size: .9rem; }
.imp-campos span:first-child {
    display: block; font-size: .74rem; text-transform: uppercase;
    letter-spacing: .03em; color: var(--tinta-suave, #556);
}
/* Marca de los tipos de IVA en la lista de facturas. Discreta cuando hay un solo tipo y
   visible cuando hay varios: eso último es lo que hay que mirar despacio. */
.imp-tipos {
    display: flex; align-items: center; justify-content: flex-end; gap: .25rem;
    margin-top: .2rem; font-size: .72rem; color: var(--tinta-suave, #556);
    font-variant-numeric: normal; white-space: nowrap;
}
.imp-tipos-varios { color: #b45309; font-weight: 600; }
.imp-tipos-re {
    border: 1px solid currentColor; border-radius: 3px;
    padding: 0 .2rem; font-size: .64rem; font-weight: 700; letter-spacing: .02em;
}
.imp-desplegar {
    border: 1px solid var(--borde, #d9d9e0); background: transparent; color: inherit;
    border-radius: 3px; cursor: pointer; line-height: 1; padding: 0 .2rem;
    font-size: .7rem;
}
.imp-desplegar:hover { border-color: currentColor; }
.imp-desglose-celda { background: var(--fondo-suave, #f5f5f7); padding: .4rem .8rem; }
.imp-desglose-celda table { margin: 0; }

/* Corrección de la propuesta, dentro de la ficha: resolver el aviso sin salir a otra pantalla. */
.imp-editar {
    display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end;
    margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--linea, #e3e3d8);
}
.imp-editar label { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-suave, #556); }
.imp-editar input { font-size: .95rem; padding: .3rem .4rem; min-width: 11rem; }
.imp-editar-motivo { flex: 1 1 18rem; }
.imp-editar-motivo input { text-transform: none; letter-spacing: normal; width: 100%; }

/* Lo guardado se queda escrito: un aviso que se desvanece no basta para un cambio auditado. */
.imp-guardado {
    margin-top: .8rem; padding: .6rem .8rem; border-left: 3px solid var(--ok, #2e7d32);
    background: var(--fondo-suave, #f4f6f1); font-size: .88rem; line-height: 1.5;
}
.imp-guardado p { margin: .3rem 0 0; }

/* «El proveedor no existe»: va pegado a la cuenta a la que se refiere y se ve a primera vista.
   Es la decisión más importante de la ficha —se va a crear una cuenta nueva al aprobar—, así que
   no puede leerse como una nota al pie más. */
.imp-alta {
    margin: .6rem 0 0; padding: .5rem .8rem; border-left: 3px solid var(--error, #b3261e);
    background: #fdf1f0; color: var(--error, #b3261e); font-size: .9rem; line-height: 1.5;
}
.imp-alta strong, .imp-alta .imp-mono { color: inherit; }

/* Un rechazo se queda en pantalla: explica qué pasa y qué hacer, y hay que poder leerlo. */
.imp-fallo {
    margin: .5rem 0 0; padding: .55rem .8rem; border-left: 3px solid var(--error, #b3261e);
    background: #fdf1f0; font-size: .88rem; line-height: 1.5;
}

/* Listado de todas las cuentas imputadas: la respuesta a «¿qué tengo puesto y qué me falta?». */
.in-tit-todas { margin-top: 2rem; }
.in-nota { font-size: .84rem; color: var(--tinta-suave, #556); margin-bottom: .5rem; }
.in-todas { width: 100%; }
.in-todas .in-todas-fila { cursor: pointer; }
.in-todas .in-todas-fila:hover { background: var(--fondo-suave, #f4f6f1); }
.in-todas .in-mono { font-family: ui-monospace, Consolas, monospace; }

/* Quién cambió qué y por qué: el registro que hace explicable la contabilización. */
.imp-historico { margin-top: 1rem; }
.imp-historico h3 { margin-bottom: .3rem; }
.imp-historico table { width: 100%; font-size: .84rem; }
.imp-sin-motivo { color: var(--tinta-suave, #556); font-style: italic; }

.imp-totales { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin-top: .6rem; font-size: .88rem; }
.imp-nota { font-size: .82rem; color: var(--tinta-suave, #556); font-style: italic; line-height: 1.45; }

/* --- Tokens de la API ---------------------------------------------------- */
.tk-filtros { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: .6rem; }
.tk-filtros label { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .85rem; }
.tk-filtros input { width: auto; }

/* El token recién emitido. Se enseña UNA vez y no vuelve: por eso ocupa, avisa y no se
   confunde con el resto de la pantalla. Desaparece al recargar, como el propio secreto. */
.tk-nuevo { border: 2px solid var(--marca-naranja); border-radius: var(--radio);
            padding: .9rem 1rem; margin: 1rem 0; background: #fff8f0; }
.tk-nuevo h3 { margin: 0 0 .4rem; }
.tk-nuevo code { display: block; word-break: break-all; font-size: 1rem; padding: .6rem;
                 background: var(--blanco); border: 1px solid var(--linea); border-radius: 6px; }

.tk-estado { font-weight: 600; }
.tk-activo   { color: var(--ok); }
.tk-caducado { color: var(--marca-naranja); }
.tk-revocado { color: var(--tinta-suave); text-decoration: line-through; }