@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap");
/* ===== Viáticos mensuales — hoja unificada (mejorado) ===== */
:root{
  --font: "Montserrat","Roboto",sans-serif;
  --fs-base: 14px;                /* base fluida */
  --fs: clamp(12px, .9vw + 10px, var(--fs-base));

  /* Grid base */
  --labelW: 235px;
  --cellW: 110px;
  --totalW: 130px;
  --cellH: 36px;

  /* Colores */
  --accent: #f5c323;
  --header-bg: var(--panel);
  --header-fg: var(--text-strong);
  --header-border: var(--grid);
  --panel: #0f1114;
  --grid: rgba(255,255,255,.08);
  --text: #e9eef7;
  --text-strong:#f2f6ff;
  --muted:#97a7bd;

  --cat-bg:#1c2532;
  --cat-fg:#cbd7e8;

  --tot-bg:#0f3b2b;
  --tot-fg:#ccffeb;

  /* Superficies */
  --body-bg:#0b0e13;
  --row-bg:#141922;
  --row-alt-bg:#151c26;
  --assigned-cell-bg: rgba(245,195,35,.18);
  --assigned-cell-border: rgba(245,195,35,.35);
  --neg-cell-bg: rgba(239,68,68,.18);
  --neg-cell-border: rgba(239,68,68,.35);
  --label-fade: rgba(15,17,20,.18);
  --hover-bg: rgba(255,255,255,.05);
  --hover-row-bg: rgba(255,255,255,.03);
  --hover-col-bg: rgba(255,255,255,.06);

  /* Steppers (tamaños por defecto) */
  --stepper-w: 22px;
  --stepper-h: 14px;
  --stepper-gap: 2px;
  --stepper-radius: 5px;
  --stepper-icon: 8px;
  --stepper-pad-right: 35px;

  --hc-bg: #0f1216;
  --hc-fg: #e9eef7;
  --hc-border: #273244;
  --hc-hover: #161c26;
  --hc-focus: rgba(96,165,250,.45);

  --control-bg: #0f1216;
  --control-fg: #e9eef7;
  --control-border: #273244;
  --control-hover: #161c26;
  --control-focus: rgba(96,165,250,.45);
  --control-ghost-border: rgba(255,255,255,.18);
  --control-ghost-hover: rgba(255,255,255,.08);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs);
  color:var(--text);
  background:var(--body-bg);
}

:root[data-theme="light"]{
  --accent:#f2b705;
  --header-bg:#ffffff;
  --header-fg:#0f172a;
  --header-border: #dfe6f0;
  --panel:#ffffff;
  --grid:#dfe6f0;
  --text:#1f2937;
  --text-strong:#0f172a;
  --muted:#6b778c;

  --cat-bg:#e9eff6;
  --cat-fg:#1e3a5f;
  --tot-bg:#e8f5ef;
  --tot-fg:#0f3b2b;

  --body-bg:#f5f7fb;
  --row-bg:#ffffff;
  --row-alt-bg:#f7f9fc;
  --assigned-cell-bg: #fff4cc;
  --assigned-cell-border: #f2c94c;
  --neg-cell-bg: #fee2e2;
  --neg-cell-border: #f87171;
  --label-fade: rgba(148,163,184,.22);
  --hover-bg: rgba(15,23,42,.05);
  --hover-row-bg: rgba(15,23,42,.03);
  --hover-col-bg: rgba(15,23,42,.06);

  --hc-bg: #f8fafc;
  --hc-fg: #1f2937;
  --hc-border: #d7dee8;
  --hc-hover: #eef2f7;
  --hc-focus: rgba(37,99,235,.35);

  --control-bg: #f8fafc;
  --control-fg: #1f2937;
  --control-border: #d7dee8;
  --control-hover: #eef2f7;
  --control-focus: rgba(37,99,235,.35);
  --control-ghost-border: rgba(15,23,42,.2);
  --control-ghost-hover: rgba(15,23,42,.06);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --scrollbar-thumb: #c4cfdf;
  --scrollbar-track: #eff2f7;
}

:root[data-theme="light"] body{
  background: radial-gradient(900px 600px at 10% -10%, rgba(242,183,5,.12), transparent 60%), #f4f6f9;
  color: #1f2937;
}

/* ===== Skeleton (viaticos) ===== */
:root {
  --via-sk-base: #1a2030;
  --via-sk-hi: #222a3b;
}
:root[data-theme="light"] {
  --via-sk-base: #e2e8f0;
  --via-sk-hi: #f1f5f9;
}

.via-skeleton{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--bg);
  display:block;
  opacity:1;
  visibility:visible;
  pointer-events:all;
  overflow:auto;
}
.via-skeleton-inner{
  width:100%;
  padding:0 0 24px;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:12px;
}
.via-sk-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 14px;
  background:var(--header-bg);
  color:var(--header-fg);
  box-shadow:0 1px 0 var(--header-border);
  position:sticky;
  top:0;
}
.via-sk-title,
.via-sk-btn,
.via-sk-field,
.via-sk-line,
.via-sk-chip,
.via-sk-cell{
  background:linear-gradient(90deg, var(--via-sk-base) 25%, var(--via-sk-hi) 37%, var(--via-sk-base) 63%);
  background-size:400% 100%;
  animation: skel 1.2s ease-in-out infinite;
  border-radius:10px;
}
.via-sk-title{width:180px;height:18px}
.via-sk-controls{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}
.via-sk-btn{height:34px;width:110px}
.via-sk-btn.xs{width:36px}
.via-sk-btn.lg{width:150px}
.via-sk-field{height:34px;width:140px}
.via-sk-field.md{width:160px}
.via-sk-spacer{flex:1 1 auto}

.via-sk-body{
  padding:12px 14px 14px;
  display:grid;
  gap:12px;
}
.via-sk-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap:12px;
}
.via-sk-kpi{
  background:var(--panel);
  border:1px solid var(--grid);
  border-radius:10px;
  padding:12px;
  display:grid;
  gap:8px;
}
.via-sk-line.sm{height:12px;width:120px}
.via-sk-line.md{height:22px;width:160px}

.via-sk-legend{
  display:flex;
  gap:8px;
  padding:0 2px;
}
.via-sk-chip{height:24px;width:110px;border-radius:999px}

.via-sk-table{
  background:var(--panel);
  border:1px solid var(--grid);
  border-radius:10px;
  padding:12px;
  display:grid;
  gap:10px;
}
.via-sk-row{
  display:grid;
  grid-template-columns: var(--labelW) repeat(12,var(--cellW)) var(--totalW);
  gap:10px;
  align-items:center;
  min-height:var(--cellH);
  border-bottom:1px solid var(--grid);
}
.via-sk-row.head{
  border-bottom:2px solid var(--grid);
}
.via-sk-row.head .via-sk-cell{height:14px}
.via-sk-cell{height:calc(var(--cellH) - 16px);width:100%}
.via-sk-cell.wide{width:100%}

@keyframes skel{
  0%{background-position:100% 0}
  100%{background-position:0 0}
}

html[data-via-ready="1"] .via-skeleton{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
html:not([data-via-ready="1"]) .v-wrap,
html:not([data-via-ready="1"]) .v-head{
  opacity:0;
  pointer-events:none;
}
html[data-via-ready="1"] .v-wrap,
html[data-via-ready="1"] .v-head{
  opacity:1;
  transition:opacity .2s ease;
}

:root[data-theme="light"] .v-head{
  background: #ffffff;
  border-bottom: 1px solid #d7dee8;
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}
:root[data-theme="light"] .v-head .title{ color:#111827; }

:root[data-theme="light"] .hdr-controls button,
:root[data-theme="light"] .hdr-controls select,
:root[data-theme="light"] .hdr-controls .btn{
  background:#ffffff;
  border-color:#d7dee8;
  color:#1f2937;
}
:root[data-theme="light"] .hdr-controls button:hover,
:root[data-theme="light"] .hdr-controls select:hover,
:root[data-theme="light"] .hdr-controls .btn:hover{
  background:#f1f5f9;
}

:root[data-theme="light"] .table{
  background:#ffffff;
  border-color:#d7dee8;
  box-shadow: 0 16px 28px rgba(15,23,42,.08);
}
:root[data-theme="light"] .row.head .label,
:root[data-theme="light"] .row.head .mon,
:root[data-theme="light"] .row.head .total{
  background:#f8fafc !important;
  color:#111827 !important;
}
:root[data-theme="light"] .row.tech .label{ color:#0f172a; }

:root[data-theme="light"] .v-drawer__panel{
  background:#ffffff;
  border-left:1px solid #d7dee8;
  box-shadow: 0 20px 40px rgba(15,23,42,.12);
}
:root[data-theme="light"] .v-drawer__header{
  background:#f8fafc;
  border-bottom:1px solid #e5e7eb;
  color:#111827;
}
:root[data-theme="light"] .v-drawer__footer{
  border-top:1px solid #e5e7eb;
  background:#ffffff;
}

/* Drawer + modal refinements (corporate) */
.v-drawer__panel{
  border-radius:0;
}
.v-drawer__head{
  padding:12px 16px;
  font-weight:800;
}
.v-drawer__body{gap:16px}
.v-drawer__foot{
  padding:12px 16px;
}
.v-drawer__foot .btn{border-radius:999px}

.v-modal{
  backdrop-filter: blur(2px);
}
.v-modal__dialog{
  border-radius:16px;
}
.v-modal__head{
  padding:12px 16px;
}
.v-modal__head .btn,
.v-modal__head .btn.ghost{
  border-radius:999px;
}
.v-modal__body{
  background: var(--panel);
}

:root[data-theme="light"] .v-modal__dialog{
  background:#ffffff;
  border-color:#d7dee8;
  box-shadow: 0 24px 48px rgba(15,23,42,.16);
}
:root[data-theme="light"] .v-modal__head{
  background:#f8fafc;
  border-bottom:1px solid #e5e7eb;
  color:#111827;
}
:root[data-theme="light"] .v-modal__body{
  background:#ffffff;
}
:root[data-theme="light"] .exp-table{
  border-color:#d7dee8;
  background:#ffffff;
}
:root[data-theme="light"] .exp-table th{
  background:#f8fafc;
  color:#111827;
}
:root[data-theme="light"] .exp-table td{
  border-bottom-color:#e5e7eb;
}
:root[data-theme="light"] .exp-total{
  background:#ffffff;
  border-top:1px solid #e5e7eb;
}
:root[data-theme="light"] .exp-total .badge{
  background:#f8fafc;
  border-color:#d7dee8;
  color:#1f2937;
}


/* ===== Header ===== */
.v-head{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  min-height:56px; padding:8px 14px;
  background:var(--header-bg); color:var(--header-fg);
  box-shadow:0 1px 0 var(--header-border);
}
.v-head .title{font-weight:900; letter-spacing:.2px}
.v-head .controls{margin-left:auto; display:flex; gap:8px}
.v-head .page-title{display:none}
.v-head .spacer{flex:1}
.v-head .btn{min-width:36px}
.hdr-controls button,
.hdr-controls select,
.hdr-controls .btn{
  height:36px;
  padding:6px 12px;
  border-radius:10px;
  background:var(--hc-bg);
  color:var(--hc-fg);
  border:1px solid var(--hc-border);
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.hdr-controls button:hover,
.hdr-controls select:hover,
.hdr-controls .btn:hover{ background:var(--hc-hover); }
.hdr-controls button:focus-visible,
.hdr-controls select:focus-visible,
.hdr-controls .btn:focus-visible{
  outline:2px solid var(--hc-focus);
  outline-offset:2px;
}
.hdr-controls select{
  appearance:none;
  padding-right:32px;
  background-image: var(--select-arrow);
  background-repeat:no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

/* Controles */
.input,.btn{
  appearance:none;
  border:1px solid var(--control-border);
  border-radius:10px;
  padding:6px 10px;
  font:500 14px/1.2 var(--font);
}
.input{background:var(--control-bg); color:var(--control-fg)}
.btn{background:var(--control-bg); color:var(--control-fg)}
.btn:hover{background:var(--control-hover)}
.btn.ghost{background:transparent; color:var(--control-fg); border-color:var(--control-ghost-border)}
.btn.ghost:hover{background:var(--control-ghost-hover)}
.icon-plain svg{width:18px;height:18px;display:block;fill:currentColor}

/* Focus accesible */
.input:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--control-focus);
  outline-offset:2px;
}

/* ===== Contenedor tabla ===== */
.v-wrap{padding:12px 14px 14px}

/* Responsive header + tighter controls */
@media (max-width: 720px){
  .v-head{flex-wrap:wrap; gap:8px}
  .v-head .controls{width:100%; justify-content:flex-start; flex-wrap:wrap}
  .v-head .controls .spacer{display:none}
  .hdr-controls button,.hdr-controls select,.hdr-controls .btn{height:34px; padding:6px 10px}
  .input,.btn{font-size:13px}
}
.table{
  position:relative;
  overflow:auto;                 /* scroll interno */
  border:1px solid var(--grid);
  border-radius:10px;
  background:var(--panel);
  scrollbar-gutter: stable;      /* evita saltos al aparecer scrollbar */
  cursor: grab;
  max-height: calc(100vh - 150px);
}
.table.is-loading{
  display:grid;
  place-items:center;
  min-height:180px;
  cursor:progress;
}
.table.is-loading .loading{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:.2px;
}
.table.is-loading .loading::before{
  content:"";
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid var(--grid);
  border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin{
  to{transform:rotate(360deg)}
}
.table.dragging{ cursor: grabbing; user-select: none; }
/* Scrollbar sutil */
.table::-webkit-scrollbar{height:10px; width:10px}
.table::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, #2a3340); border-radius:10px}
.table::-webkit-scrollbar-track{background:var(--scrollbar-track, #0f141b)}

/* Grid */
.grid{width:max-content; min-width:100%}

/* ===== Filas / cabecera ===== */
.row,.row.head{
  display:grid;
  grid-template-columns: var(--labelW) repeat(12,var(--cellW)) var(--totalW);
  min-height:var(--cellH); align-items:stretch;
}
.row{
  border-bottom:1px solid var(--grid);
  background:var(--row-bg); position:relative;
}
.row:nth-child(odd){background:var(--row-alt-bg)}
.row:hover{background:color-mix(in srgb, var(--row-bg) 80%, var(--hover-row-bg));}

.row.head{
  position:sticky; top:0; z-index:10;
  background:var(--header-bg); color:var(--header-fg);
  font-weight:900;
  border-bottom:2px solid var(--header-border);
}

/* ===== Columnas ===== */
.row .col{padding:6px 8px; color:var(--text)}
.row .mon,.row .total{
  display:flex; align-items:center; justify-content:flex-end;
  padding:6px 8px; font-variant-numeric:tabular-nums; font-weight:800;
  border-right:1px solid var(--grid);
}
.row .mon:last-child,.row .total:last-child{border-right:0}
.row .mon:empty::after{content:'—'; color:var(--muted)}
.row.cat .mon:empty::after,
.row.cat .total:empty::after{content:'';}

/* ===== Primera columna sticky con sombra y anti-traspaso ===== */
.row .label{
  position:sticky; left:0; z-index:3; isolation:isolate;
  box-shadow: 6px 0 8px -6px rgba(0,0,0,.2);  /* sombra hacia la derecha */
}
.row .label::after{
  content:""; position:absolute; top:0; right:-1px; bottom:0; width:14px;
  pointer-events:none;
  background: linear-gradient(to right, rgba(0,0,0,0), var(--label-fade));
}

/* Fondos sólidos por tipo de fila */
.row.tech .label{background-color:var(--row-bg) !important; color:var(--text-strong)}
.row.tech:nth-child(odd) .label{background-color:var(--row-alt-bg) !important}
.row.tech .col.mon.has-budget{
  background-color: var(--assigned-cell-bg);
  box-shadow: inset 0 0 0 1px var(--assigned-cell-border);
}
.row.tech .col.mon.neg{
  background-color: var(--neg-cell-bg);
  box-shadow: inset 0 0 0 1px var(--neg-cell-border);
  color: #b91c1c;
}
:root[data-theme="light"] .row.tech .col.mon.neg{
  color: #991b1b;
}
.row.cat .label{background-color:var(--cat-bg) !important; color:var(--cat-fg)}
.row.tot .label{background-color:var(--tot-bg) !important; color:var(--tot-fg)}
.row.head .label{background-color:var(--header-bg) !important; color:var(--header-fg) !important; z-index:4}

/* Tipos de fila */
.row.cat{background:var(--cat-bg); color:var(--cat-fg); font-weight:900}
.row.cat:hover{
  background: color-mix(in srgb, var(--cat-bg) 85%, var(--hover-row-bg));
}
.row.cat:hover .label{
  background-color: color-mix(in srgb, var(--cat-bg) 85%, var(--hover-row-bg)) !important;
}
.row.tot{
  background:var(--tot-bg); color:var(--tot-fg); font-weight:900;
  border-top:2px solid #0007; border-bottom:2px solid #0007;
}

/* ===== Leyenda ===== */
.legend{display:flex; gap:8px; margin:8px 0 10px}
.kpi-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin: 8px 0 12px;
}
.kpi{
  border:1px solid var(--grid);
  border-radius:10px;
  padding:10px 12px;
  background:var(--panel);
}
.kpi-label{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}
.kpi-value{
  font-size:18px;
  font-weight:900;
  margin-top:4px;
}
:root[data-theme="light"] .kpi{
  background:#ffffff;
  border-color:#d7dee8;
  box-shadow: 0 10px 20px rgba(15,23,42,.08);
}
.chip{
  padding:4px 8px; border-radius:999px; font-weight:800; font-size:12px;
  border:1px solid var(--control-border); color:var(--text-strong); background:var(--control-bg);
}
.chip.cat{color:#ffd24a}
.chip.tot{color:#aef2d0}

:root[data-theme="light"] .chip{
  background: #ffffff;
  border-color: #d7dee8;
  color: #1f2937;
  box-shadow: 0 6px 14px rgba(15,23,42,.08);
}
:root[data-theme="light"] .chip.cat{
  color:#1f3a5a;
}
:root[data-theme="light"] .chip.tot{
  color:#0f766e;
}

/* Header: meses negros sobre amarillo */
.row.head .mon,.row.head .total,.row.head .label{color:var(--header-fg) !important; font-weight:900}

/* Botón mini en primera columna */
.btn.mini{padding:2px 8px; font-size:12px; border-radius:8px; margin-left:6px}
.row .label .btn.mini.ghost{
  color:var(--control-fg); border-color:var(--control-ghost-border); background:var(--control-ghost-hover)
}
.row .label .btn.mini.ghost:hover{background:var(--control-hover)}

/* ===== Hover/active ===== */
.table .row .col{cursor:default; transition: background-color .12s ease, box-shadow .12s ease}
.table .row .col:not(.label):hover{
  background:var(--hover-bg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.table .row:hover .col:not(.label){background:var(--hover-row-bg)}
.table .row.head:hover .col{background:var(--header-bg)}
/* Resaltado de columna bajo .hover-col-X */
@media (pointer:fine){
  .table.hover-col-2 .row>.col:nth-child(2),
  .table.hover-col-3 .row>.col:nth-child(3),
  .table.hover-col-4 .row>.col:nth-child(4),
  .table.hover-col-5 .row>.col:nth-child(5),
  .table.hover-col-6 .row>.col:nth-child(6),
  .table.hover-col-7 .row>.col:nth-child(7),
  .table.hover-col-8 .row>.col:nth-child(8),
  .table.hover-col-9 .row>.col:nth-child(9),
  .table.hover-col-10 .row>.col:nth-child(10),
  .table.hover-col-11 .row>.col:nth-child(11),
  .table.hover-col-12 .row>.col:nth-child(12),
  .table.hover-col-13 .row>.col:nth-child(13),
  .table.hover-col-14 .row>.col:nth-child(14){
    box-shadow: inset 0 0 0 9999px var(--hover-col-bg);
  }
}
/* Celdas clicables: meses/total en filas técnicas */
.table .row.tech > .col:not(.label){cursor:pointer}

/* ===== Drawer ===== */
.v-drawer{position:fixed; inset:0; display:none; z-index:9999; align-items:stretch; justify-content:flex-end}
.v-drawer[aria-hidden="false"]{display:flex}
.v-drawer__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:1}
.v-drawer__panel{
  position:relative; z-index:2; height:100%; width:min(520px,92vw);
  background:var(--panel); border-left:1px solid var(--grid);
  box-shadow:-12px 0 24px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:auto
}
.v-drawer__head{display:flex; align-items:center; gap:8px; justify-content:space-between; padding:10px 14px; background:var(--header-bg); color:var(--header-fg); border-bottom:1px solid var(--header-border)}
.v-drawer__title{font-weight:900}
.v-drawer__status{
  margin-left:auto;
  font-size:12px;
  font-weight:800;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--grid);
  background:var(--row-bg);
  color:var(--muted);
}
.v-drawer__body{padding:14px; display:grid; gap:14px}
.v-drawer__foot{
  position:sticky; bottom:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; background:var(--panel); border-top:1px solid var(--grid)
}
.v-drawer__foot .left,.v-drawer__foot .right{display:flex; gap:8px}
.field label{display:block; font-weight:700; margin-bottom:6px}
.field .hint{font-size:12px; color:#97a7bd; margin-top:4px}
.pill{padding:6px 10px; border:1px solid var(--grid); border-radius:10px; background:var(--row-bg)}
.grid2{display:grid; grid-template-columns:1fr 1fr}
.gap8{gap:8px}
.bd-item{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8px; position:relative}
.bd-item label{opacity:.9}
.bd-item{grid-template-columns: 1fr auto; gap:8px}
.bd-label{display:flex; align-items:center; font-weight:700; color:var(--text-strong)}
.money-field{display:flex; align-items:center; gap:6px; min-width:140px}
.money-prefix{color:var(--muted); font-weight:800}
.bd-item input{
  width:80px; padding:6px 8px;
  border-radius:10px; border:1px solid var(--control-border);
  background:var(--control-bg); color:var(--control-fg); text-align:right;
}
.bd-item input::placeholder{color:#9aa3af}
.bd-error{grid-column:2 / -1; font-size:12px; color:#ef4444; min-height:14px}
.bd-item input[aria-invalid="true"]{border-color:#ef4444; outline:2px solid #ef4444}
.row-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:8px}
body.is-drawer-open{overflow:hidden}

/* Stepper (compacto por defecto) */
.stepper{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  display:grid; gap:var(--stepper-gap);
}
.stepper button{
  width:var(--stepper-w); height:var(--stepper-h);
  border-radius:var(--stepper-radius);
  border:1px solid rgba(255,255,255,.14);
  background:#0f1218; display:grid; place-items:center; cursor:pointer;
}
.stepper button:hover{background:#151a22}
.stepper button:active{transform:translateY(0) scale(.98)}
.stepper button::before{
  content:""; width:var(--stepper-icon); height:var(--stepper-icon); background:#e9eef7;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path d="M5 0l5 6H0z"/></svg>') no-repeat center/contain;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path d="M5 0l5 6H0z"/></svg>') no-repeat center/contain;
}
.stepper .down::before{transform:rotate(180deg)}
/* versión aún más chica: añade .compact al contenedor */
.compact{
  --stepper-w: 18px; --stepper-h: 12px; --stepper-icon: 7px; --stepper-pad-right: 26px;
}
/* Oculta spinners nativos */
.bd-item input[type="number"]{-moz-appearance:textfield}
.bd-item input[type="number"]::-webkit-outer-spin-button,
.bd-item input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* ===== Modal (desglose) ===== */
.v-modal{position:fixed; inset:0; display:none; z-index:10000; background:rgba(0,0,0,.45); align-items:center; justify-content:center}
.v-modal[aria-hidden="false"]{display:flex}
.v-modal__dialog{
  width:min(980px,96vw); max-height:90vh; overflow:auto;
  background:var(--panel); color:var(--text); border:1px solid var(--grid);
  border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.45)
}
.v-modal__head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; background:var(--header-bg); color:var(--header-fg); border-bottom:1px solid var(--header-border)}
.v-modal__title{font-weight:900}
.v-modal__body{padding:14px; display:grid; gap:12px}
.exp-meta{font-size:13px; color:var(--muted)}
.exp-table{border:1px solid var(--grid); border-radius:10px; overflow:auto}
.exp-table table{width:100%; border-collapse:collapse; font-size:13px}
.exp-table th,.exp-table td{padding:8px 10px; border-bottom:1px solid var(--grid); text-align:left}
.exp-table th{position:sticky; top:0; background:var(--row-bg); font-weight:800}
.exp-table td.num{text-align:right; font-variant-numeric:tabular-nums}
.exp-total{display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-end; font-weight:800}
.badge{display:inline-block; padding:3px 8px; border-radius:999px; border:1px solid var(--grid); font-size:12px; background:var(--control-bg)}

/* ===== Responsivo ===== */
@media (max-width: 1200px){
  :root{ --labelW: 200px; --cellW: 96px; --totalW: 112px; }
}
@media (max-width: 980px){
  :root{ --labelW: 180px; --cellW: 88px; --totalW: 104px; }
  .v-head{min-height:52px}
  .v-head .controls{gap:6px}
  .btn,.input{padding:5px 8px}
}
@media (max-width: 680px){
  :root{ --labelW: 160px; --cellW: 80px; --totalW: 96px; }
  .legend{flex-wrap:wrap}
  .v-head{padding:8px 10px}
}
@media (max-width: 560px){
  :root{ --labelW: 140px; --cellW: 72px; --totalW: 88px; }
  .v-head{
    flex-wrap: wrap;
    gap: 8px;
  }
  .v-head .page-title{ width: 100%; }
  .v-head .controls{
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }
  .v-head .controls .btn,
  .v-head .controls select{
    flex: 1 1 auto;
  }
  .kpi-row{
    grid-template-columns: 1fr;
  }
  .table{
    max-height: calc(100vh - 220px);
  }
}

/* Prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}
/* ===== Modal (desglose) — mejorado ===== */
.v-modal{
  position:fixed; inset:0; display:none; z-index:10000;
  background:rgba(0,0,0,.45);
  align-items:center; justify-content:center;
}
.v-modal[aria-hidden="false"]{display:flex}

.v-modal__dialog{
  width:min(980px,96vw);
  max-height:90vh; overflow:auto;
  background:var(--panel); color:var(--text);
  border:1px solid var(--grid);
  border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}

/* Head fijo y botón cerrar amplio */
.v-modal__head{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px;
  background:var(--header-bg);
  color:var(--header-fg);
  border-bottom:1px solid var(--header-border);
}
.v-modal__title{font-weight:900}
.v-modal__head .btn,
.v-modal__head .btn.ghost{
  padding:6px 10px; border-radius:10px;
}

/* Cuerpo */
.v-modal__body{padding:14px; display:grid; gap:12px}
.exp-meta{font-size:13px; color:var(--muted)}

/* Tabla */
.exp-table{
  border:1px solid var(--grid);
  border-radius:10px; overflow:auto;
}
.exp-table table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;           /* columnas estables */
  font-size:13px;
  min-width:720px;              /* evita romperse en contenedores angostos */
}
.exp-table th, .exp-table td{
  padding:8px 10px;
  border-bottom:1px solid var(--grid);
  text-align:left;
  vertical-align:top;
  word-wrap:anywhere;
}
.exp-table th{
  position:sticky; top:0; z-index:1;
  background:var(--row-bg);
  font-weight:800;
}
.exp-table tbody tr:nth-child(odd){background:var(--row-alt-bg)}
.exp-table tbody tr:hover{background:color-mix(in srgb, var(--row-bg) 80%, var(--hover-row-bg))}
.exp-table td.num{
  text-align:right; font-variant-numeric:tabular-nums;
}

/* Anchos sugeridos por columna */
.exp-table th:nth-child(1), .exp-table td:nth-child(1){width:110px}
.exp-table th:nth-child(2), .exp-table td:nth-child(2){width:260px}
.exp-table th:nth-child(3), .exp-table td:nth-child(3){width:120px}
.exp-table th:nth-child(4), .exp-table td:nth-child(4){width:120px}
.exp-table th:nth-child(5), .exp-table td:nth-child(5){width:110px}

/* Totales sticky abajo del contenido del modal */
.exp-total{
  position:sticky; bottom:-1px; z-index:2;
  display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end;
  font-weight:800;
  padding:10px 12px;
  border-top:1px solid var(--grid);
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
  backdrop-filter:saturate(120%) blur(6px);
  border-radius:10px;
}
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--grid);
  font-size:12px;
  background:#111;
}

/* Modo “card” en pantallas chicas: requiere data-th en celdas (ver JS) */
@media (max-width: 560px){
  .exp-table table{min-width:0; table-layout:auto}
  .exp-table thead{display:none}
  .exp-table tbody tr{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:6px 10px;
    padding:10px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .exp-table td{
    display:flex; align-items:flex-start; gap:8px;
    border:0; padding:0;
  }
  .exp-table td::before{
    content:attr(data-th);
    min-width:90px; opacity:.7; font-weight:700;
  }
  .exp-table td.num{justify-content:space-between}
}

/* Impresión del modal */
@media print{
  .v-modal{position:static; background:none}
  .v-modal__dialog{width:100%; max-height:none; box-shadow:none; border:0}
  .v-modal__head{position:static}
  .exp-total{position:static; background:none; -webkit-backdrop-filter:none; backdrop-filter:none}
}