:root {
  /* ═══════════════════════════════════════════════════════
     B·TOOLS DESIGN SYSTEM — Tema OSCURO (default)
     Basado en la identidad B·TOOLS: negro profundo + verde teal
     ═══════════════════════════════════════════════════════ */
  --bg: #09090B;
  --surface: #131316;
  --surface2: #1C1C21;
  --surface3: #26262D;
  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.12);
  --text: #F4F4F5;
  /* CO2 — grises sutiles pero LEGIBLES: el #6B6B75 original quedaba a ~3.5:1
     sobre --surface (bajo el mínimo AA de 4.5) y era el color de labels,
     encabezados de tabla y sidebar — la mayoría de la UI. */
  --text2: #9999A2;
  --text3: #8A8A95;
  /* Texto sobre el accent (botón primario): oscuro pasa AA sobre el teal en
     AMBOS temas; el blanco quedaba a 3.5:1 en claro. */
  --on-accent: #030308;
  /* CO1 — accent menos saturado, más maduro/sage */
  --accent: #54A597;
  --accent2: #437F75;
  --accent-hover: #6BB8A9;
  --accent-glow: rgba(84,165,151,0.14);
  --accent-glow-strong: rgba(84,165,151,0.26);
  /* Colores semánticos — saturación bajada un toque */
  --green: #1FAA7A;
  --green-bg: rgba(31,170,122,0.11);
  --amber: #E5970B;
  --amber-bg: rgba(229,151,11,0.11);
  --red: #E04848;
  --red-bg: rgba(224,72,72,0.11);
  --purple: #9D87E8;
  --purple-bg: rgba(157,135,232,0.11);
  /* CO3 — "Completado" usa teal más apagado (no compite con accent) */
  --teal: #5DBED1;
  --teal-bg: rgba(93,190,209,0.11);
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --font: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'DM Mono', 'Courier New', monospace;
  --font-display: 'Inter', 'DM Sans', sans-serif;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-accent: 0 0 0 1px rgba(84,165,151,0.3), 0 8px 24px rgba(84,165,151,0.12);
  /* Capas de "tinta" sobre la superficie (hover de filas/inputs, zebra,
     highlights). En oscuro = blanco translúcido; en claro = tinta oscura.
     Antes estaban hardcodeadas en blanco y el tema claro perdía TODO el
     feedback del builder (zebra, hover de fila, hover de inputs). */
  --tint-1: rgba(255,255,255,0.012);
  --tint-2: rgba(255,255,255,0.022);
  --tint-3: rgba(255,255,255,0.03);
  --tint-4: rgba(255,255,255,0.04);
  /* Sombra de paneles flotantes (dropdowns, drawers, chips) con variante clara */
  --shadow-pop: 0 12px 40px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════════════════════
   B·TOOLS DESIGN SYSTEM — Tema CLARO
   ═══════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --surface2: #F4F4F5;
  --surface3: #E4E4E7;
  --border: rgba(9,9,11,0.08);
  --border2: rgba(9,9,11,0.16);
  --text: #09090B;
  --text2: #3F3F46;
  --text3: #63636D; /* el #71717A pasaba AA por 0.1 — margen real a tamaños chicos */
  --accent: #4A9589;
  --accent2: #3B7870;
  --accent-hover: #5EB3A5;
  --accent-glow: rgba(74,149,137,0.10);
  --accent-glow-strong: rgba(74,149,137,0.20);
  --green: #059669;
  --green-bg: rgba(16,185,129,0.10);
  --amber: #D97706;
  --amber-bg: rgba(245,158,11,0.10);
  --red: #DC2626;
  --red-bg: rgba(239,68,68,0.08);
  --purple: #8B5CF6;
  --purple-bg: rgba(167,139,250,0.10);
  --teal: #0891B2;
  --teal-bg: rgba(34,211,238,0.10);
  --shadow-sm: 0 1px 2px rgba(9,9,11,0.05);
  --shadow: 0 4px 16px rgba(9,9,11,0.06);
  --shadow-lg: 0 20px 40px rgba(9,9,11,0.12), 0 0 0 1px rgba(9,9,11,0.04);
  --shadow-accent: 0 0 0 1px rgba(74,149,137,0.3), 0 8px 20px rgba(74,149,137,0.1);
  --tint-1: rgba(9,9,11,0.02);
  --tint-2: rgba(9,9,11,0.032);
  --tint-3: rgba(9,9,11,0.045);
  --tint-4: rgba(9,9,11,0.055);
  --shadow-pop: 0 12px 32px rgba(9,9,11,0.14), 0 0 0 1px rgba(9,9,11,0.05);
}


/* El login respeta el tema del usuario */
#login-screen {
  background: var(--bg);
}
* { box-sizing: border-box; margin: 0; padding: 0; }

/* A11y: foco visible al navegar con teclado (Tab) — anillo claro alrededor del
   elemento enfocado. Con :focus-visible NO aparece al hacer click con el mouse,
   así que no molesta el uso normal y sí ayuda a quien navega con teclado. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: none; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; }

/* PO2 — Smooth scroll global */
html { scroll-behavior: smooth; }

/* X2 — Transición suave al cambiar tema claro/oscuro (mejorada) */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.35s cubic-bezier(.4,0,.2,1), color 0.35s cubic-bezier(.4,0,.2,1), border-color 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.35s cubic-bezier(.4,0,.2,1), fill 0.35s cubic-bezier(.4,0,.2,1), stroke 0.35s cubic-bezier(.4,0,.2,1), opacity 0.35s cubic-bezier(.4,0,.2,1) !important;
}

/* C5 — Transición de página: fade in suave al cambiar */
.page { display: none; }
.page.active { display: block; }
@keyframes pageFadeIn-unused {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* X3 — Respect prefers-reduced-motion (accesibilidad)
   Solo desactiva TRANSICIONES decorativas (hover lift, fade entrada, etc.)
   Las ANIMACIONES funcionales (spinners, progress bars, splash) siguen activas
   porque comunican estado importante al usuario. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* LOGIN — SPLIT CON VIDEO */
#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: var(--bg);
}

/* Contenedor split full-screen */
.login-box {
  width: 100%;
  max-width: 1200px;
  display: flex;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
  margin: 0 auto;
}
.login-box::before { display: none; }

/* Panel izquierdo — video */
.login-video-panel {
  width: 54%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: #030308;
}
.login-video-wrap {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.login-video-wrap iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 180%; height: 180%;
  border: none;
  pointer-events: none;
}
/* Capas de overlay cinematográfico */
.login-video-tint    { position: absolute; inset: 0; z-index: 2; background: rgba(3,3,8,0.38); }
.login-video-grad-t  { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(3,3,8,0.65) 0%, transparent 35%); }
.login-video-grad-b  { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(3,3,8,0.75) 0%, transparent 50%); }
.login-video-grad-r  { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to right, transparent 55%, rgba(3,3,8,0.85) 100%); }
.login-video-edge    { position: absolute; top: 0; right: 0; bottom: 0; width: 1px; z-index: 4; background: linear-gradient(180deg, transparent, rgba(62,201,167,0.7) 35%, rgba(62,201,167,0.7) 65%, transparent); }

/* Contenido encima del video */
.login-video-content {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  padding: 36px 32px;
}
.lvc-top { display: flex; align-items: center; gap: 8px; }
.lvc-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.lvc-wordmark { font-size: 9px; font-weight: 900; letter-spacing: .22em; color: rgba(255,255,255,0.75); text-transform: uppercase; }
.lvc-mid { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 8px; }
.lvc-label { font-size: 8px; letter-spacing: .18em; color: rgba(62,201,167,0.65); text-transform: uppercase; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.lvc-label-line { width: 18px; height: 1px; background: rgba(62,201,167,0.4); }
.lvc-headline { font-size: 48px; font-weight: 900; color: #fff; letter-spacing: -.08em; line-height: .88; }
.lvc-headline em { color: var(--accent); font-style: normal; display: block; }

/* Panel derecho — formulario */
.login-form-panel {
  flex: 1;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 44px;
  position: relative;
  overflow: hidden;
}
/* Textura de puntos sutil */
.login-form-panel::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(62,201,167,0.035) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
/* Esquinas decorativas */
.login-form-panel::after {
  content: '';
  position: absolute;
  top: 20px; right: 20px;
  width: 10px; height: 10px;
  border-top: 1px solid rgba(62,201,167,0.18);
  border-right: 1px solid rgba(62,201,167,0.18);
}
.login-form-inner { position: relative; z-index: 1; max-width: 340px; }
.login-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .18em;
  color: rgba(84,165,151,0.85); text-transform: uppercase;
  margin-bottom: 22px;
  display: flex; align-items: center; gap: 8px;
}
.login-eyebrow-line { width: 14px; height: 1px; background: rgba(62,201,167,0.25); }

/* Adaptar brand al nuevo layout — ocultar en panel video, mostrar en form */
.login-brand { display: none; }

.login-title { font-size: 26px; font-weight: 900; margin-bottom: 6px; letter-spacing: -.05em; color: var(--text); }
.login-sub { color: var(--text3); margin-bottom: 28px; font-size: 12px; letter-spacing: .01em; }
.login-step { display: none; }
.login-step.active { display: block; animation: fadein 0.3s ease; }

/* Labels sobre los campos */
.login-field-label {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: var(--text2); text-transform: uppercase; margin-bottom: 6px; display: block;
}
.login-btn {
  width: 100%; padding: 13px;
  border-radius: 10px; border: none;
  background: var(--accent); color: #030308;
  font-family: var(--font); font-size: 13px; font-weight: 900;
  cursor: pointer; letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s;
}
.login-btn-arrow {
  width: 20px; height: 20px;
  background: rgba(3,3,8,0.15); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.login-btn-arrow svg { width: 11px; height: 11px; stroke: #030308; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.login-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.login-btn:active { transform: translateY(0); }
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.login-input {
  width: 100%; padding: 11px 14px;
  border-radius: 10px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text);
  font-family: var(--font); font-size: 14px; outline: none; transition: all 0.2s;
}
.login-input::placeholder { color: var(--text3); }
.login-input:focus { border-color: var(--accent); background: var(--accent-glow); box-shadow: 0 0 0 3px var(--accent-glow); }

.login-error {
  color: var(--red); font-size: 12px; margin-bottom: 14px; display: none;
  padding: 10px 12px; background: var(--red-bg);
  border: 1px solid rgba(240,79,79,0.2); border-radius: 8px;
}
.login-footer {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: var(--text3); display: flex; gap: 8px; align-items: center;
  z-index: 10;
}
.login-footer strong { color: var(--text2); font-weight: 500; }
.login-back { background: none; border: none; color: var(--text3); font-family: var(--font); font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 28px; display: flex; align-items: center; gap: 6px; transition: color 0.15s; }
.login-back:hover { color: var(--text2); }

/* TEMA CLARO — login */
html[data-theme="light"] .login-video-grad-r {
  background: none; /* sin gradiente blanco que mata el video */
}
html[data-theme="light"] .login-video-edge {
  background: linear-gradient(180deg, transparent, rgba(47,168,139,0.9) 35%, rgba(47,168,139,0.9) 65%, transparent);
  width: 2px; /* línea más visible */
}
html[data-theme="light"] .login-form-panel {
  background: #FAFAFD;
  border-left: 1px solid rgba(0,0,0,0.08);
}
html[data-theme="light"] .login-form-panel::before {
  background-image: radial-gradient(rgba(47,168,139,0.06) 1px, transparent 1px);
}
html[data-theme="light"] .login-form-panel::after { border-color: rgba(47,168,139,0.25); }
html[data-theme="light"] .login-input { background: #FFFFFF; border-color: rgba(0,0,0,0.12); color: #0A0A18; }
html[data-theme="light"] .login-input::placeholder { color: #B0B0C8; }
html[data-theme="light"] .login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
html[data-theme="light"] .login-btn { color: #fff; }
html[data-theme="light"] .login-eyebrow { color: var(--accent); opacity: 0.8; }
html[data-theme="light"] .login-eyebrow-line { background: var(--accent); opacity: 0.3; }
html[data-theme="light"] .login-footer { color: #A0A0B8; }
html[data-theme="light"] .login-title { color: #0A0A18; }
html[data-theme="light"] .login-sub { color: #7878A0; }
html[data-theme="light"] .login-field-label { color: var(--text2); } /* antes #A0A0C0 sobre blanco ≈ 2.4:1 */

/* LAYOUT */
#app { display: none; min-height: 100vh; flex-direction: column; }
.topbar {
  height: 52px; display: flex; align-items: center;
  padding: 0 18px; gap: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg, var(--surface));
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.topbar::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(62,201,167,0.18),transparent); pointer-events:none; }
.topbar-brand { display: flex; align-items: center; gap: 9px; }
.topbar-brand-mark { width: 22px; height: 22px; color: var(--accent); }
.topbar-logo { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--text); text-transform: uppercase; line-height: 1; }
.topbar-logo span { color: var(--accent); }
.topbar-logo-sub { font-size: 9px; font-weight: 500; letter-spacing: .12em; color: var(--text3); text-transform: uppercase; margin-top: 3px; line-height: 1; }
.topbar-sep { flex: 1; }
.topbar-role { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 7px; background: var(--accent-glow); border: 1px solid var(--accent-glow-strong); font-size: 10px; font-weight: 700; color: var(--accent); font-family: var(--font); letter-spacing: .04em; }
.topbar-role-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.topbar-logout { padding: 5px 12px; border-radius: 7px; border: 1px solid var(--border2); background: transparent; color: var(--text3); font-family: var(--font); font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.topbar-logout:hover { background: var(--surface2); color: var(--text); }

/* N1 — Búsqueda global en el centro del topbar */
.topbar-search {
  flex: 1;
  max-width: 480px;
  margin: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text3);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.topbar-search:hover { background: var(--surface3); border-color: var(--border2); color: var(--text2); }
.topbar-search svg { flex-shrink: 0; opacity: 0.7; }
.topbar-search span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-kbd {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 4px;
  color: var(--text3);
  flex-shrink: 0;
}

/* N1 — Avatar+nombre+chevron como dropdown unificado */
.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 99px;
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s ease;
}
.topbar-user:hover { background: var(--surface3); border-color: var(--border2); }
.topbar-user-name { font-size: 12px; font-weight: 600; color: var(--text); }
.topbar-user svg { color: var(--text3); }

/* N1 — Botón hamburguesa para abrir menú lateral */
.topbar-iconbtn:hover { color: var(--text); }

/* N2 — Campana de notificaciones */
.topbar-bell { position: relative; }
.topbar-bell-badge {
  position: absolute;
  top: 0; right: 0;
  background: var(--red);
  color: white;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 99px;
  min-width: 16px;
  text-align: center;
  border: 2px solid var(--bg);
  line-height: 1;
}

/* User menu dropdown */
#user-menu, #notif-panel {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  min-width: 280px;
  z-index: 9999;
  display: none;
  animation: dropdownIn 0.15s ease;
}
#user-menu.visible, #notif-panel.visible { display: block; }
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#user-menu .user-menu-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
#user-menu .user-menu-info-name { font-size: 13px; font-weight: 700; color: var(--text); }
#user-menu .user-menu-info-role { font-size: 11px; color: var(--text3); margin-top: 2px; }
#user-menu .user-menu-section { padding: 6px; }
#user-menu .user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}
#user-menu .user-menu-item:hover { background: var(--surface2); }
#user-menu .user-menu-item.danger { color: var(--red); }
#user-menu .user-menu-item.danger:hover { background: var(--red-bg); }
#user-menu .user-menu-divider { height: 1px; background: var(--border); margin: 4px 6px; }

/* Switch toggle (usado en Mi Perfil) */
.switch { position: relative; display: inline-block; width: 42px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--surface3); border-radius: 22px; transition: .2s; }
.switch .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider:before { transform: translateX(20px); }

/* Notif panel */
#notif-panel {
  width: 360px;
  max-width: calc(100vw - 24px); /* en un teléfono de 360-390px el ancho fijo desbordaba */
  max-height: 480px;
  overflow: hidden;
  display: none;
  flex-direction: column;
}
#notif-panel.visible { display: flex; }
#notif-panel-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#notif-panel-header h4 { font-size: 14px; font-weight: 700; }
#notif-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}
.notif-item {
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 2px;
  display: flex;
  gap: 10px;
  transition: background 0.1s;
}
.notif-item:hover { background: var(--surface2); }
.notif-item.unread { background: var(--accent-glow); }
.notif-item.unread:hover { background: var(--accent-glow-strong); }
.notif-item-icon { font-size: 18px; flex-shrink: 0; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.notif-item-meta { font-size: 11px; color: var(--text3); }

/* N1 — Modal de búsqueda global Ctrl+K */
#global-search-modal {
  position: fixed; inset: 0;
  z-index: 9998;
  display: none;
}
#global-search-modal.visible { display: block; }
.gs-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.gs-panel {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.gs-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text3);
}
.gs-input-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 15px;
  outline: none;
  font-family: var(--font);
}
.gs-results {
  overflow-y: auto;
  flex: 1;
  padding: 6px;
}
.gs-hint {
  padding: 32px;
  text-align: center;
  color: var(--text3);
  font-size: 13px;
}
.gs-group-title {
  padding: 10px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text3);
}
.gs-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.gs-result:hover { background: var(--surface2); }

/* D1 — Hero metric del dashboard */
.dash-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 28px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.dash-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(84,165,151,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.dash-hero-left {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.dash-hero-greet {
  font-size: 12px;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.dash-hero-greet span {
  color: var(--accent);
  font-weight: 700;
}
.dash-hero-value {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.dash-hero-sub {
  font-size: 12px;
  color: var(--text3);
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.dash-hero-stats {
  display: flex;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.dash-hero-stat {
  text-align: center;
  min-width: 70px;
}
.dash-hero-stat-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dash-hero-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px;
}
@media (max-width: 700px) {
  .dash-hero { flex-direction: column; align-items: flex-start; padding: 18px; gap: 18px; }
  .dash-hero-stats { width: 100%; justify-content: space-between; gap: 8px; }
  .dash-hero-value { font-size: 30px; }
}

/* D3 — Pipeline donut chart */
.pipeline-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.pipeline-donut {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pipeline-donut::after {
  content: '';
  position: absolute;
  inset: 22px;
  background: var(--surface);
  border-radius: 50%;
}
.pipeline-donut-center {
  position: relative;
  z-index: 1;
  text-align: center;
}
.pipeline-donut-num {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pipeline-donut-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.pipeline-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.pipeline-legend-item {
  display: grid;
  grid-template-columns: 10px 1fr auto 36px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.pipeline-legend-item:hover { background: var(--surface2); }
.pipeline-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.pipeline-legend-label {
  font-size: 12px;
  color: var(--text);
}
.pipeline-legend-count {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pipeline-legend-pct {
  font-size: 10px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}

.main { display: flex; flex: 1; }
.sidebar {
  width: 220px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  background: var(--sidebar-bg, var(--surface));
  position: sticky; top: 52px;
  height: calc(100vh - 52px);
  overflow-y: auto; overflow-x: hidden;
  transition: width 0.2s ease, padding 0.2s ease, border-color 0.2s ease;
}
.sidebar.collapsed { width: 0; padding-left: 0; padding-right: 0; border-right-color: transparent; overflow: hidden; }

/* Botones de la topbar */
.topbar-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 15px;
  padding: 0;
}
.topbar-iconbtn:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}
.sidebar-section {
  font-size: 10px; font-weight: 700; letter-spacing: .18em;
  color: var(--text3); text-transform: uppercase;
  margin: 20px 0 7px 10px; opacity: 0.85; /* 9px + .6 era casi invisible y anulaba la agrupación del menú */
}
.sidebar-section:first-child { margin-top: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: 9px;
  cursor: pointer; transition: all 0.15s;
  color: var(--text3); font-size: 12px; font-weight: 500;
  margin-bottom: 2px; letter-spacing: -.01em;
  position: relative; overflow: hidden; white-space: nowrap;
}
.nav-item svg { flex-shrink: 0; color: var(--text3); transition: color 0.15s; }
.nav-item:hover { background: var(--surface2); color: var(--text2); }
.nav-item:hover svg { color: var(--text2); }
.nav-item.active {
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 600;
  border: 1px solid var(--accent-glow-strong);
}
.nav-item.active svg { color: var(--accent); }
.nav-item.active::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 18px;
  background: var(--accent); border-radius: 0 2px 2px 0;
}
.sidebar { overflow-x: hidden; }
.nav-badge {
  margin-left: auto; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 6px;
  background: #C93131; color: #fff; /* --red daba 4.0:1 con blanco a 10px; este pasa AA sin cambiar la lectura */
}
.nav-badge-amber { background: var(--amber); }

.content { flex: 1; padding: 24px 28px; overflow-y: auto; max-width: 1240px; }

/* Cuentas por Pagar — módulo nativo */
.cxp-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.cxp-filtros { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cxp-filtros select, .cxp-filtros input[type=text] {
  padding:7px 11px; border-radius:8px; border:1px solid var(--border2);
  background:var(--surface2); color:var(--text); font-family:var(--font); font-size:12px; outline:none;
}
.cxp-totales { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.cxp-total-card {
  flex:1; min-width:150px; background:var(--surface); border:1px solid var(--border);
  border-radius:11px; padding:12px 16px;
}
.cxp-total-card .lbl { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.cxp-total-card .val { font-size:20px; font-weight:700; margin-top:4px; letter-spacing:-.02em; }
.cxp-total-card.rojo .val { color:var(--red); }
.cxp-total-card.verde .val { color:var(--green); }
/* Semáforo de vencimiento sobre la fila */
.cxp-row.vencida td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.cxp-row.por-vencer td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.cxp-row.pagado-row { opacity:.78; } /* .6 hundía el texto secundario a ~2:1; el badge PAGADO ya distingue la fila */
.cxp-venc-chip { font-size:11px; font-weight:600; white-space:nowrap; }
.cxp-venc-chip.vencida { color:var(--red); }
.cxp-venc-chip.por-vencer { color:var(--amber); }
.cxp-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cxp-detalle { display:inline-block; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.cxp-pm-link { color:var(--text2); font-size:12px; white-space:nowrap; cursor:pointer; border-bottom:1px dashed var(--border2); }
.cxp-pm-link:hover { color:var(--accent); border-bottom-color:var(--accent); }
.cxp-acciones { display:flex; gap:6px; justify-content:flex-end; }
.cxp-icon-btn {
  background:var(--surface2); border:1px solid var(--border2); border-radius:7px;
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text2); font-size:13px; transition:all .15s;
}
.cxp-icon-btn:hover { background:var(--surface3); color:var(--text); transform:translateY(-1px); }
.cxp-pago-hist { margin-top:6px; }
.cxp-pago-row { display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:13px; border-bottom:1px solid var(--border); }
/* Filtros de columna estilo Excel */
.cxp-funnel { display:inline-flex; align-items:center; margin-left:5px; cursor:pointer; color:var(--text3); vertical-align:middle; }
.cxp-funnel:hover { color:var(--text); }
.cxp-funnel.active { color:var(--accent); }
.cxp-colfilter { position:fixed; z-index:1200; width:264px; background:var(--surface); border:1px solid var(--border2); border-radius:10px; box-shadow:var(--shadow-pop); padding:10px; }
.cxp-cf-search { width:100%; box-sizing:border-box; padding:7px 10px; border-radius:8px; border:1px solid var(--border2); background:var(--surface2); color:var(--text); font-size:13px; outline:none; margin-bottom:8px; }
.cxp-cf-actions { font-size:11px; margin-bottom:6px; display:flex; gap:8px; align-items:center; }
.cxp-cf-actions a { color:var(--accent); cursor:pointer; }
.cxp-cf-list { max-height:240px; overflow-y:auto; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:4px 0; }
.cxp-cf-item { display:flex; align-items:center; gap:8px; padding:5px 4px; font-size:13px; cursor:pointer; }
.cxp-cf-item:hover { background:var(--surface2); }
.cxp-cf-empty { padding:10px 4px; font-size:12px; color:var(--text3); }
.cxp-cf-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
/* Autocompletado (RUT / proveedor / OC) en el modal */
.cxp-ac-wrap { position:relative; }
.cxp-ac-wrap > input { width:100%; box-sizing:border-box; }
.cxp-ac-list { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px); background:var(--surface2); border:1px solid var(--border2); border-radius:8px; max-height:240px; overflow-y:auto; box-shadow:var(--shadow-pop); display:none; }
.cxp-ac-list.open { display:block; }
.cxp-ac-item { padding:8px 11px; cursor:pointer; font-size:13px; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.cxp-ac-item:hover, .cxp-ac-item.active { background:var(--surface3); }
.cxp-ac-item .sub { color:var(--text3); font-size:11px; white-space:nowrap; }
/* Tabla estilo Excel: una columna por campo, compacta, con edición inline.
   El max-height es lo que hace FUNCIONAR el sticky del thead: con overflow-x
   solo, el overflow-y computa a auto y el wrapper (alto = contenido) pasa a
   ser el scrollport — el header "pegado" a un contenedor que nunca scrollea
   jamás se pegaba, y al bajar por 500 filas de 19 columnas desaparecían los
   encabezados. Ahora el scroll vertical vive dentro del wrapper. */
.cxp-grid-wrap { overflow:auto; max-height:calc(100vh - 265px); background:var(--surface); border:1px solid var(--border); border-radius:12px; }
.cxp-grid { width:100%; border-collapse:collapse; font-size:10.5px; min-width:1560px; }
.cxp-grid thead th { position:sticky; top:0; z-index:2; background:var(--surface2); color:var(--text3); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; padding:7px 6px; text-align:left; border-bottom:1px solid var(--border2); white-space:nowrap; }
.cxp-grid thead th.cxp-num { text-align:right; }
.cxp-grid tbody td { padding:2px 3px; border-bottom:1px solid var(--border); white-space:nowrap; vertical-align:middle; }
.cxp-grid tbody tr:hover td { background:var(--surface2); }
/* Celda editable: el control está siempre presente; el borde aparece al hover de la fila / focus */
.cxp-cell-in { width:100%; box-sizing:border-box; background:transparent; border:1px solid transparent; color:var(--text); font-family:var(--font); font-size:10.5px; padding:3px 5px; border-radius:5px; outline:none; }
.cxp-grid tbody tr:hover .cxp-cell-in { border-color:var(--border2); }
.cxp-cell-in:focus { border-color:var(--accent); background:var(--surface); }
.cxp-cell-in.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.cxp-cell-in.der { text-align:right; }
select.cxp-cell-in { cursor:pointer; }
.cxp-ro { color:var(--text2); padding:3px 5px; display:inline-block; }
.cxp-ro.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.cxp-grid .cxp-venc-chip { font-size:10px; }
.cxp-grid .badge { font-size:8.5px; padding:2px 6px; }
.cxp-grid .cxp-icon-btn { width:24px; height:24px; font-size:11px; border-radius:6px; }
.cxp-grid .cxp-acciones { gap:3px; }
/* Rendiciones: 10 columnas en vez de 18 → cabe holgado, así que respira más
   que CxP/CxC y ocupa el ancho completo sin scroll horizontal. */
.rnd-grid { min-width:0; font-size:11.5px; }
.rnd-grid thead th { font-size:9px; padding:9px 7px; }
.rnd-grid tbody td { padding:7px 7px; }
.rnd-grid .badge { font-size:9.5px; padding:3px 7px; }
.rnd-grid .cxp-ro { padding:0; }
/* Productor y proyecto se recortan en vez de ensanchar la tabla: el nombre
   completo queda en el title. El proyecto va corto a propósito — en esta
   grilla importan más los montos que el nombre del evento. */
.rnd-trunc { max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rnd-grid td .rnd-prod { display:block; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rnd-grid .cxp-cell-in { font-size:11px; padding:4px 6px; }
.cxp-pager { display:flex; gap:12px; align-items:center; justify-content:center; padding:10px; font-size:12px; color:var(--text2); }
.cxp-pager button[disabled] { opacity:.4; cursor:default; }
/* Fila de alta rápida (primera fila, estilo Excel) */
.cxp-add-row td { background:var(--accent-glow); border-bottom:2px solid var(--accent-glow-strong); }
.cxp-add-row td:first-child { box-shadow:inset 3px 0 0 var(--accent); }
.cxp-add-row .cxp-cell-in { border:1px dashed var(--border2); background:var(--surface); }
.cxp-add-row .cxp-cell-in::placeholder { color:var(--text3); }
.cxp-add-row .cxp-cell-in:focus { border-style:solid; border-color:var(--accent); }
.cxp-add-ro { color:var(--text3); font-style:italic; font-size:10.5px; padding:4px 6px; display:inline-block; }
.cxp-btn-crear { background:var(--accent); color:#030308; border:none; border-radius:7px; font-size:11px; font-weight:700; padding:5px 10px; cursor:pointer; font-family:var(--font); white-space:nowrap; }
.cxp-btn-crear:hover { background:var(--accent-hover); }
/* Columna Saldo: la fecha del próximo pago se edita en la fila (subrayado
   punteado al pasar por la fila, como el resto de las celdas editables) */
.cxp-prox-linea { font-size:10px; font-weight:600; color:var(--accent); white-space:nowrap; display:flex; align-items:center; gap:2px; justify-content:flex-end; }
.cxp-prox-edit { cursor:pointer; border-bottom:1px dashed transparent; }
.cxp-grid tbody tr:hover .cxp-prox-edit { border-bottom-color:currentColor; }
.cxp-prox-in { font-family:var(--mono); font-size:10px; padding:1px 3px; border:1px solid var(--accent); border-radius:5px; background:var(--surface); color:var(--text); width:106px; }
.cxp-prox-reset { background:none; border:none; color:var(--text3); cursor:pointer; font-size:12px; line-height:1; padding:0 2px; }
.cxp-prox-reset:hover { color:var(--accent); }
/* Armar la corrida del viernes: date + botón, pegados como un solo control */
.cxp-viernes { display:inline-flex; align-items:center; gap:6px; }
.cxp-viernes input[type="date"] { padding:6px 8px; border-radius:8px; border:1px solid var(--border2); background:var(--surface2); color:var(--text); font-family:var(--mono); font-size:12px; }
/* Aviso de nómina descargada sin confirmar: ámbar, arriba de la tabla */
#cxp-nomina-aviso { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--amber-bg); border:1px solid rgba(245,158,11,0.35); border-radius:12px; padding:12px 16px; margin-bottom:12px; font-size:13px; color:var(--amber); }
/* Corrida de pagos: selección + barra + modal */
.cxp-check { width:14px; height:14px; accent-color:var(--accent); cursor:pointer; vertical-align:middle; }
.cxp-selbar { position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:10px; background:var(--surface2); border:1px solid var(--accent-glow-strong); border-radius:12px; padding:10px 16px; margin-bottom:12px; box-shadow:var(--shadow); font-size:13px; flex-wrap:wrap; }
.cxp-selbar #cxp-selbar-info { margin-right:auto; }
.cxp-selbar b { font-family:var(--mono); }
/* La lista de la corrida es una PLANILLA: columnas fijas y alineadas, no texto
   que se parte solo. Con 50 documentos hay que poder barrerla de un vistazo y
   que cada dato esté siempre en el mismo lugar. */
.cxp-corr-head, .cxp-corr-item {
  display:grid;
  grid-template-columns: minmax(190px,1fr) 118px 82px 132px 186px 30px;
  gap:12px; align-items:center;
}
.cxp-corr-head { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--text3); font-weight:700; padding:0 10px 7px; position:sticky; top:0; background:var(--surface); z-index:2; border-bottom:1px solid var(--border2); }
.cxp-corr-item { padding:9px 10px; border-bottom:1px solid var(--border); font-size:13.5px; }
.cxp-corr-item:hover { background:var(--surface2); }
.cxp-corr-head .der, .cxp-corr-item .der { text-align:right; justify-self:end; }
.cxp-corr-grupo { background:var(--surface2); font-weight:700; font-size:12.5px; padding:9px 12px; border-radius:8px; margin:14px 0 2px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.cxp-corr-grupo .mono { font-family:var(--mono); }
.cxp-corr-item .doc { min-width:0; }
.cxp-corr-item .doc .sub { display:block; color:var(--text3); font-size:11.5px; margin-top:2px; }
.cxp-corr-item .saldo { font-family:var(--mono); color:var(--text2); white-space:nowrap; }
.cxp-corr-monto { font-family:var(--mono); font-size:13px; text-align:right; width:100%; background:var(--surface2); border:1px solid var(--border2); border-radius:7px; color:var(--text); padding:6px 8px; }
.cxp-corr-monto:focus { border-color:var(--accent); outline:none; }
/* % ligado al monto en los dos sentidos: se calcula sobre el SALDO pendiente */
.cxp-corr-pctwrap { display:inline-flex; align-items:center; gap:2px; }
.cxp-corr-pct { font-family:var(--mono); font-size:13px; text-align:right; width:48px; background:var(--surface2); border:1px solid var(--border2); border-radius:7px; color:var(--text); padding:6px 4px; }
.cxp-corr-pct:focus { border-color:var(--accent); outline:none; }
.cxp-corr-pctwrap i { font-style:normal; color:var(--text3); font-size:11.5px; }
.cxp-corr-hint { font-size:11.5px; color:var(--amber); font-weight:600; white-space:nowrap; display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.cxp-corr-hint input { font-family:var(--mono); font-size:11px; background:var(--surface2); border:1px solid var(--border2); border-radius:6px; color:var(--text); padding:3px 5px; }
.cxp-corr-ok { font-size:11.5px; color:var(--green); font-weight:700; white-space:nowrap; }
.cxp-corr-quitar { background:none; border:none; color:var(--text3); cursor:pointer; font-size:14px; padding:3px 6px; border-radius:6px; justify-self:end; }
.cxp-corr-quitar:hover { color:var(--red); background:var(--red-bg); }
/* Rendiciones: tarjetas del productor (mobile-first) + detalle con boletas */
.rnd-lista { display:flex; flex-direction:column; gap:8px; max-width:720px; }
.rnd-card { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:13px 16px; cursor:pointer; transition:border-color .12s; }
.rnd-card:hover { border-color:var(--accent); }
.rnd-card .n { font-size:13.5px; font-weight:700; }
.rnd-card .s { font-size:11.5px; color:var(--text3); margin-top:2px; }
.rnd-rg { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-glow); border-radius:99px; padding:2px 8px; }
.rnd-boleta { display:flex; gap:10px; align-items:center; background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:8px 10px; margin-bottom:6px; }
.rnd-boleta .foto { width:44px; height:54px; border-radius:8px; background:var(--surface3); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; overflow:hidden; text-decoration:none; }
.rnd-boleta .info { flex:1; min-width:0; }
.rnd-boleta .d { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rnd-boleta .f { font-size:10.5px; color:var(--text3); font-family:var(--mono); }
.rnd-boleta .m { font-family:var(--mono); font-weight:700; font-size:13px; white-space:nowrap; }
.rnd-add { background:var(--surface2); border:1px dashed var(--border2); border-radius:14px; padding:12px; margin-top:10px; }
.rnd-add .fila { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.rnd-add input { flex:1; min-width:110px; font-family:var(--font); font-size:13px; padding:9px 10px; border-radius:10px; border:1px solid var(--border2); background:var(--surface); color:var(--text); }
.rnd-btn-foto { width:100%; padding:13px; border-radius:12px; border:2px dashed var(--accent); background:var(--accent-glow); color:var(--accent); font-family:var(--font); font-size:13.5px; font-weight:800; cursor:pointer; }
.rnd-btn-foto.ok { border-style:solid; background:var(--green-bg); border-color:var(--green); color:var(--green); }
.rnd-dif { border-radius:12px; padding:10px 12px; font-size:12.5px; font-weight:600; line-height:1.5; margin-top:10px; }
.rnd-dif.pagar { background:var(--green-bg); color:var(--green); }
.rnd-dif.devolver { background:var(--amber-bg); color:var(--amber); }
@media (max-width: 700px) {
  .rnd-add .fila { flex-direction:column; }
  #modal-rnd-detalle .modal { max-height:92vh; overflow-y:auto; }
}

/* Footer de créditos */
.app-footer {
  text-align: center;
  padding: 14px 20px;
  font-size: 11px;
  color: var(--text3);
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  letter-spacing: 0.02em;
}
.app-footer strong { color: var(--text2); font-weight: 600; }
.app-footer-sep { color: var(--text3); opacity: 0.6; }

#page-builder .card { max-width: none; }
.content.builder-mode { max-width: none; }
.page { display: none; }
.page.active { display: block; animation: fadein 0.2s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* COMPONENTS */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px; gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.page-header::after {
  content: '';
  position: absolute; bottom: -1px; left: 0;
  width: 40px; height: 2px;
  background: var(--accent); border-radius: 0 2px 2px 0;
}
.page-title {
  font-size: 28px; font-weight: 800; color: var(--text);
  letter-spacing: -0.035em; line-height: 1.1;
}
.page-sub { font-size: 13px; color: var(--text2); margin-top: 4px; line-height: 1.5; letter-spacing: .01em; font-weight: 400; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text2); font-family: var(--font); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; white-space: nowrap; letter-spacing: -.01em; }
.btn > svg { flex-shrink: 0; }
.btn:hover { background: var(--surface3); color: var(--text); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--accent); border-color: transparent; color: var(--on-accent);
  font-weight: 800; letter-spacing: -.02em;
  box-shadow: 0 2px 10px var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-hover); border-color: transparent; box-shadow: 0 4px 16px var(--accent-glow-strong); transform: translateY(-1px); }
/* (antes: color #fff en claro — 3.5:1 sobre el accent, bajo AA, en la acción
   principal de toda la app; ahora --on-accent oscuro en ambos temas) */
html[data-theme="light"] .btn-primary { color: var(--on-accent); }
.btn-success { background: var(--green-bg); border-color: rgba(34,201,138,0.25); color: var(--green); font-weight: 600; }
.btn-success:hover { background: rgba(34,201,138,0.18); }
.btn-danger { background: var(--red-bg); border-color: rgba(240,79,79,0.25); color: var(--red); font-weight: 600; }
.btn-danger:hover { background: rgba(240,79,79,0.18); }
.btn-amber { background: var(--amber-bg); border-color: rgba(245,166,35,0.25); color: var(--amber); font-weight: 600; }
.btn-amber:hover { background: rgba(245,166,35,0.18); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text3); }
.btn-ghost:hover { background: var(--surface2); color: var(--text2); border-color: transparent; }
.btn-sm { padding: 5px 10px; font-size: 11px; border-radius: 7px; }
.btn-xs { padding: 3px 8px; font-size: 10px; border-radius: 6px; }

/* Cards con acento editorial */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative; overflow: hidden;
}
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent-glow-strong), transparent);
  pointer-events: none;
}
.card:hover { border-color: var(--border2); box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.card-title {
  font-size: 10px; font-weight: 800;
  margin-bottom: 16px; color: var(--text2);
  display: flex; align-items: center; justify-content: space-between;
  letter-spacing: .1em; text-transform: uppercase;
}

/* Metric cards con acento de línea sólida y toque arquitectónico */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
.metric-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 60%, rgba(255,255,255,0.005) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative; overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.metric-card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.28); }
.metric-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; width: 100%; height: 2px;
  transition: height 0.2s;
}
.metric-card:hover::before { height: 3px; }
.metric-card.c-accent::before { background: var(--accent); }
.metric-card.c-green::before  { background: var(--green); }
.metric-card.c-amber::before  { background: var(--amber); }
.metric-card.c-red::before    { background: var(--red); }
.metric-card.c-purple::before { background: var(--purple); }
.metric-card.c-teal::before   { background: var(--teal); }

/* D2 — Sparklines + delta chip dentro de cada KPI */
.metric-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:2px; }
.metric-delta { font-size: 11px; font-weight: 600; margin-top: 6px; padding: 2px 8px; border-radius: 99px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; }
.metric-delta.up   { background: var(--green-bg); color: var(--green); }
.metric-delta.down { background: var(--red-bg); color: var(--red); }
.metric-delta.flat { background: rgba(113,113,122,.14); color: var(--text3); }
.metric-spark { margin-top: 10px; display: block; }
.metric-spark-empty { height: 28px; }

/* ── Paginación tabla presupuestos ───────────────── */
.presup-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 16px 8px;
  margin-top: 8px;
}
.pag-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  min-width: 34px;
  transition: all .15s ease;
}
.pag-btn:hover:not(:disabled):not(.pag-btn-active) {
  background: var(--surface2);
  border-color: var(--accent);
  color: var(--accent);
}
.pag-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pag-btn-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}
.pag-ellipsis {
  color: var(--text3);
  padding: 6px 8px;
  font-size: 12px;
}

/* ── Breadcrumbs ─────────────────────────────── */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
}
.bc-item {
  background: transparent;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--text3);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s ease;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-item:hover:not(.bc-current):not(.bc-last) {
  background: var(--surface2);
  color: var(--accent);
}
.bc-current {
  color: var(--text2);
  font-weight: 600;
  cursor: default;
}
.bc-last {
  color: var(--text);
  font-weight: 600;
  cursor: default;
  background: var(--surface2);
}
.bc-sep {
  color: var(--text3);
  font-size: 12px;
  flex-shrink: 0;
}

/* ── Skeleton Loaders ──────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 0%, var(--surface3,var(--border)) 50%, var(--surface2) 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  min-height: 100px;
}
.skeleton-line { height: 12px; border-radius: 4px; margin-bottom: 10px; }
.skeleton-line.sk-label { width: 45%; height: 10px; }
.skeleton-line.sk-value { width: 70%; height: 24px; margin-top: 6px; }
.skeleton-line.sk-sub   { width: 60%; height: 10px; margin-top: 10px; }
.skeleton-row {
  display: flex; gap: 16px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.skeleton-row > .skeleton { height: 14px; border-radius: 4px; }

/* ── Botones de opciones del modal de reportes ─── */
.reporte-opt {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font);
  transition: all .18s ease;
}
.reporte-opt:hover {
  background: var(--surface);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.reporte-opt:hover .reporte-opt-arrow { color: var(--accent); transform: translateX(3px); }
.reporte-opt-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.reporte-opt-arrow {
  color: var(--text3);
  font-size: 16px;
  transition: all .18s ease;
  flex-shrink: 0;
}

/* ── Health Score Gauge ──────────────────────────────── */
.health-gauge-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.health-gauge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.health-gauge-status {
  padding: 6px 14px;
  border: 1px solid;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.health-gauge-body-v2 {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  align-items: center;
}
@media (max-width: 900px){
  .health-gauge-body-v2 { grid-template-columns: 1fr; gap: 20px; }
}
.health-gauge-donut-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
}
.health-donut-svg { width: 100%; height: 100%; }
.health-donut-progress {
  transition: stroke-dasharray 0.8s cubic-bezier(.4,0,.2,1);
}
.health-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.health-donut-score {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.health-donut-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text3);
  margin-top: 4px;
}
.health-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 700px) {
  .health-stats-grid { grid-template-columns: 1fr; }
}
.health-stat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.15s ease;
}
.health-stat-card:hover { border-color: var(--border2); }
.health-stat-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.health-stat-icon { font-size: 12px; opacity: 0.8; }
.health-stat-label {
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
}
.health-stat-val {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.health-stat-pts {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
}
.health-stat-bar {
  height: 4px;
  background: var(--surface);
  border-radius: 99px;
  overflow: hidden;
}
.health-stat-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.8s cubic-bezier(.4,0,.2,1);
}
.health-gauge-components { display: flex; flex-direction: column; gap: 12px; }
.health-comp-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text2); margin-bottom: 6px;
}
.health-comp-bar {
  height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden;
}
.health-comp-bar > div {
  height: 100%; border-radius: 3px;
  transition: width .6s cubic-bezier(0.4,0,0.2,1);
}

/* ── Ranking del mes (productor) ─────────────────────── */
.ranking-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}
.ranking-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #FFD700, #C0C0C0, #CD7F32);
}
.ranking-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; gap: 16px;
}
.ranking-title { font-size: 14px; font-weight: 700; color: var(--text); }
.ranking-sub { font-size: 11px; color: var(--text3); text-transform: capitalize; margin-top: 2px; }
.ranking-mypos { text-align: right; }
.ranking-top3 { display: flex; flex-direction: column; gap: 6px; }
.ranking-row {
  display: grid;
  grid-template-columns: 30px 36px 1fr auto;
  gap: 10px; align-items: center;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--surface2);
  transition: background .15s;
}
.ranking-row--me {
  background: var(--accent-glow);
  border: 1px solid rgba(84,165,151,0.35);
}
.ranking-row-pos { text-align: center; font-size: 18px; }
.ranking-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.ranking-row-name { font-size: 13px; font-weight: 600; color: var(--text); }
.ranking-row-meta { font-size: 11px; color: var(--text3); margin-top: 1px; }
.ranking-row-val { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--mono); }
.ranking-footer {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--surface2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text2);
  text-align: center;
}

/* ── Onboarding Tour ───────────────────────────────── */
.tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9998;
  animation: tourFadeIn .25s ease;
}
@keyframes tourFadeIn { from { opacity: 0 } to { opacity: 1 } }
.tour-spotlight {
  position: fixed;
  z-index: 9999;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.65), 0 0 0 3px var(--accent), 0 0 40px rgba(84,165,151,0.5);
  pointer-events: none;
  transition: all .3s cubic-bezier(0.4,0,0.2,1);
  animation: tourSpotlightPulse 2s ease-in-out infinite;
}
@keyframes tourSpotlightPulse {
  0%,100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.65), 0 0 0 3px var(--accent), 0 0 40px rgba(84,165,151,0.5); }
  50%     { box-shadow: 0 0 0 9999px rgba(0,0,0,0.65), 0 0 0 5px var(--accent), 0 0 60px rgba(84,165,151,0.85); }
}
@media (prefers-reduced-motion: reduce) { .tour-spotlight { animation: none; } }

/* X4 — Flecha del popover apuntando al spotlight */
.tour-popover::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--surface);
  border: 1px solid var(--border2);
  transform: rotate(45deg);
  z-index: -1;
}
.tour-popover[data-arrow="bottom"]::before { bottom: -8px; left: 50%; margin-left: -7px; border-right: 0; border-bottom: 0; }
.tour-popover[data-arrow="top"]::before    { top: -8px;    left: 50%; margin-left: -7px; border-left: 0;  border-top: 0; }
.tour-popover[data-arrow="left"]::before   { left: -8px;   top:  50%; margin-top: -7px;  border-right: 0; border-top: 0; }
.tour-popover[data-arrow="right"]::before  { right: -8px;  top:  50%; margin-top: -7px;  border-left: 0;  border-bottom: 0; }
.tour-popover {
  position: fixed;
  z-index: 10000;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 20px 22px;
  width: 340px;
  max-width: calc(100vw - 40px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: tourPopIn .3s cubic-bezier(0.4,0,0.2,1);
}
@keyframes tourPopIn { from { opacity:0; transform: translateY(10px) scale(.96) } to { opacity:1; transform: translateY(0) scale(1) } }
.tour-popover-step { font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.tour-popover-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.3; }
.tour-popover-body { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 16px; }
.tour-popover-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-progress { display: flex; gap: 5px; }
.tour-progress-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border2); transition: background .2s; }
.tour-progress-dot.active { background: var(--accent); }
.tour-btns { display: flex; gap: 8px; }
.tour-btn {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
  transition: all .15s;
}
.tour-btn:hover { border-color: var(--text3); color: var(--text); }
.tour-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.tour-btn-primary:hover { background: var(--accent-hover,var(--accent)); color: #fff; opacity: .92; }
.tour-skip { position: absolute; top: 10px; right: 12px; background: transparent; border: none; font-size: 18px; color: var(--text3); cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1; }
.tour-skip:hover { color: var(--text); background: var(--surface2); }
.metric-label {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.metric-value {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font);
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  /* Evitar overflow — el JS ajusta el tamaño si el texto es largo */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.metric-sub { font-size: 11px; color: var(--text3); margin-top: 6px; }


.table-wrap { overflow-x: auto; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); }
/* Presupuestos: la altura de la tabla la ajusta _ajustarAlturaPresupuestos() por
   JS (mide el DOM real) — la tabla scrollea por dentro y la paginación queda
   pegada, sin el hueco que dejaba el área de contenido en monitores grandes. */
table { width: 100%; border-collapse: collapse; }
thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  color: var(--text3);
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  white-space: nowrap;
}
tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text2);
}
/* Encabezados ordenables (tabla de presupuestos): clicables, con flecha ↓/↑ */
.th-sortable { cursor: pointer; user-select: none; transition: color .15s; }
.th-sortable:hover { color: var(--text); }
.th-arrow { color: var(--accent); font-weight: 800; }

tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: all 0.12s; cursor: default; }
tbody tr:hover { background: var(--accent-glow); }
tbody tr:hover td { color: var(--text); }
tbody tr:hover { box-shadow: inset 2px 0 0 var(--accent); }
html[data-theme="light"] tbody tr:hover { background: var(--accent-glow); box-shadow: inset 2px 0 0 var(--accent); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 10px; font-weight: 700; white-space: nowrap; letter-spacing: .05em; text-transform: uppercase; border: 1px solid transparent; }
.badge-green { background: var(--green-bg); color: var(--green); border-color: rgba(16,185,129,0.25); }
.badge-amber { background: var(--amber-bg); color: var(--amber); border-color: rgba(245,158,11,0.25); }
.badge-red { background: var(--red-bg); color: var(--red); border-color: rgba(239,68,68,0.25); }
.badge-blue { background: var(--accent-glow); color: var(--accent); border-color: var(--accent-glow-strong); }
.badge-purple { background: var(--purple-bg); color: var(--purple); border-color: rgba(167,139,250,0.25); }
.badge-teal { background: var(--teal-bg); color: var(--teal); border-color: rgba(34,211,238,0.25); }
.badge-gray { background: var(--surface3); color: var(--text2); border-color: var(--border); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-group label { font-size: 12px; color: var(--text2); font-weight: 500; letter-spacing: -0.01em; }
.form-group input, .form-group select, .form-group textarea {
  /* width/min-width:0 → un <select> con opciones largas (cliente/productor) no
     fuerza el ancho de su columna del grid; evita el scroll horizontal del modal. */
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  transition: all 0.15s;
  outline: none;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text3); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-group select option { background: var(--surface2); }
.form-group input[readonly] { opacity: 0.5; }

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 600;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadein 0.2s ease;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 28px;
  width: 560px;
  max-width: 95vw;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-lg { width: 720px; }
.modal-title { font-size: 17px; font-weight: 600; margin-bottom: 20px; letter-spacing: -0.01em; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }

.alert { padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.alert-success { background: var(--green-bg); color: var(--green); border: 1px solid rgba(16,185,129,0.3); }
.alert-info { background: var(--accent-glow); color: var(--accent); border: 1px solid var(--accent-glow-strong); }
.alert-warning { background: var(--amber-bg); color: var(--amber); border: 1px solid rgba(245,158,11,0.3); }

/* ═══ Menú de acciones contextual ⋯ ═══ */
.action-menu-wrap { position: relative; display: inline-block; }
.action-menu-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
  transition: all 0.15s;
  letter-spacing: -1px;
}
.action-menu-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--border2); }
.action-menu {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 4px;
  min-width: 180px;
  opacity: 0;
  transform: scale(0.96) translateY(-4px);
  pointer-events: none;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.action-menu.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.action-menu.fixed-pos { position: fixed; right: auto; top: auto; }
.action-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.1s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  font-weight: 500;
}
.action-menu-item:hover { background: var(--surface2); }
.action-menu-item.danger { color: var(--red); }
.action-menu-item.danger:hover { background: var(--red-bg); }
.action-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
.tipo-item-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  color: var(--text);
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
}
.tipo-item-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
  transition: left 0.5s;
  pointer-events: none;
}
.tipo-item-card:hover::before { left: 100%; }
.tipo-item-card:hover {
  border-color: var(--accent);
  background: var(--surface);
  transform: translateX(3px);
  box-shadow: 0 4px 14px rgba(84,165,151,0.12);
}
.tipo-item-card:active {
  transform: translateX(3px) scale(0.98);
}
.tipo-item-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tipo-item-card:hover .tipo-item-icon {
  transform: scale(1.08) rotate(-4deg);
}
.tipo-item-body {
  flex: 1;
  min-width: 0;
}
.tipo-item-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 3px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.tipo-item-desc {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.4;
}
.tipo-item-arrow {
  color: var(--text3);
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  transform: translateX(-4px);
  opacity: 0;
}
.tipo-item-card:hover .tipo-item-arrow {
  color: var(--accent);
  transform: translateX(0);
  opacity: 1;
}
.alert-danger { background: var(--red-bg); color: var(--red); border: 1px solid rgba(239,68,68,0.2); }

.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.empty-state { text-align: center; padding: 56px 24px; color: var(--text3); }
.empty-state .empty-icon { font-size: 42px; margin-bottom: 14px; opacity: 0.6; }
.empty-state p { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* SHEETS BAR */
.sheets-bar {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto;
  padding: 4px 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  color: var(--text3);
  margin-bottom: 14px;
  letter-spacing: .04em; text-transform: uppercase;
}
.sheets-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: accentPulse 2.5s ease-in-out infinite;
}
@keyframes accentPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* BUDGET BUILDER */
.budget-item-row { display: grid; grid-template-columns: 2.5fr 1.2fr 0.7fr 1fr 36px; gap: 8px; align-items: center; margin-bottom: 8px; }
.budget-item-row input, .budget-item-row select { padding: 8px 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: var(--font); font-size: 12px; width: 100%; outline: none; transition: border .15s; }
.budget-item-row input:focus, .budget-item-row select:focus { border-color: var(--accent); }
.remove-btn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--red); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.15s; }
.remove-btn:hover { background: var(--red-bg); }

/* ═══════════ BUILDER PRESUPUESTO — Rediseño premium ═══════════ */

/* ── Contenedor outer ── */
.builder-outer {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Toolbar de ítems ── */
.items-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  flex-wrap: wrap;
}
.items-toolbar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.items-toolbar-meta {
  font-size: 11px;
  color: var(--text3);
  padding: 3px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-weight: 500;
}

/* ── Tabla ── */
.budget-compare {
  width: 100%;
  border-collapse: collapse;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
.budget-compare th {
  padding: 10px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 3;
}
.budget-compare td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.budget-compare tbody tr:last-child td { border-bottom: none; }

/* Sección compra: fondo muy sutil */
.th-buy {
  background: linear-gradient(180deg, rgba(34,211,238,0.10) 0%, rgba(34,211,238,0.06) 100%);
  color: var(--teal) !important;
  border-bottom-color: rgba(34,211,238,0.3) !important;
}
.th-sell {
  background: linear-gradient(180deg, rgba(16,185,129,0.10) 0%, rgba(16,185,129,0.06) 100%);
  color: var(--green) !important;
  border-bottom-color: rgba(16,185,129,0.3) !important;
}
.th-mg {
  background: linear-gradient(180deg, rgba(245,158,11,0.10) 0%, rgba(245,158,11,0.06) 100%);
  color: var(--amber) !important;
  border-bottom-color: rgba(245,158,11,0.3) !important;
}
.th-desc {
  background: var(--surface2);
  color: var(--text3) !important;
  border-bottom-color: var(--border2) !important;
}
.td-buy { background: rgba(34,211,238,0.05); }
.td-sell { background: rgba(16,185,129,0.05); }
.td-mg { background: rgba(245,158,11,0.025); border-left: 1px solid var(--border); }

/* Separador vertical compra / venta — barra teal sólida bien visible */
.col-divider {
  padding: 0 !important;
  width: 4px !important;
  min-width: 4px !important;
  background: rgba(84,165,151,0.45) !important;
  border: none !important;
}
.budget-compare th.col-divider {
  background: rgba(84,165,151,0.25) !important;
  border-bottom-color: transparent !important;
}

/* Ocultar columnas Ganancia/Margen cuando hide-mg está activo */
.budget-compare.hide-mg .th-mg,
.budget-compare.hide-mg .td-mg { display: none !important; }

/* ── Grilla tipo Monday: verticales + horizontales bien visibles ─────
   Variable dedicada `--grid-line` por tema. Tono "estético": visible para
   ordenar la lectura, pero sin gritar.
     • Dark:  rgba(255,255,255,0.22)  → gris medio sobre fondo oscuro
     • Light: rgba(0,0,0,0.28)        → gris oscuro sobre fondo claro
   Si quieres ajustar, son estos dos valores. */
.budget-compare {
  --grid-line: rgba(255,255,255,0.22);
}
html[data-theme="light"] .budget-compare {
  --grid-line: rgba(0,0,0,0.28);
}
/* Uso selector con misma especificidad que el override de tbody (`tr td`)
   más `!important` para asegurar que la grilla mande por sobre cualquier
   regla previa que setee `border-*` con `!important`. */
.budget-compare thead tr th,
.budget-compare tbody tr td {
  border-right: 1px solid var(--grid-line) !important;
  border-bottom: 1px solid var(--grid-line) !important;
}
.budget-compare thead tr th:last-child,
.budget-compare tbody tr td:last-child {
  border-right: none !important;
}
/* La barra teal gruesa de col-divider ya es la separación de zona;
   no le sumamos un borde fino al lado para que se lea limpia. */
.budget-compare .col-divider {
  border-right: none !important;
}
/* La última fila no necesita borde inferior (el contenedor cierra). */
.budget-compare tbody tr:last-child td {
  border-bottom: none !important;
}

/* Super-header zonas COMPRA / VENTA */
.budget-zone-header th {
  font-size: 11px !important;
  letter-spacing: .15em !important;
  font-weight: 800 !important;
  padding: 7px 12px !important;
}

/* Celda proveedor y servicio: texto completo multilínea */
.budget-compare td.td-prov {
  min-width: 150px; max-width: 190px;
  vertical-align: top; padding-top: 10px;
}
.budget-compare td.td-serv {
  min-width: 110px; max-width: 150px;
  vertical-align: top; padding-top: 10px;
  font-size: 12px; color: var(--text2);
  word-break: break-word; white-space: normal; line-height: 1.4;
}

/* ── Filas hover más pronunciado ── */
.budget-compare tbody tr { transition: background 0.12s; }
.budget-compare tbody tr:hover td { background: var(--accent-glow-strong) !important; }
.budget-compare tbody tr:hover .td-buy  { background: rgba(34,211,238,0.10) !important; }
.budget-compare tbody tr:hover .td-sell { background: rgba(16,185,129,0.10) !important; }
.budget-compare tbody tr:hover .td-mg   { background: rgba(245,158,11,0.08) !important; }

/* ── Inputs inline de la tabla ── */
.bi-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: all 0.15s;
}
.bi-input:hover { border-color: var(--border2); background: var(--surface2); }
.bi-input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-glow); }
.bi-input-mono {
  font-family: var(--mono);
  text-align: right;
  color: inherit;
}
.bi-input-cant {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  min-width: 72px;
  padding: 8px 6px;
}
.bi-textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  outline: none;
  resize: none;
  min-height: 38px;
  max-height: 80px;
  line-height: 1.5;
  transition: all 0.15s;
  overflow-y: auto;
}
.bi-textarea:hover { border-color: var(--border2); background: var(--surface2); }
.bi-textarea:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-glow); resize: vertical; max-height: 160px; }
.bi-textarea[readonly] { opacity: 0.6; cursor: default; color: var(--text2); }
.bi-textarea[readonly]:hover { border-color: transparent; background: transparent; }
.bi-textarea[readonly]:focus { border-color: transparent; box-shadow: none; background: transparent; }

/* Ocultar spinners numéricos */
.bi-input::-webkit-inner-spin-button,
.bi-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bi-input[type="number"] { -moz-appearance: textfield; }

/* ── Drag handle ── */
/* ── Sección row (separador de sección) ── */
.section-row td {
  background: var(--surface2) !important;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
  padding: 5px 12px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ═══════════ MODO FOCUS ═══════════ */
.focus-mode-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  flex-direction: column;
  overflow: hidden;
}
.focus-mode-overlay.active {
  display: flex;
}
.focus-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.focus-topbar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.focus-topbar-meta {
  font-size: 11px;
  color: var(--text3);
  padding: 3px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 99px;
}
.focus-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  padding: 16px 20px;
}
/* La sección de ítems completa dentro del focus se adapta */
#focus-table-wrap #builder-items-section {
  width: 100%;
  min-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#focus-table-wrap #builder-items-card {
  border-radius: 12px;
  width: 100%;
  box-shadow: var(--shadow);
}
#focus-table-wrap .budget-compare { border-radius: 0 0 12px 12px; }
/* En focus mode, la tabla crece sin límite de alto (scroll vertical de toda la
   página focus) PERO conserva el scroll horizontal — con letras grandes la tabla
   es más ancha que la pantalla y hay que poder deslizarla a los costados.
   (Antes era overflow:visible, que quitaba el scroll lateral y dejaba columnas cortadas.) */
#focus-table-wrap #builder-table-wrap { max-height: none !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; }
/* En focus, ocultar el toolbar normal del builder ("Ítems del presupuesto" con sus
   botones) — el .focus-topbar ya cumple ese rol con los botones que importan. */
#focus-table-wrap .items-toolbar { display: none !important; }
/* En focus, ocultar los 3 cards de Resumen Compras/Ventas/Resultado del Evento —
   el .focus-footer ya muestra los totales en pills compactos. */
#focus-table-wrap #builder-totals-wrap { display: none !important; }
@media (max-width: 1100px) {
  #focus-table-wrap .total-grid { grid-template-columns: 1fr; }
}
.focus-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.focus-footer-totals {
  display: flex;
  gap: 20px;
  flex: 1;
  flex-wrap: wrap;
}
.focus-total-pill {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.focus-total-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text3);
}
.focus-total-value {
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: -0.02em;
}
.focus-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
}
.focus-exit-btn:hover { background: var(--surface3); color: var(--text); }

/* TOTALES */
.total-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 24px; }
.total-block {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  transition: border-color 0.15s;
}
.total-block:hover { border-color: var(--border2); }
.total-block-head { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); color: var(--text3); }
.total-line { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12px; color: var(--text2); }
.total-line span:last-child { font-family: var(--mono); color: var(--text); font-weight: 500; }
.total-divider { border: none; border-top: 1px solid var(--border2); margin: 10px 0; }
.total-big {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  padding-top: 6px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.total-big span:last-child { font-family: var(--font); color: var(--accent); }

/* MARGIN BAR */
.mbar-wrap { display: flex; align-items: center; gap: 6px; }
.mbar { flex: 1; height: 5px; background: var(--surface3); border-radius: 99px; overflow: hidden; min-width: 40px; }
.mfill { height: 100%; border-radius: 99px; }
.mfill-green { background: var(--green); }
.mfill-amber { background: var(--amber); }
.mfill-red { background: var(--red); }
.mpct { font-size: 11px; font-family: var(--mono); min-width: 38px; text-align: right; }

/* BI ALERTS */
.bi-alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; font-size: 12px; margin-bottom: 8px; }
.bi-alert-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.bi-alert.crit { background: var(--red-bg); border: 1px solid rgba(239,68,68,0.25); }
.bi-alert.crit .bi-alert-dot { background: var(--red); }
.bi-alert.warn { background: var(--amber-bg); border: 1px solid rgba(245,158,11,0.25); }
.bi-alert.warn .bi-alert-dot { background: var(--amber); }
.bi-alert.ok { background: var(--green-bg); border: 1px solid rgba(16,185,129,0.25); }
.bi-alert.ok .bi-alert-dot { background: var(--green); }
.bi-alert.prox { background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.3); }
.bi-alert.prox .bi-alert-dot { background: #8B5CF6; }
.bi-alert.prox-urgente { background: rgba(236,72,153,0.1); border: 1px solid rgba(236,72,153,0.35); animation: proxPulse 2s ease-in-out infinite; }
.bi-alert.prox-urgente .bi-alert-dot { background: #EC4899; }
@keyframes proxPulse { 0%,100%{border-color:rgba(236,72,153,0.35)} 50%{border-color:rgba(236,72,153,0.8)} }
.bi-alert.retroactivo { background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.3); }
.bi-alert.retroactivo .bi-alert-dot { background: #F97316; }
.bi-alert-body { flex: 1; }
.bi-alert-tag { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; }
.crit .bi-alert-tag { background: rgba(239,68,68,0.2); color: var(--red); }
.warn .bi-alert-tag { background: rgba(245,158,11,0.2); color: var(--amber); }

/* En tema claro: texto de alertas en color principal (casi negro) para legibilidad;
   las negritas siguen recibiendo su color semántico vía b.crit/b.warn inline si aplica */
html[data-theme="light"] .bi-alert-body { color: var(--text); }
html[data-theme="light"] .bi-alert-body b { color: inherit; }

/* TOAST */
/* ── Toasts (avisos) — apilados, ícono SVG animado, barra de progreso con pausa ── */
.toaster {
  position: fixed; bottom: 24px; right: 24px; z-index: 100000;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none; max-width: calc(100vw - 32px);
}
.toast {
  pointer-events: auto; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4); padding: 12px 14px 12px 12px;
  display: flex; align-items: center; gap: 11px; max-width: 360px; min-width: 220px;
  position: relative; overflow: hidden; max-height: 160px; letter-spacing: -0.01em;
  animation: tstIn .5s cubic-bezier(.22,1,.36,1) both;
}
.toast.leaving {
  animation: none; opacity: 0; transform: translateX(26px) scale(.97);
  max-height: 0; margin-top: -10px; padding-top: 0; padding-bottom: 0;
  transition: all .32s cubic-bezier(.4,0,.2,1);
}
@keyframes tstIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.94); }
  62%  { opacity: 1; transform: translateY(-3px) scale(1.014); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.tst-chip {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  color: var(--c); background: var(--c-soft);
  transition: color .35s ease, background .35s ease;
}
.tst-msg { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--text); }
.tst-msg b { font-weight: 650; }
.tst-action {
  margin-left: 8px; padding: 3px 10px; border-radius: 6px;
  border: 1px solid var(--border2); background: var(--surface2);
  color: var(--accent); font-family: var(--font); font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.tst-action:hover { background: var(--surface3); }
.tst-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--c); transform-origin: left; transform: scaleX(1);
  animation: tstDeplete var(--life,3.2s) linear forwards;
}
.toast:hover .tst-bar { animation-play-state: paused; }
@keyframes tstDeplete { to { transform: scaleX(0); } }

.t-success { --c: var(--green);  --c-soft: rgba(31,170,122,.16); --life: 3.2s; }
.t-error   { --c: var(--red);    --c-soft: rgba(224,72,72,.16);  --life: 7s; }
.t-info    { --c: var(--accent); --c-soft: rgba(84,165,151,.16); --life: 3.6s; }
.t-loading { --c: var(--text2);  --c-soft: rgba(153,153,162,.16); }
.t-notif   { --c: var(--accent); --c-soft: rgba(84,165,151,.16); --life: 4.6s; }
html[data-theme="light"] .t-success { --c-soft: rgba(5,150,105,.13); }
html[data-theme="light"] .t-error   { --c-soft: rgba(220,38,38,.12); }
html[data-theme="light"] .t-info     { --c-soft: rgba(74,149,137,.13); }
html[data-theme="light"] .t-notif    { --c-soft: rgba(74,149,137,.13); }
html[data-theme="light"] .t-loading  { --c-soft: rgba(63,63,70,.10); }
html[data-theme="light"] .toast { box-shadow: 0 16px 40px -14px rgba(9,9,11,0.18), 0 2px 6px rgba(9,9,11,0.08); }

.tst-ic { width: 19px; height: 19px; display: block; }
.tst-ic path, .tst-ic circle { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.tst-draw { stroke-dasharray: var(--len,40); stroke-dashoffset: var(--len,40); animation: tstDraw .5s .04s cubic-bezier(.2,.85,.25,1) forwards; }
@keyframes tstDraw { to { stroke-dashoffset: 0; } }
.tst-ic.spin { animation: tstSpin .75s linear infinite; }
@keyframes tstSpin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .toaster { left: 16px; right: 16px; align-items: stretch; }
  .toast { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .tst-draw { animation: none; stroke-dashoffset: 0; }
}

/* PIPELINE */
.pipeline-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all .15s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
}
.pipeline-card:hover { border-color: var(--border2); transform: translateY(-1px); box-shadow: var(--shadow); }

/* STATUS PILL SELECT */
.status-select { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); font-family: var(--font); font-size: 12px; font-weight: 500; outline: none; cursor: pointer; transition: all 0.15s; }
.status-select:hover { border-color: var(--accent); background: var(--surface); }
.status-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ═══════════ PROCESOS Y RENDICIONES ═══════════ */
/* ── Cards de Clientes / Proveedores ─────────────────── */
.cli-card, .prov-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .15s;
}
.cli-card:hover, .prov-card:hover { border-color: var(--border2); }
.cli-card-header, .prov-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.cli-card-body, .prov-card-body {
  padding: 0 16px 14px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.cli-avatar {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent-glow);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.prov-avatar {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--purple-bg);
  color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}

/* ── Procesos y Rendiciones ──────────────────────────── */
.proc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.proc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.proc-card:hover { border-color: var(--border2); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.18); }
.proc-card-stripe { height: 4px; width: 100%; flex-shrink: 0; border-radius: 14px 14px 0 0; }
.proc-card-body { padding: 22px 22px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.proc-card-icon-wrap {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 4px;
  flex-shrink: 0;
}
.proc-card-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.proc-card-desc { font-size: 12px; color: var(--text3); line-height: 1.55; flex: 1; }
.proc-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 22px 14px;
  font-size: 11px; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: .06em;
}
.proc-card-footer svg { transition: transform .15s; }
.proc-card:hover .proc-card-footer svg { transform: translateX(4px); }
.proc-card--active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Viewer modal-style */
.proc-viewer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-top: 20px;
  overflow: hidden;
  animation: procSlideIn .2s ease;
}
@keyframes procSlideIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.proc-viewer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.proc-viewer-title { font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; }
.proc-viewer-body { padding: 24px; font-size: 13px; color: var(--text2); line-height: 1.9; white-space: pre-wrap; }

/* Admin panel */
.proc-admin-section { margin-top: 28px; }
.proc-admin-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  font-size: 13px; font-weight: 600; color: var(--text2);
}
.proc-admin-list { border: 1px solid var(--border); border-radius: 0 0 12px 12px; overflow: hidden; }
.proc-admin-item { background: var(--surface); border-bottom: 1px solid var(--border); }
.proc-admin-item:last-child { border-bottom: none; }
.proc-admin-item-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.proc-admin-item-title { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.proc-edit-area { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 16px; }
.proc-edit-area label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }
.proc-edit-area input { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); font-family: var(--font); font-size: 13px; outline: none; }
.proc-edit-area input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.proc-edit-area textarea { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); font-family: var(--font); font-size: 13px; outline: none; min-height: 160px; resize: vertical; line-height: 1.7; }
.proc-edit-area textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ═══════════ CALENDARIO ═══════════ */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .cal-layout { grid-template-columns: 1fr; } }

/* Barra de sincronización del calendario: pill chico y discreto (no banner) */
/* (#page-calendario .sheets-bar: redundante tras unificar .sheets-bar — borrado) */

.cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-nav-title { font-size: 17px; font-weight: 600; color: var(--text); text-transform: capitalize; min-width: 180px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dayname { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; padding: 6px 0; }
.cal-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: all .15s;
  min-width: 0;
  overflow: hidden;
}
.cal-day:hover { border-color: var(--border2); }
.cal-day.other-month { opacity: 0.3; }
.cal-day.weekend { background: var(--surface2); }
.cal-day.today {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 0 0 2px var(--accent-glow);
  background: linear-gradient(180deg, var(--accent-glow) 0%, transparent 55%), var(--surface);
}
.cal-day-num { font-size: 11px; font-weight: 600; color: var(--text2); font-family: var(--mono); margin-bottom: 2px; }
.cal-day.today .cal-day-num { color: var(--accent); font-weight: 700; }
.cal-event {
  font-size: 10px;
  padding: 4px 7px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  border-left-width: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all .12s;
  line-height: 1.3;
  font-weight: 500;
}
.cal-more { font-size: 10px; color: var(--text3); font-weight: 600; padding: 2px 7px; cursor: default; }
.cal-event:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cal-event.Aprobado    { background: var(--green-bg);  color: var(--green);  border-color: rgba(16,185,129,0.3); }
.cal-event.Actualizado { background: var(--amber-bg);  color: var(--amber);  border-color: rgba(245,158,11,0.3); }
.cal-event.Borrador    { background: var(--surface3);  color: var(--text2);  border-color: var(--border2); }
.cal-event.Cerrado     { background: var(--teal-bg);   color: var(--teal);   border-color: rgba(34,211,238,0.3); }
.cal-event.Rechazado   { background: var(--red-bg);    color: var(--red);    border-color: rgba(239,68,68,0.3); }
.cal-event.cumple      { background: rgba(236,72,153,0.14); color: #ec4899; border-color: rgba(236,72,153,0.35); cursor: default; font-weight: 600; }
/* Eventos de varios días: el chip se repite en cada día del rango. Las esquinas
   planas del lado por donde continúa (y el borde izquierdo grueso solo en el
   primer día) hacen que se lea como UNA barra y no como N eventos sueltos. */
.cal-event.multi-inicio { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -1px; }
.cal-event.multi-medio  { border-radius: 0; border-left-width: 1px; margin: 0 -1px; }
.cal-event.multi-fin    { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 1px; margin-left: -1px; }

.cal-upcoming {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}
.cal-upcoming-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text3); margin-bottom: 14px; }
.cal-upcoming-item {
  display: flex;
  gap: 12px;
  padding: 12px 10px;
  cursor: pointer;
  transition: background .12s;
  border-radius: 8px;
  margin: 0 -6px;
}
.cal-upcoming-item:hover { background: var(--surface2); }
.cal-upcoming-item:not(:last-child) { border-bottom: 1px solid var(--border); border-radius: 0; }
.cal-up-date {
  min-width: 48px;
  text-align: center;
  flex-shrink: 0;
  padding: 4px 0;
  background: var(--accent-glow);
  border-radius: 8px;
}
.cal-up-date-day { font-size: 20px; font-weight: 700; font-family: var(--font); color: var(--accent); line-height: 1; letter-spacing: -0.03em; }
.cal-up-date-month { font-size: 9px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 3px; font-weight: 600; }
.cal-up-body { flex: 1; min-width: 0; }
.cal-up-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.cal-up-meta { font-size: 11px; color: var(--text3); display: flex; gap: 8px; flex-wrap: wrap; }
.cal-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.cal-legend-item { font-size: 10px; color: var(--text3); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.cal-legend-dot { width: 8px; height: 8px; border-radius: 3px; }

/* ═══════════ AUTOCOMPLETE PROVEEDOR ═══════════ */

/* ═══════════ CHAT DE FEEDBACK ═══════════ */
.chat-messages { max-height: 360px; overflow-y: auto; padding: 12px; background: var(--surface2); border-radius: 10px; border: 1px solid var(--border); margin-bottom: 12px; }
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.chat-empty { text-align: center; padding: 24px; color: var(--text3); font-size: 12px; }
.chat-msg { display: flex; gap: 10px; margin-bottom: 12px; }
.chat-msg.own { flex-direction: row-reverse; }
.chat-msg-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.chat-msg-body { flex: 1; min-width: 0; max-width: 75%; }
.chat-msg.own .chat-msg-body { display: flex; flex-direction: column; align-items: flex-end; }
.chat-msg-meta { font-size: 10px; color: var(--text3); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.chat-msg.own .chat-msg-meta { flex-direction: row-reverse; }
.chat-msg-rol { padding: 1px 6px; border-radius: 4px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.chat-msg-rol.admin { background: var(--purple-bg); color: var(--purple); }
.chat-msg-rol.productor { background: var(--teal-bg); color: var(--teal); }
.chat-msg-bubble { padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; color: var(--text); background: var(--surface); border: 1px solid var(--border); word-wrap: break-word; position: relative; }
.chat-msg.own .chat-msg-bubble { background: var(--accent-glow); border-color: var(--accent-glow-strong); color: var(--text); }
.chat-msg-delete { position: absolute; top: 4px; right: 4px; background: transparent; border: none; color: var(--text3); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 4px; opacity: 0; transition: opacity .15s; }
.chat-msg:hover .chat-msg-delete { opacity: 1; }
.chat-msg-delete:hover { color: var(--red); background: var(--red-bg); }
.chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
#chat-mention-menu {
  position: fixed !important;
  z-index: 9000;
}
#chat-mention-menu .active { background: var(--accent-glow); }
.chat-mention-chip { color: var(--accent); background: var(--accent-glow); padding: 0 5px; border-radius: 4px; font-weight: 600; }

/* ── Loading: skeletons y spinners ── */
@keyframes skeleton-pulse { 0% { opacity: 0.55; } 50% { opacity: 0.9; } 100% { opacity: 0.55; } }
@keyframes skeleton-shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
.skel { background: linear-gradient(90deg, var(--surface2) 0%, var(--surface3) 50%, var(--surface2) 100%); background-size: 200px 100%; background-repeat: no-repeat; border-radius: 6px; display: inline-block; animation: skeleton-shimmer 1.4s ease-in-out infinite; }
.skel-row { height: 14px; width: 100%; margin-bottom: 8px; }
.skel-card { height: 80px; width: 100%; margin-bottom: 12px; border-radius: 10px; }
.btn[data-loading="1"] { pointer-events: none; opacity: 0.7; position: relative; }
.btn[data-loading="1"]::after { content: ''; position: absolute; right: 10px; top: calc(50% - 6px); width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
/* (el centrado va por top:calc — con transform en la animación, el tercer
   @keyframes spin del archivo pisaba al de translateY y el spinner saltaba) */
.chat-input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); font-family: var(--font); font-size: 13px; outline: none; resize: vertical; min-height: 40px; max-height: 120px; transition: all 0.15s; }
.chat-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); background: var(--surface); }

/* ═══════════ CHAT GENERAL — Dashboard ═══════════ */
.gchat-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.gchat-messages {
  flex: 1; max-height: 260px; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.gchat-messages::-webkit-scrollbar { width: 4px; }
.gchat-messages::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.gchat-msg { display: flex; gap: 8px; align-items: flex-start; }
.gchat-msg.own { flex-direction: row-reverse; }
.gchat-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0; margin-top: 2px;
}
.gchat-body { max-width: 78%; display: flex; flex-direction: column; gap: 3px; }
.gchat-msg.own .gchat-body { align-items: flex-end; }
.gchat-meta { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text3); }
.gchat-msg.own .gchat-meta { flex-direction: row-reverse; }
.gchat-name { font-weight: 600; color: var(--text2); font-size: 11px; }
.gchat-badge { padding: 1px 5px; border-radius: 3px; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.gchat-badge.admin { background: var(--purple-bg); color: var(--purple); }
.gchat-badge.productor { background: var(--teal-bg); color: var(--teal); }
.gchat-bubble {
  padding: 8px 12px; border-radius: 12px;
  font-size: 12px; line-height: 1.5;
  color: var(--text); word-wrap: break-word;
  background: var(--surface2); border: 1px solid var(--border);
  position: relative;
  white-space: pre-wrap;
}
.gchat-msg.own .gchat-bubble { background: var(--accent-glow); border-color: var(--accent-glow-strong); }
.gchat-del { position: absolute; top: 3px; right: 4px; background: transparent; border: none; color: transparent; cursor: pointer; font-size: 11px; padding: 1px 3px; border-radius: 3px; transition: all .15s; }
.gchat-bubble:hover .gchat-del { color: var(--text3); }
.gchat-del:hover { color: var(--red) !important; background: var(--red-bg); }
.gchat-time { font-size: 9px; color: var(--text3); }
.gchat-empty { text-align: center; padding: 30px 16px; color: var(--text3); font-size: 12px; }
.gchat-input-row {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0 0 var(--radius) var(--radius);
  flex-shrink: 0;
}
.gchat-input {
  flex: 1; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border2); background: var(--surface2);
  color: var(--text); font-family: var(--font); font-size: 12px;
  outline: none; resize: none; min-height: 36px; max-height: 90px;
  transition: border-color 0.15s, box-shadow 0.15s;
  line-height: 1.4;
}
.gchat-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.gchat-send {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent); border: none; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.15s; font-size: 14px;
}
.gchat-send:hover { opacity: 0.85; transform: scale(1.05); }
.gchat-send:disabled { opacity: 0.4; cursor: default; transform: none; }
.gchat-typing-dots { display:inline-flex; gap:3px; align-items:center; vertical-align:middle; margin-right:4px; }
.gchat-typing-dots span { width:5px; height:5px; border-radius:50%; background:var(--text3); display:inline-block; animation:gchatBounce 1.2s ease-in-out infinite; }
.gchat-typing-dots span:nth-child(2){ animation-delay:.2s; }
.gchat-typing-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes gchatBounce{ 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* ── Tooltip custom ─────────────────────────────── */
#btip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 7px; padding: 5px 10px;
  font-size: 12px; font-family: var(--font); font-weight: 500;
  line-height: 1.4; max-width: 240px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  opacity: 0; transition: opacity .15s;
  white-space: pre-wrap;
}
.gchat-pin {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px; margin: 0 12px 10px;
  background: var(--amber-bg); border: 1px solid rgba(245,158,11,0.25);
  border-radius: 8px; font-size: 11px; color: var(--text2); line-height: 1.4;
}

/* ═══════════ COMERCIAL — Board estilo Monday ═══════════ */
.com-group {
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.com-group:hover { border-color: var(--border2); }
.com-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  cursor: grab;
  user-select: none;
  transition: background 0.12s;
}
.com-group-header:active { cursor: grabbing; }
.com-group-header:hover { background: var(--surface3); }
.com-group-caret { transition: transform 0.2s; font-size: 10px; color: var(--text3); display: inline-block; }
.com-group.collapsed .com-group-caret { transform: rotate(-90deg); }
.com-group-color-strip { width: 8px; align-self: stretch; border-radius: 99px; min-height: 24px; cursor: pointer; transition: filter 0.12s, box-shadow 0.12s; }
.com-group-color-strip:hover { filter: brightness(1.2); box-shadow: 0 0 0 2px var(--accent-glow-strong); }
.com-group-name { font-weight: 600; font-size: 14px; flex: 1; letter-spacing: -0.01em; }
.com-group-name-input {
  background: transparent;
  border: 1px dashed transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--font);
  outline: none;
  width: 100%;
  letter-spacing: -0.01em;
  transition: all 0.15s;
}
.com-group-name-input:hover { border-color: var(--border2); }
.com-group-name-input:focus { border-color: var(--accent); background: var(--surface); border-style: solid; box-shadow: 0 0 0 3px var(--accent-glow); }
.com-group-count { font-size: 11px; color: var(--text3); padding: 3px 10px; background: var(--surface3); border-radius: 99px; font-weight: 500; }
.com-group-total {
  font-size: 12px;
  color: var(--text);
  font-family: var(--mono);
  font-weight: 600;
  margin-left: auto;
  padding: 4px 10px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-glow-strong);
  border-radius: 8px;
  color: var(--accent);
}
.com-group-month-btn { background: var(--surface2); border: 1px solid var(--border2); color: var(--text2); cursor: pointer; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 600; white-space: nowrap; transition: all 0.15s; margin-left: 6px; }
.com-group-month-btn:hover { color: var(--text); border-color: var(--accent); }
.com-group-month-btn.active { background: var(--accent-glow); color: var(--accent); border-color: var(--accent); }
.com-group-delete { background: transparent; border: none; color: var(--text3); cursor: pointer; padding: 5px 9px; border-radius: 6px; font-size: 14px; opacity: 0; transition: all 0.15s; }

/* Drag handles en grupos y filas */
.com-group-drag { cursor: grab; color: var(--text3); font-size: 14px; padding: 4px 6px; user-select: none; opacity: 0.45; transition: opacity 0.15s; flex-shrink: 0; line-height: 1; }
.com-group-header:hover .com-group-drag { opacity: 1; }
.com-group-drag:active { cursor: grabbing; }
.com-group.dragging { opacity: 0.5; border: 2px dashed var(--accent); }
/* Indicador de drop sobre el HEADER (junto al cursor), no al fondo de la tabla */
.com-group.drag-over-top > .com-group-header { box-shadow: inset 0 3px 0 0 var(--accent); }
.com-group.drag-over-bottom > .com-group-header { box-shadow: inset 0 -3px 0 0 var(--accent); }

.com-row-drag { cursor: grab; color: var(--text3); font-size: 13px; user-select: none; opacity: 0; transition: opacity 0.15s; line-height: 1; display: inline-block; padding: 4px 4px; margin-right: 2px; }
.com-table tbody tr:hover .com-row-drag { opacity: 1; }
.com-row-drag:active { cursor: grabbing; }
.com-table tbody tr.dragging { opacity: 0.4; background: var(--accent-glow); }
.com-table tbody tr.drag-over-top > td { border-top: 2px solid var(--accent) !important; }
.com-table tbody tr.drag-over-bottom > td { border-bottom: 2px solid var(--accent) !important; }
/* Cuentas por Cobrar — orden manual arrastrando filas (mismo lenguaje visual
   que el módulo Comercial). El handle aparece al pasar el mouse por la fila
   para no sumar ruido a una tabla que ya tiene 18 columnas. */
.cxc-drag-td { width: 26px; padding: 0 2px !important; text-align: center; }
.cxc-drag { cursor: grab; color: var(--text3); font-size: 13px; user-select: none; opacity: 0; transition: opacity .15s; line-height: 1; display: inline-block; padding: 4px 3px; }
.cxp-grid tbody tr:hover .cxc-drag { opacity: 1; }
.cxc-drag:active { cursor: grabbing; }
.cxp-grid tbody tr.cxc-dragging { opacity: .4; background: var(--accent-glow); }
.cxp-grid tbody tr.cxc-drop-arriba > td { border-top: 2px solid var(--accent) !important; }
.cxp-grid tbody tr.cxc-drop-abajo  > td { border-bottom: 2px solid var(--accent) !important; }

.com-group-header:hover .com-group-delete { opacity: 1; }
.com-group-delete:hover { color: var(--red); background: var(--red-bg); }

.com-table-wrap { overflow-x: auto; }
.com-group.collapsed .com-table-wrap { display: none; }

.com-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 1400px; }
.com-table thead th { background: var(--surface); color: var(--text3); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.com-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; }
.com-table tbody tr:hover { background: var(--surface2); }
.com-table tbody tr:hover .com-row-delete { opacity: 1; }
.com-table tbody td { padding: 9px 12px; vertical-align: middle; }

/* Fila inline "+ Agregar elemento" (estilo Monday) al final de cada grupo */
.com-add-row td { padding: 0; }
.com-add-input { width: 100%; background: transparent; border: none; outline: none; color: var(--text3); font-family: var(--font); font-size: 13px; padding: 11px 16px; cursor: text; transition: background 0.12s, color 0.12s; }
.com-add-input::placeholder { color: var(--text3); }
.com-add-input:hover { background: var(--surface); color: var(--text2); }
.com-add-input:focus { background: var(--surface); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
/* Footer de resumen del grupo (barras de estado + total + archivos) */
.com-group-foot td { background: var(--surface2); border-top: 2px solid var(--border2); padding: 9px 12px; font-size: 12px; vertical-align: middle; }
.com-foot-meta { color: var(--text3); font-size: 11px; font-weight: 600; white-space: nowrap; }
.com-foot-total { text-align: right; font-family: var(--mono); font-weight: 700; color: var(--text); white-space: nowrap; }
.com-foot-arch { text-align: center; color: var(--text2); font-size: 11px; white-space: nowrap; }
.com-foot-bar { display: flex; height: 16px; border-radius: 5px; overflow: hidden; gap: 1px; min-width: 40px; }
.com-foot-bar.empty { background: var(--surface3); }
.com-foot-seg { min-width: 4px; }

.com-cell { position: relative; min-width: 100px; }
.com-cell-input { width: 100%; background: transparent; border: 1px solid transparent; color: var(--text); font-family: var(--font); font-size: 13px; padding: 5px 8px; border-radius: 4px; outline: none; }
.com-cell-input:hover { border-color: var(--border2); background: var(--surface); }
.com-cell-input:focus { border-color: var(--accent); background: var(--surface); }
.com-cell-input.mono { font-family: var(--mono); }
/* Status/OC y HES: textarea expansible PERO colapsado a 1 línea cuando no está en
   foco, para que todas las filas se vean de la misma altura y ordenadas. Al
   hacer clic (focus) se expande para leer/editar; al salir (blur) vuelve a 1 línea. */
.com-cell-ta { display: block; min-width: 150px; height: 30px; line-height: 1.4; resize: none; overflow: hidden; white-space: pre-wrap; word-break: break-word; field-sizing: fixed; text-overflow: ellipsis; }
.com-cell-ta:focus { height: auto; min-height: 30px; max-height: 240px; resize: vertical; overflow-y: auto; field-sizing: content; }
/* HES: columna angosta (es un código corto) para dejarle más ancho al evento. */
.com-cell-hes { min-width: 52px; }
.com-cell-ta-hes { min-width: 52px; }

.com-cell-date { padding: 5px 8px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; color: var(--text2); font-size: 13px; font-family: var(--mono); }
.com-cell-date:hover { border-color: var(--border2); background: var(--surface); }
.com-cell-date.empty { color: var(--text3); font-style: italic; }

.com-status { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; user-select: none; min-width: 90px; text-align: center; border: none; outline: none; font-family: var(--font); appearance: none; -webkit-appearance: none; padding-right: 24px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5"><path fill="%23fff" d="M0 0l4 5 4-5z"/></svg>'); background-repeat: no-repeat; background-position: right 8px center; }
.com-status option { background: var(--surface); color: var(--text); font-weight: 500; padding: 6px; text-transform: none; letter-spacing: normal; }
/* Status (dropdown de facturación): más angosto. Se reconoce por color; el texto se trunca. */
/* width FIJO (no min-width): un <select> se autoensancha a la opción más larga,
   así que sólo un width fijo lo achica. El texto se recorta; el color identifica. */
.com-status-sm { width: 100px; min-width: 0; padding-left: 8px; padding-right: 16px; background-position: right 5px center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Estado Cierre y Status con EXACTAMENTE el mismo ancho fijo (un <select> se
   autoensancha a su opción más larga; sin width fijo, Status quedaba enorme por
   "Entregado X Aprobar"). El texto largo se recorta; el color identifica. */
.com-status-eq { width: 116px; min-width: 0; padding-left: 10px; padding-right: 18px; background-position: right 6px center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Columna Status: recorta el padding de header y celda (el piso de ancho lo ponía el padding). */
.com-table thead th.com-col-status,
.com-table tbody td.com-col-status { padding-left: 5px; padding-right: 5px; }
.com-table thead th.com-col-status { letter-spacing: 0.02em; }

/* Mismos FONDOS de siempre (el equipo los reconoce de un vistazo); solo cambia
   el color del TEXTO: blanco a 11px uppercase sobre amarillo/teal/gris quedaba
   entre 1.7:1 y 2.5:1 — ilegible. Tinta oscura donde el fondo es claro/medio;
   blanco solo sobre los fondos realmente oscuros (crimson, púrpura oscuro). */
/* Estado Cierre (dropdown 1) */
.com-status-cerrado    { background: #e11d48; color: #fff; } /* crimson */
.com-status-seguimiento { background: #9ca3af; color: #15181D; } /* gris (compartido con Status) */
.com-status-abierto    { background: #2dd4bf; color: #15181D; } /* teal */
.com-status-pendientes { background: #a855f7; color: #15181D; } /* púrpura (compartido con Status) */
.com-status-en-espera  { background: #ec4899; color: #15181D; } /* rosado (etiqueta "En espera") */
.com-status-revisar    { background: #fb923c; color: #15181D; } /* naranjo */
/* Status (dropdown 2) */
.com-status-facturado  { background: #7cb342; color: #15181D; } /* verde */
.com-status-por-facturar { background: #fbbf24; color: #15181D; } /* amarillo */
.com-status-entregado-x-aprobar { background: #3b82f6; color: #15181D; } /* azul */
.com-status-fact-parcial { background: #2dd4bf; color: #15181D; } /* teal */
.com-status-cancelado  { background: #e11d48; color: #fff; } /* crimson */
.com-status-rechazado  { background: #ef4444; color: #15181D; } /* rojo */
.com-status-suma       { background: #ff007f; color: #15181D; } /* rosa — Bolsa: ingreso (Suma) */
.com-status-descuenta  { background: #784bd1; color: #fff; } /* púrpura — Bolsa: gasto (Descuenta) */
.com-status-null       { background: var(--surface3); color: var(--text3); }

.com-file-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--accent-glow); color: var(--accent); border: 1px solid var(--accent-glow-strong); border-radius: 6px; font-size: 11px; cursor: pointer; transition: all 0.15s; font-family: var(--font); font-weight: 500; }
.com-file-btn:hover { background: var(--accent); color: #0A0A0A; }
html[data-theme="light"] .com-file-btn:hover { color: #fff; }
.com-file-btn.empty { background: var(--surface2); color: var(--text3); border-color: var(--border); }
.com-file-btn.empty:hover { background: var(--surface3); color: var(--text2); }

.com-row-delete { background: transparent; border: none; color: var(--text3); cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 14px; opacity: 0; transition: opacity 0.15s; }
.com-row-delete:hover { color: var(--red); background: var(--red-bg); }

.com-sticky-col { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.com-table thead th.com-sticky-col { background: var(--surface2); z-index: 3; }
.com-group.collapsed .com-group-total { display: inline; }

/* ── Comercial en teléfono: que el NOMBRE del grupo sea legible ──
   Mismo breakpoint que el resto del CSS móvil (≤700px) → el escritorio no cambia.
   No se usa `order:` en ningún lado, así el orden de grupos y de elementos del
   encabezado queda idéntico al del computador. */
@media (max-width: 700px) {
  .com-group-header { flex-wrap: wrap; column-gap: 8px; row-gap: 8px; padding: 12px 14px; }
  /* Drag y borrar son acciones de escritorio (hover); en táctil sólo estorban y comen ancho. */
  .com-group-drag,
  .com-group-delete { display: none; }
  /* El nombre toma prioridad y no se aplasta; si es muy largo, elipsis en vez de cortarse. */
  .com-group-name-input {
    flex: 1 1 150px;
    min-width: 0;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Que el total no empuje todo a la derecha y deje sin espacio al nombre. */
  .com-group-total { margin-left: 0; }
  .com-group-header .btn { padding: 4px 10px; font-size: 11px; }
}

/* Modal de preview de archivo */
.com-file-preview-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 10000; padding: 20px; }
.com-file-preview-overlay.show { display: flex; }
.com-file-preview { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 1100px; height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.com-file-preview-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface2); }
.com-file-preview-title { font-weight: 600; font-size: 14px; flex: 1; }
.com-file-preview iframe { flex: 1; width: 100%; border: 0; }
.com-file-preview-img-wrap { flex: 1; display: flex; align-items: center; justify-content: center; background: #000; overflow: auto; }
.com-file-preview-img-wrap img { max-width: 100%; max-height: 100%; }
.com-file-preview-noprev { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px; color: var(--text3); text-align: center; }
/* Barra lateral con la lista de PDFs de la OC dentro del visor */
.com-file-preview-list { width: 230px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface2); overflow-y: auto; display: flex; flex-direction: column; padding: 10px; gap: 4px; }
.com-file-upload-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 8px; border: 1px dashed var(--accent-glow-strong); background: var(--accent-glow); color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 600; margin-bottom: 8px; transition: all 0.15s; }
.com-file-upload-btn:hover { background: var(--accent); color: #0A0A0A; }
html[data-theme="light"] .com-file-upload-btn:hover { color: #fff; }
.com-file-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--text2); transition: all 0.12s; }
.com-file-item:hover { background: var(--surface3); }
.com-file-item.active { background: var(--accent-glow); color: var(--accent); font-weight: 600; }
.com-file-item-icon { flex-shrink: 0; font-size: 14px; }
.com-file-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-file-item-del { opacity: 0; color: var(--text3); cursor: pointer; flex-shrink: 0; padding: 2px 5px; border-radius: 4px; font-size: 13px; line-height: 1; }
.com-file-item:hover .com-file-item-del { opacity: 0.7; }
.com-file-item-del:hover { opacity: 1 !important; color: var(--red); background: var(--red-bg); }
@media (max-width: 700px) { .com-file-preview-list { width: 140px; } }

/* ═══════════ DASHBOARD GERENCIAL ═══════════ */
.ger-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.ger-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.ger-grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 1100px) { .ger-grid { grid-template-columns: repeat(2, 1fr); } .ger-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .ger-grid { grid-template-columns: 1fr; } .ger-grid-2 { grid-template-columns: 1fr; } }

/* Dashboard Gerencial — KPIs unificados con metric-card para consistencia visual */
.ger-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.ger-kpi:hover {
  border-color: var(--border2);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.ger-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: var(--accent);
  transition: height 0.2s;
}
.ger-kpi:hover::before { height: 4px; }
.ger-kpi-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text3); margin-bottom: 10px; }
.ger-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ger-kpi-top .ger-kpi-label { margin-bottom: 0; flex: 1; }
.ger-kpi-value {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font);
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* Premium money display: símbolos y sufijos más sutiles que los dígitos */
.num-sym, .num-suffix {
  opacity: 0.5;
  font-weight: 600;
  font-size: 0.68em;
  vertical-align: 0.12em;
  margin-right: 2px;
  letter-spacing: 0;
}
.num-suffix { margin-right: 0; margin-left: 3px; }
.dash-hero-value, .metric-value, .ger-kpi-value, .pipeline-donut-num { font-variant-numeric: tabular-nums; }
/* Cells de tablas con números (totales, montos) */
table .num, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--mono); }
.ger-kpi-sub { font-size: 11px; color: var(--text3); margin-top: 6px; }

/* #4 — AI Insights / Highlights card */
.ger-insights-card {
  background: linear-gradient(135deg, rgba(84,165,151,0.06), rgba(139,128,240,0.04));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 20px;
}
.ger-insights-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.ger-insights-sub { font-size: 11px; font-weight: 500; color: var(--text3); margin-left: 2px; }
.ger-insights-list { display: flex; flex-direction: column; gap: 8px; }
.ger-insight {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text2);
  transition: border-color .15s, transform .15s;
}
.ger-insight:hover { border-color: var(--border2); transform: translateX(2px); }
.ger-insight-icon { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.ger-insight-body b { color: var(--text); font-weight: 700; }
.ger-insight[data-tone="good"] { border-left: 3px solid var(--green); }
.ger-insight[data-tone="warn"] { border-left: 3px solid var(--amber); }
.ger-insight[data-tone="bad"]  { border-left: 3px solid var(--red); }
.ger-insight[data-tone="info"] { border-left: 3px solid var(--accent); }

/* #6 — Drilldown drawer lateral */
.ger-drill-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9000;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.ger-drill-backdrop.open { opacity: 1; pointer-events: auto; }
.ger-drill-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 95vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 9001;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ger-drill-drawer.open { transform: translateX(0); }
.ger-drill-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.ger-drill-header-content { flex: 1; min-width: 0; }
.ger-drill-title { font-size: 12px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
.ger-drill-value { font-size: 24px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ger-drill-sub { font-size: 12px; color: var(--text3); margin-top: 4px; }
.ger-drill-close {
  background: transparent; border: 1px solid var(--border); color: var(--text3);
  font-size: 16px; padding: 4px 10px; border-radius: 8px; cursor: pointer; line-height: 1;
}
.ger-drill-close:hover { color: var(--text); border-color: var(--border2); }
.ger-drill-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.ger-drill-section { margin-bottom: 24px; }
.ger-drill-section-title { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
.ger-drill-list { display: flex; flex-direction: column; gap: 1px; }
.ger-drill-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; background: var(--surface2); border-radius: 8px; font-size: 12px;
  cursor: pointer; transition: background .15s;
}
.ger-drill-list-item:hover { background: var(--surface3); }
.ger-drill-list-item-name { color: var(--text); font-weight: 600; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ger-drill-list-item-meta { color: var(--text3); font-size: 11px; flex-shrink: 0; }
.ger-drill-list-item-val { font-family: var(--mono); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* KPI clickeable: hint visual */
.ger-kpi[data-drill] { cursor: pointer; transition: transform .12s, border-color .12s; }
.ger-kpi[data-drill]:hover { transform: translateY(-2px); border-color: var(--border2); }
.ger-kpi[data-drill]::after {
  content: '→'; position: absolute; top: 14px; right: 14px;
  font-size: 12px; color: var(--text3); opacity: 0; transition: opacity .15s, transform .15s;
}
.ger-kpi[data-drill]:hover::after { opacity: 1; transform: translateX(2px); }
/* Barra lateral derecha (mantenemos para diferenciación sutil por color de KPI) */
.ger-kpi-accent { position: absolute; top: 0; right: 0; width: 3px; height: 100%; opacity: 0.6; }

.ger-chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.ger-chart-title { font-size: 13px; font-weight: 600; margin-bottom: 16px; color: var(--text); display: flex; align-items: center; gap: 8px; }

/* Barras horizontales */
.ger-hbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ger-hbar-label { font-size: 11px; color: var(--text2); min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ger-hbar-track { flex: 1; height: 20px; background: var(--surface3); border-radius: 4px; overflow: hidden; position: relative; }
.ger-hbar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; min-width: 2px; }
.ger-hbar-val { font-size: 11px; font-family: var(--mono); color: var(--text2); min-width: 70px; text-align: right; }

/* Donut CSS */
.ger-donut-wrap { display: flex; align-items: center; gap: 24px; }
.ger-donut { width: 120px; height: 120px; border-radius: 50%; position: relative; flex-shrink: 0; }
.ger-donut-center { position: absolute; inset: 25px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; flex-direction: column; }
.ger-donut-center-val { font-size: 20px; font-weight: 700; font-family: var(--mono); color: var(--text); }
.ger-donut-center-sub { font-size: 9px; color: var(--text3); text-transform: uppercase; }
.ger-donut-legend { display: flex; flex-direction: column; gap: 6px; }
.ger-donut-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text2); }
.ger-donut-legend-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }

/* Barras verticales (mini chart mensual) */
.ger-vbars { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 8px; }
.ger-vbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ger-vbar-fill { width: 100%; border-radius: 3px 3px 0 0; transition: height 0.4s ease; min-height: 2px; }
.ger-vbar-label { font-size: 9px; color: var(--text3); text-transform: uppercase; }
.ger-vbar-val { font-size: 9px; font-family: var(--mono); color: var(--text2); }

/* ═══════════ AUTOCOMPLETE PROVEEDOR (cont.) ═══════════ */
.prov-ac-wrap { position: relative; }
.prov-ac-input {
  width: 100%; min-height: 38px; height: auto;
  white-space: pre-wrap; word-break: break-word;
  overflow-wrap: break-word; resize: none; line-height: 1.4;
}
.prov-ac-list {
  /* position:fixed para escapar de cualquier overflow del padre (table-wrap, card, etc.) */
  position: fixed;
  z-index: 9000;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  max-height: 240px; overflow-y: auto;
  display: none;
  box-shadow: var(--shadow-pop);
  min-width: 220px;
}
.prov-ac-list.show { display: block; }
.prov-ac-item { padding: 9px 12px; font-size: 12px; cursor: pointer; transition: background .1s; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.prov-ac-item:hover, .prov-ac-item.active { background: var(--accent-glow); color: var(--accent); }
.prov-ac-item-sub { font-size: 10px; color: var(--text3); }
.prov-ac-empty { padding: 10px 12px; font-size: 11px; color: var(--text3); text-align: center; }
.prov-ac-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text3); cursor: pointer; font-size: 14px; padding: 2px 4px; line-height: 1; }
.prov-ac-clear:hover { color: var(--red); }

/* ═══════════ SPLASH (pre-login) ═══════════ */
/* #app-splash sirve a DOS elementos: el splash de boot estático (se quita con
   .hide) y el splash post-login (aparece con .visible). Antes había dos bloques
   duplicados; este es el efectivo. Nota: el de boot arranca en opacity 0 y
   nunca recibe .visible — lleva tiempo invisible y así se preserva. */
#app-splash.hide { opacity: 0; pointer-events: none; }
.splash-mark {
  width: 60px;
  height: 60px;
  color: #F4F4F5;
  animation: splashPulse 2s ease-in-out infinite;
}
@keyframes splashPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}
.splash-logo { font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: #A1A1AA; }
.splash-logo strong { color: #F4F4F5; font-weight: 600; }
.splash-hint { font-size: 10px; color: #71717A; letter-spacing: 0.15em; text-transform: uppercase; }

/* Spinner minimalista */
.spinner-ring {
  width: 28px; height: 28px;
  border: 2px solid rgba(255,255,255,0.08);
  border-top-color: #5EB3A5;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
/* @keyframes spin: definido una sola vez, más arriba */

/* ═══════════ INDICADOR SYNC EN TOPBAR ═══════════ */
.sync-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text2);
  transition: all 0.2s ease;
  opacity: 0; transform: translateY(-2px);
  pointer-events: none;
}
.sync-pill.show { opacity: 1; transform: none; }
.sync-pill.syncing { background: var(--accent-glow); border-color: var(--accent-glow-strong); color: var(--accent); }
.sync-pill.ok { background: var(--green-bg); border-color: rgba(16,185,129,0.3); color: var(--green); }
.sync-pill.err { background: var(--red-bg); border-color: rgba(239,68,68,0.3); color: var(--red); }
.sync-pill-ic { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; }
.sync-pill-ic .tst-ic, .autosave-ic .tst-ic { width: 13px; height: 13px; }
.sync-pill-spin { width: 11px; height: 11px; border-radius: 50%; border: 1.6px solid currentColor; border-top-color: transparent; animation: spin 0.7s linear infinite; display: inline-block; }
.autosave-ic { display: inline-flex; align-items: center; vertical-align: -2px; }

/* T2 — pulse para indicador de sync recién */
@keyframes syncFreshPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.45); }
  50%     { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
#last-sync-indicator.sync-fresh { animation: syncFreshPulse 1.4s ease-out 2; }
@media (prefers-reduced-motion: reduce) {
  #last-sync-indicator.sync-fresh { animation: none; }
}

/* ═══════════ Scrollbars branded ═══════════ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* Firefox */
html { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }

/* ═══════════ Selection color ═══════════ */
::selection { background: var(--accent-glow-strong); color: var(--text); }

/* ═══════════ Focus outline global ═══════════ */
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ═══════════════════════════════════════════════════════════════════
   T1 — Sistema tipográfico premium
   ═══════════════════════════════════════════════════════════════════ */

/* Números monoespaciados y alineados verticalmente — todos los amounts */
.budget-compare td,
.metric-value,
.total-line span:last-child,
.total-big span:last-child,
[data-item-costo],
[data-item-venta],
[data-item-ganancia],
[class*="-mono"],
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' on, 'lnum' on; }

/* Page titles más comando */
/* Headers de secciones internas */
.card-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.metric-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--text3) !important;
  margin-bottom: 8px;
}
.metric-value {
  font-size: 28px;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  margin: 4px 0;
  /* font-size: lo controla autoShrinkMetricValues según el largo del valor */
}
.metric-sub {
  font-size: 11px !important;
  color: var(--text3) !important;
  margin-top: 4px;
}


/* ═══════════ App Splash — overlay de carga post-login ═══════════ */
#app-splash {
  color: var(--text);
  position: fixed; inset: 0;
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, var(--surface) 0%, var(--bg) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  font-family: var(--font);
}
#app-splash.visible { opacity: 1; }
#app-splash.fading-out { opacity: 0; pointer-events: none; }
.app-splash-content {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 40px;
  max-width: 420px;
}
.app-splash-mark {
  width: 72px; height: 72px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: 28px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(84,165,151,0.08) inset;
  animation: splashFloat 3s ease-in-out infinite;
}
@keyframes splashFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.app-splash-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.app-splash-eyebrow::before, .app-splash-eyebrow::after {
  content: '—';
  margin: 0 8px;
  opacity: 0.5;
}
.app-splash-greet {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.15;
}
.app-splash-name {
  background: linear-gradient(135deg, var(--accent), #88dac8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.app-splash-status {
  font-size: 13px;
  color: var(--text3);
  margin-bottom: 28px;
  min-height: 18px;
  animation: splashFade 1.5s ease-in-out infinite;
}
@keyframes splashFade {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.app-splash-bar {
  width: 220px; height: 3px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.app-splash-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 45%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 99px;
  animation: splashLoop 1.4s linear infinite;
}
@keyframes splashLoop {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}

/* ═══════════════════════════════════════════════════════════════════
   BUILDER — Refinamiento estético (sin tocar HTML/JS existentes)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Subtítulo del builder: chips con iconos ── */
#builder-subtitle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.meta-chip:hover { background: var(--surface3); border-color: var(--border2); }
.meta-chip-id     { font-family: var(--mono); font-weight: 600; color: var(--text2); background: var(--tint-4); }
.meta-chip-muted  { color: var(--text3); background: transparent; }
.meta-chip-accent { color: var(--accent); border-color: rgba(84,165,151,0.3); background: var(--accent-glow); font-weight: 700; }

/* ── Banner de margen crítico/bajo ── */
.margin-warning-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(245,158,11,0.06);
  border: 1px solid var(--amber);
  border-left: 4px solid var(--amber);
  border-radius: 12px;
  margin-bottom: 14px;
  animation: marginPulse 2.5s ease-in-out infinite;
}
.margin-warning-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
@keyframes marginPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  50%      { box-shadow: 0 0 0 4px rgba(245,158,11,0.08); }
}

/* ── Sync bar: pill compacto y discreto, unificado para TODAS las pantallas
   (antes era una barra verde ancha; ahora replica el estilo lindo del calendario). ── */
/* ── Items toolbar: más alta y mejor jerarquía ── */
.items-toolbar {
  padding: 16px 20px !important;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 70%, var(--surface2) 100%) !important;
}
.items-toolbar-title { font-size: 15px !important; font-weight: 700 !important; }
.items-toolbar-meta {
  padding: 5px 12px !important;
  background: var(--accent-glow) !important;
  color: var(--accent) !important;
  border-color: rgba(84,165,151,0.25) !important;
  font-weight: 600 !important;
}

/* ── Tabla más respirable ── */
.budget-compare th {
  padding: 12px 14px !important;
  font-size: 10px !important;
}
.budget-compare td { padding: 12px 12px !important; }
.budget-compare tbody tr td {
  /* border-bottom lo maneja la regla de grilla (busca `--grid-line`) — antes
     aquí había un override hardcodeado a `rgba(255,255,255,0.04) !important`
     que pisaba la variable y se veía invisible en tema claro. */
  transition: background 0.2s ease;
}
.budget-compare tbody tr:hover {
  background: var(--tint-1);
}
/* Hover más suave (era muy intenso) */
.budget-compare tbody tr:hover td { background: var(--tint-2) !important; }
.budget-compare tbody tr:hover .td-buy { background: rgba(34,211,238,0.08) !important; }
.budget-compare tbody tr:hover .td-sell { background: rgba(16,185,129,0.08) !important; }
.budget-compare tbody tr:hover .td-mg { background: rgba(245,158,11,0.06) !important; }

/* ── Inputs inline: más limpios al no estar focused ── */
.bi-input {
  border-color: transparent !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
}
.bi-input:hover { background: var(--tint-3) !important; }
.bi-input:focus {
  background: var(--surface) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* ── Cards de Resumen (.total-block): más visuales ── */
.total-block {
  position: relative;
  padding: 20px 22px !important;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 16px rgba(0,0,0,0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.total-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 24px rgba(0,0,0,0.4);
}
.total-block-head {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  margin-bottom: 14px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.total-line {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 13px;
  color: var(--text2);
}
.total-line span:last-child { font-family: var(--mono); font-weight: 600; color: var(--text); }
.total-divider {
  border-top: 1px dashed var(--border2);
  margin: 10px 0;
}
.total-big {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 6px;
  font-size: 15px;
  font-weight: 700;
}
.total-big span:last-child {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ── Banner de margen crítico (cuando r-margen-bar contiene "crítico") ── */
#r-margen-bar {
  font-size: 11px;
  color: var(--text2);
}

/* ── Stepper de estados con mejor look ── */
.budget-zone-header th { font-weight: 800 !important; }

/* ── Estado del input fee de agencia ── */
input#fee-agencia-pct {
  transition: all 0.15s ease;
}
input#fee-agencia-pct:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
  outline: none;
}

/* ── Filas de items con animación de aparición ── */
@keyframes itemSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.budget-compare tbody tr {
  animation: itemSlideIn 0.25s ease backwards;
}
.budget-compare tbody tr:nth-child(1)  { animation-delay: 0.00s; }
.budget-compare tbody tr:nth-child(2)  { animation-delay: 0.03s; }
.budget-compare tbody tr:nth-child(3)  { animation-delay: 0.06s; }
.budget-compare tbody tr:nth-child(4)  { animation-delay: 0.09s; }
.budget-compare tbody tr:nth-child(5)  { animation-delay: 0.12s; }
.budget-compare tbody tr:nth-child(n+6) { animation-delay: 0.15s; }

/* ── Botón "Guardar ahora" más prominente ── */
.btn.btn-success {
  position: relative;
  overflow: hidden;
}
.btn.btn-success::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.btn.btn-success:hover::before { transform: translateX(100%); }

/* ── Indicador "Los cambios se guardan automáticamente" más visible ── */
.btn.btn-success + span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--green-bg);
  color: var(--green) !important;
  border-radius: 99px;
  font-weight: 600 !important;
  border: 1px solid rgba(16,185,129,0.25);
}
.btn.btn-success + span::before {
  content: '●';
  font-size: 8px;
  animation: accentPulse 2.5s ease-in-out infinite;
}

/* ── Title del builder: más grande y con peso ── */

/* ── Mejorar el card-title de las secciones (Notas, Historial, Versiones, Chat) ── */
#page-builder .card-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Estado del autosave: chip flotante en esquina ── */
#autosave-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--green);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text2);
  box-shadow: var(--shadow-pop);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#autosave-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}
#autosave-indicator.saving { border-left-color: var(--amber); }
#autosave-indicator.error  { border-left-color: var(--red); }

/* ── Modo Focus: que se sienta más "espacio limpio" ── */
body.focus-mode .topbar,
body.focus-mode .sidebar {
  filter: blur(2px) brightness(0.6);
  pointer-events: none;
  transition: filter 0.3s ease;
}

/* ── Alert info y danger del builder: mejor look ── */
#page-builder .alert {
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  border-left: 4px solid;
  display: flex;
  align-items: center;
  gap: 10px;
}
#page-builder .alert-info {
  background: rgba(84,165,151,0.06);
  border-left-color: var(--accent);
  color: var(--text);
}
#page-builder .alert-danger {
  background: rgba(239,68,68,0.06);
  border-left-color: var(--red);
  color: var(--text);
}

/* ── Inputs de notas: mejor padding y borde ── */
#page-builder textarea#nota-interna,
#page-builder textarea#nota-cliente {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  transition: all 0.15s ease;
}
#page-builder textarea#nota-interna:focus,
#page-builder textarea#nota-cliente:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-glow);
  outline: none;
}

/* ── Bordes interiores de la tabla más suaves entre detalle y proveedor/categoría ── */
.budget-compare td.td-prov,
.budget-compare td.td-serv {
  border-right: 1px solid var(--tint-2);
}

/* ── Header zonas COMPRA/VENTA/RESULTADO con iconos más visibles ── */
.th-buy[colspan], .th-sell[colspan], .th-mg[colspan] {
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 10px 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BUILDER — Power features (B1–B17)
   ═══════════════════════════════════════════════════════════════════ */

/* B13 — Sticky header de la tabla al scrollear */
#builder-table-wrap { max-height: calc(100vh - 280px); overflow: auto; }
.budget-compare thead { position: sticky; top: 0; z-index: 4; background: var(--surface); }
.budget-compare thead th { background: var(--surface); }
.budget-compare thead .th-buy   { background: linear-gradient(180deg, rgba(34,211,238,0.18) 0%, rgba(34,211,238,0.10) 100%) !important; }
.budget-compare thead .th-sell  { background: linear-gradient(180deg, rgba(16,185,129,0.18) 0%, rgba(16,185,129,0.10) 100%) !important; }
.budget-compare thead .th-mg    { background: linear-gradient(180deg, rgba(245,158,11,0.18) 0%, rgba(245,158,11,0.10) 100%) !important; }
.budget-compare thead .th-desc  { background: var(--surface2) !important; }
.budget-compare thead .col-divider { background: rgba(84,165,151,0.25) !important; }

/* ═══════════════════════════════════════════════════════════════════
   BUILDER — UI más amigable y respirada (Set: inputs limpios + totales prominentes
   + chip de margen grande + filas compactas + zebra striping)
   ═══════════════════════════════════════════════════════════════════ */

/* 1. INPUTS SIN BORDER VISIBLE (solo hover/focus) */
.budget-compare input[type="number"],
.budget-compare input[type="text"],
.budget-compare textarea:not(.prov-ac-input) {
  border-color: transparent !important;
  background: transparent !important;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease !important;
}
.budget-compare tbody tr:hover input[type="number"],
.budget-compare tbody tr:hover input[type="text"],
.budget-compare tbody tr:hover textarea:not(.prov-ac-input) {
  background: var(--tint-2) !important;
}
.budget-compare input:hover,
.budget-compare textarea:hover {
  background: var(--tint-4) !important;
}
.budget-compare input:focus,
.budget-compare textarea:focus {
  background: var(--surface) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
/* Select de categoría también más limpio */
.budget-compare select {
  border-color: transparent !important;
  background: transparent !important;
  transition: all 0.12s ease !important;
}
.budget-compare select:hover { background: var(--tint-4) !important; }
.budget-compare select:focus { background: var(--surface) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow) !important; }
/* Excepción: el input del proveedor mantiene su estilo (autocomplete) */
.budget-compare .prov-ac-input {
  border-color: var(--border) !important;
}

/* 2. TOTALES PROMINENTES SIN CAJA */
.budget-compare td[data-item-costo],
.budget-compare td[data-item-venta] {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.budget-compare td[data-item-costo] {
  color: var(--teal) !important;
  text-shadow: 0 0 12px rgba(93,190,209,0.15);
}
.budget-compare td[data-item-venta] {
  color: var(--green) !important;
  text-shadow: 0 0 12px rgba(31,170,122,0.15);
}
.budget-compare td[data-item-ganancia] {
  font-size: 14px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* 3. MARGEN COMO CHIP GRANDE (override del mbar lineal) */
.budget-compare .mbar-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 5px 10px !important;
  border-radius: 99px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
  background: var(--surface3);
  border: 1px solid var(--border);
  min-width: 64px;
  justify-content: center;
}
.budget-compare .mbar { display: none !important; }
.budget-compare .mpct {
  font-size: 13px !important;
  min-width: auto !important;
  font-weight: 800 !important;
  text-align: center !important;
  letter-spacing: -0.02em;
}
/* Color del chip según el margen */
.budget-compare tr.mg-green .mbar-wrap { background: rgba(31,170,122,0.12); border-color: rgba(31,170,122,0.3); }
.budget-compare tr.mg-amber .mbar-wrap { background: rgba(229,151,11,0.12); border-color: rgba(229,151,11,0.3); }
.budget-compare tr.mg-red .mbar-wrap   { background: rgba(224,72,72,0.12); border-color: rgba(224,72,72,0.3); }
.budget-compare tr.item-row-loss .mbar-wrap { background: rgba(224,72,72,0.2); border-color: var(--red); }

/* 4. FILAS MÁS COMPACTAS */
.budget-compare td {
  padding: 8px 10px !important;
}
/* Inputs internos más bajos */
.budget-compare input[type="number"],
.budget-compare input[type="text"] {
  padding: 6px 8px !important;
  min-height: 32px !important;
}
.budget-compare textarea:not(.prov-ac-input) {
  min-height: 44px !important;
  max-height: 200px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}
.budget-compare select {
  padding: 6px 8px !important;
  min-height: 32px !important;
}
/* Vertical-align middle para que todo quede centrado en filas más bajas */
.budget-compare td { vertical-align: middle !important; }
.budget-compare td.td-prov,
.budget-compare td.td-serv,
.budget-compare td.td-buy,
.budget-compare td.td-sell {
  vertical-align: middle !important;
  padding-top: 8px !important;
}
/* Inputs de cantidad más chicos pero legibles */
.budget-compare input[data-item-cu-venta],
.budget-compare .td-buy input[type="number"][value]:not([style*="text-align:right"]) {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* 5. ZEBRA STRIPING sutilísimo */
.budget-compare tbody tr:nth-child(even) > td:not(.td-buy):not(.td-sell):not(.td-mg):not(.col-divider) {
  background: var(--tint-1);
}
.budget-compare tbody tr:nth-child(even) > td.td-buy { background: rgba(34,211,238,0.025); }
.budget-compare tbody tr:nth-child(even) > td.td-sell { background: rgba(16,185,129,0.025); }
.budget-compare tbody tr:nth-child(even) > td.td-mg { background: rgba(245,158,11,0.018); }
/* Hover sigue prevaleciendo */
.budget-compare tbody tr:hover > td { background: var(--tint-2) !important; }
.budget-compare tbody tr:hover > td.td-buy { background: rgba(34,211,238,0.08) !important; }
.budget-compare tbody tr:hover > td.td-sell { background: rgba(16,185,129,0.08) !important; }
.budget-compare tbody tr:hover > td.td-mg { background: rgba(245,158,11,0.06) !important; }

/* B12 — Heatmap de margen por fila (borde izquierdo coloreado) */
.budget-compare tbody tr {
  position: relative;
  border-left: 3px solid transparent;
  transition: border-left-color 0.2s ease;
}
.budget-compare tbody tr.mg-green  { border-left-color: var(--green); }
.budget-compare tbody tr.mg-amber  { border-left-color: var(--amber); }
.budget-compare tbody tr.mg-red    { border-left-color: var(--red); }
.budget-compare tbody tr.mg-solo   { border-left-color: var(--teal); }

/* B9 — Pérdida real (venta total < costo total): borde rojo, sin chip flotante (el chip se inserta en la columna ganancia) */
.budget-compare tbody tr.item-row-loss {
  background: rgba(239,68,68,0.025);
  border-left-color: var(--red) !important;
}
.budget-compare tbody tr.item-row-loss td[data-item-ganancia]::after {
  content: ' ⚠';
  color: var(--red);
  font-weight: 800;
  margin-left: 4px;
}

/* Co-edición Paso 3: fila que OTRO productor está editando ahora mismo */
.budget-compare tbody tr.item-edit-otro > td { background: var(--amber-bg, rgba(245,158,11,0.09)); transition: background 0.25s; }
.budget-compare tbody tr.item-edit-otro > td:first-child { box-shadow: inset 3px 0 0 var(--amber, #f59e0b); }

/* B8 — Item duplicado: chip warning amarillo (en la columna detalle de compra) */
.budget-compare tbody tr.item-row-duplicated td.td-buy:first-of-type::before {
  content: '⚠ Duplicado';
  display: inline-block;
  font-size: 9px; font-weight: 800;
  padding: 2px 7px;
  background: var(--amber); color: var(--bg);
  border-radius: 99px;
  letter-spacing: .05em;
  margin-bottom: 4px;
  animation: fadeInChip 0.3s ease;
}
@keyframes fadeInChip { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

/* B2 — Drag handle más visible + estado durante drag */
.item-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: var(--text3);
  cursor: grab;
  border-radius: 4px;
  transition: background .15s, color .15s;
  font-size: 14px;
}
.item-drag-handle:hover { background: var(--surface3); color: var(--accent); }
.item-drag-handle:active { cursor: grabbing; }
.budget-compare tbody tr.dragging { opacity: 0.4; }
.budget-compare tbody tr.drop-target-above td { border-top: 2px solid var(--accent); }
.budget-compare tbody tr.drop-target-below td { border-bottom: 2px solid var(--accent); }

/* Primera columna: checkbox + drag handle apilados verticalmente */
.td-row-handle, .th-row-handle {
  width: 36px !important;
  min-width: 36px;
  text-align: center;
  vertical-align: middle !important;
  padding: 8px 4px !important;
}
.td-row-handle .builder-row-cb,
.th-row-handle .builder-row-cb-all {
  display: block;
  margin: 0 auto 6px;
  width: 16px; height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
  border-radius: 4px;
  transition: transform 0.1s ease;
}
.td-row-handle .builder-row-cb:hover,
.th-row-handle .builder-row-cb-all:hover { transform: scale(1.15); }
.td-row-handle .item-drag-handle {
  display: block;
  margin: 0 auto;
  width: 22px; height: 22px;
  font-size: 13px;
  color: var(--text3);
  cursor: grab;
  border-radius: 4px;
  transition: background .15s, color .15s;
  line-height: 22px;
  text-align: center;
  opacity: 0.6;
}
.budget-compare tbody tr:hover .item-drag-handle { opacity: 1; }
.td-row-handle .item-drag-handle:hover { background: var(--surface3); color: var(--accent); }

/* Última columna: botones duplicar + eliminar (visibles al hover) */
.td-row-actions {
  width: 70px !important;
  min-width: 70px;
  text-align: center;
  vertical-align: middle !important;
  padding: 8px 6px !important;
}
.row-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
  transition: opacity 0.15s;
}
.budget-compare tbody tr:hover .row-actions { opacity: 1; }
.row-action-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
}
.row-action-btn:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.05);
}
.row-action-btn.row-action-danger:hover {
  background: var(--red-bg);
  border-color: var(--red);
  color: var(--red);
}
.row-action-btn svg { display: block; }

/* Fila seleccionada: highlight clean */
.budget-compare tbody tr.row-selected { background: var(--accent-glow) !important; }
.budget-compare tbody tr.row-selected td { background: var(--accent-glow) !important; }
.budget-compare tbody tr.row-selected .builder-row-cb { opacity: 1; }

/* Compat — ocultar los estilos viejos si quedan elementos rezagados */
.item-dup-btn, .item-remove-btn { display: none; }

/* Barra inferior de selección múltiple — sticky */
#builder-selection-bar {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 12px;
  margin-top: 12px;
  padding: 12px 16px;
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  z-index: 10;
}
#builder-selection-bar.visible { display: flex; }
#builder-selection-bar .count-pill {
  background: var(--accent);
  color: var(--bg);
  padding: 4px 12px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 12px;
}

/* B4 — Buscador flotante dentro del builder (Ctrl+F) */
#builder-search-bar {
  position: fixed;
  top: 80px;
  right: 20px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 10px 14px;
  display: none;
  align-items: center;
  gap: 8px;
  z-index: 600;
  box-shadow: var(--shadow-pop);
  min-width: 280px;
}
#builder-search-bar.visible { display: flex; }
#builder-search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  outline: none;
  min-width: 160px;
}
#builder-search-bar .search-count {
  font-size: 11px; color: var(--text3); font-family: var(--mono);
}
.budget-compare tbody tr.search-hidden { display: none; }
.budget-compare tbody tr.search-match { background: rgba(245,158,11,0.05) !important; }

/* B15 — Agrupación por categoría: encabezados */
.budget-group-header {
  background: linear-gradient(90deg, var(--surface2) 0%, transparent 100%) !important;
  cursor: pointer;
  user-select: none;
}
.budget-group-header td {
  padding: 8px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent) !important;
  border-bottom: 1px solid var(--accent) !important;
  border-top: 1px solid var(--border2) !important;
}
.budget-group-header td > span:first-child { margin-right: 8px; }
.budget-compare tbody tr.group-collapsed { display: none; }

/* B17 — Modal de atajos */
#shortcuts-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}
#shortcuts-modal.visible { display: flex; }
#shortcuts-modal .panel {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 24px 28px;
  max-width: 480px;
  width: 90vw;
  max-height: 80vh;
  overflow: auto;
}
#shortcuts-modal h3 { font-size: 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
#shortcuts-modal .row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
#shortcuts-modal .row:last-child { border-bottom: none; }
#shortcuts-modal kbd {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 5px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  box-shadow: 0 2px 0 var(--border);
}

/* ═══════════════════════════════════════════════════════════════════
   Responsive — tablet (≤900px) y móvil (≤640px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Sidebar: colapsada por default, se abre con toggle */
  .sidebar { transform: translateX(-100%); position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; transition: transform .25s ease; box-shadow: 4px 0 24px rgba(0,0,0,0.5); }
  .sidebar.mobile-open { transform: translateX(0); }
  .content { margin-left: 0 !important; padding: 12px !important; }
  .topbar { padding: 10px 12px; }
  .page-title { font-size: 20px !important; }
  .page-sub { font-size: 11px !important; }
  /* Backdrop cuando la sidebar está abierta */
  .sidebar.mobile-open::after { content: ''; position: fixed; top: 0; right: -100vw; bottom: 0; width: 100vw; background: rgba(0,0,0,0.5); z-index: -1; }
  /* Tablas: forzar scroll horizontal con indicador */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap::after { content: '←  desliza →'; display: block; text-align: center; font-size: 10px; color: var(--text3); padding: 4px; opacity: 0.6; }
  table { min-width: 600px; }
  /* Grids inline: colapsar TODOS a 1 columna en mobile */
  .page [style*="display:grid"], .page [style*="display: grid"],
  .page [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Metrics y stat-cards: 2 cols en tablet */
  .metrics { grid-template-columns: 1fr 1fr !important; }
  .ger-grid { grid-template-columns: 1fr 1fr !important; }
  /* Cards y modales más compactos */
  .card { padding: 16px !important; }
  .modal { width: 95vw !important; max-width: 95vw !important; max-height: 95vh !important; }
  /* Botones touch-friendly — mínimo 44px (guía Apple/Google) para no errar el tap */
  .btn { min-height: 44px; padding: 10px 16px; }
  .btn-sm { min-height: 40px; padding: 8px 12px; }
  /* Botón de menú de acciones (⋯) y checkboxes: área de toque cómoda */
  .action-menu-btn { min-width: 40px; min-height: 40px; }
  .builder-row-cb { width: 20px; height: 20px; }
  /* page-header: stack vertical */
  .page-header { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .page-actions { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  /* KPIs 1 columna en móvil chico */
  .metrics { grid-template-columns: 1fr !important; }
  .ger-grid { grid-template-columns: 1fr !important; }
  /* Filtros stack vertical */
  .filtros-row, [class*="filtros"] { flex-direction: column !important; align-items: stretch !important; }
  .filtros-row > *, [class*="filtros"] > * { width: 100% !important; }
  /* Login: 1 columna sin video lateral */
  .login-video-panel { display: none !important; }
  .login-form-panel { width: 100% !important; padding: 24px !important; }
  .login-title { font-size: 24px !important; }
  /* Topbar: ocultar elementos secundarios en móvil */
  .topbar { gap: 4px; flex-wrap: nowrap; padding: 8px 10px; overflow: hidden; }
  .topbar-iconbtn { padding: 6px; font-size: 13px; }
  .topbar-logo-sub { display: none; }
  #topbar-empresa { display: none; }
  .sync-pill { display: none !important; }
  #last-sync-indicator { display: none !important; }
  .topbar-sep { display: none; }
  /* Botón "+ Presupuesto" del topbar en mobile: ocultar (se crea desde la pantalla) */
  #topbar-new-pres { display: none !important; }
  /* Botones A-/A/A+ de cambio de fuente: no esenciales en mobile */
  .topbar-iconbtn[onclick*="changeFontSize"] { display: none; }
  /* PWA install: ocultar también */
  #pwa-install-btn { display: none !important; }
  /* Etiqueta de rol al lado del avatar: ocultar */
  .topbar-role { display: none !important; }
  /* Botón "Salir": más compacto y como ícono */
  .topbar-logout { padding: 6px 8px !important; font-size: 11px !important; }
  /* Compactar la marca */
  .topbar-brand { gap: 4px !important; }
  .topbar-logo { font-size: 12px !important; }
  .topbar-brand-mark { width: 22px !important; height: 22px !important; }
  /* Avatar de usuario más chico */
  #topbar-avatar > div { width: 30px !important; height: 30px !important; font-size: 11px !important; }
  /* Inputs y selects: ancho completo + 16px (iOS). El :not([type]) importa:
     varios inputs del ERP no declaran type (rendiciones, CxC) y un selector
     de atributo no los matchea — Safari les hacía zoom y descuadraba el modal
     justo en el flujo móvil por excelencia (cargar boletas). */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input:not([type]), select, textarea {
    font-size: 16px;
  }
  /* Cards de presupuesto/cliente más compactas */
  .cli-card, .prov-card { padding: 12px !important; }
  .cli-card-header, .prov-card-header { flex-wrap: wrap; gap: 8px; }
  /* Builder: tabs scroll horizontal */
  /* Chat input: textarea más alta */
  .chat-input { min-height: 60px; }
  /* Health gauge: contenedor más chico */
  .health-gauge-svg-wrap svg { max-width: 200px; height: auto; }
  /* Card title más chico */
  .card-title { font-size: 14px !important; }
  /* Inputs de la tabla: alto mínimo cómodo para el dedo */
  .budget-compare input, .budget-compare textarea, .budget-compare select { min-height: 38px; }
}

/* ══ Builder en móvil: la tabla compra/venta se vuelve TARJETAS apiladas ══
   Solo CSS — el JS del builder (renderItems, autosave, cálculos en vivo, drag,
   tiempo real) NO cambia. Cada <tr> pasa a ser una tarjeta y cada <td> una
   línea "Etiqueta · valor" usando el data-label que agregamos en renderItems. */
@media (max-width: 700px) {
  #builder-table-wrap { overflow-x: visible; }
  .budget-compare { min-width: 0 !important; width: 100%; display: block; background: transparent !important; }
  .budget-compare thead { display: none; }
  .budget-compare tbody { display: block; }

  /* Cada fila = tarjeta separada. El borde izquierdo grueso lleva el color del
     estado de margen (verde/ámbar/rojo) — un acento útil, no una barra flotante. */
  .budget-compare tr.item-row, .budget-compare tr.item-row-solo {
    display: block; background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid var(--border2) !important;
    border-radius: 12px; margin: 0 0 18px !important; padding: 2px 14px 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.20);
  }
  .budget-compare tr.mg-green  { border-left-color: var(--green) !important; }
  .budget-compare tr.mg-amber  { border-left-color: var(--amber) !important; }
  .budget-compare tr.mg-red,
  .budget-compare tr.item-row-loss { border-left-color: var(--red) !important; }
  .budget-compare tr.mg-solo   { border-left-color: var(--teal) !important; }

  /* Celdas: línea "etiqueta · valor". SIN los fondos celeste/verde de columna
     (apilados se ven como bloques pesados) — la distinción compra/venta queda
     en la etiqueta y en los separadores de sección. */
  .budget-compare td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    padding: 9px 0 !important; border: none !important; background: transparent !important;
    text-align: right !important; white-space: normal !important; vertical-align: middle !important;
  }
  /* Línea divisoria sutil entre campos (menos en el primero) */
  .budget-compare tr.item-row > td + td:not(.col-divider),
  .budget-compare tr.item-row-solo > td + td:not(.col-divider) { border-top: 1px solid var(--border) !important; }
  .budget-compare td[data-label]::before {
    content: attr(data-label); flex: 0 0 38%; text-align: left;
    font-size: 10.5px; font-weight: 700; color: var(--text3);
    text-transform: uppercase; letter-spacing: .03em; line-height: 1.3;
  }
  .budget-compare td > *:not(.prov-ac-list) { flex: 1 1 auto; min-width: 0; }
  .budget-compare td input, .budget-compare td select {
    width: 100% !important; min-height: 42px;
    background: var(--surface2) !important; border: 1px solid var(--border) !important;
  }
  .budget-compare td textarea {
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    min-height: 42px; background: var(--surface2) !important; border: 1px solid var(--border) !important; text-align: left;
  }
  .budget-compare .prov-ac-wrap { flex: 1 1 auto; }
  /* Lo que no aplica a una tarjeta */
  .budget-compare td.col-divider, .budget-compare td.td-row-handle { display: none !important; }
  .budget-compare tr.item-row-solo td.td-sell { display: none !important; }

  /* Sub-encabezado de sección COMPRA / VENTA (chip de color sobre el 1er campo) */
  .budget-compare td.td-grp-compra, .budget-compare td.td-grp-venta {
    flex-wrap: wrap; margin-top: 6px; padding-top: 14px !important; border-top: none !important; position: relative;
  }
  .budget-compare td.td-grp-compra::after, .budget-compare td.td-grp-venta::after {
    position: absolute; top: -1px; left: 0; font-size: 9.5px; font-weight: 800;
    letter-spacing: .12em; padding: 2px 8px; border-radius: 0 0 7px 0;
  }
  .budget-compare td.td-grp-compra::after { content: '⬇ COMPRA'; background: rgba(34,211,238,0.15); color: var(--teal); }
  .budget-compare td.td-grp-venta::after  { content: '⬆ VENTA';  background: rgba(16,185,129,0.15); color: var(--green); }

  /* Totales: número grande y con color de su lado */
  .budget-compare td[data-item-costo], .budget-compare td[data-item-venta] { font-size: 16px !important; font-weight: 700; }
  .budget-compare td[data-item-costo] > *, .budget-compare td[data-item-costo] { color: var(--teal) !important; }
  .budget-compare td[data-item-venta] > *, .budget-compare td[data-item-venta] { color: var(--green) !important; }

  /* Acciones (duplicar/eliminar) abajo a la derecha */
  .budget-compare td.td-row-actions { justify-content: flex-end; padding: 12px 0 4px !important; }
  .budget-compare td.td-row-actions::before { content: ''; display: none; }
  .budget-compare .row-actions { display: flex; gap: 20px; }
  .budget-compare .row-action-btn { min-width: 44px; min-height: 44px; }
  .budget-compare td.td-tipo { padding: 8px 0 !important; }

  /* Resúmenes (Compras / Resultado / Ventas): apilar en 1 columna, no 3 de costado */
  #builder-totals-wrap .total-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 16px !important; }
  /* "Total con IVA" / "Ganancia neta": el rótulo en una línea y el número a la
     derecha (si no entra, baja solo) — antes se encimaban ("Total$18M con IVA"). */
  .total-block .total-big { flex-wrap: wrap; align-items: baseline; row-gap: 2px; }
  .total-block .total-big span:first-child { white-space: nowrap; }
  .total-block .total-big span:last-child { font-size: 19px; margin-left: auto; }
  /* Notas: una debajo de la otra (no 2 columnas apretadas) */
  #page-builder .form-grid { grid-template-columns: 1fr !important; }
}

/* Combobox código bancario (proveedores) */
.codigo-banco-combo { position: relative; }
.codigo-banco-dropdown {
  position: absolute;
  top: calc(100% + 2px); left: 0; right: 0;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  max-height: 240px; overflow-y: auto;
  z-index: 100;
  display: none;
  box-shadow: var(--shadow-pop);
}
.codigo-banco-dropdown.open { display: block; }
.codigo-banco-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  display: flex; gap: 10px; align-items: baseline;
  border-bottom: 1px solid var(--border);
}
.codigo-banco-option:last-child { border-bottom: none; }
.codigo-banco-option:hover, .codigo-banco-option.active { background: var(--surface3); }
.codigo-banco-option .cb-code {
  font-family: var(--mono);
  color: var(--accent);
  font-weight: 700;
  min-width: 36px;
}
.codigo-banco-option .cb-name { color: var(--text); flex: 1; }
.codigo-banco-option .cb-alias { color: var(--text3); font-size: 11px; }
.codigo-banco-empty {
  color: var(--text3);
  padding: 10px 12px;
  font-size: 12px;
  font-style: italic;
}
.codigo-banco-hint {
  font-size: 11px;
  color: var(--text2);
  margin-top: 4px;
  min-height: 14px;
  font-weight: 500;
}

/* ── B4: restituir el anillo de foco donde un outline:none lo había anulado
   sin dejar sustituto — el teclado quedaba ciego en estos controles. ── */
.com-status:focus-visible,
.cxp-filtros select:focus-visible, .cxp-filtros input[type=text]:focus-visible,
.cxp-cf-search:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-item:focus-visible, .topbar-user:focus-visible, .topbar-search:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px; /* hacia adentro: no se corta con el borde del sidebar/topbar */
}

/* B4: lo que aparece en hover también aparece con foco de teclado */
.gchat-del:focus-visible, .item-drag-handle:focus-visible,
.budget-compare tbody tr:focus-within .item-drag-handle { opacity: 1; }
.notif-item:focus-visible, .cli-card-header:focus-visible, .prov-card-header:focus-visible,
.proc-card:focus-visible, .cal-event:focus-visible, .bi-alert:focus-visible,
tbody tr:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ═══════════════════════════════════════════════════════════════════
   B3 — TESORERÍA EN TARJETAS (móvil). Los tres grids (CxP, CxC y la
   bandeja admin de Rendiciones) comparten .cxp-grid: bajo 900px la tabla
   de 19 columnas (min-width 1560px, inusable en teléfono) se convierte en
   tarjetas apiladas con la etiqueta de cada campo — el mismo patrón
   data-label que el builder ya usaba. En desktop NADA cambia.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .cxp-grid-wrap { max-height: none; overflow: visible; border: none; background: transparent; }
  .cxp-grid { min-width: 0; }
  .cxp-grid thead { display: none; }
  .cxp-grid tbody { display: block; }
  .cxp-grid tbody tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 4px 14px;
  }
  .cxp-grid tbody td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    white-space: normal;
    font-size: 13px;
    text-align: right;
  }
  .cxp-grid tbody tr td:last-child { border-bottom: none; }
  .cxp-grid tbody td::before {
    content: attr(data-label);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text3);
    flex-shrink: 0;
    text-align: left;
  }
  /* Celdas sin etiqueta (checkbox de corrida, drag de orden) = flujos de
     escritorio → fuera en móvil. Los colspan (vacíos/cargando) se quedan. */
  .cxp-grid tbody td:not([data-label]):not([colspan]) { display: none; }
  .cxp-grid tbody td[colspan] { display: block; text-align: center; }
  /* Alta rápida tipo Excel = escritorio (en móvil se crea por el modal) */
  .cxp-grid tr.cxp-add-row { display: none; }
  /* Inputs inline: tamaño táctil y alineados a la derecha del par label-valor */
  .cxp-grid .cxp-cell-in { font-size: 15px; padding: 8px 10px; text-align: right; max-width: 60%; }
  .cxp-grid tbody td[data-label] > * { margin-left: auto; }
}