/* ============================================================
   TEMA v2 · 66 · GASTOS  ·  finanzas
   Bordó + ámbar. El importe es el campo protagonista (bloque oscuro con
   cifras grandes) y el historial se lee como un libro de movimientos.
   ============================================================ */
#view[data-route="gastos"] .page-title { background: var(--hdr); }
.gastos-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gastos-head > div { min-width: 0; }
.gastos-head .btn { min-height: 48px; flex: 0 0 auto; }
.gn { gap: 18px; }
.gn-titulo { font-family: var(--font-num); font-size: 24px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.gn-campo { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 750; }
.gn-campo small { text-transform: none; letter-spacing: 0; }
.gn-campo input { font-size: 17px; text-transform: none; letter-spacing: 0; font-weight: 500; }

/* el importe: bloque oscuro */
.gn-monto-in { background: #2a1519; border: 2px solid #5e2a33; border-radius: 20px; padding: 6px 22px; }
.gn-monto-in:focus-within { border-color: #e3a23a; box-shadow: 0 0 0 5px rgba(227, 162, 58, .22); }
.gn-monto-in b { font-family: var(--font-num); font-size: 38px; color: #e3a23a; }
.gn-monto-in input { font-family: var(--font-num); font-size: 54px; font-weight: 700; color: #fbeccc; min-height: 0; padding: 6px 0; letter-spacing: 0; background: transparent; border: 0; }
.gn-monto-in input::placeholder { color: #8a5560; }

/* categorías */
.gn-cats { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:10px; margin:8px 0 10px; }
.gn-cat-wrap { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 40px; gap:5px; min-width:0; }
.gn-cat { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; min-height:58px; padding:8px 58px 8px 14px; border-radius:14px; box-shadow:0 3px 0 var(--border-strong); font-size:15px; text-align:left; }
.gn-cat small { margin-top:3px; color:var(--text-muted); font-size:10px; letter-spacing:.08em; }
.gn-cat.on small { color:rgba(255,255,255,.82); }
.gn-cat:disabled { opacity:.6; cursor:default; }
.gn-cat-menu { position:absolute; top:8px; right:45px; display:grid; place-items:center; width:40px; min-width:40px; height:40px; padding:0; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); color:var(--text); font-size:24px; line-height:1; }
.gn-cat-menu:hover { border-color:var(--accent); color:var(--accent); }
.gn-cat.on + .gn-cat-menu { border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.14); color:#fff; }
.gn-cat.on + .gn-cat-menu:hover { background:rgba(255,255,255,.24); }
.gn-cat-wrap.inactive { opacity:.7; }
.gn-cat.on { background: var(--accent-solid); border-color: var(--accent-solid); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent-solid) 60%, #000); }
.gn-campo .hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.gn-campo input { border-radius: 14px; }
.gn-campo input:focus { border-color: var(--accent); }
.g-historial { scroll-margin-top: 20px; display: grid; gap: 12px; }
.gn[hidden], .g-historial[hidden] { display: none; }
.g-historial-titulo { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; }
.g-historial-titulo h3 { margin: 0; font-family: var(--font-num); font-size: 24px; letter-spacing: .04em; text-transform: uppercase; }
.gn-fecha { background: var(--surface-2); border-radius: 14px; padding: 10px 14px; }
.gn #g-guardar { min-height: 64px; font-size: 18px; border-radius: 16px; letter-spacing: .02em; }
.gn-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* historial: libro de movimientos */
.gl-periodo { gap: 8px; }
.gl-lista { padding: 0; }
.gl-fila { padding: 16px 22px; border-top: 1px solid var(--border); transition: background .14s; }
.gl-fila:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.gl-fila:hover { background: var(--accent-soft); }
.gl-top b { font-weight: 750; }
.gl-fecha { font-family: var(--font-num); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.gl-monto { font-family: var(--font-num); font-size: 30px; font-weight: 700; color: var(--accent); letter-spacing: 0; }
.gl-fila.anulado .gl-monto { color: var(--text-soft); text-decoration: line-through; }
.gl-der .btn { min-height: 34px; box-shadow: none; }
@media (max-width: 640px) {
  .gastos-head { align-items: flex-start; }
  .gastos-head .btn { min-height: 44px; padding: 0 12px; }
  .gn-cats { gap: 9px; }
  .gn-cats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gn-cat-wrap { grid-template-columns:minmax(0,1fr) 36px; gap:4px; }
  .gn-cat { padding:7px 52px 7px 9px; font-size:13px; }
  .gn-cat-menu { top:7px; right:40px; }
}

/* ---- Carrito de gastos ---- */
.gn-ultimo { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.gn-ultimo[hidden] { display: none; }
.gc { display: grid; gap: 12px; border-top: 2px dashed var(--border); padding-top: 16px; }
.gc-vacio { display: flex; align-items: center; gap: 10px; color: var(--text-muted); }
.gc-vacio p { margin: 0; }
.gc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gc-head h3 { margin: 0; font-family: var(--font-num); font-size: 22px; letter-spacing: .04em; text-transform: uppercase; }
.gc-head h3 span { font-size: 14px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 2px 10px; }
.gc-lista { display: grid; gap: 8px; }
.gc-linea { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.gc-main { min-width: 0; overflow-wrap: anywhere; }
.gc-main small { display: block; color: var(--text-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.gc-obs { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.gc-monto { font-family: var(--font-num); font-size: 24px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.gc-acc { display: inline-flex; gap: 6px; }
.gc-acc .icon-btn { min-width: 44px; min-height: 44px; }
.gc-total { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: #2a1519; color: #fbeccc; }
.gc-total b { font-family: var(--font-num); font-size: 34px; color: #e3a23a; }
.gl-clasif { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 640px) {
  .gc-linea { grid-template-columns: minmax(0, 1fr) auto; }
  .gc-acc { grid-column: 1 / -1; justify-content: flex-end; }
  .gn-monto-in input { font-size: 42px; }
}

/* Totales del período por clasificación y por naturaleza */
.g-grupos { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin:12px 0; }
.g-grupo h4 { margin:0 0 6px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.g-grupo-fila { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--border); font-size:14px; }
.g-grupo-fila b { white-space:nowrap; }
.g-grupo-fila.pendiente span { color:var(--warn); }
@media (max-width: 640px) { .g-grupos { grid-template-columns:minmax(0,1fr); } }

/* Etapa 11: los filtros de período se ven completos en pantallas angostas (antes ESTE AÑO / RANGO quedaban fuera de vista) */
.gl-periodo { flex-wrap: wrap; overflow-x: visible; }

/* Etapa 13 · Gastos con botones grandes (mismo estilo bordó y misma tarjeta que el «+» de Stock), ventana para agregar y calculadora auxiliar integrada en la grilla. */
#view[data-route="gastos"] .gn-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); grid-auto-flow: row dense; gap: 12px; margin: 10px 0 14px; align-items: stretch; }
#view[data-route="gastos"] .gn-cat-wrap { position: relative; display: block; min-width: 0; }
#view[data-route="gastos"] .gn-cat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "em ." "nom nom" "sub sub"; align-content: start; justify-items: start; gap: 6px 8px; width: 100%; height: 100%; min-height: 104px; padding: 12px 12px 12px 12px; border: 1px solid var(--accent-solid); border-radius: 18px; background: var(--accent-solid); color: #fff; box-shadow: var(--shadow-sm); text-align: left; transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
#view[data-route="gastos"] .gn-cat:hover { transform: translateY(-3px); box-shadow: var(--lift); }
#view[data-route="gastos"] .gn-cat:active { transform: scale(.98); }
#view[data-route="gastos"] .gn-em { grid-area: em; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border-radius: 13px; font-size: 23px; }
#view[data-route="gastos"] .gn-nom { grid-area: nom; font-size: 16px; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
#view[data-route="gastos"] .gn-cat small { grid-area: sub; margin: 0; color: rgba(255, 255, 255, .8); font-size: 10px; letter-spacing: .08em; overflow-wrap: anywhere; }
#view[data-route="gastos"] .gn-cat-menu { top: 10px; right: 10px; border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .14); color: #fff; }
#view[data-route="gastos"] .gn-cat-menu:hover { background: rgba(255, 255, 255, .26); color: #fff; border-color: rgba(255, 255, 255, .5); }
#view[data-route="gastos"] .gn-cat-nuevo { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; min-height: 104px; padding: 12px; border: 2px dashed var(--accent-solid); border-radius: 18px; background: transparent; color: var(--accent); text-align: left; }
#view[data-route="gastos"] .gn-cat-nuevo .gn-em { background: var(--accent-soft); color: var(--accent); font-size: 28px; font-weight: 700; }
#view[data-route="gastos"] .gn-cat-nuevo:hover { background: var(--accent-soft); }

/* Menú ⋮ de la parte de arriba */
.gastos-acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.g-mas-wrap { position: relative; }
.g-mas { min-width: 44px; min-height: 44px; padding: 0 12px; font-size: 24px; line-height: 1; }
.g-mas-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; padding: 6px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--lift); }
.g-mas-menu[hidden] { display: none; }
.g-mas-menu button { display: block; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.g-mas-menu button:hover { background: var(--accent-soft); }

/* Calculadora auxiliar: un ítem más de la grilla (una tarjeta de ancho, varias de alto); sin lugar reservado cuando está oculta. */
.gcalc { grid-column: span 1; grid-row: span 3; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border-radius: 18px; background: #2a1519; color: #fbeccc; box-shadow: var(--shadow-sm); }
.gcalc[hidden] { display: none; }
.gcalc-pant { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-height: 64px; padding: 8px 12px; border-radius: 12px; background: #1a0c0f; overflow: hidden; }
.gcalc-pant small { color: #b99aa0; font-size: 13px; min-height: 16px; }
.gcalc-pant output { max-width: 100%; font-family: var(--font-num); font-size: 30px; font-weight: 700; color: #e3a23a; overflow-wrap: anywhere; text-align: right; line-height: 1.1; }
.gcalc-teclas { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(44px, 1fr); gap: 6px; }
.gcalc-t { min-width: 0; min-height: 44px; border: 0; border-radius: 12px; background: #4a2a30; color: #fff; font: 700 19px var(--font-ui, inherit); cursor: pointer; }
.gcalc-t:hover { background: #5e3840; }
.gcalc-t:active { transform: scale(.96); }
.gcalc-fn { background: #6b3a42; }
.gcalc-op { background: #8e2c3a; }
.gcalc-igual { grid-row: span 2; background: #e3a23a; color: #2a1519; font-size: 24px; }
.gcalc-igual:hover { background: #efb450; }
.gcalc-cero { grid-column: span 2; }
.gcf-lista { display: grid; gap: 6px; margin: 10px 0; max-height: 40vh; overflow: auto; }
.gcf-fila { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; overflow-wrap: anywhere; }
.gcf-fila small { display: block; color: var(--text-muted); font-weight: 500; }
.gcf-fila > b { white-space: nowrap; color: var(--accent); }

@media (max-width: 640px) {
  .gastos-head { flex-direction: column; align-items: stretch; }
  .gastos-acc { gap: 8px; justify-content: flex-start; }
  .gastos-acc .btn-primary { flex: 1; justify-content: center; }
  #view[data-route="gastos"] .gn-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  #view[data-route="gastos"] .gn-cat, #view[data-route="gastos"] .gn-cat-nuevo { min-height: 92px; padding: 10px; }
  #view[data-route="gastos"] .gn-em { width: 38px; height: 38px; font-size: 20px; }
  #view[data-route="gastos"] .gn-nom { font-size: 14px; }
  #view[data-route="gastos"] .gn-cat-menu { top: 8px; right: 8px; width: 36px; min-width: 36px; height: 36px; }
  .gcalc { grid-column: 1 / -1; grid-row: auto; padding: 10px; }
  .gcalc-teclas { grid-auto-rows: 46px; }
}

/* ============================================================
   GASTOS · CAJA REGISTRADORA (etapa 25)
   Zona principal a la izquierda (visor de importe + grilla que reparte TODOS los tipos en el alto y ancho disponibles) y carrito compacto a la derecha.
   En celular el carrito es una barra fija abajo que abre el panel. Las columnas y el alto de las filas los calcula js/views/gastos.js (ajustarGrilla).
   ============================================================ */
#view.view-host:has(.gastos-v) { padding: 10px 14px 12px; max-width: none; }   /* caja registradora: todo el ancho y alto de la ventana */
#view.view-host:has(.gastos-v)::after { display: none; }
@media (max-width: 640px) { #view.view-host:has(.gastos-v) { padding-bottom: 12px; } }
#view[data-route="gastos"] .gastos-v { gap: 10px; }
#view[data-route="gastos"] .gastos-head { padding: 8px 14px; min-height: 0; border-radius: 16px; }
#view[data-route="gastos"] .gastos-head h2 { font-size: 22px; margin: 0; }
#view[data-route="gastos"] .gastos-head p { display: none; }
#view[data-route="gastos"] .gastos-head .btn { min-height: 44px; }
.gn.gn-caja { display: grid; grid-template-columns: minmax(0, 1fr) clamp(290px, 27vw, 400px); gap: 14px; align-items: start; padding: 0; background: transparent; border: 0; box-shadow: none; }
.gn-izq { display: grid; gap: 10px; min-width: 0; align-content: start; }

/* visor del importe */
.gn-visor { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lab val acc" "est est est"; align-items: center; gap: 0 14px; padding: 4px 16px 6px; border-radius: 18px; background: #2a1519; border: 3px solid #5e2a33; color: #fbeccc; transition: border-color .12s, box-shadow .12s; }
.gn-visor:not(.vacio) { border-color: #e3a23a; box-shadow: 0 0 0 4px rgba(227, 162, 58, .22); }
.gn-visor.mal { border-color: #d6534a; animation: g-sacudir .28s; }
@keyframes g-sacudir { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.gv-label { grid-area: lab; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #c9a3aa; }
.gv-valor { grid-area: val; text-align: center; font-family: var(--font-num); font-size: clamp(34px, 4.6vw, 54px); line-height: 1.02; font-weight: 700; color: #e3a23a; overflow-wrap: anywhere; }
.gn-visor.vacio .gv-valor { color: #8a5560; }
.gv-acc { grid-area: acc; display: flex; gap: 8px; }
.gv-btn { min-width: 48px; min-height: 44px; background: #4a2a30; color: #fff; border-color: #6b3a42; }
.gv-estado { grid-area: est; text-align: center; font-size: 13px; color: #c9a3aa; min-height: 18px; }
.gn-visor.mal .gv-estado { color: #ffb4ab; font-weight: 700; }

/* grilla: columnas y alto de fila los fija el script con el tamaño real de la zona */
#view[data-route="gastos"] .gn-cats { display: grid; grid-template-columns: repeat(var(--g-cols, 3), minmax(0, 1fr)); grid-auto-rows: var(--g-fila, 96px); gap: 8px; margin: 0; align-items: stretch; align-content: start; grid-auto-flow: row; }
#view[data-route="gastos"] .gn-cats.con-scroll { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 4px; }
#view[data-route="gastos"] .gn-cat-wrap { position: relative; display: block; min-width: 0; min-height: 0; }
#view[data-route="gastos"] .gn-cat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "em ." "nom nom" "sub sub"; align-items: start; justify-items: start; gap: 4px 8px; width: 100%; height: 100%; min-height: 0; padding: 8px 10px; overflow: hidden; border-radius: 16px; }
#view[data-route="gastos"] .gn-em { width: 36px; height: 36px; font-size: 20px; border-radius: 11px; }
#view[data-route="gastos"] .gn-nom { align-self: center; font-size: 16px; line-height: 1.15; padding-right: 2px; overflow-wrap: break-word; word-break: normal; hyphens: none; }
#view[data-route="gastos"] .gn-cat small { font-size: 9.5px; line-height: 1.2; }
#view[data-route="gastos"] .gn-cats[data-alto="grande"] .gn-nom { font-size: 18px; }
#view[data-route="gastos"] .gn-cats[data-alto="grande"] .gn-em { width: 44px; height: 44px; font-size: 24px; }
#view[data-route="gastos"] .gn-cats[data-alto="medio"] .gn-nom { font-size: 15px; }
#view[data-route="gastos"] .gn-cats[data-alto="chico"] .gn-cat { padding: 6px 8px; row-gap: 2px; }
#view[data-route="gastos"] .gn-cats[data-alto="chico"] .gn-nom { font-size: 13.5px; align-self: start; }
#view[data-route="gastos"] .gn-cats[data-alto="chico"] .gn-em { width: 26px; height: 26px; font-size: 15px; }
#view[data-route="gastos"] .gn-cats[data-alto="chico"] .gn-cat small { display: none; }
#view[data-route="gastos"] .gn-cat-menu { top: 4px; right: 4px; width: 32px; min-width: 32px; height: 32px; font-size: 20px; border-radius: 10px; }
#view[data-route="gastos"] .gn-cat-nuevo { min-height: 0; height: 100%; padding: 8px 10px; border-radius: 16px; flex-direction: row; align-items: center; gap: 8px; }
#view[data-route="gastos"] .gn-cat-nuevo .gn-nom { color: var(--accent); font-size: 14px; }
#view[data-route="gastos"] .gn-cat-nuevo .gn-em { width: 30px; height: 30px; font-size: 22px; flex: none; }

/* carrito compacto, a la derecha y siempre visible; solo su lista se desplaza */
.gn-caja .gc { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100dvh - var(--g-top, 150px) - 12px); min-height: 220px; padding: 10px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.gn-caja .gc-head { flex: none; }
.gn-caja .gc-head h3 { font-size: 20px; }
.gc-head-acc { display: flex; gap: 6px; }
.gc-cerrar { display: none; }
.gn-caja .gc-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; padding-right: 2px; }
.gn-caja .gc-linea { padding: 6px 8px; gap: 6px; grid-template-columns: minmax(0, 1fr) auto auto; border-radius: 12px; }
.gn-caja .gc-monto { font-size: 19px; }
.gn-caja .gc-main b { font-size: 14px; }
.gn-caja .gc-acc .icon-btn { min-width: 40px; min-height: 40px; }
.gn-caja .gc-pie { flex: none; display: grid; gap: 8px; }
.gn-caja .gc-total { padding: 8px 12px; }
.gn-caja .gc-total b { font-size: 28px; }
.gn-caja .gn-fecha { padding: 6px 10px; font-size: 13px; }
.gn-caja #g-guardar { min-height: 56px; font-size: 17px; }
.gn-caja .gc-vacio { padding: 10px 4px; font-size: 14px; }
.gn-caja .gc-vacio svg { flex: none; }
.gc-barra { display: none; }
.gcalc { position: fixed; right: 16px; bottom: 16px; width: min(280px, calc(100vw - 32px)); z-index: 45; grid-row: auto; grid-column: auto; box-shadow: var(--shadow-lg); }

/* celular y pantallas angostas: carrito en una barra fija abajo + panel */
@media (max-width: 899px) {
  .gn.gn-caja { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .gn-caja .gc { display: none; position: fixed; z-index: 58; left: 0; right: 0; top: 0; bottom: 0; max-height: none; border-radius: 0; padding: 12px; }
  .carrito-abierto .gc { display: flex; }
  .gc-cerrar { display: inline-flex; }
  .gc-barra { position: fixed; z-index: 40; left: 8px; right: 8px; bottom: 8px; display: block; }
  .gc-barra[hidden] { display: none; }
  .gc-barra-btn { width: 100%; min-height: 56px; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 8px 14px; border: 0; border-radius: 16px; background: var(--accent-solid); color: #fff; font: inherit; font-weight: 750; box-shadow: var(--shadow-lg); cursor: pointer; }
  .gcb-n { min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: #fff; color: var(--accent-solid); font-weight: 800; }
  .gc-barra-btn b { font-family: var(--font-num); font-size: 24px; text-align: right; color: #ffe2a6; }
  .gcb-ver { font-size: 11px; letter-spacing: .06em; opacity: .9; }
  .gn-visor { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "val acc" "est est"; padding: 4px 10px 4px; border-width: 2px; border-radius: 14px; }
  .gv-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gv-valor { text-align: left; font-size: clamp(30px, 10vw, 44px); }
  .gv-btn { min-width: 44px; min-height: 40px; padding: 0 8px; }
  .gv-estado { font-size: 12px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gn-ultimo { padding: 4px 10px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  #view[data-route="gastos"] .gastos-head { flex-direction: row; align-items: center; padding: 6px 10px; }
  #view[data-route="gastos"] .gastos-head .gastos-acc { flex-wrap: nowrap; }
  #view[data-route="gastos"] .gastos-head .btn-primary { flex: none; padding: 0 12px; }
}
@media (max-width: 640px) {
  .gc-barra { bottom: calc(var(--bnav-h, 58px) + env(safe-area-inset-bottom) + 8px); }
  .gn-caja .gc { bottom: calc(var(--bnav-h, 58px) + env(safe-area-inset-bottom)); }
}

/* ← VOLVER (Gastos oculta el menú lateral: la salida tiene que estar a la vista) */
.gastos-head-izq { display: flex; align-items: center; gap: 14px; min-width: 0; }
.g-volver { min-height: 44px; padding: 0 16px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; flex: none; }
@media (max-width: 640px) { .g-volver { padding: 0 10px; font-size: 13px; } .gastos-head-izq { gap: 8px; } }

/* E8: el menú ⋮ se recortaba (el contenedor de título tiene overflow:hidden) y quedaba bajo el resto de la pantalla */
.gastos-head { overflow: visible; position: relative; z-index: 20; }
.g-mas-menu { z-index: 60; }
/* Botón Volver moderno (mismo diseño en Gastos, Control de Carne y Comandas) */
.g-volver, .cc-volver, .cmd-volver { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px; font-weight: 650; letter-spacing: 0; text-transform: none; white-space: nowrap; flex: none; }
.g-volver .ico, .cc-volver .ico, .cmd-volver .ico { width: 18px; height: 18px; flex: none; }
@media (max-width: 640px) { .g-volver, .cc-volver { min-height: 40px; padding: 0 12px 0 9px; font-size: 14px; } }
/* Causa real de «el historial queda debajo»: .gn / .gc-barra definen display y anulaban el atributo hidden */
.gastos-v [hidden], .gn[hidden], .gc-barra[hidden], .g-historial[hidden] { display: none !important; }

/* T14 (responsive): en celular chico la cabecera de Gastos (Volver + título + ⋮ + Ver historial) no entra en una fila: baja a dos filas en vez de ensanchar la página. */
@media (max-width: 480px) {
  .gastos-head { flex-wrap: wrap; row-gap: 8px; }
  .gastos-head-izq { flex: 1 1 100%; min-width: 0; }
  .gastos-acc { flex: 1 1 100%; display: flex; justify-content: flex-end; gap: 8px; min-width: 0; }
  .gastos-acc .btn-primary { min-width: 0; }
}
/* T14 (responsive): el aro decorativo de la cabecera (::after) sobresalía por la derecha (la cabecera de Gastos es overflow: visible por el menú ⋮) y ensanchaba toda la página en celular. */
.gastos-head::after { display: none; }

/* Filtro por naturaleza sobre la grilla de tipos de gasto (Todos · Compra de mercadería · Gasto operativo · Inversión): solo muestra u oculta botones. */
.gn-filtros { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 4px 0 2px; }
.gn-filtros .sk-chip { min-height: 40px; }

/* GASTOS · sin la barra superior general: el título, el ☰ y las acciones viven en la cabecera propia de Gastos (la Guía/IA está en el menú ⋮).
   Solo el aviso de sincronización de la barra se conserva, y únicamente cuando hay algo que informar. Las demás pantallas no cambian. */
html[data-route="gastos"] .topbar { display: block; position: static; padding: 0; min-height: 0; background: none; box-shadow: none; backdrop-filter: none; border: 0; }
html[data-route="gastos"] .topbar::after { display: none; }
html[data-route="gastos"] .topbar .crumb, html[data-route="gastos"] .topbar .topbar-actions, html[data-route="gastos"] .topbar .ia-top-btn, html[data-route="gastos"] #menu-btn, html[data-route="gastos"] .volver-top { display: none !important; }
html[data-route="gastos"] .topbar .net-badge:not([hidden]) { display: block; margin: 8px 14px 0; }
.g-hamb { min-height: 44px; min-width: 48px; padding: 0 12px; flex: none; display: inline-grid; place-items: center; }
.g-hamb .ico { width: 24px; height: 24px; }
/* la grilla de tipos nunca tiene desplazamiento propio: si no entra en celular, se desplaza la página (con espacio para la barra del carrito) */
#view[data-route="gastos"] .gn-cats.con-scroll { overflow: visible; padding-right: 0; }
@media (max-width: 899px) { #view[data-route="gastos"] .gastos-v.con-carrito { padding-bottom: 84px; } }
#view[data-route="gastos"] .gn-cats .gn-vacio-nat { grid-column: 1 / -1; margin: 2px 0 4px; }

/* ===== GASTOS · botones compactos (solo el nombre) y calculadora acomodada en celular ===== */
#view[data-route="gastos"] .gn-cat { display: flex; align-items: center; justify-content: flex-start; padding: 6px 34px 6px 12px; text-align: left; }
#view[data-route="gastos"] .gn-cat .gn-nom { align-self: center; font-size: 15px; font-weight: 700; line-height: 1.15; }
#view[data-route="gastos"] .gn-cats[data-alto="grande"] .gn-nom { font-size: 16px; }
#view[data-route="gastos"] .gn-cats[data-alto="chico"] .gn-nom { font-size: 13.5px; }
#view[data-route="gastos"] .gn-cat-menu { top: 50%; transform: translateY(-50%); right: 4px; width: 28px; min-width: 28px; height: 28px; font-size: 18px; }
#view[data-route="gastos"] .gn-cat-nuevo { padding: 6px 10px; }
#view[data-route="gastos"] .gn-cat-nuevo .gn-em { width: 24px; height: 24px; font-size: 18px; }
#view[data-route="gastos"] .gn-cat-nuevo .gn-nom { font-size: 13px; }
.gcalc-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #c9a3aa; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gcalc-x { min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: #4a2a30; color: #fff; font: 700 13px var(--font-ui, inherit); cursor: pointer; }
.gastos-v.calc-visible { padding-bottom: calc(var(--calc-h, 0px) + 24px); }
@media (max-width: 899px) {
  /* centrada en la zona inferior, sobre la barra de abajo y sobre la barra del carrito si la hay; nunca fuera de la pantalla */
  .gcalc { left: 50%; right: auto; transform: translateX(-50%); width: min(340px, calc(100vw - 16px)); max-height: calc(100dvh - 120px); overflow-y: auto; bottom: calc(var(--bnav-h, 58px) + env(safe-area-inset-bottom) + 8px); z-index: 57; }
  .gastos-v.con-carrito ~ .gcalc, .gastos-v.con-carrito .gcalc { bottom: calc(var(--bnav-h, 58px) + env(safe-area-inset-bottom) + 76px); }
  .gcalc-pant { min-height: 52px; padding: 6px 12px; }
  .gcalc-pant output { font-size: 26px; }
  .gcalc-teclas { grid-auto-rows: 42px; gap: 5px; }
  .gcalc-t { min-height: 42px; font-size: 18px; }
  .gastos-v.calc-visible.con-carrito { padding-bottom: calc(var(--calc-h, 0px) + 96px); }
}

/* ===== GASTOS · teclado numérico nativo en celular y flecha «←» (tanda 20) ===== */
.gn-visor { position: relative; }
.gv-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; font-size: 16px; pointer-events: none; z-index: 2; }   /* 16 px: iOS no hace zoom al enfocar */
@media (pointer: coarse) { .gv-input { pointer-events: auto; } .gv-acc { position: relative; z-index: 3; } }   /* los botones ⌫ / Limpiar siguen tocándose */
.g-atras { display: none; min-height: 44px; min-width: 48px; padding: 0 12px; flex: none; place-items: center; }
.g-atras .ico { width: 24px; height: 24px; }
@media (max-width: 900px) {
  .g-hamb { display: none !important; }
  .g-atras { display: inline-grid; }
}

/* ===== GASTOS · «Mostrar calculadora» ahora es un teclado numérico (tanda 21) ===== */
.gkeys { gap: 8px; padding: 10px 12px 12px; }
.gk-acc { display: inline-flex; gap: 6px; }
.gk-teclas { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 52px; gap: 8px; flex: none; }
.gkeys .gcalc-t { min-height: 52px; font-size: 22px; border-radius: 14px; }
.gkeys .gcalc-cab { margin-bottom: 2px; }
@media (min-width: 900px) { .gcalc.gkeys { width: 260px; } }
@media (max-width: 899px) { .gcalc.gkeys { width: min(300px, calc(100vw - 16px)); } .gk-teclas { grid-auto-rows: 50px; gap: 7px; } .gkeys .gcalc-t { min-height: 50px; } }

/* ===== Zona de toque ampliada (tanda 24): el ⋮ de las categorías compactas mide 28×28 px; el área que responde al toque pasa a 36×36 sin cambiar su aspecto ===== */
.gn-cat-menu::after { content: ""; position: absolute; inset: -8px; }   /* v258 (A-03): zona táctil de 44 px aunque el botón se vea de 28 px */
/* v258: elección del medio de pago al confirmar gastos */
.gcf-pago { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px 10px; margin: 10px 0 0; display: grid; gap: 6px; }
.gcf-pago legend { font-weight: 700; padding: 0 6px; }
.gcf-op { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; min-height: 44px; }
.gcf-op input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.gcf-op b, .gcf-op small { display: block; }
.gcf-op small { color: var(--text-muted); font-weight: 500; }
.gcf-op:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.gcf-aviso { color: var(--danger); font-weight: 600; margin: 4px 0 0; }