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

    :root {
      --primary: #3b82f6;
      --primary-dark: #2563eb;
      --gray-50: #f8fafc;
      /* Slate/50 - más frío que el original */
      --gray-100: #f1f5f9;
      /* Slate/100 */
      --gray-200: #e2e8f0;
      /* Slate/200 */
      --gray-300: #cbd5e1;
      /* Slate/300 */
      --gray-400: #94a3b8;
      /* Slate/400 */
      --gray-500: #64748b;
      /* Slate/500 */
      --gray-600: #475569;
      /* Slate/600 */
      --gray-700: #334155;
      /* Slate/700 - Texto secundario más legible */
      --gray-800: #1e293b;
      /* Slate/800 */
      --gray-900: #0f172a;
      /* Slate/900 - Texto primario casi negro pero suave */
      --radius-md: 12px;
      --radius-lg: 16px;
      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
      /* Sombra más moderna */

      /* Tema claro REFINADO ("Silicon Valley" Aesthetic) */
      /* Fondo más suave, menos saturado */
      --bg-gradient-start: #e0e7ff;
      /* Indigo 100 muy suave */
      --bg-gradient-end: #f3f4f6;
      /* Gray 100 */

      /* Shell (fondo principal dashboard): Off-white grisáceo, no blanco brillante */
      --shell-bg: rgba(248, 250, 252, 0.95);
      /* Slate 50 con transparencia */

      /* Header: Gradiente profesional pero no chillón */
      --header-bg: linear-gradient(135deg, #2563eb, #4f46e5);
      /* Blue 600 -> Indigo 600 */

      /* Paneles: Blanco puro para destacar sobre el fondo grisáceo */
      --panel-bg: #ffffff;

      /* Bordes: Más definidos para estructura */
      --panel-border: #e2e8f0;
      /* Slate 200 */

      /* Inputs: Fondo muy sutil para diferenciar de panel */
      --input-bg: #f8fafc;
      /* Slate 50 */
      --input-border: #cbd5e1;
      /* Slate 300 - mejor contraste */

      /* Textos */
      --text-primary: var(--gray-900);
      --text-secondary: var(--gray-600);
      /* Un poco más oscuro que antes para legibilidad */
      --text-muted: var(--gray-500);

      /* Budget Shell: Fondo distintivo pero armónico */
      --budget-shell-bg: #f1f5f9;
      /* Slate 100 */
    }

    [data-theme="dark"] {
      /* Gradientes más vibrantes y profundos */
      --bg-gradient-start: #0f172a;
      --bg-gradient-end: #1e1b4b;

      /* Shell con mejor contraste */
      --shell-bg: rgba(17, 24, 39, 0.97);

      /* Header más vibrante */
      --header-bg: linear-gradient(135deg, #1e40af, #6366f1);

      /* Paneles con mejor contraste */
      --panel-bg: #1f2937;
      --panel-border: #374151;

      /* Inputs mucho más legibles */
      --input-bg: #111827;
      --input-border: #4b5563;
      --input-text: #f9fafb;

      /* Textos con alto contraste */
      --text-primary: #f9fafb;
      --text-secondary: #e5e7eb;
      --text-muted: #9ca3af;

      /* Budget shells con contraste visible */
      --budget-shell-bg: #111827;

      /* Override grays para mejor contraste */
      --gray-50: #111827;
      --gray-100: #1f2937;
      --gray-200: #374151;
      --gray-300: #4b5563;
      --gray-400: #6b7280;
      --gray-500: #9ca3af;
      --gray-600: #d1d5db;
      --gray-700: #e5e7eb;
      --gray-800: #f3f4f6;
      --gray-900: #f9fafb;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      min-height: 100vh;
      background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
      margin: 0;
      padding: 0;
      color: var(--text-primary);
      transition: background 0.3s ease, color 0.3s ease;
    }

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

    /* Custom Scrollbar - Modo Claro */
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    ::-webkit-scrollbar-track {
      background: #f1f0ed;
      border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb {
      background: #c5c3be;
      border-radius: 5px;
      transition: background 0.2s ease;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #9e9c97;
    }

    /* Custom Scrollbar - Modo Oscuro */
    [data-theme="dark"] ::-webkit-scrollbar-track {
      background: #1f2937;
    }

    [data-theme="dark"] ::-webkit-scrollbar-thumb {
      background: #4b5563;
    }

    [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
      background: #6b7280;
    }

    /* Focus Indicators WCAG AAA */
    *:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-radius: 4px;
    }

    button:focus-visible,
    .tab:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 0px;
    }

    .shell {
      width: 100%;
      min-height: 100vh;
      max-width: none;
      background: var(--shell-bg);
      box-shadow: none;
      backdrop-filter: blur(16px);
      display: flex;
      flex-direction: column;
      margin: 0;
      transition: background 0.3s ease;
    }

    @media (min-width: 1024px) {
      body {
        padding: 12px;
      }

      .shell {
        min-height: calc(100vh - 24px);
        border-radius: 16px;
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
      }
    }

    header {
      background: var(--header-bg);
      padding: 18px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: white;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      transition: background 0.3s ease;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 24px;
      flex: 1;
    }

    .header-logo {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: opacity 0.2s ease;
    }

    .header-logo img {
      height: 100%;
      width: auto;
      object-fit: contain;
    }

    .header-logo:hover {
      opacity: 0.9;
    }

    .header-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      padding-left: 24px;
      position: relative;
    }

    /* Separador vertical premium - ANTES del texto */
    .header-text::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 32px;
      background: rgba(255, 255, 255, 0.15);
    }

    .header-text h1 {
      font-size: 17px;
      font-weight: 600;
      margin: 0;
      letter-spacing: -0.01em;
      line-height: 1.3;
    }

    [data-theme="dark"] .header-text h1 {
      color: rgba(255, 255, 255, 0.98);
    }

    .header-text p {
      font-size: 12px;
      font-weight: 400;
      margin: 0;
      opacity: 0.75;
      line-height: 1.4;
      letter-spacing: 0.01em;
    }

    input,
    select,
    textarea {
      width: 100%;
      padding: 9px 11px;
      border: 1px solid var(--input-border);
      border-radius: var(--radius-md);
      font-size: 14px;
      background: var(--input-bg);
      color: var(--text-primary);
      transition: border-color 0.2s ease, background 0.3s ease, color 0.3s ease;
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--text-muted);
      opacity: 0.7;
    }

    [data-theme="dark"] input::placeholder,
    [data-theme="dark"] textarea::placeholder {
      color: #9ca3af;
      opacity: 0.8;
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    label {
      display: block;
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 5px;
      color: var(--text-secondary);
    }

    .tabs {
      display: flex;
      gap: 8px;
      padding: 12px 32px 10px;
      background: rgba(255, 255, 255, 0.86);
      border-bottom: 1px solid var(--gray-200);
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    /* Tabs container en modo oscuro */
    [data-theme="dark"] .tabs {
      background: #1f2937;
      border-bottom-color: #374151;
    }

    .tab {
      padding: 10px 18px 8px;
      border: none;
      background: var(--gray-100);
      color: var(--gray-600);
      border-radius: 10px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .tab:hover {
      background: var(--gray-200);
      transform: translateY(-1px);
    }

    .tab span.icon {
      font-size: 14px;
    }

    .tab.active {
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color: white;
      box-shadow: var(--shadow);
    }

    /* Tabs en modo oscuro */
    [data-theme="dark"] .tab {
      background: #374151;
      color: #d1d5db;
    }

    [data-theme="dark"] .tab:hover {
      background: #4b5563;
    }

    [data-theme="dark"] .tab.active {
      background: linear-gradient(135deg, #3b82f6, #6366f1);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    main {
      padding: 24px 32px 28px;
      display: grid;
      grid-template-columns: minmax(0, 3fr);
      gap: 24px;
      flex: 1;
      align-items: stretch;
      align-content: stretch;
    }

    @media (min-width: 900px) {
      main {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      }
    }

    .panel {
      background: var(--panel-bg);
      border-radius: var(--radius-lg);
      border: 1px solid var(--panel-border);
      box-shadow: var(--shadow);
      padding: 20px 22px 18px;
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      flex-shrink: 0;
    }

    .panel-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--gray-900);
      letter-spacing: -0.02em;
    }

    [data-theme="dark"] .panel-title {
      color: #f9fafb;
    }

    .panel-subtitle {
      font-size: 13px;
      font-weight: 400;
      color: var(--gray-600);
      margin-top: 4px;
    }

    [data-theme="dark"] .panel-subtitle {
      color: #9ca3af;
    }

    .token-row {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .token-row label {
      font-size: 12px;
      color: var(--gray-600);
      font-weight: 500;
    }

    .token-row input[type="password"] {
      flex: 1 1 180px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid var(--gray-300);
      font-size: 13px;
      font-family: inherit;
    }

    .token-row button {
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 12px;
    }

    form .row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px;
      margin-bottom: 12px;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .field label {
      font-size: 12px;
      color: var(--gray-700);
      font-weight: 500;
    }

    .small-muted {
      font-size: 11.5px;
      color: var(--gray-500);
      line-height: 1.5;
    }

    [data-theme="dark"] .small-muted {
      color: #9ca3af;
    }

    .field input,
    .field select,
    .field textarea {
      border-radius: 10px;
      border: 1px solid var(--gray-300);
      padding: 8px 10px;
      font-size: 13px;
      font-family: inherit;
    }

    .field textarea {
      min-height: 70px;
      resize: vertical;
    }

    .actions {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      margin-top: 6px;
    }

    button.primary {
      border: none;
      border-radius: 999px;
      padding: 9px 18px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color: white;
      box-shadow: var(--shadow);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    button.secondary {
      border-radius: 999px;
      padding: 7px 14px;
      font-size: 12px;
      font-weight: 500;
      border: 1px solid var(--gray-300);
      background: white;
      cursor: pointer;
    }

    button[disabled] {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .status-box {
      padding: 11px 14px;
      border-radius: 10px;
      font-size: 13px;
      margin-top: 12px;
      display: none;
    }

    .status-box.show {
      display: block;
    }

    .status-box.status-success {
      background: linear-gradient(135deg, #d1fae5, #a7f3d0);
      color: #065f46;
      border: 1px solid #6ee7b7;
    }

    .status-box.status-error {
      background: linear-gradient(135deg, #fee2e2, #fecaca);
      color: #991b1b;
      border: 1px solid #fca5a5;
    }

    /* Status boxes en modo oscuro */
    [data-theme="dark"] .status-box.status-success {
      background: linear-gradient(135deg, #064e3b, #065f46);
      color: #d1fae5;
      border-color: #10b981;
    }

    [data-theme="dark"] .status-box.status-error {
      background: linear-gradient(135deg, #7f1d1d, #991b1b);
      color: #fee2e2;
      border-color: #ef4444;
    }

    .status-box strong {
      font-weight: 600;
    }

    .lead-list {
      margin-top: 8px;
      max-height: 360px;
      overflow: auto;
      border-radius: 12px;
      border: 1px solid var(--gray-200);
    }

    .budgets-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
      align-items: flex-start;
      max-width: 100%;
    }

    @media (min-width: 1200px) {
      .budgets-layout {
        grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
      }
    }

    .budget-list-shell,
    .budget-detail-shell {
      background: var(--budget-shell-bg);
      border-radius: 16px;
      border: 1px solid var(--panel-border);
      padding: 20px;
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    .budget-list-header-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-900);
      padding-left: 12px;
      border-left: 3px solid #5568FE;
      margin-bottom: 4px;
    }

    .budget-list-header-subtitle {
      font-size: 11px;
      color: var(--gray-500);
      margin-bottom: 6px;
    }

    .budget-leads-scroll {
      margin-top: 6px;
      flex: 1;
      overflow-x: visible;
      overflow-y: auto;
      min-height: 200px;
      /* 🔧 FIX: Add top padding to prevent dropdown clipping when positioned above items */
      padding-top: 150px;
      margin-top: -144px;
      /* Compensate for padding (150 - 6 original) */
    }

    .budget-list-shell .field,
    .budget-list-shell .budget-list-header-title,
    .budget-list-shell .budget-list-header-subtitle {
      position: relative;
      z-index: 5;
    }

    .budget-lead-item {
      padding: 12px 14px;
      background: #fdfcfa;
      border: 1px solid var(--gray-200);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-bottom: 8px;
      text-align: left;
      width: 100%;
      position: relative;
      overflow: visible;
    }

    .budget-lead-item:hover {
      background: var(--gray-50);
      border-color: var(--primary);
      transform: translateX(2px);
    }

    .budget-lead-item.active {
      background: linear-gradient(135deg, #dbeafe, #bfdbfe);
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    }

    .human-case-priority-green {
      border-color: #10b981;
      box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4);
    }

    .human-case-priority-yellow {
      border-color: #f59e0b;
      box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.45);
    }

    .human-case-priority-red {
      border-color: #ef4444;
      box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.6);
    }

    /* Budget items en modo oscuro */
    [data-theme="dark"] .budget-lead-item {
      background: #1f2937;
      border-color: #4b5563;
    }

    [data-theme="dark"] .budget-lead-item:hover {
      background: #374151;
      border-color: #3b82f6;
    }

    [data-theme="dark"] .budget-lead-item.active {
      background: linear-gradient(135deg, #1e3a8a, #1e40af);
      border-color: #3b82f6;
      box-shadow: 0 2px 12px rgba(59, 130, 246, 0.4);
    }

    .budget-lead-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
    }

    .budget-lead-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-900);
      margin-bottom: 2px;
    }

    [data-theme="dark"] .budget-lead-name {
      color: #f9fafb;
    }

    .budget-lead-meta {
      font-size: 11px;
      font-weight: 400;
      color: var(--gray-500);
    }

    [data-theme="dark"] .budget-lead-meta {
      color: #9ca3af;
    }

    [data-theme="dark"] .budget-lead-item.active .budget-lead-name {
      color: #ffffff;
    }

    [data-theme="dark"] .budget-lead-item.active .budget-lead-meta {
      color: #e0e7ff;
    }

    .budget-lead-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .budget-lead-status-pill {
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 500;
    }

    .budget-lead-status-pending {
      background: rgba(234, 179, 8, 0.12);
      color: #92400e;
    }

    .budget-lead-status-sent {
      background: rgba(16, 185, 129, 0.12);
      color: #065f46;
    }

    .budget-lead-status-muted {
      background: rgba(249, 115, 22, 0.15);
      color: #c2410c;
      cursor: pointer;
    }

    .budget-lead-status-muted:hover {
      background: rgba(249, 115, 22, 0.25);
    }

    [data-theme="dark"] .budget-lead-status-muted {
      background: rgba(249, 115, 22, 0.20);
      color: #fb923c;
    }

    [data-theme="dark"] .budget-lead-status-muted:hover {
      background: rgba(249, 115, 22, 0.30);
    }

    /* Cancel appointment dropdown button and menu */
    .budget-lead-cancel-wrapper {
      position: relative;
    }

    .budget-lead-cancel-action {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px dashed var(--gray-300);
      color: var(--gray-500);
      background: transparent;
      cursor: pointer;
      opacity: 0;
      transform: translateX(4px);
      transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
      white-space: nowrap;
    }

    .budget-lead-item:hover .budget-lead-cancel-action {
      opacity: 1;
      transform: translateX(0);
    }

    .budget-lead-cancel-action:hover {
      background: rgba(245, 158, 11, 0.08);
      color: #b45309;
      border-color: rgba(245, 158, 11, 0.5);
    }

    [data-theme="dark"] .budget-lead-cancel-action {
      border-color: #4b5563;
      color: #9ca3af;
    }

    [data-theme="dark"] .budget-lead-cancel-action:hover {
      background: rgba(251, 191, 36, 0.12);
      color: #fde68a;
      border-color: #fbbf24;
    }

    /* Dropdown menu for cancel options */
    .budget-lead-cancel-menu {
      position: absolute;
      bottom: calc(100% + 4px);
      right: 0;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);
      z-index: 1000;
      min-width: 220px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(4px);
      transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    }

    .budget-lead-cancel-wrapper:hover .budget-lead-cancel-menu,
    .budget-lead-cancel-menu:hover {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .budget-lead-cancel-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      font-size: 12px;
      color: var(--gray-700);
      cursor: pointer;
      transition: background 0.1s ease;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }

    .budget-lead-cancel-option:first-child {
      border-radius: 8px 8px 0 0;
    }

    .budget-lead-cancel-option:last-child {
      border-radius: 0 0 8px 8px;
    }

    .budget-lead-cancel-option:hover {
      background: var(--gray-50);
    }

    .budget-lead-cancel-option.option-potencial:hover {
      background: rgba(59, 130, 246, 0.08);
      color: #1d4ed8;
    }

    .budget-lead-cancel-option.option-coordinacion:hover {
      background: rgba(245, 158, 11, 0.08);
      color: #b45309;
    }

    .budget-lead-cancel-option.option-perdido:hover {
      background: rgba(239, 68, 68, 0.08);
      color: #b91c1c;
    }

    .cancel-option-icon {
      font-size: 14px;
      width: 18px;
      text-align: center;
    }

    [data-theme="dark"] .budget-lead-cancel-menu {
      background: #1f2937;
      border-color: #374151;
    }

    [data-theme="dark"] .budget-lead-cancel-option {
      color: #d1d5db;
    }

    [data-theme="dark"] .budget-lead-cancel-option:hover {
      background: #374151;
    }

    .budget-detail-header-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--gray-900);
      padding-left: 12px;
      border-left: 3px solid #5568FE;
      margin-bottom: 4px;
    }

    .budget-detail-header-subtitle {
      font-size: 11px;
      color: var(--gray-500);
      margin-bottom: 10px;
    }

    .budget-selected-summary {
      font-size: 12px;
      color: var(--gray-600);
      background: var(--gray-50);
      padding: 10px 12px;
      border-radius: 10px;
      margin-bottom: 14px;
      border: 1px solid var(--gray-200);
    }

    [data-theme="dark"] .budget-selected-summary {
      color: #d1d5db;
      background: #374151;
      border-color: #4b5563;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    thead {
      background: var(--gray-50);
      position: sticky;
      top: 0;
      z-index: 1;
    }

    th,
    td {
      padding: 6px 8px;
      border-bottom: 1px solid var(--gray-100);
      text-align: left;
      vertical-align: top;
    }

    th {
      font-weight: 600;
      color: var(--gray-600);
      font-size: 11px;
      text-transform: uppercase;
    }

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

    .pill {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 500;
    }

    .pill.type-virtual {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .pill.type-in_person {
      background: #dcfce7;
      color: #166534;
    }

    .pill.proposal {
      background: #fef3c7;
      color: #92400e;
    }

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

    button.secondary {
      background: rgba(255, 255, 255, 0.15);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.25);
    }

    button.secondary:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    /* Botón secondary en modo oscuro - menos blanco */
    [data-theme="dark"] button.secondary {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.85);
      border-color: rgba(255, 255, 255, 0.15);
    }

    [data-theme="dark"] button.secondary:hover {
      background: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.95);
    }

    .theme-toggle {
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      padding: 8px 12px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 18px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .theme-toggle:hover {
      background: rgba(255, 255, 255, 0.25);
      transform: scale(1.05);
    }

    /* Theme toggle en modo oscuro */
    [data-theme="dark"] .theme-toggle {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.12);
    }

    [data-theme="dark"] .theme-toggle:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    footer {
      padding: 8px 18px 10px;
      border-top: 1px solid var(--gray-200);
      background: var(--gray-50);
      font-size: 11px;
      color: var(--gray-500);
      text-align: right;
      flex-shrink: 0;
    }

    [data-theme="dark"] footer {
      background: #111827;
      border-top-color: #374151;
      color: #9ca3af;
    }

    /* Touch Targets Móvil - Apple/Google Guidelines */
    @media (max-width: 767px) {
      button {
        min-height: 44px;
        padding: 12px 16px;
      }

      .tab {
        min-height: 44px;
        padding: 12px 16px;
      }

      input,
      select,
      textarea {
        min-height: 44px;
        padding: 12px 14px;
      }
    }

    /* Skeleton Loaders */
    @keyframes skeleton-shimmer {
      0% {
        background-position: -200% 0;
      }

      100% {
        background-position: 200% 0;
      }
    }

    .skeleton {
      background: linear-gradient(90deg,
          #f0ede8 25%,
          #e5e0d8 50%,
          #f0ede8 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s infinite;
      border-radius: 8px;
    }

    [data-theme="dark"] .skeleton {
      background: linear-gradient(90deg,
          #2a2a2a 25%,
          #333333 50%,
          #2a2a2a 75%);
    }

    .skeleton-item {
      padding: 12px 14px;
      margin-bottom: 8px;
    }

    .skeleton-line {
      height: 14px;
      margin-bottom: 6px;
      border-radius: 4px;
    }

    .skeleton-line:last-child {
      width: 60%;
      margin-bottom: 0;
    }

    /* Empty States */
    .empty-state {
      text-align: center;
      padding: 40px 24px;
    }

    .empty-icon {
      font-size: 64px;
      opacity: 0.35;
      margin-bottom: 16px;
      filter: grayscale(100%);
    }

    [data-theme="dark"] .empty-icon {
      opacity: 0.25;
    }

    .empty-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    .empty-subtitle {
      font-size: 13px;
      font-weight: 400;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* List Item Stagger Animations */
    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

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

    .budget-lead-item {
      animation: slideInUp 0.3s ease-out;
      animation-fill-mode: both;
    }

    /* Stagger delays */
    .budget-lead-item:nth-child(1) {
      animation-delay: 0.05s;
    }

    .budget-lead-item:nth-child(2) {
      animation-delay: 0.1s;
    }

    .budget-lead-item:nth-child(3) {
      animation-delay: 0.15s;
    }

    .budget-lead-item:nth-child(4) {
      animation-delay: 0.2s;
    }

    .budget-lead-item:nth-child(5) {
      animation-delay: 0.25s;
    }

    .budget-lead-item:nth-child(6) {
      animation-delay: 0.3s;
    }

    .budget-lead-item:nth-child(7) {
      animation-delay: 0.35s;
    }

    .budget-lead-item:nth-child(8) {
      animation-delay: 0.4s;
    }

    .budget-lead-item:nth-child(9) {
      animation-delay: 0.45s;
    }

    .budget-lead-item:nth-child(10) {
      animation-delay: 0.5s;
    }

    /* Button Ripple Effects */
    button {
      position: relative;
      overflow: hidden;
    }

    button::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s, opacity 0.6s;
      opacity: 0;
    }

    button:active::after {
      width: 300px;
      height: 300px;
      opacity: 1;
      transition: 0s;
    }

    button.secondary::after {
      background: rgba(255, 255, 255, 0.3);
    }

    /* Disable ripple for list items that use overflow:visible (for dropdown menus) */
    .budget-lead-item::after,
    .payment-lead-item::after,
    .human-case-item::after {
      display: none;
    }

    /* Toast Notifications */
    .toast-container {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 12px;
      pointer-events: none;
    }

    .toast {
      background: var(--panel-bg);
      color: var(--text-primary);
      padding: 16px 20px;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.1);
      min-width: 300px;
      max-width: 400px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      transform: translateX(400px);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: auto;
      border-left: 4px solid var(--gray-400);
    }

    .toast.show {
      transform: translateX(0);
      opacity: 1;
    }

    .toast-icon {
      font-size: 20px;
      flex-shrink: 0;
    }

    .toast-content {
      flex: 1;
    }

    .toast-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
      color: var(--text-primary);
    }

    .toast-message {
      font-size: 13px;
      font-weight: 400;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .toast-close {
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 18px;
      padding: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .toast-close:hover {
      background: var(--gray-200);
      color: var(--text-primary);
    }

    [data-theme="dark"] .toast-close:hover {
      background: #374151;
    }

    /* Toast variants */
    .toast.toast-success {
      border-left-color: #10b981;
    }

    .toast.toast-success .toast-icon {
      color: #10b981;
    }

    .toast.toast-error {
      border-left-color: #ef4444;
    }

    .toast.toast-error .toast-icon {
      color: #ef4444;
    }

    .toast.toast-info {
      border-left-color: #3b82f6;
    }

    .toast.toast-info .toast-icon {
      color: #3b82f6;
    }

    .toast.toast-warning {
      border-left-color: #f59e0b;
    }

    .toast.toast-warning .toast-icon {
      color: #f59e0b;
    }

    /* Toast dark mode shadows */
    [data-theme="dark"] .toast {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.3);
    }

    /* Mobile toast adjustments */
    @media (max-width: 767px) {
      .toast-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
      }

      .toast {
        min-width: auto;
        max-width: none;
      }
    }

    /* Modal for human case resolution */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }

    .modal-backdrop.hidden {
      display: none;
    }

    .modal-dialog {
      background: var(--panel-bg);
      border-radius: 16px;
      border: 1px solid var(--panel-border);
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.35);
      padding: 20px 22px 18px;
      max-width: 420px;
      width: 100%;
    }

    .modal-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--text-primary);
    }

    .modal-subtitle {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 14px;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 14px;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       Settings Dropdown Menu - Professional & Minimalist
       ───────────────────────────────────────────────────────────────────────── */
    .settings-dropdown-container {
      position: relative;
    }

    .settings-trigger {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 0;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      color: white;
    }

    .settings-trigger:hover {
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.22);
      transform: scale(1.02);
    }

    .settings-trigger:active {
      transform: scale(0.98);
    }

    .settings-trigger-icon {
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 16px;
    }

    .settings-trigger-icon span {
      display: block;
      height: 2px;
      background: white;
      border-radius: 1px;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .settings-trigger.open .settings-trigger-icon span:nth-child(1) {
      transform: rotate(45deg) translate(4px, 4px);
    }

    .settings-trigger.open .settings-trigger-icon span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }

    .settings-trigger.open .settings-trigger-icon span:nth-child(3) {
      transform: rotate(-45deg) translate(4px, -4px);
    }

    .settings-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      width: 260px;
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px) scale(0.96);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1000;
      overflow: hidden;
    }

    [data-theme="dark"] .settings-dropdown {
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .settings-dropdown.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }

    .settings-dropdown::before {
      content: '';
      position: absolute;
      top: -5px;
      right: 16px;
      width: 10px;
      height: 10px;
      background: var(--panel-bg);
      border-left: 1px solid var(--panel-border);
      border-top: 1px solid var(--panel-border);
      transform: rotate(45deg);
    }

    /* Bot Status Section */
    .dropdown-bot-status {
      padding: 18px 20px 20px;
      background: linear-gradient(145deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
      border-bottom: 1px solid var(--panel-border);
      transition: background 0.3s ease;
    }

    .dropdown-bot-status.paused {
      background: linear-gradient(145deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
    }

    .bot-status-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
    }

    .bot-status-indicator {
      position: relative;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: linear-gradient(145deg, #22c55e, #16a34a);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
    }

    .bot-status-indicator.paused {
      background: linear-gradient(145deg, #ef4444, #dc2626);
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
    }

    .bot-status-indicator::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: inherit;
      animation: statusPulse 2.5s ease-in-out infinite;
      z-index: 0;
    }

    .bot-status-indicator.paused::before {
      animation: none;
    }

    @keyframes statusPulse {

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

      50% {
        transform: scale(1.25);
        opacity: 0;
      }
    }

    .bot-status-indicator-icon {
      font-size: 18px;
      z-index: 1;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    }

    .bot-status-info {
      flex: 1;
    }

    .bot-status-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 3px;
      letter-spacing: -0.01em;
    }

    .bot-status-subtitle {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 500;
      letter-spacing: 0.01em;
    }

    .bot-status-subtitle.active {
      color: #16a34a;
    }

    .bot-status-subtitle.paused {
      color: #dc2626;
    }

    /* Bot Control Button */
    .btn-bot-control {
      width: 100%;
      padding: 11px 16px;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      letter-spacing: 0.01em;
    }

    .btn-bot-control.pause {
      background: rgba(220, 38, 38, 0.08);
      color: #dc2626;
      border: 1px solid rgba(220, 38, 38, 0.15);
    }

    .btn-bot-control.pause:hover {
      background: rgba(220, 38, 38, 0.12);
      border-color: rgba(220, 38, 38, 0.25);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
    }

    .btn-bot-control.resume {
      background: rgba(34, 197, 94, 0.08);
      color: #15803d;
      border: 1px solid rgba(34, 197, 94, 0.15);
    }

    .btn-bot-control.resume:hover {
      background: rgba(34, 197, 94, 0.12);
      border-color: rgba(34, 197, 94, 0.25);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
    }

    [data-theme="dark"] .btn-bot-control.pause {
      background: rgba(220, 38, 38, 0.12);
      border-color: rgba(239, 68, 68, 0.2);
    }

    [data-theme="dark"] .btn-bot-control.pause:hover {
      background: rgba(220, 38, 38, 0.18);
      border-color: rgba(239, 68, 68, 0.35);
    }

    [data-theme="dark"] .btn-bot-control.resume {
      background: rgba(34, 197, 94, 0.12);
      border-color: rgba(34, 197, 94, 0.2);
    }

    [data-theme="dark"] .btn-bot-control.resume:hover {
      background: rgba(34, 197, 94, 0.18);
      border-color: rgba(34, 197, 94, 0.35);
    }

    /* Dropdown Menu Items */
    .dropdown-menu-items {
      padding: 10px 8px;
    }

    .dropdown-menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      color: var(--text-primary);
    }

    .dropdown-menu-item:hover {
      background: var(--gray-100);
    }

    .dropdown-menu-item-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .dropdown-menu-item-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--gray-100);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .dropdown-menu-item-text {
      font-size: 14px;
      font-weight: 500;
    }

    /* Theme Toggle Switch */
    .theme-switch {
      position: relative;
      width: 50px;
      height: 26px;
      background: var(--gray-200);
      border-radius: 13px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .theme-switch.dark {
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
    }

    .theme-switch::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      background: white;
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease;
    }

    .theme-switch.dark::after {
      transform: translateX(24px);
    }

    .theme-switch-icons {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5px;
      font-size: 12px;
    }

    /* Divider */
    .dropdown-divider {
      height: 1px;
      background: var(--panel-border);
      margin: 4px 12px;
    }

    /* Logout Item */
    .dropdown-menu-item.logout {
      color: #dc2626;
    }

    .dropdown-menu-item.logout .dropdown-menu-item-icon {
      background: rgba(220, 38, 38, 0.1);
    }

    .dropdown-menu-item.logout:hover {
      background: rgba(220, 38, 38, 0.08);
    }

    /* ===== THEME-AWARE CONFIRM MODAL (ELITE POLISH) ===== */
    .custom-confirm-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .custom-confirm-overlay.show {
      opacity: 1;
      visibility: visible;
    }

    .custom-confirm-modal {
      background: var(--panel-bg);
      border-radius: 20px;
      padding: 32px;
      max-width: 360px;
      width: 90%;
      border: 1px solid var(--panel-border);
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
      transform: scale(0.95) translateY(10px);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      gap: 12px;
      text-align: center;
      /* Center alignment for Elite look */
    }

    .custom-confirm-overlay.show .custom-confirm-modal {
      transform: scale(1) translateY(0);
    }

    .custom-confirm-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin: 0 auto 8px;
      /* Centered icon */
    }

    .custom-confirm-title {
      font-size: 19px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.01em;
    }

    .custom-confirm-message {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 12px;
      white-space: pre-line;
    }

    .custom-confirm-actions {
      display: flex;
      gap: 12px;
      margin-top: 4px;
    }

    .custom-confirm-btn {
      flex: 1;
      padding: 11px;
      border-radius: 10px;
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .custom-confirm-cancel {
      background: transparent;
      color: var(--text-muted);
      border: 1px solid var(--gray-300);
    }

    .custom-confirm-cancel:hover {
      background: var(--gray-50);
      color: var(--text-primary);
      border-color: var(--gray-400);
    }

    [data-theme="dark"] .custom-confirm-cancel:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .custom-confirm-ok {
      background: var(--primary);
      color: white;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
    }

    .custom-confirm-ok.danger {
      background: #dc2626;
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    }

    .custom-confirm-ok:hover {
      filter: brightness(1.1);
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    /* PHASE 1: Input Modal Styles */
    .input-modal-input {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--gray-300);
      border-radius: 10px;
      font-size: 15px;
      font-family: inherit;
      background: var(--input-bg);
      color: var(--text-primary);
      margin-bottom: 8px;
      transition: all 0.2s ease;
    }

    .input-modal-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    .input-modal-input.input-error {
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
      animation: shake 0.4s ease;
    }

    @keyframes shake {

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

      25% {
        transform: translateX(-5px);
      }

      75% {
        transform: translateX(5px);
      }
    }

    [data-theme="dark"] .input-modal-input {
      background: #1f2937;
      border-color: #4b5563;
    }

    [data-theme="dark"] .input-modal-input:focus {
      border-color: var(--primary);
    }

    /* Pause Confirmation Modal */
    .pause-confirm-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.25s ease;
    }

    .pause-confirm-overlay.show {
      opacity: 1;
      visibility: visible;
    }

    .pause-confirm-modal {
      background: var(--panel-bg);
      border-radius: 20px;
      padding: 28px;
      max-width: 380px;
      width: 90%;
      transform: scale(0.9);
      transition: transform 0.25s ease;
      text-align: center;
    }

    .pause-confirm-overlay.show .pause-confirm-modal {
      transform: scale(1);
    }

    .pause-confirm-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 16px;
      background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(239, 68, 68, 0.05));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
    }

    .pause-confirm-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    .pause-confirm-text {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 24px;
      line-height: 1.5;
    }

    .pause-confirm-actions {
      display: flex;
      gap: 12px;
    }

    .pause-confirm-actions button {
      flex: 1;
      padding: 12px 20px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-confirm-cancel {
      background: var(--gray-100);
      border: 1px solid var(--panel-border);
      color: var(--text-primary);
    }

    .btn-confirm-cancel:hover {
      background: var(--gray-200);
    }

    .btn-confirm-pause {
      background: linear-gradient(135deg, #dc2626, #b91c1c);
      border: none;
      color: white;
    }

    .btn-confirm-pause:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
    }

    /* ─────────────────────────────────────────────────────────────────────────
       Modal Overlay - Used by pause details modal
       ───────────────────────────────────────────────────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      animation: fadeIn 0.2s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .modal-content {
      background: var(--panel-bg);
      border-radius: 16px;
      border: 1px solid var(--panel-border);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
      padding: 24px;
      max-width: 400px;
      width: 90%;
      animation: slideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

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

    /* Emergency Modal refresh (keep existing but cleaner) */
    .modal-danger .modal-title {
      color: #dc2626;
    }

    .modal-danger textarea {
      width: 100%;
      min-height: 80px;
      padding: 10px;
      border: 1px solid var(--input-border);
      border-radius: 8px;
      background: var(--input-bg);
      color: var(--text-primary);
      font-family: inherit;
      font-size: 14px;
      resize: vertical;
      margin-bottom: 12px;
    }

    .modal-danger .btn-danger {
      background: linear-gradient(135deg, #dc2626, #b91c1c);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .modal-danger .btn-danger:hover {
      background: linear-gradient(135deg, #b91c1c, #991b1b);
    }

    /* ===== HISTORY BUTTON AND MODAL STYLES ===== */
    .history-btn {
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: white;
      border: none;
      border-radius: 999px;
      padding: 9px 18px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    }

    .history-btn:hover {
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    }

    .history-btn svg {
      width: 16px;
      height: 16px;
    }

    [data-theme="dark"] .history-btn {
      background: linear-gradient(135deg, #818cf8, #a78bfa);
    }

    [data-theme="dark"] .history-btn:hover {
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
    }

    /* History Modal - Wider than default */
    .history-modal .modal-content {
      max-width: 900px;
      width: 95%;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
    }

    .history-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--panel-border);
    }

    .history-modal-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .history-modal-close {
      background: var(--gray-200);
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .history-modal-close:hover {
      background: var(--gray-300);
    }

    [data-theme="dark"] .history-modal-close {
      background: #374151;
    }

    [data-theme="dark"] .history-modal-close:hover {
      background: #4b5563;
    }

    /* Export buttons */
    .history-export-buttons {
      display: flex;
      gap: 8px;
      margin-left: auto;
      margin-right: 12px;
    }

    .history-export-btn {
      padding: 6px 14px;
      border-radius: 8px;
      border: 1px solid var(--gray-300);
      background: var(--gray-100);
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.2s ease;
    }

    .history-export-btn:hover {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
      transform: translateY(-1px);
    }

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

    [data-theme="dark"] .history-export-btn {
      background: #374151;
      border-color: #4b5563;
      color: #e5e7eb;
    }

    [data-theme="dark"] .history-export-btn:hover {
      background: #3b82f6;
      border-color: #3b82f6;
      color: white;
    }

    .history-filters {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      align-items: center;
    }

    .history-filters select,
    .history-filters input {
      padding: 8px 12px;
      border: 1px solid var(--input-border);
      border-radius: 8px;
      background: var(--input-bg);
      color: var(--text-primary);
      font-size: 13px;
    }

    .history-table-wrapper {
      flex: 1;
      overflow: auto;
      border-radius: 12px;
      border: 1px solid var(--panel-border);
    }

    .history-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .history-table th,
    .history-table td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid var(--panel-border);
    }

    .history-table th {
      background: var(--gray-100);
      font-weight: 600;
      color: var(--text-secondary);
      position: sticky;
      top: 0;
      z-index: 1;
    }

    [data-theme="dark"] .history-table th {
      background: #1f2937;
    }

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

    [data-theme="dark"] .history-table tbody tr:hover {
      background: #374151;
    }

    .history-badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
    }

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

    .history-badge.sent {
      background: #fef3c7;
      color: #b45309;
    }

    .history-badge.confirmed {
      background: #d1fae5;
      color: #047857;
    }

    .history-badge.resolved {
      background: #d1fae5;
      color: #047857;
    }

    .history-badge.dismissed {
      background: #f3f4f6;
      color: #6b7280;
    }

    [data-theme="dark"] .history-badge.created {
      background: #1e3a5f;
      color: #60a5fa;
    }

    [data-theme="dark"] .history-badge.sent {
      background: #78350f;
      color: #fbbf24;
    }

    [data-theme="dark"] .history-badge.confirmed {
      background: #064e3b;
      color: #34d399;
    }

    [data-theme="dark"] .history-badge.resolved {
      background: #064e3b;
      color: #34d399;
    }

    [data-theme="dark"] .history-badge.dismissed {
      background: #374151;
      color: #9ca3af;
    }

    .history-empty {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-muted);
    }

    .history-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid var(--panel-border);
    }

    .history-footer-info {
      font-size: 13px;
      color: var(--text-muted);
    }

    .history-load-more {
      background: var(--gray-200);
      color: var(--text-primary);
      border: none;
      border-radius: 999px;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .history-load-more:hover {
      background: var(--gray-300);
    }

    [data-theme="dark"] .history-load-more {
      background: #374151;
    }

    [data-theme="dark"] .history-load-more:hover {
      background: #4b5563;
    }

    /* Clickable rows */
    .history-table tbody tr {
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .history-table tbody tr:hover {
      background: rgba(99, 102, 241, 0.1) !important;
    }

    [data-theme="dark"] .history-table tbody tr:hover {
      background: rgba(99, 102, 241, 0.2) !important;
    }

    /* Detail Modal */
    .history-detail-modal .modal-content {
      max-width: 600px;
      width: 90%;
    }

    .history-detail-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--panel-border);
    }

    .history-detail-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .history-detail-subtitle {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    .history-detail-grid {
      display: grid;
      gap: 16px;
    }

    .history-detail-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .history-detail-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
    }

    .history-detail-value {
      font-size: 14px;
      color: var(--text-primary);
      line-height: 1.5;
    }

    .history-detail-value.message {
      background: var(--gray-100);
      padding: 12px;
      border-radius: 8px;
      font-style: italic;
      word-break: break-word;
    }

    [data-theme="dark"] .history-detail-value.message {
      background: #1f2937;
    }

    .history-detail-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--panel-border);
    }

    /* ===== SILICON VALLEY ANIMATIONS ===== */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
      }

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

    .budget-lead-item {
      /* Animation trigger controlled via JS delay */
      animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
    }

    .budget-lead-item:hover {
      transform: translateY(-2px) scale(1.005);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
      z-index: 10;
      border-color: var(--primary);
    }

    .budget-lead-item:active {
      transform: scale(0.97);
    }

    .list-footer-info {
      text-align: center;
      padding: 24px;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
      opacity: 0.8;
    }

    /* ===== RESPONSIVE DESIGN (MOBILE ADAPTATION) ===== */
    @media (max-width: 768px) {

      /* 1. Reset Global Layout for Mobile */
      body {
        padding: 0;
      }

      .shell {
        border-radius: 0;
        min-height: 100vh;
      }

      main {
        padding: 16px 16px 80px;
        /* Bottom padding for scroll space */
        grid-template-columns: 1fr;
        /* Stack all panels */
        gap: 16px;
      }

      /* 2. Header Optimization */
      header {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        position: relative;
      }

      .header-left {
        width: 100%;
        gap: 16px;
      }

      .header-logo {
        height: 32px;
      }

      .header-text::before {
        display: none;
        /* Remove separator on mobile */
      }

      .header-text {
        padding-left: 0;
        border-left: none;
      }

      /* Position Settings Icon absolutely to top-right on mobile */
      .header-right {
        position: absolute;
        top: 20px;
        right: 16px;
      }

      /* Fix Dropdown Overflow on Mobile */
      .settings-dropdown {
        position: fixed;
        top: 70px;
        right: 16px;
        left: 16px;
        width: auto;
        transform-origin: top right;
      }

      .settings-dropdown::before {
        display: none;
        /* Hide arrow on mobile as position changes */
      }

      /* 3. Scrollable Tabs (Fixes cut-off text) */
      .tabs {
        padding: 12px 16px;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        gap: 12px;
      }

      .tabs::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
      }

      .tab {
        flex: 0 0 auto;
        /* Prevent shrinking */
      }

      /* 4. Budgets Layout Stacking */
      .budgets-layout {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      /* 5. Mobile Typography & Touch Targets */
      .panel {
        padding: 16px;
      }

      input,
      select,
      textarea,
      button {
        min-height: 44px;
        /* Touch target size */
      }

      .budget-lead-item:hover {
        transform: none;
        /* Disable hover lift on touch to prevent sticky states */
      }
    }

    /* ===== HIGH-FIDELITY SKELETON (NO CLS) ===== */
    .skeleton-card {
      padding: 16px;
      border: 1px solid var(--panel-border);
      border-radius: 12px;
      margin-bottom: 8px;
      background: var(--bg-surface);
      animation: pulse 1.5s infinite ease-in-out;
    }

    .skeleton-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;
    }

    .skeleton-info {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 60%;
    }

    .skeleton-block {
      background: var(--bg-main);
      /* Slightly darker/lighter than surface */
      border-radius: 4px;
      height: 14px;
    }

    .skeleton-title {
      width: 80%;
      height: 18px;
      margin-bottom: 4px;
    }

    .skeleton-meta {
      width: 40%;
    }

    .skeleton-pill {
      width: 100px;
      height: 24px;
      border-radius: 12px;
      background: var(--bg-main);
    }

    .skeleton-footer {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
    }

    @keyframes pulse {
      0% {
        opacity: 0.6;
      }

      50% {
        opacity: 0.3;
      }

      100% {
        opacity: 0.6;
      }
    }

    /* ===================================================
       GENERIC CARD - Reusable card component for lists
       =================================================== */
    .generic-card {
      padding: 16px 18px;
      background: #fdfcfa;
      border: 1px solid var(--gray-200);
      border-radius: 12px;
      transition: all 0.2s ease;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .generic-card:hover {
      background: var(--gray-50);
      border-color: var(--primary);
      transform: translateX(2px);
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
    }

    [data-theme="dark"] .generic-card {
      background: #1f2937;
      border-color: #4b5563;
    }

    [data-theme="dark"] .generic-card:hover {
      background: #374151;
      border-color: #3b82f6;
    }

    .generic-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .generic-card-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--gray-900);
    }

    [data-theme="dark"] .generic-card-title {
      color: #f9fafb;
    }

    .generic-card-body {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .generic-card-detail {
      font-size: 12px;
      color: var(--gray-600);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    [data-theme="dark"] .generic-card-detail {
      color: #d1d5db;
    }

    .generic-card-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--gray-100);
    }

    [data-theme="dark"] .generic-card-footer {
      border-top-color: #374151;
    }

    /* Status badges */
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .badge-success {
      background: rgba(16, 185, 129, 0.15);
      color: #065f46;
    }

    .badge-warning {
      background: rgba(245, 158, 11, 0.15);
      color: #92400e;
    }

    .badge-error {
      background: rgba(239, 68, 68, 0.15);
      color: #991b1b;
    }

    [data-theme="dark"] .badge-success {
      background: rgba(16, 185, 129, 0.25);
      color: #6ee7b7;
    }

    [data-theme="dark"] .badge-warning {
      background: rgba(245, 158, 11, 0.25);
      color: #fcd34d;
    }

    [data-theme="dark"] .badge-error {
      background: rgba(239, 68, 68, 0.25);
      color: #fca5a5;
    }

/* ===================================================
   ACTIVE LEADS TABLE VIEW - Professional Design
   Rediseño 2026-02-01 para manejar 2000+ leads
   =================================================== */

/* Stats Bar */
.active-leads-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.active-leads-stats .stat-card {
  flex: 1;
  min-width: 120px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
  transition: all 0.2s ease;
}

.active-leads-stats .stat-card:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.active-leads-stats .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.active-leads-stats .stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

[data-theme="dark"] .active-leads-stats .stat-card {
  background: #1f2937;
  border-color: #374151;
}

[data-theme="dark"] .active-leads-stats .stat-card:hover {
  border-color: var(--primary);
}

[data-theme="dark"] .active-leads-stats .stat-value {
  color: #f9fafb;
}

[data-theme="dark"] .active-leads-stats .stat-label {
  color: #9ca3af;
}

/* Filters Bar */
.active-leads-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--gray-50);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}

.active-leads-filters .filter-group {
  flex: 1;
  min-width: 150px;
}

.active-leads-filters .filter-group:first-child {
  flex: 2;
  min-width: 250px;
}

.search-input-large {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--white);
  color: var(--gray-900);
  transition: all 0.2s ease;
}

.search-input-large:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.search-input-large::placeholder {
  color: var(--gray-400);
}

.filter-select {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--white);
  color: var(--gray-900);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.btn-refresh {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-refresh:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

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

[data-theme="dark"] .active-leads-filters {
  background: #1f2937;
  border-color: #374151;
}

[data-theme="dark"] .search-input-large,
[data-theme="dark"] .filter-select {
  background: #111827;
  border-color: #374151;
  color: #f9fafb;
}

[data-theme="dark"] .search-input-large::placeholder {
  color: #6b7280;
}

/* Table Container */
.active-leads-table-container {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.active-leads-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.active-leads-table thead {
  background: var(--gray-50);
  border-bottom: 2px solid var(--gray-200);
}

.active-leads-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-600);
  white-space: nowrap;
}

.active-leads-table tbody tr {
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.15s ease;
}

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

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

.active-leads-table td {
  padding: 10px 16px;
  vertical-align: middle;
}

/* Column widths */
.active-leads-table .col-id {
  width: 80px;
}

.active-leads-table .col-name {
  width: 200px;
}

.active-leads-table .col-contact {
  width: 180px;
}

.active-leads-table .col-state {
  width: 150px;
}

.active-leads-table .col-activity {
  width: 140px;
}

.active-leads-table .col-actions {
  width: 100px;
  text-align: center;
}

/* Cell styles */
.lead-id {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 12px;
  color: var(--gray-500);
}

.lead-name {
  font-weight: 600;
  color: var(--gray-900);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-contact {
  font-size: 12px;
  color: var(--gray-600);
}

.lead-contact .phone {
  display: block;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}

.lead-contact .email {
  display: block;
  color: var(--gray-400);
  font-size: 11px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-activity {
  font-size: 12px;
  color: var(--gray-500);
}

.lead-activity .time-ago {
  font-weight: 500;
  color: var(--gray-700);
}

/* State badges */
.state-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.state-badge.state-new {
  background: rgba(59, 130, 246, 0.15);
  color: #1d4ed8;
}

.state-badge.state-contacted,
.state-badge.state-contacted_bot {
  background: rgba(16, 185, 129, 0.15);
  color: #065f46;
}

.state-badge.state-information_sent {
  background: rgba(139, 92, 246, 0.15);
  color: #5b21b6;
}

.state-badge.state-appointment_scheduled {
  background: rgba(245, 158, 11, 0.15);
  color: #92400e;
}

.state-badge.state-treatment_proposed {
  background: rgba(236, 72, 153, 0.15);
  color: #9d174d;
}

.state-badge.state-follow_up {
  background: rgba(107, 114, 128, 0.15);
  color: #374151;
}

.state-badge.state-unknown {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

[data-theme="dark"] .state-badge.state-new {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}

[data-theme="dark"] .state-badge.state-contacted,
[data-theme="dark"] .state-badge.state-contacted_bot {
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}

[data-theme="dark"] .state-badge.state-information_sent {
  background: rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
}

[data-theme="dark"] .state-badge.state-appointment_scheduled {
  background: rgba(245, 158, 11, 0.25);
  color: #fcd34d;
}

[data-theme="dark"] .state-badge.state-treatment_proposed {
  background: rgba(236, 72, 153, 0.25);
  color: #f9a8d4;
}

[data-theme="dark"] .state-badge.state-follow_up {
  background: rgba(107, 114, 128, 0.25);
  color: #d1d5db;
}

/* Action buttons */
.btn-escalate-compact {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-escalate-compact:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
}

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

/* Loading cell */
.loading-cell {
  text-align: center;
  padding: 40px 16px !important;
  color: var(--gray-500);
  font-style: italic;
}

/* Empty state */
.empty-cell {
  text-align: center;
  padding: 60px 16px !important;
  color: var(--gray-400);
}

.empty-cell .empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.empty-cell .empty-text {
  font-size: 14px;
  color: var(--gray-500);
}

/* Dark mode table */
[data-theme="dark"] .active-leads-table-container {
  background: #1f2937;
  border-color: #374151;
}

[data-theme="dark"] .active-leads-table thead {
  background: #111827;
  border-bottom-color: #374151;
}

[data-theme="dark"] .active-leads-table th {
  color: #9ca3af;
}

[data-theme="dark"] .active-leads-table tbody tr {
  border-bottom-color: #374151;
}

[data-theme="dark"] .active-leads-table tbody tr:hover {
  background: #111827;
}

[data-theme="dark"] .lead-id {
  color: #9ca3af;
}

[data-theme="dark"] .lead-name {
  color: #f9fafb;
}

[data-theme="dark"] .lead-contact {
  color: #d1d5db;
}

[data-theme="dark"] .lead-contact .email {
  color: #6b7280;
}

[data-theme="dark"] .lead-activity {
  color: #9ca3af;
}

[data-theme="dark"] .lead-activity .time-ago {
  color: #d1d5db;
}

/* Pagination */
.active-leads-pagination {
  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;
  flex-wrap: wrap;
  gap: 12px;
}

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

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--gray-100);
  border-color: var(--gray-400);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-current {
  font-size: 13px;
  color: var(--gray-700);
  padding: 0 8px;
  white-space: nowrap;
}

.pagination-size-select {
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
}

[data-theme="dark"] .active-leads-pagination {
  background: #1f2937;
  border-color: #374151;
}

[data-theme="dark"] .pagination-info {
  color: #9ca3af;
}

[data-theme="dark"] .pagination-btn {
  background: #111827;
  border-color: #374151;
  color: #d1d5db;
}

[data-theme="dark"] .pagination-btn:hover:not(:disabled) {
  background: #374151;
  border-color: #4b5563;
}

[data-theme="dark"] .pagination-current {
  color: #d1d5db;
}

[data-theme="dark"] .pagination-size-select {
  background: #111827;
  border-color: #374151;
  color: #d1d5db;
}

/* Status box for messages */
.status-box {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  display: none;
}

.status-box.visible {
  display: block;
}

.status-box.status-loading {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #1d4ed8;
}

.status-box.status-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #065f46;
}

.status-box.status-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #991b1b;
}

[data-theme="dark"] .status-box.status-loading {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

[data-theme="dark"] .status-box.status-success {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

[data-theme="dark"] .status-box.status-error {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .active-leads-stats {
    gap: 8px;
  }
  
  .active-leads-stats .stat-card {
    min-width: 100px;
    padding: 10px 12px;
  }
  
  .active-leads-stats .stat-value {
    font-size: 20px;
  }
  
  .active-leads-filters {
    flex-direction: column;
    gap: 8px;
  }
  
  .active-leads-filters .filter-group {
    width: 100%;
    min-width: unset;
  }
  
  .active-leads-filters .filter-group:first-child {
    flex: unset;
    min-width: unset;
  }
  
  .btn-refresh {
    width: 100%;
  }
  
  .active-leads-table-container {
    overflow-x: auto;
  }
  
  .active-leads-table {
    min-width: 800px;
  }
  
  .active-leads-pagination {
    flex-direction: column;
    text-align: center;
  }
  
  .pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Additional styles for Active Leads Table */

/* Mini badges */
.mini-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 6px;
  vertical-align: middle;
}

.badge-escalated {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

[data-theme="dark"] .badge-escalated {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

/* Contact info styles */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-phone {
  font-size: 12px;
  color: var(--gray-700);
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
}

.contact-email {
  font-size: 11px;
  color: var(--gray-500);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-none {
  color: var(--gray-400);
  font-style: italic;
}

[data-theme="dark"] .contact-phone {
  color: #d1d5db;
}

[data-theme="dark"] .contact-email {
  color: #9ca3af;
}

/* Activity time */
.activity-time {
  font-size: 12px;
  color: var(--gray-600);
}

[data-theme="dark"] .activity-time {
  color: #9ca3af;
}

/* Error cell */
.error-cell {
  text-align: center;
  padding: 40px 16px !important;
  color: #dc2626;
  font-weight: 500;
}

[data-theme="dark"] .error-cell {
  color: #fca5a5;
}

/* Additional state badge variants for stateLabels mapping */
.state-badge.state-bot {
  background: rgba(16, 185, 129, 0.15);
  color: #065f46;
}

.state-badge.state-info {
  background: rgba(139, 92, 246, 0.15);
  color: #5b21b6;
}

.state-badge.state-appointment {
  background: rgba(245, 158, 11, 0.15);
  color: #92400e;
}

.state-badge.state-budget {
  background: rgba(236, 72, 153, 0.15);
  color: #9d174d;
}

.state-badge.state-followup {
  background: rgba(107, 114, 128, 0.15);
  color: #374151;
}

.state-badge.state-won {
  background: rgba(16, 185, 129, 0.2);
  color: #047857;
}

[data-theme="dark"] .state-badge.state-bot {
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}

[data-theme="dark"] .state-badge.state-info {
  background: rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
}

[data-theme="dark"] .state-badge.state-appointment {
  background: rgba(245, 158, 11, 0.25);
  color: #fcd34d;
}

[data-theme="dark"] .state-badge.state-budget {
  background: rgba(236, 72, 153, 0.25);
  color: #f9a8d4;
}

[data-theme="dark"] .state-badge.state-followup {
  background: rgba(107, 114, 128, 0.25);
  color: #d1d5db;
}

[data-theme="dark"] .state-badge.state-won {
  background: rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}

/* ============================================================================
   NEW STATE BADGES (2026-02-06)
   Added to support complete LeadState mapping from leadStatePromotionService.ts
   ============================================================================ */

/* state-qualified: Cliente potencial (⭐) */
.state-badge.state-qualified {
  background: rgba(251, 191, 36, 0.15);
  color: #b45309;
}

/* state-pitch: Coordinando turno (📋) */
.state-badge.state-pitch {
  background: rgba(99, 102, 241, 0.15);
  color: #4338ca;
}

/* state-confirmed: Turno confirmado (✅) */
.state-badge.state-confirmed {
  background: rgba(16, 185, 129, 0.2);
  color: #047857;
  font-weight: 700;
}

/* state-lost: Perdido (❌) */
.state-badge.state-lost {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

/* state-escalated: Intervención humana (🧑‍💼) */
.state-badge.state-escalated {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(249, 115, 22, 0.2));
  color: #c2410c;
  font-weight: 700;
  animation: pulse-escalated 2s ease-in-out infinite;
}

@keyframes pulse-escalated {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Dark mode for new states */
[data-theme="dark"] .state-badge.state-qualified {
  background: rgba(251, 191, 36, 0.25);
  color: #fcd34d;
}

[data-theme="dark"] .state-badge.state-pitch {
  background: rgba(99, 102, 241, 0.25);
  color: #a5b4fc;
}

[data-theme="dark"] .state-badge.state-confirmed {
  background: rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}

[data-theme="dark"] .state-badge.state-lost {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

[data-theme="dark"] .state-badge.state-escalated {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(249, 115, 22, 0.3));
  color: #fb923c;
}

/* ============================================================================
   WHATSAPP 24H WINDOW WARNING (MEJORA-2)
   Visual indicator when lead hasn't responded in >20 hours
   ============================================================================ */

.budget-lead-warning {
  position: relative;
  border-left: 3px solid #f59e0b !important;
}

.budget-lead-warning::after {
  content: "⚠️ Paciente sin responder +20hs. Considerar enviar desde Kommo.";
  position: absolute;
  bottom: 100%;
  left: 0;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.budget-lead-warning:hover::after {
  opacity: 1;
}

[data-theme="dark"] .budget-lead-warning::after {
  background: linear-gradient(135deg, #78350f, #92400e);
  color: #fef3c7;
}

/* Badge prominente para leads escalados en tabla de Leads Activos */
.badge-escalated-prominent {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  padding: 3px 8px;
  font-weight: 600;
  animation: pulse-escalated 2s ease-in-out infinite;
}

[data-theme="dark"] .badge-escalated-prominent {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

/* Lead row hover effect */
.lead-row {
  transition: background-color 0.15s ease;
}

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

[data-theme="dark"] .lead-row:hover {
  background-color: #111827;
}