/* ===== Viáticos mensuales — hoja unificada (mejorado) ===== */
:root{
  --font: system-ui,-apple-system,"Segoe UI",Roboto,Arial,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;
  --panel: #0f1114;
  --grid: rgba(255,255,255,.08);
  --text: #e9eef7;
  --text-strong:#f2f6ff;
  --muted:#97a7bd;

  --cat-bg:#1f2937;
  --cat-fg:#ffd54f;

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

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

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

/* ===== 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(--accent); color:#111;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.v-head .title{font-weight:900; letter-spacing:.2px}
.v-head .controls{margin-left:auto; display:flex; gap:8px}

/* Controles */
.input,.btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.25);
  border-radius:10px;
  padding:6px 10px;
  font:500 14px/1.2 var(--font);
}
.input{background:#fff; color:#111}
.btn{background:#111; color:#fff}
.btn:hover{background:#161616}
.btn.ghost{background:transparent; color:#111; border-color:rgba(0,0,0,.35)}
.btn.ghost:hover{background:rgba(0,0,0,.06)}

/* Focus accesible */
.input:focus-visible,
.btn:focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:2px;
}

/* ===== Contenedor tabla ===== */
.v-wrap{padding:12px 14px 14px}
.table{
  position:relative;
  overflow:auto;                 /* necesario para sticky */
  border:1px solid #0007;
  border-radius:10px;
  background:var(--panel);
  scrollbar-gutter: stable;      /* evita saltos al aparecer scrollbar */
}
/* Scrollbar sutil */
.table::-webkit-scrollbar{height:10px; width:10px}
.table::-webkit-scrollbar-thumb{background:#2a3340; border-radius:10px}
.table::-webkit-scrollbar-track{background:#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:#141922; position:relative;
}
.row:nth-child(odd){background:#151c26}

.row.head{
  position:sticky; top:0; z-index:10;
  background:var(--accent); color:#0d0d0d;
  font-weight:900;
  border-bottom:2px solid rgba(0,0,0,.35);
}

/* ===== 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)}

/* ===== 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(15,17,20,0.0), rgba(15,17,20,.18));
}

/* Fondos sólidos por tipo de fila */
.row.tech .label{background-color:#141922 !important; color:var(--text-strong)}
.row.tech:nth-child(odd) .label{background-color:#151c26 !important}
.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(--accent) !important; color:#000 !important; z-index:4}

/* Tipos de fila */
.row.cat{background:var(--cat-bg); color:var(--cat-fg); font-weight:900}
.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}
.chip{
  padding:4px 8px; border-radius:999px; font-weight:800; font-size:12px;
  border:1px solid rgba(255,255,255,.12); color:#e3e8f2; background:#111;
}
.chip.cat{color:#ffd24a}
.chip.tot{color:#aef2d0}

/* Header: meses negros sobre amarillo */
.row.head .mon,.row.head .total,.row.head .label{color:#000 !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:#e9eef7; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06)
}
.row .label .btn.mini.ghost:hover{background:rgba(255,255,255,.12)}

/* ===== Hover/active ===== */
.table .row .col{cursor:default; transition: background-color .12s ease, box-shadow .12s ease}
.table .row .col:not(.label):hover{
  background:rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.table .row:hover .col:not(.label){background:rgba(255,255,255,.03)}
.table .row.head:hover .col{background:var(--accent)}
/* 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 rgba(255,255,255,.06);
  }
}
/* 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:#0f1114; border-left:1px solid rgba(255,255,255,.08);
  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:#161a20; border-bottom:1px solid rgba(255,255,255,.08)}
.v-drawer__title{font-weight:900}
.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:#0f1114; border-top:1px solid rgba(255,255,255,.08)
}
.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 rgba(255,255,255,.08); border-radius:10px; background:#141922}
.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 input{
  width:100%; padding:6px 8px; padding-right:var(--stepper-pad-right);
  border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background:#0d1117; color:#e9eef7; text-align:right;
}
.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:#0f1114; color:#e9eef7; border:1px solid rgba(255,255,255,.08);
  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:#161a20; border-bottom:1px solid rgba(255,255,255,.08)}
.v-modal__title{font-weight:900}
.v-modal__body{padding:14px; display:grid; gap:12px}
.exp-meta{font-size:13px; color:#97a7bd}
.exp-table{border:1px solid rgba(255,255,255,.12); 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 rgba(255,255,255,.08); text-align:left}
.exp-table th{position:sticky; top:0; background:#151a22; 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 rgba(255,255,255,.12); font-size:12px; background:#111}

/* ===== 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}
}

/* 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:#0f1114; color:#e9eef7;
  border:1px solid rgba(255,255,255,.08);
  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:#161a20;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.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:#97a7bd}

/* Tabla */
.exp-table{
  border:1px solid rgba(255,255,255,.12);
  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 rgba(255,255,255,.08);
  text-align:left;
  vertical-align:top;
  word-wrap:anywhere;
}
.exp-table th{
  position:sticky; top:0; z-index:1;
  background:#151a22;
  font-weight:800;
}
.exp-table tbody tr:nth-child(odd){background:#121821}
.exp-table tbody tr:hover{background:#17202b}
.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 rgba(255,255,255,.08);
  background:rgba(15,17,20,.9);
  -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 rgba(255,255,255,.12);
  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}
}