/* ==========================================================
   Pricing Tool — Corporate Premium Design System
   Versión 2.0 - Mejora de Look & Feel
   ========================================================== */

/* ==========================================================
   1. SISTEMA DE VARIABLES
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Paleta de marca ─── */
  --brand-50: #fff7ed;
  --brand-100: #ffedd5;
  --brand-200: #fed7aa;
  --brand-300: #fdba74;
  --brand-400: #fb923c;
  --brand-500: #ff7a1a;
  --brand-600: #ea580c;
  --brand-700: #c2410c;
  --brand-800: #9a3412;
  --brand-900: #7c2d12;

  /* Alias principales */
  --brand: var(--brand-500);
  --brand-hover: var(--brand-600);
  --brand-active: var(--brand-700);
  --brand-light: var(--brand-100);

  /* ─── Neutros sofisticados ─── */
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;

  /* Alias funcionales */
  --bg: #f8f9fa;
  --surface: #ffffff;
  --surface-2: var(--gray-50);
  --text: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-disabled: var(--gray-400);
  --border: var(--gray-200);
  --border-light: var(--gray-100);

  /* ─── Semánticos ─── */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;

  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;

  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;

  --info-50: #f0f9ff;
  --info-100: #e0f2fe;
  --info-500: #0ea5e9;
  --info-600: #0284c7;
  --info-700: #0369a1;

  /* Alias cortos (compatibilidad) */
  --ok: var(--success-600);
  --warn: var(--warning-500);
  --err: var(--danger-500);

  /* ─── Espaciado (sistema 4px) ─── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── Tipografía ─── */
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

  /* Tamaños */
  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.8125rem;
  /* 13px */
  --text-base: 0.875rem;
  /* 14px */
  --text-md: 1rem;
  /* 16px */
  --text-lg: 1.125rem;
  /* 18px */
  --text-xl: 1.25rem;
  /* 20px */
  --text-2xl: 1.5rem;
  /* 24px */
  --text-3xl: 1.875rem;
  /* 30px */

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;

  /* ─── Sombras refinadas ─── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  /* Sombras con color (brand) */
  --shadow-brand: 0 4px 14px rgba(255, 122, 26, 0.25);
  --shadow-brand-lg: 0 8px 20px rgba(255, 122, 26, 0.3);

  /* Compatibilidad */
  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow-md);

  /* ─── Bordes ─── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Compatibilidad */
  --radius: var(--radius-lg);
  --radius-sm: 8px;

  /* ─── Transiciones ─── */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Compatibilidad */
  --speed: var(--duration-base);
  --bezier: var(--ease-out);

  /* ─── Focus ring ─── */
  --ring-width: 3px;
  --ring-color: rgba(255, 122, 26, 0.25);
  --ring: 0 0 0 var(--ring-width) var(--ring-color);

  /* ─── Z-index ─── */
  --z-dropdown: 9000;
  --z-sticky: 200;
  --z-modal: 9500;
  --z-toast: 9800;
  --z-fab: 10000;
}

/* ==========================================================
   2. RESET Y BASE
   ========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
}

/* ==========================================================
   3. TIPOGRAFÍA
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}

h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

h3 {
  font-size: var(--text-md);
  font-weight: 600;
  margin: var(--space-3) 0 var(--space-2);
}

h4 {
  font-size: var(--text-base);
  font-weight: 600;
}

p {
  margin-bottom: var(--space-3);
}

small {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

a {
  color: var(--brand-600);
  text-decoration: none;
  transition: color var(--duration-fast);
}

a:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.muted {
  color: var(--text-muted);
}

/* ==========================================================
   4. LAYOUT
   ========================================================== */

.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-5);
  max-width: 1720px;
  margin: var(--space-4) auto;
  padding: 0 var(--space-5);
}

@media (max-width: 1280px) {
  .layout {
    grid-template-columns: 200px 1fr;
    gap: var(--space-4);
  }
}

@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 180px 1fr;
  }
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    padding: 0 var(--space-3);
  }

  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: var(--space-2);
  }

  .side-nav {
    flex-direction: row;
    justify-content: space-around;
  }
}

.sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.main {
  min-width: 0;
}

/* ==========================================================
   FAB + MODAL FINANCIERO
   ========================================================== */

.finance-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  user-select: none;
}

.finance-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.finance-fab:active {
  transform: translateY(0);
}

.finance-fab-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.finance-fab-kpis {
  display: flex;
  align-items: center;
  gap: 10px;
}

.finance-fab-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.finance-fab-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
  font-weight: 500;
}

.finance-fab-value {
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.finance-fab-value.margin-good {
  color: #34d399;
}

.finance-fab-value.margin-warning {
  color: #fbbf24;
}

.finance-fab-value.margin-danger {
  color: #f87171;
}

.finance-fab-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

/* Modal */
.finance-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.finance-modal-overlay.hidden {
  display: none;
}

.finance-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  animation: financeModalIn 0.22s ease-out;
}

@keyframes financeModalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.finance-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.finance-modal-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.finance-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--gray-400);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.finance-modal-close:hover {
  color: var(--gray-700);
  background: var(--gray-100);
}

.finance-modal-body {
  padding: 20px 24px 24px;
}

.finance-modal-body .cost-toggles {
  margin-bottom: 16px;
}

.finance-modal-body .discount-row {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.finance-modal-body .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

@media (max-width: 600px) {
  .finance-fab-kpis {
    display: none;
  }

  .finance-fab {
    border-radius: 50%;
    padding: 14px;
  }

  .finance-modal {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    align-self: flex-end;
  }

  .finance-modal-body .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================
   FAB FILTROS HISTORIAL
   ========================================================== */

.history-filter-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 12px 16px;
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  user-select: none;
}

.history-filter-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(59, 130, 246, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.history-filter-fab:active {
  transform: translateY(0);
}

.history-filter-fab.hidden {
  display: none;
}

.history-filter-fab-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.history-filter-fab-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.history-filter-badge {
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  padding: 0 5px;
}

.history-filter-badge.hidden {
  display: none;
}

@media (max-width: 600px) {
  .history-filter-fab-label {
    display: none;
  }

  .history-filter-fab {
    border-radius: 50%;
    padding: 14px;
  }
}

/* ==========================================================
   4.3 FAB IMPORTAR CATÁLOGO
   ========================================================== */

.catalog-import-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 12px 16px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  user-select: none;
}

.catalog-import-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(124, 58, 237, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.catalog-import-fab:active {
  transform: translateY(0);
}

.catalog-import-fab.hidden {
  display: none;
}

.catalog-import-fab-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.catalog-import-fab-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  .catalog-import-fab-label {
    display: none;
  }

  .catalog-import-fab {
    border-radius: 50%;
    padding: 14px;
  }
}

/* ==========================================================
   4.4 COLORES POR PESTAÑA DE CATÁLOGO
   ========================================================== */

/* 📄 Licencias — Azul índigo */
#tab-licenses .card-nested {
  border-left: 3px solid #6366f1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, transparent 100%);
}

#tab-licenses .card-nested h3,
#tab-licenses .card-nested h4 {
  color: #4338ca;
}

/* Búsqueda en catálogo */
#tab-licenses .catalog-search-card {
  border-left: 3px solid #818cf8;
}

/* 🛠️ Servicios — Esmeralda */
#tab-services .card-nested {
  border-left: 3px solid #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, transparent 100%);
}

#tab-services .card-nested h3,
#tab-services .card-nested h4 {
  color: #047857;
}

/* 🎧 Soportes — Ámbar */
#tab-supports .card-nested {
  border-left: 3px solid #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.03) 0%, transparent 100%);
}

#tab-supports .card-nested h3,
#tab-supports .card-nested h4 {
  color: #b45309;
}

/* Tabs con indicador de color */
.tab[data-tab="tab-licenses"].active {
  border-bottom: 3px solid #6366f1;
  color: #4338ca;
}

.tab[data-tab="tab-services"].active {
  border-bottom: 3px solid #10b981;
  color: #047857;
}

.tab[data-tab="tab-supports"].active {
  border-bottom: 3px solid #f59e0b;
  color: #b45309;
}

/* ==========================================================
   5. HEADER
   ========================================================== */

.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.brand-logo {
  height: 48px;
  width: auto;
  display: block;
}

@media (min-width: 1024px) {
  .brand-logo {
    height: 56px;
  }
}

.user-box {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.login-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
}

.login-form input {
  width: 160px;
  padding: var(--space-2) var(--space-3);
}

.login-form button {
  padding: var(--space-2) var(--space-4);
}

/* ==========================================================
   6. FOOTER
   ========================================================== */

.app-footer {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ==========================================================
   7. SIDEBAR / NAVEGACIÓN
   ========================================================== */

.side-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.side-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.side-link:hover {
  background: var(--gray-50);
  color: var(--text);
  border-color: var(--border);
}

.side-link.active {
  background: var(--brand-50);
  color: var(--brand-700);
  border-color: var(--brand-200);
  font-weight: 600;
}

.side-link.active:hover {
  background: var(--brand-100);
}

.side-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 16px;
  flex-shrink: 0;
}

/* ==========================================================
   7.1 TABS / PESTAÑAS
   ========================================================== */

.tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--gray-100);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.tab {
  flex: 1;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: none;
}

.tab:hover {
  background: var(--surface);
  color: var(--text);
  transform: none;
  box-shadow: none;
}

.tab.active {
  background: var(--surface);
  color: var(--brand-600);
  box-shadow: var(--shadow-sm);
}

.tab-pane {
  display: block;
}

.tab-pane.hidden {
  display: none;
}

/* ==========================================================
   8. CARDS
   ========================================================== */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

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

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}

.card-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
}

.card-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* ==========================================================
   8.1 COLORES POR SECCIÓN DE COTIZACIÓN
   ========================================================== */

/* 📋 Nueva Cotización — Azul */
#offer-editor {
  border-left: 4px solid #3b82f6;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(59, 130, 246, 0.01) 100%);
  border-color: rgba(59, 130, 246, 0.2);
}

#offer-editor>.card-header {
  border-bottom-color: rgba(59, 130, 246, 0.15);
}

#offer-editor>.card-header .card-title {
  color: #1e40af;
}

/* ⚙️ Configuración — Violeta */
#card-config {
  border-left: 4px solid #8b5cf6;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.04) 0%, rgba(139, 92, 246, 0.01) 100%);
  border-color: rgba(139, 92, 246, 0.2);
}

#card-config>.card-header {
  border-bottom-color: rgba(139, 92, 246, 0.15);
}

#card-config>.card-header .card-title {
  color: #6d28d9;
}

/* 🔍 Buscar Productos — Ámbar */
#card-search {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, rgba(245, 158, 11, 0.01) 100%);
  border-color: rgba(245, 158, 11, 0.2);
}

#card-search>.card-header {
  border-bottom-color: rgba(245, 158, 11, 0.15);
}

#card-search>.card-header .card-title {
  color: #b45309;
}

/* 📦 Items de la Oferta — Teal */
#card-items {
  border-left: 4px solid #14b8a6;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.04) 0%, rgba(20, 184, 166, 0.01) 100%);
  border-color: rgba(20, 184, 166, 0.2);
}

#card-items>.card-header {
  border-bottom-color: rgba(20, 184, 166, 0.15);
}

#card-items>.card-header .card-title {
  color: #0f766e;
}

/* 📤 Acciones — Naranja */
#card-actions {
  border-left: 4px solid #f97316;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.04) 0%, rgba(249, 115, 22, 0.01) 100%);
  border-color: rgba(249, 115, 22, 0.2);
}

#card-actions>.card-header {
  border-bottom-color: rgba(249, 115, 22, 0.15);
}

#card-actions>.card-header .card-title {
  color: #c2410c;
}

/* 👥 Asignación — Rosa */
#assignOfferCard {
  border-left: 4px solid #ec4899;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.04) 0%, rgba(236, 72, 153, 0.01) 100%);
  border-color: rgba(236, 72, 153, 0.2);
}

#assignOfferCard>.card-header {
  border-bottom-color: rgba(236, 72, 153, 0.15);
}

#assignOfferCard>.card-header .card-title {
  color: #be185d;
}

/* 📝 Observaciones — Slate */
#preventaNotesCard {
  border-left: 4px solid #64748b;
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.04) 0%, rgba(100, 116, 139, 0.01) 100%);
  border-color: rgba(100, 116, 139, 0.2);
}

#preventaNotesCard>.card-header {
  border-bottom-color: rgba(100, 116, 139, 0.15);
}

#preventaNotesCard>.card-header .card-title {
  color: #334155;
}

/* ==========================================================
   9. FORMULARIOS - INPUTS Y SELECTS
   ========================================================== */

input,
select,
textarea {
  width: 100%;
  appearance: none;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--duration-fast),
    box-shadow var(--duration-fast),
    background-color var(--duration-fast);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-disabled);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--gray-300);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-500);
  box-shadow: var(--ring);
}

/* Select con flecha custom */
select {
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px;
}

/* Textarea */
textarea {
  min-height: 100px;
  resize: vertical;
}

/* Checkbox y Radio */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  padding: 0;
  cursor: pointer;
  accent-color: var(--brand-500);
}

/* Estados deshabilitados */
input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  background: var(--gray-50) !important;
  color: var(--text-disabled) !important;
  border-color: var(--border) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

/* Input de porcentaje mejorado */
.pct-group {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.pct-group:focus-within {
  border-color: var(--brand-500);
  box-shadow: var(--ring);
}

.pct-input {
  border: 0 !important;
  width: 70px !important;
  padding: var(--space-2) var(--space-3) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.pct-suffix {
  padding: 0 var(--space-3);
  color: var(--text-muted);
  background: var(--gray-50);
  border-left: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Mini input */
.mini-input {
  max-width: 140px;
}

/* ==========================================================
   10. BOTONES
   ========================================================== */

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  padding: var(--space-3) var(--space-5);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-none);
  text-align: center;
  white-space: nowrap;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  outline: none;

  /* Primary por defecto */
  background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-600) 100%);
  color: white;
  box-shadow: var(--shadow-brand);
}

button:hover {
  background: linear-gradient(180deg, var(--brand-600) 0%, var(--brand-700) 100%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand-lg);
}

button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

button:focus-visible {
  outline: none;
  box-shadow: var(--ring), var(--shadow-brand);
}

/* Botón secundario/ghost */
button.ghost,
button.secondary {
  background: var(--surface);
  color: var(--brand-600);
  border: 1px solid var(--brand-200);
  box-shadow: none;
}

button.ghost:hover,
button.secondary:hover {
  background: var(--brand-50);
  border-color: var(--brand-300);
  transform: translateY(-1px);
}

/* Botón peligro */
button.danger {
  background: linear-gradient(180deg, var(--danger-500) 0%, var(--danger-600) 100%);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

button.danger:hover {
  background: linear-gradient(180deg, var(--danger-600) 0%, var(--danger-700) 100%);
}

/* Botón neutro/terciario */
button.neutral {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  box-shadow: none;
}

button.neutral:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  color: var(--text);
}

/* Botón icono */
.icon-btn {
  width: auto;
  min-width: 36px;
  height: 36px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.icon-btn:hover {
  background: var(--gray-50);
  color: var(--text);
  border-color: var(--gray-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.icon-btn.primary {
  background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-600) 100%);
  color: white;
  border: none;
  box-shadow: var(--shadow-brand);
}

.icon-btn.danger {
  background: var(--surface);
  color: var(--danger-600);
  border-color: var(--danger-200);
}

.icon-btn.danger:hover {
  background: var(--danger-50);
  border-color: var(--danger-300);
}

/* Deshabilitado global */
button:disabled {
  background: var(--gray-100) !important;
  color: var(--text-disabled) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}

/* ==========================================================
   11. BADGES
   ========================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-normal);
  background: var(--gray-100);
  color: var(--text-secondary);
  border: 1px solid var(--gray-200);
}

.badge--approved,
.badge--success {
  background: var(--success-50);
  color: var(--success-700);
  border-color: var(--success-100);
}

.badge--pending,
.badge--warning {
  background: var(--warning-50);
  color: var(--warning-700);
  border-color: var(--warning-100);
}

.badge--rejected,
.badge--danger {
  background: var(--danger-50);
  color: var(--danger-700);
  border-color: var(--danger-100);
}

.badge--issued,
.badge--info {
  background: var(--info-50);
  color: var(--info-700);
  border-color: var(--info-100);
}

.badge--dynamics {
  background: #f3e8ff;
  color: #7c3aed;
  border-color: #ddd6fe;
}

/* Colores de estado legacy */
.ok {
  color: var(--success-600);
}

.warn {
  color: var(--warning-600);
}

.err {
  color: var(--danger-600);
}

/* ==========================================================
   12. TABLAS Y LISTADOS
   ========================================================== */

.results,
.items,
.summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  min-height: 60px;
  overflow-x: auto;
}

.result-row,
.item-row,
.history-row {
  display: grid;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border-light);
  transition: background var(--duration-fast);
}

.result-row:last-child,
.item-row:last-child,
.history-row:last-child {
  border-bottom: none;
}

.result-row:hover,
.item-row:hover,
.history-row:hover {
  background: var(--gray-50);
}

/* Cabecera de tabla */
.history-row.head,
.item-row.head {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Fila seleccionada */
.row-selected {
  background: var(--brand-50) !important;
  border-left: 3px solid var(--brand-500);
}

/* Grid de items - ahora responsive definido en la sección de item-row */

/* Acciones inline */
.actions-flex {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ==========================================================
   13. HISTORIAL
   ========================================================== */

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

.history-table .history-row {
  grid-template-columns: 100px 1.5fr 1fr 2fr 120px 1.2fr 140px;
  gap: var(--space-4);
}

.history-table .history-row>div {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Asignada a: permite wrap */
.history-table .history-row>div:nth-child(6) {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ==========================================================
   13.1 LAYOUT FULLWIDTH (Historial, Usuarios, Dashboard)
   ========================================================== */

.layout--fullwidth {
  grid-template-columns: 220px 1fr !important;
  max-width: none !important;
  padding: 0 var(--space-6) !important;
}

.layout--fullwidth .summary-panel {
  display: none !important;
}

.layout--fullwidth .main {
  max-width: none;
}

/* Tabla del historial en fullwidth - más espaciosa */
.layout--fullwidth .history-table .history-row {
  grid-template-columns: 110px 1.8fr 1.2fr 2.5fr 130px 1.5fr 160px;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-3);
}

.layout--fullwidth .history-table .history-row.head {
  font-size: var(--text-base);
  padding: var(--space-4) var(--space-3);
}

/* Responsive para fullwidth */
@media (max-width: 1400px) {
  .layout--fullwidth {
    padding: 0 var(--space-4) !important;
  }

  .layout--fullwidth .history-table .history-row {
    grid-template-columns: 100px 1.5fr 1fr 2fr 120px 1.2fr 140px;
    gap: var(--space-4);
  }
}

@media (max-width: 1280px) {
  .layout--fullwidth {
    grid-template-columns: 200px 1fr !important;
  }

  .history-table .history-row {
    grid-template-columns: 90px 1.2fr 0.9fr 1.8fr 100px 1fr 130px;
  }
}

@media (max-width: 1024px) {
  .layout--fullwidth {
    grid-template-columns: 180px 1fr !important;
  }
}

/* ==========================================================
   13.2 DASHBOARD EN FULLWIDTH
   ========================================================== */

/* KPIs del dashboard - grid más amplio */
.layout--fullwidth #dashKpis,
.layout--fullwidth .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
}

.layout--fullwidth .kpi {
  padding: var(--space-5);
}

.layout--fullwidth .kpi .value {
  font-size: var(--text-2xl);
}

/* Widgets del dashboard - 2 columnas en fullwidth */
.layout--fullwidth #dashWidgets,
.layout--fullwidth .widgets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.layout--fullwidth #dashWidgets .card,
.layout--fullwidth .widgets-grid .card {
  padding: var(--space-5);
}

/* Tablas dentro de widgets más legibles */
.layout--fullwidth #dashWidgets table {
  font-size: var(--text-sm);
}

.layout--fullwidth #dashWidgets table th,
.layout--fullwidth #dashWidgets table td {
  padding: var(--space-2) var(--space-3);
}

.layout--fullwidth #dashWidgets table th {
  background: var(--gray-50);
  font-weight: 600;
}

.layout--fullwidth #dashWidgets table tr:hover td {
  background: var(--gray-50);
}

/* Filtros del dashboard */
.layout--fullwidth .dashboard-filters,
.layout--fullwidth #section-dashboard .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  margin-bottom: var(--space-5);
}

.layout--fullwidth .dashboard-filters .form-group,
.layout--fullwidth #section-dashboard .form-row .form-group {
  min-width: 140px;
  flex: 1;
  max-width: 200px;
}

/* Responsive dashboard fullwidth */
@media (max-width: 1200px) {

  .layout--fullwidth #dashWidgets,
  .layout--fullwidth .widgets-grid {
    grid-template-columns: 1fr;
  }

  .layout--fullwidth #dashKpis,
  .layout--fullwidth .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* ==========================================================
   13.3 FAB FILTROS DASHBOARD
   ========================================================== */

.dash-filter-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 12px 16px;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(20, 184, 166, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  user-select: none;
}

.dash-filter-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(20, 184, 166, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.dash-filter-fab:active {
  transform: translateY(0);
}

.dash-filter-fab.hidden {
  display: none;
}

.dash-filter-fab-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.dash-filter-fab-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  .dash-filter-fab-label {
    display: none;
  }

  .dash-filter-fab {
    border-radius: 50%;
    padding: 14px;
  }
}

/* ==========================================================
   13.4 KPIs MEJORADOS
   ========================================================== */

/* KPIs auto-ajustables al contenido */
.kpi .value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Colores por estado en KPIs */
.kpi.ok {
  border-left: 3px solid #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, transparent 100%);
}

.kpi.ok .value {
  color: #059669;
}

.kpi.warn {
  border-left: 3px solid #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, transparent 100%);
}

.kpi.warn .value {
  color: #d97706;
}

.kpi.err {
  border-left: 3px solid #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.04) 0%, transparent 100%);
}

.kpi.err .value {
  color: #dc2626;
}

/* Widgets cards profesionales */
.widgets-grid .card {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.widgets-grid .card .card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}

.widgets-grid .card table {
  width: 100%;
  border-collapse: collapse;
}

.widgets-grid .card table th {
  text-align: left;
  padding: 10px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--gray-50);
  border-bottom: 2px solid var(--border);
}

.widgets-grid .card table td {
  padding: 10px 8px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-light);
}

.widgets-grid .card table tbody tr:last-child td {
  border-bottom: none;
}

.widgets-grid .card table tbody tr:hover td {
  background: var(--gray-50);
}

/* ==========================================================
   14. USUARIOS
   ========================================================== */

#usersList.history-table .history-row {
  grid-template-columns: 1fr 1.5fr 120px 60px 160px minmax(200px, auto);
  gap: var(--space-3);
}

#usersList .history-row> :nth-child(4) {
  text-align: center;
}

/* Columna de acciones - no cortar */
#usersList .history-row> :last-child {
  overflow: visible;
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  align-items: center;
}

/* Botones de acciones en usuarios */
#usersList .history-row button {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* Tabla de usuarios responsive */
@media (max-width: 1200px) {
  #usersList.history-table .history-row {
    grid-template-columns: 1fr 1.4fr 100px 50px 140px minmax(180px, auto);
  }
}

@media (max-width: 900px) {
  #usersList.history-table .history-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  #usersList .history-row> :last-child {
    grid-column: span 2;
    justify-content: flex-start;
  }
}

/* ==========================================================
   15. KPIs / RESUMEN
   ========================================================== */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.kpi:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
}

.kpi .title {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}

.kpi .value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--tracking-tight);
}

.kpi .sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.kpi .sub-extra {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 2px;
  opacity: 0.8;
  font-style: italic;
}

/* ====== Dynamics Stats Card ====== */
.dynamics-stats-card {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.dynamics-stats-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.dynamics-stats-card .card-header .btn-sm {
  padding: 8px 16px;
  font-size: 13px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s;
}

.dynamics-stats-card .card-header .btn-sm:hover {
  background: var(--primary-600);
}

.dynamics-stats-card .card-header .btn-sm:disabled {
  background: var(--gray-300);
  cursor: not-allowed;
}

.dynamics-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin-top: var(--space-4);
}

.dynamics-kpi {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-align: center;
}

.dynamics-kpi-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.dynamics-kpi-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dynamics-kpi-open {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.dynamics-kpi-open .dynamics-kpi-value {
  color: #1d4ed8;
}

.dynamics-kpi-won {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.dynamics-kpi-won .dynamics-kpi-value {
  color: #059669;
}

.dynamics-kpi-lost {
  background: #fef2f2;
  border-color: #fecaca;
}

.dynamics-kpi-lost .dynamics-kpi-value {
  color: #dc2626;
}

.dynamics-kpi-value.dynamics-kpi-value {
  background: #f0fdf4;
  border-color: #86efac;
}

.dynamics-kpi-rate {
  background: #faf5ff;
  border-color: #e9d5ff;
}

.dynamics-kpi-rate .dynamics-kpi-value {
  color: #7c3aed;
}

.dynamics-recent-won {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-200);
}

.dynamics-recent-won h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
}

.dynamics-recent-won ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dynamics-recent-won li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #ecfdf5;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  font-size: 13px;
}

.dynamics-recent-won li:last-child {
  margin-bottom: 0;
}

.dynamics-recent-won .won-client {
  font-weight: 500;
  color: var(--text);
}

.dynamics-recent-won .won-value {
  font-weight: 600;
  color: #059669;
}

/* ====== Create Quote Option Toggle ====== */
.create-quote-option {
  margin-top: 16px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.switch-label-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.switch-text-inline {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* KPI con estado */
.kpi.ok {
  background: var(--success-50);
  border-color: var(--success-100);
}

.kpi.ok .value {
  color: var(--success-700);
}

.kpi.warn {
  background: var(--warning-50);
  border-color: var(--warning-100);
}

.kpi.warn .value {
  color: var(--warning-700);
}

.kpi.err {
  background: var(--danger-50);
  border-color: var(--danger-100);
}

.kpi.err .value {
  color: var(--danger-700);
}

/* Opciones del resumen */
.summary-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* ====== Cost Toggles (Switches visuales) ====== */
.cost-toggles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: var(--space-4);
  padding: 12px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}

.cost-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  transition: all 0.2s ease;
}

.cost-toggle-item:has(input:checked) {
  background: #ecfdf5;
  border-color: #10b981;
}

.cost-toggle-item:has(input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  flex: 1;
}

.switch-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.cost-toggle-item:has(input:checked) .switch-text {
  color: #065f46;
}

/* El switch en sí */
.switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.3s;
  border-radius: 24px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch input:checked+.switch-slider {
  background-color: #10b981;
}

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

.switch input:focus+.switch-slider {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

.switch input:disabled+.switch-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Status text */
.switch-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: #fef2f2;
  color: #dc2626;
  white-space: nowrap;
  min-width: 75px;
  text-align: center;
}

.cost-toggle-item:has(input:checked) .switch-status {
  background: #d1fae5;
  color: #065f46;
}

/* Legacy toggle (mantener por compatibilidad) */
.toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.toggle input {
  width: auto;
}

/* Summary card */
.summary-card {
  position: sticky;
  top: var(--space-4);
}

/* Discount row */
.discount-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.discount-row label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.discount-row .pct-group {
  flex: 1;
  max-width: 120px;
}

.discount-row .icon-btn {
  flex-shrink: 0;
}

/* ==========================================================
   16. GRID SYSTEM
   ========================================================== */

.grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid>* {
  grid-column: span 12;
}

@media (min-width: 640px) {
  .grid>* {
    grid-column: span 6;
  }
}

@media (min-width: 1024px) {
  .grid>* {
    grid-column: span 4;
  }
}

/* Grid especializado: Configuración */
.grid-config {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Grid especializado: Búsqueda */
.grid-search {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr 1fr 2fr auto;
  align-items: end;
}

@media (max-width: 1024px) {
  .grid-search {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

/* Grid especializado: Filtros */
.grid-filters {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: end;
}

/* Grid de widgets */
.widgets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* ==========================================================
   16.1 FORMULARIOS - GRUPOS Y FILAS
   ========================================================== */

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

.form-group label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.form-group .field-hint {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
}

/* Campo requerido */
.form-group label .required {
  color: #ef4444;
  font-weight: 600;
}

.form-group-lg {
  flex: 2;
}

.form-group-btn {
  display: flex;
  align-items: flex-end;
}

.form-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-row>.form-group {
  flex: 1;
  min-width: 150px;
}

.form-row>.form-group-lg {
  flex: 2;
  min-width: 250px;
}

.form-row-sm {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
}

.form-row-sm input,
.form-row-sm select {
  flex: 1;
  min-width: 0;
}

.form-row-sm button {
  flex: 0 0 auto;
}

.form-actions {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}

/* Card actions */
.card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

/* Card nested (anidado) */
.card-nested {
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-3) 0;
}

.card-nested h3 {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* Card header inline */
.card-header-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

/* ==========================================================
   16.2 QUOTE SECTION - Cotización
   ========================================================== */

.quote-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.quote-section>.card {
  margin-bottom: 0;
}

/* Badge de oferta */
.offer-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--brand-700);
  margin-top: var(--space-3);
}

.offer-badge:empty {
  display: none;
}

/* Fila de coterminación */
.coterm-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  padding: var(--space-3);
  margin-top: var(--space-3);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border);
}

.coterm-row .form-group {
  flex: 1;
}

/* Grid de acciones */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
}

.actions-grid button {
  justify-content: flex-start;
  padding: var(--space-3) var(--space-4);
}

.actions-grid button span {
  margin-right: var(--space-1);
}

/* Estado de aprobación */
.approval-status {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
}

/* Chips container */
.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* Hint text */
.hint-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* ==========================================================
   17. AUTOCOMPLETE / DROPDOWN
   ========================================================== */

.suggest-dropdown {
  position: fixed;
  z-index: var(--z-dropdown);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: auto;
  max-height: 320px;
}

.suggest-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}

.suggest-item {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--duration-fast);
}

.suggest-item+.suggest-item {
  border-top: 1px solid var(--border-light);
}

.suggest-item:hover,
.suggest-item.is-active {
  background: var(--brand-50);
}

.sugg-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-1);
}

.sugg-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.suggest-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-muted);
}

/* ==========================================================
   18. MODALES
   ========================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
}

.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 480px);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  z-index: calc(var(--z-modal) + 1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: 600;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.modal-close:hover {
  background: var(--gray-100);
  color: var(--text);
}

.modal-body {
  padding: var(--space-5);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--gray-50);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ==========================================================
   19. LOGIN SCREEN
   ========================================================== */

.login-screen,
#loginScreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg) 0%, var(--brand-50) 100%);
}

.login-card {
  width: min(90vw, 420px);
  padding: var(--space-8) !important;
}

.login-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.login-logo {
  width: 80px;
  height: auto;
  margin-bottom: var(--space-4);
}

.login-header h2 {
  margin-bottom: var(--space-2);
}

.login-header p {
  margin-bottom: 0;
}

.login-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-form-fields .form-group {
  margin-bottom: 0;
}

.login-submit {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-4) !important;
}

.login-footer {
  text-align: center;
  margin-top: var(--space-2);
}

.login-footer a {
  font-size: var(--text-sm);
}

/* QR Container */
.qr-container {
  display: flex;
  justify-content: center;
  padding: var(--space-4);
  margin: var(--space-3) 0;
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

#loginScreen .card {
  width: min(90vw, 400px);
  padding: var(--space-8);
  text-align: center;
}

#loginScreen h2 {
  margin-bottom: var(--space-6);
}

#loginScreen .card input {
  margin-bottom: var(--space-3);
}

#loginScreen .card button {
  width: 100%;
  margin-top: var(--space-2);

  width: 100%;
  margin-top: var(--space-2);
}

/* ==========================================================
   20. SERVICIOS Y SOPORTES
   ========================================================== */

/* Tareas de servicio */
.srv-task {
  border: 1px dashed var(--border);
  padding: var(--space-3);
  margin-top: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--gray-50);
}

.srv-task header {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.srv-task header .left {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.srv-tech-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.srv-tech-row select,
.srv-tech-row input {
  min-width: 100px;
}

/* Botones en servicios: más sutiles */
.srv-task .icon-btn,
#srvExpenses .icon-btn {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: var(--space-1) var(--space-2);
}

.srv-task .icon-btn.danger,
#srvExpenses .icon-btn.danger {
  color: var(--danger-600);
}

.srv-task .icon-btn.primary {
  color: var(--info-600);
}

/* Gastos */
#srvExpenses .inline select,
#srvExpenses .inline input {
  width: auto;
  min-width: 140px;
}

#srvExpenses .inline .srv-exp-price {
  min-width: 100px;
}

#srvExpenses .inline .srv-exp-qty {
  min-width: 70px;
}

/* Tabs */
.tab-pane.hidden {
  display: none;
}

/* ==========================================================
   21. APROBACIONES
   ========================================================== */

#apprTypeCard .card {
  border: 1px solid var(--border-light);
}

.appr-type-table {
  width: 100%;
  border-collapse: collapse;
}

.appr-type-table th,
.appr-type-table td {
  border: 1px solid var(--border-light);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
  font-size: var(--text-sm);
}

.appr-type-table th {
  background: var(--gray-50);
  font-weight: 600;
}

.appr-type-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--gray-100);
  font-size: var(--text-xs);
}

.appr-type-ok {
  background: var(--success-50);
  color: var(--success-700);
}

.appr-type-off {
  background: var(--warning-50);
  color: var(--warning-700);
}

/* ==========================================================
   22. ASIGNACIONES
   ========================================================== */

#assignChips .chip-x {
  width: auto !important;
  padding: var(--space-1) var(--space-2) !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text-muted) !important;
  line-height: 1;
  font-weight: 700;
  border-radius: var(--radius-full);
  box-shadow: none !important;
  cursor: pointer;
}

#assignChips .chip-x:hover {
  background: var(--brand-100) !important;
  color: var(--brand-700) !important;
}

/* ==========================================================
   23. BLOQUEO DE OFERTA
   ========================================================== */

.offer-locked input,
.offer-locked select,
.offer-locked textarea,
.offer-locked button[data-edit="1"] {
  pointer-events: none;
  opacity: 0.55;
}

.offer-locked::before {
  content: "🔒 Oferta bloqueada";
  display: block;
  padding: var(--space-2) var(--space-3);
  background: var(--warning-50);
  color: var(--warning-700);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-3);
  text-align: center;
}

/* ==========================================================
   24. COLABORACIÓN / PRESENCIA
   ========================================================== */

.presence-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-1) 0 var(--space-3);
}

.presence-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
}

.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success-500);
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* ==========================================================
   25. ARIA - FAB Y PANEL
   ========================================================== */

/* Variables CotIA */
:root {
  --aria-accent: #FF8A2B;
  --aria-accent-strong: #FF6A00;
  --aria-soft: #FFEBDC;
  --aria-soft-border: #FFC99A;
}

/* FAB */
.aria-fab {
  position: fixed;
  top: 76px;
  right: var(--space-5);
  width: 72px;
  height: 72px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  z-index: var(--z-fab);
  transition: transform var(--duration-fast) var(--ease-out);
}

.aria-fab:hover {
  transform: translateY(-2px);
}

.aria-fab.ia-badge {
  width: 76px;
  height: 76px;
}

.icon-aria {
  width: 100%;
  height: 100%;
  display: block;
}

#ariaFab {
  position: fixed;
  right: var(--space-5);
  top: var(--aria-top, 76px);
  z-index: var(--z-fab);
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  padding: 0;
  width: 72px;
  height: 72px;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}

/* Panel */
.aria-panel,
.aria-modal,
#ariaPanel {
  position: fixed;
  top: 152px;
  right: var(--space-5);
  width: clamp(360px, 28vw, 520px);
  max-width: 94vw;
  max-height: calc(100vh - 180px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--z-fab);
}

.aria-panel.open,
#ariaPanel.open {
  display: flex;
}

@media (min-width: 1280px) {
  #ariaPanel {
    width: 560px;
  }
}

/* Header panel */
.aria-panel header,
#ariaPanel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, #FFF4EB 0%, #FFEBDC 100%);
  border-bottom: 1px solid var(--aria-soft-border);
  font-weight: 600;
  color: #7A4313;
}

.aria-panel header .close,
#ariaPanel header .close,
#ariaClose {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--aria-accent-strong);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.aria-panel header .close:hover,
#ariaClose:hover {
  background: rgba(255, 106, 0, 0.1);
}

/* Chat área */
.aria-chat,
#ariaChat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  height: 340px;
  overflow-y: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
}

/* Mensajes */
.aria-msg {
  display: flex;
  max-width: 85%;
}

.aria-msg.ai {
  justify-content: flex-start;
  margin-right: auto;
}

.aria-msg.user {
  justify-content: flex-end;
  margin-left: auto;
}

.aria-msg .bubble {
  position: relative;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  line-height: var(--leading-relaxed);
  font-size: var(--text-base);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  word-break: break-word;
  white-space: pre-wrap;
}

.aria-msg.ai .bubble {
  background: var(--surface);
  border: 1px solid var(--border);
}

.aria-msg.user .bubble {
  background: var(--aria-soft);
  border: 1px solid var(--aria-soft-border);
}

/* Footer/input */
.aria-panel footer,
#ariaPanel footer {
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.aria-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

#ariaInput {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

#ariaInput:focus {
  border-color: var(--aria-soft-border);
  box-shadow: 0 0 0 3px rgba(255, 154, 77, 0.18);
}

#ariaSend {
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, var(--aria-accent) 0%, var(--aria-accent-strong) 100%);
  color: white;
  font-weight: 600;
}

.aria-mini {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Typing indicator */
.aria-msg.typing .bubble {
  opacity: 0.9;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.aria-emoji {
  display: inline-block;
  font-size: var(--text-md);
  animation: aria-bob 1.8s ease-in-out infinite;
}

.aria-dots .dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 3px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  animation: aria-blink 1.2s infinite;
}

.aria-dots .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.aria-dots .dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* Animaciones CotIA */
@keyframes aria-blink {

  0%,
  20% {
    opacity: 0.2;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-1px);
  }

  100% {
    opacity: 0.2;
    transform: translateY(0);
  }
}

@keyframes aria-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

/* Animaciones del icono */
#ariaFab .ct-eyes {
  transform-origin: 60px 46px;
  animation: ct-blink 5.2s infinite;
}

@keyframes ct-blink {

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

  96% {
    transform: scaleY(0.12);
  }
}

#ariaFab .ct-arm-right {
  transform-box: fill-box;
  transform-origin: 0% 0%;
  animation: ct-wave 7s ease-in-out infinite;
}

@keyframes ct-wave {

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

  86% {
    transform: rotate(18deg);
  }

  88% {
    transform: rotate(0deg);
  }

  90% {
    transform: rotate(14deg);
  }

  92% {
    transform: rotate(0deg);
  }
}

#ariaFab .icon-aria {
  animation: ct-bob 6s ease-in-out infinite;
}

@keyframes ct-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1.2px);
  }
}

@keyframes ct-glint {
  0% {
    opacity: 0.6;
    transform: translate(84px, 26px) rotate(0deg) scale(1);
  }

  50% {
    opacity: 0.95;
    transform: translate(84px, 26px) rotate(12deg) scale(1.05);
  }

  100% {
    opacity: 0.6;
    transform: translate(84px, 26px) rotate(0deg) scale(1);
  }
}

#ariaFab .ct-glint {
  animation: ct-glint 4.6s ease-in-out infinite;
}

/* ==========================================================
   26. ASISTENTE IA (sección legacy)
   ========================================================== */

#navAssistant {
  display: none !important;
}

.ai-chat {
  height: 360px;
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.ai-input {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.ai-input textarea {
  flex: 1;
  min-height: 60px;
}

.ai-input button {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 120px;
}

.ai-msg {
  display: flex;
  margin: var(--space-2) 0;
}

.ai-user {
  justify-content: flex-end;
}

.ai-bot {
  justify-content: flex-start;
}

.ai-bubble {
  max-width: 80%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  white-space: pre-wrap;
}

.ai-user .ai-bubble {
  background: var(--info-50);
  border-color: var(--info-100);
}

.ai-input-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
}

.ai-input-row #aiMessage {
  flex: 1;
  height: 44px;
}

.ai-input-row #aiSend {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 140px;
}

.ai-options-row {
  margin-top: var(--space-2);
}

.ai-options-row label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ==========================================================
   27. UTILIDADES
   ========================================================== */

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

/* ==========================================================
   28. FOCUS VISIBLE (Accesibilidad)
   ========================================================== */

:focus-visible {
  outline: none !important;
  box-shadow: var(--ring) !important;
  border-color: var(--brand-500) !important;
}

/* ==========================================================
   29. RESPONSIVE FINAL
   ========================================================== */

@media (max-width: 480px) {
  .aria-fab.ia-badge {
    width: 60px;
    height: 60px;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .card {
    padding: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================
   30. PRINT STYLES
   ========================================================== */

@media print {

  .sidebar,
  .summary-panel,
  .app-header,
  .app-footer,
  .aria-fab,
  .aria-panel,
  button {
    display: none !important;
  }

  .layout {
    display: block;
  }

  .card {
    box-shadow: none;
    border: 1px solid #000;
    page-break-inside: avoid;
  }
}

/* =============================================================
   FASE 1: ESTADOS DE OFERTAS - Estilos CSS
   Añadir al final de styles.css
   ============================================================= */

/* === Status Badges === */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.status-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Estado: Borrador */
.status-draft {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}

.status-draft::before {
  background: var(--gray-400);
}

/* Estado: Enviada */
.status-sent {
  background: var(--info-50);
  color: var(--info-700);
  border: 1px solid var(--info-200);
}

.status-sent::before {
  background: var(--info-500);
}

/* Estado: En negociación */
.status-negotiation {
  background: var(--warning-50);
  color: var(--warning-700);
  border: 1px solid var(--warning-200);
}

.status-negotiation::before {
  background: var(--warning-500);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Estado: Ganada */
.status-won {
  background: var(--success-50);
  color: var(--success-700);
  border: 1px solid var(--success-200);
}

.status-won::before {
  background: var(--success-500);
}

/* Estado: Perdida */
.status-lost {
  background: var(--danger-50);
  color: var(--danger-700);
  border: 1px solid var(--danger-200);
}

.status-lost::before {
  background: var(--danger-500);
}

/* Estado: Cancelada */
.status-cancelled {
  background: var(--gray-200);
  color: var(--gray-600);
  border: 1px solid var(--gray-300);
  text-decoration: line-through;
}

.status-cancelled::before {
  background: var(--gray-500);
}

/* Animación de punto pulsante */
@keyframes pulse-dot {

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

  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* === Status Selector === */
.status-selector {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.status-selector select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  background: var(--white);
  font-size: var(--text-sm);
  cursor: pointer;
  min-width: 160px;
}

.status-selector select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.1);
}

.status-selector .btn-change-status {
  padding: var(--space-2) var(--space-3);
  background: var(--brand);
  color: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.status-selector .btn-change-status:hover {
  background: var(--brand-dark);
}

.status-selector .btn-change-status:disabled {
  background: var(--gray-300);
  cursor: not-allowed;
}

/* === Status Info Card === */
.status-info-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.status-info-card .status-current {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.status-info-card .status-label {
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.status-info-card .status-actions {
  display: flex;
  gap: var(--space-2);
}

/* === Status Timeline (historial) === */
.status-timeline {
  position: relative;
  padding-left: var(--space-6);
}

.status-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gray-200);
}

.status-timeline-item {
  position: relative;
  padding-bottom: var(--space-4);
}

.status-timeline-item:last-child {
  padding-bottom: 0;
}

.status-timeline-item::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gray-300);
}

.status-timeline-item.current::before {
  background: var(--brand);
  border-color: var(--brand);
}

.status-timeline-item .timeline-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.status-timeline-item .timeline-status {
  font-weight: 600;
  color: var(--gray-900);
}

.status-timeline-item .timeline-arrow {
  color: var(--gray-400);
  font-size: var(--text-xs);
}

.status-timeline-item .timeline-meta {
  font-size: var(--text-xs);
  color: var(--gray-500);
}

.status-timeline-item .timeline-notes {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--gray-50);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--gray-600);
  font-style: italic;
}

/* === Modal de cambio de estado === */
.modal-status-change .status-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.modal-status-change .status-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
}

.modal-status-change .status-option:hover {
  border-color: var(--brand-light);
  background: var(--gray-50);
}

.modal-status-change .status-option.selected {
  border-color: var(--brand);
  background: rgba(255, 122, 26, 0.05);
}

.modal-status-change .status-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.modal-status-change .status-option input[type="radio"] {
  display: none;
}

.modal-status-change .status-option-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 16px;
}

.modal-status-change .status-option-label {
  font-weight: 500;
  color: var(--gray-900);
}

/* Iconos por estado */
.status-option-icon.draft {
  background: var(--gray-100);
}

.status-option-icon.sent {
  background: var(--info-100);
}

.status-option-icon.negotiation {
  background: var(--warning-100);
}

.status-option-icon.won {
  background: var(--success-100);
}

.status-option-icon.lost {
  background: var(--danger-100);
}

.status-option-icon.cancelled {
  background: var(--gray-200);
}

/* === Filtro de estado en historial === */
.filter-status {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.filter-status .status-chip {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--white);
}

.filter-status .status-chip:hover {
  border-color: var(--brand);
}

.filter-status .status-chip.active {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
}

/* === Estado en tarjeta de oferta (historial) === */
.offer-card-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* === Responsive === */
@media (max-width: 768px) {
  .modal-status-change .status-options {
    grid-template-columns: 1fr;
  }

  .status-info-card {
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
  }

  .status-info-card .status-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ==========================================================
   31. FIXES CATÁLOGO - Desplegables y selects
   ========================================================== */

/* Asegurar que los selects del catálogo se vean completos */
#section-catalog select,
#tab-licenses select,
#tab-services select,
#tab-supports select {
  min-width: 140px;
  max-width: 100%;
}

/* Selects en grids del catálogo */
#section-catalog .grid select,
#section-catalog .card-nested select {
  width: 100%;
  min-width: 0;
}

/* Fix para el grid del alta manual de licencias */
#tab-licenses .card-nested .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}

/* Asegurar que los form-group no corten contenido */
#section-catalog .form-group {
  min-width: 0;
  overflow: visible;
}

/* Selects múltiples (aprobadores) - más altura y mejor visualización */
select[multiple] {
  min-height: 120px;
  padding: var(--space-2);
}

select[multiple] option {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
}

select[multiple] option:checked {
  background: var(--brand-100);
  color: var(--brand-700);
}

/* Fix overflow en tab-panes */
.tab-pane {
  overflow: visible;
}

/* Mejorar visualización de selects en servicios */
#tab-services .grid,
#tab-supports .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  align-items: start;
}

/* Asegurar que las cards anidadas no corten contenido */
.card-nested {
  overflow: visible;
}

/* Fix para selects en filas de técnicos */
.srv-tech-row select {
  min-width: 90px;
  flex: 0 0 auto;
}

.srv-tech-row input[type="number"] {
  width: 80px;
  flex: 0 0 auto;
}

/* Gastos - mejor distribución */
#srvExpenses .inline {
  display: grid;
  grid-template-columns: 1fr 100px 70px auto;
  gap: var(--space-2);
  align-items: center;
}

#srvExpenses .inline select {
  min-width: 0;
}

/* Responsive para catálogo */
@media (max-width: 768px) {

  #tab-licenses .card-nested .grid,
  #tab-services .grid,
  #tab-supports .grid {
    grid-template-columns: 1fr;
  }

  #srvExpenses .inline {
    grid-template-columns: 1fr 1fr;
  }

  .srv-tech-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--space-2);
  }

  .srv-tech-row select,
  .srv-tech-row input {
    width: 100%;
    min-width: 0;
  }
}

.login-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: #999;
  font-size: 13px;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ddd;
}

.login-divider span {
  padding: 0 12px;
}

.login-microsoft {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}

.login-microsoft:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

/* --- Login manual (separador + formulario) --- */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border, #e0e0e0);
}
.login-divider span {
  font-size: 12px;
  color: var(--text-muted, #888);
  white-space: nowrap;
}

.local-login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.local-login-form input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg, #fff);
  color: var(--text, #333);
  box-sizing: border-box;
}
.local-login-form input:focus {
  border-color: var(--brand, #1B3A5C);
  outline: none;
  box-shadow: 0 0 0 2px rgba(27, 58, 92, 0.12);
}
.login-error {
  color: #dc2626;
  font-size: 13px;
  text-align: center;
  margin-top: 4px;
}

/* ============================================================
   STATUS WORKFLOW - ESTILOS PARA NUEVO FLUJO DE ESTADOS
   ============================================================ */

/* === BADGES DE ESTADO === */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: color-mix(in srgb, var(--status-color) 15%, white);
  color: var(--status-color);
  border: 1px solid color-mix(in srgb, var(--status-color) 30%, white);
}

.status-badge .status-icon {
  font-size: 14px;
}

.status-badge .status-desc {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.8;
  margin-left: 4px;
}

/* Estados específicos */
.status-draft {
  --status-color: #6b7280;
}

.status-assigned {
  --status-color: #3b82f6;
}

.status-pending_approval {
  --status-color: #f59e0b;
}

.status-approved {
  --status-color: #10b981;
}

.status-rejected {
  --status-color: #ef4444;
}

.status-in_dynamics {
  --status-color: #8b5cf6;
}

.status-duplicated {
  --status-color: #9ca3af;
}

/* === MODAL DE CAMBIO DE ESTADO === */
.status-options-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.status-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff;
}

.status-option:hover:not(.disabled) {
  border-color: #ff7a1a;
  background: #fff9f5;
}

.status-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f9fafb;
}

.status-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #ff7a1a;
}

.status-option-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status-option-icon {
  font-size: 20px;
}

.status-option-label {
  font-weight: 600;
  color: #111827;
}

.status-option-hint {
  font-size: 12px;
  color: #6b7280;
}

.status-final-message {
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.status-final-message p {
  margin: 0 0 8px 0;
  color: #374151;
}

.status-final-message p:last-child {
  margin-bottom: 0;
}

/* === TIMELINE DE HISTORIAL === */
.status-timeline {
  position: relative;
  padding-left: 24px;
}

.status-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #e5e7eb;
}

.timeline-item {
  position: relative;
  padding-bottom: 16px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #e5e7eb;
}

.timeline-content {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
}

.timeline-item.timeline-rejection .timeline-content {
  background: #fef2f2;
  border-color: #fecaca;
}

.timeline-header {
  font-weight: 600;
  color: #111827;
}

.timeline-transition {
  font-size: 14px;
}

.timeline-meta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

.timeline-notes {
  margin-top: 8px;
  padding: 8px;
  background: #fff;
  border-radius: 6px;
  font-size: 13px;
  color: #374151;
}

.timeline-notes.rejection-reason {
  background: #fee2e2;
  color: #991b1b;
}

/* === BANNER DE RECHAZO === */
.rejection-banner {
  padding: 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  margin: 16px 0;
}

.rejection-banner strong {
  color: #991b1b;
  display: block;
  margin-bottom: 8px;
}

.rejection-banner p {
  margin: 0 0 8px 0;
  color: #7f1d1d;
}

.rejection-banner small {
  color: #9ca3af;
  font-size: 12px;
}

/* === BOTONES DE ACCIÓN POR ROL === */
.workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.btn-workflow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-workflow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-assign {
  background: #3b82f6;
  color: #fff;
}

.btn-assign:hover:not(:disabled) {
  background: #2563eb;
}

.btn-request-approval {
  background: #f59e0b;
  color: #fff;
}

.btn-request-approval:hover:not(:disabled) {
  background: #d97706;
}

.btn-approve-direct {
  background: #10b981;
  color: #fff;
}

.btn-approve-direct:hover:not(:disabled) {
  background: #059669;
}

.btn-export {
  background: #ff7a1a;
  color: #fff;
}

.btn-export:hover:not(:disabled) {
  background: #e66a0a;
}

.btn-export:disabled {
  background: #9ca3af;
}

/* === INFO DE ESTADO === */
.status-info-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

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

.status-description {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 12px;
}

.status-actions {
  display: flex;
  gap: 8px;
}

/* === TARJETA DE ASIGNACIÓN MEJORADA === */
.assign-card {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 16px;
}

.assign-card.hidden-by-status {
  display: none;
}

.assign-card h4 {
  margin: 0 0 12px 0;
  color: #0369a1;
  font-size: 14px;
}

.assign-hint {
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
  .status-option {
    padding: 10px 12px;
  }

  .workflow-actions {
    flex-direction: column;
  }

  .btn-workflow {
    width: 100%;
    justify-content: center;
  }

  .timeline-meta {
    flex-direction: column;
    gap: 4px;
  }
}

/* ============================================================
   AÑADIDOS PARA NUEVO FLUJO - COMPLEMENTOS
   ============================================================ */

/* Data-status en status-info-card (borde izquierdo por estado) */
.status-info-card[data-status="draft"] {
  border-left: 4px solid #6b7280;
}

.status-info-card[data-status="assigned"] {
  border-left: 4px solid #3b82f6;
}

.status-info-card[data-status="pending_approval"] {
  border-left: 4px solid #f59e0b;
}

.status-info-card[data-status="approved"] {
  border-left: 4px solid #10b981;
}

.status-info-card[data-status="rejected"] {
  border-left: 4px solid #ef4444;
}

/* Mensaje de rechazo en tarjeta de estado */
.rejection-message {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
  color: #991b1b;
  font-size: 14px;
}

.rejection-message strong {
  color: #7f1d1d;
}

/* Badges para historial (tabla) */
.badge--draft {
  background: #f3f4f6;
  color: #374151;
}

.badge--assigned {
  background: #dbeafe;
  color: #1d4ed8;
}

.badge--pending_approval {
  background: #fef3c7;
  color: #92400e;
}

.badge--approved {
  background: #d1fae5;
  color: #065f46;
}

.badge--rejected {
  background: #fee2e2;
  color: #991b1b;
}

.badge--in_dynamics {
  background: #ede9fe;
  color: #5b21b6;
}

.badge--duplicated {
  background: #f3f4f6;
  color: #4b5563;
}

/* Botones específicos de acción */
.btn-warning,
#btnRequestApproval {
  background: #f59e0b;
  color: white;
  border: none;
}

.btn-warning:hover,
#btnRequestApproval:hover {
  background: #d97706;
}

.btn-success,
#btnApproveDirect {
  background: #10b981;
  color: white;
  border: none;
}

.btn-success:hover,
#btnApproveDirect:hover {
  background: #059669;
}

/* Status chips en filtros de historial */
.status-chip[data-status="assigned"] {
  --chip-color: #3b82f6;
}

.status-chip[data-status="pending_approval"] {
  --chip-color: #f59e0b;
}

.status-chip[data-status="approved"] {
  --chip-color: #10b981;
}

.status-chip[data-status="rejected"] {
  --chip-color: #ef4444;
}

/* Oferta bloqueada visual */
.offer-locked .status-info-card {
  background: #f9fafb;
}

.offer-locked .status-info-card::after {
  content: '🔒 Bloqueada';
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 11px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ============================================================
   FILTROS DE ESTADO EN HISTORIAL - CHIPS
   ============================================================ */

.filter-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
}

.status-chip:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.status-chip.active {
  border-color: #ff7a1a;
  background: #fff7ed;
  color: #ea580c;
}

/* Colores específicos por estado cuando están activos */
.status-chip[data-status="draft"].active,
.status-chip[data-qstatus="draft"].active {
  border-color: #6b7280;
  background: #f3f4f6;
  color: #374151;
}

.status-chip[data-status="assigned"].active,
.status-chip[data-qstatus="assigned"].active {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1d4ed8;
}

.status-chip[data-status="pending_approval"].active,
.status-chip[data-qstatus="pending_approval"].active {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #b45309;
}

.status-chip[data-status="approved"].active,
.status-chip[data-qstatus="approved"].active {
  border-color: #10b981;
  background: #ecfdf5;
  color: #047857;
}

.status-chip[data-status="rejected"].active,
.status-chip[data-qstatus="rejected"].active {
  border-color: #ef4444;
  background: #fef2f2;
  color: #b91c1c;
}

.status-chip[data-status="in_dynamics"].active,
.status-chip[data-qstatus="in_dynamics"].active {
  border-color: #8b5cf6;
  background: #f5f3ff;
  color: #6d28d9;
}

/* Quick filters bar encima de la tabla */
.history-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--space-3);
}

/* ============================================================
   FILTRO DE ASIGNADO EN HISTORIAL
   ============================================================ */

#histAssignedFilterGroup {
  max-width: 300px;
}

#histAssignedTo {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}

#histAssignedTo:focus {
  outline: none;
  border-color: #ff7a1a;
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.1);
}

/* Acciones en tabla más compactas con iconos */
.history-row .actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.history-row .actions .icon-btn {
  padding: 4px 8px;
  font-size: 14px;
  min-width: auto;
}

/* Aviso para comerciales */
.commercial-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: #92400e;
}

.commercial-notice .notice-icon {
  font-size: 1.1rem;
}

/* Aviso de oferta bloqueada (aprobada/en Dynamics) */
.locked-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #ef4444;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: #991b1b;
}

.locked-notice .notice-icon {
  font-size: 1.2rem;
}

.locked-notice strong {
  color: #dc2626;
}

/* Campos en modo solo lectura */
.readonly-field {
  background-color: #f3f4f6 !important;
  cursor: not-allowed;
  opacity: 0.7;
}

/* ============================================================
   AUDIT LOGS (ISO 27001)
   ============================================================ */

.audit-table .history-row {
  grid-template-columns: 160px 80px 100px 140px 180px 1fr 80px;
  font-size: 0.85rem;
}

.audit-table .history-row.head {
  font-weight: 600;
  background: var(--gray-100);
}

.audit-table .log-level {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.audit-table .log-level.info {
  background: #dbeafe;
  color: #1e40af;
}

.audit-table .log-level.warn {
  background: #fef3c7;
  color: #92400e;
}

.audit-table .log-level.error {
  background: #fee2e2;
  color: #991b1b;
}

.audit-table .log-level.critical {
  background: #fecaca;
  color: #7f1d1d;
  font-weight: 700;
}

.audit-table .log-category {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  background: var(--gray-200);
}

.audit-table .log-details {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.audit-table .log-details:hover {
  white-space: normal;
  overflow: visible;
  background: var(--gray-50);
  position: relative;
  z-index: 10;
}

.audit-table .log-expand {
  cursor: pointer;
  color: var(--primary);
}

.pagination-info {
  font-size: 0.85rem;
  color: var(--gray-600);
}

#auditStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

#auditStats .kpi {
  background: var(--gray-50);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}

#auditStats .kpi strong {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-600);
  margin-bottom: 4px;
}

#auditStats .kpi div {
  font-size: 1.25rem;
  font-weight: 600;
}

/* ============================================================
   ITEMS - EDICIÓN INLINE DE PRECIOS
   ============================================================ */

.item-row-header {
  font-weight: 600;
  background: var(--gray-100);
  font-size: 0.8rem;
  border-bottom: 2px solid var(--gray-300);
}

.item-row-header>div {
  padding: 8px 6px;
  text-align: center;
}

.item-row {
  grid-template-columns: minmax(140px, 2fr) minmax(70px, 0.8fr) 65px 85px 90px 100px 80px 80px 80px 70px;
  align-items: start;
  gap: 0;
  border-bottom: 1px solid var(--gray-200);
  transition: background-color 0.2s ease;
}

/* Responsive: ocultar columnas menos importantes en pantallas medianas */
@media (max-width: 1400px) {
  .item-row {
    grid-template-columns: minmax(120px, 2fr) minmax(60px, 0.7fr) 60px 80px 85px 95px 75px 75px 75px 65px;
  }

  .item-row .col-inicio,
  .item-row .col-fin {
    display: none;
  }

  .item-row {
    grid-template-columns: minmax(120px, 2.5fr) minmax(60px, 0.8fr) 60px 80px 85px 95px 75px 65px;
  }
}

@media (max-width: 1100px) {
  .item-row .col-vendor {
    display: none;
  }

  .item-row {
    grid-template-columns: minmax(120px, 3fr) 55px 75px 80px 90px 70px 60px;
  }
}

@media (max-width: 900px) {
  .item-row .col-pvd {
    display: none;
  }

  .item-row {
    grid-template-columns: minmax(100px, 3fr) 50px 75px 85px 70px 55px;
  }
}

@media (max-width: 700px) {
  .item-row {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px;
    position: relative;
  }

  .item-row>div {
    border-left: none;
    padding: 3px 0;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .item-row>div::before {
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-500);
    min-width: 70px;
    text-transform: uppercase;
  }

  .item-row .col-producto::before {
    content: '';
  }

  .item-row .col-vendor::before {
    content: 'Vendor';
  }

  .item-row .col-qty::before {
    content: 'Cant.';
  }

  .item-row .col-pvd::before {
    content: 'PVD';
  }

  .item-row .col-pvp::before {
    content: 'PVP';
  }

  .item-row .col-total::before {
    content: 'Total';
  }

  .item-row .col-inicio::before {
    content: 'Inicio';
  }

  .item-row .col-fin::before {
    content: 'Fin';
  }

  .item-row .col-dto::before {
    content: 'Dto';
  }

  .item-row .col-actions::before {
    content: '';
  }

  .item-row .col-vendor,
  .item-row .col-inicio,
  .item-row .col-fin,
  .item-row .col-pvd {
    display: flex;
  }

  .item-row-header {
    display: none;
  }

  .item-row .col-actions {
    justify-content: flex-end;
    border-top: 1px solid var(--gray-200);
    margin-top: 4px;
    padding-top: 8px;
  }
}

.item-row.selectable:hover {
  background-color: var(--gray-50);
}

/* Todas las columnas con borde izquierdo excepto la primera */
.item-row>div {
  padding: 10px 8px;
  border-left: 1px solid var(--gray-200);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.item-row>div:first-child {
  border-left: none;
}

/* Columnas específicas */
.item-row .col-producto {
  align-items: flex-start;
  word-break: break-word;
}

.item-row .col-vendor,
.item-row .col-qty,
.item-row .col-pvd,
.item-row .col-pvp,
.item-row .col-total,
.item-row .col-inicio,
.item-row .col-fin,
.item-row .col-dto {
  align-items: center;
  text-align: center;
}

.item-row .col-actions {
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
}

/* Colores por margen de línea */
.item-row.margin-good {
  background-color: rgba(16, 185, 129, 0.08);
  border-left: 4px solid #10b981;
}

.item-row.margin-good:hover {
  background-color: rgba(16, 185, 129, 0.15);
}

.item-row.margin-warning {
  background-color: rgba(245, 158, 11, 0.08);
  border-left: 4px solid #f59e0b;
}

.item-row.margin-warning:hover {
  background-color: rgba(245, 158, 11, 0.15);
}

.item-row.margin-danger {
  background-color: rgba(239, 68, 68, 0.08);
  border-left: 4px solid #ef4444;
}

.item-row.margin-danger:hover {
  background-color: rgba(239, 68, 68, 0.15);
}

/* El header no tiene color de margen */
.item-row-header.margin-good,
.item-row-header.margin-warning,
.item-row-header.margin-danger {
  background: var(--gray-100);
  border-left: none;
}

.inline-price {
  width: 100%;
  max-width: 85px;
  min-width: 55px;
  padding: 4px 6px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  font-size: 0.85rem;
  text-align: right;
  box-sizing: border-box;
}

.inline-price:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Input de cantidad editable */
.inline-qty {
  width: 100%;
  max-width: 70px;
  min-width: 40px;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  font-size: 0.9rem;
  text-align: center;
  font-weight: 500;
  box-sizing: border-box;
}

.inline-qty:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.qty-suffix {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-left: 4px;
}

/* Botones de mover items */
.move-btn {
  padding: 2px 6px !important;
  font-size: 0.7rem !important;
  line-height: 1;
  min-width: auto;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s;
}

.move-btn:hover:not(:disabled) {
  background: var(--gray-200);
}

.move-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Contenedor de acciones de item */
.item-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.qty-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--gray-100);
  border-radius: 4px;
  font-size: 0.85rem;
}

.qty-badge.qty-devices {
  background: #dbeafe;
  color: #1e40af;
}

.pct-group-sm {
  display: inline-flex;
  align-items: center;
}

.pct-group-sm .pct-input {
  width: 55px;
  padding: 4px 4px;
  font-size: 0.85rem;
}

.pct-group-sm .pct-suffix {
  font-size: 0.8rem;
}

/* ============================================================
   SERVICIOS - LAYOUT REORGANIZADO
   ============================================================ */

.srv-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}

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

  .srv-sidebar {
    order: -1;
  }
}

.srv-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.srv-sidebar {
  position: sticky;
  top: 16px;
}

.srv-preview-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
}

.srv-preview-card h4 {
  margin: 0 0 12px 0;
  color: #166534;
}

.srv-preview-grid {
  display: grid;
  gap: 8px;
}

.srv-preview-grid>div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.9rem;
}

.srv-preview-grid>div:last-child {
  border-bottom: none;
  font-weight: 600;
  font-size: 1rem;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 2px solid #166534;
}

.srv-preview-actions {
  margin-top: 16px;
}

.srv-preview-actions button {
  width: 100%;
}

/* Formulario añadir tarea */
.srv-add-task-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.srv-tech-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 10px;
  background: var(--gray-50);
  border-radius: 8px;
}

.srv-tech-form .form-group {
  margin: 0;
}

.srv-tech-form label {
  font-size: 0.75rem;
  color: var(--gray-600);
}

.srv-new-task-techs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
}

.srv-new-task-techs:empty::before {
  content: 'Añade técnicos usando el formulario de arriba';
  color: var(--gray-400);
  font-size: 0.85rem;
  font-style: italic;
}

.srv-tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 20px;
  font-size: 0.85rem;
}

.srv-tech-chip button {
  background: none;
  border: none;
  color: #1e40af;
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.srv-tech-chip button:hover {
  color: #dc2626;
}

/* Gastos */
.srv-expenses-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.srv-expense-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  background: var(--gray-50);
  border-radius: 6px;
}

.srv-expense-row select {
  flex: 2;
}

.srv-expense-row input {
  width: 80px;
}

/* Plantillas */
.srv-templates-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.srv-templates-row select {
  flex: 1;
  min-width: 180px;
}

.srv-templates-row input {
  flex: 1;
  min-width: 150px;
}

/* Panel resumen del servicio */
.srv-summary-panel {
  margin-top: 16px;
  background: #fefce8;
  border: 1px solid #fde047;
}

.srv-summary-panel h4 {
  margin: 0;
  color: #854d0e;
}

.srv-tasks-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.srv-empty-state {
  color: var(--gray-500);
  font-style: italic;
  padding: 16px;
  text-align: center;
}

.srv-task-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid #fde047;
}

.srv-task-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.srv-task-item-name {
  font-weight: 600;
  color: #854d0e;
}

.srv-task-item-techs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.srv-task-item-techs .srv-tech-chip {
  font-size: 0.8rem;
  padding: 2px 8px;
  background: #fef3c7;
  color: #92400e;
}

.srv-task-item-cost {
  text-align: right;
  font-size: 0.9rem;
}

.srv-task-item-cost strong {
  display: block;
  font-size: 1rem;
  color: #166534;
}

.srv-task-item-actions {
  display: flex;
  gap: 4px;
  align-items: flex-start;
}

.srv-task-item-actions button {
  padding: 4px 8px;
  font-size: 0.8rem;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

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

/* ============================================================
   SOPORTES - LAYOUT REORGANIZADO
   ============================================================ */

.sup-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}

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

  .sup-sidebar {
    order: -1;
  }
}

.sup-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sup-sidebar {
  position: sticky;
  top: 16px;
}

.sup-preview-card {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
}

.sup-preview-card h4 {
  margin: 0 0 12px 0;
  color: #1e40af;
}

.sup-preview-grid {
  display: grid;
  gap: 8px;
}

.sup-preview-grid>div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.9rem;
}

.sup-preview-grid>div:last-child {
  border-bottom: none;
  font-weight: 600;
  font-size: 1rem;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 2px solid #1e40af;
}

.sup-preview-actions {
  margin-top: 16px;
}

.sup-preview-actions button {
  width: 100%;
}

.sup-templates-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.sup-templates-row select {
  flex: 1;
  min-width: 180px;
}

.sup-templates-row input {
  flex: 1;
  min-width: 150px;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

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

/* ============================================================
   MODAL: Subir a Dynamics
   ============================================================ */

#dynamicsUploadModal .modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#dynamicsUploadModal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--gray-200);
}

#dynamicsUploadModal .modal-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

#dynamicsUploadModal .modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-500);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}

#dynamicsUploadModal .modal-close:hover {
  color: var(--gray-900);
}

#dynamicsUploadModal .modal-body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
}

#dynamicsUploadModal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}

/* Spinner de carga */
#dynamicsUploadModal .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

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

/* Select de oportunidades */
#opportunitySelect {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#opportunitySelect:hover {
  border-color: var(--gray-400);
}

#opportunitySelect:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* Info de oportunidad seleccionada */
#opportunityInfo {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

#opportunityInfo p {
  margin: 0.35rem 0;
  font-size: 0.9rem;
  color: var(--gray-700);
}

#opportunityInfo strong {
  color: var(--gray-900);
}

/* Estados vacío y error */
#dynamicsEmpty,
#dynamicsError {
  padding: var(--space-6);
  text-align: center;
}

#dynamicsEmpty p,
#dynamicsError p {
  margin: 0.5rem 0;
}

#dynamicsError {
  color: var(--danger);
}

/* Badge de cliente vinculado */
.client-dynamics-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--success-light, #dcfce7);
  color: var(--success, #16a34a);
  font-weight: 500;
}

.client-dynamics-badge.local {
  background: var(--warning-light, #fef3c7);
  color: var(--warning, #d97706);
}

/* Botón subir a Dynamics en la card de estado */
#uploadToDynamicsBtn {
  margin-left: auto;
}

#uploadToDynamicsBtn.btn-success {
  background: var(--success, #16a34a);
  color: white;
  border-color: var(--success, #16a34a);
}

#uploadToDynamicsBtn.btn-success:hover {
  background: var(--success-dark, #15803d);
}

#uploadToDynamicsBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Spinner pequeño para botón */
.spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}

/* Dropdown de clientes (autocompletado Dynamics) */
.client-autocomplete-wrapper {
  position: relative;
}

.client-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 300px;
  overflow-y: auto;
  z-index: 9000;
  display: none;
}

.client-dropdown.open {
  display: block;
}

.client-dropdown-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.1s;
}

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

.client-dropdown-item:hover,
.client-dropdown-item.selected {
  background: var(--gray-50);
}

.client-dropdown-item .client-name {
  font-weight: 500;
  color: var(--gray-900);
}

.client-dropdown-item .client-meta {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-top: 2px;
}

.client-dropdown-loading,
.client-dropdown-empty {
  padding: 1rem;
  text-align: center;
  color: var(--gray-500);
  font-size: 0.9rem;
}

.client-dropdown-create {
  padding: 0.75rem 1rem;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  cursor: pointer;
  color: var(--primary);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.client-dropdown-create:hover {
  background: var(--gray-100);
}

.client-dropdown-create .icon {
  font-size: 1rem;
}

/* ============================================================
   MODAL: Subir a Dynamics
   ============================================================ */

/* Loading state */
.dynamics-loading {
  text-align: center;
  padding: 2rem;
}

.dynamics-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 1rem;
}

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

/* Empty state */
.dynamics-empty {
  text-align: center;
  padding: 2rem;
}

.dynamics-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

/* Error state */
.dynamics-error {
  text-align: center;
  padding: 2rem;
  color: var(--danger);
}

.dynamics-error-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

/* Opportunity info card */
.opportunity-info {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.opportunity-info p {
  margin: 0.35rem 0;
  font-size: 0.9rem;
}

/* Select de oportunidades */
#opportunitySelect {
  width: 100%;
  padding: 0.625rem;
  font-size: 0.9rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
}

#opportunitySelect:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

/* Botón deshabilitado */
#btnConfirmUpload:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Spinner en botón */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}

/* Badge cliente Dynamics */
.client-dynamics-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  font-weight: 500;
  margin-left: 6px;
}

.client-dynamics-badge.local {
  background: #fef3c7;
  color: #d97706;
}

/* Botón subir a Dynamics - estado success */
#uploadToDynamicsBtn.success {
  background: #16a34a;
  color: white;
  border-color: #16a34a;
}

/* ============================================================
   DYNAMICS AUTOCOMPLETE - Búsqueda de clientes (MEJORADO)
   ============================================================ */

/* Wrapper del input con autocompletado */
.client-autocomplete-wrapper {
  position: relative;
  width: 100%;
}

/* El input de cliente necesita espacio para el badge */
#clientName {
  padding-right: 100px;
  /* Espacio para el badge */
}

/* Badge que indica la fuente del cliente */
#clientSourceBadge {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.client-dynamics-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  border: 1px solid #93c5fd;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.client-dynamics-badge.local {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border-color: #fcd34d;
}

/* Dropdown de resultados */
.client-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.1);
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;

  /* Oculto por defecto */
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.client-dropdown.open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Scrollbar personalizado */
.client-dropdown::-webkit-scrollbar {
  width: 6px;
}

.client-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.client-dropdown::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.client-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* Items del dropdown */
.client-dropdown-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.1s ease;
}

.client-dropdown-item:last-of-type {
  border-bottom: none;
}

.client-dropdown-item:hover,
.client-dropdown-item.selected {
  background: var(--brand-50);
}

.client-dropdown-item.selected {
  background: var(--brand-100);
}

.client-dropdown-item .client-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-900);
  margin-bottom: 3px;
}

.client-dropdown-item .client-meta {
  font-size: 12px;
  color: var(--gray-500);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-dropdown-item .client-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Estado de carga */
.client-dropdown-loading {
  padding: 20px 16px;
  text-align: center;
  color: var(--gray-500);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.client-dropdown-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--gray-300);
  border-top-color: var(--brand-500);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Estado vacío */
.client-dropdown-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--gray-500);
  font-size: 13px;
}

.client-dropdown-empty::before {
  content: '🔍';
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
  opacity: 0.5;
}

/* Opción de crear nuevo cliente */
.client-dropdown-create {
  padding: 12px 16px;
  background: var(--gray-50);
  cursor: pointer;
  color: var(--brand-600);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--gray-200);
  transition: background 0.1s ease;
  position: sticky;
  bottom: 0;
}

.client-dropdown-create:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

.client-dropdown-create .icon {
  font-size: 16px;
  font-weight: 700;
}

/* Animación de spin para loading */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Estado vacío mejorado - Solo Dynamics */
.client-dropdown-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--gray-600);
}

.client-dropdown-empty .empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.client-dropdown-empty .empty-text {
  font-size: 14px;
  color: var(--gray-700);
  margin-bottom: 4px;
}

.client-dropdown-empty .empty-hint {
  font-size: 12px;
  color: var(--gray-500);
}

/* Botón Dynamics subido */
.btn-success {
  background: var(--success, #22c55e) !important;
  color: white !important;
  border-color: var(--success, #22c55e) !important;
}

.btn-success:hover:not(:disabled) {
  background: #16a34a !important;
  cursor: pointer;
}

/* Botón de éxito (oferta exportada/subida) */
.btn-success,
button.btn-success {
  background: #10b981 !important;
  color: white !important;
  border-color: #10b981 !important;
}

.btn-success:hover {
  background: #059669 !important;
  border-color: #059669 !important;
}

/* Spinner para botones */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}

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

/* ===== RESPONSIVE: Mantener diseño desktop con scroll ===== */
@media screen and (max-width: 1200px) {

  html,
  body {
    min-width: 1200px;
    overflow-x: auto;
  }

  .container,
  .main-content,
  .app-container {
    min-width: 1200px;
  }
}

/* Asegurar que las tablas no colapsen */
table {
  min-width: 800px;
}

/* Asegurar scroll en contenedores principales */
.table-container,
.data-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   MODAL: Gestión de Equipo (Jerarquía Manager)
   ============================================================ */

#teamModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

#teamModal.show {
  opacity: 1;
  visibility: visible;
}

#teamModal .team-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 90%;
  max-width: 520px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95);
  transition: transform 0.2s;
}

#teamModal.show .team-modal {
  transform: scale(1);
}

#teamModal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

#teamModal .modal-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

#teamModal .modal-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

#teamModal .modal-close:hover {
  background: #e5e7eb;
  color: #111827;
}

#teamModal .modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

#teamModal .team-section {
  margin-bottom: 24px;
}

#teamModal .team-section:last-child {
  margin-bottom: 0;
}

#teamModal .team-section h4 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px 0;
}

/* Lista de miembros del equipo */
#teamModal .team-members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}

#teamModal .team-members-list .muted {
  color: #9ca3af;
  font-size: 0.875rem;
  padding: 16px;
  text-align: center;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px dashed #d1d5db;
}

#teamModal .team-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transition: border-color 0.15s;
}

#teamModal .team-member:hover {
  border-color: #d1d5db;
}

#teamModal .team-member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#teamModal .team-member-name {
  font-weight: 500;
  color: #111827;
  font-size: 0.9375rem;
}

#teamModal .team-member-email {
  font-size: 0.75rem;
  color: #6b7280;
}

#teamModal .team-member .badge {
  display: inline-block;
  font-size: 0.6875rem;
  padding: 2px 8px;
  margin-top: 4px;
  width: fit-content;
  background: #e5e7eb;
  color: #374151;
  border-radius: 9999px;
  font-weight: 500;
}

#teamModal .team-member .badge.badge--warning {
  background: #fef3c7;
  color: #92400e;
}

#teamModal .team-member .badge.badge--info {
  background: #dbeafe;
  color: #1e40af;
}

/* Botón quitar miembro */
#teamModal .team-member .btn-danger {
  background: #fee2e2;
  color: #dc2626;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 0.875rem;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.15s;
}

#teamModal .team-member .btn-danger:hover {
  background: #fecaca;
}

/* Fila para añadir miembros */
#teamModal .team-add-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

#teamModal .team-add-select {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  background: #fff;
  color: #111827;
  cursor: pointer;
}

#teamModal .team-add-select:focus {
  outline: none;
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

/* Botón añadir */
#teamModal .team-add-row .btn {
  padding: 10px 16px;
  font-size: 0.875rem;
  border-radius: 8px;
  background: #f97316;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s;
}

#teamModal .team-add-row .btn:hover {
  background: #ea580c;
}

#teamModal .team-add-row .btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
}

/* ============================================================
   SISTEMA DE NOTIFICACIONES
   ============================================================ */

.notifications-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
}

.notifications-bell {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  position: relative;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}

.notifications-bell:hover {
  background: rgba(0, 0, 0, 0.05);
}

.notifications-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #ef4444;
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid white;
}

.notifications-badge.hidden {
  display: none;
}

.notifications-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  max-width: 90vw;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  overflow: hidden;
  margin-top: 8px;
}

.notifications-dropdown.hidden {
  display: none;
}

.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.notifications-header strong {
  font-size: 0.9375rem;
  color: #111827;
}

.notifications-header .btn-link {
  background: none;
  border: none;
  color: #f97316;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.notifications-header .btn-link:hover {
  background: #fff7ed;
}

.notifications-list {
  max-height: 400px;
  overflow-y: auto;
}

.notifications-empty {
  padding: 32px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid #f3f4f6;
}

.notification-item:hover {
  background: #f9fafb;
}

.notification-item.unread {
  background: #fffbeb;
}

.notification-item.unread:hover {
  background: #fef3c7;
}

.notification-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: 8px;
}

.notification-item.unread .notification-icon {
  background: #fde68a;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-weight: 500;
  color: #111827;
  font-size: 0.875rem;
  margin-bottom: 2px;
}

.notification-message {
  color: #6b7280;
  font-size: 0.8125rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-time {
  color: #9ca3af;
  font-size: 0.75rem;
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 480px) {
  .notifications-dropdown {
    width: calc(100vw - 20px);
    right: -10px;
  }
}

/* ============================================================
   MODAL GENÉRICO (modal-backdrop)
   ============================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.modal-backdrop.show {
  display: flex;
}

.modal-backdrop .modal {
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  margin: auto;
  animation: modalSlideIn 0.2s ease-out;
}

.modal-backdrop .modal.modal-md {
  max-width: 600px;
}

.modal-backdrop .modal.modal-lg {
  max-width: 750px;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-backdrop .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}

.modal-backdrop .modal-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
}

.modal-backdrop .modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}

.modal-backdrop .modal-close:hover {
  color: var(--gray-900);
  background: var(--gray-200);
}

.modal-backdrop .modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  max-height: calc(100vh - 200px);
  background: #ffffff;
}

.modal-backdrop .modal-body .form-group {
  margin-bottom: 16px;
}

.modal-backdrop .modal-body .form-group:last-child {
  margin-bottom: 0;
}

.modal-backdrop .modal-body .form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--gray-700);
}

.modal-backdrop .modal-body .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.modal-backdrop .modal-body .form-row .form-group {
  margin-bottom: 0;
}

.modal-backdrop .modal-body .form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #ffffff;
}

.modal-backdrop .modal-body .form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.15);
}

.modal-backdrop .modal-body textarea.form-control {
  resize: vertical;
  min-height: 70px;
}

.modal-backdrop .modal-body select.form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.modal-backdrop .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}

/* Responsive para modal */
@media (max-width: 600px) {
  .modal-backdrop {
    padding: 10px;
  }

  .modal-backdrop .modal-body .form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .modal-backdrop .modal {
    max-width: 100%;
  }

  .modal-backdrop .modal-body {
    max-height: calc(100vh - 160px);
  }
}

/* ============================================================
   MODAL EDITAR SERVICIO (tareas, técnicos, gastos)
   ============================================================ */

#editServiceModal .modal {
  background: #ffffff !important;
}

#editServiceModal .modal-body {
  padding: 20px;
  background: #ffffff;
}

.edit-srv-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
}

.edit-srv-section h4 {
  margin: 0 0 16px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-count {
  background: var(--primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.edit-srv-new-task {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.edit-srv-new-task .form-group {
  margin-bottom: 12px;
}

.edit-srv-new-task .form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.edit-srv-tech-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--gray-300);
}

.edit-srv-tech-form>label {
  font-size: 0.8125rem;
  color: var(--gray-600);
  margin-bottom: 10px;
  display: block;
  font-weight: 500;
}

.edit-srv-tech-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.edit-srv-tech-form .form-group {
  flex: 1;
  min-width: 100px;
}

.edit-srv-tech-form .form-group label {
  font-size: 0.75rem;
  margin-bottom: 4px;
}

.edit-srv-tech-form .form-control {
  padding: 8px 10px;
  font-size: 0.875rem;
}

.edit-srv-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  min-height: 36px;
  padding: 8px;
  background: white;
  border-radius: 8px;
  border: 1px dashed var(--gray-300);
}

.edit-srv-tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff7ed;
  color: #c2410c;
  padding: 6px 10px 6px 12px;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid #fed7aa;
}

.edit-srv-tech-chip .chip-remove {
  background: none;
  border: none;
  color: #c2410c;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.edit-srv-tech-chip .chip-remove:hover {
  opacity: 1;
}

.edit-srv-task-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--gray-300);
}

.edit-srv-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.edit-srv-task-item {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  transition: box-shadow 0.15s;
}

.edit-srv-task-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.edit-srv-task-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.edit-srv-task-header .edit-srv-task-name {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 8px 12px;
}

.edit-srv-task-totals {
  font-size: 0.8125rem;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
}

.edit-srv-task-techs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.edit-srv-tech-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.edit-srv-tech-row .form-control {
  padding: 6px 10px;
  font-size: 0.8125rem;
}

.edit-srv-tech-row select.form-control {
  min-width: 80px;
  flex: 1;
}

.edit-srv-tech-row input[type="number"].form-control {
  width: 70px;
  flex: none;
}

.edit-srv-task-add-tech {
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
}

.edit-srv-task-add-tech .btn {
  font-size: 0.75rem;
  padding: 6px 12px;
}

.edit-srv-expenses-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.edit-srv-expense-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-50);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--gray-200);
}

.edit-srv-expense-row select.form-control {
  flex: 1;
  min-width: 140px;
  padding: 8px 30px 8px 10px;
  font-size: 0.8125rem;
}

.edit-srv-expense-row input.form-control {
  padding: 8px 10px;
  font-size: 0.875rem;
}

.edit-srv-expense-row span {
  color: var(--gray-500);
  font-size: 0.875rem;
}

.edit-srv-expense-total {
  font-weight: 600;
  min-width: 90px;
  text-align: right;
  color: var(--gray-900);
}

.edit-srv-preview {
  margin-top: 24px;
  padding: 16px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-radius: 12px;
  border: 1px solid #fed7aa;
}

.edit-srv-preview h4 {
  margin: 0 0 12px 0;
  color: #c2410c;
  font-size: 0.9375rem;
}

.edit-srv-totals {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.edit-srv-totals div {
  font-size: 0.9375rem;
  color: var(--gray-700);
}

.edit-srv-totals span {
  font-weight: 600;
  color: var(--gray-900);
}

.edit-srv-empty {
  color: var(--gray-400);
  font-size: 0.8125rem;
  font-style: italic;
  padding: 8px;
  text-align: center;
}

.btn-sm {
  padding: 8px 14px;
  font-size: 0.8125rem;
  border-radius: 8px;
}

.btn-icon-sm {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  font-size: 0.9rem;
  border-radius: 6px;
  transition: background 0.15s;
  line-height: 1;
}

.btn-icon-sm:hover {
  background: var(--gray-200);
}

.btn-icon-sm.danger:hover {
  background: #fee2e2;
}

/* Responsive para editar servicio */
@media (max-width: 600px) {
  .edit-srv-tech-form .form-row {
    flex-direction: column;
    gap: 12px;
  }

  .edit-srv-tech-form .form-group {
    width: 100%;
  }

  .edit-srv-expense-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .edit-srv-expense-row select.form-control {
    width: 100%;
    flex: none;
  }

  .edit-srv-totals {
    flex-direction: column;
    gap: 8px;
  }

  .edit-srv-task-header {
    flex-wrap: wrap;
  }

  .edit-srv-tech-row {
    flex-wrap: wrap;
  }

  .edit-srv-tech-row select.form-control {
    min-width: 100px;
  }
}

/* ============================================================
   MODAL GESTIÓN CATÁLOGO DE LICENCIAS
   ============================================================ */

.lic-catalog-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.lic-stat-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.lic-stat-card.warning {
  background: #fef3c7;
  border-color: #fcd34d;
}

.lic-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.lic-stat-card.warning .lic-stat-value {
  color: #b45309;
}

.lic-stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 4px;
}

.lic-catalog-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.lic-catalog-section h4 {
  margin: 0 0 12px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

.lic-vendors-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.lic-vendor-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.lic-vendor-name {
  flex: 1;
  font-weight: 500;
  color: #111827;
}

.lic-vendor-count {
  font-size: 0.875rem;
  color: #6b7280;
}

.lic-duplicates-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 250px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.lic-duplicate-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  font-size: 0.875rem;
}

.lic-dup-vendor {
  font-weight: 500;
  color: #92400e;
  min-width: 100px;
}

.lic-dup-sku {
  flex: 1;
  color: #78350f;
  font-family: monospace;
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lic-dup-count {
  background: #b45309;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.lic-duplicates-actions {
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
}

.lic-empty {
  text-align: center;
  padding: 20px;
  color: #9ca3af;
  font-style: italic;
}

.lic-more {
  text-align: center;
  padding: 8px;
  color: #6b7280;
  font-size: 0.8125rem;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e5e7eb;
  border-top-color: #f97316;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 12px;
}

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

.text-center {
  text-align: center;
}

.text-muted {
  color: #6b7280;
  font-size: 0.875rem;
}

/* Filtros detectados en búsqueda inteligente */
.detected-filter {
  display: inline-block;
  background: #dbeafe;
  color: #1e40af;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 4px;
}

.suggest-detected {
  padding: 6px 12px;
  background: #eff6ff;
  border-bottom: 1px solid #dbeafe;
  font-size: 0.75rem;
  color: #1e40af;
  font-weight: 500;
}

/* Buscador inteligente */
.smart-search-container {
  padding: 0 0 16px 0;
}

.smart-search-input-wrapper {
  display: flex;
  gap: 0;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.smart-search-input-wrapper:focus-within {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

.smart-search-input {
  flex: 1;
  border: none;
  padding: 14px 18px;
  font-size: 1rem;
  outline: none;
  background: #ffffff;
}

.smart-search-input::placeholder {
  color: #9ca3af;
}

.smart-search-input:disabled {
  background: #f9fafb;
  color: #9ca3af;
}

.smart-search-btn {
  border: none;
  background: #f97316;
  color: white;
  padding: 14px 20px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s;
}

.smart-search-btn:hover:not(:disabled) {
  background: #ea580c;
}

.smart-search-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
}

.smart-search-hint {
  margin: 10px 0 0 0;
  font-size: 0.8125rem;
  color: #6b7280;
}

.smart-search-hint strong {
  color: #374151;
  background: #f3f4f6;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}

@media (max-width: 600px) {
  .lic-catalog-stats {
    grid-template-columns: 1fr;
  }

  .lic-duplicate-item {
    flex-wrap: wrap;
  }

  .lic-dup-sku {
    width: 100%;
    order: 3;
  }
}

/* ============================================================
   OCULTAR SPINNERS DE INPUTS NUMÉRICOS EN ITEMS DE OFERTA
   ============================================================ */

/* Chrome, Safari, Edge, Opera */
#itemsList input[type="number"]::-webkit-outer-spin-button,
#itemsList input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#itemsList input[type="number"] {
  -moz-appearance: textfield;
}

/* ============================================================
   SELECTOR DE PERÍODO DEL PRECIO EN ITEMS
   ============================================================ */

.inline-select {
  padding: 2px 4px;
  font-size: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  margin-left: 4px;
}

.inline-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(255, 122, 26, 0.1);
}

.price-period-select {
  width: auto;
  min-width: 70px;
}

.price-period-badge {
  display: inline-block;
  font-size: 0.7rem;
  color: #6b7280;
  background: #f3f4f6;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
}

/* ============================================================
   CARDS COLAPSABLES
   ============================================================ */

.card.collapsible {
  overflow: hidden;
}

.card.collapsible .card-header {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}

.card.collapsible .card-header:hover {
  background-color: #f9fafb;
}

.card.collapsible .card-header .card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card.collapsible .card-header .collapse-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 0.75rem;
  color: #6b7280;
  transition: transform 0.2s ease;
  margin-left: auto;
}

.card.collapsible.collapsed .collapse-icon {
  transform: rotate(-90deg);
}

.card.collapsible .card-body {
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
  overflow: visible;
  /* Permitir que los dropdowns se vean */
}

.card.collapsible.collapsed .card-body {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  /* Solo ocultar cuando está colapsado */
}

.card.collapsible .card-body {
  max-height: none;
  /* Sin límite cuando está expandido */
  opacity: 1;
}

/* Cards deshabilitadas (no se pueden abrir todavía) */
.card.collapsible.disabled-section {
  opacity: 0.6;
}

.card.collapsible.disabled-section .card-header {
  cursor: not-allowed;
}

.card.collapsible.disabled-section .card-header:hover {
  background-color: transparent;
}

.card.collapsible.disabled-section .card-title::after {
  content: '🔒';
  font-size: 0.75rem;
  margin-left: 8px;
}

/* (summary-panel eliminado — ahora usa finance-fab + finance-modal) */

/* Ocultar estilos de disabled que ya no usamos */
.card.collapsible.disabled-section {
  opacity: 1;
}

.card.collapsible.disabled-section .card-header {
  cursor: pointer;
}

.card.collapsible.disabled-section .card-title::after {
  content: none;
}

/* ============================================================
   FIX: Asegurar que todos los dropdowns estén por encima
   ============================================================ */

/* El wrapper del autocomplete necesita position relative */
.client-autocomplete-wrapper {
  position: relative;
  z-index: 1;
}

/* Cuando el dropdown está abierto, elevar el wrapper */
.client-autocomplete-wrapper:has(.client-dropdown.open) {
  z-index: 9999;
}

/* Todos los dropdowns deben tener z-index muy alto */
.client-dropdown.open,
.suggest-dropdown,
[class*="dropdown"].open,
[class*="autocomplete"] .open {
  z-index: 9999 !important;
}

/* Las cards colapsables no deben bloquear dropdowns */
.card.collapsible {
  overflow: visible;
}

.card.collapsible .card-body {
  overflow: visible;
}

.card.collapsible.collapsed .card-body {
  overflow: hidden;
  max-height: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
}

/* ============================================================
   PREVISUALIZACIÓN DE OFERTA
   ============================================================ */

.preview-container {
  font-size: 14px;
}

.preview-client-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.preview-client-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--gray-200);
}

.preview-client-header h2 {
  margin: 0;
  font-size: 18px;
  color: var(--gray-900);
}

.preview-offer-code {
  font-size: 12px;
  color: var(--gray-500);
  font-family: monospace;
  margin-top: 4px;
}

.preview-client-type {
  padding: 6px 14px;
  background: var(--blue-100);
  color: var(--blue-700);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.preview-client-info {
  padding: 12px 20px;
}

.preview-info-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-100);
}

.preview-info-row:last-child {
  border-bottom: none;
}

.preview-info-row span {
  color: var(--gray-600);
}

/* Secciones de items */
.preview-section {
  margin-bottom: 20px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
}

.preview-section-header {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
}

.preview-section-header.bg-purple {
  background: #ede9fe;
  color: #5b21b6;
}

.preview-section-header.bg-blue {
  background: #dbeafe;
  color: #1e40af;
}

.preview-section-header.bg-green {
  background: #d1fae5;
  color: #065f46;
}

.preview-count {
  font-weight: 400;
  color: var(--gray-500);
}

.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}

/* Wrapper para scroll horizontal en la previsualización */
.preview-section {
  overflow-x: auto;
}

.preview-table th {
  padding: 12px 10px;
  background: var(--gray-100);
  font-weight: 600;
  color: var(--gray-700);
  border-bottom: 2px solid var(--gray-300);
  border-right: 1px solid var(--gray-200);
  text-align: left;
}

.preview-table th:last-child {
  border-right: none;
}

.preview-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--gray-100);
  border-right: 1px solid var(--gray-100);
  vertical-align: middle;
}

.preview-table td:last-child {
  border-right: none;
}

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

.preview-table tbody tr.margin-good {
  background: rgba(16, 185, 129, 0.08);
  border-left: 4px solid #10b981;
}

.preview-table tbody tr.margin-warning {
  background: rgba(245, 158, 11, 0.08);
  border-left: 4px solid #f59e0b;
}

.preview-table tbody tr.margin-danger {
  background: rgba(239, 68, 68, 0.08);
  border-left: 4px solid #ef4444;
}

.preview-table tbody tr.margin-good:hover {
  background: rgba(16, 185, 129, 0.15);
}

.preview-table tbody tr.margin-warning:hover {
  background: rgba(245, 158, 11, 0.15);
}

.preview-table tbody tr.margin-danger:hover {
  background: rgba(239, 68, 68, 0.15);
}

.preview-table tfoot td {
  padding: 12px 10px;
  background: var(--gray-100);
  border-top: 2px solid var(--gray-300);
  font-weight: 600;
}

.preview-meta {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}

.preview-cell {
  padding: 10px 12px;
}

.dto-badge {
  background: #fef3c7;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.margin-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.margin-badge.margin-good {
  background: #ecfdf5;
  color: #059669;
}

.margin-badge.margin-warning {
  background: #fffbeb;
  color: #d97706;
}

.margin-badge.margin-danger {
  background: #fef2f2;
  color: #dc2626;
}

/* Observaciones */
.preview-notes {
  background: #fffbeb;
  border: 2px solid #fde68a;
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}

.preview-notes-header {
  padding: 12px 16px;
  background: #fef3c7;
  font-weight: 600;
  color: #92400e;
  font-size: 13px;
}

.preview-notes-content {
  padding: 16px;
  color: #78350f;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Resumen financiero */
.preview-summary {
  background: var(--gray-50);
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
}

.preview-summary-header {
  padding: 14px 20px;
  background: #1e3a5f;
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.preview-summary-content {
  padding: 20px;
}

.preview-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-200);
}

.preview-summary-row span {
  color: var(--gray-600);
}

.preview-summary-row.preview-total {
  border-top: 2px solid var(--gray-300);
  border-bottom: none;
  padding-top: 14px;
  margin-top: 4px;
}

.preview-summary-row.preview-total span,
.preview-summary-row.preview-total strong {
  font-size: 16px;
  color: var(--gray-900);
}

.preview-margin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  margin-top: 16px;
  border-radius: 10px;
}

.preview-margin.margin-good {
  background: #ecfdf5;
  border: 2px solid #a7f3d0;
}

.preview-margin.margin-warning {
  background: #fffbeb;
  border: 2px solid #fde68a;
}

.preview-margin.margin-danger {
  background: #fef2f2;
  border: 2px solid #fecaca;
}

.preview-margin span {
  font-weight: 600;
  color: var(--gray-700);
}

.preview-margin-value {
  display: flex;
  align-items: center;
  gap: 12px;
}

.preview-margin-value strong {
  font-size: 20px;
}

.preview-margin.margin-good .preview-margin-value strong {
  color: #059669;
}

.preview-margin.margin-warning .preview-margin-value strong {
  color: #d97706;
}

.preview-margin.margin-danger .preview-margin-value strong {
  color: #dc2626;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-red {
  color: #dc2626;
}

/* ============================================================
   CONSOLIDACIONES - Precio unitario consolidado
   ============================================================ */

.consolidations-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid var(--gray-200);
}

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

.consolidations-header h4 {
  margin: 0;
  font-size: 15px;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 8px;
}

.consolidations-header .badge {
  background: var(--primary);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.consolidations-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.consolidation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  transition: all 0.2s;
}

.consolidation-item:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.consolidation-item.locked {
  background: #fef3c7;
  border-color: #fde68a;
}

.consolidation-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.consolidation-item-name {
  font-weight: 600;
  color: var(--gray-800);
}

.consolidation-item-meta {
  font-size: 12px;
  color: var(--gray-500);
}

.consolidation-item-actions {
  display: flex;
  gap: 8px;
}

.consolidation-item-actions .btn {
  padding: 6px 10px;
  font-size: 12px;
}

.consolidations-hint {
  margin-top: 12px;
  font-size: 12px;
}

/* Modal de consolidación */
.consolidation-costs-card,
.consolidation-licenses-card,
.consolidation-preview-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}

.consolidation-costs-card h4,
.consolidation-licenses-card h4,
.consolidation-preview-card h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--gray-700);
}

.costs-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cost-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: white;
  border-radius: 6px;
}

.cost-row span {
  color: var(--gray-600);
}

.cost-row strong {
  color: var(--gray-800);
}

.cost-row.total {
  background: var(--primary);
  margin-top: 8px;
}

.cost-row.total span,
.cost-row.total strong {
  color: white;
  font-weight: 600;
}

/* Lista de licencias para consolidar */
.licenses-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.license-consolidation-row {
  display: grid;
  grid-template-columns: auto 1fr 120px 100px 120px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  transition: all 0.2s;
}

.license-consolidation-row.selected {
  border-color: var(--primary);
  background: #eff6ff;
}

.license-consolidation-row.exceeds-limit {
  border-color: #ef4444;
  background: #fef2f2;
}

.license-check {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.license-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.license-name {
  font-weight: 500;
  color: var(--gray-800);
  font-size: 13px;
}

.license-details {
  font-size: 11px;
  color: var(--gray-500);
}

.license-weight-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.license-weight-input input {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  text-align: right;
  font-size: 13px;
}

.license-weight-input input:focus {
  border-color: var(--primary);
  outline: none;
}

.license-limit-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.license-limit-input input {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  text-align: right;
  font-size: 13px;
}

.license-limit-input input::placeholder {
  color: var(--gray-400);
}

.license-result {
  text-align: right;
}

.license-result-price {
  font-weight: 600;
  color: var(--gray-800);
  font-size: 14px;
}

.license-result-status {
  font-size: 11px;
}

.license-result-status.ok {
  color: #059669;
}

.license-result-status.exceeded {
  color: #dc2626;
  font-weight: 600;
}

/* Barra de peso total */
.weight-total-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--gray-100);
  border-radius: 8px;
  margin-top: 16px;
}

.weight-total-bar span {
  color: var(--gray-600);
}

.weight-total-bar strong {
  font-size: 18px;
  color: var(--gray-900);
}

.weight-status {
  margin-left: auto;
  font-size: 13px;
}

.weight-status.valid {
  color: #059669;
}

.weight-status.invalid {
  color: #dc2626;
}

/* Preview de consolidación */
.consolidation-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 12px;
}

.consolidation-preview-table th {
  padding: 10px;
  background: var(--gray-100);
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--gray-300);
}

.consolidation-preview-table td {
  padding: 10px;
  border-bottom: 1px solid var(--gray-200);
}

.consolidation-preview-table tr.total-row {
  background: var(--gray-50);
  font-weight: 600;
}

.consolidation-preview-table tr.total-row td {
  border-top: 2px solid var(--gray-300);
}

.consolidation-margin-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  margin-top: 16px;
  border-radius: 10px;
}

.consolidation-margin-summary.good {
  background: #ecfdf5;
  border: 2px solid #a7f3d0;
}

.consolidation-margin-summary.warning {
  background: #fffbeb;
  border: 2px solid #fde68a;
}

.consolidation-margin-summary.danger {
  background: #fef2f2;
  border: 2px solid #fecaca;
}

.consolidation-margin-summary .label {
  font-weight: 600;
  color: var(--gray-700);
}

.consolidation-margin-summary .value {
  font-size: 20px;
  font-weight: 700;
}

.consolidation-margin-summary.good .value {
  color: #059669;
}

.consolidation-margin-summary.warning .value {
  color: #d97706;
}

.consolidation-margin-summary.danger .value {
  color: #dc2626;
}

/* Botón deshabilitado en consolidación */
.consolidation-item-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Badge de bloqueado */
.locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

/* Selector de consolidación para aprobación */
.consolidation-selector {
  background: #eff6ff;
  border: 2px solid #3b82f6;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.consolidation-selector label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

.consolidation-selector select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  font-size: 14px;
}

.consolidation-selector .hint {
  margin-top: 8px;
  margin-bottom: 0;
}

.required-badge {
  background: #dc2626;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.selected-badge {
  background: #059669;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 8px;
}

.consolidation-item.selected {
  border-color: #059669;
  background: #ecfdf5;
}

.consolidation-item.selected .consolidation-item-name {
  color: #059669;
}

/* Checkboxes de partidas para consolidación */
.costs-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cost-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.cost-checkbox:hover {
  border-color: var(--primary);
}

.cost-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.cost-checkbox input[type="checkbox"]:checked+.cost-label {
  color: var(--primary);
  font-weight: 600;
}

.cost-checkbox .cost-label {
  flex: 1;
  color: var(--gray-700);
}

.cost-checkbox strong {
  color: var(--gray-800);
  min-width: 100px;
  text-align: right;
}

.cost-checkbox:has(input:checked) {
  background: #eff6ff;
  border-color: var(--primary);
}

.cost-checkbox:has(input:not(:checked)) strong {
  color: var(--gray-400);
  text-decoration: line-through;
}

/* === OFFER NOTES CHAT === */
.offer-notes-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.offer-note-item {
  background: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  transition: background 0.15s;
}

.offer-note-item:hover {
  background: #f8fafc;
}

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

.offer-note-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.85rem;
}

.offer-note-role-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.offer-note-role {
  font-weight: 400;
  font-size: 0.75rem;
  opacity: 0.7;
  padding: 1px 6px;
  background: #f3f4f6;
  border-radius: 4px;
}

.offer-note-time {
  font-size: 0.75rem;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.note-delete-btn {
  background: none;
  border: none;
  color: #d1d5db;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}

.note-delete-btn:hover {
  color: #ef4444;
}

.offer-note-message {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.offer-notes-input textarea {
  font-size: 0.9rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  transition: border-color 0.15s;
}

.offer-notes-input textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* Preview multiplicador */
.preview-mult {
  background: #dbeafe;
  color: #1e40af;
  font-size: 0.75rem;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}

/* Multiplicador de contrato en tabla de items */
.mult-badge {
  display: inline-block;
  font-size: 0.7rem;
  color: #7c3aed;
  background: #f3e8ff;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
  font-weight: 600;
}

/* ============================================================
   MODO MANTENIMIENTO
   ============================================================ */
#maintenanceScreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.maintenance-container {
  text-align: center;
  max-width: 480px;
  padding: 48px 40px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.maintenance-icon {
  font-size: 72px;
  margin-bottom: 20px;
  line-height: 1;
}

.maintenance-container h1 {
  color: #1e3a5f;
  font-size: 24px;
  margin: 0 0 16px;
}

.maintenance-container p {
  color: #64748b;
  line-height: 1.7;
  margin: 0 0 8px;
  font-size: 15px;
}

.maintenance-hint {
  font-size: 13px !important;
  color: #9ca3af !important;
  margin-top: 20px !important;
}

.maintenance-container .btn {
  margin-top: 24px;
}

/* Toggle mantenimiento en admin */
.maintenance-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 16px;
}

.maintenance-toggle-card.active {
  border-color: #f59e0b;
  background: #fffbeb;
}

.maintenance-toggle-info h4 {
  margin: 0 0 4px;
  font-size: 14px;
  color: #1f2937;
}

.maintenance-toggle-info p {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

.maintenance-toggle-info .status-active {
  color: #d97706;
  font-weight: 600;
}

.maintenance-toggle-info .status-inactive {
  color: #059669;
}

/* ============================================================
   RESUMEN FINANCIERO - Nuevo diseño por secciones
   ============================================================ */
.summary-section {
  margin-bottom: 16px;
}

.summary-section-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  padding: 6px 0;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 10px;
}

.summary-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.summary-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.15s;
}

.summary-card.compact {
  padding: 10px 14px;
}

.summary-card.highlight {
  border-width: 2px;
}

.summary-card.ok {
  border-color: #22c55e;
  background: #f0fdf4;
}

.summary-card.warn {
  border-color: #f59e0b;
  background: #fffbeb;
}

.summary-card.err {
  border-color: #ef4444;
  background: #fef2f2;
}

.summary-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.summary-value {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.summary-card.compact .summary-value {
  font-size: 16px;
}

.summary-sub {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}

.summary-discount-bar {
  display: flex;
  gap: 16px;
  padding: 6px 12px;
  background: #fef3c7;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #92400e;
  font-weight: 500;
}

/* Costes y ajustes */
.summary-costs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-cost-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  font-size: 13px;
}

.summary-cost-row.active {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.summary-cost-row.consolidated {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.summary-cost-row.rebate {
  background: #f5f3ff;
  border-color: #e9d5ff;
}

.summary-cost-label {
  flex: 1;
  color: #374151;
  font-weight: 500;
}

.summary-cost-value {
  font-weight: 700;
  color: #0f172a;
  min-width: 100px;
  text-align: right;
  margin: 0 16px;
}

.summary-cost-value small {
  font-weight: 400;
  color: #9ca3af;
}

.summary-cost-status {
  font-size: 12px;
  color: #6b7280;
  min-width: 110px;
  text-align: right;
}

.summary-rebate-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .summary-row-3 {
    grid-template-columns: 1fr;
  }

  .summary-rebate-compare {
    grid-template-columns: 1fr;
  }

  .summary-cost-row {
    flex-wrap: wrap;
    gap: 4px;
  }

  .summary-cost-value {
    margin: 0;
  }
}