/* Logion Facturación — estilos de toda la web.

   Orden: fuentes · colores y medidas · base · esqueleto (menú y página) · piezas
   (botones, campos, tablas…) · páginas concretas · móvil · impresión.

   Nada de estilos en línea en las plantillas: la política de seguridad (CSP) los bloquea.
*/

/* ── Fuentes ─────────────────────────────────────────────────────────────── */
@font-face { font-family: "Poppins"; src: url("fuentes/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fuentes/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fuentes/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fuentes/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ── Colores y medidas ───────────────────────────────────────────────────── */
:root {
  --azul: #5F86FE;            /* marca: rellenos, barras, anillos de foco */
  --azul-texto: #3B5FD6;      /* texto pequeño, enlaces y botón principal */
  --azul-oscuro: #2B4FC7;
  --azul-50: #EEF3FF;
  --azul-100: #DCE7FF;
  --azul-200: #B8CFFF;
  --azul-tinta: #1E3A8A;

  --tinta: #1D1B1C;
  --noche: #171A28;
  --noche-2: #1F2547;
  --noche-texto: #E4E7F5;
  --noche-suave: #A3ABCE;

  --gris-50: #FAFAFA;
  --gris-100: #F3F2F3;
  --gris-200: #E8E6E7;
  --gris-300: #C8C5C7;
  --gris-400: #8A8688;        /* bordes de campos (3:1 sobre blanco) */
  --gris-500: #6F6C6E;
  --gris-600: #575456;
  --gris-700: #3A3738;

  --verde: #15803D;
  --verde-tinta: #14532D;
  --verde-fondo: #EEF8F1;
  --verde-borde: #B9DFC6;
  --ambar: #B45309;
  --ambar-texto: #92400E;
  --ambar-tinta: #713F12;
  --ambar-fondo: #FEF6E8;
  --ambar-borde: #F2D29E;
  --rojo: #DC2626;
  --rojo-texto: #B91C1C;
  --rojo-tinta: #7F1D1D;
  --rojo-fondo: #FDF2F2;
  --rojo-borde: #F3C3C3;

  --degradado: linear-gradient(115deg, #171A28 0%, #1F2547 45%, #2B4FC7 82%, #5F86FE 100%);

  --radio: 12px;
  --radio-boton: 10px;
  --sombra: 0 1px 2px rgb(29 27 28 / .04), 0 1px 3px rgb(29 27 28 / .06);
  --sombra-media: 0 4px 16px rgb(23 26 40 / .08);
  --sombra-alta: 0 16px 40px rgb(23 26 40 / .22);

  --fuente: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --ancho-lateral: 256px;
  --alto-cinta: 0px;
  --hueco-x: 40px;            /* margen lateral del contenido */
  --hueco-arriba: 32px;
  --hueco-abajo: 48px;
}
.con-cinta { --alto-cinta: 34px; }

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cinta) + 76px); }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--gris-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--tinta); }
h1 { font-size: 1.625rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 .75em; padding-left: 1.25em; }
li + li { margin-top: .25em; }
a { color: var(--azul-texto); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--azul-oscuro); }
img { max-width: 100%; height: auto; }
strong, b { font-weight: 600; }
small { font-size: .8125rem; }
hr { border: 0; border-top: 1px solid var(--gris-200); margin: 20px 0; }
code, .mono {
  font-family: var(--mono);
  font-size: .875em;
  overflow-wrap: anywhere;
  background: var(--gris-100);
  border-radius: 6px;
  padding: 1px 6px;
}
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
::selection { background: var(--azul-100); }

.icono { display: inline-block; width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -.25em; }

.oculto-visual {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
html:not(.js) .solo-js { display: none !important; }
.js .sin-js { display: none !important; }
[hidden] { display: none !important; }
/* Palabras que solo hacen falta en el móvil (donde la tabla pierde su cabecera) */
.solo-movil { display: none; }

.texto-suave { color: var(--gris-600); }
.texto-pequeno { font-size: .875rem; }
.texto-verde { color: var(--verde); }
.texto-ambar { color: var(--ambar-texto); }
.texto-rojo { color: var(--rojo-texto); }
.num, .cifra { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.texto-partir { overflow-wrap: anywhere; }
.ancho-texto { max-width: 68ch; }

.saltar {
  position: absolute; left: 12px; top: -200px; z-index: 200;
  padding: 10px 16px; border-radius: var(--radio-boton);
  background: var(--noche); color: #fff; font-weight: 500; text-decoration: none;
}
.saltar:focus { top: 12px; color: #fff; }

/* Cinta fija de la instancia de pruebas */
.cinta-pruebas {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--alto-cinta); padding: 0 16px;
  font-size: .8125rem; font-weight: 600; color: #3B2A04;
  background: repeating-linear-gradient(135deg, #FCD34D 0 14px, #FBC531 14px 28px);
  border-bottom: 1px solid #E0A815;
  white-space: nowrap; overflow: hidden;
}
.cinta-pruebas span { overflow: hidden; text-overflow: ellipsis; }
.cinta-pruebas .icono { width: 16px; height: 16px; }

/* ── Esqueleto: menú lateral y contenido ─────────────────────────────────── */
.marco { min-height: calc(100vh - var(--alto-cinta)); }

.lateral {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 14px 14px;
  background: var(--noche);
  background-image: linear-gradient(180deg, #171A28 0%, #191D30 70%, #1C2140 100%);
  color: #fff;
}
.lateral-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 10px; }
.marca { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; border-radius: 8px; padding: 4px; }
.marca img { display: block; height: 40px; width: auto; }
.marca:hover { color: #fff; }
.marca-app {
  font-size: .8125rem; font-weight: 500; line-height: 1.2; letter-spacing: .02em;
  color: var(--noche-texto); padding-left: 12px; border-left: 1px solid rgb(255 255 255 / .2);
}
.cerrar-menu {
  display: none; place-items: center; width: 44px; height: 44px; border-radius: var(--radio-boton);
  color: var(--noche-texto);
}
.cerrar-menu:hover { background: rgb(255 255 255 / .08); color: #fff; }
.cerrar-menu .icono { width: 22px; height: 22px; }

.nav { flex: 1; }
.nav-grupo {
  margin: 14px 0 4px; padding: 0 12px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--noche-suave);
}
.nav-grupo:first-child { margin-top: 4px; }
.nav ul, .lateral-pie ul { list-style: none; margin: 0; padding: 0; }
.nav li + li, .lateral-pie li + li { margin-top: 2px; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--radio-boton); background: none;
  font-family: inherit; font-size: .9375rem; font-weight: 500; line-height: 1.2; text-align: left;
  color: var(--noche-texto); text-decoration: none; cursor: pointer;
}
.nav-item .icono { width: 20px; height: 20px; color: var(--noche-suave); }
.nav-item:hover { background: rgb(255 255 255 / .07); color: #fff; }
.nav-item:hover .icono { color: #fff; }
.nav-item.activo { background: rgb(95 134 254 / .2); color: #fff; }
.nav-item.activo .icono { color: #B7C9FF; }
.nav-item.activo::before {
  content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--azul);
}
.lateral :focus-visible { outline-color: #8FAAFF; }

.lateral-pie { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid rgb(255 255 255 / .1); }
.usuario-bloque {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  margin-top: 6px; padding: 10px 12px; border-radius: var(--radio-boton);
  color: #fff; text-decoration: none;
}
.usuario-bloque:hover, .usuario-bloque.activo { background: rgb(255 255 255 / .07); color: #fff; }
.usuario-inicial {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--azul-oscuro); color: #fff; font-weight: 600;
}
.usuario-textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.usuario-nombre { font-size: .9375rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-rol { font-size: .75rem; color: var(--noche-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-bloque .icono-ir { flex-shrink: 0; width: 18px; height: 18px; margin-left: auto; color: var(--noche-suave); }
.lateral:focus { outline: none; }
.form-salir { margin: 0; }

.barra-movil { display: none; }
.velo { display: none; }

.principal { display: flex; flex-direction: column; min-width: 0; min-height: calc(100vh - var(--alto-cinta)); }
.contenido {
  flex: 1; width: 100%; max-width: 1240px; margin: 0 auto;
  padding: var(--hueco-arriba) var(--hueco-x) var(--hueco-abajo);
}
.contenido:focus { outline: none; }
.pie {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 20px;
  padding: 18px 16px 22px; border-top: 1px solid var(--gris-200);
  font-size: .8125rem; color: var(--gris-600);
}
.pie a { display: inline-flex; align-items: center; min-height: 32px; color: var(--gris-600); }
.pie a:hover { color: var(--tinta); }

@media (min-width: 1024px) {
  .marco {
    display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
    background: linear-gradient(90deg, #1C2140 0 var(--ancho-lateral), transparent 0);
  }
  /* En el ordenador (ratón) el menú es algo más compacto, para que quepa entero en pantallas de 800px */
  .lateral { padding-top: 14px; gap: 4px; }
  .lateral-cabecera { padding-bottom: 6px; }
  .nav-item { min-height: 40px; }
  .nav-grupo { margin: 12px 0 2px; }
  .usuario-bloque { margin-top: 2px; padding: 8px 12px; }
  .lateral { position: sticky; top: var(--alto-cinta); height: calc(100vh - var(--alto-cinta)); overflow-y: auto; scrollbar-width: thin; }
}

/* Dentro del Hub de Crescita (app.js pone .en-hub): el menú es el del Hub; aquí, solo una barra fina */
.barra-hub { display: none; }
.en-hub .lateral, .en-hub .barra-movil, .en-hub .velo, .en-hub .pie { display: none; }
.en-hub .marco { display: block; background: none; }
.en-hub .barra-hub {
  position: sticky; top: var(--alto-cinta); z-index: 40;
  display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 calc(var(--hueco-x) - 10px);
  background: #fff; border-bottom: 1px solid var(--gris-200);
  font-size: .8125rem;
}
.barra-hub-marca { margin-right: auto; padding: 0 10px; font-weight: 600; color: var(--gris-600); white-space: nowrap; }
.barra-hub-enlace {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; min-width: 0;
  border: 0; border-radius: var(--radio-boton); background: none;
  font: inherit; color: var(--gris-600); text-decoration: none; cursor: pointer;
}
.barra-hub-enlace span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.barra-hub-enlace .icono { width: 18px; height: 18px; flex-shrink: 0; }
.barra-hub-enlace:hover, .barra-hub-enlace.activo { background: var(--gris-100); color: var(--tinta); }
@media screen and (max-width: 720px) {
  .barra-hub-marca { display: none; }
  .barra-hub { justify-content: flex-end; }
}

/* Avisos del sistema (franja arriba del todo) */
.aviso-sistema {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px var(--hueco-x); border-bottom: 1px solid;
  font-size: .9375rem;
}
.aviso-sistema p { margin: 0; }
.aviso-sistema a { color: inherit; font-weight: 600; }
.aviso-sistema .icono { width: 20px; height: 20px; margin-top: 1px; }
.aviso-sistema-aviso { background: var(--ambar-fondo); border-color: var(--ambar-borde); color: var(--ambar-tinta); }
.aviso-sistema-error { background: var(--rojo-fondo); border-color: var(--rojo-borde); color: var(--rojo-tinta); }
.aviso-sistema-info { background: var(--azul-50); border-color: var(--azul-100); color: var(--azul-tinta); }
.aviso-sistema-exito { background: var(--verde-fondo); border-color: var(--verde-borde); color: var(--verde-tinta); }

/* ── Cabecera de página ──────────────────────────────────────────────────── */
.cabecera { margin-bottom: 24px; }
.volver {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 36px; margin: -4px 0 8px -8px; padding: 0 10px 0 4px;
  border-radius: 8px; font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--gris-600);
}
.volver:hover { background: var(--gris-200); color: var(--tinta); }
.volver .icono { width: 18px; height: 18px; }
.cabecera-fila { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; }
.cabecera-textos { flex: 1 1 340px; min-width: 0; }
.cabecera h1 { overflow-wrap: anywhere; }
.cabecera-insignias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cabecera-sub { margin: 6px 0 0; max-width: 72ch; color: var(--gris-600); }
.cabecera-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--radio-boton);
  font-family: inherit; font-size: .9375rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.boton .icono { width: 18px; height: 18px; }
.boton-primario { background: var(--azul-texto); color: #fff; box-shadow: 0 1px 2px rgb(43 79 199 / .25); }
.boton-primario:hover { background: var(--azul-oscuro); color: #fff; }
.boton-secundario { background: #fff; color: var(--tinta); border-color: var(--gris-300); }
.boton-secundario:hover { background: var(--gris-50); border-color: var(--gris-400); color: var(--tinta); }
.boton-peligro { background: var(--rojo); color: #fff; }
.boton-peligro:hover { background: var(--rojo-texto); color: #fff; }
.boton-fantasma { background: transparent; color: var(--azul-texto); }
.boton-fantasma:hover { background: var(--azul-50); color: var(--azul-oscuro); }
.boton-pequeno { min-height: 36px; padding: 0 12px; gap: 6px; font-size: .875rem; }
.boton-pequeno .icono { width: 16px; height: 16px; }
.boton-grande { min-height: 52px; padding: 0 24px; font-size: 1rem; font-weight: 600; }
.boton-bloque { display: flex; width: 100%; }
.boton-icono { width: 40px; min-height: 40px; padding: 0; }
.boton-icono .icono { width: 18px; height: 18px; }
.boton:disabled, .boton.inactivo { opacity: .5; cursor: not-allowed; box-shadow: none; }
.boton.inactivo { pointer-events: none; }
.boton[data-enviando] { opacity: .7; cursor: progress; }
@media (pointer: coarse) { .boton-pequeno { min-height: 40px; } .boton-icono { width: 44px; min-height: 44px; } }
.form-boton { display: inline-flex; margin: 0; }
.botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.botones-fin { justify-content: flex-end; }

/* Menú «Más acciones» (funciona sin JavaScript: es un <details>) */
.menu-acciones { position: relative; }
.menu-acciones > summary { list-style: none; }
.menu-acciones > summary::-webkit-details-marker { display: none; }
.menu-acciones[open] > summary { background: var(--gris-100); }
.menu-acciones-lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  display: grid; gap: 2px; min-width: 250px; padding: 6px;
  background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra-alta);
}
.menu-acciones-lista form { margin: 0; }
.menu-acciones-lista a, .menu-acciones-lista button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 8px; background: none;
  font-family: inherit; font-size: .9375rem; font-weight: 500; text-align: left; text-decoration: none;
  color: var(--tinta); cursor: pointer;
}
.menu-acciones-lista a:hover, .menu-acciones-lista button:hover { background: var(--gris-100); color: var(--tinta); }
.menu-acciones-lista .icono { width: 18px; height: 18px; color: var(--gris-600); }
.menu-acciones-lista .peligro, .menu-acciones-lista .peligro .icono { color: var(--rojo-texto); }
.menu-acciones-lista .peligro:hover { background: var(--rojo-fondo); color: var(--rojo-texto); }
.menu-acciones-lista hr { margin: 4px 6px; }
.menu-acciones-nota { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 8px 12px; font-size: .8125rem; color: var(--gris-600); }
.menu-acciones-nota strong { display: block; font-size: .9375rem; font-weight: 500; color: var(--gris-700); }
.menu-acciones-nota .icono { flex-shrink: 0; margin-top: 2px; }

/* ── Insignias de estado ─────────────────────────────────────────────────── */
.insignia {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 10px 1px 8px; border: 1px solid transparent; border-radius: 999px;
  font-size: .8125rem; font-weight: 500; line-height: 1.55; white-space: nowrap;
}
.insignia::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.insignia:has(.icono)::before { display: none; }
.insignia .icono { width: 14px; height: 14px; }
.insignia-gris { background: var(--gris-100); border-color: var(--gris-200); color: var(--gris-600); }
.insignia-azul { background: var(--azul-50); border-color: var(--azul-100); color: var(--azul-oscuro); }
.insignia-verde { background: var(--verde-fondo); border-color: var(--verde-borde); color: var(--verde); }
.insignia-ambar { background: var(--ambar-fondo); border-color: var(--ambar-borde); color: var(--ambar-texto); }
.insignia-rojo { background: var(--rojo-fondo); border-color: var(--rojo-borde); color: var(--rojo-texto); }
.estados { display: flex; flex-wrap: wrap; gap: 4px 6px; }

/* ── Alertas ─────────────────────────────────────────────────────────────── */
.alerta {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px solid; border-radius: var(--radio);
  font-size: .9375rem;
}
.alerta:focus { outline: 3px solid var(--azul); outline-offset: 2px; }
.alerta-icono { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
.alerta-texto { flex: 1; min-width: 0; }
.alerta-texto > p { margin: 0; }
.alerta-texto > p + p { margin-top: 4px; }
.alerta-titulo { font-weight: 600; }
.alerta ul { margin: 6px 0 0; padding-left: 1.2em; }
.alerta a:not(.boton) { color: inherit; font-weight: 600; }
.alerta .botones { margin-top: 10px; }
.alerta-exito { background: var(--verde-fondo); border-color: var(--verde-borde); color: var(--verde-tinta); }
.alerta-exito .alerta-icono { color: var(--verde); }
.alerta-aviso { background: var(--ambar-fondo); border-color: var(--ambar-borde); color: var(--ambar-tinta); }
.alerta-aviso .alerta-icono { color: var(--ambar); }
.alerta-error { background: var(--rojo-fondo); border-color: var(--rojo-borde); color: var(--rojo-tinta); }
.alerta-error .alerta-icono { color: var(--rojo); }
.alerta-info { background: var(--azul-50); border-color: var(--azul-100); color: var(--azul-tinta); }
.alerta-info .alerta-icono { color: var(--azul-texto); }
.mensajes { display: grid; gap: 10px; margin-bottom: 20px; }

/* ── Tarjetas y rejillas ─────────────────────────────────────────────────── */
.tarjeta {
  min-width: 0; padding: 24px;
  background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra);
}
.tarjeta-cabecera { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.tarjeta-cabecera > div { flex: 1; min-width: 0; }
.tarjeta-icono {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--azul-50); color: var(--azul-texto);
}
.tarjeta-icono .icono { width: 20px; height: 20px; }
.tarjeta-titulo { font-size: 1.0625rem; font-weight: 600; }
.tarjeta-sub { margin: 2px 0 0; font-size: .9375rem; color: var(--gris-600); }
.tarjeta-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gris-200); }
.tarjeta-destacada { border-color: var(--azul-200); box-shadow: 0 0 0 3px var(--azul-50); }
.tarjeta-peligro { border-color: var(--rojo-borde); }
/* Un aviso dentro de una tarjeta no se pega a lo que viene detrás */
.tarjeta > .alerta + * { margin-top: 18px; }
.tarjeta > .tabla-caja, .tarjeta > .tabla-caja-apilable {
  margin: 0 -24px; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none;
}
.tarjeta > .tabla-caja:last-child { margin-bottom: -24px; border-bottom: 0; border-radius: 0 0 var(--radio) var(--radio); }
.tarjeta > .tarjeta-cabecera + .tabla-caja { margin-top: 0; }
/* Tras una tabla, el pie de la tarjeta no lleva otra raya: ya la pone la tabla */
.tarjeta > .tabla-caja + .tarjeta-pie, .tarjeta > .tabla-caja-apilable + .tarjeta-pie { margin-top: 0; border-top: 0; }

.pila > * + * { margin-top: 20px; }
.pila-corta > * + * { margin-top: 12px; }
.rejilla { display: grid; gap: 20px; align-items: start; }
.rejilla > * { min-width: 0; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
/* En una sola columna (móvil y tableta), lo marcado así sube arriba: lo pendiente antes que el histórico */
@media (max-width: 1179px) { .rejilla > .primero-en-movil { order: -1; } }
@media (min-width: 1180px) {
  .rejilla-principal { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .rejilla-documento { grid-template-columns: minmax(0, 1fr) 360px; }
  .rejilla-formulario { grid-template-columns: minmax(0, 1fr) 340px; }
}
.columna-lateral { display: grid; gap: 20px; align-content: start; }
@media (min-width: 1180px) { .pegajoso { position: sticky; top: calc(var(--alto-cinta) + 20px); } }

/* ── Formularios ─────────────────────────────────────────────────────────── */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; font-weight: 600; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .campo-etiqueta { font-size: .9375rem; font-weight: 500; color: var(--tinta); }
.obligatorio { color: var(--rojo-texto); }

/* :where() deja la especificidad en la de «input»: así ganan las reglas de foco, encima, desactivado o código */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"])),
select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--gris-400); border-radius: var(--radio-boton); background-color: #fff;
  font-family: inherit; font-size: 1rem; line-height: 1.4; color: var(--tinta);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 96px; resize: vertical; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23575456' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
input::placeholder, textarea::placeholder { color: #8A8688; opacity: 1; }
input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) { border-color: var(--gris-600); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--azul-texto); outline-offset: 1px; border-color: var(--azul-texto);
}
input:disabled, select:disabled, textarea:disabled, input[readonly], textarea[readonly] {
  background-color: var(--gris-100); color: var(--gris-600); cursor: not-allowed;
}
input[readonly], textarea[readonly] { cursor: default; }
input[type="file"] {
  width: 100%; padding: 10px; border: 1px dashed var(--gris-400); border-radius: var(--radio-boton);
  background: var(--gris-50); font-family: inherit; font-size: .9375rem; color: var(--gris-700); cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: 12px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--gris-300); border-radius: 8px; background: #fff;
  font-family: inherit; font-size: .875rem; font-weight: 500; color: var(--tinta); cursor: pointer;
}
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--azul-texto); cursor: pointer;
}
input.importe, .campo-importe input { text-align: right; font-variant-numeric: tabular-nums; }
input.codigo-6 { max-width: 220px; font-size: 1.5rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }

.ayuda { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--gris-600); }
.error-campo { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: .875rem; font-weight: 500; color: var(--rojo-texto); }
.error-campo .icono { width: 16px; height: 16px; margin-top: 2px; }
.con-error input:not([type="checkbox"]):not([type="radio"]), .con-error select, .con-error textarea, [aria-invalid="true"] { border-color: var(--rojo) !important; }
.campo-casilla { gap: 2px; }
.casilla { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 500; }
.campo-casilla .ayuda { padding-left: 30px; margin-top: -6px; }

.form-rejilla { display: grid; gap: 18px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.form-rejilla-2 { display: grid; gap: 18px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.form-rejilla .completo, .form-rejilla-2 .completo { grid-column: 1 / -1; }
.form-pila { display: grid; gap: 18px; }
.campo-corto input, .campo-corto select { max-width: 16em; }
.lista-puntos { margin: 0; }
.lista-puntos li + li { margin-top: 8px; }
.form-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.separador-form { margin: 24px 0 18px; padding-top: 20px; border-top: 1px solid var(--gris-200); }
.separador-form h3 { margin-bottom: 4px; }

/* Opciones grandes (radio o casilla con explicación) */
.opciones { display: grid; gap: 10px; }
.opciones-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.opcion {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--gris-300); border-radius: var(--radio);
  background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.opcion:hover { border-color: var(--azul-200); }
.opcion:has(input:checked) { border-color: var(--azul-texto); background: var(--azul-50); box-shadow: inset 0 0 0 1px var(--azul-texto); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }
.opcion input:focus-visible { outline: none; }
.opcion-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcion-titulo { font-weight: 600; }
.opcion-texto { font-size: .9375rem; color: var(--gris-600); }
.opcion:has(input:disabled) { cursor: not-allowed; background: var(--gris-50); }
.opcion:has(input:disabled):hover { border-color: var(--gris-300); }
.opcion:has(input:disabled) .opcion-titulo { color: var(--gris-600); }
.opcion-nota { display: block; margin-top: 4px; font-size: .875rem; color: var(--ambar-texto); }
.opcion-peligro:has(input:checked) { border-color: var(--rojo); background: var(--rojo-fondo); box-shadow: inset 0 0 0 1px var(--rojo); }

/* Tarjetas que son enlaces para elegir algo (por ejemplo, el tipo de rectificativa) */
.eleccion {
  display: flex; flex-direction: column; gap: 6px; padding: 20px;
  background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra);
  color: var(--tinta); text-decoration: none; cursor: pointer; font: inherit; text-align: left; width: 100%;
}
.eleccion:hover { border-color: var(--azul-texto); box-shadow: var(--sombra-media); color: var(--tinta); }
.eleccion-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1.0625rem; font-weight: 600; }
.eleccion-titulo .icono { width: 20px; height: 20px; color: var(--azul-texto); }
.eleccion-texto { color: var(--gris-600); font-size: .9375rem; }

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.tabla-caja {
  min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra);
}
.tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabla th {
  padding: 10px 14px; text-align: left; white-space: nowrap;
  font-size: .8125rem; font-weight: 600; color: var(--gris-600);
  background: var(--gris-50); border-bottom: 1px solid var(--gris-200);
}
.tabla td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid var(--gris-200); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #FCFCFD; }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla .centro { text-align: center; }
.tabla tfoot td { font-weight: 600; background: var(--gris-50); border-top: 1px solid var(--gris-200); border-bottom: 0; }
.tabla .ancho-min { width: 1%; white-space: nowrap; }
.tabla-ancha { min-width: 680px; }
.celda-principal { font-weight: 500; }
.celda-principal a { font-weight: 600; text-decoration: none; }
.celda-principal a:hover { text-decoration: underline; }
.celda-sub { display: block; font-size: .8125rem; font-weight: 400; color: var(--gris-600); }
/* Celda con varias cosas una debajo de otra (insignia + notas): en el móvil se alinea a la derecha */
.celda-pila { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.acciones-fila { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.fila-apagada td { color: var(--gris-600); }
.form-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.form-linea .campo { min-width: 150px; }
.etiqueta-oculta > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.importe-positivo { color: var(--verde); }
.importe-negativo { color: var(--tinta); }

/* ── Pestañas ────────────────────────────────────────────────────────────── */
.pestanas {
  display: flex; gap: 4px; margin-bottom: 20px; overflow-x: auto;
  border-bottom: 1px solid var(--gris-300); scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; margin-bottom: -1px;
  border-bottom: 3px solid transparent; white-space: nowrap;
  font-weight: 500; color: var(--gris-600); text-decoration: none;
}
.pestana:hover { color: var(--tinta); border-bottom-color: var(--gris-300); }
.pestana.activa { color: var(--azul-texto); border-bottom-color: var(--azul); font-weight: 600; }

/* Subnavegación de Ajustes */
.subnav { display: flex; flex-direction: column; gap: 2px; }
.subnav a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border-radius: var(--radio-boton); color: var(--gris-700); font-weight: 500; text-decoration: none;
}
.subnav a .icono { width: 18px; height: 18px; color: var(--gris-600); }
.subnav a:hover { background: var(--gris-200); color: var(--tinta); }
.subnav a.activa { background: #fff; color: var(--azul-texto); box-shadow: var(--sombra); border: 1px solid var(--gris-200); }
.subnav a.activa .icono { color: var(--azul-texto); }
.subnav-titulo { margin: 14px 12px 4px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-600); }
.ajustes { display: grid; gap: 24px; align-items: start; }
.ajustes > * { min-width: 0; }
@media (min-width: 1100px) { .ajustes { grid-template-columns: 230px minmax(0, 1fr); } .ajustes-nav { position: sticky; top: calc(var(--alto-cinta) + 20px); } }
@media (max-width: 1099.98px) {
  .subnav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--gris-300); scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { flex-shrink: 0; border-radius: 8px 8px 0 0; }
  .subnav a.activa { box-shadow: none; border: 0; border-bottom: 3px solid var(--azul); background: transparent; }
  .subnav-titulo { display: none; }
}

/* ── Filtros ─────────────────────────────────────────────────────────────── */
.filtros {
  display: grid; gap: 12px 14px; align-items: end; margin: 0 0 16px; padding: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra);
}
.filtros .campo > label { font-size: .8125rem; color: var(--gris-600); }
.filtros .campo-buscar { grid-column: span 2; }
.filtros-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.con-icono { position: relative; }
.con-icono > .icono { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--gris-600); pointer-events: none; }
.con-icono > input { padding-left: 40px !important; }
.resumen-lista { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0 0 12px; font-size: .9375rem; color: var(--gris-600); }
.resumen-lista strong { font-variant-numeric: tabular-nums; }
.resumen-lista strong:not([class]) { color: var(--tinta); }

/* ── Cifras (KPI) ────────────────────────────────────────────────────────── */
.kpis { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.kpi {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 18px 22px;
  background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra);
  color: var(--tinta); text-decoration: none;
}
a.kpi:hover { border-color: var(--azul-200); box-shadow: var(--sombra-media); color: var(--tinta); }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gris-200); }
.kpi-azul::before { background: var(--azul); }
.kpi-verde::before { background: var(--verde); }
.kpi-ambar::before { background: #E8A13A; }
.kpi-rojo::before { background: var(--rojo); }
.kpi-etiqueta { font-size: .875rem; font-weight: 500; color: var(--gris-600); }
.kpi-valor { font-size: 1.625rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi-detalle { font-size: .8125rem; color: var(--gris-600); }

/* ── Bloque vacío, paginación, datos, plegables ──────────────────────────── */
.vacio {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 40px 20px; text-align: center; color: var(--gris-600);
  background: #fff; border: 1px dashed var(--gris-300); border-radius: var(--radio);
}
.vacio p { max-width: 46ch; margin: 0; }
.vacio-icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--azul-50); color: var(--azul-texto); }
.vacio-icono .icono { width: 24px; height: 24px; }
.tarjeta .vacio { padding: 24px 8px; border: 0; background: transparent; }

.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.paginacion-texto { font-size: .9375rem; color: var(--gris-600); }

.datos { display: grid; gap: 16px 24px; margin: 0; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.dato { min-width: 0; }
.dato dt { margin-bottom: 2px; font-size: .8125rem; color: var(--gris-600); }
.dato dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.datos .dato-ancho { grid-column: 1 / -1; }
.datos-filas { display: block; }
.datos-filas .dato { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--gris-200); }
.datos-filas .dato:first-child { padding-top: 0; }
.datos-filas .dato:last-child { padding-bottom: 0; border-bottom: 0; }
.datos-filas dt { margin: 0; font-size: .9375rem; }
.datos-filas dd { text-align: right; font-variant-numeric: tabular-nums; }

.plegable { background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra); }
.plegable > summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px;
  border-radius: var(--radio); list-style: none; cursor: pointer; font-weight: 600;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary:hover { background: var(--gris-50); }
.plegable-flecha { width: 18px; height: 18px; color: var(--gris-600); transform: rotate(-90deg); transition: transform .15s; }
.plegable[open] > summary .plegable-flecha { transform: none; }
.plegable[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.plegable-cuerpo { padding: 4px 18px 18px; }
.plegable-sencillo { box-shadow: none; background: var(--gris-50); }

/* ── Diálogo de confirmación (lo crea app.js) ────────────────────────────── */
.dialogo {
  width: min(calc(100vw - 32px), 480px); padding: 0; border: 0; border-radius: 16px;
  color: var(--tinta); background: #fff; box-shadow: var(--sombra-alta);
}
.dialogo::backdrop { background: rgb(23 26 40 / .55); }
.dialogo form { margin: 0; }
.dialogo-cuerpo { display: flex; gap: 14px; padding: 24px 24px 8px; }
.dialogo-icono { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--azul-50); color: var(--azul-texto); }
.dialogo-peligro .dialogo-icono { background: var(--rojo-fondo); color: var(--rojo); }
.dialogo-icono .icono { width: 22px; height: 22px; }
.dialogo h2 { margin: 6px 0 8px; font-size: 1.1875rem; }
.dialogo p { margin: 0; color: var(--gris-700); }
.dialogo-botones { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 10px; padding: 20px 24px 24px; }

/* Avisos cortos que salen abajo (por ejemplo, «Copiado») */
.avisito {
  position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translateX(-50%);
  padding: 10px 16px; border-radius: var(--radio-boton); background: var(--noche); color: #fff;
  font-size: .9375rem; font-weight: 500; box-shadow: var(--sombra-alta);
}

/* ── Pantalla de entrar ──────────────────────────────────────────────────── */
.pantalla-entrar {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  min-height: calc(100vh - var(--alto-cinta)); padding: 40px 16px;
  background: var(--noche); background-image: var(--degradado);
}
.entrar-marca { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; text-align: center; }
.entrar-marca img { display: block; height: 64px; width: auto; }
.entrar-marca p { margin: 0; font-size: .9375rem; font-weight: 500; color: var(--noche-texto); letter-spacing: .02em; }
.entrar-tarjeta {
  width: 100%; max-width: 420px; padding: 32px;
  background: #fff; border-radius: 16px; box-shadow: 0 24px 64px rgb(0 0 0 / .28);
}
.entrar-tarjeta h1 { font-size: 1.5rem; margin-bottom: 6px; }
.entrar-tarjeta .cabecera-sub { margin: 0 0 22px; }
.entrar-tarjeta .form-pila { gap: 16px; }
.entrar-ayuda { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gris-200); font-size: .875rem; color: var(--gris-600); }
.entrar-pie { margin: 0; font-size: .8125rem; color: #fff; text-align: center; }
.contenido-solo { max-width: none; padding: 0; }

/* ── Inicio ──────────────────────────────────────────────────────────────── */
.saludo h1 { font-size: 1.75rem; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pasos li + li { margin-top: 0; }
.paso {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 10px;
  border-radius: var(--radio-boton); color: var(--tinta); text-decoration: none;
}
a.paso:hover { background: var(--gris-100); color: var(--tinta); }
.paso-marca {
  display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--gris-400); color: #fff;
}
.paso-marca .icono { width: 16px; height: 16px; }
.paso-hecho .paso-marca { background: var(--verde); border-color: var(--verde); }
.paso-hecho .paso-texto { color: var(--gris-600); }
.paso-texto { flex: 1; }
.paso .icono-ir { width: 18px; height: 18px; color: var(--gris-500); }
progress.progreso {
  display: block; width: 100%; height: 8px; margin: 4px 0 14px;
  border: 0; border-radius: 99px; background: var(--gris-200); overflow: hidden;
  appearance: none; -webkit-appearance: none; color: var(--azul);
}
progress.progreso::-webkit-progress-bar { background: var(--gris-200); border-radius: 99px; }
progress.progreso::-webkit-progress-value { background: var(--azul); border-radius: 99px; }
progress.progreso::-moz-progress-bar { background: var(--azul); border-radius: 99px; }

.tareas { list-style: none; margin: 0; padding: 0; }
.tareas li + li { margin-top: 0; }
.tarea {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 8px;
  border-bottom: 1px solid var(--gris-200); color: var(--tinta); text-decoration: none;
}
.tareas li:last-child .tarea { border-bottom: 0; }
a.tarea:hover { background: var(--gris-50); color: var(--tinta); }
.tarea-n {
  display: inline-grid; place-items: center; min-width: 34px; height: 28px; padding: 0 8px;
  border-radius: 99px; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.tarea-texto { flex: 1; min-width: 0; }
.tarea .icono-ir { width: 18px; height: 18px; color: var(--gris-500); }
.tono-gris { background: var(--gris-100); color: var(--gris-700); }
.tono-azul { background: var(--azul-50); color: var(--azul-oscuro); }
.tono-verde { background: var(--verde-fondo); color: var(--verde); }
.tono-ambar { background: var(--ambar-fondo); color: var(--ambar-texto); }
.tono-rojo { background: var(--rojo-fondo); color: var(--rojo-texto); }

/* ── Editor de líneas y de desglose ──────────────────────────────────────── */
.editor-filas { container-type: inline-size; }
.filas-cabecera, .fila-editor { display: grid; gap: 10px; align-items: start; }
.filas-cabecera {
  padding: 0 0 8px; border-bottom: 1px solid var(--gris-200);
  font-size: .8125rem; font-weight: 600; color: var(--gris-600);
}
.filas-cabecera .num { text-align: right; }
.fila-editor { padding: 12px 0; border-bottom: 1px solid var(--gris-200); }
.fila-editor .campo { gap: 4px; }
.fila-editor .campo > label { font-size: .8125rem; color: var(--gris-600); }
.fila-editor select { padding-left: 10px; padding-right: 30px; background-position: right 8px center; background-size: 16px; }
.fila-resultado { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 44px; font-variant-numeric: tabular-nums; }
.fila-resultado-valor { font-weight: 600; }
.fila-resultado-etiqueta { font-size: .75rem; color: var(--gris-600); }
.fila-acciones { display: flex; justify-content: flex-end; gap: 2px; min-height: 44px; align-items: center; }
.fila-acciones .boton-icono { color: var(--gris-600); }
.fila-acciones .boton-icono:hover { color: var(--tinta); background: var(--gris-100); }
.fila-acciones .quitar:hover { color: var(--rojo-texto); background: var(--rojo-fondo); }
.filas-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.filas-pie .campo { flex: 1 1 260px; max-width: 420px; }
.filas-nota { margin: 10px 0 0; font-size: .875rem; color: var(--gris-600); }

/* Líneas de factura: Descripción · Cantidad · Precio · Dto. · IVA · Base · acciones */
.lineas .filas-cabecera, .lineas .fila-editor { grid-template-columns: 1fr 1fr; }
.lineas .filas-cabecera { display: none; }
.lineas .fila-editor { padding: 16px; margin-bottom: 12px; border: 1px solid var(--gris-200); border-radius: var(--radio); background: var(--gris-50); }
.lineas .campo-descripcion { grid-column: 1 / -1; }
.lineas .fila-resultado { align-items: flex-start; }
@container (min-width: 620px) {
  .lineas .fila-editor { grid-template-columns: 1fr 1.25fr .8fr 1.5fr 1.1fr auto; }
  .lineas .campo-descripcion { grid-column: 1 / -1; }
  .lineas .fila-resultado { align-items: flex-end; }
  /* Las etiquetas reservan dos líneas: así las cajas quedan a la misma altura aunque una etiqueta se parta
     o un campo muestre un error debajo. */
  .lineas .fila-editor .campo:not(.campo-descripcion) > label { display: flex; align-items: flex-end; min-height: 2.5rem; line-height: 1.5; }
  .lineas .fila-resultado, .lineas .fila-acciones { margin-top: 2.75rem; }
}
@container (min-width: 960px) {
  .lineas .filas-cabecera { display: grid; }
  .lineas .filas-cabecera, .lineas .fila-editor { grid-template-columns: minmax(0, 1fr) 92px 116px 80px 156px 112px 84px; }
  .lineas .fila-editor { align-items: start; padding: 10px 0; margin: 0; border: 0; border-bottom: 1px solid var(--gris-200); border-radius: 0; background: transparent; }
  .lineas .campo-descripcion { grid-column: auto; }
  .lineas .fila-editor .campo > label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .lineas .fila-resultado-etiqueta { display: none; }
  .lineas .fila-resultado, .lineas .fila-acciones { margin-top: 0; }
}

/* Desglose de un gasto: Tipo de IVA · Base · Cuota · % deducible · Deducible · acciones */
.desglose .filas-cabecera, .desglose .fila-editor { grid-template-columns: 1fr 1fr; }
.desglose .filas-cabecera { display: none; }
.desglose .fila-editor { padding: 16px; margin-bottom: 12px; border: 1px solid var(--gris-200); border-radius: var(--radio); background: var(--gris-50); }
.desglose .fila-resultado { align-items: flex-start; }
@container (min-width: 700px) {
  .desglose .filas-cabecera { display: grid; }
  .desglose .filas-cabecera, .desglose .fila-editor { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr) 110px 120px 84px; }
  .desglose .fila-editor { align-items: start; padding: 10px 0; margin: 0; border: 0; border-bottom: 1px solid var(--gris-200); border-radius: 0; background: transparent; }
  .desglose .fila-editor .campo > label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .desglose .fila-resultado { align-items: flex-end; }
  .desglose .fila-resultado-etiqueta { display: none; }
}

/* Totales en vivo */
.totales { display: grid; gap: 8px; margin: 0; font-variant-numeric: tabular-nums; }
.totales-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.totales-fila dt { color: var(--gris-700); }
.totales-fila dd { margin: 0; font-weight: 500; text-align: right; white-space: nowrap; }
.totales-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--gris-200); font-size: 1.25rem; font-weight: 700; }
.totales-total dt { color: var(--tinta); }
.totales-total dd { font-weight: 700; }
.desglose-iva { display: grid; gap: 4px; margin: -4px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--gris-200); list-style: none; font-size: .875rem; }
.desglose-iva li + li { margin-top: 0; }
.desglose-iva li { display: flex; justify-content: space-between; gap: 12px; color: var(--gris-700); }
.caso-fiscal {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-radius: var(--radio-boton); background: var(--azul-50); color: var(--azul-tinta); font-size: .9375rem;
}
.caso-fiscal .icono { width: 20px; height: 20px; margin-top: 1px; color: var(--azul-texto); }
.lista-avisos { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lista-avisos li + li { margin-top: 0; }
.lista-avisos li { display: flex; gap: 8px; align-items: flex-start; font-size: .875rem; color: var(--ambar-tinta); }
.lista-avisos .icono { width: 16px; height: 16px; margin-top: 2px; color: var(--ambar); }
.lista-avisos.errores li { color: var(--rojo-tinta); }
.lista-avisos.errores .icono { color: var(--rojo); }
.calculando { opacity: .55; transition: opacity .2s; }

/* Barra de botones pegada abajo (editor de facturas y gastos) */
.barra-acciones {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin: 24px calc(var(--hueco-x) * -1) calc(var(--hueco-abajo) * -1); padding: 14px var(--hueco-x);
  background: rgb(255 255 255 / .97); border-top: 1px solid var(--gris-200);
  box-shadow: 0 -6px 18px rgb(23 26 40 / .07);
}
.barra-acciones-total { display: flex; flex-direction: column; margin-right: auto; line-height: 1.25; }
.barra-acciones-total span { font-size: .8125rem; color: var(--gris-600); }
.barra-acciones-total strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.barra-acciones .ayuda { flex-basis: 100%; text-align: right; }
.confirmacion-sin-js { flex-basis: 100%; }
.barra-acciones > noscript { display: block; flex-basis: 100%; }

/* ── Documento (una factura, como en papel) ──────────────────────────────── */
.documento {
  position: relative; overflow: hidden;
  padding: 44px 48px; background: #fff;
  border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra);
  font-size: .9375rem;
}
.doc-cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 2px solid var(--tinta); }
.doc-logo { display: block; height: 46px; width: auto; }
.doc-titulo { text-align: right; }
.doc-titulo h2 { font-size: 1.375rem; }
.doc-numero { margin: 2px 0 0; font-size: 1.125rem; font-weight: 600; color: var(--azul-texto); }
.doc-fechas { margin: 8px 0 0; font-size: .875rem; color: var(--gris-700); }
.doc-partes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 24px 0; }
.doc-etiqueta { margin: 0 0 6px; font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gris-600); }
.doc-parte p { margin: 0; line-height: 1.5; }
.doc-parte .doc-nombre { font-weight: 600; }
.doc-rectifica { margin: 0 0 20px; padding: 12px 14px; border-radius: var(--radio-boton); background: var(--gris-100); font-size: .875rem; }
.doc-rectifica p { margin: 0; }
.doc-tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doc-lineas { width: 100%; min-width: 520px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doc-lineas th { padding: 8px 10px; text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gris-600); border-bottom: 1px solid var(--tinta); white-space: nowrap; }
.doc-lineas td { padding: 10px; vertical-align: top; border-bottom: 1px solid var(--gris-200); }
.doc-lineas th:first-child, .doc-lineas td:first-child { padding-left: 0; }
.doc-lineas th:last-child, .doc-lineas td:last-child { padding-right: 0; }
.doc-lineas .num { text-align: right; white-space: nowrap; }
.doc-pie-tabla { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; margin-top: 18px; }
.doc-desglose { flex: 1 1 260px; font-size: .875rem; }
.doc-desglose table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doc-desglose th, .doc-desglose td { padding: 5px 8px 5px 0; text-align: left; border-bottom: 1px solid var(--gris-200); }
.doc-desglose th { font-size: .75rem; font-weight: 600; color: var(--gris-600); }
.doc-desglose .num { text-align: right; padding-right: 0; padding-left: 8px; white-space: nowrap; }
.doc-totales { flex: 0 1 300px; margin: 0; font-variant-numeric: tabular-nums; }
.doc-totales div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; }
.doc-totales dt { color: var(--gris-700); }
.doc-totales dd { margin: 0; font-weight: 500; }
.doc-totales .doc-total { margin-top: 6px; padding-top: 10px; border-top: 2px solid var(--tinta); font-size: 1.1875rem; font-weight: 700; }
.doc-totales .doc-total dt { color: var(--tinta); }
.doc-totales .doc-total dd { font-weight: 700; }
.doc-bloque { margin-top: 24px; font-size: .875rem; color: var(--gris-700); }
.doc-bloque p { margin: 0 0 4px; }
.doc-legal { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--gris-200); font-size: .8125rem; color: var(--gris-600); }
.doc-legal p { margin: 0; }
.marca-agua { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 0; }
.marca-agua span {
  transform: rotate(-24deg); padding: 6px 22px; border: 5px solid rgb(220 38 38 / .12); border-radius: 16px;
  font-size: clamp(1.75rem, 6vw, 4rem); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: rgb(220 38 38 / .12);
}
.marca-agua.anulada span { border-color: rgb(185 28 28 / .45); color: rgb(185 28 28 / .5); }
.documento > *:not(.marca-agua) { position: relative; z-index: 1; }

/* ── Listas de la página del banco y de cobros ───────────────────────────── */
.movimientos { display: grid; gap: 12px; }
.movimiento { padding: 16px 18px; background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra); }
.movimiento-fila { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 16px; }
.movimiento-fecha { flex: 0 0 96px; font-size: .875rem; color: var(--gris-600); font-variant-numeric: tabular-nums; padding-top: 1px; }
.movimiento-concepto { flex: 1 1 260px; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.movimiento-concepto a { color: var(--tinta); text-decoration: none; }
.movimiento-concepto a:hover { color: var(--azul-texto); text-decoration: underline; }
.movimiento-importe { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; min-width: 110px; }
.movimiento-estado { flex: 0 0 auto; }
.movimiento-detalle { margin: 10px 0 0; padding-left: 112px; font-size: .875rem; color: var(--gris-700); }
.movimiento-detalle ul { list-style: none; margin: 0; padding: 0; }
.propuesta {
  margin: 12px 0 0 112px; padding: 12px 14px;
  border: 1px solid var(--azul-100); border-radius: var(--radio-boton); background: var(--azul-50);
}
.propuesta-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 600; color: var(--azul-tinta); }
.propuesta ul { margin: 0 0 4px; padding: 0; list-style: none; }
.propuesta li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.propuesta-motivo { margin: 0; font-size: .875rem; color: var(--gris-700); }
.propuesta .botones { margin-top: 10px; }
.candidatos { display: grid; gap: 8px; }
.candidato { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--gris-300); border-radius: var(--radio-boton); background: #fff; cursor: pointer; }
.candidato:has(input:checked) { border-color: var(--azul-texto); background: var(--azul-50); }
.candidato:has(input:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }
.candidato-textos { flex: 1; min-width: 0; }
.candidato-importe { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Resumen en cifras pequeñas (banco, desembolsos) */
.cifras { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cifras li + li { margin-top: 0; }
.cifra-caja { display: flex; flex-direction: column; min-width: 140px; padding: 10px 14px; border-radius: var(--radio-boton); background: #fff; border: 1px solid var(--gris-200); }
.cifra-caja span { font-size: .8125rem; color: var(--gris-600); }
.cifra-caja strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }

/* Secreto que se enseña una sola vez (clave temporal, token de la API) */
.secreto {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding: 12px 14px; border-radius: var(--radio-boton);
  background: var(--noche); color: #fff;
}
.secreto code { background: none; padding: 0; color: #fff; font-size: .9375rem; }
.secreto .boton-fantasma { color: #C9D6FF; }
.secreto .boton-fantasma:hover { background: rgb(255 255 255 / .1); color: #fff; }

.qr { display: block; width: 200px; height: 200px; padding: 10px; background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio-boton); image-rendering: pixelated; }
.texto-legal {
  margin: 0; padding: 24px; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--mono); font-size: .875rem; line-height: 1.6;
  background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio);
}
.cadena { display: block; padding: 10px 12px; font-size: .8125rem; line-height: 1.5; white-space: pre-wrap; }

/* Ayuda */
.ayuda-indice { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ayuda-indice li + li { margin-top: 0; }
.ayuda-indice a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: 8px; text-decoration: none; color: var(--gris-700); font-weight: 500; }
.ayuda-indice a:hover { background: var(--gris-200); color: var(--tinta); }
.ayuda-tema { scroll-margin-top: calc(var(--alto-cinta) + 80px); }
.ayuda-tema h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 1.1875rem; }
.ayuda-tema h2 .icono { width: 22px; height: 22px; color: var(--azul-texto); }
.ayuda-tema p, .ayuda-tema li { max-width: 70ch; }
.ayuda-tema h3 { margin: 16px 0 6px; }
.pasos-numerados { padding-left: 1.4em; }
.pasos-numerados li { padding-left: 4px; }

/* Línea de tiempo (historial de una factura, registro) */
.historial { list-style: none; margin: 0; padding: 0; }
.historial li { position: relative; padding: 0 0 16px 22px; margin: 0; }
.historial li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
.historial li::after { content: ""; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px; background: var(--gris-200); }
.historial li:last-child { padding-bottom: 0; }
.historial li:last-child::after { display: none; }
.historial-texto { display: block; font-size: .9375rem; }
.historial-meta { display: block; font-size: .8125rem; color: var(--gris-600); }

.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--gris-200); }
.lista-simple > li:first-child { padding-top: 0; }
.lista-simple > li:last-child { padding-bottom: 0; border-bottom: 0; }
.lista-simple-sub { display: block; font-size: .8125rem; color: var(--gris-600); }
.lista-simple + p { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--gris-200); }
.lista-simple > li.apagado { color: var(--gris-600); }
.lista-simple > li.apagado .num { text-decoration: line-through; }
.lista-simple > li > span:first-child { flex: 1 1 12em; min-width: 0; }
.lista-simple > li.aviso-fila { justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; }
.lista-simple > li.aviso-fila > span:first-child { flex: 0 0 auto; padding-top: 2px; }
.aviso-fila-texto { flex: 1 1 14em; min-width: 0; }
.aviso-fila-texto p { margin: 0; }
.aviso-fila .form-boton { margin-left: auto; }
.mini-plegable { flex-basis: 100%; }
.mini-plegable > summary { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 500;
  color: var(--azul-texto); cursor: pointer; }
.mini-plegable > summary:hover { text-decoration: underline; }
.mini-plegable[open] > summary { margin-bottom: 8px; }
.texto-con-saltos { white-space: pre-line; }
.dato-destacado dt, .dato-destacado dd { font-weight: 600; color: var(--tinta); }
.separado { padding-top: 16px; border-top: 1px solid var(--gris-200); }

/* Modos de Verifactu y estados de la cola */
.estado-grande { display: flex; align-items: center; gap: 14px; }
.estado-grande-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.estado-grande-icono .icono { width: 24px; height: 24px; }
.estado-grande strong { display: block; font-size: 1.0625rem; }

/* Página de error */
.pagina-error { max-width: 560px; margin: 24px auto; }
.pagina-error-sola { padding: 48px 16px; }
.pagina-error h1 { margin: 2px 0 0; font-size: 1.5rem; line-height: 1.25; }
.pagina-error .estado-grande p { margin: 0; }

/* ── Móvil y tableta ─────────────────────────────────────────────────────── */
@media screen and (max-width: 1023.98px) {
  .barra-movil {
    position: sticky; top: var(--alto-cinta); z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 60px; padding: 0 8px 0 12px;
    background: var(--noche); color: #fff;
  }
  .marca-movil img { height: 34px; }
  .marca-movil .marca-app { padding-left: 10px; }
  .boton-menu {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
    border-radius: var(--radio-boton); color: #fff; font-weight: 500; text-decoration: none;
    border: 1px solid rgb(255 255 255 / .22);
  }
  .boton-menu:hover { background: rgb(255 255 255 / .08); color: #fff; }
  .boton-menu .icono { width: 22px; height: 22px; }
  .boton-menu:focus-visible { outline-color: #8FAAFF; }
  .lateral {
    position: fixed; z-index: 90; top: 0; bottom: 0; left: 0;
    width: min(86vw, 320px); overflow-y: auto;
    transform: translateX(-104%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
    box-shadow: var(--sombra-alta);
  }
  .lateral:target, .menu-abierto .lateral { transform: none; visibility: visible; transition: transform .22s ease; }
  .cerrar-menu { display: grid; }
  .velo { position: fixed; inset: 0; z-index: 80; background: rgb(23 26 40 / .55); }
  .lateral:target ~ .velo, .menu-abierto .velo { display: block; }
  html.menu-abierto, .menu-abierto body { overflow: hidden; }
  .nav-item.activo::before { left: -14px; }
}

@media screen and (max-width: 720px) {
  :root { --hueco-x: 16px; --hueco-arriba: 20px; --hueco-abajo: 40px; }
  h1 { font-size: 1.375rem; }
  .saludo h1 { font-size: 1.5rem; }
  .cabecera { margin-bottom: 18px; }
  .cabecera-textos { flex-basis: 100%; }
  .cabecera-acciones { width: 100%; }
  .cabecera-acciones > .boton, .cabecera-acciones > .form-boton, .cabecera-acciones > .menu-acciones { flex: 1 1 auto; }
  .cabecera-acciones > .form-boton .boton, .cabecera-acciones > .menu-acciones > summary { width: 100%; }
  .menu-acciones-lista { left: 0; right: 0; min-width: 0; }
  .tarjeta { padding: 18px 16px; }
  .tarjeta > .tabla-caja, .tarjeta > .tabla-caja-apilable { margin-left: -16px; margin-right: -16px; }
  .tarjeta > .tabla-caja:last-child { margin-bottom: -18px; }
  .tarjeta-cabecera { margin-bottom: 14px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .resumen-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .kpi { padding: 14px 14px 14px 18px; }
  .kpi-valor { font-size: 1.25rem; }
  .filtros { grid-template-columns: 1fr 1fr; padding: 14px; }
  .filtros .campo-buscar, .filtros-botones { grid-column: 1 / -1; }
  .filtros-botones .boton { flex: 1 1 auto; }
  .documento { padding: 22px 16px; }
  .doc-cabecera { flex-direction: column; }
  .doc-titulo { text-align: left; }
  .doc-partes { grid-template-columns: 1fr; gap: 18px; }
  .doc-totales { flex-basis: 100%; }
  /* Líneas del documento en el móvil: «Descripción … importe» y debajo «2,5 × 40,00 € · dto. 10 % · IVA 21 %» */
  .solo-movil { display: inline; }
  .doc-tabla-caja { overflow: visible; }
  .doc-lineas { min-width: 0; }
  .doc-lineas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .doc-lineas tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; padding: 11px 0; border-bottom: 1px solid var(--gris-200); }
  .doc-lineas td { display: block; padding: 0; border: 0; }
  .doc-lineas td:first-child { flex: 1 1 0; min-width: 0; padding-right: 10px; }
  .doc-lineas .doc-importe { order: 1; font-weight: 500; }
  .doc-lineas tr::after { content: ""; order: 2; flex-basis: 100%; height: 3px; }
  .doc-lineas .doc-detalle { order: 3; text-align: left; font-size: .8125rem; color: var(--gris-700); }
  .doc-lineas .doc-cantidad::after { content: " ×"; }
  .doc-lineas .doc-dto::before, .doc-lineas .doc-iva::before { content: "·"; margin-right: 6px; }
  .doc-lineas .doc-dto:empty { display: none; }
  .aviso-sistema { padding: 10px 16px; }
  /* Barra del editor en el móvil: total y vista previa arriba; Guardar y Emitir abajo, mitad y mitad */
  .barra-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 10px var(--hueco-x) 12px; }
  .barra-acciones .botones { display: contents; }
  .barra-acciones-total { grid-row: 1; grid-column: 1; flex-direction: row; align-items: baseline; gap: 8px; margin: 0; }
  .barra-acciones [data-vista-previa] { grid-row: 1; grid-column: 2; justify-self: end; min-height: 40px; padding-left: 10px; padding-right: 10px; }
  .barra-acciones .boton:not([data-vista-previa]) { width: 100%; }
  .barra-acciones .ayuda, .barra-acciones > noscript, .barra-acciones .confirmacion-sin-js { grid-column: 1 / -1; text-align: left; }
  .texto-ancho { display: none; }
  .entrar-tarjeta { padding: 24px 20px; }
  .movimiento-detalle { padding-left: 0; }
  .propuesta { margin-left: 0; }
  .movimiento-fecha { flex-basis: auto; }
  .movimiento-concepto { flex-basis: 100%; order: 3; }
  .movimiento-importe { margin-left: auto; min-width: 0; }
  .dialogo-botones .boton { flex: 1 1 100%; }
  .paginacion .boton { flex: 1 1 0; }
  .paginacion-texto { order: -1; flex-basis: 100%; text-align: center; }

  /* Las tablas «apilables» pasan a ser una lista de fichas */
  .tabla.apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .tabla.apilable, .tabla.apilable tbody, .tabla.apilable tfoot, .tabla.apilable tr, .tabla.apilable td { display: block; width: 100%; }
  .tabla.apilable tr { padding: 12px 16px; border-bottom: 1px solid var(--gris-200); }
  .tabla.apilable tbody tr:last-child { border-bottom: 0; }
  .tabla.apilable tfoot tr { border-top: 1px solid var(--gris-200); background: var(--gris-50); }
  /* Cada celda: la etiqueta a la izquierda y el dato a la derecha; lo que va debajo (NIF, notas) baja a su línea */
  .tabla.apilable td { display: flow-root; padding: 3px 0; border: 0; text-align: right; background: none; }
  .tabla.apilable td::before {
    content: attr(data-etiqueta); float: left; margin-right: 16px; text-align: left;
    font-size: .8125rem; font-weight: 500; line-height: 1.85; color: var(--gris-600);
  }
  .tabla.apilable td[data-etiqueta=""]::before, .tabla.apilable td:not([data-etiqueta])::before { content: none; }
  .tabla.apilable td.celda-principal { display: block; padding: 0 0 6px; text-align: left; font-size: 1rem; }
  .tabla.apilable td.celda-principal::before { content: none; }
  .tabla.apilable td .estados { justify-content: flex-end; }
  .tabla.apilable td .celda-pila { align-items: flex-end; text-align: right; }
  .tabla.apilable td.acciones-celda { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 8px; }
  .tabla.apilable td.acciones-celda::before { content: none; }
  .tabla-caja-apilable { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── Impresión: solo el documento ────────────────────────────────────────── */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 10.5pt; }
  .cinta-pruebas, .saltar, .barra-movil, .lateral, .velo, .pie, .aviso-sistema, .mensajes,
  .cabecera, .no-imprimir, .columna-lateral, .barra-acciones, .pestanas, .filtros { display: none !important; }
  .marco, .principal { display: block; min-height: 0; }
  .contenido { max-width: none; padding: 0; }
  .rejilla-documento { display: block; }
  .documento { padding: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .doc-lineas { min-width: 0; }
  .doc-lineas tr { break-inside: avoid; }
  .marca-agua { position: fixed; }
  a { color: inherit; text-decoration: none; }
}