/* =====================================================================
   PRESUPUESTO BASE CERO — SISTEMA DE DISEÑO "CONSOLA"
   ---------------------------------------------------------------------
   Superficie casi negra, hairlines de 1px, tipografía condensada en
   versales y densidad alta para sesiones largas.

   El archivo tiene seis capas y el orden importa:
     1. TOKENS          variables; lo único que se toca para retematizar
     2. BASE            reset y tipografía
     3. CROMO           barra de menú, pestañas de módulo, barra de estado
     4. COMPONENTES     panel, tabla, lista, botón, campo, etiqueta, barra
     5. COMPATIBILIDAD  las utilidades que ya usa el marcado, redefinidas
                        en este lenguaje (sustituye al CDN de Tailwind)
     6. APP             piezas propias: fila de presupuesto, hoja de plan

   Documentado en /style-guide.html, que carga este mismo archivo: si algo
   cambia aquí, la guía lo refleja sin copiar nada.
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root{
  /* --- superficies --------------------------------------------------- */
  --bg:#07090c;
  --panel:#0b0f13;
  --panel-2:#0d1217;
  --panel-3:#101820;
  --field:#05080a;
  --hair:#18212a;
  --hair-lit:#22303b;

  /* --- tinta (contraste medido sobre --panel) ------------------------ */
  --ink-hi:#e8f1f6;    /* 16.7:1 — cifras y énfasis */
  --ink:#aebac5;       /*  9.7:1 — texto corriente */
  --ink-dim:#6b7884;   /*  4.2:1 — etiquetas y secundario */
  --ink-faint:#39434d; /*  2.2:1 — SOLO reglas y conectores, nunca texto */

  /* --- acento: también es la rampa secuencial ------------------------ */
  --cy:#4fc3e8;        /*  9.4:1 */
  --cy-mid:#2f9dc4;    /*  6.1:1 */
  --cy-bar:#1d5f7a;    /* fondo de cabecera y fila seleccionada */
  --cy-deep:#123d4f;
  --plan-group:#17212c;   /* banda de subtotal de grupo en la hoja de plan */

  /* --- estado: reservados, nunca como "serie 4" ---------------------- */
  --red:#e0555f;       /*  5.1:1 */
  --red-ink:#f0a8af;
  --red-bg:#47141d;
  --amber:#d99a3c;     /*  7.9:1 */
  --amber-bg:#3d2c10;
  --green:#4fb980;     /*  7.8:1 */
  --green-bg:#11301f;

  /* --- rampa secuencial de un solo tono, monótona en luminancia ------ */
  --s0:#0e1a20; --s1:#12303c; --s2:#16485b; --s3:#1b6580;
  --s4:#2288ab; --s5:#35aad2; --s6:#66d2ef;

  /* --- tipografía -----------------------------------------------------
     Toda la escala cuelga de --ui-scale, así que el tamaño de la interfaz
     se ajusta cambiando UNA variable. El control vive en la barra de
     herramientas y se guarda en el navegador; ver la guía de estilo.
     Pasos: 0.9 compacto · 1 normal · 1.12 cómodo · 1.25 grande. */
  --ui-scale:1;
  --font:"Barlow Semi Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --font-cond:"Barlow Condensed","Roboto Condensed","Arial Narrow",sans-serif;
  --fs-nano:calc(9px   * var(--ui-scale));
  --fs-micro:calc(10px * var(--ui-scale));
  --fs-xs:calc(10.5px  * var(--ui-scale));
  --fs-chrome:calc(11px * var(--ui-scale));
  --fs-sm:calc(12px    * var(--ui-scale));
  --fs-md:calc(13px    * var(--ui-scale));
  --fs-lg:calc(15px    * var(--ui-scale));
  --fs-xl:calc(17px    * var(--ui-scale));
  --fs-2xl:calc(20px   * var(--ui-scale));
  --fs-3xl:calc(24px   * var(--ui-scale));
  --fs-4xl:calc(29px   * var(--ui-scale));
  --ls-label:.14em;  --ls-data:.04em;

  /* --- geometría: sin radios, sin sombras ---------------------------- */
  --row-h:calc(26px * var(--ui-scale));
  --ctl-h:calc(28px * var(--ui-scale));

  /* --- ritmo vertical y columnas de la fila de lista ------------------
     Una sola definicion para Presupuesto, Cuentas, Movimientos, Pagos y
     Planeacion. Cada pestana tenia su propio relleno y su propio ancho de
     columna, y por eso las cifras de una no cuadraban con las de la otra.
     El icono y el kebab van en ranura de ancho FIJO: si el icono se pega
     al numero, su posicion pasa a depender de cuanto mide la cifra y la
     columna de iconos queda dentada. */
  --row-pad:calc(6px * var(--ui-scale));
  --col-icon:calc(24px * var(--ui-scale));
  --col-amount:calc(122px * var(--ui-scale));
  --col-kebab:calc(30px * var(--ui-scale));
  --touch:44px;   /* alto mínimo táctil en móvil */
  --gutter:8px;

  /* alto del cromo, para calcular alturas sin JS */
  --chrome-top:87px;
  --chrome-bottom:24px;
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;border-radius:0}
/* pan-x pan-y = se permite arrastrar, se bloquean el pellizco y el doble-tap
   para hacer zoom. Antes era `manipulation`, que solo quitaba el doble-tap: se
   conservaba el pellizco por accesibilidad. Esa razon ya no aplica porque la
   app trae su propio ajuste de tamano en el menu Ver, que ademas escala la
   interfaz entera y no solo el texto recortado por el borde de la pantalla.
   Aviso: Safari en iOS IGNORA user-scalable=no a proposito, asi que ahi el
   pellizco seguira funcionando y no hay forma soportada de evitarlo. */
html{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%}

/* Sin esto, arrastrar en una zona que ya no tiene mas recorrido arrastra la
   pagina entera y rebota. En una app de paneles ese rebote se siente roto. */
html,body{overscroll-behavior:none}
html,body{height:100%;margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-md);
  line-height:1.35;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:500;font-family:var(--font-cond);letter-spacing:.06em}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--cy);text-decoration:none}
::placeholder{color:var(--ink-faint)}
:focus-visible{outline:1px solid var(--cy);outline-offset:1px}

/* la cifra siempre en versalita tabular para que las columnas no bailen */
.num,.hud-money{font-variant-numeric:tabular-nums;letter-spacing:var(--ls-data)}

/* barras de scroll finas */
*::-webkit-scrollbar{width:7px;height:7px}
*::-webkit-scrollbar-track{background:#090c0f}
*::-webkit-scrollbar-thumb{background:var(--hair-lit)}
*::-webkit-scrollbar-thumb:hover{background:#31424f}

/* =====================================================================
   3. CROMO
   ===================================================================== */
.hud-menubar{
  display:flex;align-items:center;height:26px;padding:0 10px;gap:22px;flex:none;
  border-bottom:1px solid var(--hair);background:var(--panel);
  font-family:var(--font-cond);
}
.hud-menubar__item{
  font-size:var(--fs-chrome);letter-spacing:var(--ls-label);color:var(--ink-dim);
  text-transform:uppercase;padding:0;white-space:nowrap;
}
.hud-menubar__item:hover,.hud-menubar__item[aria-expanded="true"]{color:var(--cy)}
.hud-menubar__right{margin-left:auto;display:flex;gap:14px;align-items:center;color:var(--ink-dim);font-size:var(--fs-chrome)}

.hud-toolbar{
  display:flex;align-items:center;height:34px;padding:0 10px;gap:6px;flex:none;
  border-bottom:1px solid var(--hair);background:var(--panel);
}
.hud-iconbtn{
  width:26px;height:24px;display:grid;place-items:center;
  border:1px solid transparent;color:var(--ink-dim);
}
.hud-iconbtn:hover{border-color:var(--hair-lit);color:var(--cy);background:var(--panel-3)}
.hud-iconbtn[aria-pressed="true"]{border-color:var(--cy-mid);color:var(--cy)}
.hud-iconbtn:disabled,.hud-iconbtn[disabled]{color:var(--ink-faint);cursor:not-allowed}
.hud-iconbtn:disabled:hover{border-color:transparent;background:none;color:var(--ink-faint)}
.hud-toolbar__sep{width:1px;height:16px;background:var(--hair-lit);margin:0 6px;flex:none}
.hud-pill{
  display:flex;align-items:center;gap:10px;height:24px;padding:0 9px;
  border:1px solid var(--hair-lit);background:var(--panel-2);color:var(--ink-dim);
  font-family:var(--font-cond);font-size:var(--fs-chrome);letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
}
.hud-pill b{color:var(--ink);font-weight:400}
.hud-pill:hover,.hud-pill[aria-expanded="true"]{color:var(--cy);border-color:var(--cy-mid)}
.hud-pill--on{color:var(--cy);border-color:var(--cy-mid)}

.hud-tabs{
  display:flex;align-items:center;height:27px;padding:0 6px;flex:none;
  overflow-x:auto;overflow-y:hidden;
  border-bottom:1px solid var(--hair);background:var(--panel);
  font-family:var(--font-cond);scrollbar-width:none;
}
.hud-tabs::-webkit-scrollbar{display:none}
.hud-tab{
  position:relative;display:flex;align-items:center;gap:6px;height:27px;padding:0 11px;
  font-size:var(--fs-chrome);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-dim);
  white-space:nowrap;
}
.hud-tab::after{content:"";width:3px;height:3px;background:var(--ink-faint);flex:none}
.hud-tab:hover{color:var(--ink)}
.hud-tab[aria-current="page"],.hud-tab.tab-btn-active{color:var(--cy);box-shadow:inset 0 -1px 0 var(--cy)}
.hud-tab[aria-current="page"]::after,.hud-tab.tab-btn-active::after{background:var(--cy)}
.hud-tab__key{color:var(--red);font-size:var(--fs-micro)}

.hud-status{
  display:flex;align-items:center;height:var(--chrome-bottom);padding:0 10px;flex:none;
  border-top:1px solid var(--hair);background:var(--panel);
  font-family:var(--font-cond);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);overflow:hidden;
}
.hud-status__key{display:flex;align-items:center;gap:6px;padding-right:13px;white-space:nowrap}
.hud-status__key b{color:var(--cy);font-weight:500}
.hud-status__right{margin-left:auto;display:flex;gap:16px;align-items:center;white-space:nowrap}
.hud-dot{width:5px;height:5px;display:inline-block;background:var(--green);margin-right:6px;vertical-align:1px}
.hud-dot--warn{background:var(--amber)}
.hud-dot--err{background:var(--red)}

/* =====================================================================
   4. COMPONENTES
   ===================================================================== */
/* ---- panel ---- */
.hud-panel{border:1px solid var(--hair);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.hud-panel--flex{flex:1}
.hud-panel__head{
  display:flex;align-items:center;gap:8px;height:27px;padding:0 9px;flex:none;
  border-bottom:1px solid var(--hair);background:var(--panel-2);
}
.hud-panel__head .hud-sq{width:5px;height:5px;background:var(--cy);flex:none}
.hud-panel__title{
  font-family:var(--font-cond);font-size:var(--fs-chrome);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.hud-panel__sub{
  font-family:var(--font-cond);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.hud-panel__tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.hud-panel__body{padding:9px;min-height:0;overflow:auto;overscroll-behavior:contain}
.hud-panel__body--flush{padding:0}

/* ---- tabla densa ---- */
.hud-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.hud-table th{
  font-family:var(--font-cond);font-weight:500;font-size:var(--fs-micro);
  letter-spacing:.11em;text-transform:uppercase;color:var(--cy);text-align:left;
  padding:5px 7px;background:var(--panel-3);border-bottom:1px solid var(--hair);
  white-space:nowrap;position:sticky;top:0;z-index:1;
}
.hud-table td{
  padding:4px 7px;height:var(--row-h);color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;letter-spacing:var(--ls-data);
}
.hud-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.012)}
.hud-table tbody tr:hover td{background:var(--panel-3)}
.hud-table .is-num,.hud-table .text-right{text-align:right}
.hud-table .is-dim{color:var(--ink-dim)}
.hud-table tr.is-alert td{background:var(--red-bg);color:var(--red-ink)}
.hud-table tr.is-selected td{background:var(--cy-bar);color:var(--ink-hi)}
.hud-table tr.is-past td{color:var(--ink-dim)}

/* ---- botones ---- */
.hud-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:var(--ctl-h);padding:0 14px;
  border:1px solid var(--hair-lit);background:var(--panel-2);color:var(--ink);
  font-family:var(--font-cond);font-size:var(--fs-chrome);letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;
}
.hud-btn:hover{border-color:var(--cy-mid);color:var(--cy);background:var(--panel-3)}
.hud-btn--primary{border-color:var(--cy-mid);background:var(--cy-bar);color:var(--ink-hi)}
.hud-btn--primary:hover{background:#25738f;color:var(--ink-hi)}
.hud-btn--danger{border-color:#6d2630;color:var(--red)}
.hud-btn--danger:hover{border-color:var(--red);background:var(--red-bg);color:var(--red-ink)}
.hud-btn--ghost{border-color:transparent;background:none;color:var(--ink-dim)}
.hud-btn--ghost:hover{border-color:var(--hair-lit);color:var(--cy);background:var(--panel-3)}
.hud-btn:disabled,.hud-btn[disabled]{color:var(--ink-faint);border-color:var(--hair);background:none;cursor:not-allowed}
.hud-btn:disabled:hover{color:var(--ink-faint);border-color:var(--hair);background:none}
.hud-btn__key{color:var(--red)}
.hud-btn--primary .hud-btn__key{color:var(--cy)}

/* ---- campos ---- */
.hud-field{
  display:flex;align-items:center;width:100%;height:var(--ctl-h);padding:0 9px;
  border:1px solid var(--hair-lit);background:var(--field);color:var(--ink);
  font-size:var(--fs-sm);letter-spacing:.05em;
}
.hud-field:focus,.hud-field:focus-visible{
  outline:none;border-color:var(--cy);box-shadow:inset 0 0 0 1px rgba(79,195,232,.25);
}
.hud-field:disabled{color:var(--ink-faint);background:#040608}
.hud-field.is-error{border-color:var(--red);color:var(--red-ink)}
.hud-label{
  display:block;font-family:var(--font-cond);font-size:var(--fs-xs);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-dim);margin-bottom:5px;
}
.hud-help{font-family:var(--font-cond);font-size:var(--fs-xs);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-dim)}
.hud-help--error{color:var(--red)}

/* ---- etiqueta de estado: siempre lleva palabra, nunca solo color ---- */
.hud-tag{
  display:inline-block;padding:0 5px;line-height:14px;
  font-family:var(--font-cond);font-size:var(--fs-nano);letter-spacing:.12em;text-transform:uppercase;
  border:1px solid currentColor;
}
.hud-tag--ok{color:var(--green)}
.hud-tag--warn{color:var(--amber)}
.hud-tag--err{color:var(--red)}
.hud-tag--info{color:var(--cy)}

/* ---- barra de medida ---- */
.hud-meter{display:block;height:8px;background:var(--panel-3);position:relative;width:100%}
.hud-meter__fill{position:absolute;inset:0 auto 0 0;background:var(--cy-mid)}
.hud-meter__fill--over{background:var(--red)}
.hud-meter__fill--ok{background:var(--green)}
.hud-meter__mark{position:absolute;top:0;bottom:0;width:2px;background:var(--ink-hi)}

/* ---- cifra destacada ---- */
.hud-kpi__label{font-family:var(--font-cond);font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--cy-mid);margin-bottom:4px}
.hud-kpi__value{font-size:var(--fs-3xl);color:var(--ink-hi);letter-spacing:.02em;line-height:1.1}
.hud-kpi__value--neg{color:var(--red)}
.hud-kpi__value--pos{color:var(--green)}
.hud-kpi__note{font-family:var(--font-cond);font-size:var(--fs-xs);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-dim);margin-top:3px}

/* ---- leyenda de gráfico ---- */
.hud-legend{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  font-family:var(--font-cond);font-size:var(--fs-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-dim)}
.hud-legend i{width:8px;height:8px;display:inline-block;margin-right:5px;vertical-align:-1px}

/* ---- diálogo ---- */
.hud-scrim{position:fixed;inset:0;background:rgba(3,5,7,.66);z-index:60}
.hud-dialog{
  border:1px solid var(--cy-mid);background:var(--panel);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 60px rgba(0,0,0,.6);
}
.hud-dialog__body{padding:13px}
.hud-dialog__actions{display:flex;gap:8px;justify-content:flex-end;
  border-top:1px solid var(--hair);padding:11px 13px}

/* ---- estados vacío / carga / error ---- */
.hud-empty{display:grid;place-items:center;text-align:center;padding:34px 16px;gap:8px}
.hud-empty__title{font-family:var(--font-cond);font-size:var(--fs-sm);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim)}
.hud-empty__hint{font-family:var(--font-cond);font-size:var(--fs-xs);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);max-width:44ch;line-height:1.7}
.hud-skeleton{background:linear-gradient(90deg,var(--panel-2) 0 40%,var(--panel-3) 50%,var(--panel-2) 60% 100%);
  background-size:280% 100%;animation:hud-shimmer 1.4s linear infinite;height:var(--row-h)}
@keyframes hud-shimmer{to{background-position:-180% 0}}
@media (prefers-reduced-motion:reduce){.hud-skeleton{animation:none}}

/* =====================================================================
   5. COMPATIBILIDAD — sustituye al CDN de Tailwind
   ---------------------------------------------------------------------
   El marcado de la app (y el que generan los módulos JS) usa utilidades
   de Tailwind. En vez de reescribir ~3.000 líneas de plantillas, aquí se
   redefine ese mismo vocabulario en el lenguaje de la consola: radios a
   cero, sombras fuera, escala tipográfica más pequeña y la paleta clara
   mapeada a la oscura.

   Quitar el CDN además arregla dos cosas que el propio código comentaba:
   el parpadeo al cargar (`.hidden` no existía hasta que bajaba el script)
   y el peso de un compilador JIT en producción.
   ===================================================================== */

/* ---- display y posición ---- */
.block{display:block}.inline-flex{display:inline-flex}.flex{display:flex}.grid{display:grid}
.hidden{display:none}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{inset:0}.inset-x-0{left:0;right:0}
.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}
.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-\[70\]{z-index:70}
.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-auto{overflow-x:auto}

/* ---- flex y grid ---- */
.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}
.flex-grow{flex-grow:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}
.justify-self-end{justify-self:end}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.gap-0\.5{gap:2px}.gap-1{gap:4px}.gap-2{gap:6px}.gap-3{gap:8px}.gap-4{gap:10px}.gap-6{gap:14px}
.space-y-1>*+*{margin-top:4px}.space-y-4>*+*{margin-top:10px}
.divide-y>*+*{border-top:1px solid var(--hair)}
.divide-slate-50>*+*{border-color:var(--hair)}

/* ---- tamaño ---- */
.w-full{width:100%}.h-full{height:100%}.h-screen{height:100vh}.min-w-0{min-width:0}
.w-2{width:8px}.w-3{width:12px}.w-4{width:14px}.w-5{width:16px}.w-6{width:18px}
.w-9{width:34px}.w-10{width:36px}.w-11{width:40px}.w-12{width:44px}.w-24{width:84px}
.w-32{width:112px}.w-64{width:224px}
.h-1\.5{height:6px}.h-2{height:8px}.h-3{height:12px}.h-4{height:14px}.h-5{height:16px}
.h-6{height:18px}.h-9{height:30px}.h-10{height:34px}.h-11{height:38px}.h-12{height:42px}
.h-24{height:84px}.h-32{height:112px}
.min-h-full{min-height:100%}
.min-h-\[36px\]{min-height:32px}.min-h-\[40px\]{min-height:34px}.min-h-\[44px\]{min-height:var(--touch)}
.max-w-sm{max-width:360px}.max-w-md{max-width:440px}.max-w-3xl{max-width:1180px}
.max-w-none{max-width:none}.max-w-\[11rem\]{max-width:176px}
.max-h-96{max-height:340px}.max-h-\[70vh\]{max-height:70vh}
.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}

/* ---- espaciado (escala comprimida frente a Tailwind) ---- */
.p-1\.5{padding:6px}.p-2{padding:8px}.p-2\.5{padding:9px}.p-3{padding:10px}
.p-4{padding:12px}.p-6{padding:16px}
.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:10px;padding-right:10px}
.px-4{padding-left:12px;padding-right:12px}.px-6{padding-left:16px;padding-right:16px}
.px-8{padding-left:20px;padding-right:20px}
.py-0\.5{padding-top:2px;padding-bottom:2px}.py-2{padding-top:8px;padding-bottom:8px}
.py-2\.5{padding-top:9px;padding-bottom:9px}.py-3{padding-top:10px;padding-bottom:10px}
.py-4{padding-top:12px;padding-bottom:12px}.py-8{padding-top:20px;padding-bottom:20px}
.py-10{padding-top:24px;padding-bottom:24px}
.pb-2{padding-bottom:8px}.pl-4{padding-left:12px}.pl-6{padding-left:16px}.pl-8{padding-left:20px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:6px}.mb-3{margin-bottom:8px}
.mb-4{margin-bottom:10px}.mb-6{margin-bottom:14px}.mb-8{margin-bottom:18px}
.mt-0\.5{margin-top:2px}.mt-1{margin-top:4px}.mt-2{margin-top:6px}.mt-3{margin-top:8px}
.mt-4{margin-top:10px}.mt-6{margin-top:14px}
.ml-2{margin-left:6px}.ml-3{margin-left:8px}.mr-1{margin-right:4px}.mx-2{margin-left:6px;margin-right:6px}
.-mx-4{margin-left:-12px;margin-right:-12px}
.-mt-8{margin-top:-18px}.-mr-8{margin-right:-18px}.-mb-8{margin-bottom:-18px}.-ml-8{margin-left:-18px}

/* ---- tipografía ---- */
.text-\[10px\]{font-size:var(--fs-micro)}.text-xs{font-size:var(--fs-xs)}.text-sm{font-size:var(--fs-sm)}
.text-base{font-size:var(--fs-md)}.text-lg{font-size:var(--fs-lg)}.text-xl{font-size:var(--fs-xl)}
.text-3xl{font-size:var(--fs-3xl)}.text-4xl{font-size:var(--fs-4xl)}
/* sin pesos gruesos: la jerarquía la hacen el color y las versales */
.font-normal{font-weight:400}.font-medium,.font-semibold,.font-bold{font-weight:500}
.font-display{font-family:var(--font-cond);letter-spacing:.06em}
.uppercase{text-transform:uppercase}.italic{font-style:italic}
.tracking-tight{letter-spacing:.01em}.tracking-wide{letter-spacing:.08em}.tracking-wider{letter-spacing:.14em}
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.break-words{overflow-wrap:break-word}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- color: la paleta clara mapeada a la oscura ---- */
.bg-white,.bg-slate-50{background-color:var(--panel)}
.bg-slate-100{background-color:var(--panel-2)}
.bg-slate-200{background-color:var(--panel-3)}
.bg-transparent{background-color:transparent}
.bg-slate-900\/40,.bg-slate-900\/50{background-color:rgba(3,5,7,.66)}
.bg-white\/10{background-color:rgba(255,255,255,.04)}
.bg-indigo-50,.bg-emerald-100,.bg-amber-100,.bg-red-100{background-color:var(--panel-3)}
.bg-indigo-500,.bg-indigo-600{background-color:var(--cy-bar)}
.bg-emerald-600{background-color:var(--green-bg)}
.bg-rose-600{background-color:var(--red-bg)}
.bg-amber-500{background-color:var(--amber-bg)}
.text-white{color:var(--ink-hi)}
.text-slate-900,.text-slate-800,.text-slate-700{color:var(--ink)}
.text-slate-600,.text-slate-500{color:var(--ink-dim)}
.text-slate-400,.text-slate-300{color:var(--ink-faint)}
.text-indigo-600,.text-indigo-400,.text-indigo-900{color:var(--cy)}
.text-indigo-100,.text-indigo-200{color:var(--ink-dim)}
.text-green-500,.text-green-600,.text-emerald-300,.text-emerald-800{color:var(--green)}
.text-red-500,.text-red-800{color:var(--red)}
.text-amber-500,.text-amber-800{color:var(--amber)}
.border{border:1px solid var(--hair)}
.border-2{border:2px solid var(--hair-lit)}
.border-b{border-bottom:1px solid var(--hair)}.border-t{border-top:1px solid var(--hair)}
.border-l{border-left:1px solid var(--hair)}
.border-slate-50,.border-slate-100,.border-slate-200,.border-indigo-50,.border-indigo-100,
.border-white\/10,.border-white\/20{border-color:var(--hair)}
.border-slate-300{border-color:var(--hair-lit)}

/* ---- efectos: en este lenguaje no existen ---- */
.rounded-md,.rounded-lg,.rounded-xl,.rounded-2xl,.rounded-t-2xl,.rounded-full{border-radius:0}
.shadow-md,.shadow-lg,.shadow-2xl,.shadow-indigo-200,.soft-shadow{box-shadow:none}
.backdrop-blur-sm{backdrop-filter:none}
.blur-xl{filter:none}
.opacity-0{opacity:0}.opacity-10{opacity:.1}
.transition-colors,.transition-all,.transition-opacity,.transition-transform{
  transition:color .1s linear,background-color .1s linear,border-color .1s linear}
.duration-300{transition-duration:.12s}
.transform{transform:none}
.translate-y-full{transform:translateY(100%)}
.hover\:-translate-y-0\.5:hover{transform:none}
.hero-gradient{background:var(--panel-2);color:var(--ink);border-left:2px solid var(--cy)}
.pointer-events-none{pointer-events:none}
.cursor-pointer{cursor:pointer}
.disabled\:opacity-40:disabled{opacity:.4}
.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}

/* ---- hover de la paleta ---- */
.hover\:bg-slate-50:hover,.hover\:bg-slate-100:hover,.hover\:bg-slate-200:hover,
.hover\:bg-indigo-50:hover,.hover\:bg-white\/60:hover,.hover\:bg-green-50:hover{background-color:var(--panel-3)}
.hover\:bg-indigo-700:hover{background-color:#25738f}
.hover\:bg-emerald-700:hover{background-color:#1a4830}
.hover\:bg-rose-50:hover,.hover\:bg-rose-100:hover,.hover\:bg-rose-700:hover{background-color:var(--red-bg)}
.hover\:bg-amber-600:hover{background-color:#4e3914}
.hover\:text-indigo-600:hover{color:var(--cy)}
.hover\:text-rose-600:hover{color:var(--red)}
.hover\:underline:hover{text-decoration:underline}

/* ---- interruptor (el único control que conserva forma redonda) ---- */
.peer{position:absolute;opacity:0;width:0;height:0}
.peer-focus\:outline-none:focus{outline:none}
.peer-focus\:ring-4,.peer-focus\:ring-indigo-300{box-shadow:none}
.peer:focus-visible+*{outline:1px solid var(--cy);outline-offset:1px}
.after\:content-\[\'\'\]::after{content:''}
.after\:absolute::after{position:absolute}
.after\:top-\[2px\]::after{top:2px}
.after\:left-\[2px\]::after{left:2px}
.after\:h-5::after{height:16px}
.after\:w-5::after{width:16px}
.after\:bg-white::after{background:var(--ink)}
.after\:border::after{border:1px solid var(--hair-lit)}
.after\:border-gray-300::after{border-color:var(--hair-lit)}
.after\:rounded-full::after{border-radius:0}
.after\:transition-all::after{transition:transform .12s linear}
.peer-checked\:bg-indigo-600:checked+*{background:var(--cy-bar)}
.peer-checked\:after\:translate-x-full:checked+*::after{transform:translateX(100%)}
.peer-checked\:after\:border-white:checked+*::after{border-color:var(--cy)}

/* ---- variantes responsive ---- */
@media (min-width:640px){
  .sm\:block{display:block}.sm\:flex{display:flex}.sm\:grid{display:grid}
  .sm\:hidden{display:none}.sm\:inline{display:inline}
  .sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}
  .sm\:justify-end{justify-content:flex-end}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:gap-8{gap:18px}
  .sm\:w-auto{width:auto}.sm\:w-96{width:340px}
  .sm\:p-4{padding:12px}.sm\:p-6{padding:16px}
  .sm\:px-4{padding-left:12px;padding-right:12px}.sm\:px-6{padding-left:16px;padding-right:16px}
  .sm\:py-2{padding-top:8px;padding-bottom:8px}.sm\:py-6{padding-top:16px;padding-bottom:16px}
  .sm\:mb-6{margin-bottom:14px}.sm\:-mx-6{margin-left:-16px;margin-right:-16px}
  .sm\:space-y-6>*+*{margin-top:14px}
  .sm\:text-sm{font-size:var(--fs-sm)}.sm\:text-xl{font-size:var(--fs-xl)}
  .sm\:text-2xl{font-size:var(--fs-2xl)}.sm\:text-4xl{font-size:var(--fs-4xl)}
  .sm\:text-left{text-align:left}.sm\:text-right{text-align:right}
  .sm\:rounded-2xl{border-radius:0}
  .sm\:top-1\/2{top:50%}.sm\:left-1\/2{left:50%}.sm\:right-auto{right:auto}.sm\:bottom-auto{bottom:auto}
  .sm\:-translate-x-1\/2{--tx:-50%}.sm\:-translate-y-1\/2{--ty:-50%}
  .sm\:translate-y-0{--ty:0}
  .sm\:scale-95{--sc:.97}.sm\:opacity-0{opacity:0}
  .sm\:-translate-x-1\/2.sm\:-translate-y-1\/2{transform:translate(-50%,-50%)}
}
@media (min-width:1024px){
  .lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:flex-col{flex-direction:column}
  .lg\:w-56{width:224px}.lg\:shrink-0{flex-shrink:0}.lg\:h-screen{height:100vh}
  .lg\:sticky{position:sticky}.lg\:top-0{top:0}
  .lg\:px-3{padding-left:10px;padding-right:10px}.lg\:py-6{padding-top:14px;padding-bottom:14px}
  .lg\:gap-1{gap:4px}
  .lg\:bg-white{background-color:var(--panel)}
  .lg\:border-r{border-right:1px solid var(--hair)}.lg\:border-slate-200{border-color:var(--hair)}
  .lg\:text-3xl{font-size:var(--fs-3xl)}.lg\:text-5xl{font-size:var(--fs-4xl)}
  /* en escritorio la densidad sube: los objetivos táctiles ya no mandan */
  .min-h-\[44px\]{min-height:30px}
  .min-h-\[40px\]{min-height:28px}
  .min-h-\[36px\]{min-height:26px}
}

/* =====================================================================
   6. PIEZAS DE LA APP
   ===================================================================== */
.modal-open{overflow:hidden}
.animate-spin-slow{animation:hud-spin 1.6s linear infinite}
@keyframes hud-spin{to{transform:rotate(360deg)}}

/* el gate de login y los paneles ocultos, antes de que corra un solo script */
#app-content.hidden,#login-container.hidden,#loading-screen.hidden,
#bottom-nav.hidden,#user-info.hidden,#month-bar.hidden{display:none}
#confirmation-modal{z-index:60}

/* ---- navegación de paneles ---- */
.tab-btn{color:var(--ink-dim)}
#bottom-nav{height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);background:var(--panel);
  border-top:1px solid var(--hair)}
#bottom-nav .tab-btn.tab-btn-active{color:var(--cy);box-shadow:inset 0 2px 0 var(--cy)}
#action-sheet-buttons{padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}

/* ---- filas de presupuesto y cuentas (rejillas propias) ---- */
.budget-row-grid{grid-template-columns:minmax(0,1fr) minmax(6rem,max-content) minmax(6rem,max-content) 2.75rem}
.category-row{display:grid;grid-template-columns:minmax(0,1fr) 5.5rem 2.75rem;
  grid-template-areas:"name available kebab" "assign assign .";row-gap:2px}
.account-row-grid{display:grid;grid-template-columns:minmax(0,1fr) 2.75rem;
  grid-template-areas:"name kebab" "balance kebab";row-gap:2px}
@media (min-width:640px){
  .category-row{grid-template-columns:minmax(0,1fr) minmax(6rem,max-content) minmax(6rem,max-content) 2.75rem;
    grid-template-areas:"name assign available kebab";row-gap:0}
  .account-row-grid{grid-template-columns:minmax(0,1fr) minmax(7rem,max-content) 2.75rem;
    grid-template-areas:"name balance kebab";row-gap:0}
}
.category-row,.account-row-grid{border-bottom:1px solid var(--hair)}
.category-row:hover,.account-row-grid:hover{background:var(--panel-2)}

/* ---- botón de filtros activo ---- */
.filters-active{background-color:var(--panel-3)!important;color:var(--cy)!important;
  border:1px solid var(--cy-mid)}

/* ---- hoja de planeación ----
   `border-collapse: separate` es OBLIGATORIO: con `collapse`, Chrome y
   Safari no pintan los bordes de las celdas `position: sticky` y la
   columna de conceptos se queda sin separador al hacer scroll. De ahí
   los box-shadow en lugar de border. */
.plan-table{table-layout:fixed;border-collapse:separate;border-spacing:0;
  width:max-content;min-width:100%;font-size:var(--fs-sm)}
.plan-table th,.plan-table td{padding:4px 7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.plan-table thead th{position:sticky;top:0;z-index:2;background:var(--panel-3);
  box-shadow:inset 0 -1px 0 var(--hair);font-family:var(--font-cond);font-weight:500;
  font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--cy)}
.plan-table .col-concept{position:sticky;left:0;z-index:1;background:var(--panel);
  text-align:left;box-shadow:inset -1px 0 0 var(--hair)}
.plan-table thead .col-concept{z-index:3;background:var(--panel-3)}
/* Tres niveles de lectura: seccion > grupo > categoria.
   El grupo estaba en --panel-2, que contra la fila normal da 1,02 de
   separacion: el mismo color a efectos practicos. Como este sistema no usa
   negritas, cada nivel se separa combinando cuatro cosas a la vez -fondo,
   tinta, caja tipografica y sangria- en vez de apoyarlo todo en el fondo. */
.plan-table tr.is-group .col-concept,
.plan-table tr.is-group td{background:var(--plan-group);color:var(--ink-hi)}
.plan-table tr.is-group td{box-shadow:inset 0 1px 0 var(--hair-lit)}
/* la celda fija lleva ademas su propio separador derecho: con
   border-collapse:separate los bordes de las celdas sticky no se pintan */
.plan-table tr.is-group .col-concept{
  box-shadow:inset 0 1px 0 var(--hair-lit),inset -1px 0 0 var(--hair);
  font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.11em}

.plan-table tr.is-section .col-concept,
.plan-table tr.is-section td{background:var(--cy-deep);color:var(--ink-hi)}
.plan-table tr.is-section .col-concept{
  font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.16em}

.plan-table tr.is-total .col-concept,
.plan-table tr.is-total td{background:var(--panel-3);color:var(--ink-hi)}
.plan-table tr.is-total .col-concept{
  box-shadow:inset 0 1px 0 var(--hair-lit),inset -1px 0 0 var(--hair);
  font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.16em}

/* La sangria vuelve a los pasos del tema claro (16/32px). Al comprimir la
   escala de espaciado, pl-4 y pl-8 quedaron en 12 y 20: cuatro pixeles de
   diferencia entre grupo y categoria no leen como jerarquia. */
.plan-table .col-concept.pl-4{padding-left:16px}
.plan-table .col-concept.pl-8{padding-left:34px}
.plan-cell-input{width:100%;text-align:right;background:transparent;border:1px solid transparent;
  padding:2px 5px;font:inherit;color:inherit}
.plan-cell-input:hover{border-color:var(--hair-lit)}
.plan-cell-input:focus{outline:none;border-color:var(--cy);background:var(--field);
  box-shadow:inset 0 0 0 1px rgba(79,195,232,.25)}
.plan-cell-input.is-saving{background:var(--amber-bg)}
.plan-cell-input.is-error{background:var(--red-bg);border-color:var(--red)}

/* aviso de pantalla estrecha: las reglas van sobre los HIJOS, nunca sobre
   #panel-plan, para no ganarle al `.hidden` que oculta el panel entero */
#plan-sheet-card{display:none}
#plan-mobile-notice{display:block}
@media (min-width:1024px){
  #plan-sheet-card{display:block}
  #plan-mobile-notice{display:none}
}

/* iOS centra el valor de los campos de fecha; se fuerza a la izquierda */
input[type="date"],input[type="month"]{text-align:left}
input[type="date"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value{text-align:left}
input[type="date"],input[type="month"]{color-scheme:dark}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* =====================================================================
   7. ARMAZÓN DE LA APP
   El alto lo reparte flex y no calc(): así la barra de estado no se
   despega cuando cambia el alto del cromo (p. ej. si se envuelven las
   pestañas de módulo en una pantalla estrecha).
   ===================================================================== */
#app-content{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.hud-stage{flex:1;min-height:0;display:flex;overflow:hidden;background:var(--bg)}
.hud-content{
  /* scrollbar-gutter reserva el hueco de la barra SIEMPRE. Sin esto, las
     pestanas con contenido largo (Presupuesto, Movimientos) son 7px mas
     estrechas que las cortas (Cuentas, Pagos), y al saltar de una a otra
     las columnas de cifras se desplazaban. No era un problema de rejilla
     sino de la barra apareciendo y desapareciendo. */
  flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
  padding:var(--gutter);
  display:flex;flex-direction:column;gap:var(--gutter);
}
.hud-content>[data-panel]{display:flex;flex-direction:column;gap:var(--gutter);min-height:0}
.hud-content>[data-panel].hidden{display:none}

/* en móvil el cromo se simplifica: manda la barra inferior */
@media (max-width:639px){
  .hud-menubar{display:none}
  .hud-toolbar{height:auto;min-height:40px;flex-wrap:wrap;padding:5px 8px;gap:5px}
  #month-bar{margin-left:auto}
  .hud-content{padding:6px;padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px) + 8px)}
  .hud-status{display:none}
  #app-content{height:auto;min-height:100vh;overflow:visible}
  .hud-stage{overflow:visible}
  .hud-content{overflow:visible}
}

/* la hoja de planeación se come todo el ancho disponible */
#content-wrap.max-w-none{max-width:none}

/* pantallas de arranque y sesión */
#loading-screen,#login-container{background:var(--bg)}
#login-container{border-left:0}

/* =====================================================================
   8. DENSIDAD
   La escala de espaciado de la capa 5 sirve para móvil, donde mandan los
   objetivos táctiles. En escritorio el producto es la densidad: a partir
   de 1024px las filas se comprimen y el contenido ocupa todo el ancho.
   ===================================================================== */
#content-wrap{max-width:none;margin:0}

@media (min-width:1024px){
  /* filas de presupuesto y cuentas: de ~54px a ~26px */
  .category-row,.account-row-grid{padding-top:2px!important;padding-bottom:2px!important;
    padding-left:8px!important;padding-right:8px!important}
  .category-row .row-menu-btn,.account-row-grid .row-menu-btn{height:22px;width:22px;min-height:0}
  .category-row .h-11,.account-row-grid .h-11{height:22px}
  .category-row .w-11,.account-row-grid .w-11{width:22px}
  .category-row .p-1\.5,.account-row-grid .p-1\.5{padding:2px}

  /* cabecera de grupo: una regla, no una tarjeta con aire */
  #budget-body>div:first-child{margin-top:0}
  #budget-body>.mt-4{margin-top:6px}

  /* la tarjeta de resumen deja de ser un héroe y pasa a ser una tira */
  #summary-header .hero-gradient{padding:10px 13px}
  #summary-header .text-3xl,#summary-header .sm\:text-4xl,#summary-header .lg\:text-5xl{font-size:var(--fs-3xl)}
  #summary-header{margin-bottom:0}

  /* paneles: el aire interior baja */
  .hud-content .p-4,.hud-content .sm\:p-6{padding:11px 13px}
  .hud-content .mb-4,.hud-content .sm\:mb-6{margin-bottom:9px}
  .hud-content .py-3{padding-top:5px;padding-bottom:5px}
  .hud-content .py-2\.5{padding-top:4px;padding-bottom:4px}

  /* listas del historial y de pagos */
  #history-list-body>div,#reminders-body>div{padding-top:3px;padding-bottom:3px}
}

/* cabeceras de sección dentro de un panel: mismo lenguaje que .hud-panel__head */
.hud-content h2{font-family:var(--font-cond);font-size:var(--fs-lg);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.hud-content h2 .w-2{width:4px;height:14px;background:var(--cy)}
.hud-content .uppercase.tracking-wider{font-family:var(--font-cond);letter-spacing:.14em}

/* la tarjeta de resumen: regla cian a la izquierda, sin adornos */
#summary-header .hero-gradient>.absolute{display:none}
#summary-header .bg-white\/10{background:var(--panel-3);border:1px solid var(--hair)}

/* ---- densidad real de las filas de lista ---- */
@media (min-width:1024px){
  .category-row,.account-row-grid{padding-top:1px!important;padding-bottom:1px!important}
  .category-row .min-h-\[44px\],.account-row-grid .min-h-\[44px\]{min-height:20px}
  .category-row .h-11,.account-row-grid .h-11{height:20px}
  .category-row .w-11,.account-row-grid .w-11{width:20px}
  .category-row .w-5,.account-row-grid .w-5{width:13px}
  .category-row .h-5,.account-row-grid .h-5{height:13px}
  .category-row .text-sm,.account-row-grid .text-sm{font-size:var(--fs-sm)}
}

/* ---- columna de uso y gastado en la lista de presupuesto ----
   Solo aparecen cuando hay ancho de sobra: en tablet la fila se queda con
   nombre / presupuestado / disponible, que es lo mínimo accionable. */
.row-meter,.row-spent,.hide-narrow{display:none}
@media (min-width:1100px){
  .row-meter,.row-spent,.hide-narrow{display:block}
  /* El nombre se topa: sin tope se comia todo el ancho que gano el centro al
     quitar los carriles y dejaba las cifras flotando en la otra punta. El
     sobrante se lo lleva el medidor, que cuanto mas largo mejor resuelve. */
  .category-row,.budget-row-grid{
    grid-template-columns:
      minmax(0,calc(300px * var(--ui-scale)))
      minmax(118px,1fr)
      minmax(6rem,max-content) minmax(6rem,max-content) minmax(6rem,max-content)
      2.75rem;
  }
  .category-row{grid-template-areas:"name meter assign gastado available kebab"}
  .row-meter{padding-right:18px}
  .row-meter .hud-meter{height:5px}
}

/* Los paneles son items de un contenedor flex: sin min-width:0 no bajan de
   su ancho intrinseco y en movil empujan la pagina a scroll horizontal. */
.hud-content>*{min-width:0;max-width:100%}
.hud-content [data-panel]>*{min-width:0}
body{overflow-x:hidden}

/* ---------------------------------------------------------------------
   Clases que los módulos JS arman por concatenación
   (p. ej. `availableClasses += ' text-emerald-600'`) y que por tanto no
   aparecen dentro de ningún class="..." del marcado. Sin estas reglas el
   disponible perdería su color, que es la señal más importante de la app.
   El script de auditoría de clases las detecta; ver la guía de estilo.
   --------------------------------------------------------------------- */
.text-emerald-600{color:var(--green)}
.text-rose-600,.text-rose-500,.text-red-600{color:var(--red)}
.text-amber-600{color:var(--amber)}
.text-indigo-500{color:var(--cy)}
.bg-green-500{background-color:var(--green)}
.bg-rose-500{background-color:var(--red)}
.bg-slate-100\/80{background-color:var(--panel-2)}
.bg-slate-50\/50{background-color:var(--panel-2)}
.bg-white\/95{background-color:var(--panel)}
.hover\:bg-emerald-50:hover{background-color:var(--green-bg)}
.hover\:bg-red-50:hover{background-color:var(--red-bg)}
.hover\:bg-amber-50:hover{background-color:var(--amber-bg)}
.first\:mt-0:first-child{margin-top:0}
.gap-x-1\.5{column-gap:6px}
.gap-x-2{column-gap:8px}
/* .sm:px-3 y .sm:py-3 SOLO dentro de la consulta: definidas fuera aplicaban
   tambien en movil y pisaban a .px-2 / .py-2 */
@media (min-width:640px){
  .sm\:gap-x-2{column-gap:8px}
  .sm\:px-3{padding-left:10px;padding-right:10px}
  .sm\:py-3{padding-top:10px;padding-bottom:10px}
}
/* campo numérico de los diálogos y menú de columna de la hoja de plan */
.number-input{text-align:right;font-variant-numeric:tabular-nums}
.plan-col-menu{background:var(--panel);border:1px solid var(--hair-lit)}

/* ---- control de tamaño de la interfaz ----
   La "A" y el signo comparten botón: la A marca de qué va el control y el
   signo dice en qué dirección, sin depender de un icono que haya que
   aprenderse. */
.hud-scale__btn{
  /* .hud-iconbtn es una rejilla y apilaba la A sobre el signo: aqui vuelve
     a ser una linea */
  display:flex;align-items:baseline;justify-content:center;gap:1px;
  width:auto;min-width:30px;padding:0 5px;
  font-family:var(--font-cond);font-size:var(--fs-chrome);letter-spacing:.02em;line-height:1}
.hud-scale__btn span{font-size:inherit}

/* =====================================================================
   9. NAVEGACIÓN VERTICAL Y MENÚS
   Las pestañas de módulo van en una columna a la izquierda: en tablet se
   alcanzan con el pulgar izquierdo sin que la mano tape el contenido,
   que es lo que pasaba con la tira horizontal. Ocupan 164px frente a los
   258 del carril de datos que sustituyen, así que el centro gana ancho.
   ===================================================================== */
.hud-nav{
  display:flex;flex-direction:column;flex:none;gap:1px;overscroll-behavior:contain;
  width:calc(164px * var(--ui-scale));
  padding:6px 0;background:var(--panel);border-right:1px solid var(--hair);
  overflow-y:auto;
}
.hud-nav__item{
  display:flex;align-items:center;gap:9px;flex:none;
  height:calc(32px * var(--ui-scale));padding:0 11px;
  font-family:var(--font-cond);font-size:var(--fs-chrome);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-dim);text-align:left;white-space:nowrap;
}
.hud-nav__item svg{width:14px;height:14px;flex:none}
.hud-nav__item:hover{color:var(--ink);background:var(--panel-3)}
.hud-nav__item.tab-btn-active{color:var(--cy);background:var(--panel-3);
  box-shadow:inset 3px 0 0 var(--cy)}
.hud-nav__key{margin-left:auto;font-weight:400;color:var(--ink-faint);font-size:var(--fs-micro)}
.hud-nav__item.tab-btn-active .hud-nav__key{color:var(--cy-mid)}

/* ---- menús de la barra superior ---- */
.hud-menubar__slot{position:relative;display:inline-flex}
.hud-menubar__item[aria-expanded="true"]{color:var(--cy)}
.hud-menu{
  position:absolute;top:100%;left:-10px;z-index:80;min-width:222px;padding:3px 0;
  border:1px solid var(--hair-lit);background:var(--panel);
  box-shadow:0 12px 34px rgba(0,0,0,.6);
}
.hud-menu__item{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;
  height:calc(26px * var(--ui-scale));padding:0 12px 0 26px;
  font-family:var(--font-cond);font-size:var(--fs-chrome);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);text-align:left;white-space:nowrap;
}
.hud-menu__item:hover,.hud-menu__item:focus-visible{background:var(--cy-bar);color:var(--ink-hi);outline:none}
.hud-menu__key{margin-left:auto;color:var(--ink-dim)}
.hud-menu__item:hover .hud-menu__key,.hud-menu__item:focus-visible .hud-menu__key{color:var(--ink-hi)}
.hud-menu__check{position:absolute;left:10px;color:var(--cy)}
.hud-menu__item:hover .hud-menu__check{color:var(--ink-hi)}
.hud-menu__head{
  padding:7px 12px 4px;font-family:var(--font-cond);font-size:var(--fs-micro);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
}
.hud-menu__sep{height:1px;background:var(--hair);margin:3px 0}

@media (max-width:639px){ .hud-nav{display:none} }

/* =====================================================================
   10. GRAMÁTICA DE FILA
   Misma rejilla en todas las pestañas: [icono] [texto] [cifra] [menú].
   En móvil la cifra baja a su propia línea, pero sigue siendo la misma
   rejilla con otras áreas, no otro componente.
   ===================================================================== */
.hud-listrow{
  display:grid;align-items:center;column-gap:10px;
  padding:var(--row-pad) 10px;
  border-bottom:1px solid var(--hair);
  grid-template-columns:var(--col-icon) minmax(0,1fr) var(--col-kebab);
  grid-template-areas:"icon main kebab" "icon amount kebab" "icon meta kebab";
}
.hud-listrow:last-child{border-bottom:0}
.hud-listrow:hover{background:var(--panel-2)}
.hud-listrow__icon{grid-area:icon;display:grid;place-items:center;width:var(--col-icon);height:var(--col-icon)}
.hud-listrow__main{grid-area:main;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-listrow__meta{grid-area:meta;min-width:0;display:flex;align-items:center;gap:8px;
  font-size:var(--fs-xs);color:var(--ink-dim)}
.hud-listrow__kebab{grid-area:kebab;display:grid;place-items:center;
  width:var(--col-kebab);height:var(--col-kebab);color:var(--ink-dim)}
.hud-listrow__kebab:hover{color:var(--cy);background:var(--panel-3)}
/* La cifra: mismo ancho en todas las filas y en todas las pestañas, para
   que compartan borde derecho Y borde izquierdo. Con ancho automatico cada
   fila empieza donde le toca y la columna se ve dentada. */
.hud-listrow__amount{
  grid-area:amount;font-variant-numeric:tabular-nums;letter-spacing:var(--ls-data);
  white-space:nowrap;
}
@media (min-width:640px){
  .hud-listrow{
    grid-template-columns:var(--col-icon) minmax(0,1fr) var(--col-amount) var(--col-kebab);
    grid-template-areas:"icon main amount kebab" "icon meta amount kebab";
  }
  .hud-listrow__amount{text-align:right}
}

/* ---- Presupuesto y Cuentas comparten la MISMA geometria de columnas ----
   Las cifras de la ultima columna caen en el mismo borde derecho en las
   cuatro pestanas, y el menu de fila ocupa el mismo ancho en todas. Sin
   esto, cada rejilla elegia su propio ancho y al saltar de pestana las
   columnas se movian unos pixeles, que es lo que se leia como desorden. */
@media (min-width:640px){
  .account-row-grid{
    column-gap:10px!important;
    grid-template-columns:minmax(0,1fr) calc(var(--col-icon) + var(--col-amount)) var(--col-kebab);
    grid-template-areas:"name balance kebab";
  }
}
@media (min-width:1100px){
  .category-row,.budget-row-grid{
    column-gap:10px!important;
    grid-template-columns:
      minmax(0,calc(300px * var(--ui-scale)))
      minmax(118px,1fr)
      var(--col-amount) var(--col-amount) var(--col-amount)
      var(--col-kebab);
  }
}
@media (min-width:1100px){
  .category-row .add-expense-to-category-btn,
  .category-row .assign-budget-btn{padding-right:0}
}
/* el menu de fila: mismo cuadro en las cuatro pestanas */
.category-row .row-menu-btn,.account-row-grid .row-menu-btn{
  width:var(--col-kebab);height:var(--col-kebab);min-height:0}

/* ---- el mismo ritmo en las rejillas propias de Presupuesto y Cuentas ---- */
.category-row,.account-row-grid{padding-top:var(--row-pad);padding-bottom:var(--row-pad)}
@media (min-width:1024px){
  .category-row,.account-row-grid{
    padding-top:var(--row-pad)!important;padding-bottom:var(--row-pad)!important;
  }
}
/* el icono de conciliacion de Cuentas, en ranura fija junto al saldo */
.acc-balance{display:grid;grid-template-columns:var(--col-icon) minmax(0,1fr);
  align-items:center;column-gap:4px}
.acc-balance>span:first-child{display:grid;place-items:center;width:var(--col-icon)}
.acc-balance>span:last-child{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:639px){
  .acc-balance{grid-template-columns:var(--col-icon) max-content;justify-content:start}
  .acc-balance>span:last-child{text-align:left}
}

/* ---- y en la hoja de planeación ---- */
.plan-table th,.plan-table td{padding-top:var(--row-pad);padding-bottom:var(--row-pad)}