:root {
  /* Paleta */
  --c-bg: #f8fafc;
  --c-surface: #ffffff;
  --c-border: #e7eaf3;
  --c-text: #1e293b;
  --c-text-muted: #64748b;

  --c-emerald: #10b981;      /* positivo / disponible / ingresos */
  --c-emerald-soft: #d1fae5;
  --c-indigo: #6366f1;       /* acento / primario / fondos */
  --c-indigo-soft: #e0e7ff;
  --c-amber: #f59e0b;        /* reservado / próximos pagos */
  --c-amber-soft: #fef3c7;
  --c-coral: #ef4444;        /* gastos / egresos */
  --c-coral-soft: #fee2e2;

  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow-card: 0 2px 10px rgba(30, 41, 59, 0.06), 0 1px 2px rgba(30, 41, 59, 0.05);
  --shadow-float: 0 10px 24px rgba(99, 102, 241, 0.35);

  --nav-height: 68px;
  --topbar-height: 64px;
  --sidebar-width: 232px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--c-bg);
  /* El rebote elástico (overscroll bounce) de iOS/Android dejaba ver el fondo de la página más
     allá del último elemento al soltar el dedo tras hacer scroll hasta el fondo, tapando
     momentáneamente lo último de la vista (ej. el acordeón "Gasto rápido") — sin esto, ese
     contenido quedaba prácticamente imposible de tocar sin sostener la pantalla quieta. */
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  padding-top: var(--topbar-height);
  /* Margen extra (antes 0.5rem) para que el último elemento de cualquier vista quede claramente
     por encima de la barra de navegación fija y del FAB, no pegado a su borde. */
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 1.5rem);
  font-size: 16px;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .caja-card__label { font-family: inherit; }

.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
}

.btn-success { background: var(--c-emerald); border-color: var(--c-emerald); }
.btn-success:hover, .btn-success:active { background: #0ea472 !important; border-color: #0ea472 !important; }
.btn-danger { background: var(--c-coral); border-color: var(--c-coral); }
.btn-danger:hover, .btn-danger:active { background: #dc3939 !important; border-color: #dc3939 !important; }
.btn-primary, .btn-outline-primary:hover { background: var(--c-indigo); border-color: var(--c-indigo); }
.btn-outline-primary { color: var(--c-indigo); border-color: var(--c-indigo); }
.btn-outline-success { color: var(--c-emerald); border-color: var(--c-emerald); }
.btn-outline-secondary { color: var(--c-text-muted); border-color: var(--c-border); }

.btn { border-radius: 14px; font-weight: 600; }

/* ---- Micro-interacciones: transiciones suaves y entrada fade-in/slide-up ---- */
@media (prefers-reduced-motion: no-preference) {
  .btn, .caja-card, .caja-list-item, .caja-fab, .app-bottom-nav__item,
  .app-topbar__logout, .caja-dialog, .caja-badge, .caja-avatar, .caja-icon-badge {
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out,
      border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
  }

  .btn:active { transform: scale(0.97); }

  @keyframes caja-fade-slide-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .caja-card, .caja-list-item {
    animation: caja-fade-slide-up 0.35s ease-out both;
  }

  /* Escalonado: las tarjetas de más abajo entran un pelín después (hasta la 6ª). */
  .caja-card:nth-of-type(2) { animation-delay: 0.04s; }
  .caja-card:nth-of-type(3) { animation-delay: 0.08s; }
  .caja-card:nth-of-type(4) { animation-delay: 0.12s; }
  .caja-card:nth-of-type(5) { animation-delay: 0.16s; }
  .caja-card:nth-of-type(n+6) { animation-delay: 0.2s; }
}

/* ---- Barra superior ---- */
.app-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.1rem;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  z-index: 1030;
}

.app-topbar__identity {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.app-topbar__text { min-width: 0; }

.app-topbar__title {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--c-text);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-topbar__subtitle {
  font-size: 0.72rem;
  color: var(--c-text-muted);
  white-space: nowrap;
}

/* Espacio de trabajo activo (sección 21): un enlace pequeño bajo el título de cada pantalla, para
   que siempre sea obvio si se está viendo la caja Familiar o una billetera personal — clic para
   cambiar. La franja superior completa cambia de color en modo Personal (--c-amber en vez del
   índigo/blanco de siempre) como segunda señal, más difícil de pasar por alto que solo el texto. */
.app-topbar__workspace {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-indigo);
  text-decoration: none;
  white-space: nowrap;
}
.app-topbar--personal { background: var(--c-amber-soft); border-bottom-color: var(--c-amber); }
.app-topbar--personal .app-topbar__workspace { color: #92400e; }

.app-topbar__logout {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--c-coral-soft);
  background: var(--c-coral-soft);
  color: #b91c1c;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  flex-shrink: 0;
}

/* ---- Avatares ---- */
.caja-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}

.caja-avatar--sm { width: 28px; height: 28px; font-size: 0.72rem; }

.caja-avatar[data-user="isaac"] { background: linear-gradient(135deg, #6366f1, #818cf8); }
.caja-avatar[data-user="katy"] { background: linear-gradient(135deg, #f59e0b, #fb923c); }
.caja-avatar[data-user="_"] { background: linear-gradient(135deg, #94a3b8, #cbd5e1); }

.caja-avatar__dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-emerald);
  border: 2px solid var(--c-surface);
}

.caja-inline-avatar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* ---- Contenido ---- */
.app-content {
  padding: 1rem;
  /* Refuerzo explícito además del padding-bottom de <body>: la barra inferior es fixed (fuera del
     flujo normal) y flota sobre el final del área con scroll — sin este colchón directamente en el
     contenedor de contenido, el último botón de cualquier vista (ej. "Registrar gasto", "Crear
     fondo") quedaba atrapado detrás de ella en dispositivos reales (el padding de <body> por sí
     solo no fue suficiente, verificado en un teléfono real). 96px cubre la barra (68px) + margen. */
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  max-width: 640px;
  margin: 0 auto;
}

/* ---- Barra inferior de navegación ---- */
.app-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  z-index: 1030;
  box-shadow: 0 -2px 12px rgba(30, 41, 59, 0.05);
}

.app-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.4rem 0;
}

.app-bottom-nav__icon {
  width: 38px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: background 0.15s ease, color 0.15s ease;
}

.app-bottom-nav__item.is-active { color: var(--c-indigo); }
.app-bottom-nav__item.is-active .app-bottom-nav__icon {
  background: var(--c-indigo-soft);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
}

/* ---- Botón flotante (FAB) ---- */
.caja-fab {
  position: fixed;
  right: 1.1rem;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 1rem);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-indigo), #818cf8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  box-shadow: var(--shadow-float);
  text-decoration: none;
  z-index: 1020;
}
.caja-fab:hover, .caja-fab:active { color: #fff; transform: scale(1.04); }

/* ---- Escritorio: la barra inferior se convierte en barra lateral fija, y el contenido gana
   espacio de respiro en vez de quedar como una captura de móvil estirada en medio de la pantalla.
   Sigue siendo el mismo HTML de _Layout.cshtml (mismos <a>, mismo orden) — solo cambia el CSS,
   así que aplica automáticamente a las 18 páginas sin tocar cada .cshtml. ---- */
@media (min-width: 900px) {
  body {
    padding-bottom: 0;
    padding-left: var(--sidebar-width);
  }

  .app-content {
    max-width: 760px;
    padding: 1.75rem 2rem 3rem;
  }

  .app-bottom-nav {
    top: var(--topbar-height);
    bottom: 0;
    left: 0;
    right: auto;
    width: var(--sidebar-width);
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.3rem;
    padding: 1.25rem 0.75rem;
    border-top: none;
    border-right: 1px solid var(--c-border);
    box-shadow: 2px 0 12px rgba(30, 41, 59, 0.04);
  }

  .app-bottom-nav__item {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
  }

  .app-bottom-nav__item.is-active { background: var(--c-indigo-soft); }
  .app-bottom-nav__item.is-active .app-bottom-nav__icon { box-shadow: none; }

  .app-bottom-nav__icon { width: 28px; height: 28px; flex-shrink: 0; }

  .caja-fab {
    right: 2.25rem;
    bottom: 2.25rem;
  }
}

/* ---- Tarjetas ---- */
.caja-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.9rem;
  box-shadow: var(--shadow-card);
}

.caja-card__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-text-muted);
  margin-bottom: 0.2rem;
}

.caja-card__amount {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -0.01em;
}

.caja-card__amount.is-negative { color: var(--c-coral); }
.caja-card__amount.is-positive { color: var(--c-emerald); }

/* Tarjeta hero de "Disponible" */
.caja-hero {
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.4rem;
  margin-bottom: 0.9rem;
  background: linear-gradient(135deg, var(--c-emerald) 0%, #34d399 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.3);
}
.caja-hero.is-negative { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); box-shadow: 0 10px 24px rgba(239, 68, 68, 0.3); }
.caja-hero.is-warning { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); box-shadow: 0 10px 24px rgba(245, 158, 11, 0.3); }
.caja-hero__label { font-size: 0.85rem; font-weight: 600; opacity: 0.92; margin-bottom: 0.2rem; }
.caja-hero__amount { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.02em; }
.caja-hero__sub { font-size: 0.8rem; font-weight: 600; opacity: 0.92; margin-top: 0.4rem; }

/* ---- Pill / chip de próximo ingreso ---- */
.caja-pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.caja-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--c-indigo-soft);
  color: var(--c-indigo);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.caja-pill__amount { color: var(--c-emerald); }

/* ---- Listas de movimientos / obligaciones ---- */
.caja-list-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--c-border);
}

/* Si el texto (__main) y la acción no caben en una fila, la acción baja en vez de desbordarse. */
.caja-list-item > form,
.caja-list-item > .btn,
.caja-list-item > a.btn {
  margin-left: auto;
}

.caja-list-item:last-child { border-bottom: none; }

.caja-list-item__main { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.caja-list-item__desc { font-weight: 700; font-size: 0.95rem; }
.caja-list-item__meta { font-size: 0.76rem; color: var(--c-text-muted); }

.caja-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  background: var(--c-indigo-soft);
}

.caja-amount--income { color: var(--c-emerald); font-weight: 700; white-space: nowrap; }
.caja-amount--expense { color: var(--c-coral); font-weight: 700; white-space: nowrap; }
.caja-amount--neutral { color: var(--c-amber); font-weight: 700; white-space: nowrap; }

.caja-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--c-emerald-soft);
  color: #047857;
}

.caja-badge--warn { background: var(--c-amber-soft); color: #92400e; }
.caja-badge--danger { background: var(--c-coral-soft); color: #b91c1c; }
.caja-badge--success { background: var(--c-emerald-soft); color: #047857; }
.caja-badge--voided { background: #e2e8f0; color: var(--c-text-muted); text-decoration: line-through; }

/* ---- Estado vacío festivo ---- */
.caja-empty {
  text-align: center;
  padding: 1.5rem 1rem;
}
.caja-empty__icon { font-size: 2.4rem; margin-bottom: 0.4rem; }
.caja-empty__text { color: var(--c-text-muted); font-weight: 600; font-size: 0.92rem; }

/* ---- Barra de progreso pagadas/pendientes ---- */
.caja-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--c-coral-soft);
  overflow: hidden;
  margin: 0.5rem 0;
}
.caja-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-emerald), #34d399);
  border-radius: 999px;
}

/* ---- Formularios grandes y táctiles ---- */
.caja-form .form-control,
.caja-form .form-select {
  font-size: 1.05rem;
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
  border-color: var(--c-border);
}

.caja-form label.form-label { font-weight: 700; font-size: 0.85rem; color: var(--c-text); }

.caja-form .btn {
  font-size: 1.05rem;
  padding: 0.75rem 1rem;
}

.app-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(160deg, #eef2ff 0%, #f8fafc 60%);
}

.app-login__card {
  width: 100%;
  max-width: 380px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-card);
}

.app-login__logo { border-radius: 18px; box-shadow: var(--shadow-card); }

/* Calendario/Checklist de pagos (docs/FINANCIAL_RULES.md sección 14) */
.caja-tabs {
  display: flex;
  gap: 0.4rem;
  background: var(--c-indigo-soft);
  border-radius: var(--radius-md);
  padding: 0.3rem;
  margin-bottom: 0.9rem;
}
.caja-tabs__item {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0.6rem;
  border-radius: calc(var(--radius-md) - 4px);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--c-indigo);
  text-decoration: none;
}
.caja-tabs__item.is-active { background: var(--c-surface); box-shadow: var(--shadow-card); }

.caja-quincena-title { font-weight: 700; font-size: 0.85rem; color: var(--c-text-muted); margin: 1rem 0 0.4rem; }
.caja-quincena-title:first-child { margin-top: 0; }

.caja-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
}
.caja-checklist-item:last-child { border-bottom: none; }
.caja-checklist-item input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--c-emerald); flex-shrink: 0; }
.caja-checklist-item__body { min-width: 0; }
.caja-checklist-item__title { font-weight: 700; font-size: 0.95rem; }
.caja-checklist-item__meta { font-size: 0.76rem; color: var(--c-text-muted); }

.caja-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
  text-align: center;
}
.caja-calendar-day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--c-bg);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-text);
  text-decoration: none;
  border: 2px solid transparent;
}
.caja-calendar-day.is-selected { border-color: var(--c-indigo); }
.caja-calendar-day__dots { position: absolute; bottom: 3px; display: flex; gap: 2px; }
.caja-calendar-day__dot { width: 5px; height: 5px; border-radius: 50%; }
.caja-calendar-day__dot--paid { background: var(--c-emerald); }
.caja-calendar-day__dot--pending { background: var(--c-coral); }
.caja-calendar-day__dot--income { background: var(--c-indigo); }
.caja-calendar-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.76rem; color: var(--c-text-muted); margin-top: 0.7rem; }
.caja-calendar-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.caja-calendar-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Edición inline con <details>/<summary>, sin JavaScript, dentro de listas (gastos fijos, pasivos). */
.caja-edit-toggle { padding: 0.4rem 0 0.8rem; border-bottom: 1px solid var(--c-border); }
.caja-edit-toggle:last-child { border-bottom: none; }
.caja-edit-toggle summary { cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--c-indigo); list-style: none; }
.caja-edit-toggle summary::-webkit-details-marker { display: none; }
.caja-edit-toggle summary::before { content: "✎ "; }

/* <dialog> de confirmación (reemplaza confirm()/prompt() nativos, sección "UX del formulario"). */
.caja-dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  width: min(90vw, 360px);
  box-shadow: 0 20px 40px rgba(30, 41, 59, 0.25);
}
.caja-dialog::backdrop { background: rgba(15, 23, 42, 0.5); }
.caja-dialog__message { font-weight: 600; color: var(--c-text); margin-bottom: 1.25rem; }
.caja-dialog__actions { display: flex; gap: 0.6rem; }
.caja-dialog__actions .btn { flex: 1; }

/* Variante con un formulario corto adentro (ej. "Gasto rápido" del FAB, sección 20): un poco más
   ancha que el diálogo de confirmación y con el texto alineado a la izquierda. */
.caja-dialog--form { width: min(92vw, 400px); text-align: left; }

/* Pestañas de tipo (Gasto/Ingreso) en /Registrar, mismo look que .caja-tabs de Calendario. */
.caja-collapsible summary { cursor: pointer; font-weight: 700; font-size: 0.85rem; color: var(--c-indigo); list-style: none; padding: 0.5rem 0; }
.caja-collapsible summary::-webkit-details-marker { display: none; }
.caja-collapsible summary::before { content: "⚙️ "; }

/* ---- Splash de carga inicial: solo se hace visible si la página tarda (site.js la muestra con
   un pequeño retraso), para no parpadear en cargas rápidas dentro de la LAN. ---- */
.nido-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg, #f8fafc);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.nido-splash.is-visible { opacity: 1; visibility: visible; }
.nido-splash__logo { width: 88px; height: 88px; border-radius: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .nido-splash__logo { animation: nido-splash-pulse 1.3s ease-in-out infinite; }
}
@keyframes nido-splash-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.82; }
}