* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =============================================
   THEME VARIABLES
   ============================================= */
:root {
  --bg-body: #0a0a0a;
  --bg-sidebar: #111111;
  --bg-card: #141414;
  --bg-input: #1a1a1a;
  --bg-hover: #1a1a1a;
  --bg-deep: #0e0e0e;
  --border: #1e1e1e;
  --border-input: #2a2a2a;
  --text-primary: #e0e0e0;
  --text-secondary: #888;
  --text-tertiary: #666;
  --text-muted: #555;
  --accent: #10b981;
  --accent-bg: rgba(16, 185, 129, 0.1);
  --accent-border: rgba(16, 185, 129, 0.3);
  --blue: #3b82f6;
  --orange: #f59e0b;
  --purple: #a855f7;
  --red: #ef4444;
  --nav-active-bg: rgba(16, 185, 129, 0.1);
  --badge-bg: #1e1e1e;
  --modal-bg: #141414;
  --table-header-bg: #111;
  --table-stripe: rgba(255,255,255,0.02);
  --shadow: none;
  --pre-section-bg: #1a1a2e;
  --pre-section-border: #2a2a3e;

  /* Movimiento. Una sola fuente para curvas y duraciones.
     Duraciones según DESIGN.md:138 y design/interfaz/GUIA-VISUAL.md:89 (150 ms). */
  --ease-salida:   cubic-bezier(.23, 1, .32, 1);    /* entra o sale: arranca rápido */
  --ease-en-medio: cubic-bezier(.77, 0, .175, 1);   /* lo que ya está en pantalla y se mueve */
  --ease-cajon:    cubic-bezier(.32, .72, 0, 1);    /* cajones y hojas */
  --dur-pulsacion: 140ms;   /* feedback de pulsación */
  --dur-control:   150ms;   /* hover, color, estado de un control */
  --dur-ventana:   220ms;   /* ventanas, cajones, avisos */
}

[data-theme="light"] {
  --bg-body: #f5f7fa;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f0f2f5;
  --bg-hover: #f0f2f5;
  --bg-deep: #f8f9fb;
  --border: #e2e5e9;
  --border-input: #d1d5db;
  --text-primary: #1a1a2e;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-muted: #b0b5bf;
  --accent: #059669;
  --accent-bg: rgba(5, 150, 105, 0.08);
  --accent-border: rgba(5, 150, 105, 0.25);
  --blue: #2563eb;
  --orange: #d97706;
  --purple: #7c3aed;
  --red: #dc2626;
  --nav-active-bg: rgba(5, 150, 105, 0.08);
  --badge-bg: #e8ecf0;
  --modal-bg: #ffffff;
  --table-header-bg: #f0f2f5;
  --table-stripe: rgba(0,0,0,0.02);
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --pre-section-bg: #f0f4f8;
  --pre-section-border: #d1d9e0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
}

.app {
  display: flex;
  height: 100vh;
}

/* =============================================
   NAVIGATION SIDEBAR
   ============================================= */
.nav-sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0;
  box-shadow: var(--shadow);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--action), var(--action));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: var(--text-primary);
}

/* Con logotipo en la identidad, los recuadros de la marca lo enseñan entero sobre blanco, que es
   el fondo con el que suelen venir los logotipos. Manda sobre el color de cada tema. */
html body [data-marca="inicial"].marca-con-logo {
  background: #fff !important; padding: 4px; overflow: hidden; box-sizing: border-box; flex: none;
  border: 1px solid color-mix(in srgb, var(--fc-primary, var(--action)) 16%, #fff);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--fc-primary, var(--action)) 60%, transparent);
}
/* Con logotipo, la pieza crece para que se lea: el dibujo entero en 36 px se quedaba en un sello. */
html body .nav-logo.marca-con-logo { width: 48px; height: 48px; border-radius: 14px; }
/* Arriba del lateral, con logotipo, solo la imagen: más grande, sin recuadro y centrada, como
   parte de la barra; al pulsarla se vuelve al inicio. El nombre sigue ahí para los lectores de
   pantalla. Sin logotipo configurado, se ve el nombre como siempre. En el tema oscuro el
   logotipo se pinta en blanco, o uno oscuro no se vería. */
.nav-brand-inicio { display: flex; align-items: center; gap: inherit; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 14px; }
.nav-brand-inicio:focus-visible { outline: 2px solid var(--fc-primary, var(--accent)); outline-offset: 4px; }
.nav-brand-inicio:has(.marca-con-logo) { justify-content: center; }
.nav-brand-inicio .marca-con-logo img { transition: opacity var(--dur-control) var(--ease-salida); }
.nav-brand-inicio:hover .marca-con-logo img { opacity: .82; }
html body .nav-brand:has(.nav-logo.marca-con-logo) { padding: 10px 12px 8px; }
/* 56 px: con 84 el logotipo se comía el sitio de tres apartados del menú y estos quedaban
   escondidos bajo el pie sin que se notara. */
html body .nav-brand .nav-logo.marca-con-logo { width: auto; height: 56px; max-width: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent !important; }
html body .nav-brand .nav-logo.marca-con-logo img { width: auto; height: 100%; max-width: 100%; }
html body .nav-brand:has(.nav-logo.marca-con-logo) .nav-brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-theme="dark"] body .nav-brand .nav-logo.marca-con-logo img { filter: brightness(0) invert(1); }
html body .gm-mov-head-logo.marca-con-logo, html body .employee-brand > .marca-con-logo { width: 42px; height: 42px; border-radius: 12px; }
html body .rh-kiosco-logo.marca-con-logo { width: 88px; height: 88px; padding: 9px; border-radius: 22px; }

/* Usuarios: las acciones en una fila; en el móvil, cada usuario es una tarjeta con sus datos
   rotulados y las acciones debajo, en vez de una tabla que se corta por la derecha. */
.usuario-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 190px; }
/* El correo se parte por la arroba (admin.js pone un <wbr> después), no a mitad de palabra. */
#tabla-usuarios td[data-label="Correo"] { overflow-wrap: break-word; min-width: 130px; }
/* Tarjetas también en tableta: a 1024 px la tabla escondía 286 px y con ellos los botones. */
@media (max-width: 1150px) {
  #tabla-usuarios thead { display: none; }
  #tabla-usuarios, #tabla-usuarios tbody, #tabla-usuarios tr, #tabla-usuarios td { display: block; width: 100%; box-sizing: border-box; }
  #tabla-usuarios tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  #tabla-usuarios td { padding: 3px 0; border: 0; overflow-wrap: anywhere; }
  #tabla-usuarios td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 112px; color: var(--text-secondary); font-size: 12px; }
  #tabla-usuarios td.usuario-nombre { font-weight: 600; font-size: 15px; padding-bottom: 6px; }
  #tabla-usuarios td.usuario-nombre::before { display: none; }
  .usuario-acciones { min-width: 0; margin-top: 8px; }
}

/* Usuarios: su departamento y su puesto bajo el nombre, y el filtro por departamento. */
.usuario-puesto { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.usuarios-filtro { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); }
.usuarios-filtro select { flex: 0 1 320px; min-width: 0; max-width: 100%; height: 40px; padding: 0 32px 0 12px; border: 1px solid var(--border-input); border-radius: 12px; background-color: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 14px; }
@media (max-width: 800px) { .usuarios-filtro select { height: 44px; } }

/* Organización (Administración): cada departamento con sus puestos, y dentro, los que cuelgan de
   él, con una línea a la izquierda que marca de quién dependen. */
.org-botones { float: right; display: inline-flex; gap: 8px; }
.org-ayuda { clear: both; margin: 4px 0 14px; font-size: 13px; color: var(--text-secondary); }
.org-vacio { padding: 12px 0; font-size: 13px; color: var(--text-secondary); }
.org-departamento { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }
.org-departamento .org-departamento { margin-left: 16px; border-left: 3px solid color-mix(in srgb, var(--fc-primary, var(--action)) 28%, transparent); }
.org-departamento-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.org-responsable { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.org-puesto { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 0 0 12px; border-top: 1px solid var(--border); }
.org-puesto-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.org-puesto-nombre { font-weight: 600; }
.org-puesto-permisos, .org-personas { font-size: 12.5px; }
.org-tenue { color: var(--text-secondary); }
.org-acciones { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.org-de-baja > .org-departamento-cab, .org-puesto.org-de-baja { opacity: .6; }
.pue-modulos { margin: 0 0 12px; padding: 0; border: 0; }
.pue-modulos legend { margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.pue-modulos:disabled { opacity: .55; }
.pue-bloques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 6px 0 0 24px; }
@media (max-width: 800px) {
  .org-botones { float: none; display: flex; margin-top: 10px; }
  .org-puesto { flex-direction: column; align-items: flex-start; }
  .org-acciones { justify-content: flex-start; }
  .org-departamento .org-departamento { margin-left: 8px; }
}
[data-marca="inicial"].marca-con-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Almacén: existencias, movimientos, fichas de producto y de cliente, y lo que el trabajador se
   lleva. Los colores salen del tema, así que valen también en oscuro. */
.alm-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }
.alm-filtros > div { display: grid; gap: 4px; flex: 1 1 210px; min-width: 0; }
.alm-filtros > .alm-filtro-buscar { flex: 2 1 280px; }
.alm-filtros > div:has(> #doc-f-orden) { flex: 0 1 220px; }
.alm-filtros label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.alm-filtros :is(select, input[type="search"], input[type="date"]) { width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--border-input); border-radius: 12px; background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: 14px; min-width: 0; text-overflow: ellipsis; }
/* «Solo bajo mínimo»: un interruptor de la misma altura que los campos, no una casilla suelta. */
.alm-toggle { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--border-input); border-radius: 12px; background: var(--bg-input); color: var(--text-secondary); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background var(--dur-control) var(--ease-salida), color var(--dur-control) var(--ease-salida); }
.alm-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.alm-toggle:has(input:checked) { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); color: var(--warning); }
.alm-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.alm-toggle:has(input:disabled) { opacity: .55; cursor: default; }
/* Dentro de un formulario la casilla es una opción, no un filtro: su texto puede ocupar varias líneas
   (en una sola, «sustituir la prima» se salía de la ventana y en el móvil no se podía leer) y, marcada,
   va en el color de acción, no en el ámbar que en los filtros avisa de que hay uno puesto. */
.modal-form .alm-toggle { height: auto; min-height: 40px; padding: 9px 14px; white-space: normal; justify-content: flex-start; align-items: flex-start; text-align: left; line-height: 1.35; }
.modal-form .alm-toggle input { flex: none; margin-top: 1px; }
.modal-form .alm-toggle:has(input:checked) { background: var(--accent-bg); border-color: var(--accent-border); color: var(--text-primary); }
.form-grid > .form-hint:empty { display: none; }
/* La tira de cifras: una sola pieza, dividida. Las que se pueden pulsar filtran o despliegan. */
.alm-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0 0 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); overflow: hidden; }
.alm-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 12px 16px; border: 0; border-left: 1px solid var(--border); background: none; color: inherit; font: inherit; text-align: left; }
.alm-stat:first-child { border-left: 0; }
.alm-stat-val { font-size: 20px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alm-stat-lbl { font-size: 12px; color: var(--text-secondary); }
.alm-stat-sub { font-size: 11.5px; color: var(--text-secondary); }
.alm-stat-aviso .alm-stat-val { color: var(--warning); }
button.alm-stat { cursor: pointer; transition: background var(--dur-control) var(--ease-salida); }
button.alm-stat:hover { background: var(--bg-hover); }
button.alm-stat::after { content: 'Ver'; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--accent); }
button.alm-stat.activo { background: var(--accent-bg); box-shadow: inset 0 -2px 0 var(--accent); }
button.alm-stat.activo::after { content: 'Quitar el filtro'; }
button.alm-stat[data-almstat="caducidades"].activo::after { content: 'Ocultar'; }
button.alm-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.modal .alm-stats { margin-top: 4px; }
/* Los lotes que caducan, desplegados bajo las cifras. */
.alm-avisos { margin: 0 0 12px; }
.alm-avisos-lista { margin: 0; padding: 6px 0; list-style: none; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }
.alm-avisos-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 16px; font-size: 13px; border-top: 1px solid var(--border); }
.alm-avisos-lista li:first-child { border-top: 0; }
.alm-avisos-lista li > span:nth-of-type(2) { color: var(--text-secondary); }
.alm-aviso-punto { width: 8px; height: 8px; border-radius: 50%; align-self: center; background: currentColor; }
.alm-aviso-fecha { margin-left: auto; font-weight: 600; }
.alm-aviso-ambar { color: var(--warning); }
.alm-aviso-rojo { color: var(--danger); }
.alm-avisos-lista li b { color: var(--text-primary); }
.ctz-pill-azul { background: var(--info-bg); color: var(--info); }
.alm-estados { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.alm-estados:empty { display: none; }
.alm-col-foto { width: 56px; }
#tabla-alm-movimientos td:nth-child(4) { min-width: 220px; }
#view-almacen td.num, .alm-ficha td.num { white-space: nowrap; }
#tabla-alm-existencias td:nth-child(2) { min-width: 220px; }
.alm-fila:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.alm-mini { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; display: block; flex: none; }
.alm-mini-vacia { background: var(--bg-hover); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.alm-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.alm-tenue { color: var(--text-secondary); font-size: 13px; }
.alm-chip { display: inline-block; margin: 1px 0; padding: 3px 9px; border-radius: 9px; background: var(--bg-hover); font-size: 12px; white-space: nowrap; }
.alm-etiqueta { display: inline-block; padding: 2px 7px; border-radius: 7px; border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.alm-fila { cursor: pointer; }
.alm-anulada > td, .alm-salida.alm-anulada { opacity: .55; }
.alm-falta { color: var(--danger); font-weight: 700; }
#view-almacen td.num, #view-almacen th.num, .alm-ficha td.num, .alm-ficha th.num { text-align: right; font-variant-numeric: tabular-nums; }
.alm-almacenes-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.alm-almacenes-cab .btn { flex: none; white-space: nowrap; }
.alm-almacenes-cab .form-hint { margin: 0; }
.alm-almacenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.alm-almacen { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }
.alm-almacen-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.alm-almacen-cifras { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-secondary); }
.alm-almacen-cifras b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.alm-almacen-personas { font-size: 13px; line-height: 1.7; }
.alm-de-baja { opacity: .6; }
.alm-personas { margin: 4px 0 12px; padding: 0; border: 0; }
.alm-personas legend { margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.alm-personas-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; max-height: 220px; overflow-y: auto; }
/* La ventana del movimiento: el tipo como botones, el escáner y las líneas. */
.modal-content.alm-op-modal { max-width: 760px; }
.alm-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.alm-tipo { position: relative; }
.alm-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.alm-tipo span { display: inline-block; padding: 8px 12px; border: 1px solid var(--border-input); border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-secondary); background: var(--bg-card); transition: background var(--dur-control) var(--ease-salida), color var(--dur-control) var(--ease-salida); }
.alm-tipo input:checked + span { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.alm-tipo input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.alm-escaner { display: grid; gap: 6px; margin: 4px 0 10px; }
.alm-escaner > label { font-size: 13px; font-weight: 600; }
.alm-escaner-fila { display: flex; gap: 8px; }
.alm-escaner-fila input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border-input); border-radius: 12px; background: var(--bg-input); color: var(--text-primary); font: inherit; }
.alm-video { width: 100%; max-height: 260px; border-radius: 14px; background: #000; object-fit: cover; }
.alm-lineas { display: grid; gap: 8px; margin: 0 0 12px; }
.alm-lineas-vacio { margin: 0; padding: 14px; border: 1px dashed var(--border-input); border-radius: 12px; text-align: center; }
.alm-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); }
.alm-linea-producto { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; }
.alm-linea-producto > div { min-width: 0; }
.alm-linea-campo { display: grid; gap: 3px; font-size: 12px; color: var(--text-secondary); }
.alm-linea-campo :is(input, select) { width: 120px; padding: 7px 9px; border: 1px solid var(--border-input); border-radius: 10px; background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: 14px; }
.alm-linea-campo select { width: 190px; }
.alm-linea-quitar { align-self: center; font-size: 22px; line-height: 1; }
.alm-firma { display: grid; gap: 6px; margin: 0 0 12px; }
.alm-firma-cab { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; }
.alm-firma-cab .btn-link { margin: 0; }
/* El papel de la firma es siempre blanco, también en oscuro: es lo que sale en el documento. */
.alm-firma-lienzo { width: 100%; aspect-ratio: 600 / 180; border: 1px dashed var(--border-input); border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
/* Fichas */
.modal-content.alm-ficha { max-width: 880px; }
.alm-ficha-cab { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.alm-ficha-foto { width: 120px; height: 120px; border-radius: 16px; object-fit: cover; flex: none; }
.alm-ficha-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 16px; flex: 1; }
.alm-ficha-datos span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); }
.alm-ficha-tit { margin: 18px 0 8px; font-size: 14px; }
.alm-tabla-compacta td, .alm-tabla-compacta th { padding: 8px 10px; }
.alm-estanteria { width: 110px; padding: 5px 8px; border: 1px solid var(--border-input); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: 13px; }
.alm-salida { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; }
.alm-salida-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.alm-grafica { margin: 4px 0 8px; }
.alm-grafica svg { width: 100%; height: auto; display: block; }
.alm-grafica text { font-size: 11px; fill: var(--text-secondary); }
.alm-g-eje { stroke: var(--border); }
.alm-g-entra { fill: var(--success); }
.alm-g-sale { fill: var(--accent); }
.alm-g-vuelve { fill: var(--warning); }
.alm-g-linea { fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-linejoin: round; }
.alm-grafica figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-secondary); }
.alm-grafica figcaption i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.alm-grafica figcaption i.alm-g-entra { background: var(--success); }
.alm-grafica figcaption i.alm-g-sale { background: var(--accent); }
.alm-grafica figcaption i.alm-g-vuelve { background: var(--warning); }
.alm-grafica figcaption i.alm-g-linea-ley { height: 2px; background: var(--text-primary); vertical-align: 3px; }
/* Familias del catálogo y foto del producto */
.familias-lista { display: grid; gap: 6px; margin: 10px 0; max-height: 320px; overflow-y: auto; }
.familia-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; }
.familias-nueva { display: flex; gap: 8px; }
.familias-nueva input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border-input); border-radius: 10px; background: var(--bg-input); color: var(--text-primary); font: inherit; }
.producto-foto-fila { display: flex; align-items: center; gap: 14px; }
#producto-foto-vista { width: 88px; height: 88px; border-radius: 14px; object-fit: cover; }
.product-fields label > .btn-link { margin: 0; padding: 0 0 0 6px; font-size: 12px; color: var(--accent); }
.producto-foto-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.producto-foto-acciones input[type="file"] { max-width: 100%; min-width: 0; }
/* Las fotos que propone internet: la del producto exacto, marcada; las parecidas, después. */
.fotos-internet { margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-deep, var(--bg-card)); }
.fotos-internet-ayuda { margin: 0 0 10px; font-size: 12.5px; color: var(--text-secondary); }
.fotos-internet-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.foto-candidata { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 11.5px; text-align: left; cursor: pointer; transition: border-color var(--dur-control) var(--ease-salida), box-shadow var(--dur-control) var(--ease-salida); }
.foto-candidata img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #fff; }
.foto-candidata small { color: var(--text-secondary); }
.foto-candidata.exacta { border-color: var(--accent); }
.foto-candidata:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.foto-candidata:disabled { opacity: .6; cursor: progress; }
/* Sanidad, un apartado con sus pantallas. */
.doc-antetitulo { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
/* Documentos: el árbol de áreas y carpetas a la izquierda y los documentos a la derecha. */
.doc-disposicion { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.doc-principal { position: relative; min-width: 0; }
#tabla-documentos td:nth-child(2) { min-width: 160px; }
/* Un título largo se parte, por palabras: si no, empujaba las acciones fuera de la tabla. */
:is(#tabla-documentos, #tabla-doc-historico, #tabla-doc-clientes) td.alm-principal strong { white-space: normal; overflow-wrap: break-word; }
#tabla-documentos td.alm-principal { min-width: 200px; }
/* El nombre de la fila es un botón (para abrirla con el teclado) que se lee como el texto de la fila. */
.btn-link:is(.doc-abrir, .seg-abrir) { margin: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
:is(.doc-abrir, .seg-abrir):hover strong, .seg-abrir:hover { text-decoration: underline; }
.doc-aviso-campo { display: block; margin-top: 2px; font-size: 12px; color: var(--danger); }
.alm-filtros input[aria-invalid="true"] { border-color: var(--danger); }
.doc-mas { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0; font-size: 13px; color: var(--text-secondary); }
/* Entre 800 y 1280 px, con el árbol al lado, la tabla no cabía y las acciones quedaban detrás de
   un desplazamiento: ahí también va en tarjetas, como en el móvil. Siniestros y Recibos, igual: a
   1024 px partían los números de póliza y dejaban las acciones de los recibos fuera. */
@media (max-width: 1279px) {
  :is(#tabla-documentos, #tabla-seg-polizas, #tabla-seg-siniestros, #tabla-seg-recibos) thead { display: none; }
  :is(#tabla-documentos, #tabla-seg-polizas, #tabla-seg-siniestros, #tabla-seg-recibos), :is(#tabla-documentos, #tabla-seg-polizas, #tabla-seg-siniestros, #tabla-seg-recibos) :is(tbody, tr, td) { display: block; width: 100%; box-sizing: border-box; }
  :is(#tabla-documentos, #tabla-seg-polizas, #tabla-seg-siniestros, #tabla-seg-recibos) tr { position: relative; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  :is(#view-sanidad #tabla-documentos, #view-seg-polizas #tabla-seg-polizas, #view-seg-siniestros #tabla-seg-siniestros, #view-seg-recibos #tabla-seg-recibos) td { padding: 3px 0; border: 0 !important; min-width: 0 !important; text-align: left; white-space: normal; overflow-wrap: break-word; }
  /* El rótulo a la izquierda y el dato a su derecha: lo que pasa de una línea sigue tras el rótulo,
     no vuelve debajo de él («Sociedad ARU» con «ALIANZ» debajo de «Sociedad»). */
  :is(#view-sanidad #tabla-documentos, #view-seg-polizas #tabla-seg-polizas, #view-seg-siniestros #tabla-seg-siniestros, #view-seg-recibos #tabla-seg-recibos) td[data-label] { position: relative; padding-left: 104px; }
  :is(#tabla-documentos, #tabla-seg-polizas, #tabla-seg-siniestros, #tabla-seg-recibos) td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 3px; width: 96px; color: var(--text-secondary); font-size: 12px; line-height: 21px; }
  :is(#tabla-documentos, #tabla-seg-polizas, #tabla-seg-siniestros, #tabla-seg-recibos) td.alm-principal { padding-bottom: 6px; font-size: 15px; }
  :is(#tabla-documentos, #tabla-seg-polizas) .doc-estado { display: inline-block; margin: 0 0 0 6px; }
  #tabla-documentos .action-btns { justify-content: flex-start; flex-wrap: wrap; padding-top: 4px; }
  :is(#tabla-seg-polizas, #tabla-seg-siniestros, #tabla-seg-recibos) td.num .alm-sub { display: inline; margin-left: 6px; }
  :is(#tabla-seg-polizas, #tabla-seg-siniestros, #tabla-seg-recibos) td:empty { display: none; }
  /* La barra del peso no cabe en la tabla de coste sin desplazarla: queda el porcentaje. */
  .seg-coste-tabla .seg-peso { display: none; }
}
@media (min-width: 1280px) { #tabla-documentos td:nth-child(3), #tabla-documentos td:nth-child(4) { white-space: nowrap; } }
.doc-fila { cursor: pointer; }
.doc-renovar { padding: 4px 10px; font-size: 12.5px; }
/* Lo que no avisa de nada (sin caducidad, renovado, anulado), en neutro: la «gris» de la casa es azul. */
.ctz-pill.ctz-pill-neutra { background: var(--bg-hover); color: var(--text-secondary); }
.doc-estado { margin-top: 4px; }
@media (max-width: 800px) { .doc-estado { display: inline-block; margin: 0 0 0 6px; } }
.doc-arbol { position: sticky; top: 12px; display: grid; gap: 2px; padding: 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); max-height: calc(100vh - 140px); overflow-y: auto; }
.doc-arbol-area { display: grid; gap: 2px; margin-top: 6px; }
.doc-arbol-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px; background: none; color: var(--text-primary); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.doc-arbol-nombre { min-width: 0; }
.doc-arbol-cuenta { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.doc-marca { min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.doc-marca-roja { background: var(--danger-bg); color: var(--danger); }
.doc-marca-ambar { background: var(--warning-bg); color: var(--warning); }
.doc-arbol-item:hover { background: var(--bg-hover); }
.doc-arbol-item.activo { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.doc-arbol-area-tit { font-weight: 600; }
.doc-arbol-carpeta { padding-left: 22px; font-size: 13px; color: var(--text-primary); }
/* Las vacías, en el gris de los textos secundarios, que se lee bien; con transparencia no llegaba. */
.doc-arbol-carpeta.vacia:not(.activo) { color: var(--text-secondary); }
.doc-arbol-todo { font-weight: 600; }
.doc-arbol-movil { display: none !important; }
#view-sanidad .doc-filtros-boton { display: none; }
/* Al arrastrar archivos sobre la lista: se cargan en la carpeta que se está viendo. */
.doc-soltar-lista { position: absolute; inset: 0; z-index: 5; display: none; place-items: center; border: 2px dashed var(--accent); border-radius: 16px; background: color-mix(in srgb, var(--bg-card) 88%, transparent); pointer-events: none; }
.doc-soltar-lista.visible { display: grid; }
.doc-soltar-lista span { padding: 10px 16px; border-radius: 12px; background: var(--accent-bg); color: var(--accent); font-weight: 600; }
/* Cargar documentos: los datos a la izquierda y los archivos a la derecha. */
.doc-cargar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.doc-cargar-datos, .doc-cargar-archivos { padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }
.doc-soltar { display: grid; place-items: center; gap: 10px; margin: 0 0 10px; padding: 22px 18px; border: 2px dashed var(--border-input); border-radius: 14px; text-align: center; font-size: 13px; color: var(--text-secondary); transition: border-color var(--dur-control) var(--ease-salida), background var(--dur-control) var(--ease-salida); }
.doc-soltar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.doc-soltar b { color: var(--accent); }
.doc-soltar.encima, .doc-soltar:focus-within { border-color: var(--accent); background: var(--accent-bg); }
.doc-soltar-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.doc-soltar-botones label { position: relative; cursor: pointer; }
/* La cámara, donde la hay: en un ordenador con ratón, «Elegir archivos» basta. */
@media (hover: hover) and (pointer: fine) { .doc-foto { display: none; } }
.doc-lista-archivos { display: grid; gap: 6px; margin-bottom: 10px; }
.doc-archivo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 8px 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; }
/* El nombre se corta con «…», pero el tamaño queda siempre a la vista. */
.doc-archivo-nombre { display: flex; align-items: baseline; gap: 4px; min-width: 0; font-size: 13px; }
.doc-archivo-nombre > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.doc-archivo-nombre small { flex: none; }
.doc-archivo-nombre small { color: var(--text-secondary); }
.doc-archivo :is(input, select) { width: 100%; padding: 6px 9px; border: 1px solid var(--border-input); border-radius: 9px; background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: 13px; }
.doc-archivo-renueva { grid-column: 1 / 3; }
.doc-yatiene { margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-hover); font-size: 13px; }
.doc-yatiene h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.doc-yatiene ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.doc-yatiene li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* Clientes: el semáforo de cada expediente. */
.doc-semaforo { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.doc-sem { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.doc-sem-verde { background: var(--success-bg); color: var(--success); }
.doc-sem-ambar { background: var(--warning-bg); color: var(--warning); }
.doc-sem-roja { background: var(--danger-bg); color: var(--danger); }
.doc-volver { margin-bottom: 6px; padding: 0; }
.doc-exp-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.doc-exp-area { padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); }
.doc-exp-area h3 { margin: 0 0 8px; font-size: 15px; }
.doc-exp-area ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.doc-exp-carpeta { display: grid; gap: 4px; padding: 8px 10px; border-left: 3px solid var(--border); border-radius: 8px; background: var(--bg-hover); }
.doc-exp-carpeta.doc-exp-caducado, .doc-exp-carpeta.doc-exp-falta { border-left-color: var(--danger); }
.doc-exp-carpeta.doc-exp-por_renovar { border-left-color: var(--warning); }
.doc-exp-carpeta.doc-exp-vigente, .doc-exp-carpeta.doc-exp-sin_caducidad { border-left-color: var(--success); }
.doc-exp-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 13.5px; }
.doc-exp-oblig { margin-left: 4px; font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.doc-exp-detalle { font-size: 13px; }
.doc-exp-detalle .btn-link, .doc-yatiene .btn-link { margin: 0; padding: 0; color: var(--accent); text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.doc-exp-avisa { color: var(--danger); font-weight: 600; }
/* El acceso del cliente a su portal y sus avisos, en su expediente. */
.doc-acceso { margin-top: 14px; display: grid; gap: 8px; }
.doc-acceso-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.doc-acceso-cab h3 { margin: 0; font-size: 15px; }
.doc-acceso > p { margin: 0; font-size: 13px; }
.doc-acceso-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.doc-acceso-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border-radius: 10px; background: var(--bg-hover); }
.doc-acceso-lista li > span:first-child { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.doc-acceso-acc { display: inline-flex; gap: 12px; }
.doc-acceso-acc .btn-link { margin: 0; padding: 0; color: var(--accent); }
.doc-exp-avisa .alm-tenue { font-weight: 400; }
.btn-link.doc-exp-zip { justify-self: start; margin: 4px 0 0; padding: 0; color: var(--accent); }
.doc-exp-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.doc-ac-lista { display: grid; gap: 8px; margin: 8px 0; }
.doc-ac-area { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.doc-ac-area span { display: grid; gap: 2px; }
.doc-ac-area input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
/* Ficha del cliente en Terceros. */
.tf-doc { margin-bottom: 14px; }
/* Sedes y contactos de la ficha del tercero, uno al lado del otro. */
.tf-sedes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-bottom: 14px; }
.tf-sedes-card h4 { margin: 0; font-size: 14px; color: var(--text-secondary); }
.tf-lista { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.tf-lista li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.tf-lista li:first-child { border-top: 0; }
.tf-lista small { display: block; margin-top: 2px; color: var(--text-secondary); }
.tf-lista a { color: var(--accent); text-decoration: none; }
.tf-lista-acc { display: inline-flex; gap: 10px; flex: none; }
.tf-lista-acc .btn-link { padding: 0; }
.tf-co-recibe { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.tf-co-recibe legend { width: 100%; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.tf-doc-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tf-doc-cab h4 { margin: 0; font-size: 14px; color: var(--text-primary); }
.tf-doc p { margin: 6px 0; font-size: 13.5px; }
.tf-doc-areas { display: flex; flex-wrap: wrap; gap: 6px; }
/* El visor: el documento a la derecha, sobre la pantalla en la que se estaba y sobre la barra del
   móvil. Las ventanas que se abren desde él (renovar, anular) van encima. */
.doc-visor { position: fixed; inset: 0; z-index: 1150; }
body.doc-visor-abierto .modal { z-index: 1200; }
:is(#view-san-clientes, #doc-visor, #seg-visor) a.btn { text-decoration: none; }
.doc-visor-cab .modal-close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--text-secondary); font-size: 26px; line-height: 1; cursor: pointer; }
.doc-visor-cab .modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.doc-visor-fondo { position: absolute; inset: 0; background: rgb(15 23 42 / .35); }
.doc-visor-panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 12px; width: min(760px, 100%); padding: 18px 20px; overflow-y: auto; background: var(--bg-card); box-shadow: -12px 0 40px rgb(15 23 42 / .18); }
.doc-visor-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.doc-visor-cab h3 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.doc-visor-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); }
.doc-visor-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.doc-visor-archivo iframe { width: 100%; height: 62vh; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.doc-visor-archivo img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 12px; }
/* Las páginas de un PDF, pintadas con PDF.js, una debajo de otra. */
.visor-pdf { display: grid; gap: 10px; }
.visor-pdf canvas { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.doc-visor-sin { padding: 24px; border: 1px dashed var(--border-input); border-radius: 12px; text-align: center; color: var(--text-secondary); }
.doc-visor-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; margin: 0; }
.doc-visor-datos dt { font-size: 12px; color: var(--text-secondary); }
.doc-visor-datos dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
#doc-v-historia h4 { margin: 4px 0 6px; font-size: 13px; }
#doc-v-historia .seg-item { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
#doc-v-historia .seg-item.activo { outline: 2px solid var(--accent); outline-offset: -2px; }
body.doc-visor-abierto { overflow: hidden; }
/* Seguros: reutiliza la tira de cifras, los filtros, la tabla en tarjetas y el visor de la documentación. */
#view-seg-polizas .seg-filtros-boton { display: none; }
/* Los filtros de pólizas caben en una fila; los de siniestros y vencimientos, pocos, no ocupan todo el ancho. */
#seg-filtros > div { flex: 1 1 150px; }
#seg-filtros > .alm-filtro-buscar { flex: 2 1 240px; }
#view-seg-siniestros .alm-filtros > div, #view-seg-vencimientos .alm-filtros > div { flex: 0 1 300px; }
/* La cifra del coste no se corta cuando hay cinco: es un importe, y con «…» se leía otra cifra
   («109.476,1…» a 1024 px). Su columna mide lo que necesite; en el móvil va sola, a todo el ancho. */
#seg-cifras .alm-stat-val { font-size: clamp(15px, 1.6vw, 20px); overflow: visible; text-overflow: clip; }
@media (min-width: 801px) { #seg-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(max-content, 1.2fr); } }
@media (max-width: 800px) { #seg-cifras .alm-stat:last-child { grid-column: 1 / -1; } }
/* Un número de póliza no se parte por la mitad («1267930 / 2»): solo si no cabe ni en su línea. */
:is(#tabla-seg-polizas, #tabla-seg-siniestros, #tabla-seg-recibos) td.alm-principal strong { white-space: normal; overflow-wrap: break-word; }
#tabla-seg-polizas td:nth-child(4) { white-space: nowrap; }
.seg-matricula { display: inline-block; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-hover); font: 600 12px/1.6 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; }
.seg-subida { color: var(--success); font-size: 12px; }
.seg-subida.sube { color: var(--warning); }
.seg-revisar { color: var(--warning) !important; }
.seg-ver { white-space: nowrap; }
.seg-iban { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; white-space: nowrap; }
/* Albaranes de compra: la tabla en tarjetas del almacén y, en el alta, cada línea como una rejilla
   de campos rotulados que en el móvil se parte en dos columnas. */
:is(#tabla-albaranes-compra, #tabla-alm-clientes) td.alm-principal strong { white-space: normal; overflow-wrap: anywhere; }
#tabla-albaranes-compra td:first-child { width: 36px; }
#tabla-albaranes-compra tr[data-alc] { cursor: pointer; }
.alc-elegir { display: inline-grid; place-items: center; width: 36px; height: 36px; cursor: pointer; }
.alc-elegir input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.alc-lineas-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 6px; }
.alc-lineas-cab h4 { margin: 0; font-size: 14px; }
.alc-lineas { display: flex; flex-direction: column; gap: 8px; }
.alc-linea { display: grid; grid-template-columns: minmax(0, 1fr) 84px 72px 96px 64px 96px 36px; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
.alc-linea label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; color: var(--text-secondary); }
/* El mismo acabado que las líneas del albarán de venta (.ea-linea). */
.alc-linea input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-family: inherit; font-size: 13.5px; outline: none; transition: border-color .2s; }
[data-theme="light"] .alc-linea input { background: var(--bg-input); border-color: var(--border-input); }
.alc-linea input:focus { border-color: var(--accent); }
.alc-linea label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alc-linea label > span .alc-catalogo { color: var(--success); font-weight: 600; }
.alc-l-importe { padding-bottom: 10px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.alc-linea .btn-icon { width: 36px; height: 36px; font-size: 20px; }
.alc-l-lote { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.alc-l-lote label { flex: 0 1 180px; }
.alc-l-lote small { flex: 1 1 200px; padding-bottom: 10px; }
.alc-totales { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 20px; margin: 10px 0; font-size: 14px; color: var(--text-secondary); }
.alc-totales b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.alc-ver-lineas td .alm-sub { display: block; }
.seg-tel { white-space: nowrap; color: var(--text-secondary); }
.seg-aviso-revisar { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--warning-bg); color: var(--warning); font-size: 13.5px; }
.seg-ficha-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; align-items: start; }
.seg-bloque { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); min-width: 0; }
.seg-bloque h3 { margin: 0; font-size: 15px; }
.seg-bloque-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.seg-mini { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.seg-mini td, .seg-mini th { padding: 6px 4px; border-bottom: 1px solid var(--border); text-align: left; }
.seg-mini th { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.seg-mini .num { text-align: right; }
.seg-mini tr:last-child td { border-bottom: 0; }
.seg-detalle summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary); }
.seg-detalle ul, .seg-docs { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.seg-docs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; text-align: left; }
.seg-docs .btn-link { margin: 0; color: var(--accent); text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.seg-mini td { vertical-align: middle; }
a.seg-tel { color: var(--accent); text-decoration: none; }
/* Anular y dar de baja, en segundo plano: gris y sin subrayar, también dentro de las listas. */
.btn-link.seg-anular { margin-left: auto; color: var(--text-secondary); text-decoration: none; }
.seg-cfg { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start; }
.seg-cfg-acciones { display: inline-flex; gap: 10px; margin-left: auto; }
.seg-grupos { display: grid; gap: 18px; }
.seg-grupo h3 { margin: 0 0 8px; font-size: 15px; }
.seg-grupo ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.seg-v-fila { display: grid; grid-template-columns: minmax(0, 1fr) 130px 110px auto; align-items: center; gap: 10px 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); }
.seg-v-dato { display: grid; gap: 2px; min-width: 0; }
.seg-v-dato .seg-matricula { justify-self: start; }
.seg-v-fecha { display: grid; font-variant-numeric: tabular-nums; }
.seg-v-fila .num { text-align: right; font-variant-numeric: tabular-nums; }
.seg-v-acciones { display: flex; gap: 6px; justify-content: flex-end; }
/* Recibos y coste: dos pestañas; en el coste, el año, cómo verlo y una sola tabla. */
/* Las pestañas y los botones de «ver por», con el aspecto de los de Contabilidad y Presupuestos,
   pero con clases propias: aquellas pantallas enganchan sus manejadores a las suyas en toda la página. */
.seg-pestanas { display: flex; gap: 4px; margin: 4px 0 16px; border-bottom: 1px solid var(--border); }
.seg-pestana { padding: 10px 20px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-secondary); font: inherit; font-size: 14px; cursor: pointer; }
.seg-pestana:hover { color: var(--text-primary); }
.seg-pestana.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.seg-coste-por { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-pt-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); font-size: 11.5px; font-weight: 700; }
.seg-pt-n:empty { display: none; }
.seg-coste-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.seg-coste-anio { display: grid; gap: 4px; }
.seg-coste-anio label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.seg-coste-tabla td.num, .seg-coste-tabla th.num { white-space: nowrap; }
.seg-coste-tabla tfoot td { border-top: 2px solid var(--border); background: var(--table-header-bg); }
.seg-peso { display: inline-block; width: 90px; height: 8px; margin-right: 8px; vertical-align: middle; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.seg-peso-barra { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.seg-peso-pct { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 800px) {
  /* En tarjetas, el total también: una tarjeta más, marcada. */
  .seg-coste-tabla tfoot, .seg-coste-tabla tfoot tr, .seg-coste-tabla tfoot td { display: block; width: 100%; box-sizing: border-box; }
  .seg-coste-tabla tfoot tr { padding: 12px 14px; }
  .seg-coste-tabla td[data-label]::before { min-width: 110px; }
  .seg-coste-cab { align-items: stretch; flex-direction: column; }
}
/* El año del coste, con el aspecto de los demás desplegables (iba sin estilo, con el texto pegado al borde). */
.seg-coste-anio select { height: 44px; min-width: 96px; padding: 0 32px 0 12px; border: 1px solid var(--border-input); border-radius: 12px; background-color: var(--bg-input); color: var(--text-primary); font: inherit; font-size: 14px; font-weight: 600; }
/* Las tablas de coste: el nombre arriba y sus pólizas debajo; las cifras y el porcentaje no se parten. */
.seg-mini .num { white-space: nowrap; }
.seg-mini td small { display: block; }
.seg-coste { display: grid; gap: 14px; }
.seg-a-lista { max-height: 50vh; overflow-y: auto; }
/* Ventanas de Sanidad y Seguros: la ayuda del principio no va pegada a la etiqueta del primer campo,
   y el botón de elegir archivos es uno secundario de la aplicación, no el gris del navegador. */
:is(#form-doc-renovar, #form-seg-renovar, #form-me-parte) > .form-hint:first-child { margin: 0 0 14px; }
:is(#modal-doc-renovar, #modal-seg-docs, #modal-seg-siniestro, #modal-me-parte) input[type=file]::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 1px solid var(--border-input); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
/* Seguros · por revisar: los filtros por problema y, en cada póliza, cómo arreglarlo. */
.seg-rv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.seg-rv-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 13px; cursor: pointer; }
.seg-rv-chip b { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.seg-rv-chip.activo { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.seg-rv-lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.seg-rv-fila { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); }
.seg-rv-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.seg-rv-problemas { display: grid; gap: 2px; margin: 0; padding: 0 0 0 18px; font-size: 13.5px; color: var(--warning); }
.seg-rv-problemas b { font-weight: 600; }
.seg-rv-arreglo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.seg-rv-arreglo .form-group { flex: 1 1 200px; margin: 0; }
.seg-rv-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Del alto de los campos de al lado (44 px), no un botón pequeño junto a un campo grande. */
.seg-rv-acciones .btn { min-height: 44px; }
/* Seguros · el siniestro: sus fotos en miniatura y el camino a la póliza. */
.seg-si-fotos-tit { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.seg-miniaturas { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-miniaturas:empty { display: none; }
.seg-miniatura { display: grid; place-items: center; width: 84px; height: 84px; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-hover); cursor: pointer; }
.seg-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.seg-miniatura-doc span { padding: 6px; font-size: 11px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.seg-si-ficha { margin: 0; }
/* Seguros · recibos: los de una póliza y los grupos por cuenta de cargo. */
.seg-r-poliza { margin: 0 0 10px; font-size: 13.5px; }
.seg-r-grupo td { padding-top: 14px !important; background: var(--bg-hover); }
.seg-ver-todos { justify-self: start; }
#seg-r-csv { align-self: flex-end; text-decoration: none; }
/* Espacio del trabajador: el seguro del vehículo. */
.me-seguro-buscar input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-input); border-radius: 12px; background: var(--bg-input); color: var(--text-primary); font: inherit; }
.me-seguro { display: grid; gap: 10px; margin-top: 10px; }
.me-seguro-vehiculo { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; }
.me-seguro-vehiculo small { display: block; }
/* Llamar y dar parte, lo urgente, a todo el ancho y con el texto centrado; los papeles, debajo. */
.me-seguro-llamar, .me-seguro-parte { display: flex; justify-content: center; text-align: center; text-decoration: none; }
.me-seguro-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.me-partes { margin-top: 12px; }
.me-partes-tit { margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.me-partes ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.me-partes li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 800px) {
  #view-seg-polizas .seg-filtros-boton { display: block; width: 100%; margin-bottom: 10px; }
  /* Plegados, queda a la vista el buscador, que es lo que más se usa. */
  #seg-filtros:not(.abierto) > :not(.alm-filtro-buscar) { display: none !important; }
  :is(#view-seg-siniestros, #view-seg-vencimientos) .alm-filtros > div { flex: 1 1 100%; }
  .seg-v-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .seg-v-fila .num { text-align: left; }
  .seg-v-acciones { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 800px) {
  .doc-disposicion { grid-template-columns: 1fr; }
  .doc-arbol { display: none; }
  .doc-arbol-movil { display: grid !important; flex: 1 1 100% !important; }
  /* En el móvil, primero la lista: los filtros, plegados tras un botón. */
  #view-sanidad .doc-filtros-boton { display: block; width: 100%; margin-bottom: 10px; }
  /* Registro histórico y Clientes: el dato sigue tras su rótulo, como en Documentos. */
  :is(#view-san-historico #tabla-doc-historico, #view-san-clientes #tabla-doc-clientes) td[data-label] { position: relative; padding-left: 104px; }
  :is(#tabla-doc-historico, #tabla-doc-clientes) td[data-label]::before { position: absolute; left: 0; top: 3px; width: 96px; min-width: 0; line-height: 21px; }
  /* Solo los de Documentos: Pólizas también lleva la clase y se quedaba sin buscador y con la caja vacía. */
  #doc-filtros:not(.abierto) > :not(.doc-arbol-movil) { display: none !important; }
  /* Cliente y Ordenar, a todo el ancho: así «Expedido desde» y «Hasta» comparten fila. */
  #doc-filtros > :is(div:has(> #doc-f-cliente), div:has(> #doc-f-orden)) { flex: 1 1 100%; }
  .doc-cargar { grid-template-columns: 1fr; }
  .doc-archivo { grid-template-columns: 1fr auto; }
  .doc-archivo label { grid-column: 1 / -1; }
  .doc-archivo :is(input, select) { min-height: 44px; font-size: 16px; }
  .doc-visor-panel { padding: 14px; }
  .doc-visor-archivo iframe { height: 55vh; }
  /* El «×» de cada archivo, arriba a la derecha y no solo en una fila. */
  .doc-archivo .btn-icon { grid-column: 2; grid-row: 1; width: 44px; height: 44px; }
  :is(#view-san-clientes, #view-seg-polizas, #view-seg-recibos, #modal-seg-siniestro) .btn-link { min-height: 44px; padding: 6px 4px; }
  .seg-coste-por .filter-btn { min-height: 44px; }
  #view-seg-recibos #tabla-seg-recibos .seg-iban { display: block; width: max-content; max-width: 100%; margin-top: 4px; }
  /* La cuenta completa ocupa una línea propia, también cuando la tarjeta tiene rótulo. */
  #view-seg-recibos #tabla-seg-recibos td:has(.seg-iban) { padding-left: 0; padding-top: 24px; }
  /* Botones de fila a la medida del dedo. */
  :is(#view-sanidad, #view-san-historico, #view-san-clientes, #view-seg-polizas) .ra-btn { width: 40px; height: 40px; }
  :is(.seg-bloque, #seg-cfg-cuerpo) .btn-link { min-height: 36px; padding: 6px 4px; }
  /* Los importes de las tablas de coste: más justos, para que quepan las cuatro columnas. */
  .seg-mini { font-size: 12.5px; }
  .seg-mini td, .seg-mini th { padding: 6px 2px; }
  .seg-mini small { display: block; }
  .seg-recibos-ficha td:last-child { white-space: nowrap; text-align: right; }
}
/* Mi espacio */
.me-material-card .me-card-tit { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.me-material-almacenes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
@media (max-width: 800px) {
  /* En el móvil, cada fila es una tarjeta con sus datos rotulados, como en Usuarios. */
  .alm-tabla-tarjetas thead { display: none; }
  .alm-tabla-tarjetas, .alm-tabla-tarjetas tbody, .alm-tabla-tarjetas tr, .alm-tabla-tarjetas td { display: block; width: 100%; box-sizing: border-box; }
  .alm-tabla-tarjetas tr { position: relative; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  /* El tema claro fuerza la raya inferior de cada celda; en una tarjeta separaba cada dato. */
  :is(#view-almacen, #view-sanidad, #view-san-historico, #view-san-clientes, #view-seg-polizas, #view-seg-siniestros, #view-seg-recibos, #view-albaranes-compra) .alm-tabla-tarjetas :is(td, tfoot td) { padding: 3px 0; border: 0 !important; min-width: 0 !important; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .alm-tabla-tarjetas td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 96px; color: var(--text-secondary); font-size: 12px; }
  .alm-tabla-tarjetas td.alm-principal { padding-bottom: 6px; font-size: 15px; }
  .alm-tabla-tarjetas td.num .alm-sub { display: inline; margin-left: 6px; }
  /* En la tarjeta el importe va tras su rótulo, no a la derecha de la tabla (que ya no hay). */
  .data-table.alm-tabla-tarjetas td.num { text-align: left; white-space: normal; }
  #tabla-alm-existencias tr { padding-left: 68px; min-height: 68px; }
  #tabla-alm-existencias td.alm-col-foto { position: absolute; left: 14px; top: 14px; width: auto; padding: 0; }
  .alm-tabla-tarjetas td:empty { display: none; }
  .alm-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alm-stat { border-left: 0; border-top: 1px solid var(--border); }
  .alm-stat:nth-child(-n+2) { border-top: 0; }
  .alm-stat:nth-child(even) { border-left: 1px solid var(--border); }
  .alm-filtros > div { flex: 1 1 140px; }
  .alm-filtros > .alm-filtro-buscar { flex: 1 1 100%; }
  .alm-toggle { width: 100%; justify-content: center; }
  .alm-ficha-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alm-grafica text { font-size: 18px; }
  .alm-linea-campo :is(input, select) { width: 100%; }
  .alm-linea-campo { flex: 1 1 120px; }
  .alm-ficha-cab { flex-direction: column; }
  .alm-personas-lista { grid-template-columns: 1fr; }
  .alm-almacenes-cab { flex-direction: column; align-items: stretch; }
  .alc-linea { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alc-linea .alc-l-concepto { grid-column: 1 / -1; }
  .alc-l-importe { padding-bottom: 0; align-self: center; text-align: left; }
  .alc-linea .btn-icon { justify-self: end; }
  .alc-totales { justify-content: flex-start; }
  /* La casilla de elegir va en la esquina de la tarjeta, sin ocupar una fila. */
  #tabla-albaranes-compra td:first-child { position: absolute; right: 8px; top: 8px; width: auto; padding: 0; }
}
/* Entre 801 y 1279 px, con el menú al lado, las listas del almacén y la de albaranes de compra
   tampoco cabían: el valor, las devoluciones y las acciones quedaban tras un desplazamiento lateral
   sin aviso. Van en tarjetas como en el móvil (arriba), con el mismo corte que Sanidad y Seguros y
   que las listas de ventas y compras (pantallas/movil.js). */
@media (min-width: 801px) and (max-width: 1279px) {
  :is(#view-almacen, #view-albaranes-compra) .alm-tabla-tarjetas:not(.alm-tabla-compacta) thead { display: none; }
  :is(#view-almacen, #view-albaranes-compra) .alm-tabla-tarjetas:not(.alm-tabla-compacta), :is(#view-almacen, #view-albaranes-compra) .alm-tabla-tarjetas:not(.alm-tabla-compacta) :is(tbody, tr, td) { display: block; width: 100%; box-sizing: border-box; }
  :is(#view-almacen, #view-albaranes-compra) .alm-tabla-tarjetas:not(.alm-tabla-compacta) tr { position: relative; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  :is(#view-almacen, #view-albaranes-compra) .alm-tabla-tarjetas:not(.alm-tabla-compacta) td { padding: 3px 0; border: 0 !important; min-width: 0 !important; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  :is(#view-almacen, #view-albaranes-compra) .alm-tabla-tarjetas:not(.alm-tabla-compacta) td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 110px; color: var(--text-secondary); font-size: 12px; }
  :is(#view-almacen, #view-albaranes-compra) .alm-tabla-tarjetas:not(.alm-tabla-compacta) td.alm-principal { padding-bottom: 6px; font-size: 15px; }
  :is(#view-almacen, #view-albaranes-compra) .alm-tabla-tarjetas:not(.alm-tabla-compacta) td.num .alm-sub { display: inline; margin-left: 6px; }
  :is(#view-almacen, #view-albaranes-compra) .alm-tabla-tarjetas:not(.alm-tabla-compacta) td:empty { display: none; }
  #view-almacen #tabla-alm-existencias tr { padding-left: 68px; min-height: 68px; }
  #view-almacen #tabla-alm-existencias td.alm-col-foto { position: absolute; left: 14px; top: 14px; width: auto; padding: 0; }
  #view-albaranes-compra #tabla-albaranes-compra td:first-child { position: absolute; right: 8px; top: 8px; width: auto; padding: 0; }
}

.nav-brand-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.nav-menu {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-control) ease, color var(--dur-control) ease;
  text-align: left;
  position: relative;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Cambiar de vista es la acción de 100+/día: el estado activo se confirma en el mismo
   frame del clic. El hover sí puede desvanecerse. */
.nav-item.active {
  background: var(--nav-active-bg);
  color: var(--accent);
  transition: none;
}

.nav-item.active svg {
  stroke: var(--success);
}

.nav-badge {
  position: absolute;
  right: 12px;
  background: var(--danger-bg);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.nav-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-user-info {
  flex: 1;
  min-width: 0;
}

.btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--border, var(--border));
  border-radius: 6px;
  color: var(--text-secondary, var(--text-secondary));
  cursor: pointer;
  transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease;
  flex-shrink: 0;
}
.btn-logout:hover {
  background: var(--danger-bg);
  border-color: var(--border);
  color: var(--danger);
}

/* Selector de usuarios en login */
.login-users {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--bg-hover, var(--bg-card));
  border: 1px solid var(--border, var(--border));
  border-radius: 10px;
  cursor: pointer;
  transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease;
  text-align: left;
  width: 100%;
  color: var(--text-primary, var(--text-primary));
  font-family: inherit;
}
.login-user-card:hover {
  border-color: var(--accent-border);
  background: var(--success-bg);
  transform: translateY(-1px);
}
.login-user-card:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
}
.login-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  /* El color de fondo y de letra los pone el propio nombre, como en el correo */
  background: var(--accent-bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.login-user-info { flex: 1; min-width: 0; }
.login-user-info .nombre {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, var(--text-primary));
}
.login-user-info .rol {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, var(--text-secondary));
  margin-top: 1px;
}
/* Con mucha gente, la lista se desplaza por dentro en vez de estirar la tarjeta */
.login-users-muchos {
  max-height: min(46vh, 340px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.login-user-card .chev {
  color: var(--text-tertiary, var(--text-secondary));
  flex-shrink: 0;
}

.nav-user-avatar {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--action), var(--action));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.nav-user-info {
  display: flex;
  flex-direction: column;
}

.nav-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.nav-user-role {
  font-size: 11px;
  color: var(--text-secondary);
}

/* =============================================
   MAIN CONTENT
   ============================================= */
.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.view {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
}

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
}

.view-header h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.view-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.view-header-actions {
  display: flex;
  gap: 10px;
}

/* =============================================
   DASHBOARD
   ============================================= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-green .stat-icon { background: var(--success-bg); color: var(--success); }
.stat-green .stat-icon svg { stroke: var(--success); }
.stat-blue .stat-icon { background: var(--info-bg); color: var(--info); }
.stat-blue .stat-icon svg { stroke: var(--info); }
.stat-orange .stat-icon { background: var(--warning-bg); color: var(--warning); }
.stat-orange .stat-icon svg { stroke: var(--warning); }
.stat-purple .stat-icon { background: var(--neutral-bg); color: var(--neutral-fg); }
.stat-purple .stat-icon svg { stroke: var(--neutral-fg); }

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.dash-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.dash-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.dash-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.dash-item-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-item-title {
  color: var(--text-primary);
  font-weight: 500;
}

.dash-item-sub {
  color: var(--text-secondary);
  font-size: 12px;
}

.dash-empty {
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* =============================================
   TABLES
   ============================================= */
.search-bar {
  margin-bottom: 16px;
}

.search-bar input {
  width: 100%;
  max-width: 400px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.search-bar input:focus {
  border-color: var(--accent-border);
}

.search-bar input::placeholder {
  color: var(--text-secondary);
}

.filter-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 7px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease;
}

.filter-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* Filtrar es de decenas/día: el estado activo aparece en el mismo frame del clic. */
.filter-btn.active {
  background: var(--success-bg);
  border-color: var(--accent-border);
  color: var(--success);
  transition: none;
}

.table-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead {
  background: var(--bg-secondary);
}

.data-table th {
  text-align: left;
  padding: 12px 16px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 12px 16px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

.data-table tbody tr:hover {
  background: var(--bg-input);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.table-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* Status badges */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  /* Una píldora de estado no se parte: «Sin facturar» salía en dos líneas en una columna estrecha */
  white-space: nowrap;
}

.badge-pendiente { background: var(--warning-bg); color: var(--warning); }
.badge-en_curso { background: var(--info-bg); color: var(--info); }
.badge-completado, .badge-completada, .badge-recibida { background: var(--success-bg); color: var(--success); }
.badge-cancelado, .badge-cancelada { background: var(--bg-secondary); color: var(--text-secondary); }
.badge-borrador { background: var(--danger-bg); color: var(--text-primary); }
.badge-enviada, .badge-enviado { background: var(--warning-bg); color: var(--text-primary); }
.badge-pagada { background: var(--success-bg); color: var(--success); }
.badge-vigente { background: var(--success-bg); color: var(--success); }
.badge-vencido { background: var(--danger-bg); color: var(--danger); }
.badge-aceptada, .badge-aceptado { background: var(--success-bg); color: var(--success); }
.badge-rechazada, .badge-rechazado { background: var(--danger-bg); color: var(--danger); }
.badge-sin_facturar { background: var(--warning-bg); color: var(--warning); }
.badge-ef-cartera { background: var(--info-bg); color: var(--info); }
.badge-ef-gestion { background: var(--warning-bg); color: var(--text-primary); }
.badge-ef-descontado { background: var(--warning-bg); color: var(--warning); }
.badge-ef-cobrado, .badge-ef-pagado { background: var(--success-bg); color: var(--success); }
.badge-ef-impagado { background: var(--danger-bg); color: var(--danger); }
.badge-ef-anulado { background: var(--bg-secondary); color: var(--text-secondary); }
#tes-efectos .fin-kpi small { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.aeat-card { margin-top: 18px; }
.aeat-datos { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin: 12px 0 16px; background: var(--bg-secondary); }
.aeat-datos > summary { cursor: pointer; font-weight: 600; display: flex; gap: 10px; align-items: center; list-style: none; }
/* Con display:flex el resumen pierde el triángulo del navegador: sin él parecía una barra sin acción. */
.aeat-datos > summary::-webkit-details-marker { display: none; }
.aeat-datos > summary::after { content: ''; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--text-secondary); transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-control, 150ms) ease; }
.aeat-datos[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.aeat-config fieldset { border: 0; padding: 0; margin: 14px 0 0; }
.aeat-config legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--text-secondary); }
.aeat-fila { display: flex; gap: 18px; flex-wrap: wrap; }
/* Rejilla y no flex: la nota en <small> va debajo del texto y no se queda como otra columna. */
.aeat-check { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; margin: 4px 0; font-weight: 400; }
.aeat-check small { grid-column: 2; color: var(--text-secondary); }
.aeat-confirmar { margin-top: 14px; font-weight: 600; }
.aeat-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.aeat-grid4 { display: grid; grid-template-columns: minmax(0,2fr) repeat(3,minmax(0,1fr)); gap: 12px; }
.aeat-grid4 > * { min-width: 0; }
@media (min-width:721px) and (max-width:1279px) { .aeat-grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.aeat-generar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.aeat-generar .form-group { margin: 0; min-width: 150px; }
.aeat-generar #aeat-modelo { min-width: 260px; }
.aeat-como { color: var(--text-secondary); font-size: 13px; margin: 8px 0 0; }
.aeat-presentada { color: var(--success); font-weight: 600; margin: 0 0 6px; }
.aeat-arrastre { color: var(--text-secondary); font-size: 13px; margin: 0 0 8px; }
.aeat-marcar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--bg-secondary); }
.aeat-marcar label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.aeat-marcar input { width: 180px; }
.aeat-presentaciones { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.aeat-presentaciones > summary { cursor: pointer; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.aeat-rect { display: flex; gap: 12px 18px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: var(--bg-secondary); }
.aeat-rect .form-group { margin: 0; min-width: 200px; }
.aeat-error { color: var(--danger); white-space: pre-wrap; }
.aeat-estado { font-weight: 600; margin: 14px 0 8px; }
.aeat-estado.ok { color: var(--success); }
.aeat-estado.ko { color: var(--danger); }
.aeat-lista { border-radius: 10px; padding: 10px 14px; margin: 8px 0; }
.aeat-lista ul { margin: 6px 0 0; padding-left: 18px; }
.aeat-lista li { margin: 3px 0; overflow-wrap: anywhere; }
.aeat-lista details > summary { cursor: pointer; margin-top: 6px; font-weight: 600; }
.aeat-trabajadores { background: var(--bg-secondary); }
.aeat-145 { border-top: 1px solid var(--border); padding: 8px 0; }
.aeat-145 > summary { cursor: pointer; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.aeat-145-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; margin-top: 10px; }
.aeat-145-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.aeat-145-grid label.aeat-check { flex-direction: row; align-items: center; }
.aeat-par { display: flex; gap: 6px; }
.aeat-par input { width: 70px; }
.aeat-145-nota { color: var(--text-secondary); font-size: 12px; margin: 6px 0 0; }
.aeat-errores { background: var(--danger-bg); }
.aeat-avisos { background: var(--warning-bg); }
.aeat-resumen, .aeat-casillas-grid { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0; }
.aeat-casillas-grid span { font-variant-numeric: tabular-nums; }
.aeat-casillas > summary { cursor: pointer; font-weight: 600; margin-top: 8px; }
@media (max-width: 720px) { .aeat-grid3, .aeat-grid4 { grid-template-columns: 1fr; } .aeat-generar .form-group, .aeat-generar #aeat-modelo { min-width: 0; width: 100%; } .aeat-generar .btn { flex: 1; } }
.ef-cabecera { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); margin-bottom: 14px; }
.ef-nominal { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.ef-nominal span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.ef-nominal b { font-size: 24px; white-space: nowrap; line-height: 1.1; }
.ef-nominal .badge { align-self: flex-start; margin-top: 4px; }
.ef-meta { flex: 1; min-width: 240px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; }
.ef-meta div { min-width: 0; }
.ef-meta dt { font-size: 12px; color: var(--text-secondary); }
.ef-meta dd { margin: 0; overflow-wrap: anywhere; }
.badge-facturado { background: var(--success-bg); color: var(--success); }

/* Role badges */
.badge-cliente { background: var(--success-bg); color: var(--success); }
.badge-proveedor { background: var(--info-bg); color: var(--info); }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-control) ease, color var(--dur-control) ease,
    border-color var(--dur-control) ease, box-shadow var(--dur-control) ease,
    transform var(--dur-pulsacion) var(--ease-salida);
  display: inline-flex;
  align-items: center;
  /* Un botón estirado a todo el ancho centra su texto: alineado a la izquierda parecía un campo. */
  justify-content: center;
  gap: 6px;
  font-family: inherit;
}
/* El icono de un botón no se encoge cuando el texto ocupa dos líneas (en el móvil se quedaba en cero). */
.btn svg { flex-shrink: 0; }

/* Feedback de pulsación del botón principal del ERP. Mismo patrón que
   accounting-workspace.css:108-109: el :not(:focus-visible) evita que el teclado
   encoja el botón (nunca se anima una acción de teclado). */
.btn:active:not(:disabled):not(:focus-visible) {
  transform: scale(.98);
}

.btn-primary {
  background: var(--action);
  color: var(--text-primary);
}

.btn-primary:hover {
  background: var(--action);
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.btn-secondary:hover {
  background: var(--bg-secondary);
}

.btn-small {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.btn-danger:hover {
  background: var(--danger-bg);
}

.btn-ai {
  background: var(--info-bg);
  color: var(--neutral-fg);
  border: 1px solid var(--border);
}

.btn-ai:hover {
  background: var(--info-bg);
}

.btn-ai:disabled {
  opacity: 0.5;
  cursor: wait;
}

.reply-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--success-bg);
  border: 1px solid color-mix(in srgb, var(--accent-border) 30.0%, transparent);
  border-radius: 6px;
  margin-bottom: 8px;
  color: var(--success);
  font-size: 13px;
}

.reply-attachment .btn-icon {
  color: var(--danger);
  font-size: 16px;
  padding: 0 4px;
}

/* Modal presupuesto email */


/* Pestanas presupuestos */
.presupuestos-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.btn-action.accept {
  color: var(--success);
  border-color: color-mix(in srgb, var(--accent-border) 30.0%, transparent);
}

.btn-action.accept:hover {
  background: var(--success-bg);
}

.btn-action.launch {
  background: var(--success-bg);
  color: var(--success);
  border-color: color-mix(in srgb, var(--accent-border) 30.0%, transparent);
  font-weight: 600;
}

.btn-action.launch:hover {
  background: var(--success-bg);
}

.badge-aceptado {
  background: var(--success-bg);
  color: var(--success);
}

.badge-pendiente {
  background: var(--warning-bg);
  color: var(--warning);
}

.badge-completado {
  background: var(--success-bg);
  color: var(--success);
}

/* Botones icono en tablas */
.btn-icon-action {
  font-size: 16px !important;
  padding: 4px 8px !important;
  min-width: auto !important;
  line-height: 1;
  cursor: pointer;
}

/* Documentacion tabs */


.btn-send {
  background: var(--action);
  color: var(--text-primary);
  margin-left: auto;
}

.btn-send:hover {
  background: var(--action);
}

.btn-icon {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease;
  line-height: 1;
}

.btn-icon:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.btn-action {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease;
}

.btn-action:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.btn-action.delete:hover {
  color: var(--danger);
}


.action-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* =============================================
   MODALS & FORMS
   ============================================= */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
  /* Las ventanas son «ocasionales»: admiten animación estándar. Al desvanecer la propia
     .modal entra con ella el velo y su desenfoque, en vez de aparecer de golpe. */
  opacity: 1;
  /* `display` va en la transición con allow-discrete: sin ella el navegador no arranca
     ninguna transición al pasar de display:none a display:flex y @starting-style no suena. */
  transition: opacity var(--dur-ventana) var(--ease-salida), display var(--dur-ventana) allow-discrete;
}

/* Ya oculta: nada que transicionar. Así `.hidden` esconde la ventana en el acto en vez de
   esperar los 220 ms del display diferido. */
.modal.hidden { transition: none; }

/* Salida más rápida que la entrada (160 vs 220 ms): la decisión es lenta, la respuesta
   del sistema es rápida. La aplica closeModal() en app.js. */
.modal.modal-saliendo { opacity: 0; transition-duration: 160ms; }
.modal.modal-saliendo .modal-content { transform: scale(.99); transition-duration: 160ms; }

@starting-style {
  .modal:not(.hidden) { opacity: 0; }
  .modal:not(.hidden) .modal-content { transform: translateY(8px) scale(.985); }
}

.modal-content {
  transform: none;
  transition: transform var(--dur-ventana) var(--ease-salida);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  max-width: 600px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-wide {
  max-width: 750px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 18px;
  color: var(--text-primary);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-form > .form-group{
  margin-bottom: 14px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent-border);
}

.form-group textarea {
  resize: vertical;
}

.form-group input[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-full {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Sticky action bar inside scrollable modals */
.modal-content > .form-actions:last-child,
.modal-form > .form-actions:last-child,
.modal-form > form > .form-actions:last-child {
  position: sticky;
  bottom: -24px;
  margin: 20px -24px -24px;
  padding: 14px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  z-index: 5;
}
[data-theme="light"] .modal-content > .form-actions:last-child,
[data-theme="light"] .modal-form > .form-actions:last-child,
[data-theme="light"] .modal-form > form > .form-actions:last-child {
  background: var(--modal-bg);
  border-top-color: var(--border);
}

/* Checkbox group */
.checkbox-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 0;
}


/* Conceptos / Lineas factura & presupuesto */
.conceptos-section {
  margin: 16px 0;
  padding: 16px;
  background: var(--bg-input);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.conceptos-section h4 {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.concepto-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}


.concepto-desc {
  flex: 2;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.concepto-cant,
.concepto-precio {
  width: 90px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.concepto-total {
  width: 80px;
  text-align: right;
  color: var(--success);
  font-weight: 600;
  font-size: 13px;
}

.concepto-desc:focus,
.concepto-cant:focus,
.concepto-precio:focus {
  border-color: var(--accent-border);
}


/* Pasos del asistente de alta de documento */
.contrato-step-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 0 8px;
  text-align: left;
}
.contrato-step-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--success);
  margin-bottom: 8px;
}
.contrato-step-card select {
  width: 100%;
  max-width: 400px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.contrato-step-card select:focus {
  border-color: var(--accent-border);
}
/* Enlace de acción: un botón que se lee como un enlace. En el color de acción y sin márgenes ni
   relleno propios, para que quede alineado con el título, el texto o los botones que tiene al lado;
   el sitio lo da quien lo coloca. (Iba gris, como texto secundario, 12 px más abajo que sus vecinos
   y verde al pasar el ratón.) */
.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  margin: 0;
  padding: 0;
  text-align: left;
  text-underline-offset: 2px;
}
.btn-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Light theme overrides */
[data-theme="light"] .contrato-step-card { background: transparent; border: none; }
[data-theme="light"] .contrato-step-label { color: var(--accent); }
[data-theme="light"] .contrato-step-card select { background: var(--bg); border-color: var(--border-light); color: var(--text-primary); }

.factura-totales {
  margin: 16px 0;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.total-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.total-final {
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.total-final span:last-child {
  color: var(--success);
}

/* Workflow actions */


/* Agrupar albaranes list */
.agrupar-list {
  margin: 16px 0;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
  border: 1px solid var(--border);
  max-height: 300px;
  overflow-y: auto;
}

.agrupar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.agrupar-item:last-child {
  border-bottom: none;
}

.agrupar-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #10b981;
}

.agrupar-item-info {
  flex: 1;
}

.agrupar-item-importe {
  color: var(--success);
  font-weight: 600;
}

/* =============================================
   CORREO LAYOUT
   ============================================= */
.correo-layout {
  display: flex;
  height: calc(100vh - 0px);
  margin: -32px;
  background: var(--bg-card);
}

.correo-sidebar {
  width: 360px;
  min-width: 360px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.correo-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.correo-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-input);
  border-radius: 8px;
  padding: 3px;
}

.tab {
  padding: 7px 10px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease;
  border-radius: 6px;
}

.tab:hover {
  color: var(--text-primary);
}

.tab.active {
  color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.email-list {
  flex: 1;
  overflow-y: auto;
}

.email-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease;
  border-left: 3px solid transparent;
}

.email-item:hover {
  background: var(--bg-input);
}

.email-item.active {
  background: var(--accent-bg);
  border-left-color: var(--accent);
}

.email-item-from {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.email-item-from::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.email-item.active .email-item-from::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.email-item-subject {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  padding-left: 14px;
}

.email-item-preview {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 14px;
}

.email-item-date {
  font-size: 11px;
  color: var(--text-secondary);
  float: right;
  font-weight: 500;
}

.correo-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-input);
}

.email-view {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  background: var(--bg-card);
  margin: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.email-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.email-subject-title {
  font-size: 22px;
  color: var(--text-primary);
  margin-bottom: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.email-sender-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 12px 16px;
  gap: 12px;
}

.email-sender-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.email-from-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.email-cc-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.email-date-label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.email-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Read/unread email status */
.email-item.read .email-item-from::before {
  background: var(--border);
}

.email-item.read .email-item-from {
  font-weight: 400;
}

/* Move buttons */
.btn-mover-activo,
.btn-mover-realizado {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-mover-activo:hover,
.btn-mover-realizado:hover {
  background: var(--bg-hover);
}

.email-body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-top: 16px;
}

.email-actions {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
}

/* Reply Panel */
.reply-panel {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 20px;
  max-height: 45vh;
  display: flex;
  flex-direction: column;
  margin: 0 12px 12px;
  border-radius: 0 0 12px 12px;
}

.reply-panel.reply-panel-full {
  flex: 1;
  max-height: none;
  border-top: none;
  overflow-y: auto;
}

.reply-panel.reply-panel-full #reply-text {
  flex: 1;
  min-height: 50vh;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.reply-header h3 {
  font-size: 13px;
  color: var(--text-secondary);
}

.cc-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cc-field label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
  min-width: 38px;
}

.cc-field input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.cc-field input:focus {
  border-color: var(--accent-border);
}

#reply-text {
  flex: 1;
  min-height: 100px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 10px;
  padding: 14px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
  line-height: 1.6;
}

#reply-text:focus {
  border-color: var(--accent-border);
}

.reply-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}
/* Cada botón en una línea: en el móvil «Mejorar con IA» se partía en dos o tres; si no caben, pasan abajo. */
.reply-actions .btn { white-space: nowrap; }

.ai-icon {
  font-size: 15px;
}

.ai-status {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--accent-border) 20.0%, transparent);
}

.ai-status.error {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--border) 20.0%, transparent);
}

/* =============================================
   EMPTY STATES & LOADING
   ============================================= */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  gap: 12px;
}

.loading {
  padding: 40px;
  text-align: center;
  color: var(--text-secondary);
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent-border);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-secondary);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bg-secondary);
}

/* =============================================
   CONTABILIDAD
   ============================================= */

.contab-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-select-inline {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  min-width: 160px;
}
.form-select-inline:focus {
  outline: none;
  border-color: var(--accent-border);
}

.contab-tabs {
  display: flex;
  gap: 4px;
  margin: 20px 0 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.contab-tab {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease;
}
.contab-tab:hover {
  color: var(--text-primary);
}
.contab-tab.active {
  color: var(--success);
  border-bottom-color: var(--accent-border);
}

.contab-panel {
  margin-top: 16px;
}

.contab-panel-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Libro Mayor */
.mayor-resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.mayor-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mayor-label {
  color: var(--text-secondary);
  font-size: 13px;
}
.mayor-value {
  font-size: 24px;
  font-weight: 700;
}

/* Balance grid */
.balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.balance-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 16px;
}
.balance-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.total-row {
  background: var(--bg-secondary);
  font-weight: 600;
}
.total-row td {
  border-top: 2px solid var(--border);
}

/* PyG resultado */
.pyg-resultado {
  margin-top: 20px;
  background: var(--accent-bg, var(--success-bg));
  border: 1px solid var(--accent);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
}
.pyg-resultado-valor {
  font-size: 28px;
  font-weight: 700;
}

/* Fiscal */
.fiscal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.fiscal-grid > .dash-card:last-child {
  grid-column: 1 / -1;
}
.fiscal-resumen {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fiscal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
.fiscal-item-total {
  padding: 12px 0;
  font-size: 16px;
  font-weight: 600;
}
.fiscal-label {
  color: var(--text-secondary);
  font-size: 14px;
}
.fiscal-value {
  font-size: 18px;
  font-weight: 600;
}
.fiscal-divider {
  height: 1px;
  background: var(--bg-secondary);
  margin: 4px 0;
}

.fiscal-modelos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}
.modelo-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modelo-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--success);
}
.modelo-desc {
  font-size: 12px;
  color: var(--text-secondary);
}
button.modelo-card { font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-control, 150ms) ease; }
button.modelo-card:hover { border-color: var(--accent-border); }

/* Asiento lineas en modal */
.asiento-lineas-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.asiento-lineas-container .data-table th,
.asiento-lineas-container .data-table td {
  padding: 6px 8px;
}
.asiento-lineas-container input,
.asiento-lineas-container select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  width: 100%;
}
.asiento-lineas-container input:focus,
.asiento-lineas-container select:focus {
  outline: none;
  border-color: var(--accent-border);
}

.modal-large {
  max-width: 900px;
}


/* Albaran a Factura - Asiento section */
.af-asiento-section {
  margin-top: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.af-asiento-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.af-asiento-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 12px 0;
}
.spinner-small {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top: 2px solid var(--accent-border);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.btn-small {
  padding: 4px 12px;
  font-size: 12px;
}

/* Presupuesto modal */
.modal-xlarge { max-width: 1050px; }

/* Wizard steps */
.wizard-steps {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
}
.wizard-step {
  flex: 1;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: default;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease;
}
.wizard-step.active {
  color: var(--success);
  border-bottom-color: var(--accent-border);
}
.wizard-step.done {
  color: var(--text-secondary);
  border-bottom-color: var(--border);
}
.wizard-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.wizard-step.active .wizard-num {
  background: var(--action);
  color: var(--text-primary);
}
.wizard-step.done .wizard-num {
  background: var(--bg-secondary);
  color: var(--success);
}
.wizard-panel {
  min-height: 250px;
}
.wizard-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.wizard-resumen {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}


.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.pre-lineas-header {
  display: flex;
  gap: 8px;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
/* Lineas como tarjetas */
.lineas-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.linea-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  transition: border-color 0.2s;
}
.linea-card:focus-within {
  border-color: var(--accent-border);
}
.linea-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.linea-card-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.linea-card:focus-within .linea-card-num {
  background: var(--action);
  color: var(--text-primary);
}
.linea-card-desc {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
  width: 100%;
}
.linea-card-desc:focus {
  outline: none;
  border-color: var(--accent-border);
}
.linea-card-desc::placeholder {
  color: var(--text-secondary);
}
.linea-card-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  line-height: 1;
}
.linea-card-remove:hover {
  color: var(--danger);
}
.linea-card-fields {
  display: flex;
  gap: 12px 16px;
  align-items: flex-end;
  margin-left: 36px;
  flex-wrap: wrap;
}
.linea-card-fields label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.linea-card-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.linea-card-fields input, .linea-card-fields select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
}
.linea-card-fields input:focus, .linea-card-fields select:focus {
  outline: none;
  border-color: var(--accent-border);
}
.linea-card-base {
  font-weight: 700;
  color: var(--success);
  font-size: 14px;
  min-width: 80px;
  text-align: right;
  padding: 6px 0;
}
.lineas-add-bar {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}
.stats-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Nivel indentation for plan de cuentas */
.cuenta-nivel-1 { font-weight: 700; background: var(--bg-secondary); }
.cuenta-nivel-2 { padding-left: 20px; font-weight: 600; }
.cuenta-nivel-3 { padding-left: 40px; }
.cuenta-nivel-4 { padding-left: 60px; font-size: 13px; color: var(--text-secondary); }

/* =============================================
   SEARCH DROPDOWNS & CARDS (theme-aware)
   ============================================= */
.search-dropdown {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 100;
  max-height: 280px; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  font-size: 13px; line-height: 1.35;
}
.search-dropdown-item {
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.search-dropdown-item:last-child { border-bottom: none; }
.search-dropdown-item:hover { background: var(--accent-bg); }
.search-dropdown-item-name { font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.search-dropdown-item-info { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.search-dropdown-item.es-empresa-propia { background: linear-gradient(90deg, var(--success-bg), transparent 60%); }

/* Distintivo de la empresa propia en el buscador de terceros */
.marca-badge {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; line-height: 1.2;
  border: 1px solid transparent;
}

.selected-card {
  margin-top: 10px; padding: 10px 14px;
  background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: 8px;
}
.selected-card-name { font-weight: 600; color: var(--accent); }
.selected-card-btn {
  background: none; border: 1px solid var(--border); color: var(--text-secondary);
  padding: 3px 10px; border-radius: 6px; cursor: pointer; font-size: 12px;
}

/* Tarjeta tercero seleccionado en contrato (con detalles) */
.tercero-selected-card {
  margin-top: 12px;
  padding: 0;
  overflow: hidden;
}
.tercero-selected-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--accent-bg);
  border-bottom: 1px solid var(--accent-border);
}
.tercero-selected-card .selected-card-name { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tercero-selected-check { color: var(--success); font-weight: 700; font-size: 16px; flex-shrink: 0; }
.tercero-selected-detalles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
  padding: 12px 14px;
  background: var(--bg-card);
}
.tercero-selected-detalles:empty { display: none; }
.tercero-detalle-row {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.tercero-detalle-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--text-secondary);
}
.tercero-detalle-value {
  font-size: 13px; color: var(--text-primary); font-weight: 500;
  word-break: break-word;
}
[data-theme="light"] .tercero-selected-detalles { background: var(--bg-card); }

/* Badge tipo albarán (entrada/salida) */
.tipo-badge {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; line-height: 1.2; white-space: nowrap;
  border: 1px solid transparent;
}
.tipo-badge.tipo-servicio { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--border) 33.3%, transparent); }
.tipo-badge.tipo-producto { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--border) 33.3%, transparent); }
[data-theme="dark"] .tipo-badge.tipo-servicio { color: var(--info); }
[data-theme="dark"] .tipo-badge.tipo-producto { color: var(--warning); }
.tipo-btn {
  flex: 1; padding: 20px; font-size: 16px;
  border: 2px solid var(--border); border-radius: 10px;
  background: var(--bg-input); color: var(--text-primary); cursor: pointer;
}
.tipo-btn.active, .tipo-btn:hover { border-color: var(--accent); background: var(--accent-bg); }

/* =============================================
   MI PERFIL — empresa propia
   ============================================= */
.empresa-form { max-width: 900px; display: flex; flex-direction: column; gap: 16px; }
.empresa-section {
  padding: 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.empresa-section h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--accent);
}
.empresa-hint {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.empresa-section .form-grid { margin-bottom: 0; }

/* =============================================
   UTILITY
   ============================================= */
.hidden {
  display: none !important;
}

.text-green { color: var(--accent); }
.text-red { color: var(--red); }
.text-blue { color: var(--blue); }
.text-orange { color: var(--orange); }

/* =============================================
   THEME TOGGLE
   ============================================= */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 0 10px 8px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease;
}
.theme-toggle:hover {
  background: var(--nav-active-bg);
  color: var(--accent);
}

/* =============================================
   LIGHT THEME OVERRIDES
   ============================================= */
[data-theme="light"] .nav-sidebar { border-right: 1px solid var(--border); }
[data-theme="light"] .nav-logo { background: linear-gradient(135deg, var(--action), var(--action)); }

[data-theme="light"] .main-content { background: var(--bg-body); }
[data-theme="light"] .view { background: var(--bg-body); }

[data-theme="light"] .stat-card,
[data-theme="light"] .dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

[data-theme="light"] .stat-icon { opacity: 0.9; }

[data-theme="light"] .data-table { border-collapse: collapse; }
[data-theme="light"] .data-table th {
  background: var(--table-header-bg);
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
}
[data-theme="light"] .data-table td {
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
[data-theme="light"] .data-table tr:hover td { background: var(--bg-hover); }

[data-theme="light"] .modal-content {
  background: var(--modal-bg);
  border: 1px solid var(--border);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
[data-theme="light"] .modal {
  background: rgba(0,0,0,0.3);
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
  background: var(--bg-input);
  border-color: var(--border-input);
  color: var(--text-primary);
}
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group select:focus,
[data-theme="light"] .form-group textarea:focus {
  border-color: var(--accent);
}
[data-theme="light"] .form-group label { color: var(--text-secondary); }

[data-theme="light"] .btn-primary { background: var(--accent); color: var(--text-primary); }
[data-theme="light"] .btn-secondary {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
}
[data-theme="light"] .btn-action { color: var(--blue); }
[data-theme="light"] .btn-action.delete { color: var(--red); }

[data-theme="light"] .search-bar input {
  background: var(--bg-input);
  border-color: var(--border-input);
  color: var(--text-primary);
}
[data-theme="light"] .filter-btn {
  background: var(--bg-input);
  border-color: var(--border-input);
  color: var(--text-secondary);
}
[data-theme="light"] .filter-btn.active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

[data-theme="light"] .badge { background: var(--badge-bg); color: var(--text-secondary); }

[data-theme="light"] .view-header h1 { color: var(--text-primary); }
[data-theme="light"] .view-subtitle { color: var(--text-tertiary); }

[data-theme="light"] .nav-user-name { color: var(--text-primary); }
[data-theme="light"] .nav-user-role { color: var(--text-tertiary); }
[data-theme="light"] .nav-user-avatar {
  background: var(--accent-bg);
  color: var(--accent);
}
[data-theme="light"] .nav-badge { background: var(--red); color: var(--text-primary); }

/* Light theme: cards, panels, sections */
[data-theme="light"] .linea-card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
[data-theme="light"] .linea-card-desc {
  background: var(--bg-input);
  border-color: var(--border-input);
  color: var(--text-primary);
}
[data-theme="light"] .linea-card-num { background: var(--badge-bg); color: var(--text-secondary); }
[data-theme="light"] .linea-card:focus-within .linea-card-num { background: var(--accent); color: var(--text-primary); }
[data-theme="light"] .linea-card-fields input,
[data-theme="light"] .linea-card-fields select {
  background: var(--bg-input);
  border-color: var(--border-input);
  color: var(--text-primary);
}
[data-theme="light"] .linea-card-base { color: var(--accent); }

[data-theme="light"] .factura-totales { color: var(--text-primary); background: var(--bg-input); border-color: var(--border); }
[data-theme="light"] .total-row { border-color: var(--border); color: var(--text-secondary); }
[data-theme="light"] .total-final { color: var(--text-primary); border-top-color: var(--border); }
[data-theme="light"] .total-final span:last-child { color: var(--accent); }

[data-theme="light"] .wizard-steps { border-bottom-color: var(--border); }
[data-theme="light"] .wizard-step { color: var(--text-muted); }
[data-theme="light"] .wizard-step.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="light"] .wizard-num { background: var(--badge-bg); color: var(--text-muted); }
[data-theme="light"] .wizard-step.active .wizard-num { background: var(--accent); color: var(--text-primary); }
[data-theme="light"] .wizard-nav { border-top-color: var(--border); }
[data-theme="light"] .wizard-resumen { background: var(--bg-input); border-color: var(--border); }


[data-theme="light"] .contab-tabs { border-bottom-color: var(--border); }
[data-theme="light"] .contab-tab { color: var(--text-muted); }
[data-theme="light"] .contab-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

[data-theme="light"] .mayor-card,
[data-theme="light"] .balance-col,
[data-theme="light"] .af-asiento-section,
[data-theme="light"] .asiento-lineas-container {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="light"] .form-select-inline {
  background: var(--bg-input);
  border-color: var(--border-input);
  color: var(--text-primary);
}


[data-theme="light"] .modelo-card {
  background: var(--bg-input);
  border-color: var(--border-input);
}
[data-theme="light"] .fiscal-divider { background: var(--border); }


/* Email views in light mode */
[data-theme="light"] .email-item { border-bottom-color: var(--border); }
[data-theme="light"] .email-item:hover { background: var(--bg-hover); }
[data-theme="light"] .email-view { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .reply-panel { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .reply-panel textarea {
  background: var(--bg-input);
  border-color: var(--border-input);
  color: var(--text-primary);
}

/* Admin grid */
[data-theme="light"] .admin-grid .dash-card { background: var(--bg-card); border-color: var(--border); }

/* =============================================
   LIGHT THEME - COMPREHENSIVE OVERRIDES
   ============================================= */

/* Force all dark backgrounds to light */
[data-theme="light"] .main-content,
[data-theme="light"] .view,
[data-theme="light"] section { background: var(--bg-body); color: var(--text-primary); }

/* All cards, panels, containers */
[data-theme="light"] .stat-card,
[data-theme="light"] .dash-card,
[data-theme="light"] .modal-content,
[data-theme="light"] .linea-card,
[data-theme="light"] .mayor-card,
[data-theme="light"] .balance-col,
[data-theme="light"] .af-asiento-section,
[data-theme="light"] .asiento-lineas-container,
[data-theme="light"] .wizard-resumen,
[data-theme="light"] .modelo-card,
[data-theme="light"] .contab-panel{
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary);
  box-shadow: var(--shadow);
}

/* Deep backgrounds (inputs areas, nested panels) */

[data-theme="light"] .asiento-lineas-container,
[data-theme="light"] .af-asiento-section,
[data-theme="light"] #presupuesto-centro-form,
[data-theme="light"] .cuenta-nivel-1 {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
}

/* Comprehensive light theme fix for all dark backgrounds */
[data-theme="light"] .modal-content,
[data-theme="light"] .contrato-step-card{
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}


/* ALL inputs, selects, textareas */
/* Solo el color de fondo: la abreviada «background» borraba también los iconos de dentro de los
   campos (la lupa de «Buscar en el correo», la chincheta de «Dirección») y quedaba el hueco. */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--accent) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: var(--text-tertiary) !important; }
[data-theme="light"] input:disabled,
[data-theme="light"] select:disabled { opacity: 0.5; }

/* ALL table elements */
[data-theme="light"] .data-table { background: var(--bg-card); }
[data-theme="light"] .data-table th {
  background: var(--table-header-bg) !important;
  color: var(--text-secondary) !important;
  border-bottom: 2px solid var(--border) !important;
}
[data-theme="light"] .data-table td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .data-table tr:nth-child(even) td { background: var(--table-stripe); }
[data-theme="light"] .data-table tr:hover td { background: var(--bg-hover) !important; }
[data-theme="light"] .table-empty { color: var(--text-tertiary) !important; }
[data-theme="light"] .total-row { background: var(--bg-input) !important; }
[data-theme="light"] .total-row td { border-top: 2px solid var(--border) !important; }

/* ALL text colors */
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4 { color: var(--text-primary); }
[data-theme="light"] .view-subtitle { color: var(--text-tertiary); }
[data-theme="light"] .stat-label { color: var(--text-secondary); }
[data-theme="light"] .stat-value { color: var(--text-primary); }
[data-theme="light"] label { color: var(--text-secondary); }
[data-theme="light"] strong { color: var(--text-primary); }
[data-theme="light"] p { color: var(--text-secondary); }

/* Buttons */
[data-theme="light"] .btn-primary {
  background: var(--accent) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent) !important;
}
[data-theme="light"] .btn-secondary {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .btn-secondary:hover {
  background: var(--bg-hover) !important;
}
[data-theme="light"] .btn-action { color: var(--blue); }
[data-theme="light"] .btn-action.delete { color: var(--red); }
[data-theme="light"] .btn-action.accept { color: var(--accent); }
[data-theme="light"] .btn-action.launch { color: var(--orange); }
[data-theme="light"] .btn-icon { color: var(--text-tertiary); }
[data-theme="light"] .btn-icon:hover { color: var(--text-primary); }

/* Filter bar, search bar */
[data-theme="light"] .filter-btn {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .filter-btn:hover { background: var(--bg-hover) !important; }
[data-theme="light"] .filter-btn.active {
  background: var(--accent-bg) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
[data-theme="light"] .search-bar input {
  background: var(--bg-card) !important;
  border-color: var(--border-input) !important;
  color: var(--text-primary) !important;
}

/* Badges */
[data-theme="light"] .badge {
  background: var(--badge-bg) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .badge-completado, [data-theme="light"] .badge-aceptado, [data-theme="light"] .badge-pagada {
  background: var(--success-bg) !important;
  color: var(--accent) !important;
}
[data-theme="light"] .badge-cancelado, [data-theme="light"] .badge-rechazado, [data-theme="light"] .badge-anulado {
  background: var(--danger-bg) !important;
  color: var(--red) !important;
}

/* Modal overlay */
[data-theme="light"] .modal { background: rgba(0,0,0,0.25) !important; }

/* Nav footer & user */
[data-theme="light"] .nav-footer { border-top: 1px solid var(--border); }
[data-theme="light"] .nav-user-avatar { background: var(--accent-bg); color: var(--accent); }

/* Contab tabs */
[data-theme="light"] .contab-tab { color: var(--text-muted); }
[data-theme="light"] .contab-tab:hover { color: var(--text-primary); }
[data-theme="light"] .contab-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Fiscal */
[data-theme="light"] .fiscal-label { color: var(--text-secondary); }
[data-theme="light"] .fiscal-value { color: var(--text-primary); }
[data-theme="light"] .fiscal-divider { background: var(--border); }

/* PyG resultado */
[data-theme="light"] .pyg-resultado {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary);
}

/* Email module */
[data-theme="light"] .email-list { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .email-item { border-bottom-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .email-item:hover { background: var(--bg-hover); }
[data-theme="light"] .email-item.active { background: var(--accent-bg); }
[data-theme="light"] .email-view { background: var(--bg-card); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .reply-panel { background: var(--bg-card); border-color: var(--border); }

/* Linea card fields */
[data-theme="light"] .linea-card-desc {
  background: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .linea-card-fields label { color: var(--text-tertiary); }
[data-theme="light"] .linea-card-remove { color: var(--text-muted); }
[data-theme="light"] .linea-card-remove:hover { color: var(--red); }

/* Pre lineas header */
[data-theme="light"] .pre-lineas-header { border-bottom-color: var(--border); color: var(--text-tertiary); }

/* Wizard */
[data-theme="light"] .wizard-step.done { color: var(--text-secondary); border-bottom-color: var(--border-input); }
[data-theme="light"] .wizard-step.done .wizard-num { background: var(--accent-bg); color: var(--accent); }

/* Scrollbars */
[data-theme="light"] ::-webkit-scrollbar { width: 8px; }
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-body); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border-input); border-radius: 4px; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* Typeahead (autocompletar de escribir) */


/* Campos solo-lectura (val-box) en modal ver entrada */

/* Adjunto chip */
.adj-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}

/* ---- Buscador de terceros (contratos): relevancia, teclado, alta inline ---- */
.search-dropdown { max-height: 380px; }
.ts-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.ts-item.ts-active, .ts-add.ts-active { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
.ts-avatar { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-bg); color: var(--accent); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.ts-body { flex: 1; min-width: 0; }
.ts-body .search-dropdown-item-name { font-size: 14px; }
.ts-body .search-dropdown-item-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-sep { margin: 0 6px; opacity: .5; }
.ts-apodo { font-weight: 500; color: var(--text-secondary); }
.ts-warn { color: var(--warning); font-weight: 600; }
.ts-chips { display: flex; gap: 4px; flex-shrink: 0; }
.ts-chip { font-size: 10px; font-weight: 600; letter-spacing: .3px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); background: var(--bg-input); }
.ts-chip-main { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.search-dropdown mark { background: var(--warning-bg); color: inherit; padding: 0; border-radius: 2px; }
[data-theme="dark"] .search-dropdown mark { background: var(--warning-bg); }
.ts-header { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: var(--text-secondary); padding: 8px 12px 4px; }
.ts-header-warn { color: var(--warning); text-transform: none; letter-spacing: 0; font-weight: 600; }
.ts-empty { padding: 12px; color: var(--text-secondary); font-size: 13px; }
.ts-more { padding: 6px 12px; font-size: 11.5px; color: var(--text-secondary); border-top: 1px dashed var(--border); }
.ts-add { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-top: 1px solid var(--border); color: var(--accent); font-weight: 600; font-size: 13px; background: var(--bg-card); position: sticky; bottom: 26px; }
.ts-add:hover { background: var(--accent-bg); }
.ts-add-plus { width: 28px; height: 28px; border-radius: 8px; border: 1.5px dashed var(--accent); display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; }
.ts-add-hint { margin-left: auto; font-weight: 400; font-size: 11px; color: var(--text-secondary); }
.ts-footer { font-size: 10.5px; color: var(--text-secondary); padding: 5px 12px; border-top: 1px solid var(--border); background: var(--bg-input); position: sticky; bottom: 0; }
.ts-footer kbd { font-family: inherit; font-size: 10px; border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; margin-right: 2px; background: var(--bg-card); }


/* Stepper */

/* Cabecera de paso */
.cw-step-head { margin: 0 0 14px; }
.cw-step-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.cw-req { color: var(--danger); font-weight: 700; }
.cw-step-help { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.45; max-width: 68ch; }

/* Buscador */
.cw-search-wrap { position: relative; }
.cw-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }

/* Tarjeta de seleccionado */

/* Partes (paso 4) */

/* Secciones */
.cw-section { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; background: var(--bg-card); }
.cw-section-title { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px; }
.cw-section-sub { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-secondary); font-size: 12px; }


/* Botón toggle de precios */

/* El separador va dentro del área recortada (un ::before), no en los bordes de la caja:
   así el carril cerrado mide 0 de verdad. Margen y relleno del propio elemento sí
   contarían en el carril y dejarían un hueco con el panel cerrado. */


/* Inputs con unidad y grandes */
.cw-final-resumen { margin-top: 16px; }
.cw-final-title { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.cw-final-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
.cw-final-grid div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-final-grid span { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); }
.cw-final-grid strong { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Navegación */
.cw-nav-counter { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
/* El desplegable del buscador del wizard va en flujo (el modal recorta lo absoluto) */
#modal-tercero { z-index: 150; } /* se abre sobre el wizard de contrato */

/* Botón "Nuevo X" fijo junto al buscador */
.cw-search-row { display: flex; gap: 10px; align-items: flex-start; }
.cw-search-row .cw-search-wrap { flex: 1; min-width: 0; }
.cw-nuevo-plus { font-size: 18px; line-height: 1; font-weight: 700; }

/* ---- Acciones de fila integradas (tablas) ---- */
.action-btns.ra { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
/* Listas de ventas, compras y productos en el ordenador (por debajo de 1280 px van en tarjetas,
   pantallas/movil.js). Con el menú al lado y el panel del contenido, a 1280-1440 px no cabían: las
   acciones de la factura quedaban fuera, tras un desplazamiento lateral sin aviso. Se estrecha el
   margen de las celdas, las acciones bajan a una segunda fila (de cuatro en cuatro en las facturas,
   de tres en tres en presupuestos y albaranes), y la columna
   «Conceptos» de las facturas (cuántas líneas tiene) se deja para cuando hay sitio. */
:is(#tabla-facturas, #tabla-presupuestos, #tabla-albaranes, #tabla-productos, #tabla-oc, #tabla-fr, #tabla-alm-movimientos, #tabla-alm-clientes) :is(th, td) { padding-left: 10px; padding-right: 10px; }
:is(#tabla-facturas, #tabla-presupuestos, #tabla-albaranes) td .action-btns.ra { flex-wrap: wrap; row-gap: 4px; width: 176px; }
:is(#tabla-presupuestos, #tabla-albaranes) td .action-btns.ra { width: 144px; }
/* En el móvil, lo que se toca con el dedo de estas pantallas mide al menos 40 px: las pestañas de
   estado se quedaban en 32, los iconos de las filas del almacén en 30, «Cambiar» cliente en 23 y
   «gestionar» familias en 15. */
@media (max-width: 800px) {
  :is(#view-presupuestos, #view-albaranes, #view-facturas, #view-almacen) .filter-btn { min-height: 40px; }
  :is(#view-almacen, #view-albaranes-compra) .alm-tabla-tarjetas .ra-btn { min-width: 40px; min-height: 40px; }
  :is(#modal-presupuesto, #modal-factura, #modal-agrupar, #modal-oc, #modal-fr, #modal-alc, #modal-editar-albaran) .selected-card-btn { min-height: 36px; padding: 6px 12px; }
  #modal-producto label .btn-link { display: inline-block; padding: 12px 6px; margin: -12px 0 -8px; }
  #af-asiento-lineas-body :is(input, select) { min-height: 40px; }
  :is(#presupuesto-lineas-list .linea-card-remove, #ncr-form-inline .btn-icon, #af-asiento-lineas-body .ra-btn, #modal-recurrentes .modal-header .btn-icon, .alm-linea-quitar) { min-width: 40px; min-height: 40px; }
  :is(.alc-linea input, .alm-estanteria) { min-height: 40px; }
  .alm-firma-cab .btn-link { padding: 10px 6px; }
  /* Cada familia, con sus dos botones debajo del nombre: si no, unas filas los partían y otras no */
  .familia-fila { flex-wrap: wrap; }
  .familia-fila > .action-btns { flex: 1 1 100%; display: flex; gap: 8px; }
  .familia-fila > .action-btns .btn { flex: 1; min-height: 40px; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  :is(#tabla-facturas, #tabla-presupuestos, #tabla-albaranes, #tabla-productos, #tabla-oc, #tabla-fr, #tabla-alm-movimientos, #tabla-alm-clientes) :is(th, td) { padding-left: 8px; padding-right: 8px; }
  #tabla-facturas :is(th, td):nth-child(4) { display: none; }
}
.ra-primary { height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--accent-border); background: var(--accent-bg); color: var(--accent); font-weight: 600; font-size: 12.5px; cursor: pointer; font-family: inherit; margin-right: 4px; white-space: nowrap; }
.ra-primary:hover { background: var(--accent); color: var(--text-primary); border-color: var(--accent); }
/* El rótulo de un botón de icono (app.js): sale enseguida al pasar el ratón. */
.rotulo-icono { position: fixed; z-index: 3000; max-width: 260px; padding: 5px 9px; border-radius: 8px; background: #1f2937; color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.3; pointer-events: none; box-shadow: 0 4px 14px rgb(15 23 42 / .22); }
.ra-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .12s, color .12s, border-color .12s; }
.ra-btn:hover { background: var(--bg-input); border-color: var(--border); color: var(--text-primary); }
.ra-btn:focus-visible, .ra-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ================= Nota junto a la etiqueta de un campo ================= */
.campo-nota { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-secondary); margin-left: 4px; }

.ra-primary-danger { color: var(--danger); border-color: var(--border); background: var(--bg-card); }
.ra-primary-danger:hover { background: var(--danger-bg); border-color: var(--border); color: var(--text-primary); }
a.ra-btn { text-decoration: none; }

/* ================= Selector de fecha propio ================= */
.rdp-wrap { position: relative; }
/* El campo nativo queda escondido también desactivado: «input:disabled» le subía la opacidad y el
   alto mínimo de los formularios lo estiraba, y salía un cuadro encima de la fecha. */
.rdp-native { position: absolute !important; opacity: 0 !important; width: 1px; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; pointer-events: none; left: 0; top: 0; }
.rdp-field { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; font-family: inherit; font-size: 14px; color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 12px; padding: 9px 12px; cursor: pointer; box-sizing: border-box; min-height: 40px; }
/* En un formulario la fecha mide lo que los demás campos (44 px, tema-interfaz.css): con 40 la fila
   quedaba dentada junto a un desplegable o un importe. En las barras de filtros se queda en 40. */
.form-group .rdp-field { min-height: 44px; }
.rdp-field:hover { border-color: var(--accent); }
.rdp-active .rdp-field, .rdp-field:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); outline: none; }
.rdp-empty .rdp-text { color: var(--text-secondary); }
.rdp-icon { color: var(--text-secondary); display: flex; }
.rdp-wrap .rdp-field[disabled] { opacity: .6; cursor: default; }
/* Con transición en vez de @keyframes la entrada y la salida quedan emparejadas y son
   interrumpibles: abrir y cerrar rápido ya no reinicia desde cero. El origen apunta al
   campo (lo fija datepicker.js): un popover crece desde su disparador, no desde el centro. */
.rdp-pop { position: fixed; z-index: 500; display: none; width: 292px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: 12px; font-family: inherit;
  opacity: 0; transform: translateY(-4px); transform-origin: var(--rdp-origen, top left);
  transition: opacity 140ms var(--ease-salida), transform 140ms var(--ease-salida), display 140ms allow-discrete; }
.rdp-pop.rdp-open { display: block; opacity: 1; transform: none; }
@starting-style { .rdp-pop.rdp-open { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .rdp-pop { transition: none; } }
.rdp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.rdp-nav { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rdp-nav:hover { background: var(--bg-input); border-color: var(--border); color: var(--text-primary); }
.rdp-title { display: flex; gap: 4px; flex: 1; justify-content: center; }
.rdp-title select { appearance: none; -webkit-appearance: none; border: 1px solid transparent; background: transparent; font-family: inherit; font-weight: 700; font-size: 14px; color: var(--text-primary); padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.rdp-title select:hover { background: var(--bg-input); border-color: var(--border); }
.rdp-title input.rdp-year { width: 72px; border: 1px solid transparent; border-radius: 8px; background: transparent; font-family: inherit; font-weight: 700; font-size: 14px; text-align: center; color: var(--text-primary); padding: 4px 6px; -moz-appearance: textfield; appearance: textfield; }
.rdp-title input.rdp-year::-webkit-outer-spin-button, .rdp-title input.rdp-year::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rdp-title input.rdp-year:hover, .rdp-title input.rdp-year:focus { background: var(--bg-input); border-color: var(--border); outline: none; }
.rdp-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; color: var(--text-secondary); margin-bottom: 4px; }
.rdp-dow span:nth-child(6), .rdp-dow span:nth-child(7) { color: var(--warning); }
.rdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rdp-day { height: 34px; border-radius: 8px; border: 1px solid transparent; background: transparent; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-primary); cursor: pointer; font-variant-numeric: tabular-nums; }
.rdp-day:hover { background: var(--accent-bg); color: var(--accent); }
.rdp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rdp-out { color: var(--text-secondary); opacity: .5; }
.rdp-we { color: var(--warning); }
.rdp-today-day { border-color: var(--accent); font-weight: 700; }
/* Sobre el color principal, el texto va en su color de contraste: con el del texto general (oscuro)
   el día elegido no se leía. Lo mismo el paso activo del presupuesto y el icono de «Pasar a factura». */
.rdp-sel, .rdp-sel:hover { background: var(--accent); color: var(--fc-on-primary, #fff); border-color: var(--accent); font-weight: 700; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-border) 35.0%, transparent); }
.rdp-dis { opacity: .3; cursor: not-allowed; }
.rdp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.rdp-link { background: none; border: none; color: var(--text-secondary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.rdp-link:hover { background: var(--bg-input); color: var(--text-primary); }
.rdp-today { color: var(--accent); }
.rdp-today:hover { background: var(--accent-bg); color: var(--accent); }


/* Nombre resaltado como un único elemento (el contenedor es flex) y lupa anclada al campo */
.ts-name { display: inline; white-space: normal; }
.ts-name mark, .ts-apodo mark, .search-dropdown-item-info mark { display: inline; }



/* ================= Wizard Presupuesto (mismo sistema visual) ================= */
#modal-presupuesto .modal-content { max-width: 920px; }
#modal-presupuesto .modal-header h3 { font-size: 22px; letter-spacing: -0.01em; }
#modal-presupuesto .wizard-steps.cw-stepper { display: flex; gap: 0; margin: 6px 0 26px; padding: 0; border: none; background: none; }
#modal-presupuesto .cw-stepper .wizard-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; border-bottom: none; padding: 0; position: relative; color: var(--text-secondary); font-size: 12px; font-weight: 500; box-shadow: none; }
#modal-presupuesto .cw-stepper .wizard-step::before { content: ''; position: absolute; top: 14px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
#modal-presupuesto .cw-stepper .wizard-step:last-child::before { display: none; }
#modal-presupuesto .cw-stepper .wizard-step.done::before { background: var(--accent); }
#modal-presupuesto .cw-stepper .wizard-num { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 2px solid var(--border); color: var(--text-secondary); font-size: 12px; font-weight: 700; margin: 0; }
#modal-presupuesto .cw-stepper .wizard-step em { font-style: normal; white-space: nowrap; }
#modal-presupuesto .cw-stepper .wizard-step.active { color: var(--accent); font-weight: 700; background: none; border-bottom: none; }
#modal-presupuesto .cw-stepper .wizard-step.active .wizard-num { border-color: var(--accent); background: var(--accent); color: var(--fc-on-primary, #fff); box-shadow: 0 0 0 4px var(--accent-bg); }
#modal-presupuesto .cw-stepper .wizard-step.done { color: var(--text-primary); }
#modal-presupuesto .cw-stepper .wizard-step.done .wizard-num { border-color: var(--accent); background: var(--accent); color: var(--text-primary); font-size: 0; }
#modal-presupuesto .cw-stepper .wizard-step.done .wizard-num::after { content: ''; width: 6px; height: 10px; border: solid var(--border); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
#modal-presupuesto .contrato-step-card { padding: 0; }
#modal-presupuesto .contrato-step-label { font-size: 11px; letter-spacing: .6px; color: var(--text-secondary); margin-bottom: 6px; display: block; font-weight: 700; text-transform: uppercase; }
#modal-presupuesto .cw-search-input { width: 100%; font-size: 15px; padding: 13px 14px 13px 42px; border-radius: 10px; border: 1.5px solid var(--border-input); background: var(--bg-input); color: var(--text-primary); outline: none; box-sizing: border-box; }
#modal-presupuesto .cw-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
#modal-presupuesto .cw-search-wrap .cw-search-icon { top: 25px; transform: translateY(-50%); }
#modal-presupuesto .cw-search-wrap .search-dropdown { position: static; margin-top: 8px; max-height: 360px; border-radius: 12px; }
#modal-presupuesto .cw-search-wrap .ts-add, #modal-presupuesto .cw-search-wrap .ts-footer { position: static; }
#modal-presupuesto .cw-nuevo { flex-shrink: 0; height: 50px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; border: 1.5px dashed var(--accent); color: var(--accent); background: var(--bg-card); }
#modal-presupuesto .cw-nuevo:hover { background: var(--accent); color: var(--text-primary); border-style: solid; }
#modal-presupuesto .tercero-selected-card { margin-top: 0; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--bg-card); }
#modal-presupuesto .tercero-selected-head { padding: 12px 14px; gap: 10px; background: var(--accent-bg); border-bottom: 1px solid var(--accent-border); }
#modal-presupuesto .tercero-selected-check { display: flex; color: var(--accent); font-size: 0; line-height: 0; }
#modal-presupuesto .tercero-selected-card .selected-card-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
#modal-presupuesto .cw-change { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent); border: 1px solid var(--accent-border); background: var(--bg-card); cursor: pointer; }
#modal-presupuesto .cw-change:hover { background: var(--accent); color: var(--text-primary); border-color: var(--accent); }
#modal-presupuesto .tercero-selected-detalles { padding: 14px 16px; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
#modal-presupuesto .cw-section { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin: 14px 0 0; background: var(--bg-card); }
#modal-presupuesto .cw-section .form-group { margin: 0; }
#modal-presupuesto .cw-section .form-group label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); }
#modal-presupuesto .cw-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
#modal-presupuesto .cw-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#modal-presupuesto .cw-grid-4 > *, #modal-presupuesto .cw-grid-2 > * { min-width: 0; }
@media (max-width: 800px) { #modal-presupuesto .cw-grid-4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #modal-presupuesto .cw-grid-4, #modal-presupuesto .cw-grid-2 { grid-template-columns: 1fr; } }
#modal-presupuesto #presupuesto-numero[disabled], #modal-presupuesto #presupuesto-centro[disabled] { opacity: 1; color: var(--text-secondary); background: var(--bg-input); }
.cw-inline-new { border-style: dashed; border-color: var(--accent); background: var(--accent-bg); }
.cw-inline-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#modal-presupuesto .lineas-add-bar { margin-top: 12px; }
#modal-presupuesto .factura-totales { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; background: var(--bg-card); }
#modal-presupuesto .cw-final-resumen { margin-top: 14px; }
#modal-presupuesto .cw-final-grid { grid-template-columns: repeat(4, 1fr); }
#modal-presupuesto .cw-final-total { color: var(--accent); font-size: 15px; }
#modal-presupuesto .cw-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
/* En el móvil el asistente no cabía: el buscador de clientes se quedaba en 129 px al lado de
   «Nuevo cliente» (y en los resultados la píldora tapaba el nombre), el resumen cortaba la fecha y
   el total con puntos suspensivos, y en el pie los botones se partían en dos líneas y el
   principal se salía por la derecha. */
@media (max-width: 600px) {
  #modal-presupuesto .cw-search-row { flex-wrap: wrap; }
  #modal-presupuesto .cw-search-row > * { flex: 1 1 100%; }
  #modal-presupuesto .cw-final-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #modal-presupuesto .cw-final-grid strong { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  #modal-presupuesto .cw-nav { flex-wrap: wrap; }
  #modal-presupuesto .cw-nav-counter { order: -1; flex: 1 1 100%; text-align: center; }
  #modal-presupuesto .cw-nav > div:not([class]) { display: none; }
  #modal-presupuesto .cw-nav .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
}

/* Paso 1 de presupuesto sin scroll: tarjeta compacta y opciones avanzadas plegadas */
#modal-presupuesto .tercero-selected-detalles { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 14px; }
#modal-presupuesto .tercero-selected-detalles .tercero-detalle-row { flex-direction: row; gap: 6px; align-items: baseline; }
#modal-presupuesto .tercero-selected-detalles .tercero-detalle-label::after { content: ":"; }
#modal-presupuesto .tercero-selected-detalles .tercero-detalle-value { font-size: 12.5px; font-weight: 500; }
#modal-presupuesto .tercero-selected-detalles .tercero-detalle-row:last-child { margin-left: auto; }
.cw-details { padding: 0; overflow: hidden; }
.cw-summary { cursor: pointer; list-style: none; padding: 14px 18px; margin: 0; display: flex; align-items: center; gap: 10px; user-select: none; }
.cw-summary::-webkit-details-marker { display: none; }
.cw-summary::before { content: ""; width: 8px; height: 8px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; flex-shrink: 0; }
.cw-details[open] .cw-summary::before { transform: rotate(45deg); }
.cw-details[open] .cw-summary { border-bottom: 1px solid var(--border); }
.cw-details > *:not(summary) { margin-left: 18px; margin-right: 18px; }
.cw-details > *:last-child { margin-bottom: 16px; }
#modal-presupuesto .cw-details .cw-section-title { padding: 0; }
/* Opciones avanzadas del presupuesto: bloque uniforme, sin fondo gris ni sangrías desiguales */
#modal-presupuesto #presupuesto-centro-form { background: transparent !important; border: none !important; padding: 0; margin-top: 12px; }
#modal-presupuesto .cw-details > *:not(summary) { margin-left: 18px; margin-right: 18px; }
#modal-presupuesto .cw-details .cw-section-title { margin: 14px 18px 10px; padding: 0; }
#modal-presupuesto .cw-details .form-grid { margin-top: 0; }
#modal-presupuesto .cw-details #presupuesto-centro-form .form-group label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); }
#modal-presupuesto .cw-details > .form-group:last-of-type { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
/* Presupuesto · paso Líneas: tarjeta de línea y totales integrados */
#modal-presupuesto .linea-card { border-radius: 12px; padding: 14px 16px 14px; }
#modal-presupuesto .linea-card-remove { top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-secondary); }
#modal-presupuesto .linea-card-remove:hover { background: var(--danger-bg); color: var(--danger); }
#modal-presupuesto .linea-card-header { margin-right: 36px; }
#modal-presupuesto .linea-card-fields { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-left: 36px; }
 #modal-presupuesto .linea-card-field:has(.pre-linea-producto-select) { flex: 1 1 220px; min-width: 0; }
 #modal-presupuesto .pre-linea-producto-select { width: 100% !important; min-width: 0; }
#modal-presupuesto .linea-card-field:has(.linea-card-base) { margin-left: auto; align-items: flex-end; }
#modal-presupuesto .linea-card-fields label { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--text-secondary); }
#modal-presupuesto .linea-card-fields input, #modal-presupuesto .linea-card-fields select { border-radius: 8px; padding: 9px 10px; font-size: 13.5px; height: 38px; box-sizing: border-box; }
#modal-presupuesto .linea-card-base { font-size: 16px; padding: 0 0 7px; min-width: 90px; }
#modal-presupuesto .factura-totales { margin: 14px 0 0; padding: 4px 18px 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
#modal-presupuesto .factura-totales .total-row { justify-content: flex-end; gap: 24px; padding: 8px 0; background: none !important; color: var(--text-secondary); font-size: 13.5px; border: none; }
#modal-presupuesto .factura-totales .total-row span:last-child { min-width: 120px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 600; }
#modal-presupuesto .factura-totales .total-final { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 16px; color: var(--text-primary); }
#modal-presupuesto .factura-totales .total-final span:last-child { color: var(--accent); font-size: 20px; font-weight: 800; }
#modal-presupuesto .lineas-add-bar .btn-primary { border-radius: 10px; }
#modal-presupuesto .lineas-add-bar .btn-secondary { border-radius: 999px; }


/* ===== Diálogo de confirmación y toasts (sustituyen alert/confirm nativos) ===== */
#ui-dialog-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.ui-dialog-overlay { position: fixed; inset: 0; background: var(--info-bg); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .18s ease; pointer-events: auto; backdrop-filter: blur(1.5px); }
.ui-dialog-overlay.ui-dialog-show { opacity: 1; }
.ui-dialog { width: 100%; max-width: 420px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.28); padding: 22px 22px 18px; transform: translateY(8px) scale(.98); transition: transform .18s ease; }
.ui-dialog-show .ui-dialog { transform: none; }
.ui-dialog-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.ui-dialog-msg { font-size: 14px; line-height: 1.5; color: var(--text-primary); white-space: pre-line; }
/* Los campos del diálogo (el texto de uiPrompt, la causa y el motivo de una rectificativa): sin
   esto se quedaban con el control del navegador, de 20 px y con el texto pegado al borde. */
.ui-dialog :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-input); border-radius: 12px; background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: 14px; }
.ui-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.ui-dialog-actions .btn { padding: 9px 18px; font-size: 14px; }
.ui-dialog-danger { background: var(--danger-bg); color: var(--text-primary); border: none; }
.ui-dialog-danger:hover { background: var(--danger-bg); }

#ui-toast-layer { position: fixed; top: 18px; right: 18px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: min(400px, calc(100vw - 36px)); }
.ui-toast { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-left-width: 4px; border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(0,0,0,.18); font-size: 13.5px; color: var(--text-primary); opacity: 0; transform: translateX(20px); transition: opacity .22s ease, transform .22s ease; pointer-events: auto; }
.ui-toast-show { opacity: 1; transform: none; }
.ui-toast-txt { line-height: 1.4; white-space: pre-line; }
.ui-toast-ico { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-primary); }
.ui-toast-ok { border-left-color: var(--accent-border); }
.ui-toast-ok .ui-toast-ico { background: var(--action); }
.ui-toast-ok .ui-toast-ico::after { content: '✓'; }
.ui-toast-error { border-left-color: var(--border); }
.ui-toast-error .ui-toast-ico { background: var(--danger-bg); }
.ui-toast-error .ui-toast-ico::after { content: '!'; }
.ui-toast-info { border-left-color: var(--accent); }
.ui-toast-info .ui-toast-ico { background: var(--accent); }
.ui-toast-info .ui-toast-ico::after { content: 'i'; font-style: italic; }


/* ===== Panel de inicio ===== */

.res-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.res-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--bg-card); cursor: pointer; text-align: left; font-family: inherit; transition: border-color .15s, box-shadow .15s, transform .05s; }
.res-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.res-card:active { transform: translateY(1px); }
.res-card-ico { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.res-card-title { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.res-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.45; }

@media (max-width: 700px) {  .res-cards { grid-template-columns: 1fr; } }

/* ===== Menú ERP: grupos colapsables ===== */
.nav-group { display: flex; flex-direction: column; }
.nav-group-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px; background: none; border: none; border-radius: 8px;
  color: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  cursor: pointer; font-family: inherit; text-align: left; transition: color .15s, background .15s;
}
.nav-group-head:hover { color: var(--text-primary); }
.nav-group-head > svg:first-child { opacity: .7; flex-shrink: 0; }
.nav-group-head span { flex: 1; }
.nav-group-chevron { transition: transform .18s ease; opacity: .6; }
.nav-group-collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group-body { display: flex; flex-direction: column; gap: 2px; overflow: hidden; padding-left: 8px; margin-left: 12px; border-left: 1.5px solid var(--border); }
.nav-group-collapsed .nav-group-body { display: none; }
.nav-group-body .nav-item { font-size: 13.5px; padding: 8px 12px; }
.nav-group-body .nav-item svg { opacity: .75; }

/* ===== Dashboard de Contabilidad (tarjetas) ===== */
.contab-dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 4px; }
.contab-dash-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--bg-card); cursor: pointer; text-align: left; font-family: inherit; transition: border-color .15s, box-shadow .15s, transform .05s; }
.contab-dash-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.contab-dash-card:active { transform: translateY(1px); }
.cdc-ico { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.cdc-t { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.cdc-d { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
.contab-tab-home { font-weight: 700; color: var(--accent); }

/* ===== Contabilidad: secciones individuales con la nueva estética ===== */
.contab-section-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.contab-section-head h2 { flex: 1; margin: 0; font-size: 20px; color: var(--text-primary); }
.contab-panel { margin-top: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); padding: 16px 18px; }
.contab-panel .contab-panel-header { margin-bottom: 14px; }
.contab-panel .search-bar { margin-bottom: 0; }
.contab-panel .search-bar input { width: 100%; }
.contab-panel .table-container { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.contab-panel .filter-bar { margin-bottom: 12px; }
#contab-panel-libro-mayor .cw-search-input { padding: 11px 12px 11px 40px; font-size: 14px; }
#contab-panel-libro-mayor .search-dropdown { border-radius: 10px; top: calc(100% + 4px); box-shadow: 0 12px 32px rgba(0,0,0,.14); }

/* ===== Modal Ver Asiento ===== */
.va-body { padding: 4px 2px 2px; }
.va-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.va-info-cell { background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.va-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); }
.va-val { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.va-info-cell .badge { align-self: flex-start; }
.va-concepto { font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
.va-docref { margin-top: 6px; font-size: 12.5px; color: var(--text-secondary); }
.va-cta-nombre { font-size: 12px; color: var(--text-secondary); }
.va-tabla tfoot .va-totales td { background: var(--accent-bg); border-top: 2px solid var(--accent-border); font-weight: 800; color: var(--text-primary); padding: 10px 12px; }
.va-cuadrado { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--accent); }
.va-descuadrado { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--danger); }
@media (max-width: 700px) { .va-info { grid-template-columns: 1fr 1fr; } }
.mc-rol { font-size: 11px; font-weight: 600; color: var(--text-secondary); }

/* ===== Repaso global de modales: inputs y foco consistentes con la nueva estética ===== */
.modal-form .form-group input, .modal-form .form-group select, .modal-form .form-group textarea {
  border-radius: 10px; padding: 10px 12px; border-width: 1.5px;
}
.modal-form .form-group input:focus, .modal-form .form-group select:focus, .modal-form .form-group textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg);
}
.modal-form .cw-section { margin-bottom: 14px; }
/* Campos apilados dentro de una tarjeta de sección: separados entre sí,
   sin margen extra en el último ni dentro de un grid (el gap ya separa) */
.modal-form .cw-section .form-group { margin-bottom: 14px; }
.modal-form .cw-section .form-grid > .form-group,
.modal-form .cw-section .form-group:last-child { margin-bottom: 0; }

/* ===== Modal Nueva Factura ===== */
#modal-factura .fx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) { #modal-factura .fx-grid { grid-template-columns: 1fr; } }
/* La descripción, que es lo que se lee de la línea, se lleva el sitio que sobra; la unidad y el IVA
   caben enteros («Servicio», «Suplido») y el total, con cinco cifras, no se parte. Por eso la
   ventana es más ancha que las demás. */
#modal-factura .modal-content { max-width: 960px; }
.fx-conceptos-head, #modal-factura .concepto-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 84px 110px 100px 112px 32px; gap: 8px; align-items: center;
}
.fx-conceptos-head { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); padding: 0 0 6px; }
.fx-conceptos-head span:nth-child(6) { text-align: right; }
#modal-factura .concepto-ud-wrap { min-width: 0; }
#modal-factura .concepto-ud-wrap select, #modal-factura .concepto-ud-wrap input { width: 100%; }
.fx-totales .fx-desg span em { font-style: normal; font-size: 11px; color: var(--text-secondary); font-weight: 500; margin-left: 4px; }
.fx-totales .fx-desg-irpf span:last-child { color: var(--danger); }
#modal-factura .concepto-row { margin-bottom: 8px; }
#modal-factura .concepto-row input, #modal-factura .concepto-row select { width: 100%; box-sizing: border-box; min-width: 0; border-radius: 8px; padding: 9px 10px; }
#modal-factura .concepto-total { display: block; width: auto; text-align: right; white-space: nowrap; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
#modal-factura .concepto-remove { width: 32px; height: 32px; border-radius: 8px; color: var(--text-secondary); }
#modal-factura .concepto-remove:hover { color: var(--danger); background: var(--danger-bg); }
/* Sin sitio para la cabecera de columnas, cada concepto es una tarjeta con sus campos rotulados. */
@media (max-width: 860px) {
  .fx-conceptos-head { display: none; }
  #modal-factura .concepto-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
  #modal-factura .concepto-row > :first-child { grid-column: 1 / -1; }
  #modal-factura .concepto-total { text-align: left; padding: 9px 0; }
  #modal-factura .concepto-remove { justify-self: end; align-self: center; width: 40px; height: 40px; }
}

/* Totales destacados (factura y agrupar) */
.fx-totales { background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: 12px; padding: 12px 16px; }
.fx-totales .total-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13.5px; color: var(--text-primary); }
/* La regla de las filas de total de las tablas les ponía fondo blanco: dentro de la caja de totales
   salían franjas blancas, con el importe pegado a su borde. */
[data-theme="light"] .factura-totales .total-row { background: transparent !important; }
.fx-totales .total-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.fx-totales .total-final { border-top: 1.5px dashed var(--accent-border); margin-top: 6px; padding-top: 10px; font-size: 16px; font-weight: 800; }
.fx-totales .total-final span:last-child { color: var(--accent); font-size: 20px; font-weight: 800; }

/* Lista de albaranes del modal Agrupar */
.agrupar-list { max-height: 300px; overflow-y: auto; }
.agrupar-list label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.agrupar-list label:hover { border-color: var(--accent); background: var(--accent-bg); }
/* Buscador con lupa dentro de cualquier modal */
.modal-form .cw-search-wrap { position: relative; width: 100%; }
.modal-form .cw-search-wrap .cw-search-input { width: 100%; box-sizing: border-box; padding: 11px 12px 11px 40px; font-size: 14px; border-radius: 10px; border: 1.5px solid var(--border-input); background: var(--bg-input); color: var(--text-primary); outline: none; transition: border-color .15s, box-shadow .15s; }
.modal-form .cw-search-wrap .cw-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.cw-search-wrap:has(.cw-search-input.hidden) .cw-search-icon { display: none; }
/* Agrupar: fila de albarán con la estética clara */
.agrupar-list { margin: 0; padding: 0; background: transparent; border: none; }
.agrupar-item { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: var(--bg-input); color: var(--text-primary); }
.agrupar-item strong { color: var(--text-primary); }
.agrupar-item-importe { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.agrupar-item input[type="checkbox"] { accent-color: var(--accent); width: 17px; height: 17px; }

/* ===== KPIs financieros formales ===== */
.fin-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.fin-kpi { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.fin-kpi-lbl { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); }
.fin-kpi-val { font-size: 22px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.fin-kpi-rojo { color: var(--danger); }
@media (max-width: 700px) { .fin-kpis { grid-template-columns: 1fr; } }

/* Números tabulares en todas las tablas de datos */
.data-table td { font-variant-numeric: tabular-nums; }

/* ===== Filtros de Facturas ===== */
.fact-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
.fact-filtro { display: flex; flex-direction: column; gap: 4px; }
.fact-filtro label { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); }
.fact-filtro input, .fact-filtro select { border: 1.5px solid var(--border-input); border-radius: 9px; padding: 8px 10px; background: var(--bg-input); color: var(--text-primary); font-size: 13px; outline: none; min-width: 120px; }
.fact-filtro input:focus, .fact-filtro select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.fact-filtro select#ff-cliente { max-width: 220px; }
/* Las barras de filtros de las listas de ventas y compras, con las medidas de .alm-filtros (la de
   albaranes de compra y la del almacén): los campos medían 35 px y las fechas 40, y las etiquetas
   quedaban a dos alturas; y dentro de Compras convivían dos barras distintas. */
.fact-filtros .fact-filtro label { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.fact-filtros .fact-filtro { flex: 1 1 130px; min-width: 0; }
.fact-filtros .fact-filtro:has(select) { flex-basis: 190px; }
.fact-filtros .fact-filtro :is(input, select) { box-sizing: border-box; width: 100%; min-width: 0; height: 40px; padding: 0 12px; border-width: 1px; border-radius: 12px; font-size: 14px; }
.fact-filtros > .btn.btn-small { min-height: 40px; }
.fact-resumen { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 12px; padding: 10px 16px; background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: 10px; font-size: 13px; color: var(--text-primary); }
.fact-resumen strong { font-variant-numeric: tabular-nums; }

/* ===== Balance de situación: misma paleta que el resto del ERP ===== */
.bal-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bal-cab h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.2px; color: var(--text-primary); }
.bal-periodo { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.bal-cab-acc { display: flex; gap: 6px; }
.bal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.bal-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.bal-head { background: var(--accent); color: var(--text-primary); padding: 10px 14px; font-weight: 800; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; display: flex; justify-content: space-between; }
.bal-masa { display: flex; justify-content: space-between; padding: 9px 14px; background: var(--bg-main); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-weight: 800; font-size: 13px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bal-ep { border-bottom: 1px solid var(--border); }
.bal-ep summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; font-size: 13px; color: var(--text-primary); }
.bal-ep summary::-webkit-details-marker { display: none; }
.bal-ep summary:hover { background: var(--bg-hover); }
.bal-ep-nombre { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.bal-ep-nombre small { font-weight: 400; color: var(--text-secondary); font-size: 11px; }
.bal-chev { display: inline-block; width: 12px; color: var(--text-secondary); transition: transform .15s; }
.bal-ep[open] .bal-chev { transform: rotate(90deg); }
.bal-ep-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bal-cuentas { background: var(--bg-main); border-top: 1px dashed var(--border); }
.bal-cuenta { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; padding: 6px 14px 6px 34px; font-size: 12.5px; border-bottom: 1px dashed var(--border); color: var(--text-primary); }
.bal-cuenta:last-child { border-bottom: none; }
.bal-cuenta code { color: var(--accent); font-weight: 700; font-size: 11.5px; }
.bal-cuenta-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bal-neg { color: var(--danger); }
.bal-vacio { padding: 10px 14px; font-size: 12.5px; color: var(--text-secondary); }
.bal-total { display: flex; justify-content: space-between; padding: 11px 14px; background: var(--accent-bg, var(--success-bg)); color: var(--text-primary); font-weight: 800; font-size: 13.5px; border-top: 2px solid var(--accent); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .bal-grid { grid-template-columns: 1fr; } }
/* Sumas y Saldos: columnas bien repartidas, importes a la derecha */
#tabla-balance-sumas { table-layout: fixed; min-width: 820px; }
#tabla-balance-sumas th:nth-child(1), #tabla-balance-sumas td:nth-child(1) { width: 90px; }
#tabla-balance-sumas th:nth-child(2), #tabla-balance-sumas td:nth-child(2) { width: auto; }
#tabla-balance-sumas th:nth-child(n+3), #tabla-balance-sumas td:nth-child(n+3) { width: 120px; text-align: right; }
/* En el pie la primera celda abarca dos columnas: el total del Debe es su 2.º hijo, no el 3.º. */
#tabla-balance-sumas tfoot td:not(:first-child) { text-align: right; }
#balance-sumas-saldos .table-container { overflow-x: auto; }
#tabla-balance-sumas tfoot td { background: var(--bg-input); border-top: 2px solid var(--border); }
/* PyG: importes a la derecha */
#tabla-pyg-ingresos th:nth-child(3), #tabla-pyg-ingresos td:nth-child(3),
#tabla-pyg-gastos th:nth-child(3), #tabla-pyg-gastos td:nth-child(3) { text-align: right; }

/* Autocompletar de los filtros de lista */
.fact-filtro { position: relative; }
.ff-dd { position: absolute; top: 100%; left: 0; min-width: 100%; z-index: 130; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.14); max-height: 240px; overflow-y: auto; }
.ff-dd-item { padding: 8px 12px; font-size: 13px; cursor: pointer; color: var(--text-primary); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ff-dd-item:last-child { border-bottom: none; }
.ff-dd-item:hover { background: var(--bg-hover); }

/* ===== PyG: cascada analítica (EBITDA/EBIT/BAI) ===== */
.pyg-cascada { max-width: 640px; margin: 0 auto 20px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
.pyg-c-title { background: var(--accent); color: var(--text-primary); padding: 9px 16px; font-weight: 700; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; }
[data-theme="dark"] .pyg-c-title { background: var(--info-bg); }
.pyg-c-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 16px; font-size: 13.5px; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.pyg-c-row:last-child { border-bottom: none; }
.pyg-c-sub { background: var(--bg-input); font-weight: 700; }
.pyg-c-total { background: var(--accent-bg, var(--success-bg)); font-weight: 800; font-size: 15px; border-top: 2px solid var(--accent); }

/* ===== Analítica: dashboard formal ===== */
.ana-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1100px) { .ana-cards { grid-template-columns: 1fr 1fr; } }
.ana-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 0 0 10px; overflow: hidden; }
.ana-card-head { background: var(--info-bg); color: var(--text-primary); padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 8px; }
[data-theme="dark"] .ana-card-head { background: var(--info-bg); }
.ana-card-total { border-color: var(--border); }
.ana-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 14px; font-size: 13px; color: var(--text-primary); }
.ana-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ana-row-margen { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 8px; font-weight: 700; }
.ana-row-margen span:last-child { font-size: 15px; font-weight: 800; }
.ana-row-pct span:last-child { font-weight: 700; }
.ana-mini { padding: 6px 14px 0; font-size: 11px; color: var(--text-secondary); }
.ana-mini strong { font-variant-numeric: tabular-nums; }

/* Cambiar el reparto de los comunes: enlace discreto dentro de la tarjeta (solo admin) */
.ana-reparto-link { margin: 6px 14px 0; padding: 0; background: none; border: 0; font: inherit; font-size: 11px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ana-reparto-link:hover { color: var(--text-primary); }
.ana-reparto-edit { margin: 8px 14px 0; padding-top: 8px; border-top: 1px dashed var(--border); display: grid; gap: 6px; }
.ana-reparto-edit > label { font-size: 11px; color: var(--text-secondary); }
.ana-reparto-edit select { width: 100%; min-height: 38px; font-size: 13px; padding: 8px 10px; }
.ana-reparto-pcts { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.ana-reparto-pcts label { flex: 1 1 120px; font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ana-reparto-pcts input { width: 64px; min-width: 0; min-height: 38px; font-size: 13px; padding: 8px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.ana-reparto-error { margin: 0; font-size: 11px; color: #b91c1c; }
.ana-reparto-acciones { display: flex; gap: 6px; }

.ana-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .ana-charts { grid-template-columns: 1fr; } }
.ana-chart { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ana-chart-title { background: var(--info-bg); color: var(--text-primary); padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
[data-theme="dark"] .ana-chart-title { background: var(--info-bg); }
.ana-chart-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.ana-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-primary); }
.ana-bar-mes { width: 34px; flex-shrink: 0; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ana-bar { flex: 1; height: 14px; background: var(--bg-secondary); border-radius: 7px; overflow: hidden; display: flex; }
.ana-bar i { display: block; height: 100%; }
.ana-seg-res { background: var(--action); }
/* Colores de serie sólidos: los fondos pastel de aviso no se distinguían del carril de la barra. */
.ana-seg-gal { background: var(--warning); }
.ana-seg-com { background: var(--purple); }
.ana-seg-neutro { background: color-mix(in oklab, var(--action) 60%, #fff); border-radius: 7px; }
.ana-bar-total { width: 110px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; flex-shrink: 0; }
.ana-leyenda { display: flex; gap: 16px; padding: 0 14px 12px; font-size: 11.5px; color: var(--text-secondary); }
.ana-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.ana-dot-res { background: var(--action); } .ana-dot-gal { background: var(--warning); } .ana-dot-com { background: var(--purple); }
.ana-vacio { color: var(--text-secondary); font-size: 12.5px; padding: 6px 0; }

/* Cobros y Pagos: conmutador de vista destacado (segmented control) */
#tes-vista { background: var(--bg-input); border: 1.5px solid var(--border); border-radius: 12px; padding: 4px; gap: 4px; display: inline-flex; }
#tes-vista .filter-btn { border: none; background: transparent; font-size: 14px; font-weight: 700; padding: 9px 22px; border-radius: 9px; color: var(--text-secondary); transition: background .15s, color .15s; }
#tes-vista .filter-btn:hover { color: var(--text-primary); }
#tes-vista .filter-btn.active { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--text-primary) !important; box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-border) 35.0%, transparent); }
/* El modo (Cobros/Pagos) también gana un poco de presencia */
#tes-modo .filter-btn { font-weight: 700; padding: 9px 18px; }
#tes-modo .filter-btn.active { background: var(--info-bg) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
[data-theme="dark"] #tes-modo .filter-btn.active { background: var(--info-bg) !important; border-color: var(--border) !important; }

/* Libro Mayor: buscador y botón Cargar juntos */
#contab-panel-libro-mayor .contab-panel-header { gap: 10px; align-items: center; }
#contab-panel-libro-mayor .contab-panel-header .form-group { margin: 0 !important; flex: 0 1 440px !important; min-width: 260px !important; width: auto !important; }
#contab-panel-libro-mayor #btn-cargar-mayor { flex-shrink: 0; }

/* Nota de paginación bajo las listas largas */
.lista-pager {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 14px 0 4px;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Checkboxes del modal de módulos por usuario */
.mod-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  margin: 4px 0;
}

/* Importes siempre en una sola línea (celdas numéricas alineadas a la derecha) */
.data-table td[style*="text-align:right"],
.data-table th[style*="text-align:right"],
.data-table td[style*="text-align: right"],
.data-table th[style*="text-align: right"] {
  white-space: nowrap;
}
/* Las columnas que la pantalla marca con «num» (importes y cantidades), igual en toda tabla de
   datos: a la derecha, con cifras tabulares y sin partir. Antes solo Almacén las alineaba, y en
   Seguros salía «15.432,10» con el «€» en la línea de abajo. Las tarjetas del móvil las vuelven a
   poner a la izquierda con sus reglas, más concretas. */
.data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.num { white-space: nowrap; }

/* Los hijos de un grid no deben desbordarlo: un select/input con contenido largo
   (una descripción larga) encoge en vez de empujar el modal */
.form-grid > .form-group,
.form-grid-2 > .form-group,
.form-grid-3 > .form-group,
.form-grid-4 > .form-group {
  min-width: 0;
}
.form-group select,
.form-group input {
  max-width: 100%;
}

/* El rótulo de cada campo de una línea de documento (factura, albarán de venta): en el ordenador lo
   dice la cabecera de columnas y aquí solo lo oye el lector de pantalla; donde no hay cabecera
   (la línea en tarjeta, por debajo de 860 px) se ve encima de su campo. */
.lin-campo { position: relative; display: block; min-width: 0; margin: 0; }
.lin-rot { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 860px) {
  .lin-rot { position: static; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip: auto; display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
}

/* Editor de albarán: cabecera y filas de líneas */
.ea-lineas-head, .ea-linea {
  display: grid;
  grid-template-columns: 1fr 76px 64px 90px 78px 100px 30px;
  gap: 8px;
  align-items: center;
}
.ea-linea > * { min-width: 0; }
.ea-lineas-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.ea-linea { margin-bottom: 8px; }
.ea-linea .ea-l-base { opacity: 0.75; font-weight: 600; }
.ea-linea .ea-l-del { color: var(--red); font-size: 18px; }

/* Inputs de las líneas del editor de albarán: mismo acabado que los form-group */
.ea-linea input, .ea-linea select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text-primary);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}
[data-theme="light"] .ea-linea input,
[data-theme="light"] .ea-linea select {
  background: var(--bg-input);
  border-color: var(--border-input);
  color: var(--text-primary);
}
.ea-linea .ea-l-base { font-weight: 600; }
#modal-editar-albaran.ea-solo-lectura :is(.ea-l-del, #ea-add-linea, #ea-cli-change) { display: none; }
/* El botón de elegir archivo, con el acabado de un botón secundario y no el del sistema */
:is(#modal-alc, #modal-producto) input[type="file"]::file-selector-button { margin-right: 12px; padding: 7px 14px; border: 1px solid var(--border-input); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-weight: 500; cursor: pointer; }
.ea-l-importe { display: block; text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
/* En el móvil la línea no cabe en una fila: es una tarjeta con la descripción arriba y los demás
   campos de dos en dos, cada uno con su rótulo (.lin-rot). Antes la descripción se quedaba en
   20 px y el IVA y la base se salían por la derecha. */
@media (max-width: 860px) {
  .ea-lineas-head { display: none; }
  .ea-linea { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
  .ea-linea > :first-child { grid-column: 1 / -1; }
  .ea-linea :is(input, select) { min-height: 40px; }
  .ea-l-importe { text-align: left; padding: 9px 0; }
  .ea-linea .ea-l-del { justify-self: end; align-self: center; width: 40px; height: 40px; }
}
/* Las tablas de dentro de las ventanas de ventas, compras y almacén (asientos, líneas de un albarán
   de compra, la historia de un producto o de un cliente, las recurrentes) se salían por la derecha
   en el móvil, entre 60 y 195 px. Con menos margen y el texto que puede bajar de línea, caben (la
   historia de un producto y las devoluciones de un cliente van en tarjetas, almacen.js); el
   editor de partidas, que lleva campos, se desplaza dentro de su caja y no mueve la ventana. */
@media (max-width: 600px) {
  :is(.alm-tabla-compacta:not(.alm-tabla-tarjetas), .alc-ver-lineas, .af-tabla-asiento, #tabla-asiento-preview, #modal-recurrentes .data-table) :is(th, td) { padding: 8px 6px; white-space: normal; overflow-wrap: break-word; font-size: 13px; }
  :is(.alm-tabla-compacta:not(.alm-tabla-tarjetas), .alc-ver-lineas, .af-tabla-asiento, #tabla-asiento-preview) :is(td.num, td.ui-cell-money, td[style*="text-align:right"]) { white-space: nowrap; }
  #modal-recurrentes .data-table :is(th, td) { overflow-wrap: anywhere; }
  #modal-albaran-factura .asiento-lineas-container { overflow-x: auto; }
}

/* Separación de campos dentro de las tarjetas de sección: los form-group apilados
   se pegaban (el margen solo existía para hijos directos de .modal-form) */
.cw-section .form-group {
  margin-bottom: 14px;
}
.cw-section .form-grid > .form-group,
.cw-section .form-group:last-child {
  margin-bottom: 0;
}


/* Menú plano del perfil operador: los grupos son botones directos, sin desplegable */
.nav-group-plano .nav-group-body { display: none; }
.nav-group-plano .nav-group-chevron { display: none; }
.nav-group-plano .nav-group-head { cursor: pointer; }
.nav-group-plano .nav-group-head.active {
  color: var(--accent, var(--success));
}


/* Ficha de tercero */
.tf-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.tf-avatar {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  background: var(--accent-bg, var(--success-bg)); color: var(--accent, var(--success));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; letter-spacing: .5px;
  border: 1px solid var(--accent-border, var(--accent-border));
}
.tf-head h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.15; }
.tf-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; margin-top: 4px; }
@media (max-width: 900px) { .tf-datos { grid-template-columns: 1fr 1fr; } }
.tf-campo-lbl { font-size: 12px; font-weight: 600; color: var(--text-secondary, var(--text-secondary)); margin-bottom: 3px; }
.tf-campo-val { font-size: 13.5px; color: var(--text-primary, var(--info)); font-weight: 500; word-break: break-word; }
.tf-campo-val code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.tf-acciones { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border, var(--border)); }

/* Ficha tercero: cifras contables en cajas y estados vacíos con marco */
.tf-stat { background: var(--bg-input, var(--bg-card)); border: 1px solid var(--border, var(--border)); border-radius: 10px; padding: 10px 14px; }
.tf-stat .tf-stat-lbl { font-size: 12px; color: var(--text-secondary, var(--text-secondary)); font-weight: 600; }
.tf-stat .tf-stat-val { font-size: 17px; font-weight: 700; margin-top: 2px; }
.tf-stat.tf-stat-saldo { background: var(--accent-bg, var(--success-bg)); border-color: var(--accent-border, var(--accent-border)); }
.tf-stat.tf-stat-saldo .tf-stat-val { font-size: 24px; }
.tf-empty {
  border: 1.5px dashed var(--border, var(--border)); border-radius: 12px;
  padding: 34px 20px; text-align: center; color: var(--text-secondary, var(--text-secondary));
  font-size: 13.5px; background: var(--bg-card, var(--bg-card));
}

/* ============ Correo estilo Gmail ============ */
.gm-layout { display: grid; grid-template-columns: 430px 1fr; gap: 0; height: calc(100vh - 40px); background: var(--bg-card, var(--bg-card)); border: 1px solid var(--border, var(--border)); border-radius: 14px; overflow: hidden; }
.gm-rail { border-right: 1px solid var(--border, var(--border)); padding: 14px 10px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-main, var(--bg-card)); }
.gm-redactar { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 999px; border: none; background: var(--accent, var(--action)); color: var(--text-primary); font-weight: 700; font-size: 13.5px; cursor: pointer; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-border) 35.0%, transparent); }
.gm-redactar:hover { filter: brightness(1.06); }
.gm-carpetas { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.gm-carpeta { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 0 999px 999px 0; border: none; background: none; font-size: 13px; color: var(--text-primary, var(--info)); cursor: pointer; text-align: left; }
.gm-carpeta:hover { background: var(--bg-input, var(--bg-card)); }
.gm-carpeta.active { background: var(--accent-bg, var(--success-bg)); color: var(--accent, var(--success)); font-weight: 700; }
.gm-carpeta svg { flex-shrink: 0; opacity: .75; }
.gm-carpeta-badge { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--accent, var(--success)); }
.gm-sync-estado { font-size: 11px; color: var(--text-secondary, var(--text-secondary)); text-align: center; margin-top: 6px; min-height: 14px; }
.gm-lista-col { border-right: 1px solid var(--border, var(--border)); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.gm-buscador { padding: 10px; border-bottom: 1px solid var(--border, var(--border)); }
.gm-buscador input { width: 100%; box-sizing: border-box; padding: 9px 13px; border-radius: 999px; border: 1px solid var(--border-input, var(--border)); background: var(--bg-input, var(--bg-card)); font-size: 13px; color: var(--text-primary); }
.gm-lista { overflow-y: auto; flex: 1; }
.gm-item { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border, var(--border)); cursor: pointer; align-items: flex-start; position: relative; }
.gm-item:hover { background: var(--bg-input, var(--bg-card)); }
.gm-item.active { background: var(--accent-bg, var(--success-bg)); }
.gm-item-main { flex: 1; min-width: 0; }
.gm-item-l1 { display: flex; align-items: baseline; gap: 6px; }
.gm-item-from { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.gm-noleido .gm-item-from, .gm-noleido .gm-item-l2 { font-weight: 800; }
.gm-noleido::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent, var(--action)); }
.gm-item-fecha { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }
.gm-hilo-n { font-size: 10.5px; color: var(--text-secondary); background: var(--bg-input, var(--bg-card)); border-radius: 8px; padding: 0 6px; flex-shrink: 0; }
.gm-item-l2 { font-size: 12.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.gm-item-l3 { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.gm-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-bg, var(--success-bg)); color: var(--accent, var(--success)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.gm-avatar-sm { width: 24px; height: 24px; font-size: 11px; }
.gm-avatar-lg { width: 42px; height: 42px; font-size: 17px; }
.gm-star { border: none; background: none; font-size: 16px; color: var(--info); cursor: pointer; padding: 2px; align-self: center; }
.gm-star.on { color: var(--warning); }
.gm-star-big { border: none; background: none; font-size: 22px; color: var(--info); cursor: pointer; }
.gm-star-big.on { color: var(--warning); }
.gm-lectura { overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.gm-view { padding: 18px 22px; flex: 1; overflow-y: auto; min-height: 0; }
.gm-view-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.gm-view-head h2 { margin: 0; font-size: 19px; flex: 1; line-height: 1.3; }
.gm-view-tools { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.gm-chip { border: 1px solid var(--border, var(--border)); background: var(--bg-card, var(--bg-card)); border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; color: var(--text-primary); }
.gm-chip:hover { border-color: var(--accent, var(--accent-border)); color: var(--accent, var(--success)); }
.gm-chip.on { background: var(--accent-bg, var(--success-bg)); border-color: var(--accent, var(--accent-border)); color: var(--accent, var(--success)); font-weight: 700; }
.gm-prev { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border, var(--border)); border-radius: 10px; margin-bottom: 6px; cursor: pointer; background: var(--bg-main, var(--bg-card)); }
.gm-prev:hover { border-color: var(--accent, var(--accent-border)); }
.gm-prev-from { font-size: 12.5px; font-weight: 700; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.gm-prev-snip { font-size: 12px; color: var(--text-secondary); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-prev-fecha { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }
.gm-msg-card { border: 1px solid var(--border, var(--border)); border-radius: 12px; padding: 16px 18px; background: var(--bg-card, var(--bg-card)); }
.gm-msg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border, var(--border)); }
.gm-msg-quien { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13px; }
.gm-msg-quien #email-cc { font-size: 12px; color: var(--text-secondary); }
.gm-msg-fecha { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
.gm-acciones { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.gm-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); gap: 10px; }
.gm-empty.hidden { display: none; }
@media (max-width: 1100px) {
  .gm-layout { grid-template-columns: 340px 1fr; }
}


/* Barra compacta con desplegable de carpetas */
.gm-toolbar { display: flex; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--border, var(--border)); }
.gm-toolbar .gm-redactar { padding: 9px 11px; border-radius: 12px; box-shadow: none; }
.gm-carpeta-dd { position: relative; }
.gm-carpeta-btn { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px; border: 1px solid var(--border, var(--border)); background: var(--bg-card, var(--bg-card)); font-size: 13px; font-weight: 700; color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.gm-carpeta-btn:hover { border-color: var(--accent, var(--accent-border)); }
.gm-carpeta-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; background: var(--bg-card, var(--bg-card)); border: 1px solid var(--border, var(--border)); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 6px; min-width: 210px; display: flex; flex-direction: column; gap: 2px; }
.gm-carpeta-menu .gm-carpeta { border-radius: 8px; width: 100%; }
.gm-carpeta-sep { height: 1px; background: var(--border, var(--bg-card)); margin: 4px 6px; }
/* Acciones flotando al pie de la lectura */
.gm-lectura { position: relative; }
.gm-acciones { flex-shrink: 0; background: var(--bg-card, var(--bg-card)); border-top: 1px solid var(--border, var(--border)); padding: 12px 16px; box-shadow: 0 -6px 18px rgba(0,0,0,.06); }
.gm-acciones.hidden { display: none; }

/* ============ Existencias ============ */


/* Menú plano: los ítems de primer nivel con el mismo estilo que las cabeceras de grupo */
.nav-menu > .nav-item {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
}
.nav-menu > .nav-item svg { opacity: .7; }

/* ============ Chat IA ============ */
.chatia-panel { display: flex; flex-direction: column; height: calc(100vh - 170px); min-height: 420px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.chatia-mensajes { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.chatia-burbuja { max-width: 72%; padding: 11px 15px; border-radius: 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.chatia-ia { align-self: flex-start; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); border-bottom-left-radius: 4px; }
.chatia-usuario { align-self: flex-end; background: var(--accent); color: var(--text-primary); border-bottom-right-radius: 4px; }
.chatia-pensando { align-self: flex-start; color: var(--text-secondary); font-size: 13px; padding: 6px 2px; }
.chatia-pensando i { display: inline-block; animation: chatia-p 1.2s infinite; font-style: normal; }
.chatia-pensando i:nth-child(2) { animation-delay: .2s; } .chatia-pensando i:nth-child(3) { animation-delay: .4s; }
@keyframes chatia-p { 0%,60%,100% { opacity: .25 } 30% { opacity: 1 } }
.chatia-input-row { display: flex; gap: 10px; align-items: flex-end; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--bg-card); }
.chatia-input-row textarea { flex: 1; resize: none; max-height: 140px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 14px; font-family: inherit; color: var(--text-primary); outline: none; }
.chatia-input-row textarea:focus { border-color: var(--accent); }
.chatia-ia { white-space: normal; }
.chatia-burbuja p { margin: 0; }
.chatia-burbuja ul { margin: 4px 0; padding-left: 20px; }
.chatia-burbuja li { margin: 2px 0; }
.chatia-sep { height: 8px; }
.chatia-burbuja code { background: var(--bg-secondary); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.chatia-quote { margin: 6px 0; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; font-size: 13.5px; line-height: 1.6; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.chatia-adjunto { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text-primary); transition: border-color .15s, transform .15s; }
.chatia-adjunto:hover { border-color: var(--accent); transform: translateY(-1px); }
.chatia-adj-ico { width: 38px; height: 38px; border-radius: 9px; background: var(--danger-bg); color: var(--text-primary); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chatia-adj-info { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.chatia-adj-info b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatia-adj-info small { font-size: 11.5px; color: var(--text-secondary); }
button.chatia-adjunto { cursor: pointer; font-family: inherit; text-align: left; width: 100%; }
.chatia-opciones { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.chatia-opcion { text-align: left; padding: 9px 14px; background: var(--bg-card); border: 1px solid var(--accent); color: var(--accent); border-radius: 10px; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease; }
.chatia-opcion:hover:not(:disabled) { background: var(--accent); color: var(--text-primary); }
.chatia-opcion:disabled { opacity: .45; cursor: default; }
.chatia-opcion-elegida { opacity: 1 !important; background: var(--accent); color: var(--text-primary); }
.chatia-layout { display: grid; grid-template-columns: 250px 1fr; gap: 14px; align-items: stretch; }
.chatia-lista-col { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 170px); min-height: 420px; }
/* Tinte de selección y texto en el color de la marca: con el fondo de la marca y el texto oscuro
   (como estaba) el contraste era de 1,16:1 en el móvil. */
.chatia-nueva { padding: 11px 14px; background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-border); border-radius: 12px; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; }
.chatia-nueva:hover { filter: brightness(1.08); }
.chatia-convs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.chatia-conv { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s; }
.chatia-conv:hover { border-color: var(--accent); }
.chatia-conv-activa { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); }
.chatia-conv-info { flex: 1; min-width: 0; }
.chatia-conv-titulo { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatia-conv-fecha { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.chatia-conv-borrar { flex-shrink: 0; background: none; border: none; color: var(--text-secondary); font-size: 15px; cursor: pointer; padding: 2px 5px; border-radius: 6px; opacity: 0; transition: opacity .15s; }
.chatia-conv:hover .chatia-conv-borrar { opacity: 1; }
.chatia-conv-borrar:hover { color: var(--danger); background: var(--danger-bg); }
@media (max-width: 900px) { .chatia-layout { grid-template-columns: 1fr; } .chatia-lista-col { height: auto; max-height: 180px; } }
.chatia-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }
.chatia-nav-badge { margin-left: auto; background: var(--accent); color: var(--text-primary); font-size: 10.5px; font-weight: 800; border-radius: 20px; padding: 1px 7px; }
.chatia-lista-head { display: flex; gap: 8px; }
.chatia-lista-head .chatia-nueva { flex: 1; }
.chatia-refrescar { width: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; color: var(--text-secondary); cursor: pointer; transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease; }
.chatia-refrescar:hover { color: var(--accent); border-color: var(--accent); }
.chatia-refrescar:disabled { opacity: .5; cursor: default; }
.chatia-refrescar.girando svg { animation: chatia-giro 1s linear infinite; }
@keyframes chatia-giro { to { transform: rotate(360deg); } }

/* ============ Barra de formato del correo ============ */
.fmt-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: var(--bg-input); border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; flex-wrap: wrap; }
/* 32 px los botones y el desplegable de tamaño: con 28 y 6 px de relleno el texto tocaba el borde. */
.fmt-toolbar button { min-width: 32px; height: 32px; padding: 0 7px; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--text-primary); font-size: 13.5px; cursor: pointer; font-family: inherit; }
.fmt-toolbar button:hover { background: var(--bg-card); border-color: var(--border); }
.fmt-toolbar select { height: 32px; background-color: var(--bg-card); border: 1px solid var(--border-input); border-radius: 8px; color: var(--text-primary); font-size: 13px; font-family: inherit; padding: 0 28px 0 10px; }
@media (max-width: 800px) { .fmt-toolbar :is(button, select) { height: 40px; min-width: 40px; } }
.gm-vacio { padding: 32px 20px; text-align: center; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.gm-vacio b { display: block; margin-bottom: 4px; color: var(--text-primary); font-size: 14px; }
.gm-vacio p { margin: 0; }
.fmt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.reply-editor { min-height: 180px; max-height: 45vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0 0 10px 10px; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--text-primary); outline: none; }
.reply-editor:focus { border-color: var(--accent); }
.reply-editor:empty::before { content: attr(data-placeholder); color: var(--text-secondary); pointer-events: none; }
.mail-cita { color: var(--text-secondary); font-size: 13px; }
.mail-cita-head { margin-bottom: 4px; }
.mail-cita blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--text-secondary); }

/* ============ Hilo de correo estilo Gmail ============ */
.gm-hilo-msg { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.gm-hilo-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; min-width: 0; }
.gm-hilo-head:hover { background: var(--bg-input); }
.gm-hilo-from { font-weight: 600; font-size: 13.5px; color: var(--text-primary); white-space: nowrap; }
.gm-hilo-snip { flex: 1; min-width: 0; font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-hilo-abierto .gm-hilo-snip { visibility: hidden; }
.gm-hilo-fecha { font-size: 12px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.gm-hilo-body { padding: 2px 16px 14px 50px; font-size: 14px; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }

/* Estética simple tipo Gmail en la lectura */
.gm-view .gm-msg-card { background: transparent; border: none; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
.gm-hilo-msg { background: transparent; border: none; border-radius: 0; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.gm-hilo-head { padding: 13px 4px; }
.gm-hilo-head:hover { background: color-mix(in srgb, var(--bg-input) 60%, transparent); }
.gm-hilo-body { padding-left: 44px; }
.gm-view-head h2 { font-size: 21px; font-weight: 600; }
.gm-pills { display: flex; gap: 10px; margin-top: 22px; }
.gm-pills button { padding: 9px 18px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); border-radius: 22px; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease; }
.gm-pills button:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); }
.email-html-frame { width: 100%; border: none; background: var(--bg-card); border-radius: 10px; display: block; min-height: 120px; }
/* El cuerpo del correo va a sangre, sin el marco gris (el HTML del mensaje manda) */
.gm-view .email-body { background: transparent; border: none; border-radius: 0; padding: 0; }
/* Campo de texto del correo más grande (y a pantalla completa, que aproveche el alto) */
.reply-editor { min-height: 300px; max-height: 60vh; }
.reply-panel-full .reply-editor { min-height: calc(100vh - 520px); max-height: none; }
/* Redactando: la lista se cierra y se gana su espacio (como Gmail); al cerrar/enviar vuelve */
.gm-layout.gm-solo-redactor { grid-template-columns: 1fr; }
.gm-layout.gm-solo-redactor .gm-lista-col { display: none; }

/* ============ Adjuntar en el correo ============ */
.adjuntar-wrap { position: relative; }
.adjuntar-menu { position: absolute; bottom: calc(100% + 6px); left: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.14); z-index: 40; min-width: 210px; overflow: hidden; }
.adjuntar-menu button { display: block; width: 100%; text-align: left; padding: 10px 14px; background: none; border: none; font-size: 13.5px; color: var(--text-primary); cursor: pointer; font-family: inherit; }
.adjuntar-menu button:hover { background: var(--bg-input); }
.reply-adjuntos-extra { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.adj-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 9px; font-size: 12.5px; color: var(--text-primary); max-width: 260px; }
.adj-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adj-chip button { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 14px; padding: 0 2px; }
.adj-chip button:hover { color: var(--danger); }
.adjprog-cat-activa { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg-card)); }
.adjprog-tipos { display: flex; gap: 6px; flex-wrap: wrap; }
.adjprog-tipo { padding: 6px 12px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 18px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.adjprog-tipo-activo { border-color: var(--accent); color: var(--text-primary); background: var(--accent); }
.adjprog-lista { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.adjprog-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.adjprog-item:last-child { border-bottom: none; }
.adjprog-item:hover { background: var(--bg-input); }
.adjprog-item b { white-space: nowrap; }
.adjprog-item span { flex: 1; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adjprog-item .adjprog-ok { color: var(--accent); font-weight: 700; }
/* Estética del selector de archivos del programa */
#modal-adjuntar-programa .modal-content { border-radius: 16px; }
#modal-adjuntar-programa .modal-body { padding-top: 14px; }
#adjprog-buscar { width: 100%; padding: 11px 16px; font-size: 14px; font-family: inherit; color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; outline: none; margin: 12px 0 !important; }
#adjprog-buscar:focus { border-color: var(--accent); background: var(--bg-card); }
#adjprog-buscar::placeholder { color: var(--text-secondary); }
.adjprog-tipos { gap: 8px; }
.adjprog-tipo { padding: 8px 14px; font-size: 13px; }
.adjprog-lista { border-radius: 12px; }
.adjprog-item { padding: 12px 16px; font-size: 13.5px; gap: 12px; }
.adjprog-item b { color: var(--text-primary); }
#modal-adjuntar-programa .modal-footer { display: flex; align-items: center; gap: 10px; padding: 14px 0 0; border-top: 1px solid var(--border); margin-top: 14px; }
.adj-chip span[data-ver-adj] { cursor: pointer; }
.adj-chip span[data-ver-adj]:hover { color: var(--accent); }
#reply-attachment-name { cursor: pointer; }
#reply-attachment-name:hover { color: var(--accent); }
/* Menú Adjuntar: más grande y cuidado */
.adjuntar-menu { min-width: 290px; border-radius: 14px; padding: 6px; box-shadow: 0 10px 34px rgba(0,0,0,.16); }
.adjuntar-menu button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; }
.adjm-ico { width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.adjm-txt { display: flex; flex-direction: column; line-height: 1.25; }
.adjm-txt b { font-size: 14px; color: var(--text-primary); }
.adjm-txt small { font-size: 12px; color: var(--text-secondary); }
/* Mejorar con IA en amarillo pastel */
#btn-ia-redactar { background: var(--warning-bg) !important; color: var(--warning) !important; border: 1px solid var(--border) !important; box-shadow: none; }
#btn-ia-redactar:hover { background: var(--warning-bg) !important; }
#btn-ia-redactar .ai-icon { color: var(--warning); }
.reply-fecha { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }

/* Login con contraseña */
.login-user-activa { border-color: var(--accent, var(--accent-border)) !important; }
.login-pass-row { display: flex; gap: 8px; margin: 6px 0 10px; }
.login-pass-input { flex: 1; min-height: 46px; padding: 0 14px; border: 1px solid var(--border, var(--border)); border-radius: 10px; font-size: 15px; font-family: inherit; outline: none; background: var(--bg-input, var(--bg-card)); color: var(--text-primary); transition: border-color 160ms cubic-bezier(.23,1,.32,1), box-shadow 160ms cubic-bezier(.23,1,.32,1); }
.login-pass-input::placeholder { color: var(--text-secondary); opacity: .55; }
.login-pass-input:focus { border-color: var(--accent, var(--accent-border)); box-shadow: 0 0 0 3px var(--accent-bg, rgba(71,99,50,.15)); }
.login-pass-entrar { min-height: 46px; padding: 0 18px; background: var(--accent, var(--action)); color: #fff; border: none; border-radius: 10px; font-weight: 600; font-size: 15px; letter-spacing: .01em; cursor: pointer; font-family: inherit; transition: transform 160ms cubic-bezier(.23,1,.32,1), filter 160ms; }
.login-pass-entrar:active:not(:disabled):not(:focus-visible) { transform: scale(.98); }
.login-pass-entrar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .login-pass-entrar:hover { filter: brightness(1.06); } }
.login-pass-entrar:disabled { opacity: .6; transform: none; }
.login-campo { display: grid; gap: 6px; text-align: left; }
.login-campo > span { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.login-campo .login-pass-input { width: 100%; box-sizing: border-box; }
@media (max-width: 640px) { .login-pass-input { font-size: 16px; } }
/* Entrada con correo y contraseña (cuando el servidor no publica la plantilla) */
.login-form { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.login-form .login-pass-entrar { margin-top: 6px; }
/* Filtros y estados del circuito de firma de contratos */
.badge-enviado { background: var(--warning-bg); color: var(--text-primary); }
.badge-firmado { background: var(--action); color: var(--text-primary); }

/* ===== Chat interno de oficina ===== */
.chatint-head-left { margin-top: 10px; padding: 8px 4px 5px; font-weight: 600; font-size: 13px; color: var(--text-secondary); border-top: 1px solid var(--border); }
.chatint-lista { max-height: 38%; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.chatint-user-activo { background: var(--accent-bg) !important; }
.chatint-user-activo b { color: var(--accent) !important; }
.chatint-user-activo small { color: var(--text-secondary) !important; }
.chatia-convs-vacio { margin: 0; padding: 18px 12px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); text-align: center; }
.chatint-user { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: none; border: none; border-radius: 10px; cursor: pointer; text-align: left; font-family: inherit; width: 100%; }
.chatint-user:hover { background: var(--bg-hover, rgba(0,0,0,.05)); }
.chatint-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--text-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.chatint-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chatint-user-info b { font-size: 13px; color: var(--text-primary); }
.chatint-user-info small { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatint-badge { background: var(--danger-bg); color: var(--text-primary); font-size: 11px; font-weight: 800; border-radius: 10px; padding: 2px 7px; }
.chatint-conv-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 14.5px; }
.chatint-conv-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--text-primary); background: var(--accent); border-radius: 7px; padding: 3px 8px; }
.chatint-mensajes { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px; display: flex; flex-direction: column; gap: 7px; background: var(--bg-main); border-radius: 10px; }
.chatint-mensajes.hidden, #chatint-input-row.hidden, .chatint-conv-head.hidden { display: none; }
.chatint-msg { position: relative; max-width: 62%; padding: 8px 12px 5px; border-radius: 11px; font-size: 13.5px; line-height: 1.45; }
.chatint-mio { align-self: flex-end; background: var(--success-bg); border-bottom-right-radius: 4px; }
.chatint-suyo { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chatint-meta { font-size: 10px; color: var(--text-secondary); text-align: right; margin-top: 2px; }
.chatint-fw-tag { font-size: 10.5px; color: var(--text-secondary); font-style: italic; margin-bottom: 2px; }
.chatint-eliminado { color: var(--text-secondary); font-size: 12.5px; }
.chatint-acciones { position: absolute; top: 2px; right: 4px; background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 14px; padding: 0 3px; opacity: 0; transition: opacity .15s; }
.chatint-msg:hover .chatint-acciones { opacity: 1; }
.chatint-menu { position: absolute; top: 20px; right: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.14); z-index: 30; display: flex; flex-direction: column; min-width: 130px; overflow: hidden; }
.chatint-menu button { background: none; border: none; padding: 9px 13px; text-align: left; font-size: 12.5px; cursor: pointer; font-family: inherit; color: var(--text-primary); }
.chatint-menu button:hover { background: var(--bg-hover, rgba(0,0,0,.05)); }
.chatint-input-row { display: flex; gap: 7px; padding: 9px; border-top: 1px solid var(--border); align-items: flex-end; }
.chatint-input-row textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; font-size: 13px; font-family: inherit; background: var(--bg-main); color: var(--text-primary); }
.chatint-enviar { background: var(--accent); color: var(--on-action, #fff); border: none; border-radius: 10px; padding: 8px 11px; cursor: pointer; display: flex; align-items: center; }
.burbuja-reenviar { position: absolute; top: 6px; right: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 3px 6px; cursor: pointer; color: var(--text-secondary); opacity: 0; transition: opacity .15s; }
.chatia-burbuja { position: relative; }
.chatia-burbuja:hover .burbuja-reenviar { opacity: 1; }
.reenviar-preview { background: var(--bg-main); border-left: 3px solid var(--accent); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 12px; max-height: 90px; overflow: hidden; }
.reenviar-usuarios { display: flex; flex-direction: column; gap: 4px; }


/* Orden de módulos por usuario (admin) */
.mod-row { display: flex; align-items: center; gap: 8px; }
.mod-row .mod-check { flex: 1; }
.mod-flechas { display: flex; gap: 3px; }
.mod-flecha { background: var(--bg-main); border: 1px solid var(--border); border-radius: 7px; padding: 2px 8px; cursor: pointer; font-size: 11px; color: var(--text-secondary); }
.mod-flecha:hover:not(:disabled) { background: var(--accent); color: var(--text-primary); }
.mod-flecha:disabled { opacity: .4; cursor: default; }
.mod-orden-nota { font-size: 12px; color: var(--text-secondary); margin: 8px 0 0; }

/* ===== Asistente de conciliación uno a uno ===== */
.conc-wizard { position: fixed; inset: 0; z-index: 300; background: var(--bg-card); display: flex; flex-direction: column; }
.conc-w-top { display: flex; align-items: center; gap: 18px; padding: 14px 22px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.conc-w-titulo { font-weight: 800; font-size: 15px; }
.conc-w-prog-wrap { flex: 1; display: flex; align-items: center; gap: 12px; }
.conc-w-barra { flex: 1; max-width: 420px; height: 8px; background: var(--border); border-radius: 6px; overflow: hidden; }
#conc-w-barra-fill { height: 100%; width: 100%; background: var(--accent); border-radius: 6px; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-ventana) var(--ease-salida); }
#conc-w-prog { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.conc-w-cerrar { background: none; border: 1px solid var(--border); border-radius: 9px; font-size: 20px; line-height: 1; padding: 4px 11px; cursor: pointer; color: var(--text-secondary); }
.conc-w-centro { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.conc-w-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 8px 30px rgba(0,0,0,.08); padding: 34px 38px; width: 560px; max-width: 94vw; text-align: center; }
.conc-w-fecha { font-size: 13px; font-weight: 700; color: var(--text-secondary); letter-spacing: .4px; }
.conc-w-importe { font-size: 44px; font-weight: 800; margin: 6px 0 2px; letter-spacing: -1px; }
.conc-w-verde { color: var(--success); }
.conc-w-rojo { color: var(--danger); }
.conc-w-concepto { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; overflow-wrap: anywhere; }
.conc-w-match { background: var(--bg-main); border-radius: 13px; padding: 16px 18px; margin-bottom: 22px; text-align: left; }
.conc-w-match-lbl { font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.conc-w-prop { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.conc-w-prop b { font-size: 15.5px; }
.conc-w-prop span { color: var(--text-secondary); }
.conc-w-prop-imp { margin-left: auto; font-weight: 800; color: var(--text-primary) !important; }
.conc-w-select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-family: inherit; background: var(--bg-card); }
.conc-w-aviso { margin-top: 10px; font-size: 12.5px; color: var(--warning); background: var(--warning-bg); border-radius: 9px; padding: 9px 12px; line-height: 1.45; }
.conc-w-nomatch { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.conc-w-acciones { display: flex; flex-direction: column; gap: 8px; }
.conc-w-btn { padding: 13px 18px; font-size: 15px; border-radius: 11px; }
.conc-w-quitar { color: var(--danger); }
.conc-w-fin { text-align: center; }

/* Candidatas clicables del asistente de conciliación */
.conc-w-emisor { display: block; font-weight: 800; font-size: 15.5px; color: var(--text-primary); margin-bottom: 2px; }
.conc-w-conc-txt { display: block; }
.conc-w-cands { display: flex; flex-direction: column; gap: 7px; }
.conc-w-cand { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; background: var(--bg-card); border: 2px solid var(--border); border-radius: 11px; cursor: pointer; font-family: inherit; font-size: 14px; transition: border-color .12s; }
.conc-w-cand:hover { border-color: var(--accent); }
.conc-w-cand-sel { border-color: var(--accent); background: var(--bg-card); }
.conc-w-cand-num { font-weight: 800; white-space: nowrap; }
.conc-w-cand-terc { flex: 1; color: var(--text-secondary); min-width: 0; }
.conc-w-cand-ok { color: var(--success); font-weight: 700; font-size: 12px; }
.conc-w-cand-imp { font-weight: 800; white-space: nowrap; }
.conc-w-emisor-na { color: var(--text-secondary); font-weight: 600; font-size: 13px; font-style: italic; }

/* Lista de conciliación: tabla formal */
#contab-panel-conciliacion .table-container { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
#contab-panel-conciliacion table { table-layout: auto; width: 100%; border-collapse: collapse; }
#contab-panel-conciliacion thead th { text-align: left; font-size: 12px; font-weight: 500; color: var(--text-secondary); padding: 12px 14px; background: var(--bg-main); border-bottom: 1px solid var(--border); }
#contab-panel-conciliacion thead th { white-space: nowrap; }
#contab-panel-conciliacion thead th:nth-child(3) { text-align: right; }
#contab-panel-conciliacion thead th:nth-child(5) { text-align: right; }
.conc-fila td { padding: 14px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.conc-fila:last-child td { border-bottom: none; }
.conc-fila:hover td { background: rgba(0,0,0,.015); }
.conc-td-fecha { white-space: nowrap; color: var(--text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
.conc-td-banco { max-width: 300px; }
.conc-td-banco b { display: block; font-size: 13.5px; }
.conc-td-banco small { display: block; color: var(--text-secondary); font-size: 12.5px; margin-top: 2px; }
.conc-td-importe { white-space: nowrap; text-align: right; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.conc-td-casado { min-width: 220px; }
.conc-prop { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; max-width: 100%; flex-wrap: wrap; }
.conc-prop b { white-space: nowrap; }
.conc-prop-terc { color: var(--text-secondary); }
.conc-prop-imp { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.conc-select { max-width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; font-family: inherit; background: var(--bg-card); }
.conc-tag { display: inline-block; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.conc-tag-aviso { display: block; width: fit-content; background: var(--warning-bg); color: var(--warning); margin: 6px 0 0; font-weight: 700; border-radius: 7px; padding: 3px 9px; font-size: 11.5px; }
.conc-td-acciones { white-space: nowrap; text-align: right; }
.conc-td-acciones .btn-small { margin-right: 8px; }
.conc-quitar { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; color: var(--text-secondary); font-size: 12px; }
.conc-quitar:hover { border-color: var(--border); color: var(--danger); }

/* Zona de importar con tarjeta de fondo; filas hechas en verde pastel */
.conc-import-card { background: var(--bg-main); border: 1px solid var(--border); border-radius: 13px; padding: 18px 20px; }
.conc-fila-hecha td { background: var(--bg-card); }
.conc-fila-hecha:hover td { background: var(--success-bg); }
.conc-hecho-badge { display: inline-block; background: var(--action); color: var(--text-primary); font-size: 12px; font-weight: 800; border-radius: 8px; padding: 5px 11px; }

/* Clip de adjuntos del chat IA */
.chatia-clip { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; }
.chatia-clip:hover { color: var(--accent); border-color: var(--accent); }
.chatia-adj-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; background: var(--bg-main); border: 1px solid var(--border); border-radius: 9px; padding: 6px 11px; font-size: 12.5px; }
.chatia-adj-chip button { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--text-secondary); padding: 0 2px; }

/* Tablas markdown del chat IA */
.chatia-tabla { border-collapse: collapse; margin: 8px 0; font-size: 12.5px; width: 100%; background: var(--bg-card); border-radius: 9px; overflow: hidden; border: 1px solid var(--border); }
.chatia-tabla th { background: var(--bg-main); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); padding: 7px 11px; text-align: left; border-bottom: 1px solid var(--border); }
.chatia-tabla td { padding: 7px 11px; border-bottom: 1px solid var(--border); }
.chatia-tabla tr:last-child td { border-bottom: none; }
.chatia-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Contabilizador */
.ctz-badge { position: absolute; top: 10px; right: 12px; background: var(--danger-bg); color: var(--text-primary); font-size: 12px; font-weight: 800; border-radius: 11px; padding: 3px 9px; }
.ctz-w-cuerpo { flex: 1; display: flex; gap: 0; min-height: 0; }
.ctz-w-pdf { flex: 1.3; background: var(--bg-secondary); }
.ctz-w-pdf { overflow: auto; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-sizing: border-box; }
.ctz-w-pdf iframe, .ctz-w-pdf .ctz-w-iframe { width: 100%; height: 100%; border: none; }
.ctz-w-pagina { background: var(--bg-card); box-shadow: 0 2px 10px rgba(0,0,0,.35); max-width: 100%; }
.ctz-w-img { max-width: 100%; background: var(--bg-card); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.ctz-w-visor-msg { color: var(--text-secondary); font-size: 13px; padding: 24px; }
.ctz-w-form { width: 430px; max-width: 46vw; overflow-y: auto; padding: 22px 24px; background: var(--bg-card); border-left: 1px solid var(--border); }
.ctz-w-origen { font-size: 12.5px; color: var(--text-secondary); background: var(--bg-main); border-radius: 9px; padding: 9px 12px; margin-bottom: 14px; }
.ctz-w-msg { background: var(--warning-bg); color: var(--warning); border-radius: 9px; padding: 10px 13px; font-size: 12.5px; margin-top: 4px; line-height: 1.45; }

/* ===== Contabilizador: panel ===== */
.ctz-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, var(--bg-card), var(--bg-card)); border: 1px solid var(--border); border-radius: 15px; padding: 20px 24px; }
.ctz-hero-izq { display: flex; align-items: center; gap: 16px; }
.ctz-hero-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: var(--text-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ctz-hero-tit { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ctz-hero-sub { margin: 3px 0 0; font-size: 13px; color: var(--text-secondary); }
.ctz-buzon-badge { font-size: 11px; font-weight: 800; border-radius: 8px; padding: 4px 10px; letter-spacing: .3px; }
.ctz-buzon-ok { background: var(--success-bg); color: var(--success); }
.ctz-buzon-no { background: var(--warning-bg); color: var(--warning); }
.ctz-hero-acciones { display: flex; gap: 10px; }
.ctz-kpis { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; margin-top: 14px; }
.ctz-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px; padding: 16px 18px; display: flex; flex-direction: column; }
.ctz-kpi-destacado { border-color: var(--accent); }
.ctz-kpi-val { font-size: 26px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.ctz-kpi-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); margin-top: 3px; }

/* ===== Contabilizador: revisor ===== */
.ctz-w-form { width: 470px; max-width: 48vw; }
.ctz-seccion { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text-secondary); margin: 18px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.ctz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.ctz-grid3 { grid-template-columns: 1.2fr .7fr 1.1fr; }
.ctz-span2 { grid-column: span 2; }
.ctz-campo label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
.ctz-campo input, .ctz-campo select { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 13.5px; font-family: inherit; background: var(--bg-card); color: var(--text-primary); }
.ctz-campo input:focus, .ctz-campo select:focus { outline: none; border-color: var(--accent); }
.ctz-total { background: var(--bg-main) !important; font-weight: 800; }
.ctz-asiento { margin-top: 12px; background: var(--bg-main); border-radius: 11px; padding: 12px 14px; }
.ctz-asiento-tit { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 7px; }
.ctz-asiento-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ctz-asiento-tabla th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); padding: 4px 6px; border-bottom: 1px solid var(--border); }
.ctz-asiento-tabla td { padding: 6px; border-bottom: 1px dashed var(--border); }
.ctz-asiento-tabla tr:last-child td { border-bottom: none; }
.ctz-asiento-tabla .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.ctz-asiento-prov td { font-weight: 700; }
.ctz-chat { margin-top: 18px; }
.ctz-chat-msgs { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; margin-bottom: 8px; }
.ctz-chat-msg { max-width: 92%; padding: 8px 12px; border-radius: 11px; font-size: 12.5px; line-height: 1.5; }
.ctz-chat-user { align-self: flex-end; background: var(--success-bg); border-bottom-right-radius: 4px; }
.ctz-chat-ia { align-self: flex-start; background: var(--bg-main); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.ctz-chat-input { display: flex; gap: 7px; }
.ctz-chat-input input { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; font-family: inherit; }

/* ===== Contabilizador: rediseño panel ===== */
.ctz-layout { display: grid; grid-template-columns: 1fr 290px; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .ctz-layout { grid-template-columns: 1fr; } }
.ctz-hero-tit .ctz-buzon-badge { font-size: 14px; padding: 5px 12px; border-radius: 9px; }
.btn-ctz-verde { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; background: var(--bg-card); border: 1.5px solid var(--accent); color: var(--accent); border-radius: 10px; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.btn-ctz-verde:hover { background: var(--accent); color: var(--text-primary); }
.ctz-hero-acciones .btn { display: inline-flex; align-items: center; gap: 7px; }
.ctz-kpi-fila { display: flex; align-items: center; gap: 12px; }
.ctz-kpi-ico { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ctz-ico-verde { background: var(--success-bg); color: var(--success); }
.ctz-ico-azul { background: var(--info-bg); color: var(--info); }
.ctz-ico-morado { background: var(--info-bg); color: var(--info); }
.ctz-ico-gris { background: var(--bg-card); color: var(--info); }
.ctz-toolbar { display: flex; gap: 10px; margin: 16px 0 12px; flex-wrap: wrap; }
.ctz-buscar { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; color: var(--text-secondary); }
.ctz-buscar input { flex: 1; border: none; outline: none; padding: 10px 0; font-size: 13.5px; font-family: inherit; background: none; color: var(--text-primary); }
.ctz-select { padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; font-family: inherit; background: var(--bg-card); color: var(--text-primary); font-weight: 600; }
.ctz-tabla { width: 100%; }
.ctz-tabla thead th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text-secondary); padding: 12px 14px; background: var(--bg-main); border-bottom: 1px solid var(--border); }
.ctz-tabla thead th:nth-child(5) { text-align: right; }
.ctz-pill { display: inline-block; font-size: 11.5px; font-weight: 800; border-radius: 9px; padding: 4px 11px; white-space: nowrap; }
.ctz-pill-ambar { background: var(--warning-bg); color: var(--warning); }
.ctz-pill-verde { background: var(--success-bg); color: var(--success); }
.ctz-pill-roja { background: var(--danger-bg); color: var(--danger); }
.ctz-pill-gris { background: var(--bg-card); color: var(--info); }
.ctz-menu-btn { background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; padding: 5px 12px; cursor: pointer; color: var(--text-secondary); font-size: 15px; font-weight: 700; }
.ctz-menu-btn:hover { border-color: var(--accent); color: var(--accent); }
.ctz-pie { font-size: 12.5px; color: var(--text-secondary); margin-top: 10px; }
.ctz-aside { display: flex; flex-direction: column; gap: 14px; }
.ctz-card-lat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.ctz-card-lat-tit { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.ctz-pasos { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
.ctz-pasos li { margin-bottom: 6px; }
.ctz-lat-nota { font-size: 12px; color: var(--text-secondary); background: var(--bg-main); border-radius: 9px; padding: 9px 12px; margin: 10px 0 0; line-height: 1.5; }
.ctz-act { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ctz-act:last-child { border-bottom: none; }
.ctz-act b { font-size: 12.5px; display: block; }
.ctz-act small { display: block; font-size: 11.5px; color: var(--text-secondary); }

/* Tarjetas de resumen de Contabilidad (solo portada) */
.contab-stats2 .stat-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.cs2-fila { display: flex; align-items: center; gap: 13px; }
.cs2-info { display: flex; flex-direction: column; min-width: 0; }
.cs2-val { font-size: 21px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs2-lbl { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.cs2-pill { display: inline-block; width: fit-content; font-size: 11.5px; font-weight: 800; border-radius: 9px; padding: 4px 10px; }
.cs2-pill-bien { background: var(--success-bg); color: var(--success); }
.cs2-pill-mal { background: var(--danger-bg); color: var(--danger); }

/* SII */
.sii-check { font-size: 12px; padding: 2px 0; }
.sii-check-ok { color: var(--success); font-weight: 600; }
.sii-check-mal { color: var(--danger); font-weight: 600; }
.sii-check-mal span { font-weight: 400; color: var(--text-secondary); }

/* Desplegables propios de filtros */
.sel2 { position: relative; display: inline-block; }
.sel2-oculto { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.sel2-btn { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); font-size: 13px; font-weight: 600; font-family: inherit; color: var(--text-primary); cursor: pointer; }
.sel2-btn:hover { border-color: var(--accent); }
.sel2-btn svg { color: var(--text-secondary); }
.sel2-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 230px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.13); padding: 6px; display: flex; flex-direction: column; }
.sel2-op { display: flex; align-items: center; gap: 4px; width: 100%; text-align: left; padding: 9px 11px; background: none; border: none; border-radius: 9px; font-size: 13px; font-family: inherit; color: var(--text-primary); cursor: pointer; }
.sel2-op:hover { background: var(--bg-card); }
.sel2-op-sel { font-weight: 700; }
.sel2-check { width: 20px; color: var(--accent); font-weight: 800; }

/* Buscador de empresas en el alta de tercero */
.emp-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 80; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 6px; max-height: 320px; overflow-y: auto; }
.emp-grupo { font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--text-secondary); padding: 7px 10px 4px; }
.emp-op { display: block; width: 100%; text-align: left; padding: 8px 11px; background: none; border: none; border-radius: 9px; cursor: pointer; font-family: inherit; }
.emp-op:hover { background: var(--bg-card); }
.emp-op b { display: block; font-size: 13px; color: var(--text-primary); }
.emp-op small { display: block; font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }
.emp-avisodup { color: var(--warning); font-weight: 700; }
.emp-nota { font-size: 12px; color: var(--text-secondary); padding: 9px 11px; }
.emp-op-ext { border-top: 1px dashed var(--border); margin-top: 4px; }
.emp-op-ext b { color: var(--accent); font-size: 12.5px; }

/* Modal de tercero modernizado */
.terc-form .ctz-campo textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 13.5px; font-family: inherit; background: var(--bg-card); color: var(--text-primary); resize: vertical; }
.terc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.terc-chip { position: relative; cursor: pointer; }
.terc-chip input { position: absolute; opacity: 0; }
.terc-chip span { display: inline-block; padding: 8px 16px; border: 1.5px solid var(--border); border-radius: 18px; font-size: 13px; font-weight: 600; color: var(--text-secondary); transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease; }
/* Marcada, con el tinte de selección y el texto en el color de la marca: con el fondo de la marca
   y el texto oscuro el contraste era de 1,16:1 (Módulos, «Usuario activo»). */
.terc-chip input:checked + span { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }
.terc-chip:hover span { border-color: var(--accent); }

/* Modal de tercero: acabado con personalidad (gana a las reglas genéricas) */
#modal-tercero .modal-content { background: var(--bg-card); }
#modal-tercero .ctz-seccion { color: var(--accent); border-bottom: 2px solid var(--accent); font-size: 11.5px; letter-spacing: 1px; padding-bottom: 6px; margin: 22px 0 12px; }
#modal-tercero .ctz-seccion:first-child { margin-top: 0; }
#modal-tercero .ctz-campo label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 5px; }
/* Los campos del alta de tercero con la medida de los de las demás ventanas (44 px, radio de 12 y
   14 px de letra; 16 en el móvil para que el iPhone no amplíe la pantalla al tocarlos). */
#modal-tercero .ctz-campo input, #modal-tercero .ctz-campo select, #modal-tercero .ctz-campo textarea { width: 100%; min-height: 44px; box-sizing: border-box; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--text-primary); transition: border-color .12s, box-shadow .12s; }
@media (max-width: 800px) { #modal-tercero .ctz-campo input, #modal-tercero .ctz-campo select, #modal-tercero .ctz-campo textarea { font-size: 16px; } }
#modal-tercero .ctz-campo input:focus, #modal-tercero .ctz-campo select:focus, #modal-tercero .ctz-campo textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-border) 12.0%, transparent); }
#modal-tercero .ctz-grid { gap: 12px 14px; }
#modal-tercero .terc-chip span { background: var(--bg-card); }
#modal-tercero .terc-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--text-primary); }

/* Modal de tercero: blanco y por tarjetas */
#modal-tercero .modal-content { background: var(--bg-card); }
.terc-form { display: flex; flex-direction: column; gap: 12px; }
.terc-bloque { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; padding: 14px 16px 16px; }
.terc-bloque-tit { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 11px; }
#modal-tercero .ctz-seccion { display: none; } /* los títulos van ahora en la tarjeta */
#modal-tercero .ctz-campo input, #modal-tercero .ctz-campo select, #modal-tercero .ctz-campo textarea { background: var(--bg-card); border: 1.5px solid var(--border); }
#modal-tercero .terc-chip span { background: var(--bg-card); }
#modal-tercero .terc-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--text-primary); }
#modal-tercero .form-actions { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }
.emp-input-wrap { position: relative; display: block; }
.emp-input-wrap input { padding-right: 44px !important; }
.emp-lupa { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: var(--accent); border: none; border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--text-primary); cursor: pointer; }
.emp-lupa:hover { filter: brightness(1.1); }
.res-card-salir .res-card-ico { color: var(--danger); }
.res-card-salir:hover { border-color: var(--border); }
#modal-tercero .modal-content { max-width: 880px; width: 94vw; }
#modal-tercero .ctz-grid { grid-template-columns: 1fr 1fr; }

/* Tarjetas de aviso automático en el chat */
.chatia-aviso { align-self: stretch; max-width: 88%; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 12px; padding: 12px 16px; margin: 2px 0; }
.chatia-aviso-firma { background: var(--bg-card); border-color: var(--accent-border); border-left-color: var(--accent); }
.chatia-aviso-cab { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--warning); margin-bottom: 8px; }
.chatia-aviso-firma .chatia-aviso-cab { color: var(--accent); }
.chatia-aviso-ico { display: inline-flex; }
.chatia-aviso-campo { font-size: 12.5px; color: var(--text-secondary); padding: 2px 0; }
.chatia-aviso-campo b { display: inline-block; width: 58px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); }
.chatia-aviso-cuerpo { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-primary); background: var(--bg-card); border-radius: 8px; padding: 9px 12px; }

/* Menú contextual del correo */
.gm-ctx { position: fixed; z-index: 400; min-width: 240px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 12px 34px rgba(0,0,0,.16); padding: 6px; display: flex; flex-direction: column; }
.gm-ctx button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; background: none; border: none; border-radius: 9px; font-size: 13px; font-family: inherit; color: var(--text-primary); cursor: pointer; }
.gm-ctx button:hover { background: var(--bg-card); }
.gm-ctx-ico { display: inline-flex; color: var(--text-secondary); width: 18px; }
.gm-ctx-sep { height: 1px; background: var(--border); margin: 5px 8px; }
.gm-carpeta svg { flex-shrink: 0; color: var(--text-secondary); }
.gm-carpeta.active svg { color: var(--accent); }

/* Modal de módulos: estética por tarjetas */
#modal-modulos .modal-content { max-width: 560px; background: var(--bg-card); }
#mod-bloques { display: flex; flex-direction: column; gap: 6px; }
#mod-bloques .mod-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: 11px; padding: 10px 13px; }
#mod-bloques .mod-row .mod-check { font-size: 13.5px; font-weight: 600; }
.mod-flecha { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; }
.mod-ia-row { margin-top: 14px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 11px; }
.mod-ia-row small { display: block; margin-top: 7px; color: var(--text-secondary); font-size: 12px; }
/* Con un texto largo la casilla ocupa varias líneas: con el radio de píldora se deformaba. */
.mod-ia-row .terc-chip span { border-radius: 12px; }
.mod-orden-nota { background: var(--bg-main); border-radius: 9px; padding: 8px 12px; }
.mod-asa { display: inline-flex; align-items: center; padding: 4px 6px; margin-right: 8px; color: var(--text-secondary); cursor: grab; border-radius: 7px; }
.mod-asa:hover { background: var(--bg-card); color: var(--accent); }
.mod-asa:active { cursor: grabbing; }
#mod-bloques .mod-row { display: flex; align-items: center; }
.mod-arrastrando { opacity: .45; border-style: dashed !important; }


/* En móvil el número de 21 dígitos no cabe en la misma línea: baja entero */
@media (max-width: 760px) {
}


/* Botón de borrar de las tarjetas (cuentas bancarias) */
.cttc-borrar { width: 32px; height: 32px; border-radius: 8px; color: var(--text-secondary); }
.cttc-borrar:hover { color: var(--danger); background: var(--danger-bg); }

/* ===== Pasar albarán a factura ===== */
.af-hero { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--bg-card), var(--bg-card)); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; }
.af-hero-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent); color: var(--fc-on-primary, #fff); flex-shrink: 0; }
.af-hero-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.af-hero-num { font-size: 15px; font-weight: 800; letter-spacing: .2px; color: var(--text-primary); }
.af-hero-cliente { font-size: 13.5px; font-weight: 600; color: var(--success); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-hero-chips { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.af-chip { font-size: 11.5px; font-weight: 700; color: var(--success); background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 3px 11px; white-space: nowrap; }
.af-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23768387' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px !important; }
.af-asiento-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.af-asiento-loading { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-secondary); padding: 12px 4px; }
.af-asiento-explica { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 8px; line-height: 1.5; }
.af-tabla-asiento td:nth-child(3), .af-tabla-asiento td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.af-grid3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .af-grid3 { grid-template-columns: 1fr; } .af-hero { flex-wrap: wrap; } .af-hero-chips { flex-direction: row; align-items: center; } }


/* Dashboard del operador: el calendario es de consulta, sin «+ Programar» */

/* Terceros contables: que quepa en portátil */
#tabla-terceros-contab td, #tabla-terceros-contab th { white-space: nowrap; }
#tabla-terceros-contab td:nth-child(2) { white-space: normal; min-width: 170px; }
#tabla-terceros-contab td:nth-child(2) div { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1600px) {
  #tabla-terceros-contab th:nth-child(5), #tabla-terceros-contab td:nth-child(5) { display: none; }
  #tabla-terceros-contab td, #tabla-terceros-contab th { padding: 8px 9px; font-size: 12.5px; }
  #tabla-terceros-contab td:nth-child(2) div { max-width: 230px; }
}
@media (max-width: 1300px) {
  #tabla-terceros-contab th:nth-child(3), #tabla-terceros-contab td:nth-child(3) { display: none; }
  #tabla-terceros-contab td:nth-child(2) div { max-width: 180px; }
}
@media (max-width: 900px) { #terceros-contab-resumen { grid-template-columns: 1fr !important; } }

/* ===== Modal Entrada registrada ===== */

/* Campo de dirección protagonista en los formularios de alta */
.dir-destacada { grid-column: 1 / -1; }
.dir-destacada label { color: var(--accent) !important; font-weight: 700 !important; }
.dir-destacada input { border: 1.5px solid var(--accent-border) !important; background-color: var(--bg-card) !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c677a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; padding-left: 38px !important; }
.dir-destacada input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-border) 12.0%, transparent); }
.dir-hint { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

/* Cuentas bancarias (Perfil de la empresa) */
.cb-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.cb-lista { display: flex; flex-direction: column; gap: 8px; }
.cb-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 12px; }
.cb-item.cb-pred { border-left-color: var(--accent); }
.cb-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cb-item-alias { font-size: 14px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-item-iban { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text-primary); letter-spacing: .3px; }
.cb-item-meta { font-size: 12px; color: var(--text-secondary); }
.cb-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; border-radius: 20px; padding: 2px 9px; background: var(--bg-card); color: var(--success); }
.cb-tag-pred { background: var(--accent); color: var(--text-primary); }
.cb-acciones { display: flex; gap: 6px; flex-shrink: 0; }
.cb-form { margin-top: 12px; padding: 14px 16px; border: 1.5px dashed var(--accent-border); border-radius: 12px; background: var(--bg-card); }
.cb-tarjeta { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.cb-tarjeta input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 13px; }
.cb-tarjeta-msg { font-size: 12.5px; color: var(--text-secondary); }
.cb-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; padding-bottom: 10px; }


/* Buzones (Correo): fila de pestañas con pendientes de leer */
.gm-cuentas { display: flex; gap: 8px; padding: 10px 12px 0; flex-wrap: wrap; }
.gm-cuenta-tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1.5px solid var(--border, var(--border)); background: var(--bg-card, var(--bg-card)); color: var(--text-secondary); font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color var(--dur-control) ease, color var(--dur-control) ease, border-color var(--dur-control) ease; }
.gm-cuenta-tab:hover { border-color: var(--accent, var(--accent-border)); color: var(--text-primary); }
.gm-cuenta-tab.active { background: var(--accent-bg, var(--success-bg)); border-color: var(--accent, var(--accent-border)); color: var(--accent, var(--success)); }
.gm-cuenta-ini { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-input, var(--bg-card)); color: var(--text-secondary); font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gm-cuenta-tab.active .gm-cuenta-ini { background: var(--accent, var(--action)); color: var(--text-primary); }
.gm-cuenta-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent, var(--action)); color: var(--text-primary); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.gm-cuenta-tab.active .gm-cuenta-badge { background: var(--bg-card); color: var(--accent, var(--success)); border: 1px solid var(--accent, var(--accent-border)); }
/* Paginación de la lista de correo */
.gm-pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 14px 12px 18px; }
.gm-pager-btn { padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--border, var(--border)); background: var(--bg-card, var(--bg-card)); font-size: 12.5px; font-weight: 700; color: var(--text-primary); cursor: pointer; }
.gm-pager-btn:hover:not(:disabled) { border-color: var(--accent, var(--accent-border)); color: var(--accent, var(--success)); }
.gm-pager-btn:disabled { opacity: .4; cursor: default; }
.gm-pager-info { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.gm-pager-mas { width: 100%; justify-content: center; border-style: dashed; color: var(--accent, var(--success)); }
/* Tarjetas de tercero con su sello en blanco y negro */
.mt-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
@media (max-width: 600px) { .mt-lista { grid-template-columns: 1fr; }  }

/* Navegación plegable y espacio útil en pantallas pequeñas. */
#mobile-nav-toggle,#mobile-nav-backdrop { display:none; }
@media (max-width:800px) {
  #mobile-nav-toggle { display:block; position:fixed; top:10px; left:12px; z-index:1101; padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-card); color:var(--text-primary); }
  .nav-sidebar { position:fixed; inset:0 auto 0 0; z-index:1100; width:min(280px,85vw); min-width:0; padding-top:48px; transform:translateX(-100%); transition:transform 260ms var(--ease-cajon); }
  .mobile-nav-open .nav-sidebar { transform:translateX(0); }
  .mobile-nav-open #mobile-nav-backdrop { display:block; position:fixed; inset:0; z-index:1099; background:rgba(0,0,0,.4); border:0; }
  .main-content { width:100%; min-width:0; padding:58px 12px 16px; }
  .view-header { flex-wrap:wrap; gap:12px; }
  .view-header > div { min-width:0; max-width:100%; flex-wrap:wrap; }
  .stats-grid,.dashboard-grid { grid-template-columns:1fr; }
  .filter-bar,.form-row { flex-wrap:wrap; }
  .table-container { max-width:100%; overflow-x:auto; }
  .modal-content { max-width:calc(100vw - 20px); }
}
/* Estado de recuperación y avisos para administración. */
.maintenance-status {margin:0 0 18px;padding:16px;border:1px solid var(--border-color,var(--border));border-radius:10px;background:var(--bg-card,var(--action));overflow-wrap:anywhere;}
.maintenance-status p {margin:8px 0;}
.maintenance-status summary {cursor:pointer;}
.maintenance-warning {border-color:var(--border);}
@media (max-width:800px) {.view {padding:12px;}.maintenance-status {padding:12px;}}
.conc-import-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:12px 0 16px; }
.conc-import-controls label { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:13px; font-weight:600; color:var(--text-primary); }
.conc-import-controls select { width:100%; min-width:0; max-width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-card); color:var(--text-primary); font:inherit; font-weight:400; }
#conc-preview p { margin:8px 0; }
@media(max-width:700px) { .conc-import-controls { grid-template-columns:1fr; } }

/* Formularios de liquidación y remesas: controles legibles en escritorio y móvil. */
#modal-cartera .modal-content, #modal-remesa .modal-content { max-height:92vh; overflow-y:auto; }
#modal-cartera .modal-header, #modal-remesa .modal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
#modal-cartera .modal-body > p, #modal-remesa .modal-body > p { margin:12px 0 16px; line-height:1.5; }
#cartera-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0 24px; }
#cartera-form .form-group { display:flex; flex-direction:column; gap:7px; min-width:0; }
#cartera-form .form-group:has(#cartera-cuenta) { grid-column:1 / -1; }
#cartera-guardar { justify-self:start; grid-column:1 / -1; }
#modal-cartera h3, #modal-remesa h3 { margin:20px 0 10px; }
#cartera-historial table, #modal-remesa table { width:100%; border-collapse:collapse; font-size:14px; }
#cartera-historial th, #cartera-historial td, #modal-remesa th, #modal-remesa td { padding:12px 10px; text-align:left; border-bottom:1px solid var(--border-color, var(--border)); }
#cartera-historial th, #modal-remesa th { background:var(--bg-secondary,var(--bg-card)); font-size:12px; color:var(--text-secondary); }
#cartera-historial td:first-child, #cartera-historial td:nth-child(2), #modal-remesa td:nth-child(2), #modal-remesa td:nth-child(4) { white-space:nowrap; }
#modal-remesa .form-group { margin:16px 0; }
#modal-remesa .form-group label { display:block; margin-bottom:7px; }
#modal-remesa .modal-footer { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px; }
#remesas-historial p { padding:10px 0; line-height:1.7; border-bottom:1px solid var(--border-color,var(--border)); }
#remesas-historial a { margin:0 8px; }
#modal-fr .fr-datos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#modal-fr .fr-datos > *, #modal-fr .fr-datos input, #modal-fr .fr-datos select { min-width:0; max-width:100%; }
#modal-historial-activo td:nth-child(-n+4) { white-space:nowrap; }
#activo-anulacion-form h4 { margin:20px 0 8px; }
#activo-anulacion-form .form-group, #form-amortizar-activo .form-group { margin:14px 0; }
#activo-anulacion-form label, #form-amortizar-activo label { display:block; margin-bottom:6px; }
#fiscal-avisos { margin-top:12px; font-size:13px; line-height:1.5; }
.fiscal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fiscal-grid > .dash-card { min-width:0; }
#m111-resultado td:nth-last-child(-n+2) { white-space:nowrap; }
#modal-clasificar-retencion .form-group { margin:16px 0; }
#modal-clasificar-retencion label { display:block; margin-bottom:7px; }
@media(max-width:900px) { .fiscal-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) {
  #modal-fr .fr-datos { grid-template-columns:minmax(0,1fr); }
  #cartera-form { grid-template-columns:1fr; gap:14px; }
  #cartera-historial th, #cartera-historial td { padding:10px 6px; }
  #modal-remesa table { min-width:620px; }
}

/* SII: tabla desplazable sin comprimir fechas ni acciones. */
#contab-panel-sii .ctz-tabla { min-width: 820px; }
#contab-panel-sii .ctz-tabla th:nth-child(3),
#contab-panel-sii .ctz-tabla td:nth-child(3),
#contab-panel-sii .ctz-tabla td:last-child { white-space: nowrap; }
#modal-sii-clasificar .form-actions { margin-top: 18px; }
#modal-sii-clasificar textarea { width: 100%; box-sizing: border-box; }

/* Desglose revisable del contabilizador */
.ctz-linea { padding:12px; margin-bottom:10px; border:1px solid var(--border); border-radius:12px; }
.ctz-linea-remove { display:flex; align-items:flex-end; }
.ctz-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.ctz-campo { min-width:0; }
@media(max-width:600px) {
  .ctz-w-form { flex:none; }
  .ctz-grid { grid-template-columns:minmax(0,1fr); }
  .ctz-span2 { grid-column:auto; }
  .ctz-w-pdf { flex:none; height:300px; }
}


/* ===== Escáner de documentos (Compras) ===== */
.esc-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 15px; margin-bottom: 18px; overflow: hidden; }
.esc-panel:empty { display: none; }
.esc-cab { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 18px; background: linear-gradient(135deg, var(--bg-card), var(--bg-card)); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
[data-theme="dark"] .esc-cab { background: var(--bg-main); border-bottom-color: var(--border); }
.esc-cab-izq { display: flex; align-items: center; gap: 12px; }
.esc-cab-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--accent); color: var(--text-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.esc-tit { font-size: 15px; font-weight: 800; }
.esc-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.esc-cab-der { display: flex; align-items: center; gap: 8px; }
.esc-cab-der .btn { display: inline-flex; align-items: center; gap: 6px; }
.esc-cuerpo { padding: 16px 18px 6px; }
.esc-drop { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 2px dashed var(--border); border-radius: 12px; cursor: pointer; color: var(--text-secondary); font-size: 13.5px; transition: border-color .15s, background .15s; }
.esc-drop b { color: var(--text-primary); }
.esc-drop:hover, .esc-drop-sobre { border-color: var(--accent); background: var(--accent-bg, var(--success-bg)); }
.esc-drop-ico { width: 42px; height: 42px; border-radius: 10px; background: var(--bg-main); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.esc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.esc-kpi { border-radius: 11px; padding: 11px 14px; display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--bg-main); }
.esc-kpi-val { font-size: 22px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.esc-kpi-lbl { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); margin-top: 2px; }
.esc-kpi-azul .esc-kpi-val { color: var(--info); } .esc-kpi-ambar .esc-kpi-val { color: var(--warning); } .esc-kpi-roja .esc-kpi-val { color: var(--danger); } .esc-kpi-verde .esc-kpi-val { color: var(--success); }
.esc-lista-cab { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); margin: 6px 0 8px; }
.esc-lista-acc { display: flex; align-items: center; gap: 12px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.esc-link-todo { color: var(--accent); font-size: 12.5px; text-decoration: none; }
.esc-link-todo:hover { text-decoration: underline; }
.esc-tabla-wrap { margin-bottom: 10px; }
.esc-tabla td { vertical-align: middle; }
.esc-origen { display: block; color: var(--text-secondary); font-weight: 400; }
.esc-acciones { text-align: right; white-space: nowrap; }
.esc-acciones .btn { margin-right: 6px; }
.esc-leyendo { animation: escPulso 1.2s ease-in-out infinite; }
@keyframes escPulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width: 900px) { .esc-kpis { grid-template-columns: repeat(2, 1fr); } }


/* ===== Nuevo asiento contable ===== */
.asi-modal .modal-header { align-items: flex-start; }
.asi-subtit { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); font-weight: 400; }
.form-group select, .modal-form select { -webkit-appearance: none; appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.asi-ia { margin: 4px 0 16px; padding: 14px 16px; border-radius: 13px; background: linear-gradient(135deg, var(--bg-card), var(--bg-card)); border: 1px solid var(--border); }
[data-theme="dark"] .asi-ia { background: var(--bg-main); border-color: var(--border); }
.asi-ia-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; }
.asi-ia-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.asi-ia-hint { color: var(--text-secondary); font-size: 12.5px; }
.asi-ia-fila { display: flex; gap: 8px; }
.asi-ia-fila input { flex: 1; padding: 11px 13px; font-size: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); font-family: inherit; outline: none; }
.asi-ia-fila input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-border) 12.0%, transparent); }
.asi-ia-fila .btn { white-space: nowrap; }
.asi-ia-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.asi-chip { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer; font-family: inherit; }
.asi-chip:hover { border-color: var(--accent); color: var(--accent); }
.asi-ia-status { margin-top: 9px; font-size: 13px; color: var(--text-secondary); }
.asi-ia-ok { color: var(--accent); font-weight: 700; }
.asi-partidas-cab { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 8px; gap: 10px; flex-wrap: wrap; }
.asi-partidas-cab h4 { margin: 0; color: var(--text-primary); }
.asi-partidas-acc { display: flex; align-items: center; gap: 8px; }
.asi-cuadre { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 11px; }
.asi-cuadre-ok { background: var(--success-bg); color: var(--success); }
.asi-cuadre-mal { background: var(--danger-bg); color: var(--danger); }
.asi-cuadre-neutro { background: var(--bg-card); color: var(--info); }
.asi-tabla-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: visible; }
.asi-tabla th, .asi-tabla td { padding: 8px 10px; }
.asi-tabla input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: 13.5px; font-family: inherit; outline: none; }
.asi-tabla input:focus { border-color: var(--accent); }
.asi-th-num { width: 130px; text-align: right; }
.asi-td-num { text-align: right; }
.asi-num { text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.asi-num::-webkit-outer-spin-button, .asi-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.asi-td-cuenta { position: relative; }
.asi-td-quitar { text-align: center; }
.asi-tot-lbl { text-align: right; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); }
.asi-tabla tfoot td { border-top: 1px solid var(--border); }
.asi-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; max-height: 220px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0 0 10px 10px; box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.asi-dd-item { display: flex; gap: 10px; align-items: center; padding: 7px 11px; cursor: pointer; font-size: 12.5px; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.asi-dd-item:last-child { border-bottom: none; }
.asi-dd-item:hover { background: var(--bg-hover); }
.asi-dd-item code { color: var(--accent); font-weight: 800; min-width: 62px; }
.asi-dd-vacio { padding: 9px 11px; color: var(--text-secondary); font-size: 12.5px; }
.asi-ayuda { margin: 8px 2px 0; font-size: 12px; color: var(--text-secondary); }
#btn-guardar-asiento:disabled { opacity: .55; cursor: not-allowed; }


/* ===== Activo fijo ===== */
.af-seccion { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text-secondary); margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.af-seccion:first-of-type { margin-top: 4px; }
.af-seccion small { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.af-ayuda { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-secondary); }
.af-cta-mal { color: var(--danger); }
.af-cuota { display: flex; flex-direction: column; justify-content: center; min-height: 40px; padding: 6px 12px; border-radius: 8px; background: var(--bg-main); border: 1px dashed var(--border); }
.af-cuota b { font-size: 15px; }
.af-cuota small { font-size: 11.5px; color: var(--text-secondary); }
.af-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-weight: 600; }
.af-check input { margin-top: 3px; }
.af-cuentas input { font-variant-numeric: tabular-nums; }


/* ===== Conciliación: importar extracto ===== */
.conc-imp-cab { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 4px; }
.conc-imp-cab h3 { margin: 0 0 4px; font-size: 16px; }
.conc-imp-cab .view-subtitle { margin: 0; }
.conc-imp-ico { width: 42px; height: 42px; border-radius: 11px; background: var(--accent); color: var(--text-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.conc-drop { margin-top: 2px; }
.conc-drop > div:nth-child(2) { flex: 1; }
.conc-drop a { color: var(--accent); }
.conc-import-msg { display: block; margin-top: 8px; font-size: 13px; color: var(--text-secondary); }
.conc-import-msg:empty { display: none; }
#conc-texto { width: 100%; margin-top: 10px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); }

/* ===== Cartera: cobros y pagos ===== */
.cartera-saldo { display: flex; align-items: center; gap: 18px; margin: 12px 0 18px; padding: 14px 18px; border-radius: 13px; background: linear-gradient(135deg, var(--bg-card), var(--bg-card)); border: 1px solid var(--border); }
[data-theme="dark"] .cartera-saldo { background: var(--bg-main); border-color: var(--border); }
.cartera-saldo > div { display: flex; flex-direction: column; }
.cartera-saldo-lbl { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); }
.cartera-saldo b { font-size: 24px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#modal-cartera .modal-body > .cartera-saldo > p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
#modal-cartera .modal-body > p#cartera-resumen { margin: 0; }
.cartera-chips { display: flex; gap: 6px; margin-top: 6px; }
#cartera-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: start; }
#cartera-form .form-group { margin: 0; min-width: 0; }
#cartera-form .cartera-ancho { grid-column: 1 / -1; }
#cartera-form .form-group input, #cartera-form .form-group select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); color: var(--text-primary); font: inherit; }
/* La frase que dice qué asiento hará la forma elegida: se lee, no compite con el campo */
.cartera-ayuda { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.cartera-opt { font-weight: 400; color: var(--text-secondary); font-size: 11.5px; }
/* Los campos que aparecen al cambiar de forma entran, no parpadean */
@keyframes cartera-entra { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
#cartera-form .cartera-entra:not(.hidden) { animation: cartera-entra 140ms cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: reduce) { #cartera-form .cartera-entra:not(.hidden) { animation: none; } }
#cartera-guardar { grid-column: 1 / -1; justify-self: end; }
/* Pagada con pagaré: ni pendiente ni liquidada. El aviso sustituye al formulario */
.cartera-efecto { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--accent-bg, var(--bg-card)); border: 1px solid var(--accent-border, var(--border)); }
.cartera-efecto > p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-primary); }
.cartera-efecto-fila { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 12px; }
.cartera-efecto-fila .form-group { margin: 0; min-width: 0; }
.cartera-efecto-fila input, .cartera-efecto-fila select { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); color: var(--text-primary); font: inherit; }
.cartera-efecto-botones { display: flex; gap: 8px; }
.cartera-efecto-botones .btn { white-space: nowrap; }
@media (max-width: 560px) {
  #cartera-form { grid-template-columns: 1fr; } #cartera-guardar { justify-self: stretch; }
  .cartera-efecto-fila { grid-template-columns: 1fr; }
  .cartera-efecto-botones { flex-direction: column; } .cartera-efecto-botones .btn { width: 100%; justify-content: center; text-align: center; }
}
#cartera-historial.cartera-hist-vacio { border: 0; padding: 0; }
#cartera-historial.cartera-hist-vacio > p, #cartera-historial > p { margin: 0; padding: 14px 4px; color: var(--text-secondary); font-size: 13.5px; }
#cartera-heredado:empty { display: none; }


/* ===== Seguimiento de cobros ===== */
.tes-seg-badge { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px; border-radius: 999px; background: var(--danger-bg); color: var(--text-primary); font-size: 11px; font-weight: 800; text-align: center; }
.seg-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.seg-search { flex: 1; min-width: 180px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 13px; }
.seg-sms-estado { margin-left: auto; }
.seg-sub { display: block; font-weight: 400; color: var(--text-secondary); font-size: 11.5px; }
.seg-rojo { color: var(--danger); }
.seg-contacto { display: inline-flex; gap: 6px; font-size: 15px; }
.seg-falta { opacity: .25; filter: grayscale(1); }
.seg-sin { display: block; font-size: 11px; color: var(--warning); }
.seg-prox { color: var(--accent); font-weight: 600; white-space: nowrap; }
.seg-acc { display: flex; gap: 4px; flex-wrap: wrap; }
.seg-acc .btn { white-space: nowrap; }
.seg-acc .btn:disabled { opacity: .4; cursor: not-allowed; }
.seg-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.seg-bloque-tit { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.seg-lista { display: flex; flex-direction: column; }
.seg-item { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed var(--border); font-size: 13px; }
.seg-item:last-child { border-bottom: none; }
.seg-item-ico { font-size: 16px; }
.seg-item-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.seg-item-cuerpo small { color: var(--text-secondary); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-vacio { margin: 4px 0; font-size: 13px; color: var(--text-secondary); }
.seg-canales { display: flex; gap: 8px; margin: 4px 0 14px; }
.seg-canal { flex: 1; padding: 10px; border: 1.5px solid var(--border); border-radius: 11px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-weight: 700; cursor: pointer; }
.seg-canal.active { border-color: var(--accent); background: var(--accent-bg, var(--success-bg)); color: var(--accent); }
.seg-canal:disabled { opacity: .45; cursor: not-allowed; }
.seg-contador { font-weight: 400; color: var(--text-secondary); margin-left: 6px; }
.seg-cuando { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.seg-radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13.5px; }
.seg-repetir input[type="number"] { width: 64px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font: inherit; }
.seg-off { opacity: .5; }
#seg-m-fecha { padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); color: var(--text-primary); font: inherit; }
#seg-m-fecha:disabled { opacity: .5; }
@media (max-width: 900px) { .seg-dos { grid-template-columns: 1fr; } }
.seg-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.seg-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.seg-btn:disabled { opacity: .35; cursor: not-allowed; }
.seg-mas { text-align: center; color: var(--text-secondary); font-size: 12.5px; padding: 12px !important; }
.seg-mas a { color: var(--accent); }
@media (max-width: 1500px) { .seg-btn span { display: none; } .seg-btn { padding: 5px 7px; font-size: 14px; } }

/* Reglas automáticas de seguimiento */
.seg-reglas-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.seg-regla { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-card); }
.seg-regla.on { border-color: var(--accent); background: var(--accent-bg, var(--success-bg)); }
.seg-regla-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.seg-regla-cuerpo small { color: var(--text-secondary); font-size: 11.5px; }
.seg-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.seg-switch input { opacity: 0; width: 0; height: 0; }
.seg-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--bg-secondary); transition: background .15s; }
.seg-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-card); transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.seg-switch input:checked + span { background: var(--accent); }
.seg-switch input:checked + span::after { transform: translateX(18px); }
.seg-switch input:disabled + span { opacity: .4; }
.seg-regla-nueva { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.seg-regla-nueva select, .seg-regla-nueva input { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 13px; }
.seg-regla-nueva input[type="number"] { width: 70px; }
.seg-regla-nueva label { display: inline-flex; align-items: center; gap: 6px; }

.seg-ico { display: inline-flex; vertical-align: -2px; color: var(--text-secondary); }
.seg-regla { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.seg-regla-fila { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.seg-regla-cuerpo b { display: inline-flex; align-items: center; gap: 6px; }
.seg-personal { color: var(--accent); font-weight: 700; }
.seg-regla-editor { border-top: 1px dashed var(--border); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-main); border-radius: 0 0 11px 11px; }
.seg-regla-editor label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }
.seg-regla-editor input, .seg-regla-editor textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 400; }
.seg-regla-editor textarea { resize: vertical; }
.seg-regla-editor-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-previa { margin: 0; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; font: 12.5px/1.45 inherit; white-space: pre-wrap; color: var(--text-primary); }
.asi-ia-ico { font-size: 10px; font-weight: 800; letter-spacing: .5px; }


/* ===== Correo: lectura más limpia ===== */
.gm-cuentas { padding: 12px 12px 4px; }
.gm-toolbar { padding: 10px 12px; gap: 8px; }
.gm-toolbar .gm-redactar { padding: 0; width: 38px; height: 38px; justify-content: center; border-radius: 10px; flex-shrink: 0; }
.gm-carpeta-btn { border-radius: 10px; padding: 8px 12px; height: 38px; }
.gm-buscador input { border-radius: 10px; height: 38px; padding: 0 12px 0 34px; background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%235c677a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; }
.gm-item { padding: 11px 14px; }
.gm-item-clip { display: inline-flex; vertical-align: -1px; margin-right: 4px; color: var(--text-secondary); }
.gm-pager-mas { border-style: solid; border-color: transparent; background: transparent; color: var(--accent); font-weight: 600; font-size: 13px; }
.gm-pager-mas:hover:not(:disabled) { background: var(--bg-main); border-color: var(--border); }
.gm-view { padding: 20px 26px 26px; }
.gm-view-head { flex-direction: column; gap: 8px; margin-bottom: 14px; }
.gm-view-head h2 { font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -.2px; }
.gm-view-tools { gap: 8px; }
.gm-view-sep { width: 1px; height: 18px; background: var(--border); }
.gm-star-big { font-size: 20px; line-height: 1; padding: 0 2px; }
.gm-chip { padding: 5px 12px; font-size: 12.5px; border-radius: 9px; }
.gm-msg-card { padding: 16px 20px 20px; }
.gm-msg-head { margin-bottom: 14px; padding-bottom: 12px; }
.gm-msg-quien { font-size: 13.5px; }
.gm-msg-quien > span:first-child { font-weight: 600; }
.gm-view .email-body { margin-top: 0; }
.email-html-frame { width: 100%; border: 0; display: block; min-height: 60px; }
.gm-adjuntos { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
/* Adjuntos en la cabecera del mensaje: separados del cuerpo por debajo, no por arriba */
.gm-adjuntos.gm-adjuntos-cab { margin: 0 0 14px; padding: 0 0 14px; border-top: 0; border-bottom: 1px solid var(--border); }
.gm-adjuntos.gm-adjuntos-cab .gm-adj { flex: 0 1 240px; max-width: 100%; min-width: 0; }
.gm-adjuntos-tit { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.gm-adjuntos-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-adj { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-card); cursor: pointer; min-width: 200px; max-width: 320px; transition: border-color .15s; }
.gm-adj:hover { border-color: var(--accent); }
.gm-adj-ico { display: inline-flex; width: 36px; height: 36px; border-radius: 9px; background: var(--bg-main); align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; }
.gm-adj-ico .gm-adj-ico-pdf { color: #b91c1c; } .gm-adj-ico .gm-adj-ico-image { color: #1d4ed8; } .gm-adj-ico .gm-adj-ico-sheet { color: #067647; }
.gm-adj-ico > span { display: inline-flex; }
.gm-adj-txt { min-width: 0; flex: 1; }
.gm-adj-nombre { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-adj-meta { font-size: 11px; color: var(--text-secondary); }
.gm-adj-dl { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; flex-shrink: 0; }
.gm-adj-dl:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-main); }
/* Barra de acciones arriba del mensaje, como en cualquier cliente de correo */
.gm-lectura .gm-acciones { order: -1; border-top: 0; border-bottom: 1px solid var(--border); box-shadow: none; padding: 10px 22px; margin-top: 0; background: var(--bg-card); }
.gm-lectura .gm-acciones .btn { display: inline-flex; align-items: center; gap: 6px; }
.preview-adj-generico { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 10px; color: var(--text-secondary); background: var(--bg-main); }
.preview-adj-nombre { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.preview-adj-sub { font-size: 13px; margin-bottom: 6px; }
#preview-adjunto-body { background: var(--bg-main) !important; }
/* Botón Menú (pantallas estrechas) */
#mobile-nav-toggle { display: none; align-items: center; gap: 9px; }
@media (max-width: 800px) {
  #mobile-nav-toggle { display: inline-flex; padding: 0 14px 0 12px; height: 40px; border-radius: 12px; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
}
.mnt-lineas { display: inline-flex; flex-direction: column; gap: 4px; width: 16px; }
.mnt-lineas i { display: block; height: 2px; width: 16px; border-radius: 2px; background: currentColor; transform-origin: left center; transition: transform 180ms var(--ease-salida), opacity 180ms var(--ease-salida); }
.mnt-lineas i:nth-child(2) { transform: scaleX(.69); }
.mobile-nav-open .mnt-lineas i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-nav-open .mnt-lineas i:nth-child(2) { opacity: 0; }
.mobile-nav-open .mnt-lineas i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* ===== Equipo / RRHH ===== */
.nav-fichar { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #f0f3eb; }
.nav-fichar-estado { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.nav-fichar-estado small { margin-left: auto; font-weight: 400; opacity: .8; }
.nav-fichar-dot { width: 9px; height: 9px; border-radius: 50%; background: #9aa596; }
.nav-fichar-dentro .nav-fichar-dot { background: #7fd68a; box-shadow: 0 0 0 3px rgba(127,214,138,.25); }
.nav-fichar-pausa .nav-fichar-dot { background: #f2c14e; }
.nav-fichar-btns { display: flex; gap: 6px; }
.nav-fichar-btn { flex: 1; padding: 7px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.nav-fichar-btn-primary { background: #7fa864; border-color: #7fa864; color: #fff; }
.nav-fichar-btn:hover { filter: brightness(1.1); }
.me-aviso { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--text-secondary); }
.me-grid { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }
.me-col { display: flex; flex-direction: column; gap: 14px; }
.me-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.me-card-tit { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
.me-fichar { text-align: center; }
.me-estado { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 4px; text-align: left; }
.me-estado b { font-size: 16px; display: block; } .me-estado small { color: var(--text-secondary); font-size: 12px; }
.me-estado-dot { width: 12px; height: 12px; border-radius: 50%; background: #c4ccc1; flex-shrink: 0; }
.me-dot-dentro { background: #4f7a3a; box-shadow: 0 0 0 4px rgba(79,122,58,.18); } .me-dot-pausa { background: #d9a72b; box-shadow: 0 0 0 4px rgba(217,167,43,.2); }
.me-reloj { margin: 14px 0; } .me-reloj span { display: block; font-size: 40px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; } .me-reloj small { color: var(--text-secondary); }
.me-botones { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; } .me-botones .btn { min-width: 110px; justify-content: center; font-size: 15px; padding: 12px 18px; }
.me-fichajes-hoy { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 8px; }
.me-fj { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 5px 9px; border-radius: 8px; background: var(--bg-main); border: 1px solid var(--border); font-size: 12px; line-height: 1.2; margin: 2px 4px 2px 0; }
.me-fj b { font-weight: 700; } .me-fj small { color: var(--text-secondary); font-size: 10.5px; }
.me-kpis { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
.me-kpi-sub { font-size: 11.5px; color: var(--text-secondary); }
.me-doc { text-decoration: none; color: inherit; }
.rrhh-panel { margin-top: 6px; }
.rrhh-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rh-estado { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #e5e7eb; color: #4b5563; }
.rh-estado-dentro { background: #d9efe0; color: #067647; } .rh-estado-pausa { background: #fef3c7; color: #92400e; } .rh-estado-ausente { background: #e8eef7; color: #3b5b85; }
.rh-tipo { font-weight: 700; }  .rh-tipo-salida { color: #b91c1c; } .rh-tipo-pausa, .rh-tipo-reanudar { color: #92400e; }
.fe-panel { margin-top: 4px; }
.fe-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 14px; }
.fe-dato small { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); } .fe-dato b { font-weight: 600; font-size: 13.5px; }
.rh-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rh-cal-dow { font-size: 11px; font-weight: 800; color: var(--text-secondary); text-align: center; padding: 4px 0; }
.rh-cal-dia { min-height: 84px; border: 1px solid var(--border); border-radius: 9px; padding: 6px; background: var(--bg-card); font-size: 12px; }
.rh-cal-finde { background: var(--bg-main); } .rh-cal-festivo { background: #eef0ee; } .rh-cal-hoy { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rh-cal-num { font-weight: 700; margin-bottom: 4px; } .rh-cal-num small { display: block; font-weight: 500; color: var(--text-secondary); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-cal-aus { display: block; margin-top: 2px; padding: 1px 6px; border-radius: 6px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #d9efe0; color: #067647; }
.rh-cal-aus-solicitada { background: #fef3c7; color: #92400e; }
.rh-kiosco { position: fixed; inset: 0; z-index: 3000; background: #22261f; display: flex; align-items: center; justify-content: center; }
.rh-kiosco-cerrar { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: rgba(255,255,255,.5); font-size: 30px; cursor: pointer; }
.rh-kiosco-caja { width: min(420px, 92vw); text-align: center; color: #f3f5ef; }
.rh-kiosco-logo { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 16px; background: #d1e0a7; color: #35412b; font-size: 34px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.rh-kiosco-reloj { font-size: 54px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.rh-kiosco-msg { font-size: 18px; margin: 8px 0 18px; min-height: 26px; }
.rh-kiosco-pin { display: flex; justify-content: center; gap: 12px; margin-bottom: 18px; } .rh-kiosco-pin span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); } .rh-kiosco-pin span.on { background: #fff; border-color: #fff; }
.rh-kiosco-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rh-kiosco-teclado button { height: 68px; border-radius: 16px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #fff; font-size: 26px; font-weight: 600; cursor: pointer; }
.rh-kiosco-teclado button:active { background: rgba(255,255,255,.22); }
.rh-kiosco-acciones { display: flex; gap: 12px; justify-content: center; } .rh-kiosco-acciones .btn { font-size: 20px; padding: 16px 30px; }
@media (max-width: 1000px) { .me-grid { grid-template-columns: 1fr; } .rrhh-tres { grid-template-columns: 1fr; } .fe-datos { grid-template-columns: repeat(2, 1fr); } .me-kpis { grid-template-columns: 1fr; } }

/* =============================================
   DESPLEGABLES: todos con la misma flecha
   El control nativo del sistema (la doble flecha gris de macOS) desentonaba con
   el resto de la pantalla. Se apaga en todos los <select> y se dibuja la misma
   flecha fina. Va con !important porque muchas reglas de más peso escriben
   "background" completo y borrarían el dibujo.
   Se quedan fuera: los de selección múltiple y el mes del calendario, que es un
   control compacto y transparente con su propio aspecto.
   ============================================= */
select:not([multiple]):not([size]):not(.rdp-month) {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a9384' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  padding-right: 34px !important;
  cursor: pointer;
}
/* Un desplegable sin estilo de su pantalla se quedaba con el relleno cero del reinicio: más bajo
   que los demás y con el texto pegado al borde. Esta base le da el aspecto estándar (unos 40 px,
   como los filtros de las listas); :where() la deja sin peso, así que cualquier regla de su pantalla
   sigue mandando sobre ella. */
:where(select:not([multiple]):not([size]):not(.rdp-month)) {
  padding: 10px 12px;
  border: 1px solid var(--border-input);
  border-radius: 12px;
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
}
:root:not([data-theme="light"]) select:not([multiple]):not([size]):not(.rdp-month) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3ad9c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

/* ===== Tareas: lo que administración le manda a cada trabajador ===== */
.tar-lista { display: flex; flex-direction: column; gap: 8px; }
.tar-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-card); cursor: pointer; text-align: left; }
.tar-item input[type=checkbox] { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.tar-cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tar-cuerpo b { font-size: 15px; line-height: 1.35; }
.tar-detalle { color: var(--text-secondary); line-height: 1.45; white-space: pre-wrap; }
.tar-meta { color: var(--text-secondary); font-size: 12px; }
.tar-urgente { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #fde8e4; color: #9b2d1f; font-size: 11px; font-weight: 700; }
.tar-tarde { color: #b91c1c; font-weight: 600; }
.tar-vencida { border-color: #e7bcb4; }
.tar-hecha { opacity: .6; }
.tar-hecha .tar-cuerpo b { text-decoration: line-through; }
.tar-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; max-height: 240px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.tar-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.tar-check input { width: 17px; height: 17px; accent-color: var(--accent); }
.tar-pide-foto { align-items: flex-start; margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.tar-pide-foto input { margin-top: 3px; }
.tar-foto-pide { align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: var(--accent-light, #e8f0e3); color: var(--accent, #4d6b3c); font-size: 12px; font-weight: 600; }
.tar-foto { display: block; margin-top: 6px; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.tar-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tar-hecha .tar-foto { opacity: 1; }
.tar-foto-admin { width: 64px; height: 64px; }
.tar-nueva-pill { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: #b2443e; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .2px; }
.tar-item.tar-nueva { border-color: #c9796f; box-shadow: 0 0 0 3px #b2443e1f; animation: tar-entra 200ms var(--ease-salida) 1; }
body.employee-app .tar-item.tar-nueva { border-color: #c9796f; box-shadow: 0 0 0 3px #b2443e1a; }
@keyframes tar-entra {
  from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; }
}
body.employee-app #employee-nav .employee-nav-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #b2443e; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.tar-badge-salto { animation: tar-badge-salto 260ms var(--ease-salida) 1; }
@keyframes tar-badge-salto { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .tar-item.tar-nueva, .tar-badge-salto { animation: none; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tar-urgente { background: #3b1f1a; color: #e6a292; }
  :root:not([data-theme="light"]) .tar-vencida { border-color: #5a352c; }
}
:root[data-theme="dark"] .tar-urgente { background: #3b1f1a; color: #e6a292; }
:root[data-theme="dark"] .tar-vencida { border-color: #5a352c; }

/* `hidden` tiene que ganar siempre. Media hoja de estilos pone display:block o
   display:flex a mano, y sin esto un elemento marcado como oculto se seguía viendo:
   pasaba con el aviso del WhatsApp y con las pestañas de la barra del móvil. */
[hidden] { display: none !important; }

/* El nombre de la cuenta debajo de su código, mientras se teclea: así se ve que
   624 es Transportes antes de registrar, y en rojo si no está en el plan. */
.ctz-cuenta-nombre { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.3; color: var(--text-secondary); }
.ctz-cuenta-nombre.ctz-cuenta-mal { color: #b91c1c; font-weight: 600; }

/* Lo que la IA ha cambiado en el formulario: se dice con palabras debajo de su
   respuesta, para no tener que ir campo por campo comprobando qué ha tocado. */
.ctz-chat-cambio { margin-top: 10px; padding: 9px 12px; border-left: 3px solid var(--accent); background: rgba(69, 109, 34, .07); border-radius: 0 8px 8px 0; font-size: 13px; }
.ctz-chat-cambio b { display: block; margin-bottom: 4px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.ctz-chat-cambio ul { margin: 0; padding-left: 18px; }
.ctz-chat-cambio li { margin: 2px 0; }
.ctz-chat-aviso { margin-top: 10px; padding: 8px 12px; border-left: 3px solid #b45309; background: rgba(180, 83, 9, .08); border-radius: 0 8px 8px 0; font-size: 13px; }


/* Cierre del ejercicio: la lista de comprobaciones, en rojo lo que impide cerrar */
.cierre-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cierre-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cierre-lista li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
.cierre-lista li b { display: block; font-size: 14px; }
.cierre-lista li small { display: block; color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.cierre-ico { flex: 0 0 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: var(--border); color: var(--text-secondary); }
.cierre-ok .cierre-ico { background: rgba(47, 107, 60, .14); color: #2f6b3c; }
.cierre-aviso .cierre-ico { background: rgba(180, 83, 9, .14); color: #b45309; }
.cierre-error { border-color: #e7bcb4 !important; }
.cierre-error .cierre-ico { background: rgba(185, 28, 28, .14); color: #b91c1c; }
.cierre-accion { font-style: italic; }

/* Cuentas anuales: sangrado por nivel y totales marcados */
.ca-tit { margin: 20px 0 8px; font-size: 16px; }
.ca-tabla td.num, .ca-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-tabla tr.ca-n1 td { font-weight: 800; background: rgba(0,0,0,.025); }
.ca-tabla tr.ca-n2 td:first-child { font-weight: 600; }
.ca-tabla tr.ca-total td { font-weight: 800; border-top: 2px solid var(--border); }
.ca-avisos { padding: 10px 14px; border-left: 3px solid #b45309; background: rgba(180, 83, 9, .07); border-radius: 0 8px 8px 0; margin-bottom: 8px; }
.ca-avisos p { margin: 3px 0; font-size: 13px; }
.ca-ok { color: #2f6b3c; font-weight: 600; }
/* Los nombres de partida son largos: que partan línea y dejen ver las cifras en el móvil */
.ca-tabla { width: 100%; }
/* Más específico que la regla del tema que pone nowrap a todas las tablas de contabilidad en el móvil */
[data-design] .contab-panel .data-table.ca-tabla :is(td, th):first-child,
.ca-tabla td:first-child, .ca-tabla th:first-child { white-space: normal; overflow-wrap: anywhere; min-width: 150px; line-height: 1.35; }
@media (max-width: 700px) {
  [data-design] .contab-panel .data-table.ca-tabla :is(td, th), .ca-tabla td, .ca-tabla th { padding: 6px 5px; font-size: 12px; }
  [data-design] .contab-panel .data-table.ca-tabla :is(td, th):first-child, .ca-tabla td:first-child { min-width: 100px; padding-left: 5px !important; }
}

/* Impuesto sobre Sociedades: datos a la izquierda, cálculo a la derecha */
.is-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.2fr); gap: 14px; margin-top: 10px; }
@media (max-width: 800px) { .is-grid { grid-template-columns: 1fr; } }
.is-aviso-estimacion { padding: 8px 12px; border-radius: 8px; background: rgba(63, 96, 114, .08); font-size: 13px; margin: 0 0 8px; }
.is-lista { margin: 0; padding-left: 18px; font-size: 13px; }
.is-lista li { margin: 3px 0; }
.ca-coop { margin: 6px 0 10px; font-size: 13px; }
.ca-coop summary { cursor: pointer; color: var(--text-secondary); }

/* Contabilizador: aviso de abono en la vista previa del asiento */
.ctz-abono-aviso { margin: 4px 0 10px; padding: 9px 12px; border-radius: 10px; background: #fdf1e7; border: 1px solid #efcfb2; color: #7a4a1f; font-size: 13px; line-height: 1.45; }

/* Contabilizador: factura que ya está registrada o parecida */
.ctz-dup-aviso { margin: 8px 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; }
.ctz-dup-aviso ul { margin: 6px 0; padding-left: 18px; }
.ctz-dup-misma { background: #fde8e4; border: 1px solid #efb8ad; color: #7d2518; }
.ctz-dup-parecida { background: #fdf1e7; border: 1px solid #efcfb2; color: #7a4a1f; }

/* ===== Modelo 347 · confirmación con terceros =====
   Jerarquía por tamaño, peso y espacio (sin tarjetas anidadas ni adornos); cifras tabulares;
   un solo acento; estados con fondo tintado y esquina corta; funciona en claro y oscuro. */
.m347 { --m347-ok: #3f8f3a; --m347-rev: #c98a0b; --m347-esp: #6b7a8a; --m347-err: var(--red, #d9483b);
  display: grid; gap: 20px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.m347-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; }
.m347-cab-txt { min-width: 0; max-width: 62ch; }
.m347-cab h2 { margin: 0 0 6px; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.m347-cab p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.m347-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.m347-btn { transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease, opacity 160ms ease; }
.m347-btn:active:not(:disabled):not(:focus-visible) { transform: scale(.98); }
.m347-enlace { border: 0; background: none; padding: 6px 2px; font: inherit; font-size: 14px; font-weight: 550; color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--accent) 35%, transparent); text-underline-offset: 3px; }
.m347-enlace:disabled { opacity: .5; cursor: default; }
.m347-modo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5;
  background: color-mix(in oklab, var(--m347-rev) 10%, transparent); }
.m347-modo-real { background: color-mix(in oklab, var(--m347-ok) 10%, transparent); }
.m347-dir { font-weight: 600; overflow-wrap: anywhere; }
.m347-modo-rem { color: var(--text-secondary); font-size: 13px; }
.m347-modo .m347-enlace { margin-left: auto; padding: 0; }
.m347-ajustes { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: start; margin-top: -8px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.m347-campo { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.m347-campo label, .m347-campo legend { font-size: 13px; font-weight: 600; color: var(--text-secondary); padding: 0; }
.m347-campo small { font-size: 12px; color: var(--text-secondary); }
.m347-segmento { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg-hover); }
.m347-segmento label { position: relative; }
.m347-segmento input { position: absolute; opacity: 0; inset: 0; }
.m347-segmento span { display: block; padding: 7px 14px; border-radius: 8px; font-size: 14px; font-weight: 550; color: var(--text-secondary); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.m347-segmento input:checked + span { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 2px #0000001f; }
.m347-segmento input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.m347-ajustes-pie { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.m347-filtros { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.m347-filtro { flex: none; display: inline-flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: transparent;
  color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1); }
.m347-filtro b { font-weight: 650; color: var(--text-primary); }
.m347-filtro:active:not(:focus-visible) { transform: scale(.98); }
.m347-filtro.activo { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-card); }
.m347-filtro.activo b { color: var(--bg-card); }
.m347-f-revisar:not(.activo) b { color: color-mix(in oklab, var(--m347-rev) 85%, var(--text-primary)); }
.m347-f-ok:not(.activo) b { color: color-mix(in oklab, var(--m347-ok) 85%, var(--text-primary)); }
@media (hover: hover) and (pointer: fine) { .m347-filtro:not(.activo):hover { background: var(--bg-hover); color: var(--text-primary); } .m347-fila:hover > td { background: var(--bg-hover); } }
.m347-aviso { margin: -8px 0 0; font-size: 14px; color: color-mix(in oklab, var(--m347-rev) 80%, var(--text-primary)); }
.m347-tabla-caja { overflow-x: auto; }
.m347-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.m347-tabla th { padding: 0 12px 10px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: left; white-space: nowrap; }
.m347-tabla td { padding: 12px; vertical-align: middle; border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); transition: background-color 160ms ease; }
.m347-tabla .num { text-align: right; white-space: nowrap; }
.m347-total { font-weight: 650; }
.m347-tercero { min-width: 170px; max-width: 260px; }
.m347-est { white-space: nowrap; }
.m347-tabla td.m347-q { color: var(--text-secondary); font-size: 13px; }
.m347-tabla-caja { container-type: inline-size; }
/* Si no caben los trimestres en la fila, se ven al abrir el detalle */
@container (max-width: 1040px) { .m347-tabla .m347-q { display: none; } }
.m347-trimestres { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 4px 28px; font-size: 13px; }
.m347-trimestres span { color: var(--text-secondary); }
.m347-trimestres b { display: block; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.m347-tercero b { display: block; font-weight: 600; line-height: 1.35; }
.m347-tercero small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.m347-correo input { width: 100%; min-width: 150px; padding: 7px 10px; border: 1px solid transparent !important; border-radius: 8px; background: transparent !important; color: var(--text-primary); font: inherit; font-size: 14px; transition: border-color 160ms ease, background-color 160ms ease; }
.m347-correo input:hover, .m347-correo input:focus { border-color: var(--border-input) !important; background: var(--bg-card) !important; outline: none; }
.m347-correo input:focus-visible { box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 40%, transparent); }
.m347-correo input::placeholder { color: color-mix(in oklab, var(--m347-rev) 70%, var(--text-secondary)); }
.m347-correo input.m347-guardado { border-color: color-mix(in oklab, var(--m347-ok) 60%, transparent) !important; }
.m347-estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.m347-e-ok { color: color-mix(in oklab, var(--m347-ok) 85%, var(--text-primary)); background: color-mix(in oklab, var(--m347-ok) 15%, transparent); }
.m347-e-revisar { color: color-mix(in oklab, var(--m347-rev) 85%, var(--text-primary)); background: color-mix(in oklab, var(--m347-rev) 17%, transparent); }
.m347-e-espera { color: color-mix(in oklab, var(--m347-esp) 80%, var(--text-primary)); background: color-mix(in oklab, var(--m347-esp) 14%, transparent); }
.m347-e-neutro { color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border); }
.m347-e-falta { color: var(--text-secondary); background: var(--bg-hover); }
.m347-e-enviando { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.m347-e-error { color: color-mix(in oklab, var(--m347-err) 85%, var(--text-primary)); background: color-mix(in oklab, var(--m347-err) 14%, transparent); }
.m347-punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: m347-latido 900ms var(--ease-en-medio) 3 alternate; }
@keyframes m347-latido { from { opacity: .35; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.m347-cambio { display: block; margin-top: 4px; font-size: 12px; color: color-mix(in oklab, var(--m347-rev) 80%, var(--text-primary)); }
.m347-mas { width: 44px; text-align: right; }
.m347-abrir { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.m347-abrir svg { transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
.m347-abrir[aria-expanded="true"] svg { transform: rotate(90deg); }
.m347-abrir:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.m347-fila.abierta > td { background: var(--bg-hover); }
.m347-detalle > td { padding: 0 12px 16px; border-top: 0; background: var(--bg-hover); }
.m347-detalle-in { display: grid; gap: 12px; padding: 4px 4px 0; }
.m347-linea { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 13px; color: var(--text-secondary); }
.m347-linea b { color: var(--text-primary); font-weight: 600; }
.m347-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.m347-respuesta { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--bg-card); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 75ch; }
.m347-respuesta small { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-secondary); white-space: normal; }
.m347-nota, .m347-error { margin: 0; font-size: 14px; }
.m347-error { color: color-mix(in oklab, var(--m347-err) 85%, var(--text-primary)); }
.m347-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.m347-vacio { display: grid; justify-items: start; gap: 8px; padding: 28px 4px; max-width: 60ch; }
.m347-vacio b { font-size: 16px; font-weight: 600; }
.m347-vacio p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Móvil: cada tercero como un bloque, trimestres en rejilla de dos */
@media (max-width: 760px) {
  .m347-cab { align-items: stretch; }
  .m347-acciones { width: 100%; }
  .m347-acciones .m347-btn { flex: 1 1 auto; min-height: 44px; }
  .m347-ajustes { grid-template-columns: 1fr; }
  .m347-tabla, .m347-tabla tbody, .m347-tabla tr, .m347-tabla td { display: block; }
  .m347-tabla thead { display: none; }
  .m347-fila { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 14px 4px; border-top: 1px solid var(--border); position: relative; }
  .m347-tabla td { padding: 4px 0; border: 0; }
  .m347-tercero { grid-column: 1 / -1; min-width: 0; padding-right: 44px !important; }
  .m347-tabla .m347-q { display: flex !important; }
  .m347-est { grid-column: 1 / -1; }
  .m347-tabla td.num { display: flex; justify-content: space-between; gap: 8px; }
  .m347-tabla td.num::before { content: attr(data-t); color: var(--text-secondary); font-size: 12px; }
  .m347-total { grid-column: 1 / -1; }
  .m347-correo { grid-column: 1 / -1; }
  .m347-correo input { min-width: 0; padding-left: 0; }
  .m347-mas { position: absolute; top: 10px; right: 0; }
  .m347-detalle > td { padding: 0 4px 16px; }
}
@media (prefers-reduced-motion: reduce) { .m347-punto { animation: none; } .m347 *, .m347-ajustes * { transition-duration: 0ms !important; } }
.m347-botones a.btn { text-decoration: none; }
@media (max-width: 760px) { .m347-fila.abierta { background: var(--bg-hover); } .m347-fila.abierta > td { background: transparent; } }

/* Terminar tarea: foto y nota opcional */
.tar-terminar { display: grid; gap: 0; }
.tar-terminar .ui-dialog-msg { margin: 6px 0 16px; font-weight: 600; color: var(--text-primary); }
.tar-terminar-foto { display: grid; gap: 8px; justify-items: start; margin-bottom: 16px; }
.tar-terminar-foto img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; }
.tar-terminar-foto small { font-size: 12px; color: var(--text-secondary); }
.tar-terminar-lbl { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.tar-terminar-lbl span { font-weight: 400; color: var(--text-secondary); }
.tar-terminar textarea { width: 100%; min-height: 84px; padding: 10px 12px; border-radius: 12px; font: inherit; font-size: 16px; line-height: 1.45; resize: vertical; }
.tar-nota { grid-column: 2; font-size: 13px; line-height: 1.5; color: var(--text-secondary); font-style: italic; overflow-wrap: anywhere; }

/* ===== RRHH · Hoy =====
   Pantalla de trabajo (modo Operate): se consulta varias veces al día. Jerarquía: el
   equipo por estado es lo principal; lo pendiente de aprobar es lo secundario. Los números
   viven en los filtros (no se repiten); una sola acción primaria por vista; sin animación
   de entrada; movimiento solo para cambios de estado. */
.rhh { --rhh-dentro: #3f7f35; --rhh-pausa: #a86b06; --rhh-aus: #6f62a0;
  --rhh-ease: cubic-bezier(.23, 1, .32, 1);
  display: grid; gap: 16px; min-width: 0; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rhh * { min-width: 0; }
.rhh button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rhh-cargando { margin: 0; color: var(--text-secondary); font-size: 14px; }
.rrhh-panel { min-width: 0; max-width: 100%; }

/* Cabecera de la pestaña: fecha y filtros con su número */
.rhh-cab { display: grid; gap: 10px; }
.rhh-fecha { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.rhh-filtros { display: flex; gap: 6px; margin: 0; padding: 2px 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.rhh-filtros::-webkit-scrollbar { display: none; }
.rhh-filtro { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms var(--rhh-ease); }
.rhh-filtro b { font-weight: 650; color: var(--text-primary); }
.rhh-filtro:active:not(:disabled):not(:focus-visible) { transform: scale(.98); }
.rhh-filtro[aria-pressed="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-card); }
.rhh-filtro[aria-pressed="true"] b { color: var(--bg-card); }
.rhh-filtro:focus-visible, .rhh-persona:focus-visible, .rhh-accion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Cuerpo: en móvil una columna (pendientes arriba, compactos); en escritorio el equipo
   a la izquierda y lo pendiente en una columna estrecha */
.rhh-cuerpo { display: grid; gap: 20px; }
@media (min-width: 1024px) { .rhh-cuerpo { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; } .rhh-lateral { order: 2; position: sticky; top: 16px; } }

/* Pendiente de ti: superficie neutra, sin borde ni sombra */
.rhh-lateral { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--bg-hover); }
.rhh-lateral h2 { margin: 0 0 6px; font-size: 14px; font-weight: 650; }
.rhh-lista-sol { list-style: none; margin: 0; padding: 0; }
.rhh-sol { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid color-mix(in oklab, var(--text-secondary) 14%, transparent); }
.rhh-sol:first-child { border-top: 0; padding-top: 2px; }
.rhh-sol-quien { display: grid; gap: 1px; }
.rhh-sol-quien b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.rhh-sol-quien span { font-size: 13px; line-height: 1.4; color: var(--text-secondary); text-wrap: pretty; }
.rhh-sol-quien small { font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }
/* «Aprobar» es una acción: en el color de acción, no en el verde de los estados de éxito. */
.rhh-accion { min-height: 40px; padding: 0 14px; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--bg-card);
  color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background-color 150ms ease, transform 120ms var(--rhh-ease), opacity 150ms ease; }
.rhh-accion:active:not(:disabled):not(:focus-visible) { transform: scale(.98); }
.rhh-accion:disabled { opacity: .55; cursor: default; }
.rhh-linea { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 10px 0 2px;
  border-top: 1px solid color-mix(in oklab, var(--text-secondary) 14%, transparent); font-size: 14px; color: var(--text-secondary); }
.rhh-linea:first-of-type { border-top: 0; }
.rhh-linea b { font-weight: 650; color: var(--text-primary); }
.rhh-linea .rhh-tarde { color: color-mix(in oklab, var(--rhh-pausa) 90%, var(--text-primary)); }
.rhh-enlace { min-height: 40px; display: inline-flex; align-items: center; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--accent) 35%, transparent); text-underline-offset: 3px; }
.rhh-nada { margin: 0; padding: 2px 0 6px; font-size: 14px; color: var(--text-secondary); }

/* Equipo agrupado por estado */
.rhh-grupo + .rhh-grupo { margin-top: 20px; }
.rhh-grupo h2 { display: flex; align-items: baseline; gap: 6px; margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.rhh-grupo h2 span { font-weight: 500; }
.rhh-grupo ul { list-style: none; margin: 0; padding: 0; }
.rhh-persona { width: 100%; min-height: 56px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 8px 6px;
  border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background-color 120ms ease; }
.rhh-persona:active { background: var(--bg-hover); }
@media (hover: hover) and (pointer: fine) {
  .rhh-persona:hover { background: var(--bg-hover); }
  .rhh-filtro:not([aria-pressed="true"]):hover { background: var(--bg-hover); color: var(--text-primary); }
  .rhh-accion:hover:not(:disabled) { background: var(--accent-bg); }
}
.rhh-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; font-size: 12px; font-weight: 650; letter-spacing: .02em;
  background: color-mix(in oklab, var(--text-secondary) 12%, transparent); color: var(--text-secondary); }
.rhh-av-trabajando { background: color-mix(in oklab, var(--rhh-dentro) 15%, transparent); color: color-mix(in oklab, var(--rhh-dentro) 90%, var(--text-primary)); }
.rhh-av-ausente { background: color-mix(in oklab, var(--rhh-aus) 15%, transparent); color: color-mix(in oklab, var(--rhh-aus) 90%, var(--text-primary)); }
.rhh-quien { display: grid; gap: 1px; }
.rhh-quien b { font-size: 15px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhh-quien small { font-size: 13px; line-height: 1.35; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhh-lado { display: grid; justify-items: end; gap: 1px; text-align: right; white-space: nowrap; }
.rhh-lado b { font-size: 14px; font-weight: 600; }
.rhh-lado small { font-size: 13px; color: var(--text-secondary); }
.rhh-lado .rhh-dentro { color: color-mix(in oklab, var(--rhh-dentro) 90%, var(--text-primary)); }
.rhh-lado .rhh-pausa { color: color-mix(in oklab, var(--rhh-pausa) 90%, var(--text-primary)); }
.rhh-lado .rhh-aus { color: color-mix(in oklab, var(--rhh-aus) 90%, var(--text-primary)); }
.rhh-lado .rhh-sin { font-weight: 500; color: var(--text-secondary); }
.rhh-vacio { display: grid; gap: 4px; padding: 12px 0; }
.rhh-vacio b { font-size: 15px; font-weight: 600; }
.rhh-vacio p { margin: 0; font-size: 14px; color: var(--text-secondary); }

/* Cabecera de RRHH más contenida en el móvil: el equipo tiene que verse sin bajar */
@media (max-width: 640px) {
  #view-rrhh > .view-header { flex-wrap: nowrap; align-items: center; gap: 12px; margin-bottom: 12px; }
  #view-rrhh > .view-header .view-subtitle { display: none; }
  #view-rrhh > .view-header .view-header-actions { flex-wrap: nowrap; gap: 8px; }
  #view-rrhh > .view-header .btn { min-height: 40px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
}
.rhh-equipo { background: transparent; }

/* ---------- Diálogo tras guardar un presupuesto ---------- */
.pg-modal { max-width: 400px; text-align: center; padding: 32px 28px 24px; }
.pg-icono { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-border, transparent); }
.pg-icono svg { width: 28px; height: 28px; }
.pg-titulo { margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.pg-sub { margin: 0 0 22px; color: var(--text-secondary); font-size: 14px; }
.pg-acciones { display: grid; gap: 10px; }
.pg-secundarias { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pg-btn { min-height: 46px; padding: 12px 16px; font-size: 15px; }
.pg-cerrar { margin-top: 6px; background: none; border: 0; padding: 10px; color: var(--text-secondary); font: inherit; font-size: 14px; cursor: pointer; border-radius: 8px; }
.pg-cerrar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pg-cerrar:hover { color: var(--text-primary); background: var(--bg-hover); } }
@media (max-width: 420px) { .pg-secundarias { grid-template-columns: 1fr; } }

.af-seccion .af-opcional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-secondary); margin-left: 6px; }

/* Sugerencia de amortización según la LIS (formulario de activo) */
.af-ia { display: grid; gap: 8px; }
.af-ia-card { margin-top: 4px; padding: 14px 16px; border: 1px solid var(--accent-border, var(--border)); border-radius: 12px; background: var(--accent-bg, var(--bg-hover)); display: grid; gap: 10px; }
.af-ia-cargando { color: var(--text-secondary); font-size: 13px; }
.af-ia-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 14px; }
.af-ia-ley { font-size: 12px; color: var(--accent); font-weight: 600; }
.af-ia-tabla { font-size: 12.5px; color: var(--text-secondary); }
.af-ia-prop { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.af-ia-prop > div { display: grid; line-height: 1.3; }
.af-ia-prop small { font-size: 11.5px; color: var(--text-secondary); }
.af-ia-prop b { font-size: 17px; font-variant-numeric: tabular-nums; }
.af-ia-prop span { font-size: 12.5px; color: var(--text-secondary); }
.af-ia-prop .btn { margin-left: auto; }
.af-ia-texto { margin: 0; font-size: 13.5px; line-height: 1.5; }
.af-ia-opciones { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13px; line-height: 1.45; }
.af-ia-opciones li { padding: 8px 10px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border-light, var(--border)); }
.af-ia-usar { margin-left: 8px; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--accent-border, var(--border)); background: var(--bg-card); color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.af-ia-avisos { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--mg-neg, #b83e38); }
.af-ia-error { color: var(--danger); font-size: 13px; }
@media (max-width: 640px) { .af-ia-prop .btn { margin-left: 0; width: 100%; } }

/* =============================================
   SANIDAD · PLANIFICACIÓN (pantallas/planificacion.js)
   El tablero del mes, el plan anual de cada cliente, la carga del año y la revisión de lo
   importado. Con los tokens de la interfaz: el significado nunca va solo en el color, cada
   marca lleva su signo (€ ↻ ✓ ▣) y la leyenda está a la vista.
   ============================================= */
.pla-paso { display: inline-flex; align-items: center; gap: 6px; }
.pla-paso .btn-small { min-width: 36px; padding-inline: 10px; }
.pla-paso-valor { min-width: 56px; text-align: center; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pla-paso-campo { height: 36px; padding: 0 10px; border: 1px solid var(--border-input); border-radius: 12px; background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: 14px; }
.pla-kbd { display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid var(--border-input); border-radius: 5px; font: 600 10.5px/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--text-secondary); }
.pla-aviso { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--warning-bg); color: var(--warning); font-size: 13.5px; }
.pla-aviso .btn-link { margin: 0; padding: 0; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pla-nota { margin: 8px 2px 0; font-size: 12.5px; color: var(--text-secondary); }
.pla-vacio { display: grid; gap: 6px; place-items: center; padding: 40px 20px; border: 1px dashed var(--border-input); border-radius: 16px; background: var(--bg-card); text-align: center; color: var(--text-primary); }
.pla-vacio p { margin: 0; }
.pla-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.pla-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.pla-herramientas .filter-bar { margin: 0; }
.pla-buscar-plan { flex: 1 1 220px; min-width: 0; }
.pla-buscar-plan input, .pla-lista-filtros :is(input, select), .pla-pop :is(input, select, textarea), .pla-cajon :is(input[type="text"], input[type="date"], select), #pla-r-barra input, #pla-m-barra input {
  width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--border-input); border-radius: 12px; background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: 14px; }
.pla-pop textarea { height: auto; padding: 8px 12px; resize: vertical; }

/* Signos y chips: lo que decían los colores de la hoja */
.pla-signo { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; font-size: 12px; font-weight: 700; line-height: 1; color: var(--text-secondary); }
.pla-signo-aparte { color: var(--success); }
.pla-signo-rota { color: var(--purple); }
.pla-signo-hecha { color: var(--accent); }
.pla-signo-neveras { color: var(--warning); }
.pla-signo-obra { color: var(--purple); }
.pla-signo-nota { color: var(--text-secondary); font-size: 15px; }
.pla-signo-color { color: var(--danger); font-size: 10px; }
.pla-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 26px; margin: 1px; padding: 2px 7px; border: 1px solid var(--accent-border); border-radius: 999px; background: var(--accent-bg); color: var(--text-primary); font: inherit; font-size: 12px; cursor: pointer; transition: transform var(--dur-pulsacion) var(--ease-salida), box-shadow var(--dur-control) var(--ease-salida); }
.pla-chip:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.pla-chip:active { transform: scale(.96); }
.pla-chip-aparte { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: var(--success-bg); }
.pla-chip-rota { border-style: dashed; border-color: color-mix(in srgb, var(--purple) 55%, var(--border)); }
.pla-chip-hecha { background: color-mix(in srgb, var(--accent) 16%, var(--bg-card)); }
.pla-chip-anulada { opacity: .55; text-decoration: line-through; }
.pla-chip.arrastrando { opacity: .4; }
.pla-chip-n { padding: 0 4px; border-radius: 6px; background: var(--bg-hover); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.pla-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); font-size: 12.5px; color: var(--text-secondary); }
.pla-leyenda > span { display: inline-flex; align-items: center; gap: 4px; }
.pla-muestra-color { display: inline-block; width: 12px; height: 12px; border: 1px solid color-mix(in srgb, var(--text-primary) 25%, transparent); border-radius: 4px; background: var(--c); vertical-align: -1px; }
.pla-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.pla-etiqueta { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--bg-hover); color: var(--text-secondary); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pla-etiqueta-potable { background: var(--info-bg); color: var(--info); }
.pla-etiqueta-residual { background: var(--warning-bg); color: var(--warning); }
.pla-etiqueta-legionella { background: var(--success-bg); color: var(--success); }
.pla-etiqueta-piscina { background: var(--glass-purple, var(--bg-hover)); color: var(--purple); }

/* Plan anual: la lista de clientes y el plan del elegido */
.pla-disposicion { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.pla-lista { position: sticky; top: 12px; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); max-height: calc(100vh - 140px); overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr); }
.pla-lista-filtros { display: grid; gap: 6px; }
.pla-lista-cuenta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px; font-size: 12px; color: var(--text-secondary); }
.pla-lista-plegar { display: none; padding: 0; color: var(--accent); }
.pla-lista-clientes { display: grid; gap: 2px; align-content: start; overflow-y: auto; min-height: 0; }
.pla-lista-nada { margin: 8px; }
.pla-cliente { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre cuenta" "meta cuenta" "spark spark"; gap: 1px 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.pla-cliente:hover { background: var(--bg-hover); }
.pla-cliente.activo { background: var(--accent-bg); }
.pla-cliente.activo .pla-cliente-nombre { color: var(--accent); }
.pla-cliente-nombre { grid-area: nombre; overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pla-cliente-meta { grid-area: meta; overflow: hidden; font-size: 11.5px; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.pla-cliente-cuenta { grid-area: cuenta; align-self: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.pla-spark { grid-area: spark; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 2px; height: 16px; margin-top: 4px; }
.pla-spark i { display: block; height: max(2px, var(--h)); border-radius: 2px; background: color-mix(in srgb, var(--accent) 45%, var(--bg-hover)); }
.pla-cliente.activo .pla-spark i { background: var(--accent); }
.pla-principal { min-width: 0; }
.pla-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; }
.pla-cab-titulo { display: grid; gap: 6px; min-width: 0; }
.pla-cab h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.pla-cab-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pla-cab-acciones select { height: 36px; padding: 0 10px; border: 1px solid var(--border-input); border-radius: 12px; background: var(--bg-input); color: var(--text-primary); font: inherit; }
.pla-pestanas { margin: 4px 0 14px; }
.pla-seccion { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); min-width: 0; }
.pla-seccion-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 14px; margin: 0 0 10px; }
.pla-seccion-cab h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.pla-seccion-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-secondary); }
.pla-seccion-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pla-seccion-acciones select { height: 36px; padding: 0 10px; border: 1px solid var(--border-input); border-radius: 12px; background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: 13.5px; }
.pla-notas { margin: 10px 0 0; font-size: 12.5px; color: var(--text-secondary); white-space: pre-line; }
.pla-nada { margin: 6px 0; }
.pla-rejilla-caja { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.pla-rejilla { width: 100%; min-width: 780px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.pla-rejilla th, .pla-rejilla td { padding: 4px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.pla-rejilla thead th { position: sticky; top: 0; z-index: 1; padding: 6px 4px; background: var(--bg-card); font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.pla-rejilla .pla-fila-que { position: sticky; left: 0; z-index: 2; width: 230px; padding-right: 10px; background: var(--bg-card); text-align: left; font-weight: 500; }
.pla-rejilla thead .pla-fila-que { z-index: 3; }
.pla-fila-texto { display: block; overflow-wrap: anywhere; color: var(--text-primary); }
.pla-fila-que small { display: block; font-size: 11px; font-weight: 400; color: var(--text-secondary); }
.pla-fila-nucleo th { padding: 10px 6px 4px; background: none; text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.pla-celda { height: 38px; transition: background var(--dur-control) var(--ease-salida); }
.pla-celda[tabindex] { cursor: pointer; }
.pla-celda[tabindex]:hover { background: var(--bg-hover); }
.pla-celda-mas { color: transparent; font-weight: 600; }
.pla-celda[tabindex]:hover .pla-celda-mas { color: var(--accent); }
.pla-celda.destino { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--accent); }
.pla-rejilla .pla-mes-hoy { background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); }
.pla-rejilla thead .pla-mes-hoy { color: var(--accent); }
.pla-rejilla .pla-total { width: 54px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.pla-rejilla tfoot td, .pla-rejilla tfoot th { border-bottom: 0; padding-top: 8px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.pla-rot td { font-size: 12.5px; color: var(--text-secondary); }
.pla-rejilla .pla-rot-este { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.pla-rejilla .pla-rot-siguiente { background: color-mix(in srgb, var(--purple) 8%, var(--bg-card)); }
.pla-rot-hecho { color: var(--text-primary) !important; }
.pla-depositos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pla-deposito { display: grid; gap: 6px; padding: 10px 12px; border-left: 3px solid var(--border-input); border-radius: 8px; background: var(--bg-hover); }
.pla-deposito-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.pla-deposito-nota { margin: 0; font-size: 12.5px; color: var(--text-secondary); white-space: pre-line; }
.pla-texto { margin: 0 0 8px; white-space: pre-line; font-size: 13.5px; }
.pla-sub { margin: 8px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }

/* La ventanita de una línea, junto a su celda */
.pla-pop { position: absolute; z-index: 1200; display: grid; gap: 8px; width: min(360px, calc(100vw - 16px)); padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--modal-bg); box-shadow: var(--popover-shadow, 0 20px 50px -20px rgb(0 0 0 / .35)); font-size: 13.5px; }
.pla-pop h4 { margin: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.pla-pop-meta, .pla-pop-marca, .pla-pop-colores { margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.pla-pop-marca { color: var(--accent); }
.pla-pop-nota { margin: 0; padding: 6px 10px; border-left: 3px solid var(--border-input); border-radius: 6px; background: var(--bg-hover); font-size: 12.5px; white-space: pre-line; color: var(--text-primary); }
.pla-pop-form, .pla-form-motivo { display: grid; gap: 6px; }
.pla-pop-form > label:not(.pla-pop-check), .pla-form-motivo label, .pla-pop-fila label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.pla-pop-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 84px; align-items: center; gap: 6px 8px; }
.pla-pop-check { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13.5px; cursor: pointer; }
.pla-pop-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.pla-pop-acciones, .pla-cajon-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.pla-pop-anular { margin-right: auto; padding: 0; color: var(--danger); }
.pla-pop-origen { margin: 2px 0 0; font-size: 11.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.pla-pop.pla-pop-hoja { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; max-height: 80vh; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }

/* El cajón lateral */
.pla-cajon { position: fixed; inset: 0; z-index: 1100; }
.pla-cajon-fondo { position: absolute; inset: 0; background: var(--overlay, rgb(0 0 0 / .3)); }
.pla-cajon-panel { position: absolute; top: 0; right: 0; bottom: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(560px, 100%); background: var(--modal-bg); box-shadow: var(--fc-floating, -10px 0 40px rgb(0 0 0 / .2)); animation: pla-cajon-entra var(--dur-ventana) var(--ease-cajon); }
@keyframes pla-cajon-entra { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.pla-cajon-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); }
.pla-cajon-cab h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.pla-cajon-sub { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); }
.pla-cajon-cuerpo { display: grid; align-content: start; gap: 12px; padding: 16px 20px 24px; overflow-y: auto; font-size: 13.5px; }
.pla-cajon-cuerpo p { margin: 0; }
body.pla-cajon-abierto { overflow: hidden; }
.pla-detalle { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; }
.pla-detalle-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.pla-detalle-cab .btn-link { margin: 0; padding: 0; color: var(--accent); text-align: left; }
.pla-lista-simple { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
.pla-dia-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 6px 8px; }
.pla-dia-form label { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.pla-actuaciones { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pla-actuacion { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; }
.pla-actuacion input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.pla-actuacion label { display: block; cursor: pointer; }
.pla-actuacion.apagada { background: var(--bg-hover); }
.pla-actuacion.apagada .pla-actuacion-texto { text-decoration: line-through; color: var(--text-secondary); }
.pla-acciones-act { justify-content: flex-start; }

/* Tablero del mes: rutas en filas, «sin día» y las semanas en columnas */
.pla-tablero { display: grid; gap: 14px; padding-bottom: 72px; }
.pla-ruta { padding: 12px 14px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); min-width: 0; }
.pla-ruta-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; }
.pla-ruta-cab h3 { margin: 0; font-size: 16px; }
.pla-sin-dia { color: var(--warning); }
.pla-ruta-dia { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.pla-ruta-dia input { height: 36px; padding: 0 10px; border: 1px solid var(--border-input); border-radius: 12px; background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: 13.5px; }
#pla-p-cliente .alm-stat-val { font-size: clamp(15px, 1.6vw, 20px); }
.pla-ruta-rejilla { display: grid; grid-template-columns: repeat(calc(var(--semanas) + 1), minmax(190px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.pla-col { display: grid; align-content: start; gap: 6px; min-height: 84px; padding: 8px; border-radius: 12px; background: var(--bg-hover); transition: background var(--dur-control) var(--ease-salida), box-shadow var(--dur-control) var(--ease-salida); }
.pla-col-sin { background: color-mix(in srgb, var(--warning) 7%, var(--bg-hover)); }
.pla-col.destino { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--accent); }
.pla-col-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.pla-col-cab b { color: var(--text-primary); font-size: 12.5px; }
.pla-col-vacia { margin: 0; text-align: center; color: var(--text-secondary); font-size: 12px; }
.pla-tarjeta { position: relative; display: grid; gap: 4px; padding: 8px 10px 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); box-shadow: 0 1px 2px rgb(0 0 0 / .04); cursor: pointer; transition: box-shadow var(--dur-control) var(--ease-salida), transform var(--dur-pulsacion) var(--ease-salida); }
.pla-tarjeta:hover { box-shadow: 0 6px 16px -10px rgb(30 40 60 / .35); }
.pla-tarjeta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pla-tarjeta.marcada { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.pla-tarjeta.apagada { opacity: .6; }
.pla-tarjeta.arrastrando { opacity: .4; transform: scale(.98); }
.pla-tarjeta-marca { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; }
.pla-tarjeta-marca input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); opacity: .35; cursor: pointer; }
.pla-tarjeta:hover .pla-tarjeta-marca input, .pla-tarjeta-marca input:checked, .pla-tarjeta-marca input:focus-visible { opacity: 1; }
.pla-tarjeta-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-right: 22px; }
.pla-tarjeta-cab b { font-size: 13.5px; overflow-wrap: anywhere; }
.pla-dia { padding: 0 6px; border-radius: 6px; background: var(--accent-bg); color: var(--accent); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pla-tarjeta-tipos { margin: 0; font-size: 11.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.pla-tarjeta-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.pla-tarjeta-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.pla-marca-tarjeta { padding: 0 5px; border-radius: 6px; background: var(--info-bg); color: var(--info); font-size: 11px; font-weight: 700; }
.pla-marca-no { background: var(--danger-bg); color: var(--danger); }
.pla-marca-antes { background: var(--warning-bg); color: var(--warning); }

/* La barra de lo seleccionado, abajo */
.pla-barra { position: fixed; left: 50%; bottom: 16px; z-index: 900; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: min(860px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--modal-bg); box-shadow: var(--fc-floating, 0 20px 50px -20px rgb(0 0 0 / .35)); transform: translateX(-50%); }
.pla-barra-n { font-weight: 700; margin-right: 4px; }
.pla-barra input[type="date"] { width: 170px; flex: 0 0 auto; }
.pla-barra input[type="text"] { flex: 1 1 220px; width: auto; }

/* Carga del año: mapa de calor de rutas por meses */
.pla-calor-caja { overflow-x: auto; }
.pla-calor { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 4px; font-variant-numeric: tabular-nums; }
.pla-calor th { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: center; }
.pla-calor .pla-calor-ruta { position: sticky; left: 0; z-index: 1; min-width: 150px; padding: 4px 10px 4px 2px; background: var(--bg-body, var(--bg-card)); text-align: left; color: var(--text-primary); font-size: 13.5px; }
.pla-calor .pla-calor-ruta small { display: block; font-size: 11px; font-weight: 400; color: var(--text-secondary); }
.pla-calor td { padding: 0; text-align: center; }
.pla-calor-celda { width: 100%; min-width: 48px; height: 44px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--accent) calc(var(--i) * 62%), var(--bg-card)); color: var(--text-primary); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: box-shadow var(--dur-control) var(--ease-salida), transform var(--dur-pulsacion) var(--ease-salida); }
.pla-calor-celda:hover { box-shadow: 0 0 0 2px var(--accent); }
.pla-calor-celda:active { transform: scale(.97); }
.pla-calor-celda.vacia { background: var(--bg-card); color: var(--text-tertiary, var(--text-secondary)); cursor: default; }
.pla-calor .pla-mes-hoy { box-shadow: inset 0 -3px 0 var(--accent); border-radius: 10px; }
.pla-calor thead .pla-mes-hoy { color: var(--accent); box-shadow: none; }
.pla-calor .pla-total { min-width: 60px; font-weight: 700; color: var(--text-primary); font-size: 13.5px; }
.pla-calor tfoot td { position: relative; height: 56px; padding-top: 24px; font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.pla-barra-mes { position: absolute; left: 25%; right: 25%; bottom: 22px; height: calc(var(--h) * .28); min-height: 2px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 55%, var(--bg-card)); }

/* Revisión de lo importado */
.pla-importaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; margin: 0 0 14px; }
.pla-importacion { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); font-size: 12.5px; min-width: 0; }
.pla-importacion b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.pla-pendientes { color: var(--warning); font-weight: 700; }
.pla-al-dia { color: var(--success); font-weight: 700; }
.pla-revision .pla-col-marca { width: 34px; text-align: center; }
.pla-revision .pla-col-marca input { width: 16px; height: 16px; accent-color: var(--accent); }
.pla-revision tr.marcada td { background: var(--accent-bg); }
.pla-revision .pla-col-acciones { text-align: right; white-space: nowrap; }
.pla-motivo-ayuda { margin: -4px 2px 12px; font-size: 13px; color: var(--text-secondary); }
.pla-valor { white-space: pre-line; overflow-wrap: anywhere; }
.pla-revisada { color: var(--success) !important; }
#view-san-revision .table-container { margin-bottom: 72px; }
.pla-mini-hoja-caja { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.pla-mini-hoja { border-collapse: collapse; font-size: 11.5px; }
.pla-mini-hoja th { padding: 3px 6px; background: var(--bg-hover); color: var(--text-secondary); font-weight: 600; text-align: center; }
.pla-mini-hoja td { position: relative; min-width: 64px; max-width: 160px; height: 28px; padding: 3px 6px; border: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1a1a2e; background: #fff; }
.pla-mini-hoja td.pla-mini-esta { outline: 3px solid var(--accent); outline-offset: -3px; }
.pla-mini-hoja td.pla-mini-revisar::after { content: ""; position: absolute; top: 0; left: 0; border: 5px solid transparent; border-top-color: var(--warning); border-left-color: var(--warning); }
.pla-mini-nota { position: absolute; top: 0; right: 0; border: 5px solid transparent; border-top-color: #d9534f; border-right-color: #d9534f; }
.pla-celda-datos dd { overflow-wrap: anywhere; white-space: pre-line; }

@media (max-width: 1150px) {
  .pla-disposicion { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pla-disposicion { grid-template-columns: minmax(0, 1fr); }
  .pla-lista { position: static; max-height: 46vh; }
  .pla-lista-plegar { display: inline; }
  .pla-lista.plegada { max-height: none; grid-template-rows: auto auto; }
  .pla-lista.plegada .pla-lista-clientes { display: none; }
}
@media (max-width: 800px) {
  .pla-ruta-rejilla { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .pla-col { min-height: 0; }
  .pla-col:not(.pla-col-sin):has(> .pla-col-vacia) { display: none; }
  .pla-barra { bottom: 0; left: 0; width: 100%; border-radius: 18px 18px 0 0; transform: none; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .pla-barra input[type="date"] { flex: 1 1 140px; }
  .pla-rejilla .pla-fila-que { width: 150px; }
  .pla-rejilla { min-width: 640px; }
  .pla-cab h2 { font-size: 19px; }
  .pla-paso-campo { height: 44px; font-size: 16px; }
  .pla-buscar-plan input, .pla-lista-filtros :is(input, select), .pla-pop :is(input, select, textarea), .pla-cajon :is(input[type="text"], input[type="date"], select), #pla-r-barra input, #pla-m-barra input { height: 44px; font-size: 16px; }
  .pla-calor .pla-calor-ruta { min-width: 110px; }
  .pla-revision td.pla-col-marca { position: absolute; top: 10px; right: 10px; width: auto; padding: 0 !important; }
  .pla-revision .pla-col-acciones { text-align: left; }
  .pla-dia-form { grid-template-columns: minmax(0, 1fr); }
  .pla-ruta-dia { margin-left: 0; width: 100%; }
  .pla-ruta-dia input { flex: 1 1 150px; height: 44px; font-size: 16px; }
  .pla-pop-fila { grid-template-columns: auto minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pla-cajon-panel { animation: none; }
  .pla-chip, .pla-tarjeta, .pla-calor-celda, .pla-col, .pla-celda { transition: none; }
}