:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #22263a;
  --border: #2e3250;
  --accent: #4f6bff;
  --accent-dim: #1e2a5e;
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;
  --text: #e2e4f0;
  --muted: #7a7f9a;
  --white: #ffffff;
  --radius: 10px;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
}

/* ── Nav ── */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
body.with-sidebar nav {
  margin-left: -220px;
  width: calc(100% + 220px);
}

.nav-brand {
  display: flex;
  align-items: center;
}
.nav-logo {
  height: 28px;
  width: auto;
  filter: invert(1) brightness(2);
  display: block;
}

.nav-links { display: flex; align-items: center; gap: 6px; }

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--text); background: var(--surface2); }
.nav-links a.active { color: var(--white); background: var(--surface2); }
.nav-vencidas { position: relative; }
.nav-badge {
  position: absolute; top: 0; right: 2px;
  background: #f87171; color: #3b0d0d;
  font-size: 10px; font-weight: 700; line-height: 15px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

.nav-dropdown { position: relative; }
.nav-dropdown-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font: inherit;
  padding: 6px 10px 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.nav-dropdown-btn:hover, .nav-dropdown-btn.active { color: var(--white); background: var(--surface2); }
.nav-caret { font-size: 9px; opacity: .6; margin-left: 2px; }
.nav-dropdown-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  min-width: 170px;
  padding: 6px;
  flex-direction: column;
  gap: 2px;
  z-index: 500;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu a {
  color: var(--muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}
.nav-dropdown-menu a:hover { color: var(--text); background: var(--surface2); }
.nav-dropdown-menu a.active { color: var(--white); background: var(--surface2); }

body.with-sidebar { padding-left: 220px; }

.nav-side-menu {
  position: fixed; top: 56px; left: 0;
  height: calc(100vh - 56px); width: 220px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 12px;
  z-index: 90;
}
.nav-side-menu-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 14px 10px;
}
.nav-side-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.nav-side-menu-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-side-menu a:hover { color: var(--text); background: var(--surface2); }
.nav-side-menu a.active {
  color: var(--white);
  background: var(--accent-dim);
  border-left-color: var(--accent);
  font-weight: 600;
}

/* ── Desplegable "Modelos AEAT" dentro de la barra lateral (reutiliza
   .nav-dropdown del nav superior, adaptado a fila vertical de ancho completo) ── */
.nav-dropdown-side { width: 100%; }
.nav-dropdown-side .nav-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-size: 9.8px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 8px;
  border-left: 3px solid transparent;
  text-align: left;
}
.nav-dropdown-side .nav-dropdown-btn:hover,
.nav-dropdown-side .nav-dropdown-btn.active {
  color: var(--white);
  background: var(--accent-dim);
  border-left-color: var(--accent);
}
.nav-dropdown-side .nav-caret { margin-left: auto; transition: transform .15s; }
.nav-dropdown-side.open .nav-caret { transform: rotate(180deg); }
.nav-dropdown-side .nav-dropdown-menu {
  position: static;
  display: none;
  box-shadow: none;
  border: none;
  background: transparent;
  min-width: 0;
  padding: 2px 0 2px 30px;
  flex-direction: column;
  gap: 0;
}
.nav-dropdown-side.open .nav-dropdown-menu { display: flex; }
.nav-dropdown-side .nav-dropdown-menu a {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 6px;
}

.btn-upload {
  background: var(--accent) !important;
  color: var(--white) !important;
  font-weight: 600;
  margin-left: 8px;
}
.btn-upload:hover { background: #3d58e8 !important; }

/* ── Main layout ── */
main { padding: 28px; max-width: 1280px; margin: 0 auto; }

/* ── Page header ── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 24px;
}
.page-title { font-size: 22px; font-weight: 700; color: var(--white); }
.page-subtitle { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ── KPI cards ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.kpi-label { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--white); letter-spacing: -.5px; }
.kpi-value.green { color: var(--green); }
.kpi-value.red   { color: var(--red); }
.kpi-value.amber { color: var(--amber); }
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.kpi-sparkline { margin-top: 10px; height: 28px; }
.kpi-sparkline svg { display: block; }

/* ── Chart card ── */
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 28px;
}
.chart-card h3 { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 16px; text-transform: uppercase; letter-spacing: .06em; }

/* ── Filters ── */
.filters {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 16px; flex-wrap: wrap;
}
.filters select, .filters input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
}
.filters select:focus, .filters input:focus { border-color: var(--accent); }

/* ── Table ── */
.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}

.table-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.table-header h3 { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

table { width: 100%; min-width: 640px; border-collapse: collapse; }
th {
  background: var(--surface2);
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .05em;
  text-transform: uppercase;
}
td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface2); }

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

/* ── Colores de estado reutilizables (evita duplicar lógica ad-hoc por plantilla) ── */
.green { color: var(--green); }
.red   { color: var(--red); }
.amber { color: var(--amber); }
.muted { color: var(--muted); }

/* ── Totals row ── */
.totals-row td {
  font-weight: 700;
  color: var(--white);
  background: var(--surface2);
  border-top: 2px solid var(--border);
}

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.badge-cobrada  { background: #14532d; color: var(--green); }
.badge-pendiente { background: #422006; color: var(--amber); }
.badge-parcial  { background: #1e3a5e; color: #60a5fa; }
.badge-vencida  { background: #3b0d0d; color: #f87171; }
.badge-borrador  { background: #2a2d3a; color: var(--muted); }
.badge-enviado   { background: #1e3a5e; color: #60a5fa; }
.badge-aceptado  { background: #14532d; color: var(--green); }
.badge-rechazado { background: #3b0d0d; color: #f87171; }
.badge-facturado { background: #14324d; color: #38bdf8; }
.badge-aprobada { background: #422006; color: var(--amber); }

/* ── Nav search ── */
.nav-search { position: relative; }
.nav-search input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 5px 12px;
  font-size: 13px;
  width: 180px;
  outline: none;
  transition: border-color .15s, width .2s;
}
.nav-search input:focus { border-color: var(--accent); width: 240px; }
.nav-search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 500;
  overflow: hidden;
  max-height: 420px;
  overflow-y: auto;
}
.nsr-group {
  padding: 8px 14px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 700;
}
.nsr-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  gap: 8px;
}
.nsr-item:hover { background: var(--surface2); }
.nsr-empty { padding: 16px 14px; color: var(--muted); font-size: 13px; }

/* ── Autocompletado de clientes ── */
.cliente-ac-box {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 400;
  max-height: 260px;
  overflow-y: auto;
}
.cliente-ac-item { padding: 8px 12px; cursor: pointer; }
.cliente-ac-item:hover { background: var(--surface2); }

/* ── Print styles ── */
@media print {
  nav, .filters, .table-header .btn, .table-header a,
  .modal-overlay, #toast, .actions, .btn, .year-selector { display: none !important; }
  body { background: #fff; color: #000; font-size: 12px; }
  .trim-card { break-inside: avoid; border: 1px solid #ddd; }
  .trim-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
  .trim-row-val { color: #000 !important; }
  .trim-header { color: #000 !important; background: #f5f5f5 !important; }
  .table-card { border: 1px solid #ddd; }
  canvas { max-width: 100% !important; }
}

/* ── Action buttons ── */
.btn { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: background .15s; }
.btn-primary  { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: #3d58e8; }
.btn-ghost   { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--text); }
.btn-danger  { background: transparent; color: var(--red); border: 1px solid transparent; }
.btn-danger:hover { background: #2d1010; }

.actions { display: flex; gap: 4px; }

/* ── Modal ── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 200;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  width: 540px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
}
.modal h2 { font-size: 17px; font-weight: 700; color: var(--white); margin-bottom: 20px; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }

/* ── Form ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.form-group input, .form-group select, .form-group textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); }

/* ── Upload page ── */
.upload-container { max-width: 680px; margin: 0 auto; }

.upload-tipo {
  display: flex; gap: 12px; margin-bottom: 24px;
}
.tipo-btn {
  flex: 1; padding: 18px; border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s;
}
.tipo-btn.selected { border-color: var(--accent); background: var(--accent-dim); }
.tipo-btn h3 { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.tipo-btn p  { font-size: 12px; color: var(--muted); }

.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.drop-zone.dragover { border-color: var(--accent); background: var(--accent-dim); }
.drop-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-zone-icon { font-size: 40px; margin-bottom: 12px; }
.drop-zone h3 { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 6px; }
.drop-zone p  { font-size: 13px; color: var(--muted); }

.file-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.file-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 14px;
}
.file-item-name { flex: 1; font-size: 13px; }
.file-item-status { font-size: 12px; color: var(--muted); }
.file-item-status.ok  { color: var(--green); }
.file-item-status.err { color: var(--red); }

/* ── Results previews ── */
.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 16px;
}
.result-card h4 {
  font-size: 13px; font-weight: 700; color: var(--white);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.result-card h4 span { font-size: 11px; color: var(--muted); font-weight: 400; }

/* ── Informes ── */
.trim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.trim-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.trim-header {
  background: var(--surface2);
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 700; color: var(--white);
}
.trim-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.trim-row { display: flex; justify-content: space-between; align-items: center; }
.trim-row-label { font-size: 13px; color: var(--muted); }
.trim-row-val { font-size: 13px; font-weight: 600; color: var(--white); }
.trim-row-val.green { color: var(--green); }
.trim-row-val.red   { color: var(--red); }
.trim-row-val.amber { color: var(--amber); }
.trim-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.trim-total { font-weight: 700; font-size: 14px; }

/* ── Year selector ── */
.year-selector { display: flex; gap: 6px; align-items: center; }
.year-selector a {
  color: var(--muted); text-decoration: none;
  padding: 5px 10px; border-radius: 6px; font-size: 13px;
}
.year-selector a.active { background: var(--surface2); color: var(--white); }

/* ── Spinner ── */
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-icon { font-size: 36px; margin-bottom: 12px; }
.empty p { font-size: 14px; }

/* ── Toast ── */
#toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--text);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  transform: translateY(80px);
  opacity: 0;
  transition: all .25s;
  z-index: 300;
}
#toast.show { transform: translateY(0); opacity: 1; }
#toast.ok   { border-color: var(--green); }
#toast.err  { border-color: var(--red); }

/* ── Cabeceras ordenables ── */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.sortable:hover { color: var(--accent); }
.sort-icon { font-size: 11px; opacity: .5; margin-left: 3px; }
th.sortable:hover .sort-icon { opacity: 1; }

/* ── Barra de acciones en bloque (selección múltiple) ── */
.bulk-bar {
  display: none;
  align-items: center;
  gap: 12px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}
.bulk-bar .sel-contador { font-weight: 700; color: var(--white); }
.bulk-bar select {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
}

/* ── Buscador en filtros ── */
.filters input[type="text"] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  transition: border-color .2s;
}
.filters input[type="text"]:focus { border-color: var(--accent); }

/* ── Badge de estado clicable ── */
.badge-clickable { cursor: pointer; transition: opacity .15s, transform .1s; }
.badge-clickable:hover { opacity: .8; transform: scale(1.06); }

/* ── Presupuestos: paleta de gris neutro medio-claro, texto blanco ──
   Solo se aplica en /presupuestos/nuevo (body.pre-page): al editar un
   presupuesto ya existente, las mismas clases .pre-* usan estos valores
   por defecto, que son los colores normales del resto de la app (Facturas,
   Gastos...), para que esa vista no se vea gris.
   Contraste comprobado contra blanco (WCAG) para la paleta gris: tarjetas
   6.5:1, huecos editables 4.8:1 — ambos superan el mínimo de texto normal
   (4.5:1); sobre el tema oscuro normal el contraste es aún mayor. */
:root {
  --pre-page-bg:   var(--bg);
  --pre-bg:        var(--surface);
  --pre-bg2:       var(--surface2);
  --pre-border:    var(--border);
  --pre-bg2-hover: var(--surface2);
}
body.pre-page {
  --pre-page-bg:   #3d4046;
  --pre-bg:        #5b5e65;
  --pre-bg2:       #6f727a;
  --pre-border:    #83868e;
  --pre-bg2-hover: #797c84;
  background: var(--pre-page-bg);
}
.pre-card {
  background: var(--pre-bg);
  border: 1px solid var(--pre-border);
  border-radius: var(--radius);
  margin-top: 18px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.pre-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  user-select: none;
  background: var(--pre-bg2);
  transition: background .15s;
}
.pre-section > summary:hover { background: var(--pre-bg2-hover); }
.pre-section > summary::-webkit-details-marker { display: none; }
.pre-section > summary::marker { content: ""; display: none; }
.pre-section > summary::after {
  content: "▾";
  font-size: 11px;
  color: var(--white);
  opacity: .8;
  margin-left: auto;
  transition: transform .15s;
}
.pre-section[open] > summary::after { transform: rotate(180deg); }
.pre-section[open] > summary { border-bottom: 1px solid var(--pre-border); }
.pre-section-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--white);
  opacity: .8;
  background: rgba(0,0,0,.2);
  border-radius: 20px;
  padding: 2px 10px;
}
.pre-section-count.has-lines { color: var(--white); opacity: 1; background: var(--accent); }
.pre-section-body { padding: 22px; }
.pre-section-body .form-grid { margin-bottom: 4px; }
.pre-section-body .form-group label { color: var(--white); opacity: .85; }
.pre-section-body .form-group input,
.pre-section-body .form-group select,
.pre-section-body .form-group textarea {
  background: var(--pre-bg2);
  border-color: var(--pre-border);
  color: var(--white);
}
.pre-section-body .form-group input:focus,
.pre-section-body .form-group select:focus,
.pre-section-body .form-group textarea:focus { border-color: var(--accent); }
.pre-section-body table th { background: var(--pre-bg2); color: var(--white); }
.pre-section-body td { border-bottom-color: var(--pre-border); color: var(--white); }
.pre-section-body tr:hover td { background: var(--pre-bg2); }

/* Panel de resultados destacado (Impresión) */
.pre-resultado {
  display: flex; flex-wrap: wrap; gap: 20px;
  background: var(--pre-bg2);
  border: 1px solid var(--pre-border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0 0 18px;
  font-size: 12px;
  color: var(--white);
}
.pre-resultado strong { color: var(--white); font-size: 13px; }
.pre-hint { font-size: 12px; color: var(--white); opacity: .75; margin-bottom: 14px; }

/* Ficha superior (Número/Fecha/Concepto, Cliente): mismos huecos editables claros */
.pre-top-card .form-group label { color: var(--white); opacity: .85; }
.pre-top-card .form-group input,
.pre-top-card .form-group select,
.pre-top-card .form-group textarea {
  background: var(--pre-bg2);
  border-color: var(--pre-border);
  color: var(--white);
}
.pre-top-card .form-group input:focus,
.pre-top-card .form-group select:focus,
.pre-top-card .form-group textarea:focus { border-color: var(--accent); }
.pre-top-card .cliente-ac-box { background: var(--pre-bg2); border-color: var(--pre-border); }
.pre-top-card .cliente-ac-item:hover { background: var(--pre-border); }

/* Par de campos Ancho × Alto en línea */
.dim-pair { display: flex; align-items: center; gap: 8px; }
.dim-pair input { flex: 1; min-width: 0; }
.dim-x { color: var(--white); opacity: .7; font-size: 13px; flex-shrink: 0; }

/* Ficha superior (número/fecha/concepto, cliente) y listados con el mismo gris */
.pre-top-card { background: var(--pre-bg); border-color: var(--pre-border) !important; }

/* Secciones vacías (0 líneas) atenuadas — el ojo va directo a las que tienen contenido */
.pre-section.pre-section-empty:not([open]) > summary { opacity: .55; }
.pre-section.pre-section-empty:not([open]) > summary:hover { opacity: .9; }

/* Barra de resumen en vivo (líneas/base/IVA/IRPF/total): sticky bajo la nav,
   para ver el total actualizado sin tener que bajar hasta el final del
   formulario cada vez que se añade una línea. */
.pre-summary-bar {
  position: sticky; top: 56px; z-index: 90;
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  background: var(--pre-bg2);
  border: 1px solid var(--pre-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 22px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  font-size: 13px;
  color: var(--white);
}
.pre-summary-item strong { font-size: 14px; color: var(--white); margin-left: 4px; }
.pre-summary-total { margin-left: auto; font-weight: 600; }
.pre-summary-total strong { font-size: 19px; }

/* Fila resaltada mientras se está editando (para saber cuál es) */
.pre-section-body tr.editing-row td { background: var(--accent-dim) !important; }

/* Arrastrar líneas para reordenarlas dentro de cada sección */
.drag-handle { cursor: grab; color: var(--white); opacity: .5; text-align: center; width: 24px; user-select: none; }
.drag-handle:hover { opacity: .9; }
.pre-section-body tr[draggable="true"].dragging { opacity: .4; }
.pre-section-body tr[draggable="true"].drag-over { box-shadow: inset 0 2px 0 var(--accent); }

/* Validación visual en vivo (en vez de solo un toast) */
.input-invalid-red {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,.3) !important;
}
.input-invalid-amber {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.3) !important;
}


/* ── Responsive (tablet/móvil) ──────────────────────────────────────────────
   Solo añade reglas dentro de @media: el layout de escritorio no cambia.
   El menú lateral se estrecha a solo iconos en vez de reordenar la página,
   para minimizar el riesgo de descuadrar algo que ya funciona en escritorio. */
@media (max-width: 900px) {
  body.with-sidebar { padding-left: 56px; }
  body.with-sidebar nav { margin-left: -56px; width: calc(100% + 56px); }
  .nav-side-menu { width: 56px; padding: 18px 6px; }
  .nav-side-menu-label, .nav-side-menu-text { display: none; }
  .nav-side-menu a { justify-content: center; padding: 12px 0; }
  .nav-side-menu-icon { font-size: 18px; width: auto; }

  main { padding: 16px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .form-grid { grid-template-columns: 1fr; }
  .trim-grid { grid-template-columns: 1fr; }
  .charts-grid { grid-template-columns: 1fr !important; }

  .nav-search input { width: 110px; }
  .nav-search input:focus { width: 150px; }
  .nav-links a[title] { font-size: 14px; }

  .pre-summary-bar { gap: 12px; padding: 10px 14px; font-size: 12px; }
  .pre-summary-total { margin-left: 0; width: 100%; order: 5; }
}

@media (max-width: 520px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .modal { padding: 20px; }
  .nav-search { display: none; }
  .btn-upload { font-size: 12px; padding: 6px 8px; }
}