:root {
  --ink: #1e2a38;
  --ink-soft: #5a6b7d;
  --paper: #f7f7f5;
  --paper-dim: #ececea;
  --line: #dcdcd8;
  --accent: #9c7a44;
  --accent-strong: #7d6136;
  --danger: #a8503a;
  --danger-bg: #fdf0ef;
  --success: #2f6b3a;
  --success-bg: #eef7ef;
  --warning: #8a5a12;
  --warning-bg: #fdf3e2;
  --info: #2e5c8a;
  --info-bg: #eaf2fa;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Tarea 061 (2026-07-31) -- tokens del panel de navegacion lateral,
     deliberadamente en tinta oscura (mismo --ink que ya usaba el resto
     de la app) en vez de crema/blanco: distingue de un vistazo el
     "chasis" (siempre igual) del contenido (cambia por pantalla) --
     principio de jerarquia visual pedido en la Tarea 061, sin inventar
     una paleta nueva desconectada del resto de la app. */
  --sidebar-width: 236px;
  --sidebar-bg: #17212c;
  --sidebar-bg-active: rgba(255, 255, 255, 0.08);
  --sidebar-ink: #f3f1ec;
  --sidebar-ink-soft: rgba(243, 241, 236, 0.6);
  --sidebar-accent: #c9a869;
  --topbar-height: 60px;
  --mobile-nav-height: 60px;
}

/* Objetivos táctiles minimos (Tarea 061) -- WCAG 2.5.5/2.5.8 recomienda
   44x24px como minimo real, no solo como sugerencia visual. */
:root { --tap-min: 44px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.page { max-width: 1000px; margin: 0 auto; padding: 32px 20px 80px; }

header.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 1px 3px rgba(30, 42, 56, 0.04);
  position: sticky;
  top: 0;
  z-index: 10;
}

header.topbar .brand { font-weight: 700; letter-spacing: -0.01em; color: var(--accent-strong); }
header.topbar a { color: var(--ink-soft); text-decoration: none; font-size: 14px; }
header.topbar a:hover { color: var(--ink); }

/* ==========================================================================
   Chasis de la aplicacion -- Tarea 061 (2026-07-31): barra lateral estable
   en ordenador/tableta, cabecera con selector de sociedad, navegacion
   inferior en movil. Envuelve el contenido de cada pagina (que sigue
   trayendo su propio <div class="page">) sin cambiar su maquetacion
   interna -- separacion deliberada entre "chasis" (aqui) y "contenido"
   (cada plantilla, sin tocar en esta capa).
   ========================================================================== */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 18px 20px 14px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
}
.sidebar-brand .brand-sub { display: block; font-weight: 400; font-size: 12px; color: var(--sidebar-ink-soft); margin-top: 2px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; flex: 1; }

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  color: var(--sidebar-ink-soft);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  min-height: var(--tap-min);
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-nav-item .icon { font-size: 17px; width: 20px; text-align: center; flex: none; }
.sidebar-nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.sidebar-nav-item:focus-visible { outline: 2px solid var(--sidebar-accent); outline-offset: 2px; }
.sidebar-nav-item.active {
  background: var(--sidebar-bg-active);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--sidebar-accent);
}

.sidebar-foot {
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 8px;
}
.sidebar-foot a { color: var(--sidebar-ink-soft); text-decoration: none; font-size: 13.5px; }
.sidebar-foot a:hover { color: #fff; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--topbar-height);
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(30, 42, 56, 0.04);
}

.app-topbar .topbar-title { font-size: 15px; font-weight: 600; color: var(--ink); }

.company-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  max-width: 320px;
  min-height: 38px;
}
.company-switcher:hover { background: var(--paper-dim); }
.company-switcher .cs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-switcher .cs-caret { color: var(--ink-soft); flex: none; }

.topbar-user { display: flex; align-items: center; gap: 14px; }
.topbar-user a { color: var(--ink-soft); text-decoration: none; font-size: 13.5px; }
.topbar-user a:hover { color: var(--ink); }

.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-nav-height);
  background: var(--sidebar-bg);
  z-index: 20;
  padding: 0 4px;
  box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.12);
}
.mobile-nav-inner { display: flex; height: 100%; overflow-x: auto; }
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1 0 64px;
  color: var(--sidebar-ink-soft);
  text-decoration: none;
  font-size: 10.5px;
  min-height: var(--tap-min);
}
.mobile-nav-item .icon { font-size: 19px; }
.mobile-nav-item.active { color: var(--sidebar-accent); }

.sidebar-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: #fff;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 880px) {
  .sidebar { display: none; }
  .sidebar-toggle { display: inline-flex; }
  .mobile-nav { display: block; }
  .page { padding-bottom: calc(var(--mobile-nav-height) + 28px); }
  .app-topbar { padding: 0 14px; }
  .company-switcher { max-width: 170px; }
  .topbar-user span.hide-mobile { display: none; }
}

/* Panel lateral en movil (activado por .sidebar-toggle vía checkbox sin JS).
   El checkbox real se mantiene alcanzable con Tab/barra espaciadora
   (nunca display:none) -- solo se saca de la vista visualmente, patron
   estandar de "visually hidden" para no romper el teclado. */
.sr-only-toggle {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-toggle:focus-visible + .drawer-scrim + .app-shell .sidebar-toggle,
.sr-only-toggle:focus-visible ~ .app-shell .sidebar-toggle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 880px) {
  .sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    z-index: 30;
    width: 82vw;
    max-width: 300px;
    transition: left 0.18s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
  }
  #sidebar-drawer-toggle:checked ~ .app-shell .sidebar,
  #sidebar-drawer-toggle:checked + .app-shell .sidebar { left: 0; display: flex; }
  .drawer-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 26, 0.45);
    z-index: 25;
  }
  #sidebar-drawer-toggle:checked ~ .drawer-scrim { display: block; }
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 32px;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 8px 24px -12px rgba(30, 42, 56, 0.18);
}

.login-card h1 { font-size: 20px; margin: 0 0 24px; }

label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; }

input[type="email"], input[type="password"], input[type="text"] {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 15px;
  margin-bottom: 16px;
}

button, .btn {
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 16px;
  font-size: 15px;
  cursor: pointer;
  width: 100%;
  transition: background 0.12s ease;
}

button:hover, .btn:hover { background: var(--accent-strong); }

.btn-secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-secondary:hover { background: var(--paper-dim); }

/* Acciones de factura: una sola columna estable, sin depender de estilos
   inline. En móvil cada acción conserva el ancho completo y el texto se
   parte dentro del botón, nunca fuera de la tarjeta. */
.invoice-action-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
  min-width: 0;
}
.invoice-action-menu .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
}
.email-delivery-page { max-width: 760px; }
.email-delivery-page input[type="text"],
.email-delivery-page textarea { width: 100%; box-sizing: border-box; }
.email-delivery-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.email-delivery-summary p { margin: 6px 0; overflow-wrap: anywhere; }
.email-delivery-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.email-delivery-actions .btn { width: auto; }

@media (max-width: 480px) {
  .email-delivery-actions { display: grid; grid-template-columns: 1fr; }
  .email-delivery-actions .btn { width: 100%; box-sizing: border-box; }
}
input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus,
input[type="date"]:focus, input[type="file"]:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(156, 122, 68, 0.15);
}

.error { color: var(--danger); font-size: 14px; margin-bottom: 12px; }

.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.company-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(30, 42, 56, 0.05);
  transition: box-shadow 0.15s ease;
}
.company-card:hover { box-shadow: 0 4px 14px -6px rgba(30, 42, 56, 0.14); }

.company-card h3 { margin: 0 0 4px; font-size: 16px; }
.company-card .nif { color: var(--ink-soft); font-size: 13px; margin-bottom: 12px; }
.company-card .placeholder { color: var(--ink-soft); font-size: 13px; }

.iva-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.iva-row { display: flex; justify-content: space-between; }
.iva-row.iva-saldo {
  font-weight: 700;
  border-top: 1px solid var(--line);
  padding-top: 4px;
  margin-top: 2px;
}

.deadline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.deadline-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 1px 2px rgba(30, 42, 56, 0.04);
}

.deadline-row.urgent {
  border-color: var(--danger);
  background: #fdf3f0;
}

.deadline-days {
  font-weight: 700;
  font-size: 15px;
  min-width: 52px;
  text-align: center;
  color: var(--ink-soft);
}

.deadline-row.urgent .deadline-days { color: var(--danger); }

.deadline-title { font-size: 14.5px; font-weight: 600; }
.deadline-sub { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

.page-narrow { max-width: 460px; }

select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 15px;
  margin-bottom: 16px;
  background: #fff;
}

.success {
  color: #2f6b3a;
  background: #eef7ef;
  border: 1px solid #cfe8d3;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  margin-bottom: 16px;
}

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 16px;
  box-shadow: 0 1px 2px rgba(30, 42, 56, 0.04);
}

table { border-collapse: collapse; width: 100%; }
tbody tr:hover td { background: var(--paper-dim); }

thead th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 10px 14px;
  background: var(--paper-dim);
  border-bottom: 1px solid var(--line);
}

tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

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

.nowrap { white-space: nowrap; }

.review-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.review-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(30, 42, 56, 0.04);
}

.review-form { display: flex; gap: 8px; }
.review-form select { margin-bottom: 0; min-width: 200px; }
.review-form button { width: auto; padding: 8px 14px; white-space: nowrap; }

/* Escritorio principal -- Tarea 061 (2026-07-31) */

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 18px 0 28px;
}

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  padding: 14px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 1px 2px rgba(30, 42, 56, 0.04);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.quick-action .icon { font-size: 22px; }
.quick-action:hover { box-shadow: 0 4px 14px -6px rgba(30, 42, 56, 0.18); border-color: var(--accent); }
.quick-action.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.quick-action.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.notice-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 28px; }
.notice-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--info-bg);
  border: 1px solid #cfe0f0;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px;
  min-height: var(--tap-min);
}
a.notice-row:hover { filter: brightness(0.98); }
.notice-row .notice-icon { font-size: 18px; flex: none; }
.notice-row.notice-urgent { background: var(--warning-bg); border-color: #f0d9a8; }

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
}

.actions-group {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.actions-group h4 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.action-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  margin: 0 0 4px;
  border-radius: 5px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px;
  transition: background 0.12s ease;
}

.action-link:last-child { margin-bottom: 0; }
.action-link:hover { background: var(--paper-dim); }

.action-link.primary {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}
.action-link.primary:hover { background: var(--accent-strong); }

.action-link.badge .count {
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 8px;
  line-height: 1.5;
}

h2 { letter-spacing: -0.01em; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.back-link:hover { color: var(--accent-strong); }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.page-head h2 { margin: 4px 0 0; }
.page-head .page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.page-head .page-head-actions .btn { width: auto; }

/* Tarea urgente (2026-08-05, Parte A): barra de seleccion exacta de
   facturas -- independiente de .export-bar (que exporta el listado
   filtrado completo, sin cambios). */
.seleccion-bar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 16px; margin: 0 0 16px;
}
.seleccion-bar form { display: contents; }
.seleccion-bar .btn { width: auto; }
.seleccion-bar .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.export-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 20px; }
.export-bar .btn {
  width: auto;
  display: inline-block;
  padding: 8px 14px;
  font-size: 13.5px;
  text-decoration: none;
}
.export-bar .btn-secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.export-bar .btn-secondary:hover { background: var(--paper-dim); }

.filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 4px;
  box-shadow: 0 1px 2px rgba(30, 42, 56, 0.04);
}

.filter-field { min-width: 160px; }
.filter-field label { margin-bottom: 4px; }
.filter-field input[type="text"],
.filter-field input[type="date"] { margin-bottom: 0; width: 100%; }

.filter-actions {
  display: flex;
  gap: 8px;
  min-width: auto;
  align-items: center;
}
.filter-actions button {
  width: auto;
  padding: 9px 16px;
}
.filter-actions .btn {
  width: auto;
  display: inline-block;
  padding: 9px 14px;
  font-size: 14px;
  text-decoration: none;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.filter-actions .btn:hover { background: var(--paper-dim); }

.results-meta {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 10px 0 0;
}

.sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
.sort-link:hover { color: var(--accent-strong); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.pagination .btn {
  width: auto;
  display: inline-block;
  padding: 8px 16px;
  font-size: 14px;
  text-decoration: none;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.pagination .btn:hover { background: var(--paper-dim); }
.pagination-label { font-size: 13.5px; color: var(--ink-soft); }

.print-only { display: none; }

/* Captura movil de facturas/tickets -- Tarea 050 (2026-07-30) */

.capture-shell { max-width: 480px; margin: 0 auto; }

.capture-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}
.capture-status .pill {
  background: var(--paper-dim);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12.5px;
  font-weight: 600;
}

.capture-actions { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }

.btn-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}
.btn-big.btn-camera { background: var(--accent); color: #fff; }
.btn-big.btn-camera:hover { background: var(--accent-strong); }
.btn-big.btn-choose { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn-big.btn-choose:hover { background: var(--paper-dim); }
.btn-big:disabled { opacity: 0.55; cursor: not-allowed; }

.capture-preview {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin: 16px 0;
}
.capture-preview img { width: 100%; border-radius: 6px; display: block; }
.capture-preview .file-chip {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; color: var(--ink-soft);
}
.capture-preview .preview-actions { display: flex; gap: 8px; margin-top: 10px; }
.capture-preview .preview-actions button { width: auto; padding: 8px 12px; font-size: 13.5px; }

.progress-track {
  background: var(--paper-dim);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  margin: 12px 0;
}
.progress-fill { background: var(--accent); height: 100%; width: 0%; transition: width 0.15s ease; }

.badge { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; }
.badge-warn { background: #fdf3e2; color: #8a5a12; }
.badge-dup { background: #fdf0ef; color: var(--danger); }
.badge-ok { background: #eef7ef; color: #2f6b3a; }

.pending-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.pending-card .pending-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pending-card .pending-vendor { font-weight: 700; font-size: 15px; }
.pending-card .pending-meta { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.pending-card .pending-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pending-card .pending-open { display: block; margin-top: 10px; text-align: center; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.field-grid > div { grid-column: span 2; }
.field-grid > div.half { grid-column: span 1; }

textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 15px;
  margin-bottom: 16px;
  font-family: inherit;
  resize: vertical;
}

/* Accesibilidad general -- Tarea 061 (2026-07-31): foco visible en
   cualquier elemento interactivo (antes solo los inputs de texto lo
   tenian), objetivo tactil minimo real en botones/enlaces de accion. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button, .btn, .action-link, .sort-link, td a, th a {
  min-height: var(--tap-min);
}
button, .btn { min-width: var(--tap-min); }

/* Confirmacion/anulacion -- boton de peligro reutilizable, mismo tamano
   de objetivo que el resto, color de aviso claro sin depender solo del
   color (siempre lleva texto explicito, nunca solo un icono). */
.btn-danger {
  background: #fff;
  color: var(--danger);
  border: 1.5px solid var(--danger);
}
.btn-danger:hover { background: var(--danger-bg); }

@media print {
  .no-print { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; }
  .page { max-width: none; padding: 0; margin: 0; }
  .table-wrap { border: none; box-shadow: none; margin-top: 8px; }
  thead th { background: #fff; border-bottom: 2px solid #000; }
  tbody td { border-bottom: 1px solid #ccc; }
  .print-summary { font-size: 13px; color: var(--ink-soft); margin: 0 0 4px; }
  .print-note { font-size: 12px; color: var(--ink-soft); font-style: italic; margin: 0 0 12px; }
}

/* Ficha de cliente -- Tarea 061 */
.subtitle { color: var(--ink-soft); font-size: 14px; margin: 2px 0 0; }
.muted { color: var(--ink-soft); font-size: 14px; }

.ficha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.ficha-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 8px);
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(30, 42, 56, 0.04);
}
.ficha-card h3 { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.ficha-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.ficha-dl dt { color: var(--ink-soft); font-size: 13px; }
.ficha-dl dd { margin: 0; font-size: 14.5px; }

.ficha-section { margin: 26px 0; }
.ficha-section h3 { margin: 0 0 12px; }
.ficha-section-head { display: flex; align-items: center; justify-content: space-between; }

.ficha-add-address { margin-top: 14px; }
.ficha-add-address summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-strong);
  padding: 8px 0;
  min-height: var(--tap-min);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 8px);
  padding: 16px;
  margin-top: 8px;
}
.form-grid .filter-field input[type="text"] { margin-bottom: 0; width: 100%; }
.filter-checkbox { display: flex; align-items: flex-end; }
.filter-checkbox label { display: flex; align-items: center; gap: 6px; font-size: 14px; min-height: var(--tap-min); }

/* Editor de factura -- aspecto de documento comercial, Tarea 061 */
.invoice-doc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  padding: 26px 30px;
  margin: 18px 0 24px;
  box-shadow: 0 1px 3px rgba(30, 42, 56, 0.06);
}
.invoice-doc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1.5px solid var(--ink);
}
.invoice-doc-issuer strong { display: block; font-size: 17px; }
.invoice-doc-issuer span { color: var(--ink-soft); font-size: 13.5px; }
.invoice-doc-meta { text-align: right; }
.invoice-doc-meta .doc-title { font-size: 22px; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 6px; }
.invoice-doc-meta .doc-line { font-size: 13.5px; color: var(--ink-soft); }
.invoice-doc-meta .doc-line strong { color: var(--ink); font-weight: 600; }

.invoice-doc-parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 22px;
}
.invoice-doc-party h4 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.invoice-doc-party p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.invoice-doc-party .warn-inline { color: #8a5a12; font-size: 13px; }

.invoice-grid table { width: 100%; }
.invoice-grid input[type="text"], .invoice-grid select, .invoice-grid textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm, 4px);
  font-size: 14px;
  margin-bottom: 0;
}
/* 2026-08-27: descripcion de linea de venta como textarea (lineas
   informativas y saltos de linea manuales) -- 2 filas visibles por
   defecto, redimensionable solo en vertical, sin desbordar la columna. */
.invoice-grid textarea {
  resize: vertical;
  min-height: 2.6em;
  font-family: inherit;
  box-sizing: border-box;
}
.invoice-grid input[type="text"]:hover, .invoice-grid select:hover, .invoice-grid textarea:hover,
.invoice-grid input[type="text"]:focus, .invoice-grid select:focus, .invoice-grid textarea:focus {
  border-color: var(--line);
  background: #fff;
}
.invoice-grid tbody tr form { display: contents; }
.invoice-grid th, .invoice-grid td { padding: 8px 8px; }
.invoice-grid .btn {
  width: auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 13px;
  white-space: nowrap;
}

.invoice-totals {
  margin: 18px 0 0 auto;
  max-width: 340px;
}
.invoice-totals table { width: 100%; }
.invoice-totals td { padding: 8px 14px; font-size: 14.5px; }
.invoice-totals td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-totals tr.total-row td { font-size: 17px; border-top: 1.5px solid var(--ink); padding-top: 12px; }

.invoice-section { margin: 26px 0; }
.invoice-section-danger { border-top: 1px solid var(--line); padding-top: 18px; }
.invoice-section-danger h3 { color: var(--danger); }
.invoice-section h3 { margin: 0 0 10px; font-size: 15px; }
.invoice-fiscal-note {
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 8px);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* Tarea 100 (2026-08-02): eleccion explicita de serie real al emitir/confirmar */
.radio-line { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }

/* Tarea 074 (2026-08-01): sistema de iconos SVG (reemplaza los emoji) */
.icon-svg { display: block; }
.icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sidebar-nav-item .icon { width: 20px; }
.mobile-nav-item .icon { width: 22px; height: 22px; }
.quick-action .icon { width: 24px; height: 24px; }
.topbar-user .icon { margin-right: 4px; }

/* Tarea 074: búsqueda global + campana de avisos en la cabecera */
.topbar-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink-soft);
}
.topbar-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  width: 100%;
  padding: 0;
  margin: 0;
}
.topbar-search-icon { flex: none; display: flex; }
.topbar-alerts {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  flex: none;
}
.topbar-alerts:hover { background: var(--paper-dim); color: var(--ink); }
.alerts-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
@media (max-width: 880px) {
  .topbar-search { display: none; }
}

/* Tarea 074: tarjetas de sección para los "hubs" de Ventas/Compras/Banco/Informes/Más */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.hub-card {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
a.hub-card:hover { box-shadow: 0 4px 14px -6px rgba(30, 42, 56, 0.18); border-color: var(--accent); }
.hub-card-pending { background: var(--paper); }
.hub-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.hub-card-title { font-weight: 600; font-size: 15px; color: var(--ink); }
.hub-card-desc { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }

/* Tarea 074: tarjetas de estadística rápida en Inicio */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.stat-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  background: #fff;
}
.stat-card-label { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.stat-card-value { font-size: 24px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-card-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.stat-card-pending .stat-card-value { color: var(--ink-soft); font-size: 15px; font-weight: 500; }

/* Tarea 074: situación fiscal estimada (Inicio + Informes) */
.fiscal-section { margin: 24px 0; }
.fiscal-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fiscal-heading h3 { margin: 0; }
.fiscal-table { margin-top: 10px; }
.quarter-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.quarter-cell {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  text-align: center;
}
.quarter-cell.current { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 1px var(--accent); }
.quarter-cell-label { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 4px; }
.quarter-cell-state { font-size: 13px; font-weight: 600; }
.quarter-cell-amount { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 640px) {
  .quarter-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Tarea 096 (2026-08-01): tabla -> tarjetas en movil, sin scroll
   horizontal ni columnas cortadas. Aplicar la clase .table-responsive-cards
   al div.table-wrap y data-label="..." a cada <td> (el <th> deja de
   pintarse, cada celda muestra su propia etiqueta delante del valor). */
@media (max-width: 480px) {
  .table-responsive-cards table,
  .table-responsive-cards thead,
  .table-responsive-cards tbody,
  .table-responsive-cards tr,
  .table-responsive-cards td { display: block; width: 100%; }
  .table-responsive-cards thead { display: none; }
  .table-responsive-cards tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 4px 12px;
  }
  .table-responsive-cards tr:last-child { margin-bottom: 0; }
  .table-responsive-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    text-align: right;
  }
  .table-responsive-cards td:last-child { border-bottom: none; }
  .table-responsive-cards td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--ink-soft);
    text-align: left;
    margin-right: 8px;
  }
  .table-responsive-cards td:not([data-label]) { justify-content: flex-end; }
}

/* Tarea 074: pestañas del editor de documento (CSS-only, sin JS) */
.doc-tab-radio {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#doc-tab-editar:focus-visible ~ .doc-tabs label[for="doc-tab-editar"],
#doc-tab-preview:focus-visible ~ .doc-tabs label[for="doc-tab-preview"],
#doc-tab-vencimientos:focus-visible ~ .doc-tabs label[for="doc-tab-vencimientos"],
#doc-tab-recepcion:focus-visible ~ .doc-tabs label[for="doc-tab-recepcion"],
#doc-tab-historial:focus-visible ~ .doc-tabs label[for="doc-tab-historial"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.doc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 18px 0 0; }
.doc-tabs label {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.doc-tab-panel { display: none; padding-top: 18px; }
#doc-tab-editar:checked ~ .doc-tabs label[for="doc-tab-editar"],
#doc-tab-preview:checked ~ .doc-tabs label[for="doc-tab-preview"],
#doc-tab-vencimientos:checked ~ .doc-tabs label[for="doc-tab-vencimientos"],
#doc-tab-recepcion:checked ~ .doc-tabs label[for="doc-tab-recepcion"],
#doc-tab-historial:checked ~ .doc-tabs label[for="doc-tab-historial"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
#doc-tab-editar:checked ~ .doc-tab-content .doc-tab-panel-editar,
#doc-tab-preview:checked ~ .doc-tab-content .doc-tab-panel-preview,
#doc-tab-vencimientos:checked ~ .doc-tab-content .doc-tab-panel-vencimientos,
#doc-tab-recepcion:checked ~ .doc-tab-content .doc-tab-panel-recepcion,
#doc-tab-historial:checked ~ .doc-tab-content .doc-tab-panel-historial {
  display: block;
}

/* Tarea urgente 2026-08-05: vista previa embebida del PDF de albaran +
   firma de recepcion -- responsive 390/768/1440 (ver informe de la
   tarea). */
.pdf-preview-frame {
  width: 100%;
  min-height: 70vh;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.reception-summary { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.reception-signature-img {
  max-width: 260px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 6px;
}
.reception-summary dl { margin: 0; }
.reception-summary dt { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.reception-summary dd { margin: 0 0 2px; font-weight: 600; }
@media (max-width: 768px) {
  .pdf-preview-frame { min-height: 55vh; }
  .reception-summary { flex-direction: column; }
  .reception-signature-img { max-width: 100%; }
}

.doc-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.doc-editor-summary {
  position: sticky;
  top: calc(var(--topbar-height) + 16px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 18px;
  background: #fff;
}
.doc-editor-summary h4 { margin: 0 0 10px; font-size: 14px; }
.doc-editor-summary .total-line { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13.5px; }
.doc-editor-summary .total-line.grand { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; font-size: 16px; font-weight: 700; }
.doc-editor-summary .total-line.collected span:last-child { color: var(--success); }
.doc-editor-summary .total-line.pending-amount span:last-child { color: var(--warning); }
@media (max-width: 960px) {
  .doc-editor-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-editor-summary { position: static; }
}

/* Tarea urgente 2026-08-05: lienzo de firma de recepcion -- tactil y
   raton (Pointer Events, sin libreria externa). Responsive 390/768/1440. */
.signature-pad-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  margin-top: 6px;
}
.signature-canvas {
  display: block;
  width: 100%;
  height: 220px;
  touch-action: none;
  cursor: crosshair;
  border-radius: 8px;
}
@media (min-width: 768px) {
  .signature-canvas { height: 260px; }
}
@media (min-width: 1440px) {
  .firma-page { max-width: 900px; }
  .signature-canvas { height: 300px; }
}
@media (max-width: 390px) {
  .signature-canvas { height: 180px; }
}

/* ------------------------------------------------------------------
   Tarea 2026-08-11: hacer usable la edición de líneas de documento.
   Tres problemas reales que resolvía esto:
   1. La columna de edición medía ~676px (.page a 1000px menos el
      resumen lateral de 260px + 24px de hueco) mientras la tabla de
      líneas tiene 10 celdas -> scroll horizontal permanente.
   2. Los campos llevaban anchos fijos en píxeles escritos a mano en la
      plantilla (concepto 140px, cantidad 60px...), así que no se
      adaptaban por mucho sitio que hubiera. Ya retirados.
   3. Al guardar una línea el servidor redirigía sin ancla y el
      navegador aterrizaba arriba del todo. Ya se redirige a
      #linea-<id>; aquí solo hace falta que el ancla no quede tapada
      por la barra superior fija.
   ------------------------------------------------------------------ */

/* 1) Solo las fichas de documento (factura/albarán/presupuesto) usan el
   ancho completo. El resto de la aplicación mantiene sus 1000px. */
.page-documento { max-width: min(1400px, 96vw); }

/* 2) Reparto de columnas: el concepto se queda todo el sobrante y los
   números ocupan lo justo. Sin píxeles fijos en la plantilla. */
.invoice-grid table { table-layout: fixed; }
.invoice-grid th:nth-child(1), .invoice-grid td:nth-child(1) { width: auto; min-width: 220px; }
.invoice-grid th:nth-child(2), .invoice-grid td:nth-child(2) { width: 7ch; }
.invoice-grid th:nth-child(3), .invoice-grid td:nth-child(3) { width: 10ch; }
.invoice-grid th:nth-child(4), .invoice-grid td:nth-child(4) { width: 7ch; }
.invoice-grid th:nth-child(5), .invoice-grid td:nth-child(5) { width: 9ch; }
.invoice-grid th:nth-child(6), .invoice-grid td:nth-child(6) { width: 7ch; }
.invoice-grid th:nth-child(7), .invoice-grid td:nth-child(7),
.invoice-grid th:nth-child(8), .invoice-grid td:nth-child(8) { width: 11ch; text-align: right; }

/* Los importes calculados se leen mejor alineados a la derecha y con
   cifras de ancho fijo, para que las columnas cuadren visualmente. */
.invoice-grid td:nth-child(7), .invoice-grid td:nth-child(8) {
  font-variant-numeric: tabular-nums;
}

/* Campos algo más altos y legibles: se pasa el día escribiendo aquí. */
.invoice-grid input[type="text"], .invoice-grid select {
  padding: 8px 8px;
  font-size: 15px;
}
.invoice-grid input[type="text"] { border-color: var(--line); background: #fff; }

/* 3) Que al volver del guardado la línea no quede debajo de la barra. */
.invoice-grid .linea-fila { scroll-margin-top: calc(var(--topbar-height, 56px) + 24px); }
.invoice-grid .linea-fila:target td { background: var(--paper-dim); }

/* En pantallas estrechas se mantiene el comportamiento de antes: la
   tabla scrollea dentro de su contenedor, nunca desborda la página. */
@media (max-width: 900px) {
  .invoice-grid table { table-layout: auto; }
  .invoice-grid th:nth-child(1), .invoice-grid td:nth-child(1) { min-width: 180px; }
}

/* Tarea T401A: tabla de "Líneas" de una remesa (Documento/Cliente/Mandato/
   Esquema/Secuencia/Importe/Estado/Devuelto). Columnas propias, no las de
   una línea de documento (concepto+importes) — nunca reutilizar
   .invoice-grid aquí: sus anchos fijos en "ch" están pensados para esas
   otras columnas y montaban las cabeceras de esta tabla. table-layout se
   deja en su valor por defecto (auto) para que cada columna se ajuste a
   su contenido real; .table-wrap ya aporta scroll horizontal si no cabe,
   y .table-responsive-cards ya aporta la vista apilada en móvil estrecho. */
.remesa-lineas th:nth-child(6), .remesa-lineas td:nth-child(6) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.remesa-lineas th:nth-child(4), .remesa-lineas td:nth-child(4),
.remesa-lineas th:nth-child(5), .remesa-lineas td:nth-child(5) {
  white-space: nowrap;
}