/* =========================
   Light Professional UI (Fintech)
   ========================= */

:root{
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface2: #fbfbfd;

  --text: #0f172a;        /* slate-900 */
  --muted: #64748b;       /* slate-500 */
  --muted2:#94a3b8;       /* slate-400 */

  --border: #e5e7eb;      /* gray-200 */
  --border2:#eef2f7;      /* softer */

  --primary: #2563eb;     /* blue-600 */
  --primary2:#1d4ed8;
  --danger: #dc2626;      /* red-600 */
  --warn: #f59e0b;        /* amber-500 */
  --ok: #16a34a;          /* green-600 */

  --r-xl: 20px;
  --r-lg: 16px;
  --r-md: 12px;

  --shadow-sm: 0 6px 18px rgba(15, 23, 42, .06);
  --shadow:    0 18px 50px rgba(15, 23, 42, .08);
}

html, body { height:100%; }

body.app-shell{
  margin:0;
  background: radial-gradient(1200px 700px at 15% 0%, #eef2ff, transparent 55%),
              radial-gradient(900px 600px at 100% 0%, #e0f2fe, transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg));
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* container */
.app-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 14px;
}

/* app bar (clara, minimal) */
.app-bar{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border2);
}

.app-bar-inner{
  height: 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.app-brand-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--text);
  font-weight: 800;
  letter-spacing: .2px;
}

.brand-dot{
  width:10px;height:10px;border-radius:99px;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

/* main spacing */
.app-main{ padding: 18px 0 24px 0; }
.app-main.has-bottom-nav{ padding-bottom: 92px; }

/* bottom nav (clara) */
.bottom-nav{
  position: fixed;
  left:0; right:0; bottom:0;
  z-index: 20;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border2);
}

.bottom-nav-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 10px 12px;
  display:flex;
  justify-content:space-between;
  gap: 8px;
}

.bn-item{
  flex:1;
  text-decoration:none;
  color: var(--muted);
  border-radius: 16px;
  padding: 10px 8px;
  text-align:center;
  border: 1px solid transparent;
  transition: .15s ease;
}

.bn-item:hover{
  background: #f1f5f9;
  color: var(--text);
}

.bn-item.is-active{
  color: var(--primary);
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.12);
}

.bn-ico{ font-size: 18px; line-height: 1; }
.bn-txt{ font-size: 12px; margin-top: 4px; font-weight: 600; }

/* Cards */
.card,
.card.p-3,
.card.p-4{
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}

.card:hover{
  box-shadow: var(--shadow);
}

/* Typography */
h1,h2,h3,h4,h5{ color: var(--text); }
.text-muted{ color: var(--muted) !important; }
.small, .form-text{ color: var(--muted) !important; }

/* Buttons */
.btn{
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: none;
  font-weight: 600;
}

.btn-primary{
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  border-color: rgba(37,99,235,.35);
}

.btn-outline-secondary{
  border-color: var(--border);
  color: var(--text);
}

.btn-outline-primary{
  border-color: rgba(37,99,235,.35);
  color: var(--primary);
}

.btn-outline-danger{
  border-color: rgba(220,38,38,.35);
  color: var(--danger);
}

.btn-outline-warning{
  border-color: rgba(245,158,11,.35);
  color: #92400e;
}

.btn-ghost{
  background: #f1f5f9;
  border-color: transparent;
  color: var(--text);
}

.btn-ghost:hover{
  background: #e2e8f0;
}

/* Forms */
.form-control,
.form-select{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

/* Links */
a{ color: var(--primary); }
a:hover{ color: var(--primary2); }

/* Tables */
.table{ color: var(--text); }
.table thead th{
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted);
  font-weight: 700;
}
.table td, .table th{
  border-top: 1px solid var(--border2) !important;
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  background-color: #fafbff;
}

/* Badges */
.badge{
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 700;
}

/* User chip */
.user-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-sm);
}
.user-dot{
  width: 10px; height: 10px; border-radius: 99px;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(22,163,74,.12);
}
.user-link{
  text-decoration:none;
  color: var(--text);
  font-weight: 700;
  max-width: 220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

hr{ border-color: var(--border2) !important; }

/* =========================
   Dashboard KPI layout (compact, no empty space)
   ========================= */

.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.page-title{
  margin: 0;
  font-weight: 850;
  letter-spacing: -.2px;
}

.subtle{
  color: var(--muted);
}

.toolbar{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

/* KPI cards */
.kpi-card{
  padding: 16px 16px;
}

.kpi{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items:center;
}

.kpi-left .kpi-label{
  font-weight: 800;
  color: var(--text);
}

.kpi-left .kpi-value{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.3px;
  margin-top: 4px;
}

.kpi-left .kpi-sub{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 600;
}

.kpi-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.kpi-action{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration:none;
}

.kpi-action:hover{
  background: #f1f5f9;
}

.kpi-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.kpi-dot{
  width: 10px; height: 10px; border-radius: 99px;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

.kpi-dot.ok{ background: var(--ok); box-shadow: 0 0 0 4px rgba(22,163,74,.12); }
.kpi-dot.warn{ background: var(--warn); box-shadow: 0 0 0 4px rgba(245,158,11,.12); }
.kpi-dot.danger{ background: var(--danger); box-shadow: 0 0 0 4px rgba(220,38,38,.12); }

.kpi-mini{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.kpi-mini .mini{
  min-width: 160px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--border2);
}

.kpi-mini .mini .t{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.kpi-mini .mini .v{
  margin-top: 2px;
  font-weight: 900;
  font-size: 16px;
}

/* Make grid tighter */
.row.tight { --bs-gutter-x: 14px; --bs-gutter-y: 14px; }

/* =========================
   Compact dashboard (functional, no filler)
   ========================= */

.summary-card{
  padding: 16px;
}

.summary-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.summary-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 520px){
  .summary-actions{
    justify-content:space-between;
    width: 100%;
  }
}
.summary-month{
  color: var(--muted);
  font-weight: 800;
}

.summary-balance{
  margin-top: 10px;
}

.summary-balance .label{
  color: var(--muted);
  font-weight: 900;
}

.summary-balance .value{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -.6px;
  margin-top: 2px;
  line-height: 1.05;
}

.summary-balance .hint{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
}

.metric-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.metric{
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 12px;
}

.metric .k{
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.metric .v{
  margin-top: 2px;
  font-weight: 950;
  font-size: 18px;
}

.metric .s{
  margin-top: 2px;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}

.section-title{
  font-weight: 950;
  letter-spacing: -.2px;
  margin: 2px 0 10px 0;
}

.quick-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.qa{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-sm);
  text-decoration:none;
  color: var(--text);
}

.qa:hover{
  background: #f8fafc;
}

.qa .left{
  display:flex;
  align-items:center;
  gap: 10px;
}

.qa .ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  background: rgba(37,99,235,.10);
  color: var(--primary);
}

.qa .t{
  font-weight: 950;
}

.qa .d{
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  margin-top: 1px;
}

.qa .go{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border2);
  background: var(--surface2);
}

/* Deudas */
.debt-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.debt-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-sm);
}

.debt-item .name{
  font-weight: 950;
}

.debt-item .meta{
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  margin-top: 2px;
}

.debt-item .amt{
  font-weight: 950;
  text-align:right;
}

.debt-item .small{
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  text-align:right;
  margin-top: 2px;
}

/* Responsive: en pantallas muy pequeñas, acciones 1 columna */
@media (max-width: 420px){
  .quick-actions{ grid-template-columns: 1fr; }
}

/* =========================
   Mobile polish (header + toolbar)
   ========================= */

/* App bar más compacta en móvil */
@media (max-width: 520px){
  .app-bar-inner{
    height: 50px;
  }

  .app-container{
    padding: 0 12px;
  }

  /* reduce el chip del usuario */
  .user-chip{
    padding: 6px 8px;
    gap: 8px;
  }

  /* ocultar email largo en móvil */
  .user-link{
    display: none;
  }

  /* marca más compacta */
  .app-brand-link{
    font-weight: 900;
    gap: 8px;
  }

  /* botón salir compacto */
  .btn.btn-ghost.btn-sm{
    padding: 6px 10px;
    border-radius: 12px;
  }
}

/* Toolbar del dashboard: que se ordene bien en móvil */
@media (max-width: 520px){
  .toolbar{
    gap: 8px;
  }

  /* hacer que el form del mes ocupe casi todo */
  .toolbar form{
    flex: 1 1 auto;
  }

  .toolbar input[type="month"]{
    width: 100%;
    max-width: none !important;
  }

  /* chips y botones compactos */
  .kpi-chip{
    padding: 8px 10px;
    font-weight: 800;
  }
}

@media (max-width: 520px){
  .page-title{
    font-size: 28px;
  }

  /* botones en header más pequeños */
  .btn.btn-outline-secondary.btn-sm,
  .btn.btn-warning.btn-sm{
    padding: 6px 10px;
  }
}

/* =========================
   Dashboard header organized (mobile-first)
   ========================= */

.dash-head{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title action"
    "month month"
    "nav nav";
  gap: 10px;
  align-items:start;
}

.dash-head-left{ grid-area: title; }
.dash-head-right{ grid-area: action; display:flex; justify-content:flex-end; }
.dash-month-row{ grid-area: month; }
.dash-nav-row{ grid-area: nav; display:flex; align-items:center; gap: 8px; flex-wrap: wrap; }

.dash-month-form{
  display:flex;
  gap: 8px;
  align-items:center;
}

.dash-month-input{
  flex: 1 1 auto;
  max-width: none !important;
}

.dash-month-go{
  white-space: nowrap;
}

/* estado alineado bonito */
.dash-status{
  margin-left: 6px;
}

/* Botón cerrar/reabrir más compacto */
.btn-close-month{
  padding: 8px 12px;
  border-radius: 14px;
}

/* Desktop: volver a una sola fila “bonita” */
@media (min-width: 900px){
  .dash-head{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title action"
      "month nav";
    align-items:center;
  }
  .dash-nav-row{
    justify-content:flex-end;
  }
}

/* Móvil: botones más pequeños y todo alineado */
@media (max-width: 520px){
  .btn-close-month{
    padding: 6px 10px;
    border-radius: 12px;
  }

  .dash-month-go{
    padding: 6px 10px;
    border-radius: 12px;
  }

  .dash-nav-btn{
    padding: 6px 10px;
    border-radius: 12px;
  }

  .dash-status{
    padding: 8px 10px;
  }
}

/* =========================
   Month switcher (mobile app style)
   ========================= */

.month-switch{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items:center;
  margin-top: 10px;
}

.ms-btn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 900;
  color: #fff;
  background: #0f172a;                 /* oscuro */
  box-shadow: 0 10px 22px rgba(15,23,42,.18);
}

.ms-btn:hover{
  background: #111c33;
  color:#fff;
}

.ms-form{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0; /* permite shrink */
}

.ms-input{
  width: 170px;        /* evita el espacio enorme */
  max-width: 170px !important;
  flex: 0 0 auto;
  border-radius: 14px;
}

.ms-go{
  height: 40px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 900;
}

.ms-go:hover{
  background: #f1f5f9;
}

.ms-status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border2);
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
}

/* En móviles muy pequeños, permitir que el input baje un poco */
@media (max-width: 420px){
  .month-switch{
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }
  .ms-form{
    flex-wrap: wrap;
    justify-content:flex-start;
  }
  .ms-input{
    width: 160px;
    max-width: 160px !important;
  }
}


/* =========================
   OVERRIDE: limpiar conflictos antiguos
   (deja el header simple + month-switch2)
   ========================= */

/* tu dash-head viejo usaba grid-areas month/nav, lo anulamos */
.dash-head{
  display:flex !important;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

/* desactiva estilos antiguos del switcher viejo si sigue existiendo en css */
.month-switch, .ms-btn, .ms-form, .ms-input, .ms-go, .ms-status{
  all: unset;
}

/* =========================
   Month switcher v2 (estable)
   ========================= */

.month-switch2{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 10px;
}

/* Grupo unido: ← [mes] → */
.ms2-group{
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}

.ms2-btn{
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 950;
  color: #fff;
  background: #0f172a;
}

.ms2-btn:hover{ background:#111c33; color:#fff; }

.ms2-form{ margin:0; height:44px; }
.ms2-input{
  height: 44px;
  width: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface);
  box-shadow: none !important;
}

/* Acciones debajo: Ir + Estado */
.ms2-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.ms2-go{
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 950;
  white-space: nowrap;
}

.ms2-go:hover{ background:#f1f5f9; }

.ms2-status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border2);
  font-weight: 950;
  color: var(--text);
  white-space: nowrap;
}

/* móvil compacto */
@media (max-width: 420px){
  .ms2-group{ grid-template-columns: 40px 1fr 40px; border-radius: 14px; }
  .ms2-btn{ height: 40px; }
  .ms2-form{ height: 40px; }
  .ms2-input{ height: 40px; }
  .ms2-go{ height: 38px; padding: 0 12px; border-radius: 12px; }
  .ms2-status{ height: 38px; padding: 0 10px; }
}


/* =========================
   Apple-like Dashboard Overrides
   Pegar AL FINAL del CSS
   ========================= */

/* Fondo más iOS: limpio, menos gradiente */
body.app-shell{
  background: #f5f5f7 !important;
}

/* Tipografía Apple: ya usas system-ui; ajustamos jerarquía */
:root{
  --apple-bg: #f5f5f7;
  --apple-card: #ffffff;
  --apple-border: rgba(60,60,67,.12);
  --apple-text: #111827;
  --apple-muted: rgba(60,60,67,.72);

  --apple-radius-xl: 26px;
  --apple-radius-lg: 22px;

  --apple-shadow: 0 16px 50px rgba(0,0,0,.10);
  --apple-shadow-soft: 0 10px 30px rgba(0,0,0,.08);

  --apple-blue: #007AFF;
  --apple-green: #34C759;
  --apple-red: #FF3B30;
  --apple-amber: #FF9F0A;
}

.apple-card{
  background: var(--apple-card);
  border: 1px solid var(--apple-border);
  border-radius: var(--apple-radius-xl);
  box-shadow: var(--apple-shadow-soft);
}

.apple-card--hero{
  padding: 18px 18px 16px;
}

/* Título superior tipo iOS (si lo usas) */
.dash-apple-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 6px 2px 12px;
}
.dash-apple-h1{
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--apple-text);
}

.btn-apple-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(60,60,67,.14);
  background: rgba(255,255,255,.75);
  text-decoration:none;
  color: rgba(60,60,67,.88);
  font-weight: 700;
  backdrop-filter: blur(10px);
}
.btn-apple-ghost:hover{
  background: rgba(255,255,255,.92);
  color: rgba(60,60,67,.95);
}

/* Status pill */
.apple-status{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f2f2f7;
  border: 1px solid rgba(60,60,67,.10);
  color: rgba(60,60,67,.90);
  font-weight: 800;
}
.apple-status-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--apple-green);
  box-shadow: 0 0 0 4px rgba(52,199,89,.18);
}
.apple-status-dot.is-danger{
  background: var(--apple-red);
  box-shadow: 0 0 0 4px rgba(255,59,48,.16);
}
.apple-status-dot.is-ok{
  background: var(--apple-green);
  box-shadow: 0 0 0 4px rgba(52,199,89,.18);
}

/* Month pill: ← [input month] → */
.apple-month-pill{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 48px 1fr 48px;
  align-items:center;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid rgba(60,60,67,.12);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.apple-month-btn{
  height: 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 900;
  color: rgba(60,60,67,.92);
  background: #f2f2f7;
}
.apple-month-btn:hover{
  background: #eaeaef;
  color: rgba(60,60,67,.98);
}
.apple-month-form{ margin:0; }
.apple-month-input{
  width: 100%;
  height: 46px;
  border: 0;
  outline: 0;
  padding: 0 14px;
  background: #ffffff;
  color: rgba(60,60,67,.92);
  font-weight: 700;
}

/* Acciones (cerrar/reabrir) discretas */
.apple-hero-actions{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
}

.btn-apple-outline{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(60,60,67,.18);
  background: #ffffff;
  font-weight: 800;
  color: rgba(60,60,67,.92);
}
.btn-apple-outline:hover{
  background: #f2f2f7;
}

.btn-apple-warn{
  display:inline-flex;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,159,10,.16);
  border: 1px solid rgba(255,159,10,.22);
  color: rgba(120,60,0,.92);
  text-decoration:none;
  font-weight: 900;
}
.btn-apple-warn:hover{
  background: rgba(255,159,10,.22);
}

/* Balance */
.apple-balance{
  margin-top: 12px;
}
.apple-balance-label{
  color: var(--apple-muted);
  font-weight: 800;
  letter-spacing: -.01em;
}
.apple-balance-value{
  margin-top: 6px;
  font-size: 44px;
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.03em;
  color: rgba(17,24,39,.92);
}
.apple-balance-hint{
  margin-top: 10px;
  color: rgba(60,60,67,.72);
  font-weight: 700;
}

/* Metrics 2x2 */
.apple-metrics{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.apple-metric{
  background: #ffffff;
  border: 1px solid rgba(60,60,67,.12);
  border-radius: var(--apple-radius-lg);
  padding: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.apple-metric-k{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  color: rgba(60,60,67,.60);
}
.apple-metric-v{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  color: rgba(17,24,39,.92);
}
.apple-metric-s{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(60,60,67,.68);
}

/* Sections */
.apple-section{
  margin-top: 18px;
}
.apple-section--last{
  margin-bottom: 12px;
}
.apple-section-title{
  margin: 0 0 10px 2px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(17,24,39,.92);
}
.apple-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.apple-link{
  text-decoration:none;
  font-weight: 800;
  color: var(--apple-blue);
}
.apple-link:hover{
  text-decoration: underline;
}

/* Quick actions (2 columnas) */
.apple-quick-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.apple-quick{
  background: #ffffff;
  border: 1px solid rgba(60,60,67,.12);
  border-radius: var(--apple-radius-xl);
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  text-decoration:none;
  color: rgba(17,24,39,.92);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.apple-quick:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}
.apple-quick-left{
  display:flex;
  align-items:center;
  gap: 12px;
}
.apple-quick-ico{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #f2f2f7;
  border: 1px solid rgba(60,60,67,.10);
  font-size: 18px;
}
.apple-quick-t{
  font-weight: 900;
}
.apple-quick-d{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(60,60,67,.70);
}
.apple-quick-plus{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #f2f2f7;
  border: 1px solid rgba(60,60,67,.10);
  font-weight: 900;
  color: rgba(60,60,67,.90);
}

/* Debts list */
.apple-debt-list{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.apple-debt{
  background: #ffffff;
  border: 1px solid rgba(60,60,67,.12);
  border-radius: var(--apple-radius-xl);
  padding: 14px 14px;
  display:flex;
  justify-content:space-between;
  gap: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.apple-debt-name{
  font-weight: 900;
  color: rgba(17,24,39,.92);
}
.apple-debt-meta{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(60,60,67,.70);
}
.apple-debt-right{
  text-align:right;
}
.apple-debt-amt{
  font-weight: 900;
  color: rgba(17,24,39,.92);
}
.apple-debt-small{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(60,60,67,.70);
}

.apple-empty{
  background: #ffffff;
  border: 1px solid rgba(60,60,67,.12);
  border-radius: var(--apple-radius-xl);
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.apple-empty-text{
  color: rgba(60,60,67,.70);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 520px){
  .apple-balance-value{ font-size: 40px; }
  .apple-quick-grid{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .apple-metrics{ gap: 10px; }
}

@media (max-width: 420px){
  .apple-quick-grid{ grid-template-columns: 1fr; }
  .apple-metrics{ grid-template-columns: 1fr 1fr; }
}

/* Colocar el botón "Cerrar mes" arriba a la derecha, sobre el selector */
.apple-hero-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "month close";
  align-items: start;
  gap: 12px;
}

.apple-hero-grid-left{ grid-area: month; }
.apple-hero-grid-right{
  grid-area: close;
  display:flex;
  justify-content:flex-end;
}

/* Botón con look iOS y alineado arriba */
.btn-apple-close{
  margin-top: 2px;          /* ajusta fino */
  white-space: nowrap;
  height: 40px;
  padding: 10px 14px;
  border-radius: 14px;
}

/* En móvil estrecho, si no cabe al lado, que baje */
@media (max-width: 420px){
  .apple-hero-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "month"
      "close";
  }
  .apple-hero-grid-right{
    justify-content:flex-start;
  }
}

/* Fila horizontal: Estado izquierda - Botón derecha */
.apple-status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* Contenedor del botón */
.apple-status-actions{
  display:flex;
  align-items:center;
}

/* Ajuste visual del botón */
.btn-apple-close{
  height: 38px;
  padding: 8px 14px;
  border-radius: 14px;
  white-space: nowrap;
}

/* En móvil muy pequeño que baje debajo */
@media (max-width: 380px){
  .apple-status-row{
    flex-direction: column;
    align-items:flex-start;
    gap: 10px;
  }

  .apple-status-actions{
    width: 100%;
    justify-content:flex-start;
  }
}

/* =========================
   Ingresos - iPhone style summary + list
   ========================= */

.incomes-apple{
  max-width: 520px; /* look móvil dentro desktop */
}

.incomes-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom: 10px;
}
.incomes-title{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.incomes-ym{
  color: rgba(60,60,67,.75);
  font-weight: 800;
}

/* Card resumen */
.incomes-summary-card{
  background: #fff;
  border: 1px solid rgba(60,60,67,.12);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  overflow:hidden;
  margin-top: 10px;
}

.incomes-summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-top: 1px solid rgba(60,60,67,.10);
}
.incomes-summary-row:first-child{ border-top: 0; }

.incomes-summary-left{
  display:flex;
  align-items:center;
  gap: 12px;
}
.incomes-summary-ico{
  width: 30px;
  display:inline-flex;
  justify-content:center;
  opacity: .75;
}
.incomes-summary-k{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .10em;
  color: rgba(60,60,67,.60);
}
.incomes-summary-v{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(17,24,39,.92);
}

/* Botones tipo iOS */
.incomes-actions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.btn-ios-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  background: #007AFF;
  color: #fff !important;
  font-weight: 900;
  text-decoration:none;
  box-shadow: 0 14px 34px rgba(0,122,255,.22);
}
.btn-ios-primary:hover{
  filter: brightness(.97);
}

.btn-ios-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(60,60,67,.16);
  background: rgba(255,255,255,.78);
  color: rgba(60,60,67,.92) !important;
  font-weight: 900;
  text-decoration:none;
}

/* Listado en una sola card */
.incomes-list-card{
  background: #fff;
  border: 1px solid rgba(60,60,67,.12);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  overflow:hidden;
}

.incomes-item{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 16px;
  border-top: 1px solid rgba(60,60,67,.10);
}
.incomes-item:first-child{ border-top: 0; }

.incomes-item-name{
  font-weight: 900;
  font-size: 16px;
  color: rgba(17,24,39,.92);
}
.incomes-item-meta{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(60,60,67,.70);
}

.incomes-item-right{
  text-align:right;
  min-width: 140px;
}
.incomes-item-amt{
  font-weight: 900;
  font-size: 16px;
  color: rgba(17,24,39,.92);
}

/* Botones edit/delete estilo pill */
.incomes-item-actions{
  margin-top: 8px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

.btn-ios-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,122,255,.35);
  color: #007AFF !important;
  font-weight: 900;
  text-decoration:none;
  background: rgba(0,122,255,.08);
}
.btn-ios-outline:hover{
  background: rgba(0,122,255,.12);
}

.btn-ios-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,59,48,.35);
  color: #FF3B30 !important;
  font-weight: 900;
  text-decoration:none;
  background: rgba(255,59,48,.08);
}
.btn-ios-danger:hover{
  background: rgba(255,59,48,.12);
}

.incomes-empty{
  background: #fff;
  border: 1px solid rgba(60,60,67,.12);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  color: rgba(60,60,67,.75);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 420px){
  .incomes-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .btn-ios-primary, .btn-ios-ghost{
    width: 100%;
  }
  .incomes-item{
    flex-direction: column;
  }
  .incomes-item-right{
    text-align:left;
    min-width: 0;
  }
  .incomes-item-actions{
    justify-content:flex-start;
  }
}

.month-slider{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  margin: 6px 0 14px 0;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(60,60,67,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
}

.month-slider-btn{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  border: 1px solid rgba(60,60,67,.14);
  background: rgba(255,255,255,.9);
  color: #0f172a;
}

.month-slider-btn:hover{
  background: rgba(255,255,255,1);
}

.month-slider-center{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  justify-content:center;
  min-width: 220px;
}

.month-slider-title{
  font-weight:800;
  letter-spacing:.2px;
  text-transform: capitalize;
  color:#0f172a;
}

.month-slider-input{
  width: 150px;
  border: 1px solid rgba(60,60,67,.14);
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(255,255,255,.9);
}

.monthbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  margin: 6px 0 14px 0;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(60,60,67,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
}

.monthbar-btn{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  border: 1px solid rgba(60,60,67,.14);
  background: rgba(255,255,255,.9);
  color: #0f172a;
}

.monthbar-mid{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  justify-content:center;
}

.monthbar-title{
  font-weight:900;
  letter-spacing:.2px;
  text-transform: capitalize;
  color:#0f172a;
}

.monthbar-cal{
  width:38px;
  height:38px;
  border-radius:999px;
  border: 1px solid rgba(60,60,67,.14);
  background: rgba(255,255,255,.9);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* CLAVE: ocultar el input para que no se repita el mes */
.monthbar-picker{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}