:root {
  --navy: #0A1E3F;
  --header-bg: #0A0F1D;
  --bg: #0d1117;
  --card-bg: rgba(255,255,255,.045);
  --card-border: rgba(255,255,255,.09);
  --red: #e03134;
  --green: #10B981;
  --text: #F4F4F5;
  --text-dim: #9CA3AF;
}
html { background: var(--bg); }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text); -webkit-tap-highlight-color: transparent; }

.safe-top { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-x { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

a, button, input, select, textarea { color-scheme: dark; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }

.card {
  background: var(--card-bg);
  border-radius: 1rem;
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  color: var(--text);
}

.kpi-card {
  display: block;
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  text-decoration: none;
  color: var(--text);
  backdrop-filter: blur(10px);
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.18);
}
.kpi-label { font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-dim); }
.kpi-value { font-size: clamp(1.05rem, 5.2vw, 1.5rem); font-weight: 800; color: var(--text); margin-top: .25rem; }
.kpi-value.expense { color: var(--red); }
.kpi-value.income { color: var(--green); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.77rem 1rem; border-radius:.65rem; font-weight:600; font-size:.875rem; line-height:1; -webkit-appearance:none; appearance:none; transition:filter .1s, background .15s, border-color .15s, transform .12s ease; cursor:pointer; border:none; }
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--red); color:#fff; }
.btn-primary:hover { filter:brightness(1.08); }
.btn-secondary { background: var(--navy); color:#fff; }
.btn-secondary:hover { filter:brightness(1.25); }
.btn-outline { background: transparent; border:1px solid rgba(255,255,255,.18); color: var(--text); padding: calc(.77rem - 1px) 1rem; }
.btn-outline:hover { background: rgba(255,255,255,.08); }
.btn-sm { padding:.35rem .7rem; font-size:.8rem; }

.badge { display:inline-block; padding:.15rem .55rem; border-radius:9999px; font-size:.72rem; font-weight:700; }
.badge-gasto { background: rgba(224,49,52,.15); color: #ff6668; border: 1px solid rgba(224,49,52,.3); }
.badge-ingreso { background: rgba(16,185,129,.15); color: #34d399; border: 1px solid rgba(16,185,129,.3); }

table.data-table { width:100%; border-collapse:collapse; font-size:.875rem; color: var(--text); }
table.data-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color: var(--text-dim); padding:.6rem .75rem; border-bottom:1px solid var(--card-border); }
table.data-table td { padding:.65rem .75rem; border-bottom:1px solid rgba(255,255,255,.06); }
table.data-table tr:hover td { background: rgba(255,255,255,.04); }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0); display:none; align-items:center; justify-content:center; z-index:50; padding:1rem; backdrop-filter: none; pointer-events:none; transition: background .22s ease, backdrop-filter .22s ease; }
.modal-overlay.open { display:flex; background:rgba(0,0,0,.65); backdrop-filter: blur(2px); pointer-events:auto; }
.modal-box { background: linear-gradient(180deg, rgba(10,30,63,.55) 0%, #121319 42%, #121319 100%); border:1px solid var(--card-border); border-radius:1rem; max-width:480px; width:100%; max-height:90vh; overflow-y:auto; overflow-x:hidden; padding:1.5rem; box-shadow: 0 12px 48px rgba(0,0,0,.6); color: var(--text); position:relative; z-index:0; }
.modal-box::before { content:''; position:absolute; z-index:-1; top:-70px; left:50%; transform:translateX(-50%); width:150%; max-width:640px; height:220px; background: radial-gradient(ellipse at center, rgba(224,49,52,.22), rgba(16,185,129,.08) 55%, transparent 75%); filter: blur(8px); pointer-events:none; }

.chip { display:inline-flex; align-items:center; padding:.3rem .7rem; border-radius:9999px; font-size:.8rem; font-weight:600; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--text); cursor:pointer; }
.chip.active, .chip-active { background: var(--red); color:#fff; border-color: var(--red); }

.field-label { display:block; font-size:.8rem; font-weight:600; color: var(--text-dim); margin-bottom:.3rem; }
.field-input { width:100%; max-width:100%; min-width:0; box-sizing:border-box; min-height:3rem; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--text); border-radius:.6rem; padding:.55rem .7rem; font-size:16px; }
.field-input:focus { outline:none; border-color: var(--red); box-shadow:0 0 0 3px rgba(224,49,52,.18); }
.field-input option { background:#121319; color: var(--text); }

/* ==== Native select normalization: consistent box sizing across iOS/Android/desktop (added) ==== */
select.field-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1rem;
  padding-right: 2.3rem;
}
select.field-input::-ms-expand { display: none; }
/* Prevent iOS gray tap flash on all interactive elements app-wide */
a, button, .btn, .chip, .card, .kpi-card, .tx-row, select, input, textarea, .tx-row-actions button {
  -webkit-tap-highlight-color: transparent;
}

/* ==== Nueva transaccion modal: field consistency, date-overflow safety, amount hero style, btn press animation (added) ==== */
input[type="date"].field-input { min-width:0; max-width:100%; }
.field-input[type="date"]::-webkit-datetime-edit { max-width:100%; }
.modal-box form > div, .modal-box .grid > div { min-width:0; }
.amount-input-wrap { display:flex; align-items:center; gap:.5rem; box-sizing:border-box; }
.amount-currency { font-size:1.7rem; font-weight:800; color: var(--text-dim); line-height:1; flex-shrink:0; }
.amount-input { border:none; background:transparent; padding:0; margin:0; color:var(--text); font-size:2rem; font-weight:800; width:100%; min-width:0; box-shadow:none; -webkit-appearance:none; }
.amount-input:focus { outline:none; box-shadow:none; }
.amount-input-wrap:focus-within { border-color: var(--red); box-shadow:0 0 0 3px rgba(224,49,52,.18); }
.btn-lg { padding:.8rem 1.5rem; font-size:1rem; border-radius:.75rem; }

/* ================= Mobile native-app polish (added) ================= */

/* Mobile bottom nav: icon sizing, tap targets, active indicator */
.bottom-nav-link { position: relative; min-height: 46px; min-width: 46px; justify-content: center; -webkit-tap-highlight-color: transparent; transition: color .12s ease; }
.bottom-nav-link svg { width: 21px; height: 21px; }
.bottom-nav-link.active::before { content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:16px; height:3px; border-radius:9999px; background: var(--red); }
.bottom-nav-link:active { opacity:.7; }

/* Raised center FAB embedded in the bottom tab bar (Instagram/native-app pattern) */
.fab-add-inline { position: relative; width: 56px; height: 56px; min-width: 56px; border-radius: 50%; background: linear-gradient(150deg, #ff5254, var(--red)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(224,49,52,.5), 0 2px 8px rgba(0,0,0,.45); border: 3px solid var(--bg); z-index: 5; cursor: pointer; margin: 0 2px -28px; transform: translateY(-26%); transition: transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; flex-shrink: 0; }
.fab-add-inline svg { width: 25px; height: 25px; }
.fab-add-inline:active { transform: translateY(-26%) scale(.9); box-shadow: 0 3px 10px rgba(224,49,52,.45); }
@media (min-width: 768px) { .fab-add-inline { display: none; } }

/* Mobile bottom-sheet modal (replaces centered desktop modal on small screens) */
@media (max-width: 767px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-overlay .modal-box { max-width: 100%; width: 100%; max-height: 88vh; border-radius: 1.25rem 1.25rem 0 0; padding: .6rem 1.25rem calc(env(safe-area-inset-bottom) + 1.25rem); transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,0,1); box-shadow: 0 -8px 32px rgba(0,0,0,.55); }
  .modal-overlay.open .modal-box { transform: translateY(0); }
  main.max-w-6xl { padding-left: calc(1rem + env(safe-area-inset-left)); padding-right: calc(1rem + env(safe-area-inset-right)); }
}
.sheet-handle { width: 40px; height: 5px; border-radius: 9999px; background: rgba(255,255,255,.25); margin: 0 auto .75rem; display: none; }
@media (max-width: 767px) { .sheet-handle { display: block; } }

/* Segmented control (tipo gasto/ingreso toggle) */
.seg-control { box-sizing:border-box; min-height:3rem; display:flex; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:.7rem; padding:3px; gap:3px; }
.seg-btn { display:flex; align-items:center; justify-content:center; flex:1; text-align:center; padding:.5rem .5rem; border-radius:.5rem; font-size:.85rem; font-weight:700; color: var(--text-dim); cursor:pointer; transition: background .15s, color .15s; user-select:none; -webkit-tap-highlight-color: transparent; }
.seg-btn.active { background: var(--red); color:#fff; }
.seg-btn[data-tipo-value="ingreso"].active { background: var(--green); }
.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; }

/* KPI values: fluid sizing so large amounts fit their card */
.kpi-card { min-width: 0; }
.kpi-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Tactile press feedback for native-app feel */
.btn:active, .chip:active { transform: scale(.96); }
.card:active, .kpi-card:active { transform: scale(.985); }
@media (max-width: 767px) { .kpi-card, .card { transition: transform .1s ease, box-shadow .12s ease, border-color .12s ease; } }

/* ==================== Ambient brand-color glow (added) ==================== */
.ambient-glow { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambient-glow span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .32; }
.ambient-glow span.glow-red { width: 480px; height: 480px; top: -160px; left: -160px; background: radial-gradient(circle, var(--red), transparent 70%); }
.ambient-glow span.glow-green { width: 520px; height: 520px; bottom: -200px; right: -180px; background: radial-gradient(circle, var(--green), transparent 70%); opacity: .22; }
.ambient-glow span.glow-navy { width: 420px; height: 420px; top: 30vh; right: -220px; background: radial-gradient(circle, #2b4bdb, transparent 70%); opacity: .18; }
header, main, .bottom-nav-link, nav.md\:hidden { position: relative; z-index: 1; }
@media (max-width: 767px) { .ambient-glow span { filter: blur(60px); } }

/* ==================== Hamburger nav drawer + fixed FAB (added) ==================== */
.hamburger-btn { display:flex; align-items:center; justify-content:center; width:40px; height:40px; min-width:40px; background:transparent; border:none; color:var(--text); cursor:pointer; -webkit-tap-highlight-color:transparent; border-radius:.5rem; transition: background .15s; }
.hamburger-btn:active { background: rgba(255,255,255,.08); }
.hamburger-btn svg { width:22px; height:22px; }

.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:60; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.drawer-overlay.open { opacity:1; pointer-events:auto; }

.drawer-panel { position:fixed; top:0; bottom:0; right:0; width:min(80vw,300px); background:var(--header-bg); z-index:70; transform:translateX(100%); transition:transform .28s cubic-bezier(.32,.72,0,1); box-shadow:-8px 0 32px rgba(0,0,0,.5); display:flex; flex-direction:column; padding-top:calc(1rem + env(safe-area-inset-top)); padding-right:calc(1rem + env(safe-area-inset-right)); padding-bottom:calc(1rem + env(safe-area-inset-bottom)); padding-left:1rem; overflow-y:auto; }
.drawer-panel.open { transform:translateX(0); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:.85rem; margin-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.08); }
.drawer-close-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:var(--text-dim); font-size:1.5rem; line-height:1; cursor:pointer; border-radius:.5rem; }
.drawer-close-btn:active { background:rgba(255,255,255,.08); }
.drawer-nav { display:flex; flex-direction:column; gap:.25rem; flex:1; padding-top:.35rem; }
.drawer-link { display:flex; align-items:center; gap:.85rem; padding:.85rem .8rem; border-radius:.7rem; color:var(--text-dim); font-weight:600; font-size:.95rem; text-decoration:none; transition:background .15s, color .15s; -webkit-tap-highlight-color:transparent; }
.drawer-link:active { background:rgba(255,255,255,.06); }
.drawer-link.active { background:rgba(224,49,52,.16); color:var(--text); }
.drawer-link.active .drawer-link-icon { color:var(--red); }
.drawer-link-icon { display:flex; width:21px; height:21px; flex-shrink:0; color:var(--text-dim); }
.drawer-link-icon svg { width:100%; height:100%; }
.drawer-logout { margin-top:.5rem; padding-top:.95rem; border-top:1px solid rgba(255,255,255,.08); color:#ff8688; }

.fab-fixed { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 18px); transform:translateX(-50%); width:74px; height:74px; border-radius:50%; background:linear-gradient(150deg,#ff5254,var(--red)); color:#fff; display:flex; align-items:center; justify-content:center; border:3px solid var(--bg); padding:0; box-sizing:border-box; line-height:0; box-shadow:0 8px 26px rgba(224,49,52,.55), 0 3px 12px rgba(0,0,0,.5); z-index:40; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease; opacity:1; }
.fab-fixed svg { width:30px; height:30px; display:block; }
.fab-fixed:active { transform:translateX(-50%) scale(.92); }
.fab-fixed.js-hide-for-modal, body:has(.modal-overlay.open) .fab-fixed, body:has(.modal-overlay.open) .fab-add-inline { opacity:0 !important; pointer-events:none !important; }
@media (min-width:768px) { .fab-fixed, .hamburger-btn, .drawer-overlay, .drawer-panel { display:none !important; } }
body.drawer-locked { overflow:hidden; }

/* ==================== Transacciones history redesign (added) ==================== */
.tx-month-header { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); padding:1.1rem 0 .4rem; }
.tx-month-header:first-child { padding-top:.1rem; }
.tx-day-header { display:flex; align-items:baseline; justify-content:space-between; padding:.55rem .1rem; }
.tx-day-header-label { font-size:.82rem; font-weight:700; color:var(--text); }
.tx-day-header-sub { font-size:.78rem; font-weight:600; }
.tx-day-header-sub.neg { color:#ff8688; }
.tx-day-header-sub.pos { color:#5fd9a4; }
.tx-group { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.25rem; }
.tx-row { display:flex; align-items:center; gap:.75rem; padding:.75rem .85rem; border-radius:.85rem; background:var(--card-bg); border:1px solid var(--card-border); transition:background .12s ease, transform .1s ease; }
.tx-row:active { transform:scale(.99); background:rgba(255,255,255,.06); }
.tx-row-icon { flex-shrink:0; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; }
.tx-row-icon.expense { background:rgba(224,49,52,.15); color:#ff8688; }
.tx-row-icon.income { background:rgba(16,185,129,.16); color:#5fd9a4; }
.tx-row-main { flex:1; min-width:0; }
.tx-row-top { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.tx-row-cat { font-weight:600; font-size:.95rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tx-row-chip { font-size:.68rem; font-weight:600; color:var(--text-dim); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:9999px; padding:.1rem .5rem; white-space:nowrap; }
.tx-row-note { font-size:.75rem; color:var(--text-dim); margin-top:.15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.tx-row-amount-wrap { flex-shrink:0; text-align:right; }
.tx-row-amount { font-size:1.05rem; font-weight:700; white-space:nowrap; }
.tx-row-amount.expense { color:#ff5b5e; }
.tx-row-amount.income { color:#1fd695; }
.tx-row-actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.2rem; }
.tx-row-actions button { font-size:.68rem; font-weight:600; color:var(--text-dim); background:none; border:none; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tx-row-actions button.tx-del { color:#e03134; }
.tx-row-actions button:hover, .tx-row-actions button:active { text-decoration:underline; }
.tx-empty-state { text-align:center; color:var(--text-dim); padding:3rem 1rem; font-size:.9rem; }
@media (min-width:768px) { .tx-row { padding:.9rem 1.1rem; } }

/* ==== Round 4 mobile polish additions ==== */

/* 1b: prevent horizontal scroll caused by fixed off-canvas drawer (translateX overflow) */
html, body { overflow-x: hidden; max-width: 100%; }
.app-shell, main { max-width: 100%; }

/* 3b: date field - force identical width/box behavior to siblings, iOS Safari robustness */
input[type="date"].field-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 0%;
  display: block;
  box-sizing: border-box;
}
.field-input[type="date"]::-webkit-date-and-time-value { text-align: left; width: 100%; }
.modal-box form .mb-3, .modal-box form .mb-4 { width: 100%; box-sizing: border-box; }

/* 2a: modal top action bar (Cancelar / Titulo / Guardar) replacing bottom button row */
.modal-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 0 -1.5rem 1rem -1.5rem;
  padding: .85rem 1.25rem;
  background: #121319;
  border-bottom: 1px solid var(--card-border);
}
.modal-topbar-btn {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .75rem;
  border-radius: .6rem;
  font-size: .95rem;
  font-weight: 600;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.modal-topbar-title {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-topbar-cancel { color: var(--text-dim); }
.modal-topbar-save { color: var(--red); font-weight: 800; }
.modal-topbar-save:active, .modal-topbar-cancel:active { opacity: .6; }
.modal-box-sheet { padding-top: 1.1rem; }

/* 1a: month nav row on Transacciones (mirrors Dashboard's pattern) */
.tx-month-nav { }

/* 2b/2c: tap-row pattern for Categorias (and reusable elsewhere) */
.list-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .9rem;
  border-radius: .85rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  transition: background .12s ease, transform .1s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.list-row:active { transform: scale(.99); background: rgba(255,255,255,.06); }
.list-row + .list-row { margin-top: .5rem; }
.list-row-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-weight: 700; color: #fff;
}
.list-row-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.list-row-main { flex: 1 1 auto; min-width: 0; }
.list-row-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--text); min-width: 0; }
.list-row-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cat-rows .list-row-title-text { overflow: visible; text-overflow: clip; white-space: normal; word-break: break-word; }
.cat-rows .list-row-title { align-items: flex-start; }
.list-row-sub { font-size: .8rem; color: var(--text-dim); margin-top: .1rem; }
.list-row-end { flex-shrink: 0; text-align: right; }
.list-row-chevron { color: var(--text-dim); flex-shrink: 0; }
.list-row.is-inactive { opacity: .5; }
.badge-inactive { background: rgba(255,255,255,.08); color: var(--text-dim); font-size: .68rem; padding: .1rem .45rem; border-radius: .4rem; margin-left: 0; flex-shrink: 0; white-space: nowrap; }
.badge-active { background: rgba(16,185,129,.12); color: var(--green); font-size: .68rem; padding: .1rem .45rem; border-radius: .4rem; margin-left: 0; flex-shrink: 0; white-space: nowrap; font-weight: 600; }

/* action sheet (bottom sheet with a vertical list of actions), built on existing .modal-overlay/.modal-box */
.action-sheet-box { max-width: 400px; padding: .75rem; }
.action-sheet-title { padding: .6rem .5rem; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--card-border); margin-bottom: .4rem; }
.action-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  padding: .2rem;
}
/* Transacciones sheet has only 2 actions (Editar/Eliminar); override the 3-col grid to 2 even squares */
#txActionSheet .action-sheet-grid { grid-template-columns: repeat(2, 1fr); }
.action-sheet-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  aspect-ratio: 1;
  width: 100%; text-align: center;
  padding: .5rem .4rem; border-radius: .75rem;
  background: rgba(255,255,255,.04); border: none; color: var(--text);
  font-size: .76rem; font-weight: 500; cursor: pointer;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.action-sheet-item svg { flex-shrink: 0; }
.action-sheet-item:active { background: rgba(255,255,255,.1); }
.action-sheet-item.danger { color: #ff5b5e; }
.action-sheet-item .as-icon { width: 20px; text-align: center; flex-shrink: 0; }

/* toggle switch for categorias activo/inactivo */
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .toggle-track {
  position: absolute; inset: 0; background: rgba(255,255,255,.15);
  border-radius: 999px; transition: background .15s ease; cursor: pointer;
}
.toggle-switch .toggle-track::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s ease;
}
.toggle-switch input:checked + .toggle-track { background: var(--red); }
.toggle-switch input:checked + .toggle-track::before { transform: translateX(18px); }

/* 2c: proyecto action row - wrap on narrow screens, consistent spacing */
.proy-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.proy-actions .btn { flex: 0 0 auto; }

/* Header brand link (round 5) */
.header-brand { text-decoration:none; color:inherit; }
.header-wordmark { font-size:15px; font-weight:600; letter-spacing:.01em; color:#F4F4F5; opacity:.92; }
.header-divider { display:inline-block; width:1px; height:18px; margin:0 9px; background:rgba(255,255,255,.15); vertical-align:middle; }

/* Dashboard hero balance card (round 5) */
.balance-hero {
  display: block;
  padding: 1.4rem 1.5rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(10,30,63,.65), rgba(224,49,52,.14));
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  margin-bottom: 1rem;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
}
.balance-hero-link { display: block; text-decoration: none; color: inherit; }
.balance-hero-eye { position: absolute; top: .9rem; right: 1rem; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: #9CA3AF; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s ease, color .15s ease; z-index: 2; }
.balance-hero-eye:hover { background: rgba(255,255,255,.14); color: #F4F4F5; }
.balance-hero-eye:active { transform: scale(.92); }
.balance-hero-eye svg { width: 16px; height: 16px; display: block; }
.balance-hero:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.balance-hero-label { font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-dim); }
.balance-hero-value { font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 800; margin-top: .35rem; letter-spacing: -0.01em; color: var(--text); }
.balance-hero-sub { font-size: .75rem; color: var(--text-dim); margin-top: .4rem; }


/* Round 7: Proyectos finalizados collapsible section */
.proy-archived-details, .cfg-collapsible { margin-top: 1rem; }
/* Fix (2026-08-12): when .cfg-collapsible sits inside a SEPARATE .card wrapper div (Configuracion),
   the wrapper's border prevents the child's margin-top from collapsing, trapping 1rem of dead
   space at the top of the card only (bottom stays 0) -- this was the real cause of the
   long-reported vertical misalignment. The .card wrapper already spaces itself via .mb-4,
   so zero out the redundant margin only when .cfg-collapsible is a DIRECT CHILD of .card.
   (Categorias/Proyectos put .card and .cfg-collapsible on the SAME element, so this more
   specific child-combinator selector does not affect them.) */
.card > .cfg-collapsible { margin-top: 0; }
.proy-archived-details > summary, .cfg-collapsible > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 1.25rem 1.25rem;
  font-weight: 700;
  color: #F4F4F5;
  gap: .5rem;
  line-height: 1;
}
.proy-archived-details > summary::-webkit-details-marker, .cfg-collapsible > summary::-webkit-details-marker { display: none; }
.proy-archived-details > summary .chevron-icon, .cfg-collapsible > summary .chevron-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  transition: transform .15s ease;
  margin-left: auto;
  flex-shrink: 0;
}
.proy-archived-details[open] > summary .chevron-icon, .cfg-collapsible[open] > summary .chevron-icon { transform: rotate(180deg); }
.proy-archived-details[open] > summary, .cfg-collapsible[open] > summary { border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 1rem; }
.proy-archived-details .proy-archived-body, .cfg-collapsible .cfg-collapsible-body { padding: 0 1.25rem 1.25rem; }


/* Round 8: cfg-collapsible summary icon + label polish (Configuración) */
.cfg-collapsible summary .cfg-summary-title { display: flex; align-items: center; gap: .65rem; min-width: 0; line-height: 1; }
.cfg-collapsible summary .cfg-summary-icon { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; display: flex; align-items: center; justify-content: center; color: #9CA3AF; }
.cfg-collapsible summary .cfg-summary-icon svg { width: 100%; height: 100%; display: block; }

/* Round 8: empty-state with icon (Proyectos activos / Categorías por tipo) */
.tx-empty-state-icon { display: flex; align-items: center; justify-content: center; margin: 0 auto .5rem; width: 2rem; height: 2rem; color: #6B7280; }
.tx-empty-state-icon svg { width: 100%; height: 100%; display: block; }


/* Round 9 (2026-08-12): Categorias tab (mobile) - collapsed-state preview strip + spacing polish.
   .cfg-summary-row wraps the existing dot/title/badge/chevron as one full-width flex line;
   .cat-preview-strip is a second full-width line (wraps via the flex-wrap:wrap added above to
   .cfg-collapsible > summary) showing a peek of the top categories so the collapsed state isn't
   just an empty bar. Configuracion/Proyectos summaries are single-line and unaffected by the
   added flex-wrap since they never have enough content to wrap. */
.cfg-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
}
.cat-preview-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  width: 100%;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.cat-preview-chip {
  font-size: .72rem;
  font-weight: 500;
  padding: .25rem .6rem;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  color: #9CA3AF;
  cursor: default;
}
.cat-preview-more {
  font-size: .72rem;
  font-weight: 600;
  color: #6B7280;
  padding: .25rem .3rem;
}
.cat-preview-empty {
  font-size: .78rem;
  color: #6B7280;
  font-style: italic;
  padding: .1rem 0;
}


/* Category reorder (move up/down) controls */
.cat-move-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.cat-move-btn {
  width: 26px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .4rem;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.04);
  color: var(--text-dim, #9CA3AF);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.cat-move-btn:hover { background: rgba(255,255,255,.09); color: var(--text); }
.cat-move-btn:active { transform: scale(.94); }
.cat-move-btn[disabled] {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

/* Category reorder: brief highlight so a move feels responsive without a full reload/jump */
.cat-row-flash {
  transform: scale(1.015);
  background: rgba(255,255,255,.07);
}