/* ============================================================================
   PROGRAMA 2 — public/css/admin.css
   Estilo compartido: login, registro público y panel admin.
   Paleta consistente con el resto del ecosistema GDV Conect (navy + naranja).
   ACTUALIZADO 21-07-2026: + menú hamburguesa y overlay para sidebar móvil.
============================================================================ */

:root {
  --navy-900: #0b1f3a;
  --navy-800: #123057;
  --navy-700: #1a4a8a;
  --azul-hover: #023e8a;
  /* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 21-07-2026 =====
     Colores institucionales reales de GDV Conect, tomados directo de
     public/css/login-custom.css del SaaS (botón "Iniciar Sesión" de
     micuenta.gdvconect.com). ANTES: --naranja: #f77f00 (no correspondía
     a la identidad de la empresa). AHORA: índigo institucional #4c51bf,
     con sus 2 variantes de hover/presionado, exactas al SaaS. */
  --naranja: #4c51bf;        /* antes #f77f00 — se deja el mismo nombre de variable a propósito para no tener que tocar cada referencia en el archivo */
  --naranja-dark: #3b3f8e;   /* estado presionado/activo — igual al :active del SaaS */
  --naranja-hover: #3f44a3;  /* NUEVO: estado hover — un poco más oscuro, como pediste */
  /* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */
  --gris-texto: #5b6472;
  --gris-borde: #e2e6ec;
  --fondo: #f4f6fa;
  --verde: #1a9e5c;
  --rojo: #d64545;
}

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

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  background: var(--fondo);
  color: var(--navy-900);
}

a { color: inherit; }

/* ---------- Páginas centradas (login / registro) ---------- */
.center-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--naranja) 160%);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(11, 31, 58, 0.35);
  padding: 36px 32px;
}

.auth-brand {
  text-align: center;
  margin-bottom: 22px;
}

.auth-brand .logo-text {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy-900);
}
.auth-brand .logo-text span { color: var(--naranja); }
.auth-brand .tag { font-size: 13px; color: var(--gris-texto); margin-top: 4px; }

.form-field { margin-bottom: 16px; }
.form-field label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--navy-900); margin-bottom: 6px;
}
.form-field input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--gris-borde);
  border-radius: 9px; font-size: 14.5px; transition: border-color .15s, box-shadow .15s;
}
.form-field input:focus {
  outline: none; border-color: var(--azul-hover);
  box-shadow: 0 0 0 3px rgba(2, 62, 138, 0.12);
}
.form-hint { font-size: 12px; color: #9aa3b0; margin-top: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 21-07-2026 =====
     Antes: padding 12px 18px, font-size 15px, border-radius 10px — muy
     grandes comparado con el estilo discreto del SaaS (customers.php).
     Se reduce para que se vean parejos con ese ejemplo. */
  padding: 10px 16px; border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  /* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */
  transition: transform .05s, background .15s, box-shadow .15s;
}
/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 21-07-2026 =====
   FIX: width:100% vivía en .btn-primary y se filtraba a TODOS los botones
   primarios (Crear Cliente, Crear Usuario, etc.), no solo al del login —
   por eso se veían gigantes. Ahora el ancho completo es una clase aparte
   (.btn-block), y el box-shadow es sutil (como el SaaS) en vez del efecto
   "botón 3D" grueso de antes. */
.btn-primary { background: var(--naranja); color: #fff; box-shadow: 0 2px 5px rgba(76,81,191,0.3); }
.btn-primary:hover { background: var(--naranja-hover); box-shadow: 0 4px 10px rgba(76,81,191,0.35); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(76,81,191,0.3); background: var(--naranja-dark); }
.btn-primary:disabled { background: #d1d5db; box-shadow: none; cursor: not-allowed; }
.btn-block { width: 100%; }
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */
.btn-secondary { background: #eef2f8; color: var(--navy-900); }
.btn-secondary:hover { background: #e2e8f2; }
.btn-danger { background: #fde8e8; color: var(--rojo); }
.btn-danger:hover { background: #fbd5d5; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 6px; }

.alert {
  padding: 12px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px;
  display: none;
}
.alert.show { display: block; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }

.auth-footer-link { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--gris-texto); }
.auth-footer-link a { color: var(--azul-hover); font-weight: 600; text-decoration: none; }
.auth-footer-link a:hover { text-decoration: underline; }

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

.sidebar {
  width: 250px; flex-shrink: 0;
  background: var(--navy-900);
  color: #cfd8e8;
  padding: 22px 16px;
  display: flex; flex-direction: column;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 24px; }
.sidebar .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--naranja); }
.sidebar .brand .name { font-weight: 800; font-size: 17px; color: #fff; }
.sidebar .brand .name span { color: var(--naranja); }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px; margin-bottom: 4px;
  font-size: 14.5px; font-weight: 600; color: #b7c2d9;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.active { background: var(--naranja); color: #fff; }

.sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.sidebar-footer .admin-name { font-size: 13.5px; color: #fff; font-weight: 600; }
.sidebar-footer .admin-email { font-size: 12px; color: #8b96ab; margin-bottom: 10px; }

.main-area { flex: 1; min-width: 0; }

.topbar {
  background: #fff; border-bottom: 1px solid var(--gris-borde);
  padding: 18px 28px; display: flex; align-items: center; justify-content: space-between;
}
.topbar h1 { font-size: 19px; font-weight: 800; }

.content { padding: 24px 28px 48px; }

/* ---------- Cards / stats ---------- */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card {
  background: #fff; border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(11,31,58,0.05); border-left: 4px solid var(--azul-hover);
}
.stat-card .stat-value { font-size: 26px; font-weight: 800; color: var(--navy-900); }
.stat-card .stat-label { font-size: 12.5px; color: var(--gris-texto); margin-top: 2px; }

.card {
  background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(11,31,58,0.05);
  overflow: hidden;
}
.card-header {
  padding: 18px 20px; border-bottom: 1px solid var(--gris-borde);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.card-header h2 { font-size: 16px; font-weight: 700; }

.search-box {
  padding: 9px 14px; border: 1px solid var(--gris-borde); border-radius: 9px;
  font-size: 13.5px; min-width: 240px;
}
.search-box:focus { outline: none; border-color: var(--azul-hover); }

/* ---------- Tabla ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.8px; }
thead th {
  text-align: left; padding: 12px 20px; background: #f8f9fc;
  color: var(--gris-texto); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
}
tbody td { padding: 13px 20px; border-top: 1px solid var(--gris-borde); }
tbody tr:hover { background: #fbfbfd; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 700;
}
.badge-on { background: #e6f7ed; color: var(--verde); }
.badge-off { background: #f1f2f5; color: var(--gris-texto); }

.toggle-switch {
  position: relative; width: 46px; height: 25px; cursor: pointer;
}
.toggle-switch input { display: none; }
/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 21-07-2026 =====
   V2: colores más vivos y con más presencia — gris sólido apagado,
   verde vivo encendido, sombra en el thumb para efecto "pill" 3D
   (como el ejemplo visual que mandó el cliente). */
.toggle-switch .track {
  position: absolute; inset: 0; background: #b9c0cc; border: none;
  border-radius: 100px; transition: background .15s;
  box-shadow: inset 0 1px 2px rgba(11,31,58,0.15);
}
.toggle-switch input:checked + .track { background: #22c55e; }
.toggle-switch .thumb {
  position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  background: #fff; border-radius: 50%; transition: left .15s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.toggle-switch input:checked ~ .thumb { left: 23px; }
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

.empty-state { padding: 48px 20px; text-align: center; color: var(--gris-texto); font-size: 14px; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(11,31,58,0.5);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: #fff; border-radius: 16px; width: 100%; max-width: 460px;
  padding: 28px; max-height: 90vh; overflow-y: auto;
}
.modal-box h2 { font-size: 18px; margin-bottom: 18px; }
.modal-actions { display: flex; gap: 10px; margin-top: 22px; }
.modal-actions .btn { flex: 1; }
.checkbox-field { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.checkbox-field input { width: 16px; height: 16px; }
.checkbox-field label { font-size: 13.5px; font-weight: 600; }

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 21-07-2026 =====
   Menú hamburguesa (botón) y overlay oscuro para el sidebar en móvil.
   Ocultos por defecto en escritorio; se activan dentro del @media de abajo. */
.menu-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: var(--navy-900);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(11,31,58,0.25);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11,31,58,0.45);
  z-index: 45;
}
.sidebar-overlay.show { display: block; }
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

@media (max-width: 720px) {
  .sidebar { position: fixed; left: -260px; top: 0; bottom: 0; z-index: 50; transition: left .2s; width: 250px; }
  .sidebar.open { left: 0; }
  /* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 21-07-2026 ===== */
  .menu-toggle { display: flex; }
  .topbar { padding-left: 64px; } /* deja espacio para que el botón no tape el título */
  /* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */
  .content { padding: 18px; }
  table { font-size: 12.5px; }
  thead th, tbody td { padding: 10px 12px; }
  /* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 29-07-2026 (HAMBURGUESA PORTAL CLIENTE) =====
     ANTES: .portal-sidebar no tenía NINGUNA regla mobile -- nunca se
     construyó el hamburguesa para el portal cliente (solo se hizo para el
     admin el 21-jul), por eso se veía el sidebar completo empujando el
     contenido en vez de un botón que lo abra/cierre. Mismo patrón exacto
     que .sidebar de arriba. */
  .portal-sidebar { position: fixed; left: -260px; top: 0; bottom: 0; z-index: 50; transition: left .2s; width: 250px; }
  .portal-sidebar.open { left: 0; }
  /* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */
}

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 21-07-2026 (LOGIN ÚNICO) =====
   Header y footer fijos del login único + gradiente de marca del CRM2 +
   layout de la pantalla "Mi Cuenta" del portal de clientes.
============================================================================ */

/* ---------- Header fijo (logo + texto) ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 84px;
  background: #fff;
  border-bottom: 1px solid var(--gris-borde);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  z-index: 40;
}
.site-header .logo-img {
  height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
}
.site-header .header-text {
  font-size: 12.5px;
  color: var(--gris-texto);
  text-align: right;
  line-height: 1.5;
}
.site-header .header-text a { color: var(--azul-hover); font-weight: 600; text-decoration: none; }
.site-header .header-text a:hover { text-decoration: underline; }

/* ---------- Fondo con gradiente de marca del CRM2 ----------
   3 colores, ángulo 176°: blanco -> #add7f6 (69%) -> negro (100%).
   Diferencia visualmente al CRM2 del SaaS (que usa su propio gradiente azul). */
.login-page {
  min-height: 100vh;
  padding-top: 84px;   /* deja espacio para el header fijo */
  padding-bottom: 52px; /* deja espacio para el footer fijo (colapsado) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(176deg, #ffffff 0%, #add7f6 69%, #000000 100%);
}

/* ---------- Footer fijo, expandible (pestaña "Legales") ---------- */
.site-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 1px solid var(--gris-borde);
  z-index: 40;
  max-height: 52px;
  overflow: hidden;
  transition: max-height .25s ease;
}
.site-footer.open { max-height: 70vh; overflow-y: auto; }

.footer-tab {
  height: 52px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; user-select: none;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--navy-900);
}
.footer-tab .tab-icon { transition: transform .2s; }
.site-footer.open .footer-tab .tab-icon { transform: rotate(180deg); }

.footer-content {
  padding: 8px 24px 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px; max-width: 900px; margin: 0 auto;
}
.footer-content h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--navy-900); margin-bottom: 8px;
}
.footer-content ul { list-style: none; }
.footer-content li { margin-bottom: 4px; }
.footer-content a { font-size: 13px; color: var(--gris-texto); text-decoration: none; }
.footer-content a:hover { color: var(--azul-hover); }

@media (max-width: 720px) {
  .site-header { padding: 0 16px; height: 68px; }
  .site-header .logo-img { height: 34px; }
  .site-header .header-text { font-size: 11px; max-width: 42%; }
  .login-page { padding-top: 68px; }
}

/* ---------- Portal de clientes ("Mi Cuenta") ---------- */
.portal-shell { display: flex; min-height: 100vh; }
.portal-sidebar {
  width: 250px; flex-shrink: 0;
  background: var(--navy-900); color: #cfd8e8;
  padding: 22px 16px; display: flex; flex-direction: column;
  min-height: 100vh;
}
.portal-sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 24px; }
.portal-sidebar .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--naranja); }
.portal-sidebar .brand .name { font-weight: 800; font-size: 17px; color: #fff; }
.portal-sidebar .brand .name span { color: var(--naranja); }
.portal-sidebar .sidebar-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.portal-sidebar .admin-name { font-size: 13.5px; color: #fff; font-weight: 600; }
.portal-sidebar .admin-email { font-size: 12px; color: #8b96ab; margin-bottom: 10px; }

.module-card {
  background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(11,31,58,0.05);
  padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative;
}
.module-card .module-icon { font-size: 26px; }
.module-card h3 { font-size: 15px; font-weight: 700; color: var(--navy-900); }
.module-card p { font-size: 13px; color: var(--gris-texto); line-height: 1.45; }
.module-card .soon-badge {
  position: absolute; top: 16px; right: 16px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  background: #f1f2f5; color: var(--gris-texto); padding: 3px 8px; border-radius: 100px;
}
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 21-07-2026 =====
   Fix: el sidebar no ocupaba toda la altura de la pantalla en escritorio.
   Causa: #sidebarMount (el div vacío donde sidebar.js inyecta el menú) no
   participaba del layout flex de .app-shell, así que el <aside> interno
   solo medía su propio contenido en vez de estirarse a pantalla completa.
   Fix: display:contents hace que #sidebarMount "desaparezca" del layout y
   el <aside> se vuelve hijo directo del flex container -> se estira igual
   que .main-area. + position:sticky para que se quede fijo si hay scroll. */
#sidebarMount { display: contents; }

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 29-07-2026 (FIX SIDEBAR FIJO) =====
   ANTES: .sidebar usaba position:sticky. Funcionaba en páginas cortas, pero
   se rompía en páginas largas nuevas (agent-usage.html, reports.html, tablas
   con 50 filas) -- el sidebar es hijo de un flex container (.app-shell) que
   se estira a la altura del contenido más alto (.main-area), así que el
   propio <aside> terminaba siendo tan alto como TODA la página. El menú
   (arriba) y el pie con "Cerrar sesión" (abajo, empujado por margin-top:auto)
   quedaban a miles de píxeles de distancia dentro de esa caja gigante, y
   sticky solo mantenía pegada la caja completa, no garantizaba que el menú
   seguera visible en pantalla durante todo el scroll.
   FIX: position:fixed (saca al sidebar del flujo normal por completo, se
   ancla directo a la ventana) + .main-area con margin-left para no quedar
   tapada. Mismo patrón para .sidebar (admin) y .portal-sidebar (cliente).
   Mobile (@media max-width:720px) NO se toca -- ya usa su propio mecanismo
   de hamburguesa con position:fixed + left:-260px/0, eso sigue igual. */
@media (min-width: 721px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
  }
  .portal-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
  }
  .main-area {
    margin-left: 250px;
  }
}
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 21-07-2026 =====
   Ojo mostrar/ocultar contraseña — usado en login.html (y disponible para
   cualquier <input type="password"> envuelto en .password-wrapper). */
.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 42px; }
.password-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 16px;
  line-height: 1; padding: 4px; color: var(--gris-texto);
}
.password-toggle:hover { color: var(--navy-900); }
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 27-07-2026 (WIZARD PORTAL CLIENTE) =====
   Estilos para el wizard multi-página de "Editar mi agente" en el portal
   cliente (/portal/agents), + popups encadenados de proveedor de voz y
   transferencia a humano. Solo se AGREGA — no se toca ningún bloque anterior.
   Verificado antes de guardar: sidebar sticky, hamburguesa y toggle-switch
   siguen intactos arriba en este mismo archivo. */

.wizard-steps {
  display: flex; align-items: center; gap: 8px; margin-bottom: 22px;
}
.wizard-step-dot {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12.5px; font-weight: 800;
  background: #eef0f6; color: var(--gris-texto); border: 2px solid #eef0f6;
  flex-shrink: 0; transition: all .2s ease;
}
.wizard-step-dot.active {
  background: var(--indigo-600, #4c51bf); border-color: var(--indigo-600, #4c51bf); color: #fff;
}
.wizard-step-dot.done {
  background: #fff; border-color: var(--indigo-600, #4c51bf); color: var(--indigo-600, #4c51bf);
}
.wizard-step-line {
  flex: 1; height: 2px; background: #eef0f6; border-radius: 2px;
}
.wizard-step-line.done { background: var(--indigo-600, #4c51bf); }
.wizard-step-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--gris-texto); text-align: center; margin-top: 20px;
}

.wizard-page { display: none; }
.wizard-page.active { display: block; }

.radio-card-group { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 6px; }
.radio-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border: 1.5px solid var(--gris-borde); border-radius: 11px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.radio-card:hover { border-color: var(--indigo-600, #4c51bf); }
.radio-card input[type="radio"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--indigo-600, #4c51bf); }
.radio-card.selected {
  border-color: var(--indigo-600, #4c51bf);
  background: rgba(76, 81, 191, .05);
}
.radio-card-title { font-size: 14px; font-weight: 700; color: var(--navy-900); margin-bottom: 2px; }
.radio-card-desc { font-size: 12.5px; color: var(--gris-texto); line-height: 1.4; }

.wizard-info-banner {
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 10px;
  padding: 12px 14px; font-size: 12.5px; color: var(--navy-900); margin-bottom: 16px; line-height: 1.5;
}
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 27-07-2026 (PAGINACION + LEIDOS) =====
   Estilos para: filtro Todos/No leídos/Leídos en la tarjeta de solicitudes,
   barra de paginación reutilizable (solicitudes y tabla de agentes), y
   resaltado de fila no leída. Solo se AGREGA, nada anterior se modifica. */

.filter-btn-group { display: flex; gap: 6px; }
.filter-btn {
  padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--gris-borde);
  background: #fff; color: var(--gris-texto); font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all .15s ease;
}
.filter-btn:hover { border-color: var(--indigo-600, #4c51bf); }
.filter-btn.active {
  background: var(--indigo-600, #4c51bf); border-color: var(--indigo-600, #4c51bf); color: #fff;
}

.row-unread { background: #caf0f8; }
.row-unread:hover { background: #b8e8f0; }

.pagination-bar {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 14px 0 4px; flex-wrap: wrap;
}
.page-btn {
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px;
  border: 1.5px solid var(--gris-borde); background: #fff; color: var(--navy-900);
  font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .15s ease;
}
.page-btn:hover:not(:disabled) { border-color: var(--indigo-600, #4c51bf); color: var(--indigo-600, #4c51bf); }
.page-btn.active {
  background: var(--indigo-600, #4c51bf); border-color: var(--indigo-600, #4c51bf); color: #fff;
}
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-ellipsis { padding: 0 4px; color: var(--gris-texto); font-size: 12.5px; }
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 27-07-2026 (PAGINA CONFIGURAR AGENTE) =====
   El popup "Configurar agente" se convirtió en página completa
   (/admin/agents/configure?id=), manteniendo el mismo sidebar/topbar/content
   que el resto del admin. Solo se AGREGA -- nada anterior se modifica. */

.back-link {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  color: var(--indigo-600, #4c51bf); text-decoration: none; margin-bottom: 6px;
}
.back-link:hover { text-decoration: underline; }

.page-subtitle {
  font-size: 13px; color: var(--gris-texto); font-weight: 600; margin-top: 2px;
}

.form-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
}
@media (max-width: 720px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 28-07-2026 (LAYOUT PAGINA CONFIGURAR AGENTE) =====
   Grid de 2 tarjetas por fila (1 en móvil), padding interno para que los
   campos no queden pegados al borde, secciones plegables tipo acordeón, y
   botones de acción con ancho natural (no 100%) en vez de .modal-actions
   (esa clase fuerza flex:1 en los botones y aquí no lo queremos). Solo se
   AGREGA -- nada anterior se modifica. */

.config-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start;
}
@media (max-width: 900px) {
  .config-grid { grid-template-columns: 1fr; }
}

.card-header.collapsible { cursor: pointer; user-select: none; }
.card-header.collapsible:hover { background: #fafbfd; }
.collapse-chevron {
  font-size: 22px; line-height: 1; color: var(--indigo-600, #4c51bf); font-weight: 800;
  transition: transform .2s ease; flex-shrink: 0; width: 22px; text-align: center;
}
.collapse-chevron.is-open { transform: rotate(180deg); }

.card-body {
  padding: 8px 20px 20px;
}
.card-body.is-collapsed { display: none; }

.page-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

@media (max-width: 480px) {
  .page-actions .btn { width: auto; flex: 0 1 auto; }
}
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 28-07-2026 (TAREA 2: SELECTOR DE VOZ) =====
   Cuadricula de tarjetas de voz para el selector de Retell (y futuro Vapi).
   Reutiliza la paleta ya usada en .radio-card pero en formato grid compacto
   con botón de preview de audio. Solo se AGREGA. */

.voice-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px; margin: 10px 0 4px;
}
.voice-card {
  border: 1.5px solid var(--gris-borde); border-radius: 10px; padding: 12px 14px;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.voice-card:hover { border-color: var(--indigo-600, #4c51bf); }
.voice-card.selected {
  border-color: var(--indigo-600, #4c51bf); background: rgba(76, 81, 191, .05);
}
.voice-card-name { font-size: 13.5px; font-weight: 700; color: var(--navy-900); margin-bottom: 3px; }
.voice-card-meta { font-size: 11.5px; color: var(--gris-texto); text-transform: capitalize; margin-bottom: 8px; }
.voice-preview-btn { width: 100%; }
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 28-07-2026 (AJUSTE UX SELECTOR DE VOZ) =====
   La tarjeta de selector de voz de Retell pasa de grid de tarjetas 2x2 a
   lista tipo tabla con scroll interno (con 20-30+ voces el grid hacía la
   página kilométrica). También: la tarjeta ahora ocupa el ancho completo
   de la fila (.full-row) dentro de .config-grid, y el botón "Recargar
   catálogo" se movió al header. Solo se AGREGA -- las clases viejas
   .voice-card-grid/.voice-card quedan sin uso pero no se borran. */

.card.full-row { grid-column: 1 / -1; }

.card-header-right { display: flex; align-items: center; gap: 10px; }

.voice-list-scroll {
  max-height: 420px; overflow-y: auto;
  border: 1px solid var(--gris-borde); border-radius: 10px;
}
.voice-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--gris-borde);
  cursor: pointer; transition: background .15s ease;
}
.voice-row:last-child { border-bottom: none; }
.voice-row:hover { background: #f7f8fc; }
.voice-row.selected { background: rgba(76, 81, 191, .06); }
.voice-row-name { font-size: 13.5px; font-weight: 700; color: var(--navy-900); }
.voice-row-meta { font-size: 11.5px; color: var(--gris-texto); text-transform: capitalize; margin-top: 2px; }
.voice-row-actions { flex-shrink: 0; }
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 28-07-2026 (TAREA 3: ESTADISTICAS DE USO) =====
   Tarjetas pequeñas de números para la tarjeta "Estadísticas de uso" en
   agent-configure.html (admin) y, cuando se construya, en /portal/reports
   del cliente. Solo se AGREGA. */

.usage-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.usage-stat-box {
  border: 1px solid var(--gris-borde); border-radius: 10px; padding: 16px 14px; text-align: center;
}
.usage-stat-value { font-size: 22px; font-weight: 800; color: var(--navy-900); }
.usage-stat-label { font-size: 11.5px; color: var(--gris-texto); margin-top: 4px; }
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 29-07-2026 (BOTONES EN TABLA AGENTES) =====
   "Configurar" y "Estadísticas" en fila horizontal compacta dentro de la
   celda de acciones de "Todos los agentes" -- evita que la columna se
   estire de más (la tabla ya tiene scroll horizontal propio, esto solo
   controla el tamaño de los botones dentro de su celda). Funciona igual en
   vista de escritorio y en el scroll horizontal de celular. */
.table-actions-row {
  display: flex; gap: 6px; white-space: nowrap;
}
.table-actions-row .btn { padding: 6px 10px; font-size: 12px; }
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 29-07-2026 (HISTORIAL DE LLAMADAS) =====
   La tarjeta "Llamadas totales" (usage-stats-grid) ahora puede ser
   clickeable para abrir el detalle de llamadas individuales. Solo se
   AGREGA -- las demás tarjetas del grid siguen sin click (no llevan esta
   clase). */
.usage-stat-clickable {
  cursor: pointer; transition: border-color .15s ease, transform .1s ease;
}
.usage-stat-clickable:hover { border-color: var(--indigo-600, #4c51bf); }
.usage-stat-clickable:active { transform: scale(0.98); }
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 29-07-2026 (TAREA C: DESGLOSE POR MES) =====
   Efecto de transición al pasar de la tabla "Desglose de costo por mes" al
   "Historial de llamadas" filtrado (drill-down), y estilo de fila
   hover/seleccionable para la tabla de meses. Solo se AGREGA. */
.fade-transition { transition: opacity .2s ease; }
.fade-transition.fade-out { opacity: 0; }

.month-row { cursor: pointer; transition: background .15s ease; }
.month-row:hover { background: #f7f8fc; }
.month-row.selected { background: rgba(76, 81, 191, .08); }
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 29-07-2026 (PANEL DE DETALLE DE LLAMADA) =====
   Panel deslizante desde la derecha para ver el detalle completo de una
   llamada (portal cliente, /portal/reports) -- mismo patrón visual que el
   panel de detalle del propio dashboard de Retell. Solo se AGREGA. */
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: #f7f8fc; }

.call-detail-overlay {
  position: fixed; inset: 0; background: rgba(11,31,58,0.5);
  display: none; z-index: 300;
}
.call-detail-overlay.show { display: block; }

.call-detail-panel {
  position: fixed; top: 0; right: -480px; width: 440px; max-width: 92vw;
  height: 100vh; background: #fff; box-shadow: -6px 0 28px rgba(0,0,0,.18);
  z-index: 301; transition: right .3s ease; overflow-y: auto;
  display: flex; flex-direction: column;
}
.call-detail-panel.show { right: 0; }

.call-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--gris-borde); flex-shrink: 0;
}
.call-detail-header h2 { font-size: 16px; margin: 0; }

.call-detail-body { padding: 20px; }
.call-detail-row { margin-bottom: 16px; }
.call-detail-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--gris-texto); margin-bottom: 4px;
}
.call-detail-value { font-size: 14px; color: var(--navy-900); }
.call-detail-transcript {
  white-space: pre-wrap; background: #f7f8fc; border-radius: 8px;
  padding: 12px; font-size: 12.5px; line-height: 1.6; color: var(--navy-900);
  max-height: 320px; overflow-y: auto;
}
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */

/* ===== AQUI EMPIEZA LA CORRECION DEL CODIGO — 29-07-2026 (TARJETA BASE DE CONOCIMIENTOS) =====
   Pestañas para elegir tipo de fuente (Texto/URL/Archivo) dentro de la
   tarjeta de Base de Conocimientos en agent-configure.html. Solo se AGREGA. */
.kb-tab {
  padding: 8px 16px; border-radius: 8px; border: 1.5px solid var(--gris-borde);
  background: #fff; color: var(--gris-texto); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s ease;
}
.kb-tab:hover:not(:disabled) { border-color: var(--indigo-600, #4c51bf); }
.kb-tab.active {
  background: var(--indigo-600, #4c51bf); border-color: var(--indigo-600, #4c51bf); color: #fff;
}
.kb-tab:disabled { opacity: .5; cursor: not-allowed; }
/* ===== AQUI FINALIZA LA CORRECION DEL CODIGO ===== */