/* =====================================================================
   ACU-ABAE Comptabilitat
   Mismo sistema de diseño que la intranet (style.css del CRM):
   esquinas rectas, Montserrat 800 en títulos, Lora en cifras,
   paleta crema/verde y barra lateral verde oscuro.
   ===================================================================== */
:root {
  --p: #007f77; --pd: #00645d; --pl: #e6f2f0; --pt: #003d39;
  --a: #b8790a; --al: #f7ecd8; --at: #6b4a08;
  --r: #a83c2e; --rl: #f7ece9; --rt: #6b241a;
  --b: #2f5f8f; --bl: #eaf1f7; --bt: #1c3a54;
  --gl: #e7f0da; --gt: #3b6d11;
  --bg: #fdfbf6; --bg2: #f6f2e7; --bg3: #efe8d6;
  --tx: #17241f; --tx2: #6d6455; --tx3: #a89d89;
  --br: rgba(23, 36, 31, .10); --br2: rgba(23, 36, 31, .18);
  --card-bg: #fffdf8;
  --sb-bg: #12312c; --sb-hover: rgba(255, 255, 255, .06); --sb-active: rgba(0, 127, 119, .28);
  --sb-tx: rgba(255, 255, 255, .55); --sb-tx-active: #e8d9b5; --sb-border: rgba(255, 255, 255, .09);
  --shadow-sm: 0 1px 2px rgba(23, 36, 31, .06);
  --shadow-md: 0 4px 14px rgba(23, 36, 31, .08), 0 1px 3px rgba(23, 36, 31, .05);
  --shadow-lg: 0 8px 28px rgba(23, 36, 31, .12), 0 2px 6px rgba(23, 36, 31, .06);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Montserrat', 'Inter', sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --lateral: 246px;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #151f1b; --bg2: #1c2823; --bg3: #24342c;
  --tx: #ece6d8; --tx2: #a9a08c; --tx3: #6f6858;
  --br: rgba(236, 230, 216, .09); --br2: rgba(236, 230, 216, .16);
  --p: #3ecbbd; --pd: #2fa89c; --pl: #1d3934; --pt: #a9ece2;
  --r: #e0776a; --rl: #3a2420; --rt: #f3b4a9;
  --a: #e0ab5c; --al: #3a2f18; --at: #f2cf9c;
  --b: #7fb0dd; --bl: #1c2f3f; --bt: #bfdcf3;
  --gl: #243a1d; --gt: #b9dd93;
  --card-bg: #1c2823;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body { font-family: var(--font); font-size: 14px; color: var(--tx); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--p); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
h2 { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 14px; }
h3 { font-family: var(--font-display); font-size: 12px; font-weight: 700; margin: 0 0 6px; }
p + h3, div + h3 { margin-top: 14px; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--tx2); }
.der { text-align: right; }
.nowrap { white-space: nowrap; }
.oculto { display: none !important; }
.ti { font-size: 16px; line-height: 1; }
::selection { background: var(--pl); color: var(--pt); }
*:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--br2); }

/* ---------- estructura ---------- */
.shell { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }
.lateral { background: var(--sb-bg); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; box-shadow: var(--shadow-md); }
.marca { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--sb-border); }
.marca img { width: 34px; height: 34px; object-fit: contain; }
.marca div { font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: rgba(255, 255, 255, .95); }
.marca small { display: block; font-family: var(--font); font-size: 10px; font-weight: 400; color: rgba(255, 255, 255, .4); letter-spacing: 0; }
.nav { display: flex; flex-direction: column; padding: 8px 0 16px; }
.nav .grupo { padding: 16px 18px 6px; font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .32); }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 18px; font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--sb-tx); border-left: 2px solid transparent; white-space: nowrap; transition: all .12s; }
.nav a:hover { background: var(--sb-hover); color: rgba(255, 255, 255, .92); text-decoration: none; }
.nav a.activo { background: var(--sb-active); color: var(--sb-tx-active); font-weight: 600; border-left-color: var(--sb-tx-active); }
.nav a .ico { width: 18px; text-align: center; flex-shrink: 0; }
.nav a .ico .ti { font-size: 15px; }
.pie-lateral { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--sb-border); font-size: 11px; color: rgba(255, 255, 255, .45); }
.pie-lateral strong { display: block; color: rgba(255, 255, 255, .85); font-family: var(--font-display); font-size: 12px; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra { height: 58px; display: flex; align-items: center; gap: 8px; padding: 0 24px; background: var(--bg); border-bottom: 1px solid var(--br); position: sticky; top: 0; z-index: 5; }
.barra .espacio { flex: 1; }
.barra .btn { background: transparent; border-color: transparent; color: var(--tx2); }
.barra .btn:hover { background: var(--bg2); color: var(--tx); }
.user-pill { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: var(--bg2); border: 1px solid var(--br2); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--tx); font-family: var(--font); }
.user-pill:hover { background: var(--pl); }
.uavatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--p), var(--pd)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.contenido { padding: 28px 32px; width: 100%; max-width: 1360px; margin: 0 auto; animation: aparece .2s ease; }
@keyframes aparece { from { opacity: 0; transform: translateY(4px); } }
.cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--br); }
.cab h1::after { content: ''; display: block; width: 28px; height: 3px; background: var(--p); margin-top: 6px; }
.panel .cab { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
.cab .espacio { flex: 1; }
.btn-menu { display: none; }

/* ---------- tarjetas ---------- */
.panel { background: var(--card-bg); border: 1px solid var(--br); box-shadow: var(--shadow-sm); padding: 18px 20px; transition: box-shadow .15s; }
.panel:hover { box-shadow: var(--shadow-md); }
.panel + .panel { margin-top: 16px; }
.grid > .panel + .panel, .grid > * > .panel:first-child { margin-top: 0; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { display: block; color: inherit; position: relative; padding-left: 24px; }
.kpi::before { content: ''; position: absolute; left: 12px; top: 18px; width: 3px; height: 32px; background: var(--p); }
a.kpi:hover { text-decoration: none; transform: translateY(-1px); }
.kpi .etq { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--tx3); }
.kpi .valor { font-family: var(--font-serif); font-size: 30px; font-weight: 600; letter-spacing: -.01em; line-height: 1; margin: 8px 0 4px; font-variant-numeric: tabular-nums; color: var(--tx); }
.kpi .muted { font-size: 12px; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--br2); background: var(--card-bg); color: var(--tx); font: 500 13px var(--font); cursor: pointer; white-space: nowrap; transition: background .1s, filter .1s; text-decoration: none; }
.btn:hover { background: var(--bg2); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn.prim { background: var(--p); border-color: var(--p); color: #fff; font-weight: 600; box-shadow: var(--shadow-sm); }
.btn.prim:hover { filter: brightness(1.08); background: var(--p); }
.btn.peligro { color: var(--r); border-color: var(--r); }
.btn.peligro:hover { background: var(--rl); }
.btn.peq { padding: 4px 10px; font-size: 12px; }
.btn.icono { padding: 6px 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- etiquetas y avisos ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: .01em; background: var(--bg3); color: var(--tx2); }
.badge.ok { background: var(--gl); color: var(--gt); }
.badge.aviso { background: var(--al); color: var(--at); }
.badge.error { background: var(--rl); color: var(--rt); }
.badge.info { background: var(--pl); color: var(--pt); }
.alerta { padding: 10px 14px; font-size: 13px; margin-bottom: 10px; display: flex; gap: 8px; align-items: flex-start; }
.alerta.error { background: var(--rl); color: var(--rt); }
.alerta.aviso { background: var(--al); color: var(--at); }
.alerta.ok { background: var(--gl); color: var(--gt); }
.alerta.info { background: var(--bl); color: var(--bt); }

/* ---------- tablas ---------- */
.tabla-wrap { overflow-x: auto; margin: 0 -20px; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.t th { text-align: left; padding: 10px 14px; font-size: 10.5px; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--br); white-space: nowrap; }
table.t th.der { text-align: right; }
table.t td { padding: 12px 14px; border-bottom: 1px solid var(--br); vertical-align: middle; }
table.t tbody tr:last-child td { border-bottom: none; }
table.t tbody tr td:first-child { border-left: 2px solid transparent; }
table.t tr.click { cursor: pointer; }
table.t tr.click:hover td { background: var(--pl); }
table.t tr.click:hover td:first-child { border-left-color: var(--p); }
table.t tfoot td { font-weight: 700; border-top: 1px solid var(--br2); border-bottom: 0; font-family: var(--font-display); font-size: 12px; }
.vacio { padding: 48px 24px; text-align: center; color: var(--tx3); }

/* ---------- formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > label { font-size: 11px; font-weight: 700; color: var(--tx2); text-transform: uppercase; letter-spacing: .05em; }
.campo > label:has(input[type=checkbox]) { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--tx); display: flex; align-items: center; gap: 8px; }
input, select, textarea { width: 100%; padding: 8px 10px; min-height: 36px; border: 1px solid var(--br2); border-radius: 0; font: 13px var(--font); background: var(--bg); color: var(--tx); transition: border-color .15s, box-shadow .15s; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--bg2); }
textarea { min-height: 80px; resize: vertical; }
textarea.codigo { font-family: var(--mono); font-size: 12px; min-height: 360px; white-space: pre; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 3px var(--pl); }
input[type=checkbox] { width: auto; min-height: 0; accent-color: var(--p); }
input:disabled, select:disabled { opacity: .55; }
.form { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c6 { grid-column: span 6; } .c5 { grid-column: span 5; } .c4 { grid-column: span 4; } .c3 { grid-column: span 3; } .c2 { grid-column: span 2; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 20px; }
.modal .acciones { padding-top: 14px; border-top: 1px solid var(--br); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filtros > * { width: auto; }
.filtros input[type=search] { min-width: 240px; flex: 1; }
.tabs { display: flex; border-bottom: 1px solid var(--br); margin-bottom: 16px; overflow-x: auto; }
.tabs a { padding: 9px 16px; font-size: 13px; color: var(--tx2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.activo { color: var(--p); border-color: var(--p); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--tx); }

/* ---------- editor de líneas ---------- */
.lineas td { padding: 6px 4px; }
.lineas input, .lineas select { min-height: 32px; padding: 5px 8px; }
.lineas .num { width: 90px; text-align: right; }
.totales { margin-left: auto; width: 320px; max-width: 100%; margin-top: 12px; }
.totales div { display: flex; justify-content: space-between; padding: 4px 0; font-variant-numeric: tabular-nums; }
.totales .grande { font-family: var(--font-serif); font-size: 20px; font-weight: 600; border-top: 2px solid var(--p); margin-top: 6px; padding-top: 8px; }

/* ---------- modal y avisos flotantes ---------- */
.modal-fondo { position: fixed; inset: 0; background: rgba(23, 36, 31, .45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; }
.modal { background: var(--card-bg); padding: 28px; width: 560px; max-width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg); }
.modal h2 { font-size: 16px; font-weight: 800; margin-bottom: 18px; }
.modal.ancho { width: 1100px; }
#toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 1100; }
.toast { background: var(--sb-bg); color: var(--sb-tx-active); padding: 10px 16px; box-shadow: var(--shadow-lg); max-width: 380px; font-size: 13px; border-left: 3px solid var(--p); animation: aparece .2s ease-out; }
.toast.error { background: var(--r); color: #fff; border-left-color: var(--rt); }

/* ---------- acceso ---------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg2); }
.login .panel { width: 400px; max-width: 100%; padding: 32px; border-top: 3px solid var(--p); }
.login .marca { justify-content: center; border: 0; padding: 0 0 22px; }
.login .marca div { color: var(--tx); font-size: 18px; }
.login .marca small { color: var(--tx2); font-size: 11px; }

/* ---------- documento ---------- */
.doc-grid { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
iframe.doc { width: 100%; height: 75vh; border: 1px solid var(--br); background: #fff; }
.huella { font-family: var(--mono); font-size: 11px; word-break: break-all; color: var(--tx2); }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 10px; }
.barras div { flex: 1; background: var(--p); min-height: 2px; position: relative; }
.barras div span { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--tx3); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .doc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .lateral { position: fixed; left: 0; top: 0; z-index: 900; width: 270px; transform: translateX(-100%); transition: transform .2s; }
  .shell.menu-abierto .lateral { transform: none; }
  .shell.menu-abierto::after { content: ''; position: fixed; inset: 0; background: rgba(23, 36, 31, .45); z-index: 800; }
  .btn-menu { display: inline-flex; }
  .contenido { padding: 18px 16px 40px; }
  .barra { padding: 0 12px; }
  .btn { min-height: 40px; }
  .btn.peq { min-height: 34px; }
  .user-pill span.nombre { display: none; }
}
@media (max-width: 600px) {
  .g2, .g4 { grid-template-columns: 1fr; }
  .form > * { grid-column: span 12 !important; }
  .filtros input[type=search] { min-width: 0; width: 100%; flex-basis: 100%; }
  .tabla-wrap { margin: 0 -20px; }
  .totales { width: 100%; }
  .modal { padding: 18px; }
  .kpi .valor { font-size: 26px; }
  table.t-movil thead { display: none; }
  table.t-movil tr { display: block; border-bottom: 1px solid var(--br); padding: 8px 14px; }
  table.t-movil td { display: flex; justify-content: space-between; gap: 12px; border: 0 !important; padding: 4px 0; text-align: right; }
  table.t-movil td::before { content: attr(data-l); color: var(--tx3); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-align: left; }
}
@media print {
  .lateral, .barra, .acciones, .filtros { display: none !important; }
  .shell { display: block; }
}