<style>
/* ================== ROOT/THEME ================== */
:root{
  --bg:#0b1020; --bg-2:#0f172a; --card:#0b1224; --muted:#94a3b8; --text:#e5e7eb;
  --brand:#22d3ee; --brand-2:#6366f1; --ring:rgba(34,211,238,.35);
  --thead:#0f1731; --border:rgba(255,255,255,.06); --input:#0b152c;
}
html[data-theme="light"]{
  --bg:#f5f7fb; --bg-2:#ffffff; --card:#ffffff; --muted:#64748b; --text:#0f172a;
  --thead:#f1f5f9; --border:#e5e7eb; --input:#ffffff; --ring:rgba(99,102,241,.25);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; display:flex; min-height:100%;
  background:
    radial-gradient(1200px 800px at -10% -10%, rgba(99,102,241,.15), transparent 40%),
    radial-gradient(900px 700px at 110% 10%, rgba(34,211,238,.12), transparent 35%),
    var(--bg);
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
}
html[data-theme="light"] body{ background:var(--bg); }

/* ================== MAIN LAYOUT ================== */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; }

.topbar{
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 80%, transparent), color-mix(in srgb, var(--bg) 80%, transparent));
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;
}
.topbar-inner{ padding:14px 24px; display:flex; gap:16px; align-items:center; justify-content:space-between; }
.left-stack{ display:flex; align-items:center; gap:12px; }
.page-title{ font-weight:800; letter-spacing:.3px; font-size:1.25rem; margin:0; }
.hamb{ width:40px; height:40px; border-radius:10px; border:1px solid var(--border);
  background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); }
.hamb:hover{ box-shadow:0 0 0 4px var(--ring); }

.container-p{ padding:26px; max-width:1400px; margin:0 auto; width:100%; }

/* ================== TABLES ================== */
.table{ --bs-table-bg:transparent; --bs-table-color:var(--text); --bs-table-border-color:var(--border); }
.table thead th{ background:var(--thead) !important; color:var(--text) !important; border-color:var(--border) !important; }
.table tbody td,.table tbody tr{ color:var(--text) !important; border-color:var(--border) !important; }
.table-hover tbody tr:hover{ background: color-mix(in srgb, var(--thead) 35%, transparent); }

/* padding horizontales coherentes */
.table thead th:first-child, .table tbody td:first-child { padding-left: 1rem !important; }
.table thead th:last-child,  .table tbody td:last-child  { padding-right: 1rem !important; }

/* ================== TOGGLE ================== */
.theme-toggle{ display:flex; align-items:center; gap:10px; color:var(--muted); }
.toggle{ width:56px; height:30px; background:var(--bg-2); border:1px solid var(--border); border-radius:999px; position:relative; cursor:pointer; }
.toggle .dot{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:linear-gradient(180deg,#fff,#e2e8f0); transition:.2s transform ease,.2s left ease; }
html[data-theme="dark"] .toggle .dot{ background:radial-gradient(circle at 30% 30%, #67e8f9, var(--brand)); }
html[data-theme="light"] .toggle .dot{ left:29px; }

/* ================== CARDS ================== */
.cardx{ background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:0 18px 40px -18px #0006; }
.cardx .card-header{ padding:18px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.muted{ color:var(--muted) }
.search input{ background:var(--input); border:1px solid var(--border); color:var(--text); }

/* ================== TABS BONITOS ================== */
.tabs{
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 80%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
  box-shadow: 0 10px 28px -18px #0006;
  overflow-x: auto;
}
.tabs::-webkit-scrollbar{ height: 8px }
.tabs::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--muted) 30%, transparent); border-radius: 999px }

.tabs .tab-btn{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 14px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.tabs .tab-btn i{ font-size: 18px; opacity: .95; }
.tabs .tab-btn:hover{ color: var(--text); transform: translateY(-1px); }
.tabs .tab-btn.active{ color: color-mix(in srgb, var(--brand-2) 30%, var(--text)); }

.tabs .tabs-indicator{
  position: absolute; bottom: 0; left: 14px; height: 3px;
  width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent);
  transition: left .22s ease, width .22s ease;
}
html[data-theme="light"] .tabs{
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
}

/* ================== GOOGLE PLACES (si lo usas) ================== */
#pae-container, #pae-container * { color-scheme: light !important; }
.pae-shell{ height:38px; border:1px solid #ced4da; border-radius:.375rem; background:#fff; overflow:hidden; }
.pae-shell:focus-within{ border-color:#86b7fe; box-shadow:0 0 0 .25rem rgba(13,110,253,.25); }
.pac-container{ z-index:2000 !important; }

/* ================== SCREENPOP (TOAST) ================== */
.screenpop{
  position: fixed; right: 1rem; bottom: 1rem; z-index: 9999;
  width: 360px; max-width: calc(100vw - 2rem);
  background: var(--card, #fff); color: var(--text, #111);
  border-radius: 18px; border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12), 0 2px 10px rgba(0,0,0,0.06);
  padding: 14px 14px 16px;
  animation: sp-in 220ms ease-out;
}
.screenpop__row{ display:flex; gap:.75rem; align-items:center; margin-bottom:.5rem; }
.screenpop__title{ font-weight:700; line-height:1.15; }
.screenpop__sub{ font-size:.85rem; opacity:.85; line-height:1.25; }
.screenpop__avatar{
  width:42px; height:42px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color:#fff; border:1px solid rgba(255,255,255,.3);
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.screenpop__chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin: .25rem 0 .75rem; }
.screenpop__chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .58rem; border-radius:9999px; font-size:.74rem;
  border:1px solid rgba(0,0,0,0.12);
}
.screenpop__chip--ok{   background: rgba(16,185,129,.12);  border-color: rgba(16,185,129,.28); color:#10b981; }
.screenpop__chip--muted{background: rgba(107,114,128,.10); border-color: rgba(107,114,128,.25); color:#6b7280; }
.screenpop__chip--info{ background: rgba(59,130,246,.12);  border-color: rgba(59,130,246,.28); color:#3b82f6; }
.screenpop__chip--warn{ background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.35); color:#b45309; }

/* Lista vertical de metadatos del popup */
.screenpop__meta{
  list-style: none;
  margin: .25rem 0 .75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.screenpop__meta li{
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
  font-size: .92rem;
  min-width: 0; /* para poder truncar */
}
.screenpop__meta i{
  width: 18px;
  text-align: center;
  opacity: .9;
}
.screenpop__meta .text-truncate{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Avatar con icono (en vez de iniciales) */
.screenpop__avatar--icon{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;             /* tamaño del icono */
  color:#fff;
  background: linear-gradient(135deg, #4A6CF7 0%, #8855FF 100%);
  width:36px;
  height:36px;
  border-radius:50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}

/* --- Breath & spacing --- */
.screenpop {
  max-width: 470px;          /* Opción B: 470–480px */
  padding: 20px;             /* antes 16px; */
  border-radius: 18px;       /* un toque más redondo */
  box-shadow:
    0 10px 25px rgba(15, 23, 42, 0.10),
    0 3px 8px rgba(15, 23, 42, 0.06);
}

.screenpop__header { 
  margin-bottom: 14px;        /* separa header de contenido */
}

.screenpop__body { 
  display: grid;
  row-gap: 14px;              /* más aire entre filas */
}

.screenpop__title { 
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;         /* separa del bloque de datos */
}

.screenpop__sub { 
  margin: 0;                  /* sub ya no lo usamos en vertical — evita doble espacio */
}

.screenpop .kv { 
  display: grid; 
  row-gap: 8px;               /* stack de “tel/ubicación/DID” */
}

.screenpop .kv__row {
  display: flex;
  align-items: center;
  gap: 10px;                  /* icono-texto */
  color: var(--muted-700, #475569);
  font-size: 14px;
}

.screenpop .kv__row i {
  width: 18px;                /* ancho fijo para alinear columnas */
  text-align: center;
  color: var(--muted-500, #64748b);
}

/* chips con un poco más de aire */
.screenpop__chips { 
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.screenpop__chip { 
  padding: 6px 10px;          /* antes 4px 8px; */
  border-radius: 10px;
  font-size: 12.5px;
}

/* Botonera con respiro */
.screenpop__footer { 
  margin-top: 2px;
  gap: 12px;                  /* separa pill principal y búsqueda */
}

.screenpop__pill,
.screenpop__pill--primary {
  width: 44px; height: 44px;  /* un poquito más grandes */
  border-radius: 50%;
  display: grid; place-items: center;
}

/* avatar más “badge” y limpio */
.screenpop__avatar {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8ab4ff, #6e8bff);
  color: white;
  font-weight: 700;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}

/* close discreto */
.screenpop__close {
  top: 10px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(148,163,184,.18);
  color: #334155;
}
.screenpop__close:hover {
  background: rgba(148,163,184,.28);
}

/*Call History Detalles*/
.list-group-item .badge.bg-success,
.list-group-item .badge.bg-secondary {
  border-radius: 999px;
}

.list-group-item .fw-semibold {
  font-size: 0.98rem;
}

.list-group-item + .list-group-item {
  border-top-color: rgba(0,0,0,0.06);
}


@keyframes sp-in { from{ transform: translateY(8px) scale(.98); opacity:0 } to{ transform: translateY(0) scale(1); opacity:1 } }
@keyframes sp-out{ from{ transform: translateY(0) scale(1);   opacity:1 } to{ transform: translateY(8px) scale(.98); opacity:0 } }


</style>
