:root {
  /* Nombres de la Guía de diseño (27/09/2026) */
  --fondo: #F3F2ED;
  --superficie: #FFFFFF;
  --superficie-suave: #F8F7F2;
  --tinta: #1E211C;
  --tinta-suave: #4E524A;
  --gris: #6B6F63;
  --borde: #DEDBD0;
  --separador: #EDEAE0;
  --acento: #1F5A4B;
  --acento-suave: #E6EFEB;
  --ambar: #8A5A12;         /* TEXTO de aviso */
  --ambar-medio: #C98A2A;   /* Bordes, iconos, rellenos de aviso. Nunca texto. */
  --ambar-suave: #FBEFD9;
  --teja: #A8452F;
  --teja-suave: #F6E3DC;
  /* Alias históricos: cualquier CSS existente que use --bg/--card/etc. sigue
     funcionando; los tonos apuntan a la nueva paleta de la guía. */
  --bg: var(--fondo);
  --ink: var(--tinta);
  --muted: var(--gris);
  --accent: var(--acento);
  --accent-soft: var(--acento-suave);
  --amber: var(--ambar);
  --amber-medium: var(--ambar-medio);
  --amber-soft: var(--ambar-suave);
  --red: var(--teja);
  --card: var(--superficie);
  --border: var(--borde);
  --border-soft: var(--separador);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, sans-serif;
}

/* T91 · altura reservada por la bottom-nav para dejar hueco al final del
   scroll. Se usa como padding del .app-shell y para posicionar botones
   flotantes (FAB) que deben quedar encima de la barra. */
:root { --bottom-nav-h: 72px; }
@media (max-width: 430px) { :root { --bottom-nav-h: 68px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ---------------------------------------------------------------------
   RED DE SEGURIDAD (T19) — estilos base para los elementos nativos.
   Un <button> sin clase se comporta como un `btn-secundario` de la guía
   (blanco, borde tinta suave, píldora, 44 px de alto). Los <input>,
   <select> y <textarea> sin clase quedan con la forma de campo de la
   guía. Todas las clases existentes (.btn-primario, .filtro-select,
   .icono-btn, .login-form, .pastilla…) ganan por especificidad, así que
   este bloque NO pisa los estilos ya diseñados: solo evita que aparezca
   el aspecto por defecto del navegador cuando alguien olvidó poner clase.
   Guía: docs/guia-diseno.md §Botones y §Campos. */
button, input, select, textarea {
  font-family: inherit;
  font-size: 14.5px;
  color: var(--tinta);
}

button {
  min-height: 40px;
  padding: 10px 18px;
  border-radius: 20px;                 /* píldora */
  border: 1px solid var(--borde);
  background: var(--superficie, #FFFFFF);
  color: var(--tinta);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
button:hover:not(:disabled) {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
}
button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Campos de texto y afines: alto cómodo, borde de la guía, radio suave,
   fondo superficie. El focus resalta el borde con acento sin outline
   propio (el outline por defecto es feo en un input redondeado). */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
select,
textarea {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie, #FFFFFF);
  color: var(--tinta);
  font-family: inherit;
  line-height: 1.35;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  background: var(--fondo);
}
textarea {
  padding: 10px 12px;
  min-height: 88px;
  line-height: 1.45;
  resize: vertical;
}

/* Checkbox y radio: usar el color de acento del sistema en vez del azul
   por defecto del navegador. `accent-color` es la vía moderna y respeta
   el widget nativo. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--acento);
  width: 18px;
  height: 18px;
  min-height: 0;                       /* el min-height general no aplica */
  padding: 0;
  cursor: pointer;
}

/* Placeholder con el gris tenue de la guía. */
input::placeholder,
textarea::placeholder {
  color: var(--gris, #6B6F63);
  opacity: 1;
}

/* Excepciones de la red de seguridad (T19 §2): los siguientes patrones
   diseñados definen su propia altura (icono cuadrado, píldora fina de
   subnav, pastilla de filtro…) y no deben heredar el `min-height: 40px`
   que la red pone al <button> genérico. El resto de propiedades (radius,
   padding, border, background, color) ya las pisan sus propias reglas
   por especificidad más adelante en este mismo fichero. */
.icono-btn,
.mas-cerrar,
.menu-doc button,
.pastilla,
.chip-filtro,
.chip-cabecera,
.hero-boton,
.filtro-texto,
.prueba-banner button,
.subnav-btn,
.nav-item,
.wizard-back,
.superadmin-cliente-acciones button,
.btn-desnudo {
  min-height: auto;
}

/* Botón "sin estilo" para insertarlo dentro de chips, avisos o
   composiciones donde solo queremos que sea clicable (la X para quitar
   un filtro, por ejemplo). Sin borde, sin fondo, sin píldora. */
.btn-desnudo {
  border: 0;
  background: transparent;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
}


/* ---------- Login ---------- */

/* En columna, no en fila: si no, el pie de página se coloca al lado de la
   tarjeta en vez de debajo y todo queda descuadrado en pantallas anchas. */
.login-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-body > .pie-legal { margin-top: 22px; }

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
}

.login-brand {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.login-title {
  font-size: 22px;
  font-weight: 700;
  margin: 8px 0 4px 0;
}

.login-sub {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 22px 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-form input {
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 14.5px;
  background: var(--bg);
  color: var(--ink);
}

.login-form button {
  padding: 13px 14px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.login-form button:disabled { opacity: 0.7; cursor: default; }

.login-mensaje {
  min-height: 18px;
  font-size: 13px;
  color: var(--accent);
  margin-top: 14px;
}

.login-mensaje.error { color: var(--red); }

/* ---------- App shell ---------- */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 960px;
  margin: 0 auto;
  /* T91 · hueco al final para que la última tarjeta se vea entera
     por encima de la bottom-nav fija (antes era sticky y en móvil
     el stacking context de las tarjetas la tapaba al scrollear). */
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 0 24px;
}

.boton-salir-cabecera {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.boton-salir-cabecera:hover { background: var(--acento-suave); color: var(--acento); }
.boton-idioma-cabecera { padding: 0 11px; letter-spacing: .04em; }

/* En pantallas estrechas los tres botones no caben con texto:
   dejamos solo los iconos, salvo el del idioma que ya es cortísimo. */
@media (max-width: 460px) {
  .app-header { gap: 6px; }
  .boton-salir-cabecera { padding: 0 10px; gap: 0; }
  #btn-manual-cabecera span,
  #btn-salir-cabecera span { display: none; }
  .boton-idioma-cabecera { padding: 0 9px; }
  .boton-idioma-cabecera svg { display: none; }
}

/* ---- Ajuste de esquinas del documento ---- */
.recorte-lienzo {
  position: relative;
  margin-top: 10px;
  background: #16211c;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.recorte-lienzo img {
  display: block;
  max-width: 100%;
  max-height: 58vh;
  width: auto;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.recorte-lienzo canvas {
  position: absolute;
  inset: 0;
  margin: auto;
  touch-action: none;
  cursor: grab;
}

/* ---- Pie de página (contacto y copyright) ----
   El texto vive en cada HTML. Para cambiar la sociedad o el correo, busca
   "pie-legal" en los ficheros de public/ y en public/js/app.js. */
.pie-legal {
  text-align: center;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 28px auto 18px;
  padding: 0 16px;
  max-width: 560px;
}
.pie-legal a { color: var(--muted); text-decoration: underline; }
.pie-legal a:hover { color: var(--acento); }
.pie-legal .pie-marca { display: block; margin-bottom: 2px; }

/* ---- Panel del superadministrador ---- */
.panel-totales { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.panel-cifra { font-weight: 700; font-size: 15px; color: var(--tinta); }
.panel-aviso {
  margin-top: 6px; background: var(--ambar-suave); color: var(--ambar);
  padding: 7px 10px; border-radius: 8px; font-size: 13px;
}
.panel-cuenta { align-items: flex-start; }
.panel-nombre { font-weight: 700; }
.panel-suspendida {
  font-size: 11px; background: var(--teja-suave); color: var(--teja);
  padding: 2px 7px; border-radius: 6px; font-weight: 600;
}
.panel-acciones { display: flex; gap: 4px; flex-shrink: 0; }

.uso-barra {
  height: 6px; background: var(--separador); border-radius: 4px;
  overflow: hidden; margin: 8px 0 4px;
}
.uso-relleno { height: 100%; border-radius: 4px; }
.uso-relleno.verde { background: var(--acento); }
.uso-relleno.ambar { background: var(--ambar-medio); }
.uso-relleno.rojo { background: var(--teja); }
.uso-texto { font-size: 12.5px; color: var(--muted); }
.uso-texto.ambar { color: var(--ambar); font-weight: 600; }
.uso-texto.rojo { color: var(--teja); font-weight: 600; }

/* ---- Banco / conciliación ---- */
.zona-soltar {
  border: 2px dashed var(--border);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
  background: var(--superficie-suave);
  margin-bottom: 14px;
}
.zona-soltar.encima { border-color: var(--acento); background: var(--acento-suave); }
.zona-soltar-titulo { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.zona-soltar-nota { font-size: 13px; line-height: 1.55; color: var(--muted); }

.banco-seccion { margin-bottom: 20px; }
.banco-seccion-titulo {
  font-size: 13px; font-weight: 700; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.banco-seccion-titulo.verde { color: var(--acento); }
.banco-seccion-titulo.ambar { color: var(--ambar); }
.banco-seccion-titulo.rojo { color: var(--teja); }

.banco-fila {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 12px 14px; margin-bottom: 8px;
  background: #fff; border: 1px solid var(--border-soft); border-radius: 12px;
}
.banco-fila.columna { display: block; }
.banco-fila-cuerpo { min-width: 0; flex: 1; }
.banco-concepto { font-size: 14.5px; font-weight: 600; word-break: break-word; }
.banco-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.banco-emparejado { font-size: 13.5px; margin-top: 6px; }
.banco-motivo { font-size: 12px; color: var(--muted); margin-top: 3px; }
.banco-acciones { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.banco-etiqueta {
  font-size: 11.5px; background: var(--ambar-suave); color: var(--ambar);
  padding: 4px 9px; border-radius: 8px; white-space: nowrap;
}
.banco-opciones { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.banco-opcion { background: var(--superficie-suave); border-radius: 10px; padding: 11px 12px; }
.banco-opcion-texto { font-size: 13.5px; line-height: 1.5; }

/* ---- Manual ---- */
.manual-cuerpo { padding-bottom: 40px; max-width: 760px; }
.manual-cargando { color: var(--muted); }
.manual-cuerpo .man-fecha { font-size: 13px; color: var(--muted); margin: 4px 0 14px; }
.manual-cuerpo .man-intro { font-size: 15.5px; line-height: 1.65; margin: 0 0 20px; }
.manual-cuerpo .man-indice {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--superficie-suave); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 26px;
}
.manual-cuerpo .man-indice a {
  color: var(--acento); text-decoration: none; font-size: 14.5px;
  font-weight: 600; padding: 7px 0; border-bottom: 1px solid var(--border-soft);
}
.manual-cuerpo .man-indice a:last-child { border-bottom: 0; }
.manual-cuerpo .man-seccion {
  background: var(--superficie); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 16px;
  scroll-margin-top: 16px;
}
.manual-cuerpo .man-seccion h2 { font-size: 19px; font-weight: 700; margin: 0 0 12px; }
.manual-cuerpo .man-seccion h3 { font-size: 15px; font-weight: 700; margin: 20px 0 6px; color: var(--acento); }
.manual-cuerpo .man-seccion p { font-size: 14.5px; line-height: 1.7; margin: 0 0 10px; }
.manual-cuerpo .man-seccion ul,
.manual-cuerpo .man-seccion ol { margin: 0 0 10px; padding-left: 20px; }
.manual-cuerpo .man-seccion li { font-size: 14.5px; line-height: 1.7; margin-bottom: 6px; }
.manual-cuerpo .man-aviso,
.manual-cuerpo .man-truco {
  background: var(--superficie-suave); border-left: 3px solid var(--acento);
  border-radius: 0; padding: 11px 14px; margin: 14px 0 10px;
  font-size: 14px; line-height: 1.65;
}
.manual-cuerpo .man-aviso { border-left-color: var(--ambar-medio); background: var(--ambar-suave); }

/* El SVG del logo lleva su propio margen interior, por eso los márgenes
   negativos: dejan el dibujo alineado con el saludo de debajo. */
.app-logo { display: block; height: 58px; width: auto; margin: -10px 0 -4px -10px; }
@media (max-width: 460px) { .app-logo { height: 48px; margin: -8px 0 -4px -8px; } }

.app-eyebrow { font-size: 13px; font-weight: 600; color: var(--muted); }
.app-title { font-size: 22px; font-weight: 700; margin-top: 4px; }

.view { padding: 0 24px; flex: 1; }
.view[hidden] { display: none; }

/* Stat chips (Capturar) */

.stats-row { display: flex; gap: 10px; padding: 20px 0 0 0; }
.stat-chip { flex: 1; border-radius: 10px; padding: 12px 14px; text-align: left; font-family: inherit; }
.stat-chip.amber { background: var(--amber-soft); }
.stat-chip.plain { background: var(--card); border: 1px solid var(--border); }
/* T147 · stat-chip es BUTTON pulsable: abre el listado filtrado al que se refiere. */
button.stat-chip { cursor: pointer; width: 100%; border: 1px solid transparent; transition: border-color .15s, box-shadow .15s, transform .05s; }
button.stat-chip.amber { border-color: var(--amber-soft); }
button.stat-chip.plain { border-color: var(--border); }
button.stat-chip:hover { border-color: var(--acento); box-shadow: 0 4px 14px rgba(31,90,75,.08); }
button.stat-chip:active { transform: translateY(1px); }
.stat-value { font-size: 20px; font-weight: 800; }
.stat-chip.amber .stat-value { color: var(--amber); }
.stat-label { font-size: 12px; margin-top: 2px; }
.stat-chip.amber .stat-label { color: #8A6A24; }
.stat-chip.plain .stat-label { color: var(--muted); }

/* Hero capture button */

.hero-capturar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 0;
}

.hero-boton {
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--accent);
  border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(31,90,75,0.28);
  cursor: pointer;
}

.hero-label { font-size: 16px; font-weight: 600; }
.hero-hint { font-size: 13px; color: var(--muted); text-align: center; max-width: 280px; }

/* Bottom nav (5 botones, el central destacado) */

.bottom-nav {
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--card);
  /* T91 · fija y por encima de las tarjetas de las listas. Antes era
     sticky, y en móvil las tarjetas con z-index propio (menús ⋯, cards
     pulsadas) la tapaban al llegar al final del scroll y los botones
     no respondían. Los menús emergentes y modales suben por encima
     con z-index > 50 (ver .tarjeta-doc.tiene-menu-abierto, .mas-fondo). */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 960px;
  margin: 0 auto;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 0 16px 0; background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 11px; font-weight: 600;
}

.nav-item.activo { color: var(--accent); }

/* El botón central destacado (Capturar) sobresale por encima de la barra */
.nav-item.central {
  position: relative;
}
.nav-item.central .nav-central-icono {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  margin-top: -22px; margin-bottom: 4px;
  transition: transform 0.15s ease;
}
.nav-item.central:active .nav-central-icono { transform: scale(0.96); }
.nav-item.central .nav-central-icono svg { width: 26px; height: 26px; stroke: #fff; }

@media (max-width: 430px) {
  .nav-item { font-size: 10px; padding: 10px 0 14px 0; gap: 3px; }
  .nav-item svg { width: 22px; height: 22px; }
  .nav-item.central .nav-central-icono { width: 52px; height: 52px; margin-top: -20px; }
}

/* Panel "Más" — bottom sheet */
.mas-fondo {
  position: fixed; inset: 0;
  background: rgba(20, 12, 6, 0.4);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 900;
}
.mas-caja {
  width: 100%; max-width: 620px; background: var(--card);
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  padding: 18px 18px calc(24px + env(safe-area-inset-bottom, 0px)) 18px;
  max-height: 88vh; overflow-y: auto; position: relative;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12);
}
.mas-cerrar {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; font-size: 28px; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.mas-grupo { margin: 6px 0 14px 0; }
.mas-titulo {
  margin: 10px 10px 6px 10px; font-size: 11.5px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.mas-lista { display: flex; flex-direction: column; }
.mas-item {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 10px 10px; background: none; border: none; cursor: pointer;
  text-align: left; font-size: 15px; color: var(--text);
  border-radius: 10px;
}
.mas-item:hover { background: rgba(0, 0, 0, 0.03); }
.mas-item + .mas-item { border-top: 1px solid var(--borde); }
.mas-icono {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--acento); background: var(--acento-suave); border-radius: 10px; flex-shrink: 0;
}
.mas-item-nombre { flex: 1; min-width: 0; }
.mas-item-chip:not(:empty) {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--superficie-suave); color: var(--gris);
  font-size: 12px; font-weight: 600; margin-right: 4px;
}
.mas-item-chip .punto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--acento);
}
.mas-item-chip.ambar { background: var(--ambar-suave); color: var(--ambar); }
.mas-item-chip.ambar .punto { background: var(--ambar-medio); }
.mas-item-chip.teja { background: var(--teja-suave); color: var(--teja); }
.mas-item-chip.teja .punto { background: var(--teja); }
.mas-item-chevron {
  color: var(--gris); display: inline-flex; align-items: center; justify-content: center;
}
.mas-item-salir { color: var(--teja); }
.mas-item-salir .mas-icono { color: var(--teja); background: var(--teja-suave); }

/* Cabecera de cuenta (nueva T150) */
.mas-cuenta-cabecera-nueva {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 10px 16px 10px; border-bottom: 1px solid var(--borde);
  margin-bottom: 6px;
}
.mas-cuenta-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--acento); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; flex-shrink: 0;
}
.mas-cuenta-datos { flex: 1; min-width: 0; }
.mas-cuenta-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--gris); }
.mas-nombre { font-weight: 700; font-size: 16px; }
.mas-email { color: var(--muted); font-size: 13px; }
.mas-perfil {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--superficie-suave); border: 1px solid var(--borde); border-radius: 50%;
  color: var(--gris); cursor: pointer; flex-shrink: 0;
}
.mas-perfil:hover { background: var(--acento-suave); color: var(--acento); border-color: var(--acento); }
.mas-version { font-size: 11.5px; text-align: center; margin-top: 10px; color: var(--gris); }
/* Mantén compatibilidad con las clases viejas (otros modales las usan). */
.mas-plan { color: var(--muted); font-size: 12px; margin-top: 3px; }
.mas-cuenta-cabecera { padding: 10px 10px 4px 10px; }

.personalizar-lista {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 10px;
}
.personalizar-lista label {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--paper);
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  font-size: 14px;
}
.personalizar-lista label.deshabilitado { opacity: 0.5; cursor: not-allowed; }

/* Wizard (Flujo de subida) */

.wizard-top { display: flex; align-items: center; gap: 12px; padding: 24px 0 0 0; }

.wizard-back {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer;
}

.wizard-step-label { font-size: 12px; font-weight: 600; color: var(--muted); }

/* T369 iter.2 · Shell del wizard con "doc al lado". Por defecto una
   sola columna (comportamiento clásico). Cuando #vista-flujo tiene
   la clase wizard-con-doc (revisando una captura rápida y paso>=3),
   el escritorio parte en dos; el móvil mantiene una columna con las
   pestañas Documento/Datos arriba. */
#wizard-shell { display: block; }
#wizard-doc-visor { display: none; }
.wizard-con-doc #wizard-doc-visor {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  min-height: 200px;
  max-height: 72vh;
  overflow: auto;
  margin-bottom: 10px;
}
.wizard-con-doc #wizard-doc-visor img,
.wizard-con-doc #wizard-doc-visor iframe {
  width: 100%; height: auto; border-radius: 6px;
  display: block; margin-bottom: 6px;
}
.wizard-tabs-doc-datos {
  display: none; gap: 6px; margin-bottom: 10px;
}
.wizard-tabs-doc-datos button {
  flex: 1; height: 36px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--ink); font-weight: 600; font-size: 13px;
  cursor: pointer;
}
.wizard-tabs-doc-datos button.activa { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (min-width: 900px) {
  .wizard-con-doc #wizard-shell {
    display: grid; grid-template-columns: minmax(300px, 1fr) minmax(380px, 1.1fr);
    gap: 24px; align-items: start;
  }
  .wizard-con-doc #wizard-doc-visor { margin-bottom: 0; position: sticky; top: 10px; }
  /* En escritorio las pestañas no se usan. */
  .wizard-con-doc .wizard-tabs-doc-datos { display: none !important; }
}
@media (max-width: 899px) {
  .wizard-con-doc .wizard-tabs-doc-datos { display: flex; }
  .wizard-con-doc[data-tab-doc="datos"] #wizard-doc-visor { display: none; }
  .wizard-con-doc[data-tab-doc="doc"] #wizard-contenido { display: none; }
}

.wizard-progress { display: flex; gap: 6px; margin: 20px 0; }
.wizard-progress > div { height: 4px; flex: 1; border-radius: 2px; background: var(--border); }
.wizard-progress > div.activo { background: var(--accent); }

.wizard-title { font-size: 22px; font-weight: 700; margin: 0 0 20px 0; }

.opciones-grandes { display: flex; flex-direction: column; gap: 12px; }

/* T317 corrección (07/10) · Diseño final del Inicio.
   Una sola columna centrada (máx 520 px) con todo el contenido en el
   mismo eje: saludo, título, tarjetas, botón redondo, interruptor,
   enlace y "Subir facturas emitidas". Mismo esquema en móvil y
   escritorio; en escritorio queda bien centrado y no estirado. */
.inicio-contenedor {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

/* T391: Logo + saludo en una línea horizontal. Icono 32px (36px móvil) +
   "Hola, {Nombre}" con gap 12px, centrados. */
.inicio-logo-saludo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 24px 0 0;
  padding-bottom: 12px;
  flex-wrap: wrap;
}

/* Bloque del logotipo completo: icono + texto en 2 líneas. */
.inicio-logo-completo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* SVG original del icono (verde con documento y check naranja). */
.inicio-logo-icono-original {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

@media (max-width: 460px) {
  .inicio-logo-icono-original {
    width: 36px;
    height: 36px;
  }
}

/* Contenedor del texto "Gestor" y "de Facturas". */
.inicio-logo-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
}

/* Palabras del logotipo. */
.inicio-logo-palabra {
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0;
}

.inicio-logo-gestor {
  color: #1E211C;
}

.inicio-logo-de-facturas {
  color: #1F5A4B;
}

@media (max-width: 460px) {
  .inicio-logo-palabra {
    font-size: 14px;
  }
}

/* Divisor visual fino vertical. */
.inicio-logo-divisor {
  width: 1px;
  height: 32px;
  background-color: #E0DCD7;
  flex-shrink: 0;
}

@media (max-width: 460px) {
  .inicio-logo-divisor {
    height: 28px;
  }
}

/* Icono de cámara (antiguo, si lo queremos ocultar o dejar para otra cosa). */
.inicio-logo-icono {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--accent);
  font-size: 32px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 460px) {
  .inicio-logo-icono { width: 36px; height: 36px; font-size: 36px; }
}

.inicio-logo-saludo .app-title {
  margin: 0;
  white-space: nowrap;
}

#vista-capturar .inicio-titulo {
  text-align: center;
  font-size: 18px;
  margin: 6px 0 14px;
}

/* Tarjetas Factura · Ticket · Factura emitida.
   - .opcion-grande hereda del estilo base.
   - Hover NO marca como seleccionado (solo cambio de borde sutil).
   - Selección única: .activa (borde + fondo acento) solo en la elegida. */
#vista-capturar .inicio-tipos {
  gap: 10px;
  margin-bottom: 18px;
}
#vista-capturar .inicio-tipos .opcion-grande {
  padding: 12px 14px;
  border-color: var(--border);
  background: var(--card);
}
#vista-capturar .inicio-tipos .opcion-grande:hover {
  border-color: var(--border);
  background: var(--card);
  filter: brightness(0.99);
}
#vista-capturar .inicio-tipos .opcion-grande.activa {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Botón redondo grande con icono de cámara. */
.inicio-cam-grupo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 18px 0 14px;
}
.inicio-cam-boton {
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.inicio-cam-boton:hover { filter: brightness(0.96); }
.inicio-cam-boton:active { transform: scale(0.97); }
.inicio-cam-texto {
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}

/* Interruptor "Guardar para luego". */
.inicio-interruptor {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
  cursor: pointer; margin-top: 4px;
}
.inicio-interruptor input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.inicio-interruptor-switch {
  width: 36px; height: 20px; border-radius: 999px;
  background: var(--border); position: relative; flex-shrink: 0;
  transition: background 120ms;
}
.inicio-interruptor-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: left 120ms;
}
.inicio-interruptor input:checked + .inicio-interruptor-switch { background: var(--accent); }
.inicio-interruptor input:checked + .inicio-interruptor-switch::after { left: 18px; }
.inicio-interruptor-texto {
  font-size: 13.5px; color: var(--ink); line-height: 1.4;
}
.inicio-interruptor-texto .muted { font-size: 12px; }

/* Enlace secundario "Subir PDF o archivo" centrado. */
.inicio-enlace {
  text-align: center; margin: 14px 0 4px; font-size: 13.5px;
}
.inicio-enlace a {
  color: var(--muted); text-decoration: underline;
}

/* T371 iter.1 · Campos del modal "Enviar": etiquetas encima y campos
   a todo el ancho (guía §Formularios). Antes había mezcla con etiquetas
   en línea y anchos distintos; esto unifica. */
.env-campo {
  display: block; margin-top: 10px;
}
.env-campo:first-child { margin-top: 0; }
.env-campo .env-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.env-campo input,
.env-campo select,
.env-campo textarea {
  width: 100%;
  box-sizing: border-box;
}

/* T369 iter.1 · Miniatura (56×56) en cada tarjeta de "Por completar".
   Pulsable: abre el visor pantalla completa con /api/capturas/:id/
   pagina/1. Si no hay páginas (muy raro), fallback a un cuadrado gris. */
.por-completar-tarjeta { align-items: center; gap: 12px; }
.por-completar-miniatura {
  width: 56px; height: 56px; border-radius: 10px;
  overflow: hidden; flex-shrink: 0; border: 1px solid var(--border);
  background: #f6f3ee; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.por-completar-miniatura img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.por-completar-miniatura-vacia {
  color: var(--muted); font-size: 20px; cursor: default;
}

/* Separador fino + tarjeta "Factura emitida" al final (T388). */
/* T398 · Zona de arrastre múltiple */
.capturar-dropzone {
  border: 2px dashed var(--border);
  border-radius: 14px;
  padding: 22px 16px;
  text-align: center;
  background: var(--card);
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 16px;
  cursor: default;
}
.capturar-dropzone.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.capturar-dropzone-inner {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted);
}
.capturar-dropzone-texto { font-size: 15px; color: var(--text); font-weight: 600; }
.capturar-dropzone-btn {
  display: inline-block; padding: 7px 18px; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; margin-top: 2px;
}
.capturar-dropzone-btn:hover { opacity: 0.88; }
.capturar-dropzone-nota { font-size: 12px; }

/* T398 · Lista "Guardar para luego" */
.capturar-pendientes-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.capturar-pendientes-titulo { font-size: 14px; font-weight: 700; color: var(--text); }
.capturar-pendientes-acciones { display: flex; gap: 8px; }
.capturar-pendientes-lista {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
}
.capturar-pendientes-lista li {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; font-size: 13px;
}
.capturar-pendientes-nombre {
  flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.capturar-pendientes-estado {
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.capturar-pendientes-estado.estado-pendiente { background: var(--border-soft); color: var(--muted); }
.capturar-pendientes-estado.estado-leyendo  { background: #fef3c7; color: #92400e; }
.capturar-pendientes-estado.estado-listo    { background: #d1fae5; color: #065f46; }
.capturar-pendientes-estado.estado-duplicado { background: #fee2e2; color: #991b1b; }
.capturar-pendientes-estado.estado-error    { background: #fee2e2; color: #991b1b; }
.capturar-pendientes-progreso {
  height: 3px; background: var(--accent); border-radius: 2px;
  transition: width 0.4s; width: 0%; position: absolute; bottom: 0; left: 0; right: 0;
}

.inicio-emitidas-separador {
  height: 1px; background: var(--border); margin: 22px 0 14px;
}
/* La tarjeta de emitida hereda .opcion-grande; no tiene estado .activa
   (no es parte del radiogroup de arriba), solo hover sutil. */
.inicio-emitidas-tarjeta {
  width: 100%;
}
.inicio-emitidas-tarjeta:hover {
  border-color: var(--accent);
}

.opcion-grande {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border-radius: 14px; border: 2px solid var(--border); background: var(--card);
  cursor: pointer; text-align: left; width: 100%;
}

.opcion-grande.activa { border-color: var(--accent); background: var(--accent-soft); }

.opcion-icono {
  width: 44px; height: 44px; border-radius: 10px; background: var(--border-soft);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--muted);
}

.opcion-grande.activa .opcion-icono { background: var(--accent); color: #fff; }

.opcion-nombre { font-size: 16px; font-weight: 700; }
.opcion-detalle { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.campo select, .campo input[type="text"], .campo input[type="date"],
.campo input[type="number"], .campo input[type="email"], .campo input[type="password"],
.campo input[type="search"] {
  width: 100%; padding: 13px 14px; line-height: 1.3; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); font-size: 14.5px; color: var(--ink);
}

/* Miniaturas de páginas */

.paginas-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.pagina-miniatura {
  position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border);
}
.pagina-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pagina-quitar {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(30,33,28,0.72); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1;
}
.pagina-anadir {
  width: 84px; height: 84px; border-radius: 10px; border: 2px dashed var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; color: var(--muted); background: transparent;
  padding: 6px; text-align: center;
}
/* T312 · texto corto debajo del icono en los dos recuadros ("Hacer foto",
   "Añadir archivo o PDF"), para que no queden como círculos sin significado. */
.pagina-anadir-texto {
  font-size: 11px; line-height: 1.2; color: var(--muted); word-break: break-word;
}
/* T312 · el botón "Usar cámara frontal" solo tiene sentido en móvil; en
   escritorio no hay cámara dual y el botón sobra. 768px coincide con el
   breakpoint de barra inferior y vista general del escritorio. */
@media (min-width: 768px) {
  .camara-cambiar-solo-movil { display: none; }
}

.wizard-footer { padding: 16px 0 28px 0; }
.btn-primario {
  display: flex; align-items: center; justify-content: center; height: 52px;
  border-radius: 12px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700;
  border: none; width: 100%; cursor: pointer; text-decoration: none;
}
.btn-primario:disabled { opacity: 0.55; cursor: default; }

/* T18 §4 · Botón de acción destructiva (anular, borrar…). Sigue la
   forma de la guía (píldora, alto ≥40 px) pero pinta en teja para
   avisar al usuario. NO es la acción principal — se combina con una
   confirmación humana en modal. */
.btn-peligro {
  border: 1px solid var(--teja);
  color: var(--teja);
  background: var(--superficie);
  min-height: 40px;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-peligro:hover:not(:disabled) { background: var(--teja-suave); }
.btn-peligro:disabled { opacity: 0.55; cursor: default; }

/* T18 §4 · Grid de "Corregir datos" del modal Revisar.
   Antes los inputs iban con inline styles; ahora heredan la red de
   seguridad (T19) y solo la disposición vive aquí. */
.mrd-campos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}
.mrd-campos-grid > label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; color: var(--tinta-suave);
}
.mrd-campos-grid > label > input,
.mrd-campos-grid > label > select { width: 100%; }

/* Métodos de pago (lista) */

.metodos-lista { display: flex; flex-direction: column; gap: 10px; }
.metodo-fila {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  border-radius: 12px; border: 2px solid var(--border); background: var(--card); cursor: pointer;
}
.metodo-fila.activa { border-color: var(--accent); background: var(--accent-soft); }
.metodo-izq { display: flex; align-items: center; gap: 12px; }
.metodo-chip { width: 34px; height: 24px; border-radius: 5px; background: var(--border-soft); }
.metodo-nombre { font-size: 14.5px; font-weight: 700; }
.metodo-detalle { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.metodo-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; }
.metodo-fila.activa .metodo-radio { background: var(--accent); border-color: var(--accent); }

.link-añadir { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; }

/* ---------- Monitor ---------- */

.monitor-top { display: flex; align-items: center; justify-content: space-between; padding: 24px 0 0 0; }
.filtros-row { display: flex; gap: 8px; padding: 18px 0 0 0; overflow-x: auto; }
.chip-filtro {
  font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--card); color: var(--ink);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.chip-filtro.activo { background: var(--accent); border-color: var(--accent); color: #fff; }

.monitor-lista { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 24px 0; }

.doc-card { display: flex; border-radius: 12px; overflow: hidden; background: var(--card); border: 1px solid var(--border); }
.doc-barra { width: 4px; flex-shrink: 0; }
.doc-barra.general { background: var(--amber-medium); }
.doc-barra.clasificado { background: var(--accent); }
.doc-cuerpo { flex: 1; padding: 14px 16px; }
.doc-top-row { display: flex; justify-content: space-between; align-items: center; }
.doc-etiqueta { font-size: 11px; font-weight: 700; }
.doc-etiqueta.general { color: var(--amber); }
.doc-etiqueta.clasificado { color: var(--accent); }
.doc-fecha { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.doc-proveedor { font-size: 15px; font-weight: 700; margin-top: 4px; }
.doc-empresa { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.doc-acciones-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.doc-metodo-chip { font-size: 11px; padding: 3px 8px; border-radius: 20px; background: var(--border-soft); color: #4A4D42; }
.doc-botones { display: flex; gap: 6px; }
.icono-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--card);
  display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; text-decoration: none;
}
/* T372 · bug visible en Ajustes → Alertas de gasto (y Correo cuando
   hay "Reconectar"): el SVG hijo de un botón flex colapsaba a width 0
   porque heredaba flex-shrink: 1. El width="N" en el atributo HTML del
   SVG se ignoraba. Forzamos no encogerse en todas las piezas que meten
   un SVG como único hijo de un contenedor flex.
   T375 · añadido #btn-ast-cerrar > svg (botón cerrar del panel Asistente). */
.icono-btn > svg,
.icono-btn > img,
.wizard-back > svg,
.chip-cabecera > svg,
#btn-ast-cerrar > svg {
  flex-shrink: 0;
}

.select-reclasificar {
  margin-top: 8px; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  font-size: 12.5px; background: var(--bg);
}

.vacio-monitor { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 14px; }

@media (min-width: 720px) {
  .doc-card { align-items: center; }
  .doc-cuerpo { display: grid; grid-template-columns: 1.3fr 1.1fr 1.1fr 1fr auto; gap: 16px; align-items: center; padding: 12px 18px; }
  .doc-top-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .doc-proveedor { margin: 0; }
  .doc-empresa { margin: 0; }
  .doc-acciones-row { margin: 0; justify-self: end; }
}

/* --- Filtros compactos del Monitor (pensados para movil) --- */
.filtros-panel { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 4px; }
.filtros-linea { display: flex; gap: 8px; align-items: center; }
.filtro-select {
  flex: 1 1 0; min-width: 0; height: 40px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  font-size: 13px; font-family: inherit; color: inherit;
}
.filtro-icono {
  flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--card); font-size: 15px; cursor: pointer; color: inherit;
}
.filtro-icono:active { background: var(--border); }
/* Nombres largos de proveedor: que bajen de linea en vez de desbordar */
.doc-proveedor { overflow-wrap: anywhere; line-height: 1.25; }
.doc-etiqueta { overflow-wrap: anywhere; }
.filtro-texto {
  flex: 0 0 auto; height: 40px; padding: 0 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--card); font-size: 13px; font-weight: 600;
  font-family: inherit; color: inherit; cursor: pointer; white-space: nowrap;
}
.filtro-texto:active { background: var(--border); }

/* Filtros adaptativos: chips cuando hay pocas opciones, desplegable cuando hay muchas */
.filtro-grupo { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
/* T108 · Variante en una sola fila con scroll horizontal — para pastillas
   de empresa cuando hay 3-6 opciones que en móvil pueden no caber. */
.filtro-grupo-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.filtro-grupo-scroll .filtro-chip { flex: 0 0 auto; }
/* T108 it.4 · número de documentos del periodo en cada pastilla de
   empresa (p.ej. "DUA · 12"). Se renderiza como span dentro del chip. */
.filtro-chip .chip-count {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; background: rgba(0,0,0,0.08);
  font-size: 11px; font-weight: 700; line-height: 14px;
}
.filtro-chip.activo .chip-count { background: rgba(255,255,255,0.22); color: #fff; }
.filtro-chip {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); font-size: 13px; font-weight: 600; font-family: inherit;
  color: inherit; cursor: pointer; white-space: nowrap;
}
.filtro-chip.activo { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- Ajustes --- */
.ajustes-bloque { margin: 22px 24px 0; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
@media (max-width: 780px) { .ajustes-bloque { margin: 16px 12px 0; } }
.ajustes-titulo { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.ajustes-nota { font-size: 12px; color: var(--muted); margin: 0 0 12px; line-height: 1.4; }
.ajustes-fila { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ajustes-fila:last-child { border-bottom: none; }
.ajustes-fila-texto { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ajustes-fila-detalle { font-size: 12px; font-weight: 400; color: var(--muted); }
.bottom-nav { overflow-x: auto; }

/* --- Totales del Monitor y modal de edicion --- */
.totales-card {
  margin: 14px 0 8px; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--card);
}
.totales-linea { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 14px; }
.totales-linea.destacada { font-weight: 700; font-size: 16px; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
.totales-nota { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.modal-fondo {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50;
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 14px 90px;
}
/* El atributo hidden debe poder con el display:flex de arriba */
.modal-fondo[hidden] { display: none; }
.modal-caja {
  width: 100%; max-width: 460px; background: var(--card); border-radius: 16px;
  padding: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

/* --- Comparativa de precios --- */
.precio-card { padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.precio-titulo { font-size: 14px; font-weight: 700; margin-bottom: 8px; overflow-wrap: anywhere; }
.precio-fila { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 13px; }
.precio-fila.mejor { font-weight: 700; color: var(--acento); }
.precio-proveedor { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.precio-fecha { font-size: 11px; color: var(--muted); }
.precio-ahorro { margin-top: 8px; font-size: 12px; color: var(--acento); font-weight: 600; }

/* Regla de seguridad: nada con hidden debe verse */
[hidden] { display: none !important; }

.campo select { min-height: 48px; height: auto; }

/* --- Ficha de producto --- */
.ficha-dato { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.ficha-dato:last-child { border-bottom: none; }
.ficha-etiqueta { color: var(--muted); flex: 0 0 auto; }
.ficha-valor { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.precio-card[data-linea], .precio-fila[data-doc] { cursor: pointer; }
.precio-card[data-linea]:active { background: var(--accent-soft); }

/* --- Fase 5 · Contabilidad subpestañas --- */
.subnav-contab {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px; margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
}
.subnav-btn {
  flex: 1 1 auto; min-width: 88px;
  padding: 9px 12px; border: 1px solid transparent; background: transparent;
  color: var(--muted); font-weight: 600; font-size: 13.5px;
  border-radius: 10px; cursor: pointer; transition: background .15s, color .15s;
}
.subnav-btn:hover { background: var(--accent-soft); color: var(--accent); }
.subnav-btn.activo {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.sub-contab { display: none; }
.sub-contab.activa { display: block; }
.stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px;
}
.stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-valor { font-size: 22px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.filtros-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.filtros-row select, .filtros-row input { min-height: 40px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.semaforo {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08); vertical-align: middle;
}
.semaforo.verde { background: var(--acento); }
.semaforo.ambar { background: var(--amber-medium); }
.semaforo.rojo  { background: var(--red); }
.tabla-json { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-json th, .tabla-json td { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); text-align: left; }
.tabla-json th { font-weight: 700; color: var(--muted); background: var(--accent-soft); position: sticky; top: 0; }
.tabla-json tbody tr:hover { background: var(--superficie-suave); }

/* T8 §2 · En móvil (<640px) las tablas técnicas se apilan como tarjetas.
   El pseudo-elemento ::before muestra el nombre de columna delante de
   cada valor para que se lea sin cabecera. */
@media (max-width: 640px) {
  .tabla-json thead { display: none; }
  .tabla-json tbody tr {
    display: block; margin-bottom: 10px; padding: 10px 12px;
    border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie);
  }
  .tabla-json tbody td {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 4px 0; border-bottom: 1px solid var(--separador); text-align: right !important;
  }
  .tabla-json tbody td:last-child { border-bottom: 0; }
  .tabla-json tbody td::before {
    content: attr(data-etq); text-align: left; color: var(--gris); font-size: 12px;
    font-weight: 600; margin-right: 12px; flex: 1 1 auto;
  }
}
.no-verificado { color: var(--amber); font-weight: 600; }
.btn-releer {
  padding: 4px 10px; font-size: 12px;
  background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber-medium);
  border-radius: 8px; cursor: pointer;
}
.btn-releer:hover { background: var(--amber-medium); color: #fff; }

/* --- Planes y módulos · pruebas de plan (27/09) --- */
/* Banner en la cabecera cuando hay prueba en curso. Más visible los últimos
   7 días, discreto el resto del tiempo. */
.prueba-banner {
  margin: 8px 24px 0; padding: 10px 14px; border-radius: 12px;
  background: var(--acento-suave); border: 1px solid var(--acento); color: var(--acento);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13.5px; font-weight: 600;
}
.prueba-banner.urgente { background: var(--ambar-suave); border-color: var(--ambar-medio); color: var(--ambar); }
.prueba-banner button {
  height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid currentColor;
  background: transparent; color: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer;
}
.prueba-banner button.principal { background: currentColor; color: var(--superficie); border-color: transparent; }
.prueba-banner button.principal span { color: var(--superficie); }
@media (max-width: 460px) { .prueba-banner { margin: 8px 12px 0; flex-wrap: wrap; } }

/* Diálogo "Sube a Premium" (respuesta a errores PLAN:*) */
.plan-modal-fondo {
  position: fixed; inset: 0; background: rgba(30, 33, 28, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.plan-modal-fondo[hidden] { display: none; }
.plan-modal {
  background: var(--superficie); border-radius: 16px; padding: 22px;
  max-width: 460px; width: 100%; box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.plan-modal h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--tinta); }
.plan-modal p { margin: 0 0 14px; color: var(--tinta-suave); font-size: 14px; line-height: 1.5; }
.plan-modal ul { margin: 0 0 14px; padding-left: 18px; color: var(--tinta-suave); font-size: 13.5px; line-height: 1.6; }
.plan-modal-acciones { display: flex; gap: 8px; }
.plan-modal-acciones button { flex: 1; height: 46px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }
.plan-modal-secundario { background: var(--superficie); border: 1px solid var(--borde); color: var(--tinta); }
.plan-modal-principal { background: var(--acento); border: none; color: var(--superficie); }

/* T50 it. 2 · Modal Revisar con documento a un lado.
   Escritorio (≥ 900px): dos columnas, PDF a la izquierda y datos a la
   derecha. Cada columna con su scroll para no perder el visor al
   desplazarse por el formulario.
   Móvil: pastillas Documento/Datos, una vista visible a la vez. */
#modal-revisar-doc .plan-modal { max-width: 1240px; width: min(96vw, 1240px); max-height: 92vh; }
#mrd-tabs { display: none; margin-top: 12px; }
#mrd-cuerpo { margin-top: 12px; }
#mrd-doc-panel {
  border: 1px solid var(--borde); border-radius: 10px; overflow: hidden;
  background: var(--fondo-suave, #f5f4f0);
  min-height: 60vh; display: flex; align-items: stretch; justify-content: center;
}
#mrd-doc-panel iframe, #mrd-doc-panel img { display: block; }
#mrd-datos-panel { min-width: 0; }

@media (min-width: 900px) {
  #mrd-cuerpo {
    display: grid; grid-template-columns: minmax(360px, 1fr) minmax(0, 1fr);
    gap: 16px; align-items: start;
  }
  #mrd-doc-panel {
    position: sticky; top: 0;
    min-height: min(76vh, 720px); height: min(76vh, 720px);
  }
  #mrd-datos-panel {
    max-height: min(80vh, 800px); overflow-y: auto; padding-right: 8px;
  }
  #mrd-tabs { display: none !important; }
}
@media (max-width: 899px) {
  #mrd-tabs { display: flex; }
  #modal-revisar-doc.mrd-tab-active-documento #mrd-datos-panel { display: none; }
  #modal-revisar-doc.mrd-tab-active-datos #mrd-doc-panel { display: none; }
  #mrd-doc-panel { min-height: 60vh; }
}

/* --- Superadmin · panel de cuentas y pruebas de plan --- */
.superadmin-cliente { padding: 14px 16px; }
.superadmin-cliente-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.superadmin-cliente-nombre { font-weight: 700; font-size: 16px; }
.superadmin-cliente-plan {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: var(--acento-suave); color: var(--acento); text-transform: uppercase; letter-spacing: .04em;
}
.superadmin-cliente-plan.prueba { background: var(--ambar-suave); color: var(--ambar); }
.superadmin-cliente-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 10px 0;
}
.superadmin-dato-label { font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.superadmin-dato-valor { font-weight: 700; font-size: 14.5px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.superadmin-cliente-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.superadmin-cliente-acciones button {
  height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--tinta); font-weight: 600; font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.superadmin-cliente-acciones button.principal { background: var(--acento); color: var(--superficie); border-color: var(--acento); }
.superadmin-cliente-acciones button.destructivo { color: var(--teja); border-color: var(--teja-suave); }
.superadmin-cliente-historial { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--separador); font-size: 12.5px; color: var(--gris); }
.superadmin-cliente-historial h4 { margin: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.superadmin-cliente-historial ul { margin: 0; padding-left: 16px; }

/* --- Aviso módulo bloqueado dentro de la app (además del modal) --- */
.aviso-bloqueado {
  margin: 12px 24px; padding: 14px 16px; border-radius: 14px;
  background: var(--ambar-suave); border: 1px solid var(--ambar-medio); color: var(--ambar);
  font-size: 13.5px;
}
.aviso-bloqueado strong { color: var(--ambar); }


/* --- Destinos (rediseño) --- */
.destinos-intro { padding: 0 24px; margin: 4px 0 12px; font-size: 13.5px; line-height: 1.6; }
.destinos-nuevo-btn { height: 40px; padding: 0 14px; }

.destinos-avisos {
  margin: 0 24px 12px; padding: 12px 14px;
  background: var(--amber-soft); border: 1px solid var(--amber);
}
.destinos-avisos h3 { margin: 0 0 6px; font-size: 14px; color: var(--amber); }
.destinos-avisos-lista { display: flex; flex-direction: column; gap: 8px; }
.destinos-aviso-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; background: var(--card); border-radius: 10px; font-size: 13px;
}
.destinos-aviso-fila .filtro-texto { height: 32px; font-size: 12.5px; }

/* Estado vacío hero */
.destinos-vacio-hero { padding: 0 24px; }
.destinos-hero-card { padding: 20px 22px; }
.destinos-hero-card h2 { margin: 0 0 6px; font-size: 20px; }
.destinos-vias {
  display: flex; flex-direction: column; gap: 14px; margin-top: 16px;
}
.destinos-via {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border: 1px solid var(--border-soft); border-radius: 12px;
  background: #FBFAF6;
}
.destinos-via-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.destinos-via-titulo { font-weight: 700; margin-bottom: 4px; font-size: 14.5px; }
.destinos-drop-zona { margin-top: 10px; padding: 14px; }

/* Filtros de destinos */
.destinos-filtros { padding: 0 24px; }
.chip-empresas {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.chip-empresa {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); color: var(--muted); font-weight: 600; font-size: 13px;
  cursor: pointer; transition: background .15s, color .15s;
}
.chip-empresa:hover { background: var(--accent-soft); color: var(--accent); }
.chip-empresa.activo { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.chip-label .filtro-select { margin-left: 4px; }
.destinos-periodo-label { font-size: 12.5px; }

/* Layout de destinos: grid + lateral.
   T260 · El lateral solo aparece cuando el usuario selecciona un destino
   (patrón T149 Libros). Sin seleccion el grid ocupa todo el ancho; con
   seleccion se abre una columna lateral de 300 px. */
.destinos-layout {
  display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 24px 24px;
}
.destinos-layout.con-lateral { grid-template-columns: 1fr 300px; }
@media (max-width: 780px) {
  .destinos-layout, .destinos-layout.con-lateral { grid-template-columns: 1fr; padding: 0 12px 100px; }
  .destinos-lateral { order: 2; }
  .destinos-nuevo-btn { position: fixed; bottom: calc(var(--bottom-nav-h) + 14px + env(safe-area-inset-bottom, 0px)); right: 16px; z-index: 55;
    width: 56px; height: 56px; padding: 0; border-radius: 50%; font-size: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    background: var(--acento); color: var(--superficie);
    display: flex; align-items: center; justify-content: center;
  }
  .destinos-nuevo-btn::before { content: '+'; font-size: 28px; font-weight: 700; line-height: 1; color: var(--superficie); }
}

.destinos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
.destino-card {
  padding: 14px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--card); cursor: pointer; transition: border-color .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 8px;
}
.destino-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(31,90,75,.08); }
.destino-card.activo { border-color: var(--accent); box-shadow: 0 4px 14px rgba(31,90,75,.12); }
.destino-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.destino-card-nombre { font-weight: 700; font-size: 15px; line-height: 1.3; }
.destino-tipo-chip {
  display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; white-space: nowrap;
}
.destino-tipo-chip.personal { background: var(--amber-soft); color: var(--amber); }
.destino-card-cifras {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px;
  padding-top: 8px; border-top: 1px solid var(--border-soft);
}
.destino-cifra-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.destino-cifra-valor { font-size: 15px; font-weight: 700; }
.destino-cifra-valor.ingresos { color: var(--acento); }
.destino-cifra-valor.gastos { color: var(--red); }
.destino-cifra-valor.resultado.positivo { color: var(--acento); }
.destino-cifra-valor.resultado.negativo { color: var(--red); }
.destino-card-resultado {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 6px; border-top: 1px dashed var(--border-soft); font-size: 12.5px;
}
.destino-card-docs { font-size: 11.5px; color: var(--muted); }

/* Panel lateral con identificadores */
.destinos-lateral h3 { font-size: 15px; }
.destinos-lateral-datos { display: flex; flex-direction: column; gap: 8px; }
.destino-ident-fila {
  padding: 7px 0; border-bottom: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
}
.destino-ident-fila:last-child { border-bottom: 0; }
.destino-ident-label { color: var(--muted); flex-shrink: 0; }
.destino-ident-valor { font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.destinos-lateral-acciones { display: flex; gap: 8px; margin-top: 12px; }
.destinos-lateral-acciones button { flex: 1; height: 38px; }

/* Modal destino */
.modal-destino-formulario {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 12px;
}
.modal-destino-formulario label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.modal-destino-formulario input, .modal-destino-formulario select {
  min-height: 40px; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--card); color: var(--ink); font-size: 14px;
}
.modal-destino-formulario .mdes-checkbox {
  flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-size: 13.5px;
  grid-column: 1 / -1;
}
.modal-destino-acciones { display: flex; gap: 8px; }
.modal-destino-acciones button { flex: 1; }
@media (max-width: 460px) {
  .modal-destino-formulario { grid-template-columns: 1fr; }
}

/* Preview importación */
.destinos-import-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.destinos-import-tabla th, .destinos-import-tabla td {
  padding: 6px 8px; border-bottom: 1px solid var(--border-soft); text-align: left;
}
.destinos-import-tabla th { background: var(--accent-soft); color: var(--muted); font-weight: 700; }
.destinos-import-tabla tr.error td { background: var(--teja-suave); }
.destinos-import-tabla tr.error td:first-child::before { content: '⚠ '; color: var(--teja); }

/* --- Componentes generales de la Guía (fase-6-identidad) --- */

/* Pastillas segmented (selector para ≤5 opciones) */
.pastillas { display: flex; flex-wrap: wrap; gap: 6px; }
.pastilla {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--gris);
  font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s;
}
.pastilla:hover { background: var(--acento-suave); color: var(--acento); }
.pastilla.activo { background: var(--acento); color: var(--superficie); border-color: var(--acento); }

/* Label de sección/campo */
.mdes-campo-label { font-size: 12.5px; color: var(--gris); margin-bottom: 6px; font-weight: 600; }

/* Chip de estado (verde/ámbar/teja) reutilizable */
.chip-estado {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--acento-suave); color: var(--acento);
}
.chip-estado.ambar { background: var(--ambar-suave); color: var(--ambar); }
.chip-estado.teja  { background: var(--teja-suave); color: var(--teja); }
.chip-estado.gris  { background: var(--superficie-suave); color: var(--gris); border: 1px solid var(--borde); }
.chip-estado.acento-suave { background: var(--acento-suave); color: var(--acento); }

/* T395 · Etiqueta discreta "Lectura avanzada": texto informativo sin aspecto de botón. */
.etiqueta-lectura-avanzada {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--gris); letter-spacing: .01em;
  cursor: default; user-select: none;
}

/* T317 iter.2 · Chips pulsables de cabecera del Monitor. Pequeños,
   acento-soft por defecto; variantes teja (incidencias) y ámbar
   (atención). min-height 32 px (excepción documentada en guía). */
.chip-cabecera {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 32px; padding: 4px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--acento-suave); color: var(--acento);
  border: 1px solid transparent; cursor: pointer;
}
.chip-cabecera:hover { filter: brightness(0.97); }
.chip-cabecera-teja  { background: var(--teja-suave);  color: var(--teja); }
.chip-cabecera-ambar { background: var(--ambar-suave); color: var(--ambar); }
.chip-cabecera > span { font-weight: 800; }

/* T8 · fila de casilla del formulario oficial. La destacada tiene un
   ligero fondo acento-suave para llamar la atención sobre el resultado
   (por ejemplo, casilla 71 del 303). */
.imp-fila-casilla.destacada {
  background: var(--acento-suave);
  border-radius: 8px;
  padding-left: 10px !important; padding-right: 10px !important;
}

/* Aviso inline (sustituye a alert() para errores no modales) */
.aviso-inline {
  padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.45;
  background: var(--teja-suave); border: 1px solid var(--teja); color: var(--teja);
  margin: 10px 0;
}
.aviso-inline.ambar { background: var(--ambar-suave); border-color: var(--ambar-medio); color: var(--ambar); }
.aviso-inline.acento { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); }

/* Toast (confirmación breve al guardar) */
.toast-cont {
  position: fixed; left: 50%; transform: translateX(-50%);
  /* T91 · siempre encima de la bottom-nav fija (72 px + hueco). */
  bottom: calc(var(--bottom-nav-h) + 18px + env(safe-area-inset-bottom, 0px));
  z-index: 200; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 10px 16px; border-radius: 999px;
  background: var(--tinta); color: var(--superficie);
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.20);
  opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s;
  pointer-events: auto;
}
.toast.entra { opacity: 1; transform: translateY(0); }
.toast.acento { background: var(--acento); }
.toast.ambar { background: var(--ambar); }
.toast.teja  { background: var(--teja); }

/* Cifras siempre con tabular-nums en tablas de datos */
.tabla-datos td, .tabla-datos th { font-variant-numeric: tabular-nums; }

/* Detalle expansible (divulgación progresiva) */
details.mas-opciones { margin: 12px 0; }
details.mas-opciones > summary {
  cursor: pointer; padding: 8px 12px; border-radius: 10px;
  background: var(--superficie-suave); border: 1px solid var(--borde);
  font-size: 13px; font-weight: 600; color: var(--tinta);
  list-style: none;
}
details.mas-opciones > summary::-webkit-details-marker { display: none; }
details.mas-opciones > summary::after { content: ' ▾'; color: var(--gris); }
details.mas-opciones[open] > summary::after { content: ' ▴'; }
details.mas-opciones > *:not(summary) { margin-top: 10px; }

/* --- Contabilidad · Configuración (tanda 2 fase identidad) --- */

/* Cabecera con acción a la derecha */
.cabecera-tarjeta {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
@media (max-width: 640px) {
  .cabecera-tarjeta { flex-direction: column; align-items: stretch; }
  .cabecera-tarjeta > button { align-self: flex-start; }
}

/* =====================================================================
   T150 iter 2 · Barra lateral de escritorio (≥1024 px)
   =====================================================================
   En móvil la sidebar queda `display:none` y el usuario sigue viendo
   bottom-nav + panel "Más". A partir de 1024 px pasamos a layout de
   escritorio: sidebar fija a la izquierda (240 px), el contenido se
   corre esa cantidad, y bottom-nav + burbuja del asistente se ocultan.
   ===================================================================== */
.sidebar-escritorio { display: none; }
@media (min-width: 1024px) {
  .sidebar-escritorio {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
    background: var(--superficie); border-right: 1px solid var(--borde);
    z-index: 60; overflow-y: auto;
    padding: 16px 10px 12px;
  }
  body { padding-left: 240px; }
  /* En escritorio desaparecen la navegación inferior y el botón "Más". */
  .bottom-nav { display: none !important; }
  .mas-fondo { display: none !important; }
  /* La burbuja del asistente se mueve a la esquina sin colisionar con
     la bottom-nav (que ya no existe). */
  #btn-asistente-abrir { bottom: 24px !important; }
}
.sidebar-cabecera { padding: 0 6px 14px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--borde); margin-bottom: 10px; }
.sidebar-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--tinta); }
#sidebar-empresa { width: 100%; }
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.sidebar-grupo { display: flex; flex-direction: column; gap: 2px; }
.sidebar-grupo-titulo {
  margin: 10px 10px 4px 10px; font-size: 11.5px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: none; border: none; cursor: pointer;
  text-align: left; font-size: 14px; color: var(--tinta);
  border-radius: 10px;
}
.sidebar-item:hover { background: var(--superficie-suave); }
.sidebar-item.activo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.sidebar-item.activo .sidebar-icono { color: var(--acento); }
.sidebar-icono {
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--gris); flex-shrink: 0;
}
.sidebar-item-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-item-chip:not(:empty) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 6px;
  background: var(--teja-suave); color: var(--teja);
  border-radius: 999px; font-size: 11px; font-weight: 700;
}
.sidebar-cuenta {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 8px; margin-top: 10px; border-top: 1px solid var(--borde);
}
.sidebar-cuenta-datos { flex: 1; min-width: 0; }
.sidebar-cuenta-nombre { font-weight: 700; font-size: 13.5px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-cuenta-email { font-size: 12px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-cuenta-salir {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--gris); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-cuenta-salir:hover { color: var(--teja); border-color: var(--teja); background: var(--teja-suave); }

/* =====================================================================
   T149 · Patrón común "cabecera de listado"
   =====================================================================
   Ver docs/guia-diseno.md §Cabecera de listado. Lo usan Libros,
   Monitor, Por revisar, Incidencias, Ventas, Banco, Proveedores,
   Destinos e Informes para que todos los listados compartan la misma
   ergonomía: una fila con título + acción principal con menú + acción
   secundaria con menú; debajo pestañas de tipo + pastillas de periodo
   + botón "Filtros" plegable; chips de filtros activos con ✕; lista
   a ancho completo (detalle en panel lateral ≥1024 px / pantalla
   completa móvil).
   ===================================================================== */
.listado-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.listado-titulo { margin: 0; font-size: 22px; }
.listado-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) {
  .listado-cabecera { flex-direction: column; align-items: stretch; }
  .listado-acciones { justify-content: flex-end; }
}

/* Menú-botón: botón con desplegable de opciones.
   Se usa para "Nuevo asiento ▾" / "Descargar ▾" / etc. */
.menu-boton { position: relative; display: inline-block; }
.menu-boton-trigger { display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 10px 16px; font-size: 14px; width: auto; }
.menu-boton-items {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 25;
  min-width: 200px; margin: 0; padding: 6px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.10);
  list-style: none; display: flex; flex-direction: column;
}
.menu-boton-items[hidden] { display: none; }
.menu-boton-items button {
  width: 100%; text-align: left; padding: 10px 12px; border: 0;
  background: transparent; color: var(--tinta);
  font-size: 14px; font-family: inherit; border-radius: 8px; cursor: pointer;
}
.menu-boton-items button:hover { background: var(--superficie-suave); }

.listado-tipo { margin-bottom: 10px; }

.listado-filtros-fila {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.listado-filtros-panel { padding: 14px 16px; }
.listado-filtros-panel .filtro-grupo { margin-top: 10px; }
.listado-filtros-panel .filtro-grupo:first-of-type { margin-top: 0; }
.filtro-grupo-titulo {
  font-size: 12.5px; color: var(--gris); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px;
}
.listado-filtros-activos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.listado-filtros-activos .chip-estado {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.listado-filtros-activos .chip-estado:hover { opacity: .85; }

/* Lista + detalle lateral (escritorio ≥ 1024 px). En móvil pasa a
   stack vertical (detalle debajo). */
.listado-panel-split {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 14px; align-items: start;
}
@media (max-width: 1023px) {
  .listado-panel-split { grid-template-columns: 1fr; }
}
.listado-detalle-lateral { padding: 14px; position: sticky; top: 12px; }
@media (max-width: 1023px) { .listado-detalle-lateral { position: static; } }

/* Estado vacío centrado reutilizable. */
.estado-vacio {
  text-align: center; padding: 44px 20px; color: var(--gris);
}
.estado-vacio strong { color: var(--tinta); font-size: 15px; display: block; }
.estado-vacio p { color: var(--gris); font-size: 13.5px; margin: 6px auto 14px; max-width: 420px; line-height: 1.5; }

/* T148 · Tarjetas de modelos fiscales (Contabilidad → Resumen).
   Grid responsive: 1 col en móvil, 2 col en tablet, 3 en escritorio. */
.modelos-fiscales-grid {
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
@media (min-width: 540px) { .modelos-fiscales-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .modelos-fiscales-grid { grid-template-columns: 1fr 1fr 1fr; } }
.modelo-fiscal-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--superficie); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.modelo-fiscal-card:hover { border-color: var(--acento); box-shadow: 0 4px 14px rgba(31,90,75,.08); }
.modelo-fiscal-card:active { transform: translateY(1px); }
.modelo-fiscal-numero {
  font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--tinta); line-height: 1; min-width: 48px;
}
.modelo-fiscal-cuerpo { min-width: 0; }
.modelo-fiscal-nombre { font-weight: 700; font-size: 14px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; }
.modelo-fiscal-sub { font-size: 12px; color: var(--gris); margin-top: 2px; }
.modelo-fiscal-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.modelo-fiscal-importe {
  font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tinta); line-height: 1.1;
}
.modelo-fiscal-importe.a-ingresar { color: var(--teja); }
.modelo-fiscal-importe.a-devolver { color: var(--acento); }
.modelo-fiscal-importe.cero { color: var(--gris); font-weight: 600; }
.modelo-fiscal-casilla { font-size: 11.5px; color: var(--gris); }
.modelo-fiscal-chip {
  grid-column: 1 / -1; justify-self: start; margin-top: 2px;
}

/* Lista de permisos como tarjetas por persona */
.permisos-lista { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 780px) {
  .permisos-lista { grid-template-columns: repeat(2, 1fr); }
}
.tarjeta-persona {
  padding: 14px 16px; border: 1px solid var(--borde); border-radius: 14px;
  background: var(--superficie);
  display: flex; flex-direction: column; gap: 10px;
}
.tarjeta-persona-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.tarjeta-persona-datos { min-width: 0; }
.tarjeta-persona-nombre {
  font-weight: 700; font-size: 14.5px; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-persona-email {
  font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-persona-empresas { display: flex; flex-wrap: wrap; gap: 6px; }

/* Pastilla de empresa dentro de una tarjeta de persona (con botón × opcional) */
.pastilla-empresa {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--acento-suave); color: var(--acento);
  font-size: 12px; font-weight: 700;
}
.pastilla-quitar {
  border: 0; background: transparent; color: inherit;
  font-size: 15px; line-height: 1; cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .6;
}
.pastilla-quitar:hover { opacity: 1; background: rgba(0,0,0,.08); }

/* Chip de rol (mismo look que chip-estado, con matiz) */
.chip-rol { text-transform: capitalize; }
.chip-rol-administrador { background: var(--acento-suave); color: var(--acento); }
.chip-rol-validador     { background: var(--ambar-suave);  color: var(--ambar); }
.chip-rol-registrador   { background: var(--superficie-suave); color: var(--gris); border: 1px solid var(--borde); }
.chip-rol-consulta      { background: var(--superficie-suave); color: var(--gris); border: 1px solid var(--borde); }
.chip-rol-mixto         { background: var(--teja-suave); color: var(--teja); }

/* Estado vacío general (con explicación) */
.estado-vacio {
  padding: 18px 20px; border-radius: 14px;
  background: var(--superficie-suave); border: 1px dashed var(--borde);
  color: var(--gris); font-size: 13.5px; line-height: 1.5;
}
.estado-vacio strong { display: block; color: var(--tinta); margin-bottom: 4px; font-size: 14px; }

/* Panel inline "Añadir permiso" con etiquetas visibles */
.panel-inline {
  margin-top: 14px; padding: 16px 18px;
  background: var(--superficie-suave); border: 1px solid var(--borde); border-radius: 14px;
}
.campos-etiquetados {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
@media (max-width: 640px) { .campos-etiquetados { grid-template-columns: 1fr; } }
.campos-etiquetados .campo { display: flex; flex-direction: column; gap: 4px; }
.campos-etiquetados .etiqueta {
  font-size: 12px; font-weight: 700; color: var(--gris);
  text-transform: uppercase; letter-spacing: .04em;
}
.campos-etiquetados select, .campos-etiquetados input {
  min-height: 40px; padding: 8px 10px;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie); color: var(--tinta); font-size: 14px;
}
.acciones-panel {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px;
}

/* Resumen visible del estado del aprendizaje (con Más opciones cerrado) */
.resumen-aprendizaje {
  margin: 6px 0 10px; font-size: 13px; line-height: 1.55;
  padding: 8px 12px; border-radius: 10px;
  background: var(--superficie-suave); border: 1px solid var(--borde);
}

/* --- Formularios estructurados (Ajustes · Datos empresa / Ficha fiscal) --- */

.campo-etiquetado { display: flex; flex-direction: column; gap: 4px; }
.campo-etiquetado .etiqueta {
  font-size: 12px; font-weight: 700; color: var(--gris);
  text-transform: uppercase; letter-spacing: .04em;
}
.campo-etiquetado input,
.campo-etiquetado select,
.campo-etiquetado textarea {
  min-height: 40px; padding: 8px 10px;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie); color: var(--tinta); font-size: 14px;
  font-family: inherit;
}
.campo-etiquetado textarea { min-height: 80px; resize: vertical; }

.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
  align-items: end;
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.grupo-titulo {
  margin: 18px 0 8px; font-size: 13px; font-weight: 700;
  color: var(--gris); text-transform: uppercase; letter-spacing: .04em;
  padding-bottom: 4px; border-bottom: 1px solid var(--separador);
}

.checkbox-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  margin-bottom: 4px;
}
@media (max-width: 640px) { .checkbox-grid { grid-template-columns: 1fr; } }

.check-linea {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--borde); background: var(--superficie);
  font-size: 13.5px; line-height: 1.4;
  cursor: pointer;
}
.check-linea:hover { border-color: var(--acento); background: var(--acento-suave); }
.check-linea input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.check-linea span { color: var(--tinta); }
.check-linea strong { color: var(--tinta); }

.acciones-form {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
}
@media (max-width: 640px) {
  .acciones-form { flex-direction: column-reverse; }
  .acciones-form button { width: 100%; }
}

/* Asterisco de obligatorio y ayuda debajo del campo */
.campo-etiquetado .req { color: var(--teja); font-weight: 800; margin-left: 2px; }
.ayuda-campo { font-size: 12px; color: var(--gris); line-height: 1.4; margin-top: 2px; }

/* Hero de estado vacío con CTA (Banco sin cuentas, Correo sin buzones, etc.) */
.hero-vacio {
  padding: 24px 22px; border-radius: 16px;
  background: var(--superficie); border: 1px solid var(--borde);
  text-align: center; margin: 12px 0;
}
.hero-vacio h3 { margin: 0 0 6px; font-size: 16px; color: var(--tinta); font-weight: 700; }
.hero-vacio p  { margin: 0 auto 14px; font-size: 13.5px; color: var(--gris); max-width: 440px; line-height: 1.5; }
.hero-vacio .btn-primario { min-height: 42px; padding: 8px 18px; }

/* =====================================================================
 * COMPONENTE COMÚN · tarjeta-doc
 * Usada en Monitor, Contabilidad → Por revisar, nóminas, movimientos de
 * banco conciliados y cualquier listado de documentos futuro.
 * Estructura: cabecera (izq) · estado (centro) · importe/acciones (der).
 * En móvil se apila; pulsar la tarjeta ejecuta la acción principal.
 * ===================================================================== */
.tarjeta-doc-lista { display: flex; flex-direction: column; gap: 10px; }

.tarjeta-doc {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px; align-items: center;
  padding: 14px 16px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px;
  transition: border-color .15s, box-shadow .15s, transform .05s;
  position: relative;
  z-index: 1;
}
/* T67 · Cuando el menú ⋯ está abierto, la tarjeta sube de capa para que
   su menú desplegado tape las tarjetas siguientes. Sin este z-index la
   .tarjeta-doc-acciones de la tarjeta inferior intercepta los clicks
   del menú (bug reportado por Manuel el 01/10: en móvil el toque
   caía en la siguiente tarjeta y "abría el documento").
   T91 · subido a 60 para quedar por encima de la bottom-nav fija (50);
   antes era 30 y, con la nav sticky, no había conflicto. */
.tarjeta-doc.tiene-menu-abierto { z-index: 60; }
.tarjeta-doc:hover { border-color: var(--acento); box-shadow: 0 4px 14px rgba(31,90,75,.08); }
.tarjeta-doc.pulsable { cursor: pointer; }
.tarjeta-doc.pulsable:active { transform: translateY(1px); }

/* Cabecera (columna izq) */
.tarjeta-doc-cab { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarjeta-doc-meta { font-size: 12px; color: var(--gris); }
.tarjeta-doc-meta .sep { opacity: .45; margin: 0 4px; }
.tarjeta-doc-proveedor {
  font-weight: 700; font-size: 15px; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-doc-sub {
  font-size: 12.5px; color: var(--gris);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Estado (columna centro) */
.tarjeta-doc-estado { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tarjeta-doc-estado .motivo {
  font-size: 12px; color: var(--gris);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Semáforo contable (Listo/Aviso/Bloqueado) */
.chip-semaforo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  width: fit-content;
}
.chip-semaforo::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.chip-semaforo.listo    { background: var(--acento-suave); color: var(--acento); }
.chip-semaforo.listo::before    { background: var(--acento); }
.chip-semaforo.aviso    { background: var(--ambar-suave); color: var(--ambar); }
.chip-semaforo.aviso::before    { background: var(--ambar-medio); }
.chip-semaforo.bloqueado{ background: var(--teja-suave); color: var(--teja); }
.chip-semaforo.bloqueado::before{ background: var(--teja); }

/* T386 · Chips de motivo (Por revisar → fila encima de la lista) */
.chips-motivo-revisar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip-motivo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--borde);
  background: var(--superficie); color: var(--tinta);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: background .13s, color .13s, border-color .13s;
}
.chip-motivo:hover { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); }
.chip-motivo.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.chip-motivo.nivel-error { border-color: var(--teja); color: var(--teja); background: var(--teja-suave); }
.chip-motivo.nivel-error:hover,
.chip-motivo.nivel-error.activo { background: var(--teja); border-color: var(--teja); color: #fff; }
.chip-motivo.nivel-aviso { border-color: var(--ambar-medio); color: var(--ambar); background: var(--ambar-suave); }
.chip-motivo.nivel-aviso:hover,
.chip-motivo.nivel-aviso.activo { background: var(--ambar-medio); border-color: var(--ambar-medio); color: #fff; }
.chip-motivo-count { opacity: .75; font-weight: 700; }
/* Separador visual entre errores y avisos */
.chip-motivo-sep { width: 1px; height: 20px; background: var(--borde); margin: 0 2px; align-self: center; }

/* Importe + acciones (columna der) */
.tarjeta-doc-lado {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  min-width: 0; position: relative;
}
.tarjeta-doc-importe {
  font-size: 20px; font-weight: 800; color: var(--tinta);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tarjeta-doc-importe.negativo { color: var(--teja); }
.tarjeta-doc-metodo {
  font-size: 11.5px; color: var(--gris);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.tarjeta-doc-acciones { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.tarjeta-doc-acciones .btn-primario,
.tarjeta-doc-acciones .btn-secundario { min-height: 34px; padding: 6px 14px; font-size: 13px; }

/* Botón de menú "⋯" */
.btn-menu-doc {
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--superficie);
  color: var(--tinta); font-size: 18px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.btn-menu-doc:hover { background: var(--superficie-suave); }

/* Menú desplegable de la tarjeta */
.menu-doc {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 25;
  min-width: 180px; margin: 0; padding: 6px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.10);
  list-style: none; display: flex; flex-direction: column;
}
.menu-doc[hidden] { display: none; }
/* T142 · si el menú no cabe hacia abajo, se abre hacia arriba. */
.menu-doc.hacia-arriba { top: auto; bottom: calc(100% + 4px); }
.menu-doc button {
  width: 100%; text-align: left; padding: 8px 10px; border: 0;
  background: transparent; color: var(--tinta);
  font-size: 13px; border-radius: 8px; cursor: pointer;
}
.menu-doc button:hover { background: var(--superficie-suave); }
.menu-doc button.destructivo { color: var(--teja); }
.menu-doc button.destructivo:hover { background: var(--teja-suave); }
.menu-doc hr {
  border: 0; height: 1px; background: var(--borde); margin: 4px 2px;
}

/* Móvil: apilar en 1 columna */
@media (max-width: 640px) {
  .tarjeta-doc {
    grid-template-columns: 1fr;
    gap: 8px; padding: 12px 14px;
  }
  .tarjeta-doc-estado { flex-direction: row; align-items: center; gap: 10px; }
  .tarjeta-doc-lado { align-items: flex-start; }
  .tarjeta-doc-acciones { width: 100%; justify-content: flex-end; }
}

/* ========================================================================
   T20 · Asientos manuales — versión móvil
   Panel Diario: la grid 2 columnas (lista / detalle) pasa a stack.
   Modal Nuevo asiento: cada línea del asiento se muestra como tarjeta
   apilada con "Cuenta / Debe / Haber" en columna en vez de fila.
   ======================================================================== */
@media (max-width: 640px) {
  /* Diario: apilar lista arriba, detalle debajo */
  #dia-lista-cont { grid-template-columns: 1fr !important; }
  /* Cada fila del listado del diario es más compacta */
  #dia-lista .dia-item {
    grid-template-columns: 60px 1fr 90px !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  /* Ocultamos la columna del chip; el chip aparece debajo del concepto */
  #dia-lista .dia-item > div:last-child { display: none; }
  /* Chip de estado inline dentro de la etiqueta secundaria */
  #dia-lista .dia-item .muted { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

  /* Modal Nuevo asiento: cada línea a tarjeta */
  #mna-lineas .mna-linea {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 10px;
    border: 1px solid var(--borde);
    border-radius: 12px;
    background: var(--superficie-suave);
    margin-bottom: 10px;
    position: relative;
  }
  #mna-lineas .mna-linea-buscador { font-size: 14px; }
  #mna-lineas .mna-linea-debe,
  #mna-lineas .mna-linea-haber { font-size: 14px; }
  #mna-lineas .mna-linea-borrar {
    position: absolute; top: 6px; right: 6px;
  }
  /* Totales en columna, no en grid 3 */
  #mna-totales { grid-template-columns: 1fr !important; }

  /* Modal anular: reduce paddings */
  #modal-anular-asiento .plan-modal { padding: 18px; }
}


/* T43 · Indicador global del estado del correo en las pantallas de trabajo.
   Chip fixed en la esquina superior derecha con punto de color + texto
   corto. Al pulsarlo, panel con el mensaje completo y "Revisar ahora". */
#indicador-correo {
  position: fixed; top: 12px; right: 12px; z-index: 400;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
#indicador-correo[hidden] { display: none; }
/* T377 · ocultar el chip cuando el panel asistente está abierto (z-index 400 > 310). */
body.asistente-abierto #indicador-correo { display: none; }
.chip-indicador-correo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--borde);
  font-size: 12.5px; font-weight: 600; color: var(--tinta);
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.06);
  min-height: 32px;
}
.chip-indicador-correo:hover { background: var(--superficie-suave); }
.chip-indicador-correo-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--acento); flex-shrink: 0;
}
.chip-indicador-correo-punto[data-estado="conectado"] { background: var(--acento); }
.chip-indicador-correo-punto[data-estado="atrasado"],
.chip-indicador-correo-punto[data-estado="sin_envio"] { background: var(--ambar); }
.chip-indicador-correo-punto[data-estado="desconectado"] { background: var(--teja); }
.chip-indicador-correo-panel {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; padding: 12px 14px; min-width: 240px; max-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
@media (max-width: 640px) {
  /* En móvil sólo el punto (más un texto muy corto), para no tapar los títulos. */
  .chip-indicador-correo { padding: 6px 10px; }
  #indicador-correo-texto { display: none; }
  .chip-indicador-correo-panel { min-width: 220px; }
}

/* T43 · Banner en el inicio cuando el correo está desconectado. */
#banner-correo-desconectado {
  margin: 12px 20px 0; padding: 12px 14px;
  background: var(--teja-suave); border: 1px solid var(--teja);
  border-radius: 12px; color: var(--tinta);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
#banner-correo-desconectado[hidden] { display: none; }
#banner-correo-desconectado > .banner-correo-cuerpo { flex: 1; min-width: 200px; }
#banner-correo-desconectado > .banner-correo-cuerpo > strong { display: block; margin-bottom: 4px; color: var(--teja); }
#banner-correo-desconectado > button { flex-shrink: 0; }

/* T56 it. 2 · Asistente con IA (panel chat). Escritorio: pegado al borde
   derecho con 420 px; móvil: pantalla completa. Burbujas de mensajes. */
@media (max-width: 640px) {
  #panel-asistente { width: 100vw !important; border-left: 0 !important; }
}
/* T57 Fase B · Tarjeta de propuesta de acción (Confirmar / Cancelar). */
#panel-asistente .ast-accion-card {
  margin: 4px 0 8px; padding: 12px 14px;
  background: var(--acento-suave); border: 1px solid var(--acento);
  border-radius: 12px; max-width: 85%; align-self: flex-start;
}
#panel-asistente .ast-accion-card.ejecutada { background: var(--acento-suave); border-color: var(--acento); }
#panel-asistente .ast-accion-card.cancelada { background: var(--superficie-suave); border-color: var(--borde); color: var(--gris); }
#panel-asistente .ast-accion-card.error { background: var(--teja-suave); border-color: var(--teja); }
#panel-asistente .ast-accion-cabecera { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--acento); margin-bottom: 6px; }
#panel-asistente .ast-accion-card.cancelada .ast-accion-cabecera { color: var(--gris); }
#panel-asistente .ast-accion-card.error .ast-accion-cabecera { color: var(--teja); }
#panel-asistente .ast-accion-resumen { margin: 0 0 4px; font-size: 13.5px; color: var(--tinta); white-space: pre-wrap; }
#panel-asistente .ast-accion-meta { margin: 0 0 10px; font-size: 11.5px; color: var(--gris); }
#panel-asistente .ast-accion-botones { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
#panel-asistente .ast-accion-botones .btn-primario,
#panel-asistente .ast-accion-botones .btn-secundario { height: auto; min-height: 36px; padding: 6px 14px; font-size: 13px; width: auto; }
#panel-asistente .ast-accion-mensaje { font-size: 13px; font-weight: 600; color: var(--acento); }
#panel-asistente .ast-accion-mensaje.error { color: var(--teja); }

#panel-asistente .ast-burbuja {
  max-width: min(85%, 100%);
  padding: 8px 12px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.4;
  word-wrap: break-word; overflow-wrap: break-word;
  /* T381 · burbuja crece con el contenido, sin resize handle ni colapso */
  height: auto; min-height: auto;
  flex-shrink: 0;
  overflow: visible;
  resize: none;
}
#panel-asistente .ast-burbuja.usuario {
  align-self: flex-end; background: var(--acento); color: #fff;
  border-bottom-right-radius: 4px;
}
#panel-asistente .ast-burbuja.asistente {
  align-self: flex-start; background: var(--superficie); border: 1px solid var(--borde);
  color: var(--tinta); border-bottom-left-radius: 4px;
}
#panel-asistente .ast-burbuja .ast-meta {
  font-size: 10.5px; color: var(--gris); margin-top: 4px; font-variant-numeric: tabular-nums;
}
#ast-conversaciones .ast-conv-item {
  display: block; width: 100%; text-align: left; padding: 6px 8px; margin-bottom: 2px;
  border: 0; background: transparent; color: var(--tinta); font-size: 12.5px;
  border-radius: 6px; cursor: pointer;
}
#ast-conversaciones .ast-conv-item:hover { background: var(--superficie); }
#ast-conversaciones .ast-conv-item.activa { background: var(--acento-suave); color: var(--acento); font-weight: 600; }

/* T377 · Markdown dentro de burbujas del asistente. */
#panel-asistente .ast-burbuja .ast-md { font-size: inherit; line-height: inherit; }
#panel-asistente .ast-burbuja .ast-md p { margin: 0 0 6px; }
#panel-asistente .ast-burbuja .ast-md p:last-child { margin-bottom: 0; }
#panel-asistente .ast-burbuja .ast-md ul,
#panel-asistente .ast-burbuja .ast-md ol { margin: 4px 0 6px 16px; padding: 0; }
#panel-asistente .ast-burbuja .ast-md li { margin-bottom: 2px; }
#panel-asistente .ast-burbuja .ast-md h3,
#panel-asistente .ast-burbuja .ast-md h4 { margin: 8px 0 4px; font-size: 13px; font-weight: 700; }
/* T381 · Wrapper .ast-tabla con scroll horizontal; la tabla NO hace display:block. */
#panel-asistente .ast-burbuja .ast-md .ast-tabla {
  display: block; overflow-x: auto; max-width: 100%; margin: 6px 0;
  -webkit-overflow-scrolling: touch;
}
#panel-asistente .ast-burbuja .ast-md table {
  border-collapse: collapse; font-size: 12.5px; margin: 0;
}
#panel-asistente .ast-burbuja .ast-md th,
#panel-asistente .ast-burbuja .ast-md td {
  border: 1px solid var(--borde); padding: 4px 8px; text-align: left;
  white-space: normal; word-wrap: break-word;
}
#panel-asistente .ast-burbuja .ast-md th { background: var(--superficie-suave); font-weight: 600; }
#panel-asistente .ast-burbuja .ast-md code { background: var(--superficie-suave); padding: 1px 4px; border-radius: 3px; font-size: 12px; font-family: monospace; }
#panel-asistente .ast-burbuja .ast-md pre { background: var(--superficie-suave); border: 1px solid var(--borde); border-radius: 6px; padding: 8px 10px; overflow-x: auto; margin: 6px 0; }
#panel-asistente .ast-burbuja .ast-md pre code { background: none; padding: 0; font-size: 12px; }
#panel-asistente .ast-burbuja .ast-md a { color: var(--acento); text-decoration: underline; }
/* Burbuja del asistente con markdown: permitir HTML (no pre-wrap). */
#panel-asistente .ast-burbuja.asistente { white-space: normal; }

/* T377 · Tarjeta de documento referenciada desde burbuja asistente. */
.asistente-tarjeta-doc {
  margin: 6px 0 2px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 10px; padding: 10px 12px;
  font-size: 13px;
}

/* T381 · Contenedor mensajes: evitar scroll horizontal en móvil, flex-items no colapsan. */
#ast-mensajes { overflow-x: hidden; }
#ast-mensajes > .ast-burbuja { flex-shrink: 0; }

/* T379/T381 · Ajustes de fuente en móvil para burbujas y tablas. */
@media (max-width: 760px) {
  #panel-asistente .ast-burbuja { font-size: 13px; }
  #panel-asistente .ast-burbuja .ast-md table { font-size: 12px; }
}

/* =====================================================================
   T280 · Tarjeta de documento COMPACTA
   =====================================================================
   La acción principal pasa a ser una píldora pequeña (32-36 px) a la
   derecha, junto a "⋯". No un botón a ancho completo bajo el texto.
   Altura objetivo 72-88 px (2-3 líneas de texto). El motivo se trunca
   a 1 línea con tooltip al completo.
   ===================================================================== */
.tarjeta-doc-compacta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  min-height: 72px;
}
.tarjeta-doc-compacta .tdc-info { min-width: 0; }
.tarjeta-doc-compacta .tdc-titulo {
  font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-doc-compacta .tdc-sub {
  font-size: 12.5px; line-height: 1.3; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-doc-compacta .tdc-motivo {
  font-size: 12px; color: var(--tinta-suave); line-height: 1.3; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-doc-compacta .tdc-chip-col {
  display: flex; align-items: center; justify-content: flex-end;
}
.tarjeta-doc-compacta .tdc-acciones {
  display: flex; align-items: center; gap: 6px;
}
.tarjeta-doc-compacta .accion-principal-compacta .btn-compacto,
.btn-primario.btn-compacto {
  height: 34px; min-height: 34px; padding: 0 14px; font-size: 13px; width: auto;
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
}
@media (max-width: 420px) {
  /* En pantallas muy estrechas el chip pasa a flotar sobre el titulo
     para dar espacio a la fila de acciones. */
  .tarjeta-doc-compacta { grid-template-columns: minmax(0, 1fr) auto; }
  .tarjeta-doc-compacta .tdc-chip-col {
    order: -1; grid-column: 2; grid-row: 1; align-items: flex-start;
  }
  .tarjeta-doc-compacta .tdc-info { grid-column: 1 / span 2; grid-row: 2; }
  .tarjeta-doc-compacta .tdc-acciones { grid-column: 2; grid-row: 1; }
  .tarjeta-doc-compacta .btn-compacto { padding: 0 10px; font-size: 12.5px; }
}

/* =====================================================================
   T258 · Selector con creación (combobox + buscador + "+ Crear")
   =====================================================================
   Patrón "Selector con creación" (ver docs/guia-diseno.md): sustituye a
   los <select> de datos maestros. Un input con autocompletado, lista
   desplegable, última opción "+ Crear ‹texto›" y mini formulario en
   línea que no cierra el formulario de debajo.
   ===================================================================== */
.sel-crear { position: relative; display: block; }
.sel-crear-caja {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie);
}
.sel-crear-caja:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.sel-crear-input {
  flex: 1; min-width: 0; padding: 9px 12px; border: 0; background: transparent;
  font: inherit; color: var(--tinta); outline: none; border-radius: 10px;
}
.sel-crear-flecha {
  background: none; border: 0; padding: 0 10px; font-size: 12px; color: var(--muted);
  cursor: pointer; line-height: 1;
}
.sel-crear-lista {
  position: absolute; z-index: 220; top: 100%; left: 0; right: 0;
  margin: 4px 0 0; padding: 4px; list-style: none;
  max-height: 240px; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.sel-crear-opt {
  padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px;
  color: var(--tinta);
}
.sel-crear-opt:hover, .sel-crear-opt.sel-crear-opt-hover { background: var(--superficie-suave); }
.sel-crear-opt.activa { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.sel-crear-opt-crear {
  margin-top: 4px; border-top: 1px dashed var(--borde); padding-top: 10px;
  color: var(--acento); font-weight: 600;
}
.sel-crear-vacio {
  padding: 10px; text-align: center; color: var(--muted); font-size: 13px;
}
.sel-crear-mini {
  position: absolute; z-index: 230; top: 100%; left: 0; right: 0;
  margin: 4px 0 0; padding: 12px;
  background: var(--superficie); border: 1px solid var(--acento);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.sel-crear-mini-form { display: flex; flex-direction: column; gap: 10px; }
.sel-crear-mini-titulo { font-size: 13px; font-weight: 700; color: var(--tinta); }
.sel-crear-mini-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.sel-crear-mini-campo input,
.sel-crear-mini-campo select {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--borde);
  border-radius: 8px; background: var(--superficie); color: var(--tinta); font: inherit;
}
.sel-crear-mini-check { flex-direction: row; align-items: center; gap: 6px; }
.sel-crear-mini-check input { width: auto; }
.sel-crear-mini-error {
  padding: 6px 8px; border-radius: 6px; background: var(--teja-suave);
  color: var(--teja); font-size: 12.5px;
}
.sel-crear-mini-botones { display: flex; gap: 8px; }
.sel-crear-mini-botones button { padding: 7px 14px; height: 36px; }
.sel-crear-mini-completar { font-size: 12px; text-align: right; }
.sel-crear-mini-completar-link { color: var(--acento); text-decoration: underline; }

/* ===== T383 iter.2 · Monitor: cajón de filtros + toolbar + chips de estado =====
   El cajón sustituye al panel inline que empujaba la página. Desktop:
   lateral derecho 420 px con sombra; móvil: hoja inferior pegada al
   suelo con esquinas redondeadas arriba. Se abre/cierra deslizando. */
#monitor-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4);
  z-index: 400; opacity: 0; pointer-events: none;
  transition: opacity .18s ease-out;
}
#monitor-drawer-overlay[hidden] { display: none; }
#monitor-drawer-overlay.visible { opacity: 1; pointer-events: auto; }

.monitor-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  background: var(--superficie); border-left: 1px solid var(--borde);
  box-shadow: -10px 0 32px rgba(30, 33, 28, 0.12);
  display: flex; flex-direction: column;
  z-index: 410; transform: translateX(100%);
  transition: transform .22s ease-out;
}
.monitor-drawer[hidden] { display: none; }
.monitor-drawer.visible { transform: translateX(0); }

.monitor-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--borde);
  background: var(--superficie); flex: 0 0 auto;
}
.monitor-drawer-header h2 { margin: 0; font-size: 17px; }
#monitor-drawer-cerrar {
  width: 36px; height: 36px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; font-size: 18px;
}

.monitor-drawer-body {
  flex: 1 1 auto; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}

.monitor-drawer-footer {
  flex: 0 0 auto; display: flex; gap: 10px; justify-content: space-between;
  align-items: center; padding: 12px 18px;
  border-top: 1px solid var(--borde); background: var(--superficie);
}
.monitor-drawer-footer .btn-primario { flex: 1; }

/* Hoja inferior en móvil: todo el ancho, redondeada arriba, altura 85 vh. */
@media (max-width: 719px) {
  .monitor-drawer {
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100vw; max-height: 85vh;
    border-left: none; border-top-left-radius: 16px; border-top-right-radius: 16px;
    box-shadow: 0 -10px 32px rgba(30, 33, 28, 0.14);
    transform: translateY(100%);
  }
  .monitor-drawer.visible { transform: translateY(0); }
}

/* Chips de "Estado" dentro del cajón: segmentado, ocupa varias líneas si hace falta. */
.estado-chip-grupo { display: flex; flex-wrap: wrap; gap: 6px; }
.estado-chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--tinta); cursor: pointer;
  font: inherit; font-size: 13px; height: 32px;
  transition: background .12s ease-out, border-color .12s ease-out;
}
.estado-chip:hover { background: var(--acento-suave); }
.estado-chip.activo {
  background: var(--acento); color: #fff; border-color: var(--acento);
}

/* Toolbar de resultados (encima de la lista): total a la izquierda,
   orden a la derecha. En móvil las dos filas apiladas. */
.monitor-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 24px 10px;
}
.monitor-toolbar-info { color: var(--texto-2, #585A54); font-size: 13px; }
.monitor-toolbar-orden {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--texto-2, #585A54); font-size: 13px;
}
.monitor-toolbar-orden select { height: 32px; min-width: 180px; }
@media (max-width: 719px) {
  .monitor-toolbar { flex-direction: column; align-items: stretch; gap: 6px; padding: 0 16px 10px; }
  .monitor-toolbar-orden select { width: 100%; }
}

/* ================================================================
   T387 iter.1 · Monitor móvil cabecera compacta (gmail-style)
   Todos los cambios dentro de @media (max-width: 719px)
   ================================================================ */

/* Utilidades show/hide por dispositivo.
   .hidden-mobile: visible en desktop (>= 720 px), oculto en móvil.
   .hidden-desktop: visible en móvil (< 720 px), oculto en desktop. */
@media (max-width: 719px) {
  .hidden-mobile { display: none !important; }
}
@media (min-width: 720px) {
  .hidden-desktop { display: none !important; }
}

/* Scroll horizontal sin scrollbar visible (reutilizable) */
.monitor-scroll-oculto {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 8px;
  padding-bottom: 2px;
}
.monitor-scroll-oculto::-webkit-scrollbar { display: none; }

/* Cabecera móvil: contenedor general */
.monitor-movil-cabecera {
  padding: 10px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Línea 1: título + iconos */
.monitor-movil-linea1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.monitor-movil-titulo {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--tinta);
  line-height: 1.2;
}
.monitor-movil-acciones {
  display: flex;
  gap: 4px;
  align-items: center;
}
.monitor-movil-btn-icono {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.monitor-movil-btn-icono:hover { background: var(--superficie-suave); }
/* Punto de estado del correo sobre el icono de sobre */
.monitor-movil-correo-punto {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acento);
  border: 2px solid var(--fondo, #fff);
}
.monitor-movil-correo-punto[data-estado="conectado"] { background: var(--acento); }
.monitor-movil-correo-punto[data-estado="atrasado"],
.monitor-movil-correo-punto[data-estado="sin_envio"] { background: var(--ambar); }
.monitor-movil-correo-punto[data-estado="desconectado"] { background: var(--teja); }

/* Línea 2: buscador */
.monitor-movil-linea2 { width: 100%; }
.monitor-movil-busqueda-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.monitor-movil-busqueda {
  width: 100%;
  height: 40px;
  padding: 0 44px 0 12px;
  border: 1px solid var(--borde);
  border-radius: 20px;
  background: var(--superficie);
  font-size: 14px;
  font-family: inherit;
  color: var(--tinta);
  outline: none;
  box-sizing: border-box;
}
.monitor-movil-busqueda:focus { border-color: var(--acento); }
.monitor-movil-btn-filtros {
  position: absolute;
  right: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.monitor-movil-btn-filtros:hover { background: var(--superficie-suave); }
/* Badge número de filtros activos */
.monitor-movil-filtros-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  background: var(--acento);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 3px;
  pointer-events: none;
}

/* Línea 3: chips desplegables (empresa, periodo, sentido, tipo) */
.monitor-movil-linea3 {
  padding: 0;
  align-items: center;
}
.monitor-chip-drop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.1s;
}
.monitor-chip-drop:hover,
.monitor-chip-drop.activo { background: var(--acento-suave, #e8f4f2); border-color: var(--acento); color: var(--acento); }
.monitor-chip-drop-flecha { font-size: 10px; color: var(--tinta-suave); }

/* Línea 4: chips de estado (los mismos que .chip-cabecera pero deslizables) */
.monitor-movil-linea4 {
  align-items: center;
  padding: 0;
}
.monitor-movil-linea4 .chip-cabecera {
  flex-shrink: 0;
  height: 32px;
  font-size: 13px;
}

/* Hoja inferior para chips desplegables */
#monitor-chip-drop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 420;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}
#monitor-chip-drop-overlay[hidden] { display: none; }
#monitor-chip-drop-overlay.visible { opacity: 1; pointer-events: auto; }

.monitor-chip-drop-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--superficie);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -10px 32px rgba(30, 33, 28, 0.14);
  z-index: 430;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  transform: translateY(100%);
  transition: transform 0.22s ease-out;
}
.monitor-chip-drop-sheet[hidden] { display: none; }
.monitor-chip-drop-sheet.visible { transform: translateY(0); }

.monitor-chip-drop-sheet-handle {
  width: 36px; height: 4px;
  background: var(--borde);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}
.monitor-chip-drop-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 8px;
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}
.monitor-chip-drop-sheet-titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--tinta);
}
.monitor-chip-drop-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
}
.monitor-chip-drop-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 20px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--tinta);
  cursor: pointer;
  text-align: left;
}
.monitor-chip-drop-opcion:hover { background: var(--superficie-suave); }
.monitor-chip-drop-opcion.activo { color: var(--acento); font-weight: 600; }
.monitor-chip-drop-opcion-badge {
  font-size: 13px;
  color: var(--tinta-suave);
  background: var(--fondo-suave);
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 600;
}
.monitor-chip-drop-sheet-fechas {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.monitor-chip-drop-sheet-fechas label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--tinta-suave);
  font-weight: 600;
}

/* Botón flotante de Equipo: oculto en móvil.
   También oculto para no-superadmin vía body.no-superadmin (JS) */
@media (max-width: 719px) {
  .solo-superadmin-desktop { display: none !important; }
}
body.no-superadmin .solo-superadmin-desktop { display: none !important; }

/* En móvil ocultar indicador-correo fijo (se integra en la cabecera móvil) */
@media (max-width: 719px) {
  #indicador-correo { display: none !important; }
  /* Asegurar padding-bottom en la lista para el botón flotante asistente */
  #monitor-lista { padding-bottom: calc(var(--bottom-nav-h, 56px) + 60px + env(safe-area-inset-bottom, 0px)); }
  /* Toolbar compacto en móvil */
  .monitor-toolbar { padding: 0 16px 8px; }
  .monitor-toolbar-info { font-size: 13px; }
  /* Ocultar filtros de escritorio en la sección .filtros-panel en móvil */
  .filtros-panel { display: none; }
  /* Las filas de chips de escritorio también se ocultan */
  .monitor-chips-cabecera { display: none !important; }
  /* El div del buscador y chips de filtros de escritorio se ocultan */
  .monitor-busqueda-escritorio { display: none !important; }
  #monitor-filtros-chips { display: none !important; }
}

/* ================================================================
   T387 iter.3 · Patrón móvil compacto en las demás pantallas con
   listados: Por revisar, Incidencias, Proveedores, Destinos,
   Garantías, Banco.
   Todos los cambios dentro de @media (max-width: 719px).
   ================================================================ */

/* Cabecera móvil genérica reutilizable en todas las vistas */
.vista-movil-cabecera {
  padding: 10px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Fila de chips deslizables horizontales (estado, motivos, etc.) */
.vista-movil-chips {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 8px;
  padding-bottom: 2px;
  align-items: center;
}
.vista-movil-chips::-webkit-scrollbar { display: none; }
.vista-movil-chips .chip-cabecera,
.vista-movil-chips .pastilla {
  flex-shrink: 0;
  height: 32px;
  font-size: 13px;
}

/* Buscador móvil genérico */
.vista-movil-busqueda-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.vista-movil-busqueda {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--borde);
  border-radius: 20px;
  background: var(--superficie);
  font-size: 14px;
  font-family: inherit;
  color: var(--tinta);
  outline: none;
  box-sizing: border-box;
}
.vista-movil-busqueda:focus { border-color: var(--acento); }

@media (max-width: 719px) {
  /* ── Incidencias ──────────────────────────────────────────────── */
  #vista-incidencias .listado-cabecera { display: none; }
  #vista-incidencias .filtros-panel { display: none !important; }
  /* Chips de estado de incidencias: deslizables en móvil */
  #incidencias-empresas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
  #incidencias-empresas::-webkit-scrollbar { display: none; }
  #incidencias-empresas .chip-cabecera,
  #incidencias-empresas .pastilla { flex-shrink: 0; }
  /* Padding inferior para FAB asistente + barra nav */
  #incidencias-lista { padding-bottom: calc(var(--bottom-nav-h, 56px) + 60px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ── Garantías ────────────────────────────────────────────────── */
  #vista-garantias .listado-cabecera { display: none; }
  #vista-garantias .filtros-panel { display: none !important; }
  #garantias-lista { padding-bottom: calc(var(--bottom-nav-h, 56px) + 60px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ── Banco ────────────────────────────────────────────────────── */
  #vista-banco .listado-cabecera { display: none; }
  #vista-banco .filtros-panel { display: none !important; }
  #banco-lista { padding-bottom: calc(var(--bottom-nav-h, 56px) + 60px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ── Proveedores ──────────────────────────────────────────────── */
  #vista-proveedores .listado-cabecera { display: none; }
  #vista-proveedores .filtros-panel { display: none !important; }
  /* Pastillas tipo Proveedores/Clientes: deslizables en móvil */
  #prov-tipo-pastillas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; display: flex; }
  #prov-tipo-pastillas::-webkit-scrollbar { display: none; }
  #prov-tipo-pastillas .pastilla { flex-shrink: 0; }
  #prov-lista { padding-bottom: calc(var(--bottom-nav-h, 56px) + 60px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ── Destinos ─────────────────────────────────────────────────── */
  #vista-destinos .listado-cabecera { display: none; }
  #vista-destinos .destinos-filtros { display: none !important; }
  #destinos-grid { padding-bottom: calc(var(--bottom-nav-h, 56px) + 60px + env(safe-area-inset-bottom, 0px)); }

  /* ── Por revisar (subpestaña Contabilidad) ────────────────────── */
  /* En móvil la cabecera de Por revisar se compacta */
  [data-sub="revisar"] .listado-cabecera .listado-acciones { flex-wrap: wrap; gap: 6px; }
  [data-sub="revisar"] .listado-acciones .btn-primario,
  [data-sub="revisar"] .listado-acciones .btn-secundario { font-size: 13px; padding: 0 10px; height: 34px; }
  /* Chips de motivo: deslizables */
  #chips-motivo-revisar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
  #chips-motivo-revisar::-webkit-scrollbar { display: none; }
  #chips-motivo-revisar .chip-cabecera { flex-shrink: 0; }
  /* Pastilla sin IVA: reduce tamaño */
  #pastilla-revisar-sin-iva { font-size: 13px; height: 32px; }
  /* Lista de bandeja: padding inferior */
  #lista-bandeja-contab { padding-bottom: calc(var(--bottom-nav-h, 56px) + 60px + env(safe-area-inset-bottom, 0px)); }
}