/* ── styles.css ─────────────────────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --bg:#0f172a; --surface:#1e293b; --surface2:#273347;
  --accent:#3b82f6; --green:#22c55e; --red:#ef4444; --orange:#f97316;
  --text:#f1f5f9; --muted:#94a3b8; --border:#334155; --radius:16px;
}
.light {
  --bg:#f1f5f9; --surface:#ffffff; --surface2:#e2e8f0;
  --text:#0f172a; --muted:#64748b; --border:#cbd5e1;
}
body {
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  min-height:100vh; transition:background .3s,color .3s;
}

/* ── Layout responsive ── */
.app-container { width:100%; }
.content-area { padding-bottom:80px; padding-top:12px; }

@media (min-width:768px) {
  .nav { position:fixed; left:0; top:0; bottom:0; width:220px; flex-direction:column; border-top:none; border-right:1px solid var(--border); padding:20px 0; justify-content:flex-start; gap:4px; z-index:10; background:var(--surface); overflow-y:auto; }
  .nav button { flex-direction:row; justify-content:flex-start; padding:12px 20px; gap:12px; font-size:14px; border-radius:12px; margin:0 8px; width:calc(100% - 16px); }
  .nav button svg { width:20px; height:20px; flex-shrink:0; }
  .main-content { margin-left:220px; min-height:100vh; }
  .header { padding:24px 32px 20px; }
  .content-area { padding:16px 32px 40px; }
  .fab { bottom:32px; right:32px; }
  .tablet-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .tablet-grid .card { margin-bottom:0; }
  .page { padding:0; }
  .modal { max-width:500px; margin:0 auto; border-radius:24px; margin-bottom:40px; }
  .modal-overlay { align-items:center; }
  .toast { bottom:40px; }
}

@media (min-width:1280px) {
  .nav { width:260px; }
  .main-content { margin-left:260px; }
  .tablet-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .content-area { padding:24px 48px 40px; }
  .summary-grid { gap:16px; }
  .summary-item { padding:20px; }
  .summary-item .value { font-size:22px; }
}

/* ── Header ── */
.header { background:var(--surface); padding:20px 16px 16px; position:sticky; top:0; z-index:9; border-bottom:1px solid var(--border); }
.header h1 { font-size:20px; font-weight:700; }
.month-nav { display:flex; align-items:center; gap:12px; margin-top:10px; }
.month-nav button { background:var(--surface2); border:none; color:var(--text); width:32px; height:32px; border-radius:8px; font-size:16px; cursor:pointer; }

/* ── Nav ── */
.nav { position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--border); display:flex; z-index:10; overflow-x:auto; }
.nav button { flex:1; min-width:56px; padding:10px 0; background:none; border:none; color:var(--muted); font-size:9px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; transition:color .2s; }
.nav button.active { color:var(--accent); }
.nav button svg { width:20px; height:20px; }

/* ── Pages ── */
.page { display:none; padding:0px 16px 16px 16px; }
.page.active { display:block; animation: fadeIn 0.40s ease; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
} 

/* ── Cards ── */
.card { background:var(--surface); border-radius:var(--radius); padding:16px; margin-bottom:12px; }
.card-title { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }

/* ── Summary ── */
.summary-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:12px; }
.summary-item { background:var(--surface); border-radius:var(--radius); padding:14px 10px; text-align:center; }
.summary-item .label { font-size:11px; color:var(--muted); margin-bottom:4px; }
.summary-item .value { font-size:17px; font-weight:700; }
.value.green { color:var(--green); }
.value.red { color:var(--red); }
.value.blue { color:var(--accent); }

/* ── Donut ── */
.donut-wrap { display:flex; flex-direction:column; align-items:center; padding:10px 0; }
.donut-container { position:relative; display:flex; align-items:center; justify-content:center; width:180px; height:180px; }
.donut-container svg { width:180px; height:180px; }
.donut-center { position:absolute; display:flex; flex-direction:column; align-items:center; }
.donut-pct { font-size:22px; font-weight:700; }
.donut-label { font-size:11px; color:var(--muted); margin-top:2px; }
.legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; justify-content:center; }
.legend-item { display:flex; align-items:center; gap:5px; font-size:12px; }
.legend-dot { width:10px; height:10px; border-radius:50%; }

/* ── Donut animado ── */
@keyframes donutDraw {
  from { stroke-dashoffset: var(--circ); }
  to   { stroke-dashoffset: var(--final-offset); }
}
.donut-arc {
  animation: donutDraw 1s ease forwards;
  stroke-dashoffset: var(--circ);
}

/* ── Bars ── */
.rule-bar { margin-bottom:14px; }
.rule-bar .rule-header { display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; }
.rule-bar .rule-header .pct { color:var(--muted); font-size:12px; }
.bar-bg { background:var(--surface2); border-radius:99px; height:10px; overflow:hidden; }
.bar-fill { height:100%; border-radius:99px; transition:width .4s; }
.rule-bar .amounts { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:4px; }

/* ── Items ── */
.item { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); }
.item:last-child { border-bottom:none; }
.item-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.item-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.item-name { font-size:14px; font-weight:500; }
.item-sub { font-size:12px; color:var(--muted); }
.item-amount { font-size:15px; font-weight:600; white-space:nowrap; }
.item-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.btn-del  { background:none; border:none; color:var(--red);    font-size:18px; cursor:pointer; padding:4px; }
.btn-edit { background:none; border:none; color:var(--accent); font-size:15px; cursor:pointer; padding:4px; opacity:.8; transition:opacity .15s; }
.btn-edit:hover { opacity:1; }

/* ★ Tags / Etiquetas */
.item-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.tag { background:rgba(59,130,246,.15); color:var(--accent); border-radius:99px; padding:2px 8px; font-size:11px; }

/* ── FAB ── */
.fab { position:fixed; bottom:90px; right:20px; width:56px; height:56px; background:var(--accent); border:none; border-radius:50%; color:#fff; font-size:28px; cursor:pointer; box-shadow:0 4px 20px rgba(59,130,246,.4); z-index:9; display:flex; align-items:center; justify-content:center; }

/* ── Modal ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:20; align-items:flex-end; }
.modal-overlay.open { display:flex; }
.modal { background:var(--surface); border-radius:24px 24px 0 0; padding:24px 16px 40px; width:100%; max-height:90vh; overflow-y:auto; }
.modal h3 { font-size:17px; font-weight:700; margin-bottom:16px; }
.form-group { margin-bottom:14px; }
.form-group label { font-size:12px; color:var(--muted); display:block; margin-bottom:6px; }
.form-group input, .form-group select { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:12px; color:var(--text); font-size:16px; outline:none; }
.form-group input:focus, .form-group select:focus { border-color:var(--accent); }
.btn-primary { width:100%; background:var(--accent); border:none; color:#fff; padding:14px; border-radius:12px; font-size:16px; font-weight:600; cursor:pointer; margin-top:4px; }
.btn-secondary { width:100%; background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:12px; border-radius:12px; font-size:14px; cursor:pointer; }
.btn-danger { width:100%; background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.3); color:var(--red); padding:12px; border-radius:12px; font-size:14px; cursor:pointer; margin-top:8px; }

/* ── Goal ── */
.goal-progress { background:var(--surface2); border-radius:99px; height:12px; overflow:hidden; margin-bottom:8px; }
.goal-fill { height:100%; background:var(--accent); border-radius:99px; transition:width .5s; }
.goal-text { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }

/* ── Settings ── */
.setting-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); }
.setting-row:last-child { border-bottom:none; }
.setting-info { flex:1; }
.setting-label { font-size:14px; font-weight:500; }
.setting-desc { font-size:12px; color:var(--muted); margin-top:2px; }
.setting-control select, .setting-control input { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:8px 10px; color:var(--text); font-size:13px; outline:none; width:100px; }
.rule-warn { font-size:12px; color:var(--red); margin-top:8px; display:none; }
.rule-warn.show { display:block; }

/* ── Badge ── */
.badge { font-size:10px; padding:2px 6px; border-radius:99px; font-weight:600; }
.badge.over { background:rgba(239,68,68,.15); color:var(--red); }
.badge.warn { background:rgba(249,115,22,.15); color:var(--orange); }
.badge.ok   { background:rgba(34,197,94,.12);  color:var(--green); }

/* ── Empty ── */
.empty { text-align:center; color:var(--muted); padding:32px 16px; font-size:14px; }

/* ── Toast ── */
.toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); background:#1e293b; color:#f1f5f9; padding:12px 20px; border-radius:12px; font-size:14px; z-index:99; opacity:0; transition:opacity .3s; pointer-events:none; border:1px solid var(--border); white-space:nowrap; }
.toast.show { opacity:1; }

/* ── ★ Vista Anual ── */
.anual-row { display:grid; grid-template-columns:36px 1fr 140px; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); }
.anual-row:last-child { border-bottom:none; }
.anual-row.anual-empty { opacity:.35; }
.anual-month { font-size:13px; font-weight:600; color:var(--muted); }
.anual-bars { display:flex; flex-direction:column; gap:4px; }
.anual-bar-wrap { background:var(--surface2); border-radius:99px; height:7px; overflow:hidden; }
.anual-bar { height:100%; border-radius:99px; transition:width .4s; min-width:2px; }
.anual-bar.ing { background:var(--green); }
.anual-bar.gas { background:var(--red); }
.anual-values { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.anual-totals { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:16px; padding-top:14px; border-top:2px solid var(--border); }
.anual-total-item { text-align:center; }
.anual-total-label { font-size:11px; color:var(--muted); margin-bottom:4px; }
.anual-total-val { font-size:15px; font-weight:700; }
.month-nav-btn { background:var(--surface2); border:none; color:var(--text); width:32px; height:32px; border-radius:8px; font-size:16px; cursor:pointer; }

/* ── ★ Deudas ── */
.debt-paid { opacity:.6; }
.btn-toggle { background:none; border:2px solid var(--border); color:var(--muted); width:28px; height:28px; border-radius:50%; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.btn-toggle.active { border-color:var(--green); color:var(--green); background:rgba(34,197,94,.1); }

/* ── ★ Botón añadir pequeño ── */
.btn-add-small { background:var(--accent); border:none; color:#fff; width:28px; height:28px; border-radius:8px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; }

/* ── ★ Input con botón calculadora ── */
.input-with-btn { display:flex; gap:6px; align-items:center; }
.input-with-btn input { flex:1; }
.btn-calc { background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:10px; border-radius:10px; font-size:16px; cursor:pointer; flex-shrink:0; white-space:nowrap; }

/* ── ★ Calculadora ── */
.calc-modal { max-width:320px !important; }
.calc-display { background:var(--surface2); border-radius:12px; padding:16px; font-size:28px; font-weight:700; text-align:right; margin-bottom:16px; min-height:60px; word-break:break-all; }
.calc-keys { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.calc-btn { background:var(--surface2); border:none; color:var(--text); padding:16px 8px; border-radius:12px; font-size:18px; cursor:pointer; transition:background .15s; }
.calc-btn:active { background:var(--border); }
.calc-op   { background:rgba(249,115,22,.15); color:var(--orange); }
.calc-eq   { background:rgba(59,130,246,.2); color:var(--accent); }
.calc-confirm { background:rgba(34,197,94,.2); color:var(--green); font-size:20px; }
.calc-clear { background:rgba(239,68,68,.15); color:var(--red); }

/* ── ★ Recurrentes toggle ── */
.btn-toggle { background:none; border:2px solid var(--border); color:var(--muted); width:28px; height:28px; border-radius:50%; font-size:12px; cursor:pointer; transition:all .2s; }
.btn-toggle.active { border-color:var(--accent); color:var(--accent); background:rgba(59,130,246,.1); }

/* ── ★ Onboarding ── */
.ob-overlay { display:none; position:fixed; inset:0; background:var(--bg); z-index:100; align-items:center; justify-content:center; }
.ob-overlay.open { display:flex; }
.ob-container { display:flex; flex-direction:column; width:100%; max-width:480px; height:100%; max-height:100vh; padding:0 0 32px; overflow:hidden; }
.ob-progress-bar { height:3px; background:var(--surface2); width:100%; flex-shrink:0; }
.ob-progress { height:100%; background:var(--accent); border-radius:99px; transition:width .4s ease; }
.ob-top { display:flex; justify-content:flex-end; padding:14px 20px 0; flex-shrink:0; }
.ob-skip { background:none; border:none; color:var(--muted); font-size:14px; cursor:pointer; padding:4px 8px; }
.ob-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px 28px; overflow-y:auto; text-align:center; }
.ob-emoji { font-size:72px; margin-bottom:24px; line-height:1; }
.ob-title { font-size:24px; font-weight:700; line-height:1.3; margin-bottom:14px; }
.ob-desc  { font-size:15px; color:var(--muted); line-height:1.6; max-width:320px; margin-bottom:28px; }
.ob-options { display:flex; flex-direction:column; gap:10px; width:100%; max-width:320px; }
.ob-options-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ob-option { background:var(--surface); border:2px solid var(--border); color:var(--text); border-radius:12px; padding:12px 16px; font-size:15px; cursor:pointer; transition:all .2s; text-align:left; }
.ob-option.selected { border-color:var(--accent); background:rgba(59,130,246,.12); color:var(--accent); font-weight:600; }
.ob-option:hover:not(.selected) { border-color:var(--muted); }
.ob-features { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; max-width:360px; text-align:left; }
.ob-feature-item { background:var(--surface); border-radius:12px; padding:12px; display:flex; align-items:center; gap:10px; }
.ob-feature-icon { font-size:22px; flex-shrink:0; }
.ob-feature-label { font-size:13px; line-height:1.3; }
.ob-bottom { display:flex; align-items:center; justify-content:space-between; padding:0 24px; flex-shrink:0; }
.ob-dots { display:flex; gap:6px; }
.ob-dot { width:8px; height:8px; border-radius:50%; background:var(--border); transition:all .3s; }
.ob-dot.active { background:var(--accent); width:22px; border-radius:99px; }
.ob-next { background:var(--accent); border:none; color:#fff; padding:14px 28px; border-radius:14px; font-size:16px; font-weight:600; cursor:pointer; transition:opacity .2s; }
.ob-next:active { opacity:.8; }
.ob-slide-out-left { animation:slideOutLeft .2s ease forwards; }
.ob-slide-in       { animation:slideIn .25s ease forwards; }
@keyframes slideOutLeft { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(-40px); } }
@keyframes slideIn      { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@media (min-width:768px) {
  .ob-container { height:auto; min-height:600px; border-radius:24px; box-shadow:0 24px 80px rgba(0,0,0,.4); margin:auto; }
  .ob-overlay { background:rgba(0,0,0,.6); }
}

/* ── ★ Filtros y búsqueda ── */
.filter-bar { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.filter-search { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; color:var(--text); font-size:14px; outline:none; transition:border-color .2s; }
.filter-search:focus { border-color:var(--accent); }
.filter-row { display:flex; gap:8px; flex-wrap:wrap; }
.filter-row select { flex:1; min-width:110px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:8px 10px; color:var(--text); font-size:13px; outline:none; transition:border-color .2s; }
.filter-row select:focus { border-color:var(--accent); }
.filter-btn-dir { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:8px 14px; color:var(--text); font-size:14px; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .15s; }
.filter-btn-dir:active { background:var(--border); }
.filter-count { font-size:11px; color:var(--muted); margin-bottom:2px; min-height:14px; }

/* ── ★ Tendencias de categoría ── */
.trend {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.trend-up   { background: rgba(239,68,68,.14);  color: var(--red);    }
.trend-down { background: rgba(34,197,94,.14);  color: var(--green);  }
.trend-flat { background: rgba(148,163,184,.14); color: var(--muted); }

/* ── ★ Gráfico comparativo ── */
.comp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.comp-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  cursor: pointer;
}
.comp-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
}
.comp-legend span { display:flex; align-items:center; gap:5px; }
.comp-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.comp-chart-wrap {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}
#comp-chart svg text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* ── ★ Card subtítulo de sección ── */
.section-card {
  display: none;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 8px 16px 0px 16px;
  border-left: 4px solid var(--accent);
}
.section-card.visible { display: block; }
.section-card-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
@media (min-width: 768px) {
  .section-card { margin: 8px 0 0 0; }
}

/* ── ★ Top 3 categorías ── */
.top3-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.top3-row:last-child { margin-bottom:0; }
.top3-medal { font-size:22px; flex-shrink:0; }
.top3-info { flex:1; }
.top3-header { display:flex; justify-content:space-between; margin-bottom:5px; }
.top3-cat { font-size:13px; font-weight:600; }
.top3-amt { font-size:13px; color:var(--muted); }
.top3-bar-bg { background:var(--surface2); border-radius:99px; height:8px; overflow:hidden; }
.top3-bar-fill { height:100%; border-radius:99px; width:0%; transition:width 0.6s ease; }

/* ── ★ Gráfico línea ahorro ── */
#ahorro-line-chart { width:100%; padding:4px 0 8px; }
#ahorro-line-chart svg text { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
/* ── ★ Separación cards Análisis ── */
#page-analisis .card + .card { margin-top: 12px; }

/* ── ★ Landscape en móvil y tablet ── */
@media (orientation: landscape) and (max-height: 500px) {
  /* Nav lateral compacta en lugar de barra inferior */
  .nav {
    position: fixed;
    left: 0; top: 0; bottom: 0; right: auto;
    width: 64px;
    flex-direction: column;
    border-top: none;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
    justify-content: flex-start;
    padding: 8px 0;
    gap: 2px;
  }
  .nav button {
    flex: none;
    width: 64px;
    min-width: unset;
    padding: 10px 0;
    font-size: 8px;
    gap: 2px;
  }
  .main-content { margin-left: 64px; }
  .content-area { padding-bottom: 16px; padding-top: 8px; }
  .fab { bottom: 16px; right: 16px; width: 48px; height: 48px; font-size: 22px; }

  /* Header más compacto */
  .header { padding: 8px 16px; }
  .header h1 { font-size: 16px; }
  .month-nav { margin-top: 6px; }

  /* Modal ocupa toda la pantalla en landscape */
  .modal-overlay { align-items: center; }
  .modal {
    border-radius: 16px;
    max-height: 95vh;
    padding: 16px 16px 20px;
    margin: 8px;
    width: calc(100% - 16px);
  }
  .modal h3 { font-size: 15px; margin-bottom: 10px; }
  .form-group { margin-bottom: 8px; }
  .form-group input, .form-group select { padding: 8px 10px; font-size: 14px; }
  .btn-primary { padding: 10px; }

  /* Toast más arriba para no solaparse con el FAB */
  .toast { bottom: 16px; }

  /* Onboarding adaptado a landscape */
  .ob-container { flex-direction: row; max-width: 100%; height: 100%; }
  .ob-body { padding: 8px 20px; }
  .ob-emoji { font-size: 48px; margin-bottom: 12px; }
  .ob-title { font-size: 18px; margin-bottom: 8px; }
  .ob-desc { font-size: 13px; margin-bottom: 12px; }
  .ob-progress-bar { height: 2px; }
  .ob-bottom { padding: 0 16px; }
}

/* ── ★ Landscape en tablet (768px+ ancho, altura media) ── */
@media (orientation: landscape) and (min-width: 768px) and (max-height: 768px) {
  .content-area { padding-top: 8px; padding-bottom: 24px; }
  .header { padding: 12px 32px; }
  .modal { max-height: 92vh; padding: 16px 20px 24px; }
  .form-group { margin-bottom: 10px; }
  .ob-body { padding: 12px 28px; }
  .ob-emoji { font-size: 52px; margin-bottom: 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   Categorías personalizadas — Ajustes + Modal
   ══════════════════════════════════════════════════════════════════ */

/* ── Card ajustes ── */
.cat-settings-section { margin-bottom: 16px; }

.cat-default-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  border: 1.5px solid;
  background: var(--surface2);
  color: var(--text);
}

.cat-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cat-custom-list  { display: flex; flex-direction: column; gap: 6px; }

.cat-custom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cat-chip-custom { flex: 1; }

/* ── Emoji grid ── */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px;
  max-height: 150px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface2);
  border-radius: var(--radius);
}

.emoji-btn {
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 20px;
  padding: 3px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  line-height: 1;
  text-align: center;
}

.emoji-btn:hover    { background: var(--surface); }
.emoji-btn.selected { border-color: var(--accent); background: var(--surface); }

/* ── Color grid ── */
.color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
}

.color-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  outline: none;
}

.color-btn:hover    { transform: scale(1.15); }
.color-btn.selected { border-color: var(--text); transform: scale(1.15); }
.cat-section-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.cat-custom-list { margin-top:8px; }
.cat-add-button { margin-top:10px; width:100%; }
.cat-separator { border:none; border-top:1px solid var(--border); margin:12px 0; }

/* ── Solicitud de reseña ── */
.review-modal { text-align:center; }
.review-icon { font-size:42px; margin-bottom:8px; }
.review-text { color:var(--muted); font-size:14px; line-height:1.5; margin:0 0 18px; }
.review-dismiss {
  border:0; background:none; color:var(--muted); cursor:pointer;
  font-size:12px; margin-top:12px; padding:8px;
}

/* ── Objetivos y previsión ── */
.card-header-inline { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.card-header-inline .card-title { margin:0; }
.forecast-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.card-subtitle { color:var(--muted); font-size:11px; line-height:1.4; margin:-5px 0 10px; }
.forecast-grid > div { background:var(--surface2); border-radius:10px; padding:10px; }
.forecast-grid span { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.forecast-grid strong { display:block; font-size:15px; }
.forecast-grid .green { color:var(--green); }
.forecast-grid .red { color:var(--red); }
.forecast-warning { margin-top:10px; padding:9px 10px; border-radius:9px; background:rgba(239,68,68,.12); color:var(--red); font-size:12px; }
.goal-item { padding:12px 0; border-bottom:1px solid var(--border); }
.goal-item:first-child { padding-top:0; }
.goal-item:last-child { border-bottom:0; padding-bottom:0; }
.goal-item-header, .goal-values { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.goal-item-header { margin-bottom:9px; }
.goal-emoji { margin-right:6px; }
.goal-actions { display:flex; align-items:center; gap:5px; }
.goal-contribute { border:0; border-radius:8px; background:rgba(59,130,246,.14); color:var(--accent); padding:5px 7px; cursor:pointer; font-size:11px; }
.goal-values { margin-top:6px; color:var(--muted); font-size:12px; }
.goal-values strong { color:var(--text); }
.goal-hint { color:var(--muted); font-size:11px; line-height:1.4; margin-top:6px; }
.form-help { color:var(--muted); font-size:11px; margin-top:5px; }