@charset "UTF-8";
/* ========== VARIABLES CSS ========== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* Colores primarios */
  --primary: #5B21B6;
  --primary-light: #8B5CF6;
  --primary-dark: #4C1D95;
  --primary-soft: #F3E8FF;
  --secondary: #0891B2;
  --secondary-light: #06B6D4;
  --secondary-soft: #F0FDF9;
  --accent: #DC2626;
  --accent-soft: #FEF2F2;
  /* Colores de estado */
  --success: #059669;
  --success-light: #10B981;
  --success-soft: #ECFDF5;
  --danger: #DC2626;
  --danger-light: #EF4444;
  --danger-soft: #FEF2F2;
  --warning: #D97706;
  --warning-light: #F59E0B;
  --warning-soft: #FFFBEB;
  --info: #2563EB;
  --info-light: #3B82F6;
  --info-soft: #EFF6FF;
  /* Grises minimalistas */
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-300: #D4D4D4;
  --gray-400: #A3A3A3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  /* Fondos minimalistas */
  --bg-primary: #FFFFFF;
  --bg-secondary: #FAFAFA;
  --bg-tertiary: #F5F5F5;
  --bg-overlay: rgba(255, 255, 255, 0.9);
  /* Sombras suaves */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  /* Border radius minimalista */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  /* Tipografía minimalista */
  --font-body: 'Poppins', sans-serif;
  --font-heading: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  /* Transiciones suaves */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Espaciado minimalista */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  /* Límites */
  --max-width-xs: 320px;
  --max-width-sm: 480px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
}

/* ========== RESET Y BASE ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-800);
  background: radial-gradient(1200px circle at 15% 20%, rgba(37, 99, 235, 0.08), transparent 50%), radial-gradient(900px circle at 80% 0%, rgba(14, 165, 233, 0.1), transparent 45%), linear-gradient(180deg, #F8FAFC 0%, #EEF2FF 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--gray-900);
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.125rem;
}

h6 {
  font-size: 1rem;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--primary-dark);
}

/* ========== MINIMALIST DESIGN SYSTEM ========== */
/* Header Minimalista - Diseño Moderno */
.minimal-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  color: white;
  padding: var(--space-2xl) 0;
  margin-bottom: var(--space-xl);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}

/* Ensure content inside minimal-hero is clickable */
.minimal-hero>.container {
  position: relative;
  z-index: 2;
}

.minimal-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 40%), radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  animation: heroFloat 15s ease-in-out infinite;
  pointer-events: none;
}

.minimal-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.1), transparent);
  pointer-events: none;
}

@keyframes heroFloat {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(10px, -10px) rotate(1deg);
  }

  50% {
    transform: translate(-5px, 5px) rotate(-1deg);
  }

  75% {
    transform: translate(-10px, -5px) rotate(0.5deg);
  }
}

/* Floating shapes */
.minimal-hero .hero-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: shapeFloat 8s ease-in-out infinite;
  pointer-events: none;
}

.minimal-hero .hero-shape:nth-child(1) {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.minimal-hero .hero-shape:nth-child(2) {
  width: 120px;
  height: 120px;
  top: 60%;
  right: 15%;
  animation-delay: -2s;
}

.minimal-hero .hero-shape:nth-child(3) {
  width: 60px;
  height: 60px;
  bottom: 20%;
  left: 30%;
  animation-delay: -4s;
}

@keyframes shapeFloat {

  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.1;
  }

  50% {
    transform: translateY(-20px) scale(1.1);
    opacity: 0.2;
  }
}

.minimal-hero-content {
  max-width: var(--max-width-xl);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
  position: relative;
  z-index: 2;
}

.minimal-hero-title {
  flex: 1;
}

.minimal-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 var(--space-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-heading);
  color: white;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  letter-spacing: -0.02em;
}

.minimal-icon {
  font-size: 2.25rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 12px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.minimal-subtitle {
  font-size: 1.1rem;
  color: white;
  opacity: 0.9;
  margin: 0;
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.minimal-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  font-size: 0.95rem;
}

.minimal-back-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-3px) scale(1.02);
  color: white;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.minimal-back-btn:active {
  transform: translateY(-1px) scale(0.98);
}

.minimal-back-btn i {
  transition: transform 0.3s ease;
}

.minimal-back-btn:hover i {
  transform: translateX(-3px);
}

/* Layout Minimalista */
.minimal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: var(--max-width-xl);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

@media (min-width: 1024px) {
  .minimal-layout {
    grid-template-columns: 350px 1fr;
  }
}

/* Sidebar Minimalista */
.minimal-sidebar {
  position: sticky;
  top: var(--space-xl);
  height: fit-content;
}

.minimal-summary-card {
  background: var(--bg-primary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.minimal-summary-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.minimal-summary-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--space-lg) 0;
  display: flex;
  align-items: center;
  gap: var(--space);
}

.minimal-summary-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.minimal-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
}

.minimal-summary-item--total {
  background: var(--gray-100);
  margin: 0 calc(-1 * var(--space-md));
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}

.minimal-summary-divider {
  height: 1px;
  background: var(--gray-200);
  margin: var(--space-xs) 0;
}

.minimal-summary-label {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 500;
}

.minimal-summary-value {
  font-size: 1.125rem;
  font-weight: 700;
  font-family: var(--font-heading);
}

.minimal-summary-value--success {
  color: var(--success);
}

.minimal-summary-value--primary {
  color: var(--primary);
}

.minimal-summary-value--info {
  color: var(--info);
}

.minimal-summary-value--danger {
  color: var(--danger);
}

.minimal-warning {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space) var(--space-md);
  background: var(--danger-soft);
}

/* Main Content */
.minimal-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Secciones Desplegables */
.minimal-section {
  background: var(--bg-primary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.minimal-section:hover {
  box-shadow: var(--shadow-md);
}

.minimal-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  background: var(--bg-secondary);
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-base);
  border-bottom: 1px solid transparent;
}

.minimal-section-header:hover {
  background: var(--gray-100);
}

.minimal-section-header:active {
  transform: scale(0.98);
}

.minimal-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
}

.minimal-section-title h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
}

.minimal-section-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
}

.minimal-section-toggle {
  transition: transform var(--transition-base);
}

.minimal-section-toggle i {
  font-size: 1.125rem;
  color: var(--gray-500);
}

.minimal-section-content {
  padding: var(--space-lg);
  max-height: 2000px;
  overflow: hidden;
  transition: all var(--transition-slow);
}

.minimal-section-content.collapsed {
  max-height: 0;
  padding: 0 var(--space-lg);
}

/* Stats Row */
.minimal-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
}

.minimal-stat {
  text-align: left;
  padding: 0 var(--space-md) 0 0;
  background: transparent;
  border-radius: 0;
  border: none;
  transition: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  border-right: 1px solid var(--gray-200);
}

.minimal-stat:last-child {
  border-right: none;
  padding-right: 0;
}

.minimal-stat:hover {
  transform: none;
  box-shadow: none;
}

.minimal-stat-number {
  display: inline;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0;
  font-family: var(--font-heading);
}

.minimal-stat-number--success {
  color: var(--success);
}

.minimal-stat-number--primary {
  color: var(--primary);
}

.minimal-stat-label {
  display: inline;
  font-size: 0.6875rem;
  color: var(--gray-500);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Lista de Datos Tipo Excel */
.minimal-data-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-primary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.minimal-data-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--gray-200);
  border-radius: 0;
  overflow: visible;
  transition: none;
}

.minimal-data-item:last-child {
  border-bottom: none;
}

.minimal-data-item:hover {
  box-shadow: none;
  transform: none;
  background: var(--gray-50);
}

/* ========== AUTH LAYOUT ========== */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
  position: relative;
  overflow: hidden;
}

.auth-body::before,
.auth-body::after {
  content: "";
  position: absolute;
  filter: blur(80px);
  z-index: 0;
}

.auth-body::before {
  width: 380px;
  height: 380px;
  background: rgba(37, 99, 235, 0.18);
  top: -60px;
  left: -40px;
}

.auth-body::after {
  width: 420px;
  height: 420px;
  background: rgba(14, 165, 233, 0.16);
  bottom: -80px;
  right: -40px;
}

.auth-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}

.auth-panel {
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(380px, 1fr);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 28px;
  box-shadow: 0 24px 90px -48px rgba(15, 23, 42, 0.4);
  overflow: hidden;
  align-items: stretch;
  column-gap: 0;
}

.auth-aside {
  position: relative;
  isolation: isolate;
  padding: 2.5rem;
  color: white;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.12), transparent 35%), radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.08), transparent 32%), linear-gradient(135deg, #0F172A 0%, #0B2C54 45%, #0B3B5C 100%);
  display: flex;
  align-items: center;
}

.auth-aside::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  pointer-events: none;
  z-index: 0;
}

.auth-aside .brand-icon {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.auth-aside h2 {
  color: white;
  margin-bottom: 0.75rem;
}

.auth-aside p {
  color: rgba(255, 255, 255, 0.75);
}

.auth-aside-content {
  display: grid;
  gap: 1.25rem;
}

.auth-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 1.75rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
}

.pill i {
  opacity: 0.85;
}

.auth-metric {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  margin-top: 1rem;
}

.auth-metric strong {
  color: white;
  font-size: 1.125rem;
}

.auth-card {
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  border-left: 1px solid rgba(148, 163, 184, 0.2);
}

.auth-header {
  margin-bottom: 1.5rem;
}

.auth-header h3 {
  margin-bottom: 0.35rem;
}

.auth-subtitle {
  color: var(--gray-600);
}

.brand-icon-lg {
  width: 76px;
  height: 76px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2.25rem;
  box-shadow: 0 18px 36px -16px rgba(37, 99, 235, 0.4);
}

.auth-footer {
  border-top: 1px solid var(--gray-200);
  padding-top: 1.25rem;
  margin-top: 1.75rem;
  color: var(--gray-600);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.auth-form .form-control,
.auth-form .input-group-text {
  height: 50px;
}

.auth-form .input-group-text {
  font-weight: 700;
}

.auth-footer a {
  font-weight: 700;
}

@media (max-width: 992px) {
  .auth-panel {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .auth-aside {
    padding: 2rem;
    order: 2;
    align-items: flex-start;
  }

  .auth-card {
    padding: 2rem;
    order: 1;
  }
}

/* ========== FOOTER ========== */
footer {
  background: white;
  border-top: 1px solid var(--gray-200);
  padding: 2rem 0;
  margin-top: auto;
}

footer p {
  color: var(--gray-600);
  margin: 0;
  font-size: 0.875rem;
}

/* ========== NAVEGACIÓN ========== */
.nav-wrapper {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 12px 30px -20px rgba(15, 23, 42, 0.35);
}

.glass-navbar {
  background: transparent;
  padding: 1rem 0.5rem;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--gray-900) !important;
  transition: transform var(--transition-base);
}

.navbar-brand:hover {
  transform: translateY(-2px);
}

.brand-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  box-shadow: var(--shadow-md);
}

.brand-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-link {
  font-weight: 500;
  color: var(--gray-600) !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--radius);
  transition: all var(--transition-base);
  position: relative;
}

.nav-link:hover {
  color: var(--primary) !important;
  background: var(--gray-50);
}

.nav-link.active {
  color: var(--primary) !important;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
  font-weight: 600;
}

.nav-link.active::before {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  border-radius: 10px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: var(--shadow-md);
}

.user-profile-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem !important;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}

.user-profile-link:hover {
  background: var(--gray-50);
}

.dropdown-menu {
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  margin-top: 0.5rem;
  min-width: 200px;
}

.dropdown-item {
  padding: 0.625rem 1rem;
  border-radius: var(--radius);
  font-weight: 500;
  color: var(--gray-700);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dropdown-item:hover {
  background: var(--gray-100);
  color: var(--gray-900);
  transform: translateX(4px);
}

.dropdown-item i {
  width: 1.25rem;
  text-align: center;
  opacity: 0.7;
}

.dropdown-item.text-danger:hover {
  background: var(--danger-light);
  color: var(--danger);
}

.dropdown-header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  padding: 0.5rem 1rem;
}

.dropdown-divider {
  margin: 0.5rem 0;
  border-color: var(--gray-200);
}

/* ========== CARDS ========== */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, #ffffff 100%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 60px -40px rgba(15, 23, 42, 0.35), var(--shadow-sm);
  transition: all var(--transition-base);
  overflow: hidden;
}

.card:hover {
  box-shadow: 0 26px 80px -50px rgba(15, 23, 42, 0.4), var(--shadow-md);
  transform: translateY(-3px);
}

.card-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  border: none;
  box-shadow: var(--shadow-lg);
  color: white;
}

.card-hero:hover {
  transform: translateY(0);
  box-shadow: var(--shadow-lg);
}

.card-hero h1,
.card-hero h2,
.card-hero h3,
.card-hero h4,
.card-hero h5,
.card-hero h6 {
  color: white;
}

.card-header {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(14, 165, 233, 0.04) 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  padding: 1rem 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
}

.card-header h5,
.card-header h4,
.card-header h3 {
  margin-bottom: 0;
  color: var(--gray-900);
  font-weight: 700;
}

.card-header i {
  color: var(--primary);
}

.card-body {
  padding: 1.5rem;
}

.card-footer {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  padding: 1rem 1.5rem;
}

/* Stat Cards */
.stat-card {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, rgba(15, 23, 42, 0.02) 100%);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  height: 100%;
}

.stat-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.35);
}

.stat-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

.stat-card-icon-circle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.stat-card-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
}

.stat-card-label {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card-change {
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
}

.stat-card-change.positive {
  color: var(--success);
  background: var(--success-soft);
}

.stat-card-change.negative {
  color: var(--danger);
  background: var(--danger-soft);
}

/* Summary Cards - Tarjetas de Resumen */
.summary-cards {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  margin-bottom: var(--space-lg);
}

.summary-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--gray-100);
  position: relative;
  overflow: hidden;
}

.summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gray-300);
}

.summary-card:nth-child(1)::before {
  background: linear-gradient(90deg, var(--info) 0%, var(--info-light) 100%);
}

.summary-card:nth-child(2)::before {
  background: linear-gradient(90deg, var(--success) 0%, var(--success-light) 100%);
}

.summary-card:nth-child(3)::before {
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
}

.summary-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.summary-card-icon--info {
  background: linear-gradient(135deg, var(--info-soft) 0%, rgba(var(--info-rgb), 0.1) 100%);
  color: var(--info);
}

.summary-card-icon--success {
  background: linear-gradient(135deg, var(--success-soft) 0%, rgba(var(--success-rgb), 0.1) 100%);
  color: var(--success);
}

.summary-card-icon--warning {
  background: linear-gradient(135deg, var(--warning-soft) 0%, rgba(245, 158, 11, 0.1) 100%);
  color: var(--warning);
}

.summary-card-icon--primary {
  background: linear-gradient(135deg, var(--primary-soft) 0%, rgba(var(--primary-rgb), 0.1) 100%);
  color: var(--primary);
}

.summary-card-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1;
}

.summary-card-value--success {
  color: var(--success);
}

.summary-card-value--primary {
  color: var(--primary);
}

.summary-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
}

.summary-card-sublabel {
  font-size: 0.7rem;
  color: var(--gray-400);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .summary-cards {
    flex-direction: column;
  }

  .summary-card {
    padding: var(--space-sm) var(--space-md);
  }

  .summary-card-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .summary-card-value {
    font-size: 1.25rem;
  }
}

/* ========== CATEGORY CARDS - COMPACT DESIGN ========== */
.cat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cat-card {
  background: white;
}

.cat-card--expanded {
  margin-bottom: 2px;
}

/* Parent Category Row */
.cat-parent {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  min-height: 52px;
}

.cat-parent-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cat-color) 0%, color-mix(in srgb, var(--cat-color) 70%, white) 100%);
  color: white;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px -2px var(--cat-color);
}

.cat-parent-info {
  flex: 1;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-name-input {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-800);
  border: none;
  background: transparent;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: var(--radius-xs);
  width: 100%;
  transition: all var(--transition-fast);
}

.cat-name-input:hover {
  background: var(--gray-100);
}

.cat-name-input:focus {
  outline: none;
  background: var(--gray-100);
  box-shadow: 0 0 0 2px var(--primary-soft);
}

.cat-name-input--sm {
  font-size: 0.875rem;
  font-weight: 500;
}

.cat-badge {
  font-size: 0.7rem;
  color: var(--gray-500);
  font-weight: 500;
}

.cat-parent-budget {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 190px;
}

.cat-budget-total {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.cat-parent-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 95px;
}

.cat-total-label {
  font-size: 0.6rem;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cat-total-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary);
}

.cat-parent-stats {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 165px;
  justify-content: flex-end;
}

.cat-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 70px;
}

.cat-stat-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
}

.cat-stat-label {
  font-size: 0.6rem;
  color: var(--gray-400);
  text-transform: uppercase;
}

.cat-progress-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 75px;
}

.cat-progress {
  flex: 1;
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.cat-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--success) 0%, var(--success-light) 100%);
  border-radius: 3px;
  transition: width var(--transition-base);
}

.cat-progress-bar--over {
  background: linear-gradient(90deg, var(--danger) 0%, var(--danger-light) 100%);
}

.cat-progress-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-500);
  min-width: 32px;
  text-align: right;
}

.cat-parent-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}

.cat-action-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.9rem;
  background: var(--gray-100);
  color: var(--gray-600);
}

.cat-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.25);
}

.cat-action-btn i {
  font-size: 0.9rem;
}

.cat-action-btn--danger {
  background: var(--gray-100);
  color: var(--gray-400);
}

.cat-action-btn--danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.cat-action-btn--sm {
  width: 24px;
  height: 24px;
}

/* Child Categories */
.cat-children {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}

.cat-child {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  padding-left: calc(var(--space-md) + 36px + var(--space-sm));
  min-height: 40px;
  position: relative;
}

.cat-child-connector {
  position: absolute;
  left: calc(var(--space-md) + 18px);
  top: 0;
  height: 50%;
  width: 14px;
  border-left: 2px solid var(--gray-300);
  border-bottom: 2px solid var(--gray-300);
  border-bottom-left-radius: 8px;
}

.cat-child:last-child .cat-child-connector {
  height: 50%;
}

.cat-child-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.4rem;
  color: var(--gray-400);
}

.cat-child-info {
  flex: 1;
  min-width: 80px;
}

.cat-child-budget {
  width: 190px;
}

.cat-child-stats {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 165px;
  justify-content: flex-end;
}

/* Mini stat para subcategorías */
.cat-stat-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 70px;
}

.cat-stat-mini-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-700);
  line-height: 1;
}

.cat-stat-mini-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gray-500);
  line-height: 1;
  margin-top: 2px;
}

.cat-progress-wrap-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  width: 75px;
}

.cat-progress-text-mini {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--gray-600);
  line-height: 1;
}

.cat-child-spent {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-600);
  min-width: 60px;
  text-align: right;
}

.cat-progress-mini {
  width: 50px;
  height: 4px;
  background: var(--gray-200);
  border-radius: 2px;
  overflow: hidden;
}

.cat-progress-mini .cat-progress-bar {
  height: 100%;
}

.cat-child-actions {
  width: 28px;
  display: flex;
  justify-content: center;
}

/* Responsive */
@media (max-width: 992px) {
  .cat-parent {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .cat-parent-icon {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }

  .cat-parent-info {
    flex: 1 1 calc(100% - 120px);
  }

  .cat-parent-stats {
    flex: 1 1 100%;
    justify-content: space-between;
    margin-top: var(--space-xs);
    padding-left: 40px;
  }

  .cat-child {
    flex-wrap: wrap;
  }

  .cat-child-stats {
    flex: 1;
  }
}

@media (max-width: 576px) {

  .cat-parent-budget,
  .cat-parent-total {
    display: none;
  }

  .cat-parent-stats {
    padding-left: 0;
  }

  .cat-child-budget {
    width: 80px;
  }

  .cat-progress-wrap {
    min-width: 70px;
  }
}

/* Desglose de compromisos en categorías fijas */
.commitment-breakdown {
  background: var(--gray-50);
  border-left: 3px solid var(--primary-soft);
  margin-left: 2rem;
  margin-bottom: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.commitment-breakdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px 0;
  font-size: 0.8rem;
  color: var(--gray-600);
}

.commitment-breakdown-item:not(:last-child) {
  border-bottom: 1px dashed var(--gray-200);
}

.commitment-breakdown-item--inactive {
  opacity: 0.5;
  text-decoration: line-through;
}

.commitment-breakdown-contributor {
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.commitment-breakdown-name {
  flex: 1;
  color: var(--gray-700);
}

.commitment-breakdown-amount {
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}

/* Edit icon overlay for categories */
.minimal-category-icon-wrapper,
.cat-parent-icon {
  position: relative;
  cursor: pointer;
}

.edit-icon-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
  color: white;
  font-size: 0.7rem;
}

.minimal-category-icon-wrapper:hover .edit-icon-overlay,
.cat-parent-icon:hover .edit-icon-overlay {
  opacity: 1;
}

/* Category actions for fixed categories */
.minimal-category-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
  margin-right: var(--space-sm);
}

/* Category and subcategory name styles */
.category-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--gray-800);
}

.subcategory-name {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--gray-700);
}

/* Contributor Header - Diseño Destacado */
.contributor-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(to right, #f8f9fa, #eef2ff);
  border-bottom: 1px solid var(--gray-200);
  position: relative;
}

.contributor-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: 0 4px 4px 0;
}

.contributor-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
  flex-shrink: 0;
}

.contributor-initial {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
}

.contributor-info {
  flex: 1;
  min-width: 0;
}

.contributor-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0 0 var(--space-xs) 0;
  letter-spacing: -0.02em;
}

.contributor-stats {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.contributor-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contributor-stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-700);
}

.contributor-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
}

.contributor-stat-divider {
  width: 1px;
  height: 30px;
  background: var(--gray-300);
}

.contributor-available {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  margin-right: var(--space-sm);
}

.contributor-available--positive {
  background: linear-gradient(135deg, var(--success-soft) 0%, rgba(var(--success-rgb), 0.1) 100%);
}

.contributor-available--negative {
  background: linear-gradient(135deg, var(--danger-soft) 0%, rgba(var(--danger-rgb), 0.1) 100%);
}

.contributor-available-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
}

.contributor-available-value {
  font-size: 1.1rem;
  font-weight: 700;
}

.contributor-available--positive .contributor-available-value {
  color: var(--success);
}

.contributor-available--negative .contributor-available-value {
  color: var(--danger);
}

/* Contributor Wrapper - Spacing Update */
.contributor-wrapper {
  margin-bottom: var(--space-xl);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: white;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.contributor-wrapper:last-child {
  margin-bottom: 0;
}

/* Compact Data List for Variables */
.minimal-data-list {
  display: flex;
  flex-direction: column;
}

.minimal-data-item {
  border-bottom: 1px solid var(--gray-200);
}

.minimal-data-item:last-child {
  border-bottom: none;
}

.minimal-data-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  min-height: 48px;
}

.minimal-data-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color) 0%, color-mix(in srgb, var(--color) 80%, white) 100%);
  color: white;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.minimal-data-name {
  flex: 1;
  min-width: 120px;
}

.minimal-data-input {
  width: 100px;
}

.minimal-data-spent {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 70px;
  text-align: right;
}

.minimal-data-spent small {
  font-size: 0.6rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.minimal-data-spent span {
  font-weight: 600;
  color: var(--gray-700);
  font-size: 0.85rem;
}

.minimal-data-allocated {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 80px;
  text-align: right;
}

.minimal-data-allocated small {
  font-size: 0.6rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.minimal-data-allocated span {
  font-weight: 600;
  color: var(--primary);
  font-size: 0.85rem;
}

.minimal-data-progress {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 100px;
}

.minimal-data-progress .minimal-progress-bar {
  flex: 1;
  height: 6px;
}

.minimal-data-progress span {
  font-size: 0.8rem;
  color: var(--gray-600);
  min-width: 35px;
  text-align: right;
}

.minimal-data-badge {
  background: var(--gray-200);
  color: var(--gray-600);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}

.minimal-data-total {
  font-weight: 600;
  color: var(--gray-700);
  min-width: 80px;
  text-align: right;
}

.minimal-data-actions {
  min-width: 32px;
  display: flex;
  justify-content: flex-end;
}

/* Subcategory rows */
.minimal-sub-items {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}

.minimal-sub-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  padding-left: calc(var(--space-sm) + 40px);
  min-height: 40px;
  border-bottom: 1px solid var(--gray-100);
}

.minimal-sub-row:last-child {
  border-bottom: none;
}

.minimal-sub-name {
  flex: 1;
  min-width: 100px;
}

.minimal-sub-name::before {
  content: "└";
  color: var(--gray-400);
  margin-right: var(--space-xs);
}

/* Responsive */
@media (max-width: 768px) {
  .minimal-data-row {
    flex-wrap: wrap;
  }

  .minimal-data-icon {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .minimal-data-name {
    flex: 1 1 calc(100% - 70px);
  }

  .minimal-data-input,
  .minimal-data-spent,
  .minimal-data-progress {
    flex: 1;
    min-width: auto;
  }

  .minimal-data-progress {
    order: 10;
    width: 100%;
    margin-top: var(--space-xs);
  }

  .minimal-sub-row {
    padding-left: var(--space-md);
    flex-wrap: wrap;
  }

  .minimal-sub-name {
    width: 100%;
    margin-bottom: var(--space-xs);
  }
}

/* Empty States */
.minimal-empty-state {
  text-align: center;
  padding: var(--space-md);
  color: var(--gray-500);
}

.minimal-empty-state i {
  font-size: 1.25rem;
  margin-bottom: var(--space-xs);
  opacity: 0.4;
}

.minimal-empty-state p {
  margin: 0;
  font-size: 0.75rem;
}

.minimal-empty-state--large {
  padding: var(--space-xl);
}

.minimal-empty-state--large h3 {
  color: var(--gray-700);
  margin-bottom: var(--space);
}

/* ========== BOTONES ========== */
.btn {
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius);
  border: none;
  font-size: 0.9375rem;
  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: white;
}

.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
}

.btn-secondary:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

.btn-success {
  background: linear-gradient(135deg, var(--success) 0%, #14B8A6 100%);
  color: white;
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger) 0%, #DC2626 100%);
  color: white;
}

.btn-light {
  background: white;
  color: var(--gray-800);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-light:hover {
  background: rgba(255, 255, 255, 0.95);
  color: var(--primary);
  border-color: white;
}

.btn-outline-primary {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  box-shadow: none;
}

.btn-outline-primary:hover {
  background: var(--primary);
  color: white;
}

.btn-outline-light {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: white;
  box-shadow: none;
}

.btn-outline-light:hover {
  background: white;
  color: var(--primary);
  border-color: white;
}

.btn-sm {
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: 1.125rem;
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}

/* Botones Minimalistas */
.minimal-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  justify-content: center;
  min-height: 44px;
  font-family: var(--font-body);
}

.minimal-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.minimal-btn:active {
  transform: translateY(0);
}

.minimal-btn--sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.75rem;
  min-height: 28px;
}

.minimal-btn--lg {
  padding: var(--space-lg) var(--space-xl);
  font-size: 1rem;
  min-height: 52px;
}

.minimal-btn--primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
  box-shadow: var(--shadow-sm);
}

.minimal-btn--primary:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: white;
}

.minimal-btn--success {
  background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
  color: white;
  box-shadow: var(--shadow-sm);
}

.minimal-btn--danger {
  background: linear-gradient(135deg, var(--danger) 0%, var(--danger-light) 100%);
  color: white;
}

.minimal-btn--outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: none;
}

.minimal-btn--outline:hover {
  background: var(--primary);
  color: white;
}

.minimal-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--white);
  color: var(--gray-500);
  font-size: 0.8rem;
  min-width: 28px;
  min-height: 28px;
}

.minimal-action-btn:hover {
  transform: none;
  box-shadow: none;
  color: var(--primary);
  background: var(--primary-soft);
  border-color: var(--primary-light);
}

.minimal-action-btn--danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-light);
}

.minimal-action-btn--danger:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.minimal-action-btn--sm {
  min-width: 24px;
  min-height: 24px;
  font-size: 0.7rem;
  padding: 4px;
}

/* Botones de Acción */
.minimal-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--white);
  color: var(--gray-500);
  font-size: 0.8rem;
  min-width: 28px;
  min-height: 28px;
}

.minimal-action-btn:hover {
  transform: none;
  box-shadow: none;
  color: var(--primary);
  background: var(--primary-soft);
  border-color: var(--primary-light);
}

.minimal-action-btn--danger {
  background: var(--white);
  color: var(--gray-400);
  border-color: var(--gray-200);
}

.minimal-action-btn--danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger-light);
}

.minimal-action-btn--sm {
  min-width: 24px;
  min-height: 24px;
  font-size: 0.7rem;
  padding: 4px;
}

/* ========== FORMULARIOS ========== */
.form-label {
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-control,
.form-select {
  border: 2px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all var(--transition-base);
  background: white;
  color: var(--gray-800);
  font-weight: 500;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
  outline: none;
  background: white;
}

.form-control::placeholder {
  color: var(--gray-400);
  font-weight: 400;
}

.form-control.is-valid {
  border-color: var(--success);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310B981'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 3rem;
}

.form-control.is-invalid {
  border-color: var(--danger);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23EF4444'%3e%3cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 3rem;
}

.input-group {
  position: relative;
}

.input-group-text {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-50) 100%);
  border: 2px solid var(--gray-300);
  color: var(--gray-700);
  font-weight: 700;
  padding: 0.75rem 1rem;
}

.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--gray-300);
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.form-check-input:focus {
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

.form-check-label {
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
}

/* Formularios Minimalistas */
.minimal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.minimal-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}

.minimal-form-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.minimal-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.minimal-form-group--sm {
  flex: 1;
  min-width: 140px;
}

.minimal-form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.minimal-form-row--wrap {
  flex-wrap: wrap;
}

.minimal-select--sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.75rem;
  min-width: 120px;
}

.minimal-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  margin: 0;
}

.minimal-label-sm {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  margin: 0 0 var(--space-xs) 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.minimal-input,
.minimal-select,
.minimal-textarea {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-800);
  background: var(--bg-primary);
  transition: all var(--transition-base);
  font-family: var(--font-body);
}

.minimal-input:focus,
.minimal-select:focus,
.minimal-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.1);
  background: var(--bg-primary);
}

.minimal-input::placeholder,
.minimal-textarea::placeholder {
  color: var(--gray-400);
}

.minimal-input-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  transition: all var(--transition-base);
  overflow: hidden;
}

.minimal-input-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(91, 33, 182, 0.1);
}

/* Allocation input color states */
.minimal-input-group .minimal-input-prefix {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.minimal-input-group .minimal-input {
  background: transparent !important;
}

.minimal-input-prefix {
  padding: var(--space-sm) var(--space-md);
  color: var(--gray-500);
  font-weight: 600;
  font-size: 0.8125rem;
  border-right: 1px solid var(--gray-200);
  background: var(--gray-50);
}

.minimal-input-group .minimal-input {
  border: none;
  box-shadow: none;
  padding: var(--space-sm) var(--space-md);
}

.minimal-input-group--sm {
  max-width: 140px;
}

.minimal-input-group--sm .minimal-input-prefix {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.75rem;
}

.minimal-input-group--sm .minimal-input {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.8125rem;
}

.minimal-input--sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.8125rem;
}

.minimal-textarea {
  resize: vertical;
  min-height: 80px;
}

.minimal-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-weight: 500;
  color: var(--gray-700);
}

.minimal-checkbox input[type=checkbox] {
  display: none;
}

.minimal-checkbox-check {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  transition: all var(--transition-base);
  position: relative;
}

.minimal-checkbox input[type=checkbox]:checked+.minimal-checkbox-check {
  background: var(--primary);
  border-color: var(--primary);
}

.minimal-checkbox input[type=checkbox]:checked+.minimal-checkbox-check::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
}

.minimal-color-input {
  width: 60px;
  height: 40px;
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
}

.minimal-color-input:hover {
  border-color: var(--primary);
}

/* Formularios de Agregar */
.minimal-add-form {
  background: var(--bg-secondary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}

.minimal-add-form-content {
  display: flex;
  gap: var(--space-sm);
  align-items: end;
  flex-wrap: wrap;
}

/* Formulario Agregar Categoría */
.minimal-add-category-form {
  background: var(--bg-primary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-top: var(--space-xl);
  box-shadow: var(--shadow-lg);
}

.minimal-form-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--gray-200);
}

.minimal-form-icon-preview {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #6c757d 0%, #868e96 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.minimal-form-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.minimal-form-subtitle {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin: var(--space-xs) 0 0 0;
}

.minimal-form-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.minimal-form-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-200);
}

/* Icon Grid Selector */
.minimal-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  max-height: 200px;
  overflow-y: auto;
}

.minimal-icon-btn {
  width: 40px;
  height: 40px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--gray-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.minimal-icon-btn:hover {
  border-color: var(--gray-300);
  color: var(--gray-800);
  transform: scale(1.1);
}

.minimal-icon-btn.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  transform: scale(1.1);
}

.minimal-form-group--name,
.minimal-form-group--description {
  margin-bottom: 0;
}

/* Icon Selector */
.icon-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.icon-option {
  cursor: pointer;
}

.icon-option input {
  display: none;
}

.icon-option .icon-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.icon-option input:checked+.icon-preview {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.icon-option:hover .icon-preview {
  border-color: var(--primary-light);
}

/* Color Selector */
.color-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.color-option {
  cursor: pointer;
}

.color-option input {
  display: none;
}

.color-option .color-preview {
  display: block;
  width: 32px;
  height: 32px;
  border: 3px solid transparent;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.color-option input:checked+.color-preview {
  border-color: var(--gray-800);
  transform: scale(1.15);
}

.color-option:hover .color-preview {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .minimal-form-grid {
    grid-template-columns: 1fr;
  }

  .minimal-add-form-content {
    flex-direction: column;
    align-items: stretch;
  }

  .minimal-form-row {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }
}

/* ========== TABLAS ========== */
.table-modern {
  width: 100%;
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
}

.table-modern thead {
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
}

.table-modern thead th {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--gray-700);
  padding: 1rem 1.25rem;
  border-bottom: 2px solid var(--gray-300);
  white-space: nowrap;
}

.table-modern tbody tr {
  border-bottom: 1px solid var(--gray-200);
  transition: all var(--transition-fast);
}

.table-modern tbody tr:hover {
  background: var(--gray-50);
}

.table-modern tbody tr:last-child {
  border-bottom: none;
}

.table-modern tbody td {
  padding: 1rem 1.25rem;
  color: var(--gray-700);
  vertical-align: middle;
}

.table-responsive {
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.table-container {
  overflow-x: auto;
  border-radius: var(--radius);
}

.table-col-actions {
  width: 90px;
}

/* ========== PROGRESS BARS ========== */
.progress {
  height: 8px;
  border-radius: var(--radius);
  background: var(--gray-200);
  overflow: hidden;
}

.progress-lg {
  height: 12px;
}

.progress-bar {
  border-radius: var(--radius);
  transition: width 0.6s ease;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
}

.progress-bar.bg-success {
  background: linear-gradient(90deg, var(--success) 0%, #14B8A6 100%);
}

.progress-bar.bg-warning {
  background: linear-gradient(90deg, var(--warning) 0%, #F59E0B 100%);
}

.progress-bar.bg-danger {
  background: linear-gradient(90deg, var(--danger) 0%, #DC2626 100%);
}

.progress-bar.bg-white {
  background: white;
}

.progress-bar.dynamic {
  width: var(--progress, 0%);
}

/* ========== BADGES & CHIPS ========== */
.badge {
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.badge.bg-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
}

.badge.bg-success {
  background: linear-gradient(135deg, var(--success) 0%, #14B8A6 100%) !important;
}

.badge.bg-danger {
  background: linear-gradient(135deg, var(--danger) 0%, #DC2626 100%) !important;
}

.badge.bg-warning {
  background: linear-gradient(135deg, var(--warning) 0%, #F59E0B 100%) !important;
}

.badge.bg-info {
  background: linear-gradient(135deg, var(--info) 0%, #3B82F6 100%) !important;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.chip-muted {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.chip-primary {
  background-color: rgba(37, 99, 235, 0.12);
  color: var(--primary);
}

.chip i {
  font-size: 0.875rem;
}

.category-badge-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* ========== ALERTS ========== */
.alert {
  border-radius: var(--radius-lg);
  border: none;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: start;
  gap: 0.75rem;
  box-shadow: var(--shadow-sm);
}

.alert-success {
  background: var(--success-soft);
  color: #065F46;
}

.alert-danger {
  background: var(--danger-soft);
  color: #991B1B;
}

.alert-warning {
  background: var(--warning-soft);
  color: #92400E;
}

.alert-info {
  background: var(--info-soft);
  color: #1E40AF;
}

.alert i {
  font-size: 1.25rem;
  margin-top: 0.125rem;
}

.alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
}

/* ========== MODALES ========== */
.modal-content {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
}

.modal-modern .modal-content,
.modal-content.modal-modern {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
  border-bottom: none;
  padding: 1.5rem;
}

.modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

.modal-title {
  font-weight: 700;
  font-size: 1.5rem;
  color: white;
}

.modal-body {
  padding: 2rem;
}

.modal-footer {
  border-top: 1px solid var(--gray-200);
  padding: 1.5rem;
  background: var(--gray-50);
}

/* ========== EMPTY STATE ========== */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: var(--gray-400);
}

.empty-state-title {
  color: var(--gray-900);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.empty-state-description {
  color: var(--gray-600);
  margin-bottom: 1.5rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.empty-state h4 {
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: var(--gray-600);
  margin-bottom: 1.5rem;
}

/* ========== ACCORDION ========== */
.accordion-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg) !important;
  margin-bottom: 1rem;
  overflow: hidden;
  background: white;
}

.accordion-button {
  background: white;
  font-weight: 700;
  color: var(--gray-900);
  padding: 1.25rem 1.5rem;
  border: none;
  transition: all var(--transition-base);
  font-size: 1rem;
}

.accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(236, 72, 153, 0.08) 100%);
  color: var(--primary);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.accordion-button::after {
  filter: grayscale(100%);
}

.accordion-button:not(.collapsed)::after {
  filter: none;
  color: var(--primary);
}

.accordion-body {
  padding: 1.5rem;
  background: white;
}

/* ========== LIST GROUPS ========== */
.list-group-item {
  border-color: var(--gray-200);
  padding: 1rem 1.25rem;
  transition: all var(--transition-fast);
}

.list-group-item:hover {
  background: var(--gray-50);
}

.list-group-flush .list-group-item {
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.list-group-flush .list-group-item:last-child {
  border-bottom: 0;
}

.list-group-flush .list-group-item:first-child {
  border-top: 0;
}

/* ========== LOADING ========== */
.spinner-border {
  border-width: 3px;
}

.btn .spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

/* Alertas Minimalistas */
.minimal-alert {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  position: relative;
  border-left: 4px solid;
}

.minimal-alert--success {
  background: var(--success-soft);
  color: var(--success);
  border-left-color: var(--success);
}

.minimal-alert--danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-left-color: var(--danger);
}

.minimal-alert--warning {
  background: var(--warning-soft);
  color: var(--warning);
  border-left-color: var(--warning);
}

.minimal-alert--info {
  background: var(--info-soft);
  color: var(--info);
  border-left-color: var(--info);
}

.minimal-alert-close {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius);
  transition: all var(--transition-base);
  opacity: 0.7;
}

.minimal-alert-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

.minimal-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.minimal-badge--success {
  background: var(--success-soft);
  color: var(--success);
}

.minimal-badge--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.minimal-badge--warning {
  background: var(--warning-soft);
  color: var(--warning);
}

/* Income Type Badges */
.income-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: var(--space-sm);
  vertical-align: middle;
}

.income-type-badge i {
  font-size: 0.65rem;
}

.income-type-badge--fixed {
  background: #dbeafe;
  color: #2563eb;
}

.income-type-badge--variable {
  background: #fef3c7;
  color: #d97706;
}

/* Confirm Dialog */
.minimal-confirm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.minimal-confirm-content {
  background: var(--bg-primary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-xl);
}

.minimal-confirm-icon {
  width: 64px;
  height: 64px;
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto var(--space-lg);
}

.minimal-confirm-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 var(--space-xs) 0;
}

.minimal-confirm-subtitle {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin: 0 0 var(--space-lg) 0;
  text-align: center;
}

.minimal-confirm-message {
  color: var(--gray-600);
  margin: 0 0 var(--space-xl) 0;
  line-height: 1.6;
  white-space: pre-line;
  text-align: center;
}

.minimal-confirm-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
}

/* Switch Toggle */
.minimal-switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
}

.minimal-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.minimal-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-300);
  transition: var(--transition-base);
  border-radius: 18px;
}

.minimal-switch-slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: var(--transition-base);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.minimal-switch input:checked+.minimal-switch-slider {
  background-color: var(--success);
}

.minimal-switch input:checked+.minimal-switch-slider:before {
  transform: translateX(14px);
}

/* ===================================
   PERÍODO Y INFO DE PRESUPUESTO
   =================================== */
.period-info-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.period-info-card--new {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #a7f3d0;
}

.period-info-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  color: #1e293b;
  margin-bottom: var(--space-md);
  font-size: 0.95rem;
}

.period-info-header i {
  color: var(--primary);
}

.period-info-card--new .period-info-header i {
  color: #10b981;
}

.period-info-details {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.period-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.period-detail-label {
  font-size: 0.75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.period-detail-value {
  font-weight: 600;
  color: #1e293b;
}

.period-detail--highlight {
  background: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid #e2e8f0;
}

.period-detail--highlight .period-detail-value {
  color: var(--primary);
}

.period-info-note {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.8rem;
  color: #047857;
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.period-info-note i {
  margin-top: 2px;
}

/* ===================================
   SELECTOR DE PERÍODO
   =================================== */
.period-selector-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.period-selector-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  color: #0369a1;
  margin-bottom: var(--space-md);
  font-size: 0.95rem;
}

.period-selector-header i {
  color: #0ea5e9;
}

.period-selector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.period-selector-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.period-selector-group .minimal-select {
  background: white;
  border-color: #bae6fd;
}

.period-selector-group .minimal-select:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.period-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.period-preview-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.period-preview-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.9rem;
  color: #64748b;
}

.period-preview-arrow {
  display: none;
}

.period-preview-item i {
  color: #0ea5e9;
  width: 16px;
  text-align: center;
}

.period-preview-item strong {
  color: #0369a1;
}

.period-preview-months {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  margin-left: auto;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.period-preview-months .months-count {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.period-preview-months .months-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.period-selector-card .period-info-note {
  border-top: 1px solid #bae6fd;
  color: #0369a1;
}

/* ===================================
   DISEÑO COMPACTO - INFORMACIÓN BÁSICA
   =================================== */
.period-compact-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}

.period-compact-selectors {
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.period-compact-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.period-compact-group .minimal-label {
  font-size: 0.75rem;
  margin-bottom: 0;
}

.period-compact-group .minimal-select {
  background: white;
  border-color: #bae6fd;
  padding: 8px 12px;
  min-width: 120px;
}

.period-compact-preview {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-left: auto;
  padding: 8px 0;
}

.period-compact-range {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  color: #0369a1;
  font-weight: 500;
}

.period-compact-range i {
  color: #0ea5e9;
}

.period-compact-months {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .period-compact-selectors {
    flex-direction: column;
    align-items: stretch;
  }

  .period-compact-preview {
    margin-left: 0;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .period-selector-grid {
    grid-template-columns: 1fr;
  }

  .period-preview {
    flex-direction: column;
    text-align: center;
  }

  .period-preview-arrow {
    transform: rotate(90deg);
  }

  .period-preview-months {
    margin-left: 0;
    margin-top: var(--space-sm);
  }
}

/* ========== CATEGORIES SECTION ========== */
.categories-section {
  margin-bottom: 3rem;
}

.section-header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-200);
}

.section-header-content {
  flex: 1;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: white;
}

.section-icon--success {
  background: linear-gradient(135deg, var(--success) 0%, #14B8A6 100%);
}

.section-icon--primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.badge-lg {
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Allocation tiles */
.allocation-grid {
  margin-top: 1.5rem;
}

.allocation-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.allocation-tile {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, #fff 100%);
  box-shadow: 0 12px 40px -28px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.allocation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.25rem 0.5rem;
  gap: 1rem;
}

.allocation-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.allocation-title strong {
  font-size: 1.05rem;
}

.allocation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1.25rem 0.75rem;
}

.meta-pill {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: var(--gray-700);
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.allocation-body {
  padding: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.subcategory-line {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.08) 0%, rgba(255, 255, 255, 0.6) 100%);
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 0.75rem;
  align-items: center;
}

.subcategory-line .subtitle {
  color: var(--gray-500);
  font-size: 0.85rem;
}

.subcategory-line .input-group-sm input {
  font-weight: 700;
}

.commitment-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.commitment-pill {
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius);
  background: rgba(37, 99, 235, 0.08);
  border: 1px dashed rgba(37, 99, 235, 0.25);
  color: var(--gray-800);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
}

.commitment-pill .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.85);
}

.commitment-pill.muted {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.35);
  color: var(--gray-600);
}

.category-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.variable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

.variable-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.variable-card {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #f8fbff 100%);
  box-shadow: 0 14px 40px -26px rgba(15, 23, 42, 0.32);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.variable-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.variable-text {
  flex: 1;
  min-width: 0;
}

.variable-text input {
  font-weight: 700;
  font-size: 1.05rem;
}

.variable-type-chip {
  min-width: 170px;
}

.variable-type-chip select {
  border: 2px solid rgba(148, 163, 184, 0.45);
  border-radius: var(--radius);
  font-weight: 700;
  padding: 0.55rem 0.75rem;
  box-shadow: var(--shadow-sm);
}

.variable-card h6 {
  margin: 0;
}

.category-datum {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.9rem;
  color: var(--gray-600);
  width: 100%;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  box-shadow: var(--shadow-sm);
}

.category-datum strong {
  color: var(--gray-900);
}

.category-note {
  grid-column: 1/-1;
  color: var(--gray-500);
  font-size: 0.85rem;
}

.allocation-progress {
  grid-column: 1/-1;
}

.subtitle {
  color: var(--gray-500);
  font-size: 0.9rem;
}

.category-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.category-datum .input-group {
  min-width: 240px;
}

.category-datum select,
.category-datum input,
.variable-type-chip select {
  font-size: 0.95rem;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
  color: white !important;
}

.bg-gradient-primary h5,
.bg-gradient-primary p {
  color: white !important;
}

.name-edit-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.name-edit-input {
  flex: 1;
  background: #f8fafc;
  border: 2px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  transition: border var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  font-weight: 700;
}

.name-edit-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  background: #fff;
  outline: none;
}

.name-edit-btn {
  white-space: nowrap;
}

.type-select-compact {
  min-width: 160px;
  border: 2px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--radius);
  font-weight: 700;
  padding: 0.45rem 0.65rem;
  background: #fff;
}

/* Fixed Categories */
.fixed-category-card {
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}

.fixed-category-card .accordion-button {
  background: white;
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
}

.fixed-category-card .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(20, 184, 166, 0.05) 100%);
}

/* Subcategories */
.subcategories-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.subcategory-card {
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.subcategory-card-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.subcategory-name-col input {
  font-weight: 600;
  color: var(--gray-900);
}

.subcategory-amount-col {
  min-width: 150px;
}

.subcategory-action-col {
  display: flex;
  align-items: center;
}

.subcategory-info {
  padding: 0.5rem 0;
  border-top: 1px solid var(--gray-200);
  margin-top: 0.5rem;
}

.commitments-breakdown {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--gray-50);
  border-radius: var(--radius);
}

.commitment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gray-200);
}

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

.commitment-item.inactive {
  opacity: 0.5;
}

.commitment-details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.commitment-contributor {
  font-weight: 600;
  color: var(--gray-800);
  font-size: 0.875rem;
}

.commitment-name {
  font-size: 0.75rem;
  color: var(--gray-600);
}

.commitment-amount {
  font-weight: 700;
  color: var(--success);
  font-size: 0.9375rem;
}

/* Variable Categories */
.variable-categories-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.variable-category-card {
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all var(--transition-base);
}

.variable-category-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
}

.variable-card-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 1.5rem;
  align-items: start;
}

.variable-icon-col .stat-card-icon {
  width: 56px;
  height: 56px;
  margin: 0;
}

.variable-name-col {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.variable-name-col input {
  font-weight: 600;
  font-size: 1rem;
  color: var(--gray-900);
}

.variable-type-col {
  min-width: 130px;
}

.variable-amount-col {
  min-width: 180px;
}

.variable-action-col {
  display: flex;
  align-items: flex-start;
  padding-top: 0.5rem;
}

.editable-category-name {
  border: 2px solid transparent;
  background: transparent;
  transition: all var(--transition-base);
}

.editable-category-name:hover {
  border-color: var(--gray-300);
  background: white;
}

.editable-category-name:focus {
  border-color: var(--primary);
  background: white;
}

.category-type-select {
  font-weight: 600;
}

.update-actions-section {
  padding-top: 2rem;
}

.add-category-form {
  background: var(--gray-50) !important;
  border: 2px solid var(--gray-300) !important;
}

/* Responsive categories */
@media (max-width: 992px) {
  .variable-card-header {
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }

  .variable-type-col,
  .variable-amount-col,
  .variable-action-col {
    grid-column: 1/-1;
  }

  .subcategory-card-header {
    grid-template-columns: 1fr;
  }

  .subcategory-amount-col,
  .subcategory-action-col {
    margin-top: 0.5rem;
  }

  .section-header-wrapper {
    flex-direction: column;
    gap: 1rem;
  }
}

.child-budget-available {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--primary-soft);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  color: var(--primary-dark);
  font-weight: 500;
  box-shadow: 0 4px 6px -1px rgba(139, 92, 246, 0.1);
}

.child-budget-available i {
  font-size: 1.25rem;
  color: var(--primary);
}

.child-budget-available strong {
  font-size: 1.1em;
  color: var(--primary);
  margin-left: 0.25rem;
}

/* Categorías */
.minimal-category-section {
  margin-bottom: var(--space-xl);
}

.minimal-category-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.minimal-category-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.7rem;
}

.minimal-category-icon--success {
  background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
}

.minimal-category-icon--primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

/* Subcategory Icon */
.minimal-subcategory-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--subcat-color, #6c757d) 15%, transparent);
  color: var(--subcat-color, #6c757d);
}

/* Add Category/Subcategory Buttons */
.add-subcategory-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  margin: var(--space-sm) 0 var(--space-xs) var(--space-md);
  background: transparent;
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-sm);
  color: var(--gray-500);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.add-subcategory-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.add-subcategory-btn i {
  font-size: 0.7rem;
}

.add-subcategory-btn--compact {
  margin: var(--space-xs) 0;
  margin-left: calc(var(--space-md) + 36px + var(--space-sm));
  padding: var(--space-xs) var(--space-sm);
}

.add-category-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  background: var(--white);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-md);
  color: var(--gray-500);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.add-category-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.add-category-btn i {
  font-size: 1rem;
}

.minimal-category-total {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-soft);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.minimal-category-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-primary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.minimal-category-item {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  transition: none;
  border-bottom: 1px solid var(--gray-100);
}

.minimal-category-item:last-child {
  border-bottom: none;
}

.minimal-category-item:hover {
  box-shadow: none;
  transform: none;
  background: var(--gray-50);
}

.minimal-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: transparent;
  border-bottom: none;
  gap: var(--space-md);
}

.minimal-category-main {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
}

.minimal-category-icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.875rem;
  background: var(--color);
  box-shadow: none;
  flex-shrink: 0;
}

.minimal-category-info {
  flex: 1;
  min-width: 0;
}

.minimal-category-type {
  display: inline;
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-left: var(--space-sm);
}

.minimal-category-stats {
  text-align: right;
}

.minimal-category-amount {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-heading);
}

.minimal-category-body {
  padding: 0 var(--space-lg) var(--space-md);
  margin-left: calc(32px + var(--space-sm));
}

/* Subcategorías */
.minimal-subcategory-item {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  transition: all var(--transition-fast);
  overflow: hidden;
}

.minimal-subcategory-item:last-child {
  margin-bottom: 0;
}

.minimal-subcategory-item:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.minimal-subcategory-main {
  flex: 1;
  font-weight: 500;
  color: var(--gray-700);
  font-size: 0.875rem;
  min-width: 0;
}

.minimal-subcategory-main .minimal-inline-input {
  font-size: 0.875rem;
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
}

.minimal-subcategory-amount {
  width: 110px;
  flex-shrink: 0;
}

.minimal-subcategory-amount .minimal-input-group {
  border-width: 1px;
}

.minimal-subcategory-amount .minimal-input {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.875rem;
}

.minimal-subcategory-amount .minimal-input-prefix {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.8125rem;
}

.minimal-subcategory-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.minimal-subcategory-actions .minimal-action-btn,
.minimal-subcategory-actions .minimal-action-btn--sm {
  border: none;
  background: transparent;
  min-width: 24px;
  min-height: 24px;
}

.minimal-subcategory-actions .minimal-action-btn:hover {
  background: var(--gray-200);
}

.minimal-empty-subcategories {
  text-align: center;
  padding: var(--space-md);
  color: var(--gray-400);
  font-size: 0.8125rem;
  font-style: italic;
}

/* Categorías Variables - Compacto */
.minimal-variable-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--gray-100);
  border-radius: 0;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: 0;
  transition: background var(--transition-fast);
}

.minimal-variable-item:last-child {
  border-bottom: none;
}

.minimal-variable-item:hover {
  box-shadow: none;
  transform: none;
  background: var(--gray-50);
}

.minimal-variable-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.minimal-variable-icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.875rem;
  background: var(--color);
  box-shadow: none;
  flex-shrink: 0;
}

.minimal-variable-info {
  flex: 1;
  min-width: 0;
}

.minimal-variable-info .minimal-inline-input {
  font-size: 0.9375rem;
  padding: var(--space-xs) var(--space-sm);
}

.minimal-variable-amounts {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-shrink: 0;
}

.minimal-variable-allocated {
  width: 120px;
}

.minimal-variable-allocated .minimal-label-sm {
  display: none;
}

/* ========================================
   SECCIÓN DE AHORRO
   ======================================== */
.savings-section {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #86efac;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin-top: var(--space-xl);
  position: relative;
  overflow: hidden;
}

.savings-section::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.savings-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}

.savings-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.savings-title-area {
  flex: 1;
}

.savings-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #166534;
  margin: 0 0 4px 0;
}

.savings-subtitle {
  font-size: 0.875rem;
  color: #15803d;
  margin: 0;
  opacity: 0.8;
}

.savings-body {
  position: relative;
  z-index: 1;
}

.savings-row {
  margin-bottom: var(--space-lg);
}

.savings-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.savings-item-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b45309;
  font-size: 1rem;
}

.savings-item-info {
  flex: 1;
}

.savings-item-label {
  display: block;
  font-weight: 600;
  color: var(--gray-800);
  font-size: 0.95rem;
}

.savings-item-description {
  display: block;
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 2px;
}

.savings-item-input {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.savings-item-input .minimal-input-group {
  max-width: 150px;
}

.savings-item-input .minimal-btn {
  white-space: nowrap;
  padding: var(--space-xs) var(--space-md);
  font-size: 0.85rem;
}

.savings-summary {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.savings-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
}

.savings-summary-item:not(:last-child):not(.savings-summary-item--result) {
  border-bottom: 1px dashed var(--gray-200);
}

.savings-summary-label {
  font-size: 0.9rem;
  color: var(--gray-600);
}

.savings-summary-value {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gray-800);
}

.savings-summary-value--expense {
  color: #dc2626;
}

.savings-summary-value--savings {
  color: #16a34a;
}

.savings-summary-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gray-300), transparent);
  margin: var(--space-sm) 0;
}

.savings-summary-item--result {
  padding-top: var(--space-md);
}

.savings-summary-item--result .savings-summary-label {
  font-weight: 600;
}

.savings-summary-item--positive .savings-summary-value {
  color: #16a34a;
}

.savings-summary-item--negative .savings-summary-value {
  color: #dc2626;
}

.savings-total {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: white;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.savings-total-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  backdrop-filter: blur(10px);
}

.savings-total-info {
  flex: 1;
}

.savings-total-label {
  display: block;
  font-size: 0.85rem;
  opacity: 0.9;
  margin-bottom: 2px;
}

.savings-total-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.savings-total-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  backdrop-filter: blur(10px);
}

.savings-total-badge--bonus {
  background: rgba(255, 255, 255, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

.savings-total-badge--danger {
  background: rgba(239, 68, 68, 0.3);
}

.savings-total-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 255, 255, 0.2);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.9;
}

.breakdown-item i {
  font-size: 0.7rem;
  opacity: 0.8;
}

.savings-total--warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* Advertencias de Ahorro */
.savings-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.savings-warning i {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.savings-warning-content {
  flex: 1;
}

.savings-warning-content strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.savings-warning-content p {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.9;
}

.savings-warning--danger {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #fecaca;
  color: #991b1b;
}

.savings-warning--danger i {
  color: #ef4444;
}

.savings-warning--warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  color: #92400e;
}

.savings-warning--warning i {
  color: #f59e0b;
}

.savings-warning--info {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.savings-warning--info i {
  color: #10b981;
}

/* Input states para ahorro */
.input--warning {
  border-color: #f59e0b !important;
  background: #fffbeb !important;
}

.input--warning:focus {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

.input--success {
  border-color: #10b981 !important;
  background: #ecfdf5 !important;
}

.input--success:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

/* Item bonus en summary */
.savings-summary-item--bonus {
  color: #10b981;
}

.savings-summary-item--bonus .savings-summary-value {
  color: #10b981;
  font-weight: 600;
}

/* Panel de Acciones Sugeridas */
.savings-actions-panel {
  background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
  border: 1px solid #fecaca;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.savings-actions-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  color: #991b1b;
  margin-bottom: var(--space-md);
  font-size: 0.95rem;
}

.savings-actions-title i {
  color: #ef4444;
}

.savings-actions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.savings-action-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 1px solid #fecaca;
  transition: all 0.2s ease;
}

.savings-action-item:hover {
  border-color: #f87171;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
}

.savings-action-item>i {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc2626;
  flex-shrink: 0;
}

.savings-action-item>div {
  flex: 1;
}

.savings-action-item>div strong {
  display: block;
  font-size: 0.9rem;
  color: #1f2937;
  margin-bottom: 2px;
}

.savings-action-item>div p {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.savings-action-item>button {
  flex-shrink: 0;
}

/* Panel de Sugerencias para ajustar meta */
.savings-suggestions-panel {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.savings-suggestions-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  color: #92400e;
  margin-bottom: var(--space-md);
  font-size: 0.95rem;
}

.savings-suggestions-title i {
  color: #f59e0b;
}

.savings-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
}

.savings-suggestion-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.savings-suggestion-card:hover {
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  transform: translateY(-2px);
}

.suggestion-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.suggestion-icon--primary {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #2563eb;
}

.suggestion-icon--warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #d97706;
}

.suggestion-content {
  flex: 1;
}

.suggestion-content strong {
  display: block;
  font-size: 0.9rem;
  color: #1f2937;
  margin-bottom: 4px;
}

.suggestion-content p {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7280;
}

/* Sugerencias de Meta */
.savings-goal-suggestions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.goal-suggestions-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #065f46;
}

.goal-suggestions-buttons {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.goal-suggestion-btn {
  padding: var(--space-xs) var(--space-sm);
  background: white;
  border: 1px solid #a7f3d0;
  border-radius: 50px;
  font-size: 0.8rem;
  color: #065f46;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.goal-suggestion-btn:hover {
  background: #10b981;
  color: white;
  border-color: #10b981;
}

.goal-suggestion-btn--highlight {
  background: #10b981;
  color: white;
  border-color: #10b981;
}

.goal-suggestion-btn--highlight:hover {
  background: #059669;
  border-color: #059669;
}

/* Intro con éxito */
.savings-intro--success {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.savings-intro-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.savings-intro-content {
  flex: 1;
}

.savings-intro-content strong {
  display: block;
  color: #065f46;
  font-size: 1rem;
  margin-bottom: 4px;
}

.savings-intro-content p {
  margin: 0;
  color: #047857;
  font-size: 0.875rem;
}

/* ===================================
   PROYECCIÓN ANUAL DE AHORRO
   =================================== */
.annual-savings-projection {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.annual-projection-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-weight: 600;
  color: #0369a1;
}

.annual-projection-header i {
  color: #0ea5e9;
}

.annual-months-badge {
  margin-left: auto;
  background: #0ea5e9;
  color: white;
  padding: 2px 10px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
}

.annual-projection-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.annual-projection-item {
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  background: white;
  border-radius: var(--radius-md);
  min-width: 80px;
}

.annual-projection-label {
  display: block;
  font-size: 0.7rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.annual-projection-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0369a1;
}

.annual-projection-item--total {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.annual-projection-item--total .annual-projection-label {
  color: rgba(255, 255, 255, 0.8);
}

.annual-projection-item--total .annual-projection-value {
  color: white;
  font-size: 1.25rem;
}

.annual-projection-arrow {
  color: #94a3b8;
  font-size: 0.9rem;
}

/* Proyección con advertencia */
.annual-savings-projection.projection--warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fcd34d;
}

.projection--warning .annual-projection-header {
  color: #92400e;
}

.projection--warning .annual-projection-header i {
  color: #f59e0b;
}

.projection--warning .annual-months-badge {
  background: #f59e0b;
}

.projection--warning .annual-projection-item--total {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.projection-warning-message {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(245, 158, 11, 0.1);
  border-radius: var(--radius-md);
  color: #92400e;
  font-size: 0.85rem;
  font-weight: 500;
}

.projection-warning-message i {
  color: #f59e0b;
}

/* Resumen con advertencias */
.savings-summary-item--warning {
  background: #fffbeb;
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  margin: 0 calc(-1 * var(--space-sm));
}

.savings-summary-item--deficit {
  background: #fef2f2;
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  margin: 0 calc(-1 * var(--space-sm));
}

.meta-warning-tag {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: var(--space-xs);
  font-weight: 600;
}

.savings-summary-value--danger {
  color: var(--danger) !important;
}

.savings-total--caution {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border-color: #fcd34d !important;
}

.savings-total--caution .savings-total-icon {
  background: #f59e0b;
}

.savings-total-badge--warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* ===================================
   SAVINGS COMPARISON PANEL
   Comparación Meta vs Realidad
   =================================== */
.savings-comparison-panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-md);
  align-items: center;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 2px solid #fb923c;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}

.comparison-column {
  text-align: center;
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

.comparison-column--meta {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px dashed #f59e0b;
}

.comparison-column--real {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 1px solid #10b981;
}

.comparison-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.comparison-header i {
  font-size: 1rem;
}

@media (max-width: 640px) {
  .savings-suggestions-grid {
    grid-template-columns: 1fr;
  }

  .savings-goal-suggestions {
    flex-direction: column;
    align-items: flex-start;
  }

  .goal-suggestions-buttons {
    width: 100%;
    justify-content: flex-start;
  }

  .savings-action-item {
    flex-wrap: wrap;
  }

  .savings-action-item>button {
    width: 100%;
    margin-top: var(--space-sm);
  }
}

/* ========================================
   SECCIÓN DE AHORRO (CONTINUACIÓN)
   ======================================== */
.usage-item-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.usage-item-amount {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.usage-item-delete {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0;
}

.usage-history-modal-item:hover .usage-item-delete {
  opacity: 1;
}

.usage-item-delete:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.usage-history-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
}

/* Botón usar ahorro */
.btn-use-savings {
  width: 100%;
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  transition: all 0.2s ease;
}

.btn-use-savings:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(91, 33, 182, 0.3);
}

/* Historial de uso */
.savings-usage-history {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-200);
}

.savings-usage-history h4 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.savings-usage-history h4 i {
  color: var(--primary);
}

.usage-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.usage-history-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.usage-history-item:hover {
  background: var(--bg-tertiary);
}

.usage-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.usage-info {
  flex: 1;
  min-width: 0;
}

.usage-description {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usage-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.usage-amount {
  font-weight: 600;
  color: var(--danger);
  flex-shrink: 0;
}

.usage-delete {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s ease;
}

.usage-history-item:hover .usage-delete {
  opacity: 1;
}

.usage-delete:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.btn-view-all-history {
  width: 100%;
  margin-top: var(--space-md);
  padding: var(--space-sm);
  background: transparent;
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-view-all-history:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

/* Modal de uso de ahorro */
.use-savings-available {
  text-align: center;
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.use-savings-available strong {
  font-size: 1.25rem;
}

.input-hint {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Summary items en header colapsable */
.collapsible-summary {
  display: flex;
  gap: var(--space-md);
  margin-right: var(--space-md);
}

.summary-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.summary-item i {
  font-size: 0.75rem;
}

.summary-item--primary {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 768px) {
  .savings-accumulated-summary {
    grid-template-columns: 1fr;
  }

  .collapsible-summary {
    display: none;
  }

  .savings-categories-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .savings-comparison-panel {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .comparison-vs {
    flex-direction: row;
  }

  .comparison-vs i {
    transform: rotate(90deg);
  }
}

@media (max-width: 640px) {
  .period-info-details {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .income-type-selector {
    flex-direction: row;
  }

  .annual-projection-grid {
    flex-direction: column;
  }

  .annual-projection-arrow {
    transform: rotate(90deg);
  }
}

/* ===================================
   SAVINGS PERIOD INDICATOR
   =================================== */
.savings-period-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  color: #1d4ed8;
  font-weight: 500;
  margin-bottom: var(--space-md);
}

.savings-period-indicator i {
  color: #3b82f6;
}

.savings-total-monthly {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 2px;
}

/* ===================================
   VARIABLE INCOME MANAGEMENT SECTION
   =================================== */
.variable-income-section {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 1px solid #fcd34d;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-md);
}

.variable-income-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.variable-income-header h5 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #b45309;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.variable-income-header h5 i {
  color: #f59e0b;
}

.variable-income-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.month-income-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: white;
  border: 1px solid #e5e7eb;
  padding: 4px 8px;
  border-radius: 50px;
  font-size: 0.7rem;
}

.month-income-chip--filled {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.month-income-chip--pending {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.month-income-chip i {
  font-size: 0.6rem;
}

/* ===================================
   MONTHLY INCOME MODAL
   =================================== */
.monthly-income-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.monthly-income-modal.active {
  display: flex;
}

.monthly-income-modal-content {
  background: white;
  border-radius: var(--radius-xl);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.monthly-income-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.monthly-income-modal-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.monthly-income-modal-title i {
  font-size: 1.25rem;
}

.monthly-income-modal-title h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.monthly-income-modal-title small {
  display: block;
  font-size: 0.75rem;
  opacity: 0.85;
  font-weight: 400;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.monthly-income-modal-body {
  padding: var(--space-lg);
  max-height: 400px;
  overflow-y: auto;
}

.monthly-income-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}

.month-input-group {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  transition: all 0.2s ease;
}

.month-input-group:focus-within {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.month-input-group--saved {
  border-color: #86efac;
  background: #f0fdf4;
}

.month-input-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.month-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.month-input-wrapper span {
  color: #9ca3af;
  font-weight: 500;
}

.month-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  padding: var(--space-xs) 0;
  outline: none;
}

.month-input::placeholder {
  color: #d1d5db;
  font-weight: 400;
}

.month-status-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.month-input-group--saved .month-status-icon {
  opacity: 1;
  background: #22c55e;
  color: white;
}

.monthly-income-modal-footer {
  padding: var(--space-md) var(--space-lg);
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-total-summary {
  font-size: 0.85rem;
  color: #6b7280;
}

.modal-total-summary strong {
  color: #1f2937;
  font-size: 1rem;
}

@media (max-width: 480px) {
  .monthly-income-grid {
    grid-template-columns: 1fr;
  }

  .monthly-income-modal-footer {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* ===================================
   VARIABLE INCOME SUMMARY (in contributor card)
   =================================== */
.variable-income-summary {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-sm);
}

.variable-income-summary .variable-income-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.8rem;
  font-weight: 600;
  color: #92400e;
  margin-bottom: var(--space-sm);
}

.variable-income-summary .variable-income-header i {
  color: #f59e0b;
}

.variable-income-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.variable-income-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.variable-income-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
}

.variable-income-stat-label {
  font-size: 0.7rem;
  color: #78716c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Monthly Income Display Grid */
.monthly-income-display {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
}

.month-display-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: all 0.2s ease;
}

.month-display-item--filled {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border: 1px solid #86efac;
}

.month-display-item--empty {
  background: #f9fafb;
  border: 1px dashed #d1d5db;
}

.month-display-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 2px;
}

.month-display-item--filled .month-display-label {
  color: #166534;
}

.month-display-value {
  font-size: 0.75rem;
  font-weight: 700;
  color: #374151;
}

.month-display-item--filled .month-display-value {
  color: #15803d;
}

.month-display-item--empty .month-display-value {
  color: #9ca3af;
  font-weight: 400;
}

/* Layout Single Column for Create Mode */
.minimal-layout--single {
  display: flex !important;
  justify-content: center;
  grid-template-columns: none !important;
  width: 100%;
}

/* ===================================
   SAVINGS DISTRIBUTION SECTION
   =================================== */
.savings-distribution-section {
  background: var(--bg-primary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
}

.savings-distribution-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--gray-200);
}

.savings-distribution-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.savings-distribution-title i {
  font-size: 1.25rem;
  color: var(--primary);
}

.savings-distribution-title h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.savings-distribution-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.distribution-total {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.distribution-total strong {
  color: var(--primary);
  font-size: 1.1rem;
}

.distribution-remaining {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.distribution-remaining strong {
  color: var(--warning);
}

.savings-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.savings-category-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: relative;
  transition: all 0.2s ease;
}

.savings-category-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 4px 12px rgba(91, 33, 182, 0.1);
}

.savings-category-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
}

.savings-category-info {
  flex: 1;
  min-width: 0;
}

.savings-category-name {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.savings-category-input-group {
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-xs);
}

.savings-category-input-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.1);
}

.savings-category-input-group .input-prefix,
.savings-category-input-group .input-suffix,
.input-prefix {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.875rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
}

.savings-category-amount {
  flex: 1;
  border: none;
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  min-width: 60px;
}

.savings-category-amount:focus {
  outline: none;
}

/* Botón guardar monto */
.btn-save-amount {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--success);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-save-amount:hover {
  background: var(--success-dark, #059669);
}

.btn-save-amount.saving {
  background: var(--gray-400);
  cursor: wait;
}

.savings-category-input-group.has-changes {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.savings-category-percentage {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.percentage-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 35px;
}

.percentage-bar {
  flex: 1;
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.percentage-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Action buttons container */
.savings-category-actions {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.savings-category-card:hover .savings-category-actions {
  opacity: 1;
}

.savings-category-edit,
.savings-category-delete {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 0.75rem;
}

.savings-category-edit:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.savings-category-delete:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Add Category Card */
.savings-category-add {
  display: flex !important;
  border: 2px dashed var(--primary-light) !important;
  background: var(--primary-soft) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 180px;
  cursor: pointer;
  transition: all 0.2s ease;
  order: 999;
  /* Siempre al final */
}

/* Tarjetas bloqueadas al final pero antes del botón agregar */
.savings-category-card--locked {
  order: 100;
}

.savings-category-add:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.savings-category-add-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  margin-bottom: var(--space-sm);
  transition: all 0.2s ease;
}

.savings-category-add:hover .savings-category-add-icon {
  background: var(--primary-dark);
  color: white;
  transform: scale(1.1);
}

.savings-category-add-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
}

.savings-category-add:hover .savings-category-add-text {
  color: var(--primary-dark);
}

/* Distribution Footer */
.savings-distribution-footer {
  padding-top: var(--space-md);
  border-top: 1px solid var(--gray-200);
}

.distribution-progress-bar {
  height: 10px;
  background: var(--gray-200);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.distribution-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: 5px;
  transition: width 0.3s ease;
}

.distribution-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.text-warning {
  color: var(--warning) !important;
}

.text-danger {
  color: var(--danger) !important;
}

.text-success {
  color: var(--success) !important;
}

@media (max-width: 640px) {
  .savings-distribution-header {
    flex-direction: column;
    align-items: stretch;
  }

  .savings-distribution-summary {
    align-items: flex-start;
  }

  .savings-categories-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   SAVINGS DISTRIBUTION - COLLAPSIBLE
   =================================== */
#savings-distribution-section .collapsible-content {
  padding: var(--space-lg);
}

/* Resumen de ahorro acumulado */
.savings-accumulated-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
}

.accumulated-stat {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
}

.accumulated-stat--highlight {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.accumulated-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.accumulated-icon--saved {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #2563eb;
}

.accumulated-icon--used {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #d97706;
}

.accumulated-icon--available {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #059669;
}

.accumulated-info {
  display: flex;
  flex-direction: column;
}

.accumulated-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.accumulated-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.accumulated-info small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Barra de distribución */
.distribution-bar-section,
.distribution-bar-container {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.distribution-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Cards de categorías mejoradas */
.savings-category-card {
  position: relative;
  min-height: 180px;
}

.savings-category-card--locked {
  opacity: 0.6;
  pointer-events: none;
}

.savings-category-card--locked .savings-category-info {
  filter: blur(1px);
}

.locked-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--space-md);
  border-radius: var(--radius-md);
  pointer-events: none;
}

.locked-badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  color: var(--text-muted);
}

.locked-badge i {
  font-size: 0.85rem;
  color: var(--gray-500);
}

.locked-badge span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.input-group--locked {
  opacity: 0.5;
}

/* Proyección anual */
.savings-category-annual {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.savings-category-annual i {
  color: var(--primary-light);
}

.savings-category-annual span {
  font-weight: 600;
  color: var(--primary);
}

/* Ahorro acumulado por rubro */
.savings-category-accumulated {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--gray-200);
}

.accumulated-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  padding: 2px 0;
}

.accumulated-row span {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.accumulated-row i {
  font-size: 0.7rem;
}

.accumulated-row--highlight {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--gray-200);
}

/* Fila de "Usado" clickeable */
.accumulated-row--clickable {
  cursor: pointer;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}

.accumulated-row--clickable:hover {
  background: var(--gray-100);
}

.accumulated-row--clickable .usage-amount {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
}

.accumulated-row--clickable .usage-amount.has-usage {
  color: var(--primary);
  font-weight: 500;
}

.accumulated-row--clickable .usage-amount i {
  font-size: 0.6rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.accumulated-row--clickable:hover .usage-amount i {
  opacity: 1;
}

/* ===================================
   TIPO DE INGRESO
   =================================== */
.income-type-selector {
  display: flex;
  gap: var(--space-sm);
}

.income-type-option {
  flex: 1;
  cursor: pointer;
}

.income-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.income-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm);
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  font-size: 0.8rem;
  color: #64748b;
}

.income-type-card i {
  font-size: 1rem;
}

.income-type-option input:checked+.income-type-card {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.income-type-option input[value=variable]:checked+.income-type-card {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #d97706;
}

.income-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: var(--space-xs);
  vertical-align: middle;
}

.income-type-badge--fixed {
  background: #dbeafe;
  color: #2563eb;
}

.income-type-badge--variable {
  background: #fef3c7;
  color: #d97706;
}

.income-type-badge i {
  font-size: 0.65rem;
}

/* Indicador de Ingresos Variables */
.income-variable-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-xs);
  color: #f59e0b;
  position: relative;
  cursor: help;
}

.income-variable-indicator i {
  font-size: 0.75rem;
}

.variable-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 10;
}

.variable-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1f2937;
}

.income-variable-indicator:hover .variable-tooltip {
  opacity: 1;
  visibility: visible;
  bottom: calc(100% + 8px);
}

/* ============================================
   ESTILOS PARA VISTA DE HIJOS (children.php)
   ============================================ */
/* Body específico para vista de hijos */
.child-view {
  background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
  min-height: 100vh;
  font-family: var(--font-body);
}

/* Header para hijos */
.child-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.child-header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.child-profile {
  display: flex;
  align-items: center;
  gap: 20px;
}

.child-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  font-size: 35px;
}

.child-profile-info h1 {
  margin: 0 0 5px 0;
  font-size: 28px;
  font-weight: 700;
}

.child-profile-info p {
  margin: 0;
  opacity: 0.9;
  font-size: 16px;
}

.btn-child-action {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 12px 24px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
  backdrop-filter: blur(10px);
}

.btn-child-action:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Container principal */
.child-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

/* Alertas para hijos */
.child-alert {
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  animation: slideDown 0.3s ease;
}

.child-alert--success {
  background: #d1fae5;
  color: #065f46;
  border: 2px solid #6ee7b7;
}

.child-alert--danger {
  background: #fee2e2;
  color: #991b1b;
  border: 2px solid #fca5a5;
}

.child-alert i {
  font-size: 20px;
}

/* Tarjeta de resumen */
.child-summary-card {
  background: white;
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.summary-emoji {
  font-size: 80px;
  margin-bottom: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

.child-summary-card h2 {
  font-size: 26px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 30px;
}

.child-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.summary-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f9fafb;
  padding: 20px;
  border-radius: 16px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.stat-info {
  text-align: left;
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
}

.child-progress-bar {
  width: 100%;
  height: 20px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s ease;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.progress-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 600;
}

/* Secciones */
.child-section {
  background: white;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

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

.section-header h3 {
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.btn-child-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-child-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-child-secondary {
  background: #e5e7eb;
  color: #374151;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-child-secondary:hover {
  background: #d1d5db;
}

/* Grid de categorías */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.child-category-card {
  background: #f9fafb;
  border-radius: 16px;
  padding: 20px;
  border-left: 4px solid #667eea;
  transition: all 0.3s;
}

.child-category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.category-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.category-header h4 {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.btn-category-edit {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s;
}

.btn-category-edit:hover {
  background: #e5e7eb;
  color: #374151;
}

.category-amounts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.amount-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.amount-item span {
  color: #6b7280;
}

.amount-item strong {
  color: #1f2937;
  font-weight: 700;
}

.category-progress-bar {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 12px;
}

.progress-fill-small {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* Formulario */
.child-form {
  background: #f9fafb;
  padding: 25px;
  border-radius: 16px;
}

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

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
  font-size: 14px;
}

.child-input,
.child-color-input {
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.3s;
}

.child-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.input-with-prefix {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-prefix span {
  position: absolute;
  left: 16px;
  font-weight: 700;
  color: #6b7280;
}

.input-with-prefix .child-input {
  padding-left: 36px;
}

.btn-child-submit {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-child-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

/* Lista de gastos */
.expenses-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.expense-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f9fafb;
  padding: 16px;
  border-radius: 12px;
  transition: all 0.3s;
}

.expense-item:hover {
  background: #f3f4f6;
}

.expense-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.expense-info {
  flex: 1;
}

.expense-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.expense-meta {
  font-size: 13px;
  color: #6b7280;
}

.expense-amount {
  font-size: 20px;
  font-weight: 700;
  color: #ef4444;
}

.btn-delete-expense {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s;
}

.btn-delete-expense:hover {
  background: #fee2e2;
}

.btn-edit-expense {
  background: none;
  border: 1px solid #e5e7eb;
  color: #4f46e5;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s;
}

.btn-edit-expense:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.expenses-total {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #e5e7eb;
  text-align: right;
  font-size: 18px;
  color: #6b7280;
}

.expenses-total strong {
  color: #1f2937;
  font-size: 24px;
}

/* Estado vacío */
.child-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #9ca3af;
}

.child-empty-state i {
  font-size: 80px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.child-empty-state p {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #6b7280;
}

.child-empty-state small {
  font-size: 14px;
}

/* Modal */
.child-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.child-modal-content {
  background: white;
  border-radius: 20px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.child-modal-header {
  padding: 25px 30px;
  border-bottom: 2px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.child-modal-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
}

.child-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s;
}

.child-modal-close:hover {
  background: #f3f4f6;
  color: #374151;
}

.child-modal-content form {
  padding: 30px;
}

.child-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}

.child-modal-actions button {
  flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .child-header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .child-profile {
    flex-direction: column;
  }

  .child-summary-grid {
    grid-template-columns: 1fr;
  }

  .categories-grid {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
    gap: 16px;
  }

  .section-header h3 {
    text-align: center;
  }
}

/* Estilos para budget-setup.php - Sección de hijos */
.child-budgets-intro {
  background: #f0f4f8;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.child-budgets-intro i {
  color: #8b5cf6;
  font-size: 20px;
}

.child-budgets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-top: 25px;
}

.child-budget-card {
  background: white;
  border-radius: 16px;
  border: 2px solid #e5e7eb;
  overflow: hidden;
  transition: all 0.3s;
}

.child-budget-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.child-budget-card--inactive {
  opacity: 0.6;
  filter: grayscale(50%);
}

.child-budget-header {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.child-budget-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 30px;
}

.child-budget-info {
  flex: 1;
}

.child-budget-info h4 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
}

.child-budget-allowance {
  color: #6b7280;
  font-weight: 600;
  font-size: 16px;
}

.child-budget-body {
  padding: 20px;
  border-top: 1px solid #e5e7eb;
}

.child-budget-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.child-stat {
  text-align: center;
}

.child-stat-label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
  font-weight: 600;
}

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

.child-stat-value--success {
  color: #10b981;
}

.child-stat-value--warning {
  color: #f59e0b;
}

.child-budget-bar {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}

.child-budget-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.child-budget-actions {
  display: flex;
  gap: 12px;
}

.btn-child-details {
  flex: 1;
  background: #f3f4f6;
  color: #374151;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-child-details:hover {
  background: #e5e7eb;
}

.child-context-menu {
  position: relative;
}

.btn-child-menu {
  background: none;
  border: none;
  font-size: 20px;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
}

.btn-child-menu:hover {
  color: #6b7280;
}

/**
 * Budget Detail - Estilos específicos
 * Complementa Bootstrap 5 + style.css existente
 */
/* ========== SELECTOR DE MES ========== */
.month-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 0.5rem;
  box-shadow: var(--shadow-sm);
}

.month-selector .form-select {
  border: none;
  background-color: transparent;
  font-weight: 600;
  color: var(--gray-800);
  padding-right: 2rem;
  min-width: 140px;
}

.month-selector .form-select:focus {
  box-shadow: none;
  outline: none;
}

.month-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: none;
  background: var(--gray-100);
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.month-nav-btn:hover:not(:disabled) {
  background: var(--primary);
  color: white;
}

.month-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========== TARJETAS DE RESUMEN MENSUAL ========== */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.summary-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: all var(--transition-base);
}

.summary-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.summary-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.summary-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

.summary-card-icon.income {
  background: var(--success-soft);
  color: var(--success);
}

.summary-card-icon.expense {
  background: var(--danger-soft);
  color: var(--danger);
}

.summary-card-icon.allocated {
  background: var(--primary-soft);
  color: var(--primary);
}

.summary-card-icon.available {
  background: var(--info-soft);
  color: var(--info);
}

.summary-card-icon.savings {
  background: #d1fae5;
  color: #059669;
}

.summary-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.summary-card-label {
  font-size: 0.8125rem;
  color: var(--gray-500);
  font-weight: 500;
}

.summary-card-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* ========== SECCIONES DE GASTOS ========== */
.expense-section {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  margin-bottom: 1rem;
}

.expense-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.expense-section-header:hover {
  background: var(--gray-100);
}

.expense-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--gray-800);
}

.expense-section-title i {
  font-size: 1.125rem;
}

.expense-section-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.expense-section-amount {
  font-weight: 700;
  font-size: 1rem;
}

.expense-section-toggle {
  transition: transform var(--transition-fast);
}

.expense-section.collapsed .expense-section-toggle {
  transform: rotate(-90deg);
}

.expense-section-content {
  padding: 1rem 1.25rem;
}

.expense-section.collapsed .expense-section-content {
  display: none;
}

/* ========== CATEGORÍAS DE GASTO ========== */
.category-expense-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  background: var(--gray-50);
  margin-bottom: 0.5rem;
  transition: all var(--transition-fast);
}

.category-expense-card:hover {
  background: var(--gray-100);
}

.category-expense-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.category-expense-info {
  flex: 1;
  min-width: 0;
}

.category-expense-name {
  font-weight: 600;
  color: var(--gray-800);
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-expense-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.category-expense-bar {
  flex: 1;
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.category-expense-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width var(--transition-base);
}

.category-expense-bar-fill.under {
  background: var(--success);
}

.category-expense-bar-fill.warning {
  background: var(--warning);
}

.category-expense-bar-fill.over {
  background: var(--danger);
}

.category-expense-percent {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-500);
  min-width: 40px;
  text-align: right;
}

.category-expense-amounts {
  text-align: right;
  flex-shrink: 0;
}

.category-expense-spent {
  font-weight: 700;
  color: var(--gray-900);
  font-size: 0.9375rem;
}

.category-expense-allocated {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.category-expense-actions {
  display: flex;
  gap: 0.25rem;
}

.category-expense-actions .btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== LISTA DE TRANSACCIONES ========== */
.transaction-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--gray-100);
}

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

.transaction-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.transaction-info {
  flex: 1;
  min-width: 0;
}

.transaction-description {
  font-weight: 500;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transaction-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-top: 0.125rem;
}

.transaction-amount {
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.transaction-amount.expense {
  color: var(--danger);
}

.transaction-amount.income {
  color: var(--success);
}

/* ========== MODAL DE AGREGAR GASTO ========== */
.add-expense-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
  border: none;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.add-expense-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}

/* ========== ESTADO VACÍO ========== */
.empty-month-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gray-500);
}

.empty-month-state i {
  font-size: 3rem;
  opacity: 0.3;
  margin-bottom: 1rem;
}

.empty-month-state h5 {
  color: var(--gray-700);
  margin-bottom: 0.5rem;
}

/* ========== INDICADORES DE MES ========== */
.month-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.month-indicator.current {
  background: var(--primary-soft);
  color: var(--primary);
}

.month-indicator.past {
  background: var(--gray-100);
  color: var(--gray-600);
}

.month-indicator.future {
  background: var(--info-soft);
  color: var(--info);
}

/* ========== LISTA DE RESUMEN MENSUAL ========== */
.summary-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.summary-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
}

.summary-list-item--total {
  background: var(--gray-50);
  padding: 0.5rem;
  margin: 0 -1rem;
  border-radius: var(--radius);
}

.summary-list-label {
  font-size: 0.9375rem;
  color: var(--gray-600);
}

.summary-list-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gray-800);
}

/* ========== FILAS DE GASTOS FIJOS ========== */
.fixed-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
}

.fixed-category-row:last-child {
  border-bottom: none;
}

.fixed-category-row .category-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fixed-category-row .category-name {
  font-weight: 500;
  color: var(--gray-700);
}

.fixed-category-row .amount-value {
  font-weight: 600;
  color: var(--gray-800);
}

/* ========== FILAS DE CATEGORÍAS VARIABLES ========== */
.variable-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  transition: all 0.2s ease;
  /* Acento para categorías principales */
  border-left: 4px solid var(--primary);
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.04) 0%, transparent 100%);
}

.variable-row:last-of-type {
  border-bottom: none;
}

.variable-row:hover {
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.08) 0%, var(--gray-50) 100%);
}

/* Subcategorías - acento más tenue */
.variable-row.is-sub {
  padding-left: 3rem;
  border-left: 3px solid var(--gray-300);
  background: var(--gray-50);
  margin-left: 0.5rem;
}

.variable-row.is-sub:hover {
  background: var(--gray-100);
  border-left-color: var(--gray-400);
}

.variable-row-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.variable-row-content {
  flex: 1;
  min-width: 0;
}

.variable-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.variable-row-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--gray-800);
}

.variable-row-limit {
  font-size: 0.8125rem;
  color: var(--gray-500);
  font-weight: 500;
}

.variable-row-progress {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.variable-row-progress .progress {
  height: 8px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.variable-row-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
}

.variable-row-stats .spent {
  color: var(--gray-600);
}

.variable-row-stats .percentage {
  font-weight: 700;
}

.variable-row-stats .percentage.success {
  color: var(--success);
}

.variable-row-stats .percentage.warning {
  color: var(--warning);
}

.variable-row-stats .percentage.danger {
  color: var(--danger);
}

/* Indicador de Sobregiro */
.variable-row.overdraft {
  background: linear-gradient(90deg, rgba(220, 53, 69, 0.08) 0%, rgba(220, 53, 69, 0.03) 100%);
  border-left: 4px solid var(--danger);
  animation: pulse-danger 2s ease-in-out infinite;
}

.variable-row.overdraft:hover {
  background: linear-gradient(90deg, rgba(220, 53, 69, 0.12) 0%, rgba(220, 53, 69, 0.05) 100%);
}

/* Subcategorías en sobregiro */
.category-group-children .variable-row.overdraft {
  border-left: 3px solid var(--danger);
  background: linear-gradient(90deg, rgba(220, 53, 69, 0.06) 0%, rgba(220, 53, 69, 0.02) 100%);
}

.category-group-children .variable-row.overdraft:hover {
  background: linear-gradient(90deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.04) 100%);
  border-left-color: var(--danger);
}

.category-group.overdraft {
  border-left: 4px solid var(--danger);
  background: linear-gradient(90deg, rgba(220, 53, 69, 0.06) 0%, rgba(220, 53, 69, 0.02) 100%);
}

.category-group.overdraft .category-group-header {
  background: linear-gradient(90deg, rgba(220, 53, 69, 0.08) 0%, rgba(220, 53, 69, 0.03) 100%);
}

.overdraft-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--danger);
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  margin-left: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.overdraft-badge i {
  font-size: 0.5rem;
}

@keyframes pulse-danger {

  0%,
  100% {
    box-shadow: inset 0 0 0 0 rgba(220, 53, 69, 0);
  }

  50% {
    box-shadow: inset 0 0 10px 0 rgba(220, 53, 69, 0.1);
  }
}

.variable-row-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.variable-form {
  display: flex;
  align-items: center;
}

.variable-form .input-group {
  width: 200px;
}

.variable-form .form-control {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  min-width: 100px;
}

.variable-form .input-group-text {
  font-size: 1rem;
  background: var(--gray-100);
  border-color: var(--gray-200);
  padding: 0.5rem 0.75rem;
}

.variable-form .btn-success {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0.5rem 0.75rem;
}

.btn-history {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Campo de descripción en formulario rápido */
.expense-input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.375rem;
}

.expense-input-group>input[name=quick_description] {
  font-size: 0.8125rem;
  padding: 0.375rem 0.5rem;
  width: 100px;
  min-width: 70px;
  flex-shrink: 1;
  border-radius: var(--radius);
}

.expense-input-group>input[name=quick_description]::placeholder {
  color: var(--gray-400);
  font-style: italic;
  font-size: 0.75rem;
}

.expense-input-group>input[name=quick_description]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.expense-input-group .input-group {
  width: auto;
  min-width: 130px;
  flex-shrink: 0;
}

.expense-input-group .input-group .form-control {
  width: 70px;
  min-width: 60px;
}

.variable-row-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.variable-form {
  display: flex;
  align-items: center;
}

/* ========== GRUPO DE CATEGORÍAS (PADRE/HIJO) ========== */
.category-group {
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  margin-bottom: 0.75rem;
  overflow: hidden;
  /* Acento fuerte para grupo de categoría principal */
  border-left: 4px solid var(--primary);
}

.category-group-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.08) 0%, var(--gray-50) 50%, var(--gray-100) 100%);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  flex-wrap: wrap;
}

.category-group-header .variable-row-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.category-group-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 120px;
}

.category-group-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gray-700);
}

.category-group-limit {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.category-group-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 150px;
}

.category-group-stats {
  font-size: 0.75rem;
  color: var(--gray-600);
  white-space: nowrap;
}

.category-group-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.category-group-total {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--gray-500);
  background: white;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
}

/* ========== COMMITMENT CARDS (Premium Redesign) ========== */
.commitments-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.commitment-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.commitment-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.commitment-card--inactive {
  background: var(--gray-50);
  opacity: 0.8;
}

.commitment-card--inactive .commitment-amount {
  color: var(--gray-500);
  text-decoration: line-through;
}

/* Status Toggle (Left Side) */
.commitment-status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Custom Toggle Switch */
.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  display: inline-block;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-300);
  transition: 0.3s;
  border-radius: 20px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked+.toggle-slider {
  background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
}

.toggle-switch input:checked+.toggle-slider:before {
  transform: translateX(16px);
}

/* Content Area */
.commitment-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.commitment-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.commitment-name {
  font-weight: 700;
  color: var(--gray-800);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.commitment-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.commitment-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--gray-100);
  border-radius: 4px;
  color: var(--gray-600);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.commitment-category-badge i {
  font-size: 0.7rem;
  color: var(--gray-500);
}

/* Amount & Actions */
.commitment-end {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.commitment-amount {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--gray-900);
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

.commitment-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.2s ease;
}

.commitment-card:hover .commitment-actions {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .commitment-card {
    flex-wrap: wrap;
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .commitment-status {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
  }

  .commitment-content {
    width: 100%;
    padding-right: 40px;
    /* Space for toggle */
  }

  .commitment-end {
    width: 100%;
    justify-content: space-between;
    margin-top: var(--space-xs);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--gray-100);
  }

  .commitment-actions {
    opacity: 1;
    transform: none;
  }
}

/* Add Form Redesign */
.add-commitment-wrapper {
  margin-top: var(--space-lg);
  background: #ffffff;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 0;
  /* Reset padding for header separation */
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
}

.add-commitment-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: var(--primary);
}

.add-commitment-header {
  background: var(--bg-secondary);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.add-commitment-header h6 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.add-commitment-body {
  padding: var(--space-lg);
}

.add-commitment-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: var(--space-md);
  align-items: flex-start;
}

.add-commitment-form .minimal-input,
.add-commitment-form .minimal-select {
  background: var(--bg-secondary);
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.add-commitment-form .minimal-input:focus,
.add-commitment-form .minimal-select:focus {
  background: white;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.add-commitment-form button[type=submit] {
  height: 44px;
  width: 44px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}

.add-commitment-form button[type=submit]:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.input-label-sm {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 4px;
  text-transform: uppercase;
}

@media (max-width: 992px) {
  .add-commitment-form {
    grid-template-columns: 1fr 1fr;
  }

  .add-commitment-form button {
    grid-column: 1/-1;
    width: 100%;
  }
}

/* Dashboard Styles */
.chart-container {
  position: relative;
  height: 280px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.card-hero {
  border: none;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
}

.card-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.stat-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 100%;
  transition: all var(--transition-base);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.stat-card-label {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: 0.25rem;
}

.stat-card-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  font-family: var(--font-heading);
}

.category-badge-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--tone-soft);
  color: var(--tone);
}

/* Animations */
.animate-fade-up {
  animation: fadeUp 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

/* Child Budget Warning Styles */
.child-budget-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--danger-soft);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  border: 1px solid rgba(220, 38, 38, 0.1);
}

.child-budget-warning--info {
  background: var(--info-soft);
  border-color: rgba(37, 99, 235, 0.1);
}

.child-budget-warning-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--danger);
  font-size: 1.25rem;
}

.child-budget-warning--info .child-budget-warning-icon {
  color: var(--info);
}

.child-budget-warning-content {
  flex: 1;
}

.child-budget-warning-content strong {
  display: block;
  font-size: 1.1rem;
  color: var(--gray-900);
  margin-bottom: var(--space-xs);
  font-family: var(--font-heading);
}

.child-budget-warning-content p {
  color: var(--gray-700);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.child-budget-warning-content p:last-child {
  margin-bottom: 0;
}

.child-budget-warning-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--gray-600);
}

.child-budget-warning-hint i {
  color: var(--warning);
  margin-top: 3px;
}

/* ========== SUMMARY CARDS ========== */
/* Grid de tarjetas de resumen */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Tarjeta individual de resumen */
.summary-card {
  background: var(--bg-primary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.summary-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Variantes de color */
.summary-card--info {
  background: linear-gradient(135deg, var(--info-soft) 0%, var(--bg-primary) 100%);
  border-color: rgba(37, 99, 235, 0.2);
}

.summary-card--warning {
  background: linear-gradient(135deg, var(--warning-soft) 0%, var(--bg-primary) 100%);
  border-color: rgba(217, 119, 6, 0.2);
}

.summary-card--success {
  background: linear-gradient(135deg, var(--success-soft) 0%, var(--bg-primary) 100%);
  border-color: rgba(5, 150, 105, 0.2);
}

.summary-card--danger {
  background: linear-gradient(135deg, var(--danger-soft) 0%, var(--bg-primary) 100%);
  border-color: rgba(220, 38, 38, 0.2);
}

/* Icono de la tarjeta */
.summary-card-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--gray-100);
  color: var(--gray-700);
  box-shadow: var(--shadow-xs);
}

.summary-card-icon--info {
  background: linear-gradient(135deg, var(--info) 0%, var(--info-light) 100%);
  color: white;
}

.summary-card-icon--warning {
  background: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%);
  color: white;
}

.summary-card-icon--success {
  background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
  color: white;
}

.summary-card-icon--danger {
  background: linear-gradient(135deg, var(--danger) 0%, var(--danger-light) 100%);
  color: white;
}

/* Contenido de la tarjeta */
.summary-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.summary-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gray-900);
  font-family: var(--font-heading);
  line-height: 1;
}

.summary-card-value--success {
  color: var(--success);
}

.summary-card-value--info {
  color: var(--info);
}

.summary-card-value--warning {
  color: var(--warning);
}

.summary-card-value--danger {
  color: var(--danger);
}

.summary-card-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  text-transform: capitalize;
}

.summary-card-sublabel {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-weight: 400;
  line-height: 1.4;
}

/* ========== SAVINGS DEFICIT ALERT ========== */
.savings-deficit-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--warning-soft);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.savings-deficit-alert i {
  flex-shrink: 0;
  font-size: 1.25rem;
  color: var(--warning);
  margin-top: 2px;
}

.deficit-message {
  flex: 1;
  color: var(--gray-700);
  line-height: 1.6;
}

.deficit-message strong {
  display: block;
  color: var(--gray-900);
  margin-bottom: var(--space-xs);
  font-family: var(--font-heading);
}

/* ========== MINIMAL FORM CARD ========== */
.minimal-form-card {
  background: var(--bg-primary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

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

/* Header del formulario */
.minimal-form-header {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
  color: white;
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space);
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.minimal-form-header i {
  font-size: 1.25rem;
  opacity: 0.9;
}

/* Grid del formulario */
.minimal-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  padding: var(--space-lg);
}

/* Grupo de campo del formulario */
.minimal-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.minimal-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-xs);
}

.minimal-input-group {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  transition: all var(--transition-base);
  overflow: hidden;
}

.minimal-input-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.1);
  background: var(--bg-primary);
}

.minimal-input-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space);
  color: var(--gray-500);
  font-weight: 600;
  font-size: 0.875rem;
  background: var(--gray-100);
  border-right: 1px solid var(--gray-300);
  height: 100%;
}

.minimal-input-group:focus-within .minimal-input-prefix {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: var(--primary);
}

.minimal-input {
  flex: 1;
  padding: var(--space) var(--space-md);
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--gray-900);
  font-family: var(--font-body);
  outline: none;
  transition: all var(--transition-base);
}

.minimal-input::placeholder {
  color: var(--gray-400);
}

.minimal-input:focus {
  color: var(--gray-900);
}

/* Select dropdown */
.minimal-input-group select.minimal-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23737373' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

/* Acciones del formulario */
.minimal-form-actions {
  padding: var(--space-lg);
  padding-top: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--space);
}

/* Botones */
.minimal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space) var(--space-xl);
  border: none;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.minimal-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.minimal-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.minimal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.minimal-btn--primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
}

.minimal-btn--primary:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
}

.minimal-btn--success {
  background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
  color: white;
}

.minimal-btn--success:hover {
  background: linear-gradient(135deg, #047857 0%, var(--success) 100%);
}

.minimal-btn--danger {
  background: linear-gradient(135deg, var(--danger) 0%, var(--danger-light) 100%);
  color: white;
}

.minimal-btn--danger:hover {
  background: linear-gradient(135deg, #b91c1c 0%, var(--danger) 100%);
}

/* Responsive */
@media (max-width: 768px) {
  .summary-cards {
    grid-template-columns: 1fr;
  }

  .minimal-form-grid {
    grid-template-columns: 1fr;
  }

  .minimal-form-card {
    margin-left: calc(-1 * var(--space-lg));
    margin-right: calc(-1 * var(--space-lg));
    border-radius: 0;
  }
}