/**
 * Premium UI — Dashboard, navegación móvil, glass, skeleton, empty states
 */

body {
  background-size: 20px 20px, 20px 20px, cover;
  background-position: 0 0, 10px 10px, center;
  color: var(--texto);}

.panel {
  background: var(--superficie);
  border: var(--regla) solid var(--borde-fuerte);}

.panel-glass {
  background: var(--superficie-elevada);
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 16px;}

.subtitle,
.backup-hint,
label {
  color: var(--texto-suave);}

input,
select {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borde-fuerte);}

.transaction-item,
.card-item,
.msi-item {
  background: var(--superficie-elevada);}

/* ─── Header premium ─────────────────────────────────────────────────────── */
.app-header-premium {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;}

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

.theme-toggle-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radio);
  border: var(--regla) solid var(--borde-fuerte);
  background: var(--superficie-elevada);
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.15s ease;}

.theme-toggle-btn:active {
  transform: scale(0.92);}

/* ─── App pages & transitions ────────────────────────────────────────────── */
.app-pages {
  position: relative;
  min-height: 50vh;}

.app-page {
  display: none;
  animation: none;
  contain: layout style;}

.app-page.active {
  display: block;}

.app-page.page-enter {
  animation: pageIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(12px);}
  to {
    opacity: 1;
    transform: translateY(0);}
}

/* ─── Barra inferior · 5 destinos ────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 997;
  display: none;
  justify-content: space-around;
  align-items: stretch;
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  background: var(--superficie);
  border-top: var(--regla) solid var(--borde-fuerte);}

.bottom-nav-item {
  flex: 1;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  color: var(--texto-suave);
  font-family: inherit;
  font-size: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;}

.bottom-nav-item.active {
  color: var(--texto);
  font-weight: var(--peso-fuerte);
  border-top: var(--regla-activa) solid var(--texto);}

/* En una subpantalla del destino: la regla se parte en dos segmentos.
   Sigues dentro, pero no en la raíz. Sin depender del color. */
.bottom-nav-item[data-nivel='2'] {
  color: var(--texto);
  font-weight: var(--peso-fuerte);
  background-image:
    linear-gradient(var(--texto), var(--texto)),
    linear-gradient(var(--texto), var(--texto));
  background-size: 26% var(--regla-activa), 26% var(--regla-activa);
  background-position: left top, right top;
  background-repeat: no-repeat;}

.bottom-nav-item:active { background-color: var(--superficie-elevada);}

@media (max-width: 900px) {
  .bottom-nav {
    display: flex;}
  body {
    padding-bottom: max(88px, calc(88px + env(safe-area-inset-bottom))) !important;}
  .pwa-install-btn {
    bottom: max(100px, calc(100px + env(safe-area-inset-bottom))) !important;}
}

/* ─── Premium dashboard ────────────────────────────────────────────────────── */
.premium-dashboard h2 {
  font-size: 20px;}

.month-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;}

@media (min-width: 600px) {
  .month-summary-grid {
    grid-template-columns: repeat(4, 1fr);}
}

.month-stat {
  text-align: center;
  padding: 16px 12px;
  border-radius: var(--radio);
  border: var(--regla) solid var(--borde-fuerte);
  background: var(--superficie-elevada);
  transition: transform 0.2s ease;}

.month-stat:active {
  transform: scale(0.98);}

.month-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texto-suave);
  font-weight: 700;
  margin-bottom: 6px;}

.month-stat-value {
  font-size: 20px;
  font-weight: 700;}

.month-stat-value.positive {
  color: var(--capital);}
.month-stat-value.negative {
  color: var(--interes);}

.smart-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;}

.smart-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--radio);}

.smart-icon {
  font-size: 28px;
  flex-shrink: 0;}

.smart-title {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--texto-suave);
  font-weight: 700;}

.smart-value {
  font-size: 18px;
  font-weight: 700;
  display: block;}

.smart-sub {
  font-size: 11px;
  color: var(--texto-suave);}

/* ─── Charts ─────────────────────────────────────────────────────────────── */
.charts-grid {
  display: grid;
  gap: 20px;}

@media (min-width: 700px) {
  .charts-grid {
    grid-template-columns: 1fr 1fr;}
  .chart-wrap-wide {
    grid-column: 1 / -1;}
}

.chart-wrap {
  position: relative;
  height: 220px;
  padding: 12px;
  border-radius: var(--radio);
  background: var(--superficie-elevada);
  border: var(--regla) solid var(--borde-fuerte);}

.chart-wrap canvas {
  max-height: 200px;}

/* ─── Insights ─────────────────────────────────────────────────────────────── */
.insights-list {
  display: flex;
  flex-direction: column;
  gap: 10px;}

.insight-chip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radio);
  border: var(--regla) solid var(--borde-fuerte);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  background: var(--superficie-elevada);}

.insight-positive {
  border-color: var(--capital);}
.insight-warning {
  border-color: var(--interes);}
.insight-neutral {
  border-color: var(--borde);}

.insight-icon {
  font-size: 22px;
  flex-shrink: 0;}

/* ─── Goals ────────────────────────────────────────────────────────────────── */
.goal-item {
  margin-bottom: 12px;}

.goal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;}

.goal-header h4 {
  font-size: 16px;
  margin: 0;}

.goal-meta {
  font-size: 13px;
  color: var(--texto-suave);
  margin-bottom: 10px;}

.goal-progress-bar {
  height: 12px;
  background: var(--superficie);
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  overflow: hidden;}

.goal-progress-fill {
  height: 100%;
  border-radius: var(--radio);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);}

.goal-pct {
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
  color: var(--texto-suave);}

/* ─── Empty states anime ─────────────────────────────────────────────────────── */
.empty-state-anime {
  text-align: center;
  padding: 32px 16px;
  color: var(--texto-suave);}

.empty-state-anime .empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
  animation: floatIcon 2s ease-in-out infinite;}

@keyframes floatIcon {
  0%,
  100% {
    transform: translateY(0);}
  50% {
    transform: translateY(-8px);}
}

/* ─── Skeleton loaders ─────────────────────────────────────────────────────── */
.skeleton {
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: var(--radio);}

@keyframes shimmer {
  0% {
    background-position: 200% 0;}
  100% {
    background-position: -200% 0;}
}

.skeleton-card {
  height: 80px;
  margin-bottom: 12px;}

/* ─── Chibi enhanced ───────────────────────────────────────────────────────── */
.chibi-face.excited {
  animation: chibiPop 0.5s ease;}

@keyframes chibiPop {
  0%,
  100% {
    transform: scale(1);}
  50% {
    transform: scale(1.08);}
}

/* ─── Settings page ────────────────────────────────────────────────────────── */
.settings-group {
  margin-bottom: 24px;}

.settings-group h3 {
  font-size: 16px;
  margin-bottom: 12px;
  border-bottom: var(--regla) dashed var(--borde);
  padding-bottom: 6px;}

.theme-select {
  width: 100%;
  margin-top: 8px;}

/* Numeric keyboard hint */
input[inputmode='decimal'],
.comma-format {
  inputmode: decimal;}

.msi-fields-box {
  padding: 16px;
  border-radius: var(--radio);
  margin-bottom: 16px;
  border: var(--regla) solid var(--borde-fuerte);}

.msi-preview-amount {
  font-weight: 900;
  font-size: 24px;
  color: var(--acento-texto);
  padding-top: 10px;}