:root{
  --color-primario: #0d6efd;
  --color-secundario: #20c997;
  --bg-app: #f4f6fb;
  --bg-sidebar: #12172b;
  --text-muted: #6b7280;
  --radius: 14px;
  --shadow-soft: 0 4px 24px rgba(17,24,39,.06);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:var(--fuente-principal, 'Inter'),system-ui,-apple-system,sans-serif;
  background:var(--bg-app);
  color:#1f2430;
}

/* ---------- Conectar los colores de marca con los componentes de Bootstrap ----------
   Bootstrap 5 compila sus botones con variables PROPIAS a nivel de cada
   clase (--bs-btn-bg, --bs-btn-hover-bg, etc.) con el valor ya fijo
   (#0d6efd) en vez de heredar de una variable global — así que definir
   --color-primario en :root, por si solo, nunca cambiaba el color real
   de un botón. Aquí se sobreescriben esas variables de Bootstrap
   directamente para los componentes que SÍ deben seguir el tema
   (primario/enlaces) — los grises/neutros (.btn-secondary, .btn-light,
   .btn-outline-secondary — usados para "Cancelar" y acciones neutras) se
   dejan tal cual, para que no se vean todos pintados del color de acento
   sin importar el tema elegido. */
.btn-primary{
  --bs-btn-bg: var(--color-primario);
  --bs-btn-border-color: var(--color-primario);
  --bs-btn-hover-bg: color-mix(in srgb, var(--color-primario) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--color-primario) 80%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--color-primario) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--color-primario) 70%, black);
  --bs-btn-disabled-bg: var(--color-primario);
  --bs-btn-disabled-border-color: var(--color-primario);
}
.btn-outline-primary{
  --bs-btn-color: var(--color-primario);
  --bs-btn-border-color: var(--color-primario);
  --bs-btn-hover-bg: var(--color-primario);
  --bs-btn-hover-border-color: var(--color-primario);
  --bs-btn-active-bg: var(--color-primario);
  --bs-btn-active-border-color: var(--color-primario);
}
.text-primary{ color:var(--color-primario) !important; }
.bg-primary{ background-color:var(--color-primario) !important; }
.border-primary{ border-color:var(--color-primario) !important; }
a:not(.btn):not(.nav-link):not(.dropdown-item){ color:var(--color-primario); }
a:not(.btn):not(.nav-link):not(.dropdown-item):hover{ color:color-mix(in srgb, var(--color-primario) 80%, black); }
.form-check-input:checked{ background-color:var(--color-primario); border-color:var(--color-primario); }
.form-control:focus, .form-select:focus{
  border-color:var(--color-primario);
  box-shadow:0 0 0 .25rem color-mix(in srgb, var(--color-primario) 25%, transparent);
}
.pagination .page-item.active .page-link{ background-color:var(--color-primario); border-color:var(--color-primario); }
.dropdown-item.active, .dropdown-item:active{ background-color:var(--color-primario); }
.nav-tabs .nav-link.active{ border-bottom:2px solid var(--color-primario); color:var(--color-primario); }
.spinner-border.text-primary{ color:var(--color-primario) !important; }
progress, .progress-bar{ background-color:var(--color-primario); }

/* ---------- Layout general ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:250px;
  background:var(--bg-sidebar);
  color:#c9cee0;
  display:flex;
  flex-direction:column;
  padding:22px 14px;
  flex-shrink:0;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:1.15rem; color:#fff;
  padding:0 8px 22px;
}
.sidebar-brand i{ color:var(--color-secundario); font-size:1.4rem; }
.sidebar-brand-logo{ max-height:34px; max-width:100%; object-fit:contain; }
.btn-colapsar-sidebar{
  margin-left:auto; background:transparent; border:none; color:#8891ac;
  padding:4px; border-radius:6px; line-height:1; flex-shrink:0;
}
.btn-colapsar-sidebar:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sidebar-nav{ display:flex; flex-direction:column; gap:2px; }

/* ---------- Menú colapsado (solo íconos) ----------
   Trucazo con font-size:0 en vez de tener que envolver cada texto de
   cada enlace en un <span> aparte -- los íconos ya tienen su propio
   font-size fijado explícitamente (.nav-link i), así que no se ven
   afectados y el texto (que no tiene ese tipo de regla propia)
   simplemente desaparece. */
.sidebar.collapsed{ width:76px; padding-left:10px; padding-right:10px; }
.sidebar.collapsed .sidebar-brand{ justify-content:center; padding:0 0 22px; }
.sidebar.collapsed .sidebar-brand span,
.sidebar.collapsed .sidebar-brand-logo{ display:none; }
.sidebar.collapsed .btn-colapsar-sidebar{ margin-left:0; }
.sidebar.collapsed .btn-colapsar-sidebar i{ transform:rotate(180deg); }
.sidebar.collapsed .nav-section,
.sidebar.collapsed .nav-group-chevron,
.sidebar.collapsed .badge-proximamente,
.sidebar.collapsed .nav-group-items,
.sidebar.collapsed .badge-dot-nav{ display:none !important; }
.sidebar.collapsed .nav-link,
.sidebar.collapsed .nav-group-toggle{
  font-size:0; justify-content:center; padding:12px 8px; gap:0;
}
.sidebar.collapsed .nav-link i,
.sidebar.collapsed .nav-group-toggle i:first-child{ font-size:1.15rem; }
.nav-section{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#6b7280; margin:16px 10px 6px; }
.nav-link{
  display:flex; align-items:center; gap:10px;
  color:#c9cee0; text-decoration:none;
  padding:10px 12px; border-radius:10px; font-size:.92rem; font-weight:500;
  transition:.15s;
}
.nav-link i{ font-size:1.05rem; width:20px; text-align:center; }
.nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-link.active{ background:var(--color-primario); color:#fff; }
.nav-link-disabled{ cursor:default; opacity:.45; }
.nav-link-disabled:hover{ background:transparent; color:#c9cee0; }
.nav-group-toggle{
  display:flex; align-items:center; gap:10px; width:100%; border:none; background:transparent;
  color:#c9cee0; text-decoration:none; padding:10px 12px; border-radius:10px; font-size:.92rem; font-weight:500;
  transition:.15s; cursor:pointer; text-align:left;
}
.nav-group-toggle i:first-child{ font-size:1.05rem; width:20px; text-align:center; }
.nav-group-toggle:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-group-chevron{ margin-left:auto; font-size:.75rem; transition:transform .2s; }
.nav-group-toggle[aria-expanded="true"] .nav-group-chevron{ transform:rotate(180deg); }
.nav-group-items{ display:flex; flex-direction:column; gap:2px; padding-left:16px; margin:2px 0 4px; border-left:1px solid rgba(255,255,255,.08); margin-left:14px; }
.nav-group-items .nav-link{ font-size:.87rem; padding:8px 10px; }
.badge-proximamente{
  margin-left:auto; font-size:.65rem; font-weight:700; text-transform:uppercase;
  background:rgba(255,255,255,.12); padding:2px 6px; border-radius:6px;
}

.app-content{ flex:1; display:flex; flex-direction:column; min-width:0; }
.app-topbar{
  height:68px; background:#fff; border-bottom:1px solid #eef0f4;
  display:flex; align-items:center; gap:16px; padding:0 24px;
  position:sticky; top:0; z-index:10;
}
.topbar-search{
  flex:1; max-width:420px; display:flex; align-items:center; gap:8px;
  background:#f4f6fb; border-radius:10px; padding:8px 14px; color:var(--text-muted);
}
.topbar-search input{ border:0; background:transparent; outline:0; width:100%; font-size:.9rem; }
.search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:#fff; border-radius:12px; box-shadow:var(--shadow-soft);
  max-height:340px; overflow-y:auto; z-index:50; display:none;
}
.search-results.show{ display:block; }
.search-results a{
  display:block; padding:10px 14px; text-decoration:none; color:#1f2430;
  border-bottom:1px solid #f4f6fb; font-size:.88rem;
}
.search-results a:hover{ background:#f4f6fb; }
.search-results .empty{ padding:14px; color:var(--text-muted); font-size:.85rem; }

.notif-dropdown{ width:320px; padding:0; overflow:hidden; }
.notif-header{ padding:12px 16px; font-weight:700; font-size:.85rem; border-bottom:1px solid #eef0f4; }
.notif-list{ max-height:320px; overflow-y:auto; }
.notif-item{ display:block; padding:10px 16px; text-decoration:none; color:#1f2430; border-bottom:1px solid #f4f6fb; }
.notif-item:hover{ background:#f4f6fb; }
.topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.btn-icon{
  border:0; background:#f4f6fb; width:38px; height:38px; border-radius:10px; position:relative; color:#4b5563;
}
a.btn-icon{ display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:1.1rem; }
.badge-dot{ position:absolute; top:6px; right:7px; width:8px; height:8px; background:#dc3545; border-radius:50%; }
.badge-dot-nav{ display:inline-block; margin-left:6px; padding:1px 7px; font-size:.72rem; font-weight:700; background:#dc3545; color:#fff; border-radius:999px; }
.badge-contador-topbar{ position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; font-size:.65rem; line-height:16px; font-weight:700; text-align:center; background:#dc3545; color:#fff; border-radius:999px; }
.user-chip{
  display:flex; align-items:center; gap:8px; border:0; background:transparent; font-weight:600; font-size:.9rem;
}
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--color-primario); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}

.app-main{ padding:26px 28px 60px; }

.page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px; }
.page-header h2{ font-weight:800; margin:0; }

/* ---------- KPI cards ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.kpi-card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-soft);
  padding:20px; display:flex; align-items:center; gap:16px;
}
.kpi-icon{
  width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:#fff; flex-shrink:0;
}
.kpi-blue .kpi-icon{ background:linear-gradient(135deg,#0d6efd,#3b82f6); }
.kpi-green .kpi-icon{ background:linear-gradient(135deg,#198754,#20c997); }
.kpi-orange .kpi-icon{ background:linear-gradient(135deg,#fd7e14,#ffb020); }
.kpi-purple .kpi-icon{ background:linear-gradient(135deg,#6f42c1,#a855f7); }
.kpi-value{ font-size:1.5rem; font-weight:800; line-height:1.1; }
.kpi-label{ color:var(--text-muted); font-size:.82rem; margin-top:2px; }

/* ---------- Panels ---------- */
.panel{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-soft);
  padding:22px;
}
.panel h5{ font-weight:700; margin-bottom:16px; font-size:1rem; }

/* ---------- Tables ---------- */
.table-modern{ margin-bottom:0; }
.table-modern thead th{ font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); border-bottom:1px solid #eef0f4; }
.table-modern td{ vertical-align:middle; font-size:.9rem; border-bottom:1px solid #f4f6fb; }

.badge-pill{ padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:700; }
.badge-green{ background:#dcfce7; color:#166534; }
.badge-orange{ background:#ffedd5; color:#9a3412; }
.badge-red{ background:#fee2e2; color:#991b1b; }
.badge-blue{ background:#dbeafe; color:#1e40af; }
.badge-gray{ background:#f1f5f9; color:#475569; }
.badge-purple{ background:#ede9fe; color:#5b21b6; }
.text-purple{ color:#6f42c1; }

/* ---------- Login: estilo "centrado" (por defecto) ---------- */
.login-body{ min-height:100vh; }
.login-estilo-centrado{
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at top left, #1c2340, #0b0e1c);
  padding:20px;
}
.login-card{
  background:#fff; border-radius:20px; padding:40px; width:100%; max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-brand{ text-align:center; margin-bottom:24px; }
.login-brand p{ color:var(--text-muted); font-size:.85rem; margin:0; }
/* Clases compartidas por los 5 diseños para el logo/icono/nombre */
.login-brand-icono{ font-size:2.2rem; color:var(--color-primario); display:block; }
.login-brand-nombre{ font-size:1.4rem; font-weight:800; margin:8px 0 2px; }
.login-logo-img{ max-height:56px; max-width:100%; object-fit:contain; }

/* ---------- Login: estilo "dividido" (panel partido, marca + formulario) ---------- */
.login-dividido{ display:flex; min-height:100vh; }
.login-dividido-marca{
  flex:1; display:flex; align-items:center; justify-content:center; padding:40px;
  background:linear-gradient(135deg, var(--color-primario), var(--color-secundario));
}
.login-dividido-marca-inner{ color:#fff; text-align:center; max-width:360px; }
.login-dividido-marca-inner .login-brand-icono{ color:#fff; font-size:3rem; }
.login-dividido-marca-inner .login-brand-nombre{ color:#fff; font-size:2rem; margin:14px 0 8px; }
.login-dividido-eslogan{ color:rgba(255,255,255,.85); font-size:1rem; margin:0; }
.login-dividido-form{ flex:1; display:flex; align-items:center; justify-content:center; background:#fff; padding:40px; }
.login-dividido-form-inner{ width:100%; max-width:360px; }
@media (max-width: 767px){
  .login-dividido{ flex-direction:column; }
  .login-dividido-marca{ flex:none; padding:32px 20px; }
}

/* ---------- Login: estilo "fondo_completo" (tarjeta translucida) ---------- */
.login-fondo-completo{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(160deg, var(--color-primario), var(--color-secundario));
}
.login-glass-card{
  background:rgba(255,255,255,.14); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.3); border-radius:24px; padding:40px; width:100%; max-width:400px; color:#fff;
}
.login-glass-card .login-brand-icono{ color:#fff; }
.login-glass-card .login-brand-nombre{ color:#fff; }
.login-glass-eslogan{ color:rgba(255,255,255,.85); font-size:.85rem; margin:0 0 8px; }
.login-glass-card .form-label{ color:rgba(255,255,255,.9); }
.login-glass-card .form-control{ background:rgba(255,255,255,.92); border:none; }

/* ---------- Login: estilo "minimalista" (sin tarjeta, mucho espacio) ---------- */
.login-minimalista{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:#fff; padding:20px; }
.login-minimalista-inner{ width:100%; max-width:340px; }
.login-minimalista .login-brand-icono{ font-size:1.8rem; }
.login-minimalista .login-brand-nombre{ font-size:1.1rem; margin:6px 0 0; }
.login-minimalista .form-control{ border:none; border-bottom:2px solid #e5e7eb; border-radius:0; padding-left:2px; }
.login-minimalista .form-control:focus{ box-shadow:none; border-color:var(--color-primario); }

/* ---------- Login: estilo "lateral" (formulario angosto + panel decorativo) ---------- */
.login-lateral{ display:flex; min-height:100vh; }
.login-lateral-form{ width:440px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:#fff; }
.login-lateral-form-inner{ width:100%; max-width:340px; }
.login-lateral-decor{
  flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(200deg, var(--color-primario), var(--color-secundario));
}
.login-lateral-decor-circulo{ position:absolute; border-radius:50%; background:rgba(255,255,255,.1); }
.login-lateral-decor-c1{ width:320px; height:320px; top:-80px; right:-80px; }
.login-lateral-decor-c2{ width:220px; height:220px; bottom:-60px; left:-60px; background:rgba(255,255,255,.08); }
.login-lateral-decor-c3{ width:140px; height:140px; top:40%; left:15%; background:rgba(255,255,255,.06); }
.login-lateral-decor-texto{ position:relative; z-index:1; color:#fff; text-align:center; max-width:320px; font-size:1.15rem; font-weight:600; padding:0 20px; }
@media (max-width: 900px){
  .login-lateral-decor{ display:none; }
  .login-lateral-form{ width:100%; }
}

@media (max-width: 992px){
  .sidebar{ position:fixed; left:-260px; top:0; bottom:0; z-index:100; transition:.2s; }
  .sidebar.open{ left:0; }
}

/* ---------- Dialer flotante ---------- */
#dialerFlotante{ position:fixed; bottom:24px; right:24px; z-index:1050; }
#btnAbrirDialer{
  width:56px; height:56px; border-radius:50%; border:none;
  background:var(--color-primario); color:#fff; font-size:1.4rem;
  box-shadow:0 6px 20px rgba(0,0,0,.25); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s;
}
#btnAbrirDialer:hover{ transform:scale(1.06); }
#panelDialer{
  position:absolute; bottom:68px; right:0; width:260px;
  background:#fff; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.25);
  overflow:hidden;
}
.dialer-header{
  background:var(--bg-sidebar); color:#fff; padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between; font-size:.9rem; font-weight:600;
}
.dialer-header button{ background:transparent; border:none; color:#fff; opacity:.8; cursor:pointer; }
.dialer-header button:hover{ opacity:1; }
.dialer-body{ padding:14px; }
.dialer-input-wrap{ display:flex; gap:6px; margin-bottom:10px; }
#dialerNumero{
  flex:1; border:1px solid #e5e7eb; border-radius:8px; padding:8px 10px;
  font-size:1.1rem; text-align:center; letter-spacing:.5px;
}
#btnBorrarDialer{
  border:1px solid #e5e7eb; background:#f8f9fb; border-radius:8px; width:38px; color:#6b7280; cursor:pointer;
}
#btnBorrarDialer:hover{ background:#eef0f4; }
.dialer-teclado{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:12px; }
.dialer-tecla{
  border:1px solid #eef0f4; background:#f8f9fb; border-radius:10px; padding:10px 0;
  font-size:1.15rem; font-weight:600; color:#1f2430; cursor:pointer; line-height:1.1;
}
.dialer-tecla span{ display:block; font-size:.6rem; font-weight:400; color:#9ca3af; letter-spacing:.5px; }
.dialer-tecla:hover{ background:#eef0f4; }
.dialer-tecla:active{ background:var(--color-primario); color:#fff; }
.dialer-tecla:active span{ color:#fff; }
@media (max-width: 576px){
  #dialerFlotante{ bottom:16px; right:16px; }
  #panelDialer{ width:calc(100vw - 32px); right:-8px; }
}

/* ---------- Aviso de estado de llamada ---------- */
#toastLlamada{
  position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:1100;
  background:#fff; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.2);
  padding:12px 16px; display:flex; align-items:center; gap:12px; min-width:280px; max-width:90vw;
  border-left:5px solid #6b7280;
}
#toastLlamada.estado-llamando{ border-left-color:#0d6efd; }
#toastLlamada.estado-exito{ border-left-color:#198754; }
#toastLlamada.estado-error{ border-left-color:#dc3545; }
.toast-llamada-icono{ font-size:1.4rem; color:#6b7280; flex-shrink:0; }
#toastLlamada.estado-llamando .toast-llamada-icono{ color:#0d6efd; animation:pulso-llamada 1s infinite; }
#toastLlamada.estado-exito .toast-llamada-icono{ color:#198754; }
#toastLlamada.estado-error .toast-llamada-icono{ color:#dc3545; }
@keyframes pulso-llamada{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.toast-llamada-texto{ flex:1; }
.toast-llamada-titulo{ font-weight:700; font-size:.92rem; }
.toast-llamada-detalle{ font-size:.8rem; color:#6b7280; margin-top:1px; }
#btnCerrarToastLlamada{ background:transparent; border:none; color:#9ca3af; cursor:pointer; flex-shrink:0; }
#btnCerrarToastLlamada:hover{ color:#374151; }

/* ============================================================
   Esqueleto de carga (skeleton loading) -- reemplaza el texto plano
   "Cargando..." con bloques grises animados que insinúan la forma
   del contenido real. Uso: en vez de una fila con "Cargando...",
   generar varias filas con celdas <div class="skeleton-bar"> del
   ancho que corresponda. Ver helper JS filasEsqueleto() en app.js.
   ============================================================ */
.skeleton-bar{
  display:inline-block; height:14px; border-radius:6px; background:#e9ecef;
  background-image:linear-gradient(90deg, #e9ecef 0px, #f5f6f8 40px, #e9ecef 80px);
  background-size:600px 100%; animation:skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer{ 0%{ background-position:-300px 0; } 100%{ background-position:300px 0; } }