/* kore-theme.css — iOS27 Glass theme
   Se carga DESPUÉS de los estilos base de index.html.
   No modifica lógica JS — solo visual. */

/* ── Variables adicionales ── */
:root {
  --bg-2:      rgba(255,255,255,0.12);
  --hover-bg:  rgba(255,255,255,0.12);
  --bg:        rgba(255,255,255,0.18); /* usado en módulo Citas — estaba indefinido */
}

/* ══════════════════════════════════════════════════
   SELECTS & OPTIONS
   ══════════════════════════════════════════════════ */
select {
  background-color: rgba(255,255,255,0.18);
  color:       var(--txt-1);
  border:      1px solid rgba(255,255,255,0.50);
  border-radius: 10px;
  padding:     8px 32px 8px 12px;
  font-family: 'Outfit', sans-serif;
  font-size:   13px;
  cursor:      pointer;
  outline:     none;
  appearance:  none;
  -webkit-appearance: none;
  color-scheme: light; /* fuerza dropdown nativo en tema claro en Windows/Chrome */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230d1776' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  background-size:     14px;
  transition: border-color .18s, box-shadow .18s;
}
select:hover {
  border-color: rgba(255,255,255,0.70);
}
select:focus {
  border-color: rgba(13,23,118,0.55);
  box-shadow:   0 0 0 3px rgba(13,23,118,0.12);
  outline: none;
}
select option {
  background: #d0d1d4;
  color:      #18181e;
}
select optgroup {
  background: #c4c5c8;
  color:      rgba(24,24,30,0.55);
  font-weight: 700;
  font-size:  10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════
   DROPDOWN PANELS — glass claro
   ══════════════════════════════════════════════════ */
.dropdown-kore,
[data-dropdown],
.ctx-menu {
  background:      rgba(220,222,230,0.88) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border:          1px solid rgba(255,255,255,0.60) !important;
  border-radius:   14px !important;
  box-shadow:      0 20px 60px rgba(0,0,0,0.20),
                   0 0 0 1px rgba(255,255,255,0.08),
                   inset 0 1px 0 rgba(255,255,255,0.50) !important;
}

.dropdown-kore button:hover,
.ctx-menu button:hover {
  background: rgba(255,255,255,0.40) !important;
  color:      var(--txt-1) !important;
}

/* ── Tarjetas glass: línea de luz superior más brillante ── */
.gc {
  position: relative;
  border-radius: 18px !important;
  overflow: hidden;
}
.gc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  border-radius: 18px 18px 0 0;
  pointer-events: none;
  z-index: 10;
}
/* Capa de grano esmerilado */
.gc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 9;
  background: rgba(190,205,230,0.22);
  filter: url(#kore-grain);
  mix-blend-mode: overlay;
}

/* ── Stat cards: línea de luz ── */
.stat-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Sidebar: glow en item activo ── */
.nav-item.active {
  box-shadow: inset 0 0 24px rgba(13,23,118,0.15);
}

/* ── Botón primario ── */
.btn-primary {
  box-shadow: 0 4px 20px rgba(13,23,118,0.45), 0 0 0 1px rgba(255,255,255,0.12) !important;
}
.btn-primary:hover {
  box-shadow: 0 6px 28px rgba(13,23,118,0.55), 0 0 0 1px rgba(255,255,255,0.20) !important;
}

/* ── Modal backdrop ── */
.modal-backdrop {
  background: rgba(8, 10, 24, 0.75) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* ── Global Modal Elevado (Premium Glassmorphism) ── */
.modal-backdrop > .gc {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
}

/* ── Kanban cards: radio mayor ── */
.kanban-card {
  border-radius: 14px !important;
}
.kanban-col {
  border-radius: 18px !important;
}

/* ══════════════════════════════════════════════════
   INBOX / CHAT — panel derecho de info
   La lista y el chat usan inline styles (JSX).
   Solo el panel de info usa className.
   ══════════════════════════════════════════════════ */
.contact-info-panel { background: rgba(255,255,255,0.60) !important; backdrop-filter: blur(20px) !important; border-left: 1px solid rgba(0,0,0,0.07) !important; }

/* Burbujas de chat — legibles sobre fondo claro */
.incoming {
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: var(--txt-1) !important;
}
.outgoing {
  background: rgba(13,23,118,0.12) !important;
  border: 1px solid rgba(13,23,118,0.18) !important;
  color: var(--txt-1) !important;
}

/* ── Scrollbar sutil ── */
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-thumb { background: rgba(13,23,118,0.28); border-radius: 99px; }

/* ── Header: blur reforzado ── */
.header {
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
}

/* ══════════════════════════════════════════════════
   FLOWS TABS
   ══════════════════════════════════════════════════ */
.flows-tab-bar {
  display: flex;
  gap: 4px;
  padding: 5px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.44);
  border-radius: 14px;
  width: fit-content;
}
.flows-tab {
  padding: 7px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(24,24,30,0.58);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .18s ease;
  background: transparent;
  font-family: 'Outfit', sans-serif;
}
.flows-tab:hover {
  color: rgba(24,24,30,0.86);
  background: rgba(255,255,255,0.22);
}
.flows-tab.active {
  background: linear-gradient(135deg, #4a6fff, #1a2fb0);
  color: #fff;
  border-color: rgba(255,255,255,0.24);
  box-shadow: 0 2px 8px rgba(74,111,255,0.40), inset 0 1px 0 rgba(255,255,255,0.18);
}

/* ── Flows: active card ── */
.flow-active-card {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.50);
  border-radius: 18px;
  padding: 20px;
  position: relative;
  transition: all .2s ease;
}
.flow-active-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  border-radius: 18px 18px 0 0;
  pointer-events: none;
}
.flow-active-card:hover {
  border-color: rgba(255,255,255,0.68);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}

/* ── Flows: inactive list item ── */
.flow-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  transition: background .15s;
}
.flow-list-item:last-child {
  border-bottom: none;
}
.flow-list-item:hover {
  background: rgba(255,255,255,0.14);
}

/* ── Flows: section label ── */
.flows-section-label {
  font-size: 10px;
  font-weight: 800;
  color: rgba(24,24,30,0.72);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ── Business hours: day row ── */
.bh-day-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.22);
}
.bh-day-row:last-child { border-bottom: none; }

/* ── Timezone selector ── */
.tz-group { font-size: 10px; font-weight: 700; color: rgba(24,24,30,0.45); letter-spacing: .08em; text-transform: uppercase; }

/* ══════════════════════════════════════════════════
   KORE DESIGN SYSTEM — Reglas globales de legibilidad
   Aplica en toda la plataforma sin excepción.
   ══════════════════════════════════════════════════ */

/* ── Fuente consistente en todos los elementos de formulario ── */
input, textarea, button, select {
  font-family: 'Outfit', sans-serif !important;
}

/* ── Escala tipográfica via selectores de atributo
      Cubren los inline styles de React (style={{fontSize:10}})
      que los selectores de clase no pueden pisar.          ── */
[style*="font-size: 9px"]  { font-size: 11px !important; }
[style*="font-size: 10px"] { font-size: 12px !important; }
[style*="font-size: 11px"] { font-size: 13px !important; }
[style*="font-size: 12px"] { font-size: 14px !important; }

/* ── Clases CSS del sistema — tamaños corregidos ── */
.dt tbody td          { font-size: 13px !important; color: var(--txt-1) !important; }
.dt thead th          { font-size: 12px !important; }
.badge                { font-size: 11px !important; padding: 3px 10px !important; }
.btn-primary          { font-size: 13px !important; }
.btn-ghost            { font-size: 13px !important; }
.btn-link             { font-size: 13px !important; }
.btn-success          { font-size: 13px !important; }
.di                   { font-size: 13px !important; }
.nav-item             { font-size: 13px !important; }
.input-field          { font-size: 13px !important; }
.kore-tab             { font-size: 12px !important; }
.flows-tab            { font-size: 13px !important; }
.sync-status          { font-size: 11px !important; }
.list-ctx-btn         { background: rgba(255,255,255,0.22) !important; border: 1px solid rgba(0,0,0,0.08) !important; color: var(--txt-2) !important; }
.list-ctx-btn:hover   { background: rgba(255,255,255,0.38) !important; color: var(--txt-1) !important; }

/* ── Badge-accent: contraste mejorado ── */
.badge-accent {
  background: rgba(74,111,255,0.16) !important;
  color: #1a2b7a !important;
  border: 1px solid rgba(74,111,255,0.38) !important;
}

/* ── btn-danger: más visible sin ser agresivo ── */
.btn-danger {
  background: rgba(212,75,122,0.14) !important;
  border: 1px solid rgba(212,75,122,0.45) !important;
  color: #b5275a !important;
  font-size: 13px !important;
  padding: 5px 12px !important;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.btn-danger:hover {
  background: rgba(212,75,122,0.24) !important;
  border-color: rgba(212,75,122,0.65) !important;
}

/* ── Pill tab bar — clase reutilizable en toda la plataforma ── */
.kore-tab-bar {
  display: flex;
  gap: 2px;
  background: rgba(0,0,0,0.07);
  border-radius: 9px;
  padding: 3px;
  width: fit-content;
}
.kore-tab {
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  color: rgba(24,24,30,0.55);
  background: transparent;
  transition: all .15s;
  font-family: 'Outfit', sans-serif;
  white-space: nowrap;
}
.kore-tab:hover { color: rgba(24,24,30,0.80); background: rgba(255,255,255,0.30); }
.kore-tab.active {
  background: linear-gradient(135deg, #4a6fff, #1a2fb0);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(74,111,255,0.40);
}

/* ── Avatar inicial — letra blanca siempre legible ── */
.kore-avatar-letter {
  font-weight: 900;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* ── btn-ghost: borde visible, texto legible ── */
.btn-ghost {
  background: rgba(255,255,255,0.22) !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
  color: var(--txt-1) !important;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.38) !important;
  border-color: rgba(0,0,0,0.32) !important;
}

/* ── Fuentes de tabla y listas — no usar menos de 11px ── */
.contact-source-text { font-size: 11px; color: var(--txt-2) !important; }
.channel-label-text  { font-size: 11px; color: var(--txt-2) !important; }

/* ── Jerarquía premium: fondos suaves, texto protagonista, CTA claro ── */
.lead-panel-premium {
  background: linear-gradient(180deg, rgba(248,250,255,0.96), rgba(235,239,248,0.94)) !important;
  border-left: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: -18px 0 64px rgba(15,23,42,0.16) !important;
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
}

.lead-panel-premium .lead-panel-divider {
  border-bottom: 1px solid rgba(15,23,42,0.08) !important;
}

.lead-panel-premium .lead-panel-soft {
  background: rgba(255,255,255,0.46) !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
}

.lead-panel-premium .lead-panel-muted {
  color: var(--txt-2) !important;
}