/* ===================================================
   CreditIQ v3 — Corporate Premium Design System
   Paleta: Azul marino · Blanco · Grises suaves
   Tipografía: Inter (Sans-serif corporativo premium)
   =================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* ─── Paleta CreditIQ Design System (design.md) ─── */
  /* Surfaces */
  --ds-background:               #10131a;
  --ds-surface:                  #10131a;
  --ds-surface-dim:              #10131a;
  --ds-surface-bright:           #363941;
  --ds-surface-container-lowest: #0b0e15;
  --ds-surface-container-low:    #191b23;
  --ds-surface-container:        #1d2027;
  --ds-surface-container-high:   #272a31;
  --ds-surface-container-highest:#32353c;
  /* On-Surface Text */
  --ds-on-surface:               #e1e2ec;
  --ds-on-surface-variant:       #c2c6d6;
  --ds-inverse-surface:          #e1e2ec;
  --ds-inverse-on-surface:       #2e3038;
  /* Borders / Outlines */
  --ds-outline:                  #8c909f;
  --ds-outline-variant:          #424754;
  /* Primary (Blue-Indigo) */
  --ds-primary:                  #adc6ff;
  --ds-on-primary:               #002e6a;
  --ds-primary-container:        #4d8eff;
  --ds-on-primary-container:     #00285d;
  --ds-inverse-primary:          #005ac2;
  --ds-surface-tint:             #adc6ff;
  /* Secondary (Purple) */
  --ds-secondary:                #d0bcff;
  --ds-on-secondary:             #3c0091;
  --ds-secondary-container:      #571bc1;
  --ds-on-secondary-container:   #c4abff;
  /* Tertiary (Orange) */
  --ds-tertiary:                 #ffb786;
  --ds-on-tertiary:              #502400;
  --ds-tertiary-container:       #df7412;
  /* Error */
  --ds-error:                    #ffb4ab;
  --ds-on-error:                 #690005;
  --ds-error-container:          #93000a;
  --ds-on-error-container:       #ffdad6;

  /* ─── Alias de layout (mapeados a design.md) ─── */
  --navy-900: var(--ds-surface-container-lowest);
  --navy-800: var(--ds-surface-container-low);
  --navy-700: var(--ds-surface-container);
  --navy-600: var(--ds-surface-container-high);
  --navy-500: var(--ds-surface-container-highest);
  --navy-400: var(--ds-surface-bright);
  --blue-primary: var(--ds-inverse-primary);
  --blue-light: var(--ds-primary-container);
  --blue-glow: rgba(77, 142, 255, 0.25);
  --blue-accent: var(--ds-primary);

  /* ─── Tonos neutros (calibrados a design.md on-surface) ─── */
  --white: #ffffff;
  --gray-50:  var(--ds-on-surface);          /* #e1e2ec */
  --gray-100: var(--ds-on-surface-variant);  /* #c2c6d6 */
  --gray-200: #c2c6d6;
  --gray-300: #a4a8b8;
  --gray-400: var(--ds-outline);             /* #8c909f */
  --gray-500: #6b6f7e;
  --gray-600: var(--ds-outline-variant);     /* #424754 */
  --gray-700: #32353c;
  --gray-800: #272a31;
  --gray-900: var(--ds-surface-container-lowest); /* #0b0e15 */

  /* ─── Semáforos ─── */
  --green: #34d399;
  --green-bg: rgba(52, 211, 153, 0.12);
  --green-glow: rgba(52, 211, 153, 0.2);
  --yellow: #fbbf24;
  --yellow-bg: rgba(251, 191, 36, 0.12);
  --yellow-glow: rgba(251, 191, 36, 0.2);
  --red: #fb7185;
  --red-bg: rgba(251, 113, 133, 0.12);
  --red-glow: rgba(251, 113, 133, 0.2);

  /* ─── Variables de layout ─── */
  --bg-base: var(--navy-900);
  --bg-surface: var(--navy-800);
  --bg-card: rgba(29, 32, 39, 0.75); /* var(--navy-700) with opacity */
  --bg-card-hover: rgba(39, 42, 49, 0.85);
  --bg-input: rgba(11, 14, 21, 0.8);
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.12);
  --border-glass: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%);
  
  --accent: var(--blue-accent);              /* #adc6ff primario */
  --accent-glow: var(--blue-glow);
  --accent-2: var(--ds-secondary);           /* #d0bcff púrpura */
  --accent-3: var(--ds-tertiary);            /* #ffb786 naranja */
  --accent-ai: var(--ds-secondary-container); /* #571bc1 — botones AI */
  
  --text-primary: var(--ds-on-surface);      /* #e1e2ec */
  --text-secondary: var(--ds-on-surface-variant); /* #c2c6d6 */
  --text-muted: var(--ds-outline);           /* #8c909f */
  
  --sidebar-w: 240px;
  --topbar-h: 64px;
  
  /* Radios alineados a design.md */
  --radius-xs: 0.25rem;    /* sm  */
  --radius-sm: 0.5rem;     /* DEFAULT */
  --radius:    0.5rem;     /* DEFAULT */
  --radius-md: 0.75rem;    /* md  */
  --radius-lg: 1rem;       /* lg  */
  --radius-xl: 1.5rem;     /* xl  */
  --radius-full: 9999px;   /* full */
  
  /* Tipografías design.md */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Outfit', 'Inter', sans-serif;
  
  /* Espaciado design.md (base 8px) */
  --space-unit: 8px;
  --space-sm:   8px;   /* stack-sm */
  --space-md:   16px;  /* stack-md */
  --space-lg:   32px;  /* stack-lg */
  --space-card: 24px;  /* card-padding */
  --space-gutter: 20px;
  
  /* Sombras glassmorphism */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow:    0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
  
  /* Glassmorphism effects */
  --glass-blur: blur(16px) saturate(180%);
  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.app-container { display: flex; flex: 1; width: 100%; min-width: 0; }
html { font-size: 14px; }
body {
  font-family: var(--font);
  background: var(--bg-base);
  background-image: 
    radial-gradient(circle at 0% 0%, rgba(77, 142, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(208, 188, 255, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient Background Overlay */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.02;
  pointer-events: none;
  z-index: -1;
}
h1, h2, h3, h4, .section-heading, .card-header h3 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
::-webkit-scrollbar-thumb { 
  background: rgba(255,255,255,0.05); 
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.05);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ─── SIDEBAR ─── */
.sidebar {
  position: fixed; left: 0; top: 0;
  width: var(--sidebar-w); height: 100vh;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 100; overflow-y: auto;
}
.sidebar-header {
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.logo {
  font-family: var(--font-heading);
  font-size: 1.4rem; font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff 0%, var(--gray-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.2rem;
}
.logo span { color: var(--blue-accent); }

/* Client selector */
.client-selector-container {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ach-label {
  display: block;
  font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-muted); margin-bottom: 0.5rem;
}
.cm-client-select, select#cm-selector {
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.8rem; font-family: var(--font);
  outline: none; cursor: pointer;
  transition: border-color 0.2s;
}
.cm-client-select:focus, select#cm-selector:focus {
  border-color: var(--accent);
}
.cm-add {
  width: 26px; height: 26px;
  background: var(--blue-primary);
  color: #fff; border: none;
  border-radius: var(--radius-sm);
  cursor: pointer; font-size: 1rem;
  display: grid; place-items: center;
  transition: all 0.2s; flex-shrink: 0;
}
.cm-add:hover { background: var(--blue-light); }

/* Nav */
.sidebar-nav {
  padding: 0.75rem 0;
  display: flex; flex-direction: column;
  gap: 0.1rem; flex: 1;
}
.nav-group {
  font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: 0.75rem 1rem 0.3rem;
}
.nav-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.75rem 1.25rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.88rem; font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0 0.75rem 0.15rem;
  position: relative;
}
.nav-item:hover {
  color: var(--white);
  background: rgba(255,255,255,0.05);
  transform: translateX(4px);
}
.nav-item.active {
  color: var(--white);
  background: linear-gradient(90deg, rgba(77, 142, 255, 0.12) 0%, rgba(77, 142, 255, 0) 100%);
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  width: 4px; height: 20px;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
  box-shadow: 4px 0 12px var(--accent-glow);
}
.nav-icon { font-size: 1rem; opacity: 0.7; width: 1.2rem; display: flex; justify-content: center; transition: 0.3s; }
.nav-item:hover .nav-icon { opacity: 1; transform: scale(1.1); color: var(--accent); }

/* Submenú (módulo IVAS): ítems anidados bajo su nav-item padre */
.nav-submenu { display: flex; flex-direction: column; margin: 0.1rem 0 0.3rem; }
.nav-submenu[hidden] { display: none; }
.nav-subitem {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 1rem 0.5rem 2.6rem;
  margin: 0 0.75rem 0.1rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.82rem; font-weight: 500;
  border-radius: var(--radius-sm);
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-subitem::before {
  content: ''; position: absolute;
  left: 1.55rem; top: 0; bottom: 0;
  width: 1px; background: var(--border);
}
.nav-subitem:hover { color: var(--white); background: rgba(255,255,255,0.04); }
.nav-subitem.active { color: var(--white); font-weight: 600; }
.nav-subitem.active::before { background: var(--accent); width: 2px; box-shadow: 0 0 8px var(--accent-glow); }
.nav-subicon { width: 1rem; height: 1rem; opacity: 0.75; flex-shrink: 0; }
.nav-subitem:hover .nav-subicon, .nav-subitem.active .nav-subicon { opacity: 1; color: var(--accent); }

/* Footer */
.sidebar-footer { padding: 0.75rem 1rem; border-top: 1px solid var(--border); flex-shrink: 0; }

/* ─── BUTTONS ─── */
.btn-primary {
  padding: 0.45rem 1rem;
  background: var(--blue-primary);
  color: #fff; border: 1px solid var(--blue-light);
  border-radius: var(--radius-sm);
  font-size: 0.78rem; font-weight: 600;
  font-family: var(--font);
  cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.2px; white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  background: var(--blue-light);
  box-shadow: 0 0 16px var(--blue-glow);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* Shimmer Effect for Primary Buttons */
.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 100%
  );
  transform: rotate(45deg);
  animation: shimmer-btn 3s infinite;
  pointer-events: none;
}

@keyframes shimmer-btn {
  0% { transform: translate(-100%, -100%) rotate(45deg); }
  20%, 100% { transform: translate(100%, 100%) rotate(45deg); }
}

.btn-outline {
  padding: 0.45rem 1rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.78rem; font-weight: 600;
  font-family: var(--font);
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.btn-outline:hover { 
  border-color: var(--accent); 
  color: var(--accent);
  background: rgba(59, 130, 246, 0.05);
}
.btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.72rem; font-weight: 600;
  font-family: var(--font);
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.btn-sm:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm.danger { border-color: rgba(239,68,68,0.3); color: var(--red); }
.btn-sm.danger:hover { background: var(--red-bg); }

/* ─── TOPBAR ─── */
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1; display: flex; flex-direction: column; min-height: 100vh;
}
.topbar {
  height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 50;
  gap: 1rem;
}
.topbar-info { display: flex; flex-direction: column; gap: 0.1rem; flex-shrink: 0; }
.topbar-info h1 {
  font-size: 0.9rem; font-weight: 700;
  color: var(--text-primary); letter-spacing: -0.2px;
}
.badge {
  font-size: 0.7rem; color: var(--text-secondary);
  font-weight: 500;
}
.topbar-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Year Tabs */
.period-manager { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.ytab {
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border-light);
  border-radius: 99px;
  font-size: 0.7rem; font-weight: 600;
  cursor: pointer; background: transparent;
  color: var(--text-secondary);
  transition: all 0.15s; white-space: nowrap;
}
.ytab.active { background: var(--blue-primary); border-color: var(--blue-primary); color: #fff; }
.ytab.projection { border-style: dashed; border-color: var(--blue-accent); color: var(--blue-accent); }
.ytab.projection.active { background: var(--blue-accent); border-style: solid; border-color: var(--blue-accent); color: #fff; }
.ytab:hover:not(.active) { border-color: var(--accent); color: var(--accent); }

/* ─── SECTIONS ─── */
.section{display:none;width:100%;padding: 1.5rem 1.5rem 150px 1.5rem;}
.section.active{display:block;width:100%}

/* Staggered Loading for Cards */
.section.active .kpi-card:nth-child(1) { animation: cardSlideUp .5s ease .05s both; }
.section.active .kpi-card:nth-child(2) { animation: cardSlideUp .5s ease .1s both; }
.section.active .kpi-card:nth-child(3) { animation: cardSlideUp .5s ease .15s both; }
.section.active .kpi-card:nth-child(4) { animation: cardSlideUp .5s ease .2s both; }
.section.active .kpi-card:nth-child(5) { animation: cardSlideUp .5s ease .25s both; }
.section.active .kpi-card:nth-child(6) { animation: cardSlideUp .5s ease .3s both; }

@keyframes cardSlideUp {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}

@keyframes kpiUpdate {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.05); filter: brightness(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes impact-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Alert Banner */
.alert-banner{padding:.75rem 1rem;border-radius:var(--radius-sm);margin-bottom:1.25rem;font-size:.82rem;font-weight:500;border-left:4px solid}
.alert-banner.green{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.alert-banner.yellow{background:var(--yellow-bg);border-color:var(--yellow);color:var(--yellow)}
.alert-banner.red{background:var(--red-bg);border-color:var(--red);color:var(--red)}

/* ─── KPI GRID ─── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.kpi-score-highlight .kpi-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(30, 41, 59, 0.8));
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.kpi-score-highlight .kpi-label {
  font-size: 0.9rem;
  letter-spacing: 2px;
}

.kpi-score-highlight .kpi-value {
  font-size: 2.5rem;
  margin: 0.5rem 0;
}

@media(max-width:600px){.kpi-grid{grid-template-columns:1fr}}
.kpi-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: var(--shadow);
}
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0; transition: 0.4s ease;
  pointer-events: none;
}
.kpi-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,255,255,0.2);
  background: var(--bg-card-hover);
}
.kpi-card:hover::before { opacity: 1; }
.kpi-label {
  font-size: 0.62rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: 0.5rem;
}
.kpi-value {
  font-size: 1.9rem; font-weight: 800;
  line-height: 1; color: var(--gray-50);
  margin-bottom: 0.5rem;
  letter-spacing: -0.5px;
}
.kpi-benchmark {
  font-size: 0.68rem; color: var(--text-muted);
  font-weight: 500;
}
.kpi-semaforo {
  position: absolute; top: 1rem; right: 1rem;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.kpi-semaforo.green { background: var(--green); box-shadow: 0 0 8px rgba(16,185,129,0.5); }
.kpi-semaforo.yellow { background: var(--yellow); box-shadow: 0 0 8px rgba(245,158,11,0.5); }
.kpi-semaforo.red { background: var(--red); box-shadow: 0 0 8px rgba(239,68,68,0.5); }
.score-card { border-color: rgba(26,79,160,0.4); }

/* ─── CARDS PRINCIPALES ─── */
.card-main {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  min-width: 0;
}
.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
}
.card-header h3 {
  font-size: 0.8rem; font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.card-header h3::before {
  content: ''; display: inline-block;
  width: 3px; height: 14px;
  background: var(--blue-primary);
  border-radius: 2px;
  margin-right: 0.65rem;
  vertical-align: middle;
}

/* ─── DASHBOARD GRID ─── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
@media(max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* ─── CHARTS ─── */
.charts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
@media(max-width: 1200px) { .charts-row { grid-template-columns: 1fr 1fr; } }
@media(max-width: 800px) { .charts-row { grid-template-columns: 1fr; } }
.chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.chart-title { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 1rem; }
/* Canvas must never drive its container's size */
canvas { display: block; max-height: 260px; max-width: 100%; }

/* Chart wrapper: strict containment — canvas cannot inflate the container */
.card-main > div[style*="height"],
.chart-canvas-wrap {
  position: relative !important;
  overflow: hidden !important;
  min-height: 0;
  /* Width determined by grid/flex parent, NOT by canvas content */
  width: 100%;
  box-sizing: border-box;
}

/* ─── YEAR MANAGER ─── */
.year-manager{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1.25rem}
.ym-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.ym-title{font-size:.9rem;font-weight:700}
.ym-actions{display:flex;gap:.4rem}
.ym-tabs{display:flex;gap:.4rem;flex-wrap:wrap}
.ym-tab{padding:.4rem .9rem;border:1px solid var(--border);border-radius:99px;font-size:.78rem;font-weight:600;cursor:pointer;background:transparent;color:var(--text-secondary);transition:all .2s}
.ym-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.ym-tab:hover:not(.active){border-color:var(--accent);color:var(--accent)}

/* ─── INPUT GRID ─── */
.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.full-width{grid-column:1/-1}
.input-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.input-card-title{font-size:.85rem;font-weight:700;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.form-section-label{font-size:.63rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;margin:.85rem 0 .5rem}
.form-row{display:flex;gap:.75rem;flex-wrap:wrap}
.form-row .form-group{flex:1;min-width:140px}
.form-group{margin-bottom:.6rem}
.form-group label{display:block;font-size:.72rem;color:var(--text-secondary);margin-bottom:.28rem;font-weight:500}
.form-group input,.form-group select{width:100%;padding:.48rem .75rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.8rem;font-family:var(--font);transition:border-color .2s;outline:none}
.form-group input:focus,.form-group select:focus{border-color:var(--accent)}
.form-group input[readonly]{color:var(--text-secondary);cursor:default;background:rgba(59,130,246,.05)}
.form-group.highlight input{font-weight:700;color:var(--accent)}
.form-group.total input{color:var(--accent-3)!important;font-size:.88rem}
.form-group select option{background:var(--bg-card)}
.balance-check{text-align:center;font-size:.75rem;font-weight:600;padding:.4rem;border-radius:var(--radius-sm);margin-top:.4rem;display:none}
.balance-check.ok{background:var(--green-bg);color:var(--green);display:block}
.balance-check.error{background:var(--red-bg);color:var(--red);display:block}

/* ─── MULTI-YEAR TABLES ─── */
.multi-year-table{overflow-x:auto}
.table-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:2rem;width:100%;box-sizing:border-box;overflow-x:auto;box-shadow: 0 10px 25px rgba(0,0,0,0.2);}
.table-card-title{font-size:1.1rem;font-weight:800;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:2px solid var(--accent);color:var(--white);letter-spacing: -0.2px;}

/* Section Dividers for Statements */
.statement-divider {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, transparent 100%);
  padding: 0.75rem 1rem;
  margin: 1.5rem 0 0.75rem;
  border-left: 4px solid var(--accent);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.fin-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.82rem;min-width:600px}
.fin-table thead th{
  position: sticky; top: 0; 
  background: var(--bg-card); 
  z-index: 10;
  text-align: right; padding: 1rem .85rem; 
  color: var(--text-muted); font-size: .65rem; 
  text-transform: uppercase; letter-spacing: .7px; 
  border-bottom: 2px solid var(--border); 
  white-space: nowrap;
}
.fin-table thead th:first-child{text-align:left}
.fin-table td{
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: all 0.2s;
}
.fin-table td:not(:first-child){
  text-align: right;
  font-variant-numeric: tabular-nums; 
  font-feature-settings: "tnum";
  border-left: 1px solid rgba(255,255,255,0.02);
}
.fin-table tr:hover td{
  background: rgba(255,255,255,0.04);
  color: var(--white);
}

/* Row Typologies */
.fin-table .row-section td{
  font-weight:900; color:var(--white); font-size:.75rem; 
  text-transform:uppercase; background:rgba(255,255,255,0.03); 
  letter-spacing:1px; padding-top:1.25rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.fin-table .row-highlight td{font-weight:700;color:var(--white); background: rgba(59, 130, 246, 0.05);}
.fin-table .row-subtotal td{
  font-weight:700; color:var(--accent); 
  border-top: 1px solid rgba(59, 130, 246, 0.1);
}
.fin-table .row-total td{
  font-weight:800; color:var(--white); 
  background:rgba(59, 130, 246, 0.12);
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  font-size: 0.85rem;
}
.fin-table .row-indent-1 td:first-child { padding-left: 2rem; color: var(--text-muted); font-size: 0.95em; }
.fin-table .row-indent-2 td:first-child { padding-left: 3.5rem; color: var(--text-muted); font-size: 0.9em; opacity: 0.8; font-style: italic; }

.fin-table .positive{color:var(--green)!important; font-weight: 600;}
.fin-table .negative{color:var(--red)!important; font-weight: 600;}
.fin-table .neutral{color:var(--yellow)!important}

/* Conceptual Row Markers */
.fin-table tr.cat-asset td:first-child { border-left: 4px solid var(--ds-primary); }
.fin-table tr.cat-liability td:first-child { border-left: 4px solid var(--ds-tertiary); }
.fin-table tr.cat-equity td:first-child { border-left: 4px solid var(--ds-secondary); }
.fin-table tr.cat-pl td:first-child { border-left: 4px solid var(--green); }
.fin-table tr.cat-cf td:first-child { border-left: 4px solid var(--ds-primary-container); }

.fin-table tr.row-section td { border-left: none !important; } /* Don't mark section headers */

/* ─── INDICADORES ─── */
.ind-section-title{font-size:.7rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.2px;margin:1.25rem 0 .6rem;padding:.3rem .6rem;background:rgba(59,130,246,.06);border-radius:var(--radius-sm);display:inline-block}
.ind-table-wrap{overflow-x:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1rem;width:100%;box-sizing:border-box}
.ind-table{width:100%;border-collapse:collapse;font-size:.78rem;min-width:0}
.ind-table th{background:rgba(59,130,246,.08);padding:.5rem .85rem;text-align:right;color:var(--text-secondary);font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.ind-table th:first-child{text-align:left}
.ind-table td{padding:.48rem .85rem;border-bottom:1px solid rgba(36,48,73,.4);color:var(--text-secondary);white-space:nowrap}
.ind-table td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.ind-table tr:last-child td{border-bottom:none}
.ind-table tr:hover td{background:rgba(59,130,246,.03)}
.ind-name{font-size:.78rem;color:var(--text-secondary)}
.ind-val.green{color:var(--green);font-weight:700}
.ind-val.yellow{color:var(--yellow);font-weight:700}
.ind-val.red{color:var(--red);font-weight:700}
.ind-val.neutral{color:var(--text-secondary)}

/* ─── RIESGO ─── */
.risk-header{display:flex;align-items:center;gap:1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1rem}
.risk-score-circle{width:100px;height:100px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:1.8rem;font-weight:900;border:4px solid}
.risk-score-circle.green{border-color:var(--green);color:var(--green);box-shadow:0 0 28px rgba(16,185,129,.3)}
.risk-score-circle.yellow{border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 28px rgba(245,158,11,.3)}
.risk-score-circle.red{border-color:var(--red);color:var(--red);box-shadow:0 0 28px rgba(239,68,68,.3)}
.risk-meta h2{font-size:1.15rem;font-weight:800;margin-bottom:.2rem}
.risk-meta p{color:var(--text-secondary);font-size:.8rem}
.risk-classification{margin-left:auto;padding:.5rem 1.25rem;border-radius:var(--radius-sm);font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.risk-classification.aprobado{background:var(--green-bg);color:var(--green);border:1px solid var(--green)}
.risk-classification.observacion{background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow)}
.risk-classification.rechazado{background:var(--red-bg);color:var(--red);border:1px solid var(--red)}
.risk-factors{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:.85rem;margin-bottom:1rem;width:100%}
.risk-factor-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
.rf-title{font-size:.75rem;font-weight:700;color:var(--text-secondary);margin-bottom:.6rem}
.rf-item{display:flex;align-items:flex-start;gap:.5rem;padding:.32rem 0;font-size:.78rem;color:var(--text-secondary);border-bottom:1px solid rgba(36,48,73,.4)}
.rf-item:last-child{border-bottom:none}
.rf-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:.25rem}
.rf-dot.green{background:var(--green)}
.rf-dot.yellow{background:var(--yellow)}
.rf-dot.red{background:var(--red)}

/* ─── INFORME PREMIUM (COMITÉ DE CRÉDITO) ─── */
.informe-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 3rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.informe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.informe-section {
  margin-bottom: 2.5rem;
}

.informe-section h3 {
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ds-primary);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.informe-section h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.3), transparent);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 1rem 0;
}

.data-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: rgba(59, 130, 246, 0.05);
}

.semaforo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.semaforo-tag.green { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }
.semaforo-tag.yellow { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.2); }
.semaforo-tag.red { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }

.conclusion-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--ds-primary);
  border-radius: 8px;
  padding: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.informe-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  justify-content: center;
}

/* --- COMPONENTES DEL INFORME (Arquitectura Modular) --- */
.informe-header-logo {
  background: var(--ds-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 800;
  font-size: 1.4rem;
}

.informe-header-title {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ds-on-surface);
}

.informe-header-subtitle {
  font-size: 0.75rem;
  color: var(--ds-outline);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.informe-scorecard {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2rem;
  align-items: center;
}

.informe-score-value {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
}

.informe-grid-2col {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.informe-chart-box {
  height: 280px;
  margin-bottom: 1rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 1rem;
}

.informe-kpi-card {
  background: rgba(255, 255, 255, 0.03);
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  border-bottom-width: 3px;
  border-bottom-style: solid;
}

.informe-ai-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1.25rem;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #cbd5e1;
}

.informe-montecarlo-box {
  background: rgba(139, 92, 246, 0.03);
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
}

/* ─── MODAL ─── */
/* ─── MODAL ─── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(4px)}
.modal{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius);padding:1.75rem;width:380px;max-width:95vw;box-shadow:var(--shadow)}
.modal-title{font-size:1rem;font-weight:700;margin-bottom:1.25rem}
.modal-actions{display:flex;gap:.6rem;margin-top:1.25rem;justify-content:flex-end}

/* ── ACTIVE CLIENT HEADER ── */
.active-client-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.active-client-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
}

.ach-icon {
  width: 65px;
  height: 65px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.ach-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ach-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
}

.ach-name {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.ach-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.4rem;
}

.ach-meta span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.03);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.02);
}

.ach-meta strong {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─── EMPTY STATE ─── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3.5rem;color:var(--text-muted);text-align:center;gap:.75rem}
.empty-icon{font-size:2.5rem}
.empty-state h3{font-size:1rem;color:var(--text-secondary)}
.empty-state p{font-size:.8rem;max-width:280px;line-height:1.6}

/* ─── PRINT ─── */
@media print {
  @page { size: A4 portrait; margin: 12mm 11mm 14mm; }

  /* Tema claro para impresión: el Core es oscuro (texto gris claro sobre navy).
     En papel blanco ese texto queda invisible → la hoja salía casi vacía. En vez
     de reestilar cada componente, redefinimos los tokens de color a valores
     oscuros/claros; como todo usa var(--*), la sección activa se vuelve legible. */
  :root {
    --text-primary: #0c1017 !important;
    --text-secondary: #2b323f !important;
    --text-muted: #55606f !important;
    --ds-on-surface: #0c1017 !important;
    --ds-on-surface-variant: #2b323f !important;
    --ds-outline: #55606f !important;
    --gray-50: #0c1017 !important;
    --gray-100: #2b323f !important;
    --gray-200: #2b323f !important;
    --gray-300: #3a4150 !important;
    --gray-400: #55606f !important;
    --bg-base: #ffffff !important;
    --bg-surface: #ffffff !important;
    --bg-card: #ffffff !important;
    --bg-card-hover: #ffffff !important;
    --bg-input: #ffffff !important;
    --border: #d7dbe3 !important;
    --border-light: #d7dbe3 !important;
  }

  html { color-scheme: light; }

  .sidebar, .sidebar-backdrop, .topbar, .informe-actions, .nav-item, .year-manager, .btn-sm, .cm-selector, .cm-add, .no-print { display: none !important; }
  .main-content, main { margin-left: 0 !important; padding: 0 !important; width: 100% !important; }
  .section:not(.active) { display: none !important; }
  .section.active { display: block !important; padding: 0 !important; color: #0c1017 !important; }

  body {
    background: #fff !important;
    color: #0c1017 !important;
    width: 100% !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Tarjetas de vidrio translúcidas → hoja blanca con borde suave. */
  .card, .card-main, .card-glass, .stat-card, .kpi-card, .glass, .metric-card, [class*="card"] {
    background: #fff !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid #d7dbe3 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .informe-wrapper {
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .informe-section { page-break-inside: avoid !important; break-inside: avoid !important; margin-bottom: 25px !important; }
  table { page-break-inside: auto; width: 100% !important; }
  tr { page-break-inside: avoid !important; }
  h1, h2, h4 { color: #0c1017 !important; }
  h3 { color: #1e40af !important; border-bottom: 2px solid #1e40af !important; }
}
.cuadre-card.ok { border-top: 4px solid var(--success-color); }
.cuadre-card.error { border-top: 4px solid var(--danger-color); }
.cuadre-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.cuadre-icon { font-size: 2rem; }
.cuadre-title { font-size: 1.2rem; font-weight: 700; color: var(--text-color); margin-bottom: 0.2rem; }
.cuadre-subtitle { font-size: 0.85rem; color: var(--text-muted); }
.cuadre-visual { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.cuadre-side { flex: 1; background: var(--bg-color); padding: 1rem; border-radius: 8px; border: 1px solid var(--border-color); }
.cs-header { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 0.8rem; font-size: 0.95rem; }
.cs-header span { font-family: monospace; font-size: 1rem; color: var(--primary-color); }
.cs-bar-wrap { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-bottom: 1rem; background: #2a2d36; }
.cs-bar { height: 100%; transition: width 0.4s ease; }
.cs-act-circ { background: var(--ds-primary); }
.cs-act-fijo { background: var(--ds-secondary); }
.cs-pas { background: #ef4444; }
.cs-pat { background: var(--green); }
.cs-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); }
.cs-label { display: flex; align-items: center; gap: 0.3rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.d-circ { background: var(--ds-primary); }
.d-fijo { background: var(--ds-secondary); }
.d-pas { background: #ef4444; }
.d-pat { background: var(--green); }
.cuadre-vs { font-weight: 800; font-size: 1.2rem; color: var(--text-muted); opacity: 0.5; }
.cuadre-footer { text-align: center; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.cf-diff { font-size: 1.1rem; font-weight: 600; }
.cuadre-card.ok .cf-diff { color: var(--success-color); }
.cuadre-card.error .cf-diff { color: var(--danger-color); animation: pulse 2s infinite; }

.acc-group { background: var(--card-bg); border-radius: 8px; margin-bottom: 1rem; border: 1px solid var(--border-color); overflow: hidden; }
.acc-group summary { padding: 1rem; font-weight: 600; cursor: pointer; background: var(--bg-color); user-select: none; color: var(--primary-color); outline: none; transition: background 0.2s; }
.acc-group summary:hover { background: #2a2d36; }
.acc-content { padding: 1.5rem; border-top: 1px solid var(--border-color); display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 1rem; }
.form-group.memo label { font-style: italic; color: var(--text-muted); }


/* Premium Cuadre Box */
.cuadre-modern-wrap {
  background: rgba(30,35,45, 0.6);
  border: 1px solid rgba(255,255,255, 0.05);
  border-radius: 16px;
  padding: 1rem 1.5rem;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cm-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255, 0.05);
}

.cm-icon-status {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255, 0.05);
}
.cm-icon-status.ok { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.cm-icon-status.error { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.cm-title-wrap { flex: 1; }
.cm-title { font-size: 1.25rem; font-weight: 600; color: #fff; margin: 0 0 0.25rem 0; }
.cm-subtitle { font-size: 0.85rem; color: #94a3b8; margin: 0; }

.cm-diff {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}
.cm-diff.ok { background: rgba(34, 197, 94, 0.1); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.2); }
.cm-diff.error { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }

/* cm-row-main: 3-column horizontal compact layout */
.cm-row-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.cm-chart-container {
  height: 240px;
  width: 100%;
  max-width: 280px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  min-height: 200px; /* Garantiza espacio incluso si falla JS */
}

.cm-chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.cm-chart-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.cm-chart-pct {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.cm-chart-label {
  font-size: 0.7rem;
  color: #94a3b8;
  text-transform: uppercase;
  margin-top: 2px;
}

.cm-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
}

.stat-card {
  background: rgba(0,0,0, 0.2);
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label { font-size: 0.65rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
.stat-value { font-size: 1.2rem; font-weight: 700; }
.text-blue { color: var(--ds-primary); }
.text-purple { color: var(--ds-secondary); }

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


/* Premium Accordion Styles */
.section-heading {
  margin: 1.5rem 0 0.75rem 0;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
}

.section-heading:first-child { margin-top: 0; }

.acc-group {
  background: rgba(30, 35, 45, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.acc-group:hover {
  background: rgba(40, 45, 60, 0.6);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.acc-group[open] {
  background: rgba(35, 40, 55, 0.8);
  border-color: rgba(59, 130, 246, 0.4);
}

.acc-group summary {
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 1.05rem;
  color: #e2e8f0;
  list-style: none; /* Hide default arrow */
  user-select: none;
}
.acc-group summary::-webkit-details-marker { display: none; } /* Hide for WebKit */

.acc-summary-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.acc-icon {
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.acc-arrow {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  position: relative;
}
.acc-arrow::before {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg);
  transition: border-color 0.3s ease;
}

.acc-group[open] summary .acc-arrow::before {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--ds-primary);
}

.acc-content {
  padding: 0 1.5rem 1.5rem 1.5rem;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Improve input grid inside accordions */
.acc-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.25rem;
}
.acc-content .form-group {
  margin: 0;
}

/* Accordion Totals */
.acc-total {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-3);
  background: rgba(6, 182, 212, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  margin-left: auto;
  margin-right: 1.5rem;
  transition: all 0.3s;
}
.acc-group[open] .acc-total {
  background: rgba(6, 182, 212, 0.2);
  transform: scale(1.05);
}n
/* Client Manager Improvements */.cm-client-select { width: 100%; padding: 0.6rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.85rem; font-weight: 600; cursor: pointer; outline: none; transition: all 0.2s;  background-repeat: no-repeat; background-position: right 0.75rem center; }.cm-client-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
/* Horizontal Alignment for Inputs */.acc-content .form-group { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }.acc-content .form-group label { margin-bottom: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.acc-content .form-group input { width: 140px; text-align: right; }
/* Active Client Header Dashboard */.active-client-header { background: linear-gradient(135deg, var(--bg-card), var(--bg-surface)); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1.5rem 2rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 2rem; box-shadow: var(--shadow); border-left: 5px solid var(--accent); }.ach-icon { font-size: 3rem; background: var(--bg-input); width: 80px; height: 80px; display: grid; place-items: center; border-radius: 16px; border: 1px solid var(--border); }.ach-info { flex: 1; }.ach-name { font-size: 1.8rem; font-weight: 800; margin-bottom: 0.3rem; color: #fff; }.ach-meta { display: flex; gap: 1.5rem; color: var(--text-secondary); font-size: 0.9rem; }.ach-meta span { display: flex; align-items: center; gap: 0.4rem; }
/* Active Client Header Label */.ach-label { font-size: 0.7rem; color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; margin-bottom: 0.5rem; opacity: 0.8; }

/* ─── CARD GLASS (shared utility) ─── */
.card-glass {
  background: linear-gradient(145deg, rgba(30,41,59,0.7), rgba(15,23,42,0.9));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
}

/* ─── PORTFOLIO (PRD §10.5) ─── */
.portfolio-container { display: flex; flex-direction: column; gap: 1rem; }
.portfolio-header { margin-bottom: .5rem; }
.section-sub { font-size: .82rem; color: var(--text-muted); margin-top: .3rem; }
.portfolio-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media(max-width:1100px){ .portfolio-kpis { grid-template-columns: repeat(3,1fr); } }
.p-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; text-align: center; }
.p-kpi-value { font-size: 2rem; font-weight: 900; color: #f1f5f9; line-height: 1; margin-bottom: .3rem; }
.p-kpi-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.portfolio-distribution { padding: 1.25rem; }
.portfolio-table th { text-align: center; }
.portfolio-table th:first-child, .portfolio-table th:nth-child(2) { text-align: left; }
.portfolio-table td:first-child { text-align: center; color: #64748b; font-weight: 700; }

/* ─── COVENANTS (PRD §10.8) ─── */
.covenants-container { display: flex; flex-direction: column; gap: 1.25rem; }
.covenant-form { padding: 1.25rem 1.5rem; }
.covenant-form-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.covenant-form-row .form-group { flex: 1; min-width: 140px; }
.covenant-table { min-width: 600px; }
.covenant-table th { text-align: center; }
.covenant-table th:first-child, .covenant-table th:nth-child(2) { text-align: left; }
.covenant-table-wrap { border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }

/* ─── AI ANALYSIS PANEL (PRD §10.3) ─── */
.ai-panel { margin-top: 1.5rem; }
.ai-panel-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.ai-result h3, .ai-result h4 { margin: 1rem 0 .4rem; }
.ai-result ul { padding-left: 1.5rem; margin: .5rem 0; }
.ai-result li { color: var(--text-secondary); font-size: .85rem; margin-bottom: .25rem; line-height: 1.6; }
.ai-result p, .ai-result br + br { margin-bottom: .6rem; }
.ai-result strong { color: var(--text-primary); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ─── SENSIBILIDAD (Stress Test) ─── */
.sensitivity-layout {
  display: grid;
  gap: 2rem;
  animation: fadeIn .4s ease;
}

input[type=range] {
  -webkit-appearance: none;
  background: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  border: 2px solid #fff;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.15);
}

.sensitivity-impact-card {
  transition: all 0.3s ease;
}

@keyframes pulse-subtle {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.impact-pulse {
  animation: pulse-subtle 0.5s ease-out;
}

/* Estado de Exportación PDF */
body.exporting-pdf .sidebar, 
body.exporting-pdf .topbar,
body.exporting-pdf .informe-actions {
  display: none !important;
}

body.exporting-pdf main {
  margin-left: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}

body.exporting-pdf .informe-wrapper {
  width: 210mm !important;
  max-width: 210mm !important;
  min-height: 297mm !important;
  margin: 0 auto !important;
  padding: 15mm !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transform: none !important;
}

body.exporting-pdf .informe-header,
body.exporting-pdf .informe-section {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Forzar saltos en PDF */
.html2pdf__page-break {
  display: block;
  height: 0;
  page-break-before: always;
  break-before: page;
}

/* ─── INPUT LAYOUT (Ingreso de Datos) ─── */
.input-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.input-sidebar {
  width: 320px;
  min-width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--topbar-h) + 1.5rem);
  max-height: calc(100vh - var(--topbar-h) - 3rem);
  overflow-y: auto;
}
@media(max-width: 1100px) {
  .input-layout { flex-direction: column; }
  .input-sidebar { width: 100%; position: static; max-height: none; }
}

/* Loading States */
.loading-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.btn-primary.is-loading {
  pointer-events: none;
  opacity: 0.8;
  color: transparent !important;
}

.btn-primary.is-loading::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* AI Market Intelligence Styles */
.ai-market-container {
  margin-top: 1.5rem;
}

.ai-card-premium {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.ai-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.badge-ai {
  background: linear-gradient(90deg, var(--ds-primary), var(--ds-secondary));
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.market-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.market-bench-table {
  width: 100%;
  overflow-x: auto;
}

.market-bench-table table {
  width: 100%;
  border-collapse: collapse;
}

.market-bench-table th {
  text-align: left;
  padding: 0.75rem;
  color: #94a3b8;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.market-bench-table td {
  padding: 0.75rem;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 900px) {
  .market-grid {
    grid-template-columns: 1fr;
  }
}

.ai-analysis-text p {
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.skeleton-loader {
  background: linear-gradient(90deg, rgba(51, 65, 85, 0.5), rgba(71, 85, 105, 0.5), rgba(51, 65, 85, 0.5));
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  height: 100px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}

@keyframes loading {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ─── CONCEPTUAL MARKERS & DIVIDERS ─── */
.statement-divider {
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.8), transparent);
  padding: 0.85rem 1.25rem;
  font-weight: 800;
  color: var(--blue-light);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.9rem;
  border-left: 4px solid var(--blue-accent);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

.cat-asset { border-left: 4px solid var(--ds-primary) !important; background: rgba(59, 130, 246, 0.03); }
.cat-liability { border-left: 4px solid var(--ds-tertiary) !important; background: rgba(245, 158, 11, 0.03); }
.cat-equity { border-left: 4px solid #a855f7 !important; background: rgba(168, 85, 247, 0.03); }
.cat-pl { border-left: 4px solid var(--green) !important; background: rgba(16, 185, 129, 0.03); }

tr.total-row td {
  font-weight: 800;
  color: #fff;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.row-indent-1 td:first-child { padding-left: 1.5rem !important; opacity: 0.9; }
.row-indent-2 td:first-child { padding-left: 2.5rem !important; opacity: 0.75; font-size: 0.85em; }

/* Ajustes Analíticos */
.text-adjustment {
  color: #f43f5e !important;
  font-weight: 700 !important;
}

/* ─── ANIMACIONES ─── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

/* --- Qualitative Scorecard --- */
.qualitative-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

.qualitative-card {
  background: rgba(30, 35, 45, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.qualitative-card:hover {
  background: rgba(30, 35, 45, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.qual-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.qual-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.qual-score-bubble {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 800;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.qual-slider-wrap {
  margin-bottom: 1.5rem;
}

.qual-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  margin: 1rem 0;
}

.qual-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #60a5fa;
  cursor: pointer;
  border: 3px solid #1e293b;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
  transition: all 0.2s ease;
}

.qual-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 15px rgba(96, 165, 250, 0.8);
}

.qual-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.qual-comment {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0.75rem;
  color: #e2e8f0;
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  transition: all 0.2s ease;
}

.qual-comment:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(0, 0, 0, 0.3);
}

@media (max-width: 900px) {
  .qualitative-grid { grid-template-columns: 1fr; }
}

.save-indicator {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: #10b981;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
  transform: translateY(100px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.save-indicator.visible {
  transform: translateY(0);
}

/* ===================================================
   EXTENSIONS: FEEDBACK & STATES
   =================================================== */

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(16, 19, 26, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.loading-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(173, 198, 255, 0.1);
  border-top-color: var(--blue-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-lg);
  margin: 2rem 0;
}
.empty-state-icon {
  font-size: 3rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  opacity: 0.5;
}
.empty-state-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.empty-state-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 400px;
}

/* Toast System */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.toast {
  min-width: 300px;
  padding: 1rem 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: toast-in 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  backdrop-filter: blur(12px);
}
.toast.success { border-left: 4px solid var(--green); color: var(--green); }
.toast.error { border-left: 4px solid var(--red); color: var(--red); }
.toast.info { border-left: 4px solid var(--accent); color: var(--accent); }

@keyframes toast-in {
  from { transform: translateX(100%) scale(0.9); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE — < 1024px
   Sidebar overlay con hamburger, main fluido, topbar comprimido
   ───────────────────────────────────────────────────────────── */
.mobile-menu-toggle {
  display: none;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s;
  flex-shrink: 0;
}
.mobile-menu-toggle:hover { background: rgba(255,255,255,0.1); }
.mobile-menu-toggle svg { width: 20px; height: 20px; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 99;
  animation: fadeIn 0.2s ease;
}
.sidebar-backdrop.open { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1024px) {
  .mobile-menu-toggle { display: inline-flex; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
  }
  .sidebar.open { transform: translateX(0); }

  .main-content { margin-left: 0; min-width: 0; }

  /* ── TOPBAR mobile: flex-wrap, 2 filas si hace falta ─── */
  .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--topbar-h);
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    row-gap: 0.5rem;
  }
  .topbar-info { gap: 0.25rem; min-width: 0; flex: 1 1 auto; order: 1; }
  .topbar-info h1 img { height: 26px !important; }
  .topbar-info > div:nth-child(2) { gap: 0.4rem !important; flex-wrap: wrap; }
  .topbar-actions { order: 2; flex-wrap: wrap; gap: 0.4rem !important; }

  /* Reducir badge cliente */
  #client-badge { font-size: 0.65rem; padding: 0.2rem 0.5rem; }

  /* Ocultar score chip si no cabe */
  #topbar-score-container { display: none !important; }

  /* User profile en topbar: solo avatar en mobile */
  #topbar-user-profile {
    padding: 0.2rem 0.35rem !important;
    margin-right: 0 !important;
    height: 32px !important;
    flex-shrink: 0;
  }
  #topbar-user-profile > div:nth-child(2) { display: none !important; }

  /* Boton "Ingreso de Datos": solo icono, sin texto */
  #btn-ingreso-datos {
    font-size: 0 !important;
    padding: 0.5rem !important;
    box-shadow: none !important;
    width: 38px;
    height: 38px;
    justify-content: center;
    flex-shrink: 0;
  }
  #btn-ingreso-datos i, #btn-ingreso-datos svg { width: 18px !important; height: 18px !important; }

  /* Tablas grandes con scroll horizontal — wrapper que envuelva la tabla */
  .estados-table-container,
  .kpi-table-container,
  .table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { font-size: 0.78rem; }
  table.kpi-table th, table.kpi-table td,
  table.df-table th, table.df-table td,
  table.statements-table th, table.statements-table td {
    padding: 0.4rem 0.5rem !important;
    white-space: nowrap;
  }

  /* Padding general reducido */
  .section { padding: 0.75rem !important; }

  /* Inputs y formularios densos */
  .input-sidebar { width: 100% !important; max-width: 100% !important; }

  /* ─── FUERZA BRUTA: TODAS las grids multi-columna a 1 col en mobile ─── */
  .kpi-grid,
  .cm-stats-grid,
  .portfolio-kpis,
  .dashboard-grid,
  .qualitative-grid,
  .charts-row,
  .section [style*="grid-template-columns"],
  .section [style*="display: grid"],
  .section [style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* ─── EXCEPCIÓN: strips de métricas pequeñas vuelven a 2 columnas ───
     Las tarjetas KPI / métricas usan repeat(N,1fr); los grids de layout
     (paneles con tablas, charts) usan fracciones nombradas (1fr 2fr,
     minmax(0,1fr)...) y NO llevan repeat(), así que siguen en 1 columna.
     Esto evita el "scroll infinito" de tarjetas chicas apiladas una a una. */
  .kpi-grid,
  .cm-stats-grid,
  .portfolio-kpis,
  .section [style*="repeat(2"],
  .section [style*="repeat(3"],
  .section [style*="repeat(4"],
  .section [style*="repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
  }
  .kpi-grid .kpi-card { padding: 0.9rem !important; }

  /* Filas flex con gap horizontal -> apilar verticalmente (no solo wrap).
     Reset de widths fijos de children (width: 300px en Balance y Cuadre, etc) */
  .section > div[style*="display: flex"][style*="gap"],
  .section > div[style*="display:flex"][style*="gap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .section > div[style*="display: flex"][style*="gap"] > *,
  .section > div[style*="display:flex"][style*="gap"] > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    flex-basis: auto !important;
  }

  /* Modales más cerca del viewport */
  .modal-content {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    margin: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }

  /* Headings reducidos */
  h1, .page-title { font-size: 1.25rem !important; }
  h2 { font-size: 1.1rem !important; }
  h3 { font-size: 1rem !important; }
}

@media (max-width: 640px) {
  .sidebar { width: 85vw; }
  .topbar { padding: 0.5rem; }
  .topbar-info h1 img { height: 22px !important; }
  /* Esconder el client-badge en pantallas muy chicas */
  #client-badge { display: none !important; }
  /* Avatar mas chico aun */
  #topbar-user-profile { padding: 0.15rem 0.3rem !important; }
  #topbar-user-avatar-initials { width: 22px !important; height: 22px !important; font-size: 0.65rem !important; }
}

/* ─────────────────────────────────────────────────────────────
   PAGE-SPECIFIC: ESTADOS FINANCIEROS + FLUJO DE CAJA + PROYECCIONES
   (todas las que usan .fin-table dentro de .table-card)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Header de la sección: title + selector años + botón "Expandir todo" */
  #estados-content > div:first-child,
  #flujo-content > div:first-child,
  #proyecciones-content > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  #estados-content > div:first-child > *,
  #flujo-content > div:first-child > *,
  #proyecciones-content > div:first-child > * {
    margin-left: 0 !important;
  }
  /* Selector de años horizontal con scroll si no caben */
  #estados-content > div:first-child > div:nth-child(2),
  #flujo-content > div:first-child > div:nth-child(2) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }

  /* Table-card más compacto en mobile */
  .table-card {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
  }
  .table-card-title {
    font-size: 0.95rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Section dividers (I. Balance General, II. Estado de Resultados, etc) */
  .statement-divider {
    padding: 0.5rem 0.75rem !important;
    margin: 1rem 0 0.5rem !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
  }

  /* .fin-table — primera columna sticky para no perder los nombres al scrollear */
  .fin-table {
    font-size: 0.7rem !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .fin-table thead th,
  .fin-table tbody td {
    padding: 0.4rem 0.4rem !important;
    white-space: nowrap;
  }
  /* Header (años): bien apretado para que quepan más en pantalla */
  .fin-table thead th {
    font-size: 0.6rem !important;
    padding: 0.5rem 0.4rem !important;
    min-width: 65px;
  }
  /* Cells de datos: compacto */
  .fin-table tbody td:not(:first-child) {
    min-width: 65px;
  }
  /* Primera columna sticky (nombres) — más compacta para dejar espacio a los años */
  .fin-table thead th:first-child,
  .fin-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 5;
    min-width: 120px;
    max-width: 150px;
    text-align: left !important;
    white-space: normal;
    box-shadow: 4px 0 6px -2px rgba(0,0,0,0.5);
  }
  /* Override de fondos de filas para que el sticky se vea consistente */
  .fin-table tbody tr.row-section td:first-child,
  .fin-table tbody tr.row-highlight td:first-child,
  .fin-table tbody tr.row-subtotal td:first-child,
  .fin-table tbody tr.row-total td:first-child {
    background: var(--bg-card);
  }

  /* Indicador visual de scroll horizontal: gradient fade en el borde derecho */
  .table-card {
    position: relative;
  }
  .table-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--bg-card));
    pointer-events: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    opacity: 0.85;
  }

  /* ─── PROYECCIONES — card-header con título + 2 botones ─── */
  /* Cards generales con card-header en flex (Simulación de Escenarios, etc) */
  .card-glass > .card-header,
  .card-main > .card-header {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
  }
  /* Botones en el header: apilar full-width en mobile */
  .card-glass > .card-header > div:last-child,
  .card-main > .card-header > div:last-child {
    width: 100%;
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap;
  }
  .card-glass > .card-header > div:last-child > button,
  .card-main > .card-header > div:last-child > button {
    flex: 1 1 auto;
    padding: 0.6rem 0.75rem !important;
    font-size: 0.75rem !important;
    min-width: 0;
  }
  .card-glass > .card-header > div:last-child > button > div {
    justify-content: center;
  }
  .card-glass > .card-header h3 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  /* ─── .table-v2 (base mobile: font + spacing comun) ─── */
  .table-v2 {
    font-size: 0.7rem !important;
    min-width: 100%;
    border-collapse: separate !important; /* sticky requiere separate, no collapse */
    border-spacing: 0;
  }
  .table-v2 thead th,
  .table-v2 tbody td {
    padding: 0.35rem 0.4rem !important;
    white-space: nowrap;
  }
  .table-v2 thead th {
    font-size: 0.6rem !important;
    min-width: 55px;
    padding: 0.4rem 0.3rem !important;
  }

  /* ─── .table-v2.drivers-table (Proyecciones: drivers de negocio) ─── */
  /* Columna Baseline (2da): mostrar compacta en mobile */
  .table-v2.drivers-table thead th:nth-child(2),
  .table-v2.drivers-table tbody td:nth-child(2) {
    display: table-cell !important;
    min-width: 58px !important;
    max-width: 68px !important;
    width: 62px !important;
    font-size: 0.65rem !important;
    text-align: center !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  /* Primera columna (Driver de Negocio): sticky con nombres */
  .table-v2.drivers-table thead th:first-child,
  .table-v2.drivers-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 5;
    min-width: 105px !important;
    max-width: 125px !important;
    width: 115px !important;
    text-align: left !important;
    white-space: normal;
    box-shadow: 4px 0 6px -2px rgba(0,0,0,0.5);
    padding-left: 0.15rem !important;
    padding-right: 0.25rem !important;
  }
  /* Override del inline padding del td (HTML inline: padding: 0.8rem 1rem) */
  .table-v2.drivers-table tbody td:first-child > div:first-child {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
  .table-v2.drivers-table tbody td:first-child > div:last-child {
    font-size: 0.55rem !important;
    line-height: 1.1 !important;
    text-align: left !important;
    margin-top: 2px !important;
  }
  /* Cells de datos: min-width compacto */
  .table-v2.drivers-table tbody td:not(:first-child) {
    min-width: 55px;
    text-align: center !important;
  }
  /* Inputs dentro de la tabla de drivers */
  .table-v2.drivers-table td input {
    width: 100% !important;
    min-width: 50px;
    box-sizing: border-box;
    font-size: 0.7rem !important;
    padding: 0.3rem 0.3rem !important;
    text-align: center !important;
  }

  /* ─── .table-v2 generica (Proyeccion de Estados, Flujo proyectado) ─── */
  /* Primera columna sticky para Metricas Clave / similares */
  .table-v2:not(.drivers-table) thead th:first-child,
  .table-v2:not(.drivers-table) tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 5;
    min-width: 110px !important;
    max-width: 140px !important;
    text-align: left !important;
    white-space: normal;
    box-shadow: 4px 0 6px -2px rgba(0,0,0,0.5);
    padding-left: 0.4rem !important;
    padding-right: 0.3rem !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
  }
  /* Cells de datos (anios REAL/PROY): mas anchas para numeros largos */
  .table-v2:not(.drivers-table) thead th:not(:first-child),
  .table-v2:not(.drivers-table) tbody td:not(:first-child) {
    min-width: 80px !important;
    text-align: right !important;
    padding-right: 0.5rem !important;
    padding-left: 0.4rem !important;
    font-size: 0.7rem !important;
  }

  /* ─── INFORME COMITE: header + scorecard + grid 2col apilan ─── */
  .informe-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
  }
  .informe-header > div:first-child {
    flex-wrap: wrap;
    gap: 0.75rem !important;
  }
  .informe-header-logo {
    padding: 0.4rem 0.75rem !important;
    font-size: 1rem !important;
  }
  .informe-header-title {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
  }
  .informe-header-subtitle {
    font-size: 0.65rem !important;
    letter-spacing: 0.5px !important;
  }
  .informe-meta {
    text-align: left !important;
    width: 100%;
  }
  .informe-meta > div:first-child {
    font-size: 0.95rem !important;
  }
  .informe-meta > div {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }

  /* Scorecard: apilar texto arriba + score abajo */
  .informe-scorecard {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }
  .informe-scorecard > div:last-child {
    padding-left: 0 !important;
    padding-top: 1rem !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }
  .informe-score-value {
    font-size: 2.5rem !important;
  }

  /* Grid 2 columnas → 1 col */
  .informe-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}
/* ===================================================
   Panel "Cuentas sin clasificar" (Ingreso de Datos)
   Cuentas que la IA leyó en el balance pero no supo
   mapear. Solo se muestra si el año trae pendientes.
   =================================================== */
.nc-panel {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.nc-panel-alerta {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.04);
}
.nc-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  margin-bottom: 0.75rem;
}
.nc-header-icon { font-size: 1.5rem; }
.nc-header-title { font-size: 0.9rem; font-weight: 700; color: #f8fafc; }
.nc-header-sub { font-size: 0.75rem; color: #94a3b8; margin-top: 2px; line-height: 1.4; }
.nc-header-total {
  font-size: 0.85rem;
  font-weight: 800;
  color: #ef4444;
  white-space: nowrap;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
}
.nc-ajuste {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.75rem;
  color: #cbd5e1;
  line-height: 1.5;
  background: rgba(59, 130, 246, 0.07);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
}
.nc-ajuste strong { color: #f8fafc; }

.nc-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) auto minmax(240px, 1.4fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.1);
  margin-bottom: 0.5rem;
}
.nc-row:last-child { margin-bottom: 0; }
/* Fila de descuadre: la diferencia del balance que la IA no logró ubicar. */
.nc-row-descuadre {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.06);
}
.nc-nombre {
  font-size: 0.85rem;
  font-weight: 600;
  color: #f8fafc;
  line-height: 1.3;
}
.nc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 4px;
  font-size: 0.68rem;
  color: #94a3b8;
}
.nc-badge {
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.nc-contexto { font-style: italic; opacity: 0.8; }
.nc-monto {
  font-size: 0.95rem;
  font-weight: 800;
  color: #f8fafc;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nc-destino { display: flex; flex-direction: column; gap: 0.35rem; }
.nc-select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.9);
  color: #f8fafc;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
}
.nc-select:focus { outline: none; border-color: #3b82f6; }
/* Informativo: cómo aplicará el motor la cuenta destino. El monto siempre se
   guarda en positivo; el signo lo pone el motor. */
.nc-efecto {
  font-size: 0.68rem;
  color: #94a3b8;
  padding-left: 0.15rem;
  line-height: 1.3;
}
.nc-acciones { display: flex; flex-direction: column; gap: 0.35rem; }
.nc-btn {
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: none;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s ease;
  white-space: nowrap;
}
.nc-btn:hover { filter: brightness(1.15); }
.nc-btn-asignar { background: #3b82f6; color: #fff; }
.nc-btn-ignorar {
  background: transparent;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.nc-row-asignada {
  animation: ncFadeOut 0.35s ease forwards;
}
@keyframes ncFadeOut {
  to { opacity: 0; transform: translateX(12px); }
}

@media (max-width: 900px) {
  .nc-row { grid-template-columns: 1fr; gap: 0.6rem; }
  .nc-monto { text-align: left; }
  .nc-acciones { flex-direction: row; }
  /* El total "Pendiente" no envuelve: en pantallas angostas se lleva el ancho
     y deja el título en una columna de una palabra por línea. Va abajo. */
  .nc-header { flex-wrap: wrap; }
  .nc-header-total { width: 100%; text-align: center; }
}

.nc-aviso-cuadre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: -0.5rem 1rem 1rem 1rem;
  padding: 0.7rem 1.25rem;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.07);
  cursor: pointer;
  transition: background 0.15s ease;
}
.nc-aviso-cuadre:hover { background: rgba(239, 68, 68, 0.12); }

/* ── Desglose de partidas (detalle por año) ── */
.detalle-toggle {
  margin-left: 6px; width: 18px; height: 18px; line-height: 15px;
  border-radius: 4px; border: 1px solid var(--border, rgba(255,255,255,0.15));
  background: transparent; color: #94a3b8; font-size: 12px; cursor: pointer;
  padding: 0; vertical-align: middle;
}
.detalle-toggle:hover { color: #fff; border-color: var(--ds-primary, #3b82f6); }
.detalle-toggle.tiene-detalle { color: #60a5fa; border-color: #60a5fa; }
.detalle-panel {
  margin-top: 6px; padding: 8px;
  border: 1px dashed var(--border, rgba(255,255,255,0.15));
  border-radius: 8px; background: rgba(255,255,255,0.03);
}
.detalle-linea { display: flex; gap: 6px; margin-bottom: 5px; align-items: center; }
.detalle-linea .detalle-nombre { flex: 1 1 auto; min-width: 0; }
.detalle-linea .detalle-monto { flex: 0 0 110px; text-align: right; }
.detalle-panel input {
  padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  background: rgba(0,0,0,0.2); color: #f8fafc; font-size: 0.8rem;
}
.detalle-del {
  flex: 0 0 auto; width: 24px; height: 24px; border: none; border-radius: 6px;
  background: rgba(239,68,68,0.15); color: #ef4444; cursor: pointer; font-size: 12px;
}
.detalle-del:hover { background: rgba(239,68,68,0.3); }
.detalle-vacio { font-size: 0.72rem; color: #94a3b8; padding: 2px 0 6px; }
.detalle-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-top: 4px;
}
.detalle-add {
  border: 1px solid var(--ds-primary, #3b82f6); background: transparent;
  color: #60a5fa; border-radius: 6px; padding: 4px 10px; font-size: 0.75rem; cursor: pointer;
}
.detalle-add:hover { background: rgba(59,130,246,0.12); }
.detalle-status { font-size: 0.72rem; font-weight: 600; text-align: right; }
.detalle-status .ds-ok { color: #10b981; }
.detalle-status .ds-warn { color: #ef4444; }
.detalle-status .ds-neutral { color: #94a3b8; }
.detalle-usar {
  margin-left: 6px; border: none; border-radius: 5px;
  background: rgba(239,68,68,0.15); color: #fca5a5; padding: 2px 8px;
  font-size: 0.7rem; cursor: pointer;
}
.detalle-usar:hover { background: rgba(239,68,68,0.28); color: #fff; }

/* ── Desglose: ancho completo al abrir + encabezado con cierre ── */
.form-group.detalle-open { grid-column: 1 / -1; }
.detalle-panel { max-width: 760px; }
.detalle-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.12));
}
.detalle-titulo {
  font-size: 0.68rem; color: #94a3b8; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.detalle-cerrar {
  border: 1px solid var(--border, rgba(255,255,255,0.15)); background: transparent;
  color: #94a3b8; border-radius: 6px; padding: 3px 10px; font-size: 0.72rem;
  font-weight: 600; cursor: pointer;
}
.detalle-cerrar:hover { color: #fff; border-color: #cbd5e1; background: rgba(255,255,255,0.05); }