/* CRMPro / CrmPro - diseño global
   Compatible con PHP 5.3, Bootstrap/Metronic antiguo y MySQL 5.6.
   Colores basados en el logo: azul, celeste, morado y verde suave. */

:root{
  --gt-bg:#f4f7fb;
  --gt-dark:#17243b;
  --gt-dark-2:#101827;
  --gt-blue:#2c7be5;
  --gt-cyan:#00bcd4;
  --gt-purple:#7b61ff;
  --gt-green:#42d392;
  --gt-text:#1f2937;
  --gt-muted:#6b7280;
  --gt-border:#e5e7eb;
  --gt-card:#ffffff;
  --gt-shadow:0 10px 30px rgba(23,36,59,.12);
}

html,body{min-height:100%;}
body{
  font-family:'Open Sans','Segoe UI',Arial,sans-serif;
  background:linear-gradient(135deg,#eef7ff 0%,#f7f3ff 45%,#f5fffb 100%) !important;
  color:var(--gt-text);
}
/* Restaurar fuentes de iconos (el body no debe pisarlas) */
.fa,.fas,.far,.fal,.fab,
[class^="fa-"],[class*=" fa-"]{font-family:FontAwesome !important;}
[class^="icon-"],[class*=" icon-"]{font-family:'Simple-Line-Icons' !important;}

a{color:var(--gt-blue);} a:hover{color:var(--gt-purple);text-decoration:none;}

/* LOGIN — marca FAJU + CRMPro (compacto, sin scroll) */
body.login{
  font-family:'Manrope','Open Sans','Segoe UI',Arial,sans-serif;
  background:
    radial-gradient(ellipse 80% 55% at 15% 10%, rgba(50,197,207,.22), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 85%, rgba(74,124,242,.25), transparent 50%),
    linear-gradient(145deg, #0b1a33 0%, #0f2748 42%, #0c3a4f 100%) !important;
  display:block !important;
  height:100vh !important;
  min-height:100vh !important;
  max-height:100vh !important;
  position:relative;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
}
body.login:before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, #000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 35%, transparent 78%);
}
.login-shell{
  position:relative; z-index:1;
  height:100vh;
  max-height:100vh;
  box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:1.2vh 12px 8px;
  gap:6px;
  animation:loginFade .55s ease both;
  overflow:hidden;
}
@keyframes loginFade{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:none;}
}
.login .logo{
  margin:0 auto !important;
  margin-top:0 !important;
  margin-bottom:10px !important;
  padding:0 !important;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  flex-shrink:0;
}
.login .logo-faju-wrap{
  position:relative;
  width:96px; height:96px;
  display:flex; align-items:center; justify-content:center;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.login .logo-faju-glow{
  position:absolute; inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(50,197,207,.4) 0%, rgba(74,124,242,.15) 45%, transparent 70%);
  animation:fajuPulse 2.8s ease-in-out infinite;
  pointer-events:none;
}
.login .logo .logo-faju{
  position:relative; z-index:1;
  width:92px !important; height:92px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  -webkit-clip-path:circle(50% at 50% 50%);
  clip-path:circle(50% at 50% 50%);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  animation:fajuFloat 3.2s ease-in-out infinite;
}
@keyframes fajuPulse{
  0%,100%{transform:scale(.92); opacity:.65;}
  50%{transform:scale(1.08); opacity:1;}
}
@keyframes fajuFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-3px);}
}
.login .logo-crmpro-wrap{
  position:relative;
  width:300px;
  max-width:78vw;
  height:258px;
  display:flex; align-items:center; justify-content:center;
  margin:0;
  overflow:visible;
}
.login .logo-crmpro-aura{
  position:absolute;
  left:50%; bottom:4px;
  width:160px; height:20px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(50,197,207,.32), transparent 70%);
  filter:blur(8px);
  animation:auraPulse 2.4s ease-in-out infinite;
  pointer-events:none; z-index:0;
}
@keyframes auraPulse{
  0%,100%{opacity:.4; transform:translateX(-50%) scaleX(.92);}
  50%{opacity:.85; transform:translateX(-50%) scaleX(1.06);}
}
.login .logo-crmpro-bot{
  position:relative; z-index:1;
  width:300px; height:258px;
  animation:sceneFloat 3.2s ease-in-out infinite;
}
.login .logo-crmpro-bot .crmpro-bot-svg{
  width:100%; height:100%;
  display:block;
  overflow:visible;
}
@keyframes sceneFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
/* Parpadeo ojos rojos */
.login .crmpro-bot-svg .lid{
  transform-box:fill-box;
  transform-origin:50% 0%;
  animation:botLid 3.1s ease-in-out infinite;
}
.login .crmpro-bot-svg .eye-r .lid{ animation-delay:.05s; }
@keyframes botLid{
  0%,40%,48%,100%{ transform:scaleY(0); }
  43%,45%{ transform:scaleY(1); }
}
.login .crmpro-bot-svg .dialog{
  animation:botBub 3.2s ease-in-out infinite;
}
@keyframes botBub{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
.login .logo .steam{display:none;}
.login .content{
  width:360px !important; max-width:94%;
  margin:10px auto 0 !important;
  padding:12px 22px 10px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.28) !important;
  border:1px solid rgba(255,255,255,.7);
  flex-shrink:0;
  position:relative;
  z-index:5;
}
.login .content .form-title,
.login .form-title span{
  color:#0b1a33 !important;
  font-weight:800 !important;
  text-align:center;
  letter-spacing:.15px;
  font-size:16px !important;
  display:block;
  margin:0 !important;
}
.login .form-subtitle{
  margin:2px 0 0;
  text-align:center;
  color:#64748b;
  font-size:11px;
  font-weight:600;
}
.login .content .form-group{margin-top:8px !important; margin-bottom:0 !important;}
.login .content .form-actions{margin:8px 0 0 !important; padding:0 !important; border:0 !important;}
.login .content .form-control{
  height:38px !important;
  border-radius:10px !important;
  background:#f3f8fc !important;
  border:1px solid #d5e4f2 !important;
  color:#0b1a33 !important;
  box-shadow:none !important;
  font-size:14px !important;
  padding-left:12px !important;
}
.login .content .form-control:focus{
  border-color:#32c5cf !important;
  box-shadow:0 0 0 3px rgba(50,197,207,.22) !important;
  background:#fff !important;
}
.login .content .btn,
.login .content .btn_buscar{
  height:38px !important;
  border-radius:10px !important;
  border:0 !important;
  font-weight:800 !important;
  letter-spacing:.4px;
  background:linear-gradient(90deg,#4a7cf2 0%, #32c5cf 100%) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(74,124,242,.28);
  margin-top:0 !important;
  transition:transform .15s ease, box-shadow .15s ease;
}
.login .content .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(50,197,207,.32);
}
.login .copyright{
  color:rgba(255,255,255,.72) !important;
  font-size:10px !important;
  font-weight:600;
  letter-spacing:.3px;
  text-align:center;
  margin:4px 0 0 !important;
  flex-shrink:0;
}

/* Pantallas bajas: robot sigue siendo el más grande */
@media (max-height:900px){
  .login .logo-crmpro-wrap{width:260px; height:224px;} .login .logo-crmpro-bot{width:260px; height:224px;}
}
@media (max-height:800px){
  .login .logo-faju-wrap{width:78px; height:78px;}
  .login .logo .logo-faju{width:74px !important; height:74px !important;}
  .login .logo-crmpro-wrap{width:220px; height:190px;} .login .logo-crmpro-bot{width:220px; height:190px;}
  .login .form-subtitle{display:none;}
  .login .copyright{display:none;}
}
@media (max-height:700px){
  .login .logo-faju-wrap{width:64px; height:64px;}
  .login .logo .logo-faju{width:60px !important; height:60px !important;}
  .login .logo-crmpro-wrap{width:180px; height:155px;} .login .logo-crmpro-bot{width:180px; height:155px;}
  .login .content{padding:8px 16px !important;}
  .login .content .form-control,
  .login .content .btn,
  .login .content .btn_buscar{height:34px !important;}
}
@media (max-width:480px){
  .login .logo{gap:0;}
  .login .logo-faju-wrap{width:72px; height:72px;}
  .login .logo .logo-faju{width:68px !important; height:68px !important;}
  .login .logo-crmpro-wrap{width:78vw; height:auto; aspect-ratio:420/360; max-height:36vh;} .login .logo-crmpro-bot{width:100%; height:100%;}
  .login .content{padding:12px 14px 10px !important;}
  body.login{overflow-y:auto !important; max-height:none !important; height:auto !important;}
  .login-shell{height:auto; min-height:100vh; max-height:none; padding:10px; overflow:visible;}
}

/* HEADER */
.page-header.navbar{
  background:linear-gradient(90deg,#17243b 0%,#2454a6 44%,#00bcd4 100%) !important;
  box-shadow:0 8px 24px rgba(23,36,59,.18);
  border:0 !important;
}
.page-header.navbar .page-logo{
  background:rgba(255,255,255,.08) !important;
  border-right:1px solid rgba(255,255,255,.10);
  width:200px !important;
  min-width:200px !important;
}
.page-header.navbar .page-logo a{
  display:inline-flex; align-items:center; gap:8px; height:100%;
}
.page-header.navbar .page-logo img.logo-faju-nav{
  height:34px !important; width:34px !important;
  border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 2px rgba(255,255,255,.18);
  margin:0 !important;
}
.page-header.navbar .page-logo img.logo-default{
  height:38px !important;width:auto !important;max-width:140px !important;
  margin-top:6px !important;object-fit:contain;
}
.page-header.navbar .page-logo img.logo-faju-nav.logo-default{
  margin-top:0 !important; max-width:34px !important;
}
.page-header.navbar .page-logo img.logo-crmpro-nav{
  height:52px !important;
  width:auto !important;
  max-width:96px !important;
  margin-top:0 !important;
  object-fit:contain !important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.page-header.navbar .page-logo .logo-crmpro-nav{
  display:inline-flex;
  align-items:center;
  height:52px;
  width:90px;
  margin:0;
  line-height:0;
}
.page-header.navbar .page-logo .logo-crmpro-nav .crmpro-bot-svg{
  width:90px;
  height:52px;
  display:block;
  overflow:visible;
}
.page-header.navbar .page-logo .crmpro-bot-svg .lid{
  transform-box:fill-box;
  transform-origin:50% 0%;
  animation:botLid 3.1s ease-in-out infinite;
}
.page-header.navbar .page-logo .crmpro-bot-svg .eye-r .lid{ animation-delay:.05s; }
.page-header.navbar .page-logo-link{
  display:inline-flex; align-items:center; gap:8px; height:100%;
}
.page-header.navbar .top-menu,
.page-header.navbar .top-menu .username,
.page-header.navbar .top-menu .btn,
.page-header.navbar .top-menu a{
  font-family:'Open Sans','Segoe UI',Arial,sans-serif;
}
/* No pisar FontAwesome / Simple Line Icons (evita cuadrados vacíos) */
.page-header.navbar .top-menu .fa,
.page-header.navbar .top-menu .fas,
.page-header.navbar .top-menu .far,
.page-header.navbar .top-menu .fal,
.page-header.navbar .top-menu [class^="icon-"],
.page-header.navbar .top-menu [class*=" icon-"],
.page-sidebar .page-sidebar-menu .fa,
.page-sidebar .page-sidebar-menu [class^="icon-"]{
  font-family:FontAwesome !important;
}
.page-header.navbar .top-menu [class^="icon-"],
.page-header.navbar .top-menu [class*=" icon-"]{
  font-family:'Simple-Line-Icons' !important;
}
.page-header.navbar button,
.page-header.navbar .btn{
  border-radius:10px !important;
  border:0 !important;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
/* Softphone: llamar / colgar (Font Awesome 4) */
.page-header.navbar .btn-softphone{
  width:42px !important;
  height:34px !important;
  padding:0 !important;
  line-height:34px !important;
  text-align:center;
  color:#fff !important;
  font-size:15px !important;
}
.page-header.navbar .btn-softphone .fa{
  color:#fff !important;
  font-family:FontAwesome !important;
  line-height:1 !important;
}
.page-header.navbar .btn-call{background:#2f9e44 !important;}
.page-header.navbar .btn-call:hover{background:#37b34a !important;}
.page-header.navbar .btn-hangup{background:#e03131 !important;}
.page-header.navbar .btn-hangup:hover{background:#f03e3e !important;}
.page-header.navbar .btn-wp-expand{
  background:rgba(255,255,255,.18) !important;
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.page-header.navbar .btn-wp-expand:hover{background:rgba(255,255,255,.3) !important;}
.page-header.navbar .btn-wp-expand.is-open{background:rgba(255,255,255,.35) !important;}
.page-header.navbar #number{
  border-radius:18px !important;
  border:0 !important;
  height:34px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Webphone panel expandible (DTMF + volumen) */
.wp-bar-wrap{overflow:visible !important;}
.wp-extra-panel{
  position:absolute;
  left:120px;
  top:48px;
  z-index:1100;
  min-width:280px;
  background:linear-gradient(180deg,#1e3a5f 0%,#17243b 100%);
  border-radius:14px;
  box-shadow:0 14px 32px rgba(15,23,42,.35);
  padding:12px 14px 14px;
  border:1px solid rgba(255,255,255,.12);
}
.wp-extra-inner{display:flex;gap:16px;align-items:stretch;}
.wp-dialpad{
  display:grid;
  grid-template-columns:repeat(3,44px);
  gap:6px;
}
.wp-key{
  width:44px;height:40px;
  border:0;border-radius:10px;
  background:rgba(255,255,255,.12);
  color:#fff;font-weight:700;font-size:15px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.wp-key:hover{background:rgba(255,255,255,.22);}
.wp-key:active{background:#2f9e44;}
.wp-extra-tools{
  display:flex;flex-direction:column;gap:10px;
  min-width:168px;justify-content:center;
}
.wp-vol-row{
  display:flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.2);
  border-radius:10px;padding:8px 10px;
}
.wp-vol-icon{color:#fff;font-size:14px;width:18px;}
.wp-vol-range{flex:1;accent-color:#38bdf8;}
.wp-act-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.wp-act-btn{
  border:0;border-radius:9px;padding:8px 4px;
  background:#f1f5f9;color:#1e293b;
  font-size:11px;font-weight:700;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  line-height:1.1;
}
.wp-act-btn:hover{background:#fff;}
.wp-tool-btn{
  border:0;border-radius:9px;padding:9px 10px;
  background:rgba(255,255,255,.14);color:#fff;
  font-size:12px;font-weight:700;cursor:pointer;
}
.wp-tool-btn:hover{background:rgba(255,255,255,.24);}
.wp-tool-clear{
  background:rgba(56,189,248,.18);
  border:1px solid rgba(56,189,248,.35);
}
.wp-tool-clear:hover{background:rgba(56,189,248,.3);}

/* Menú usuario (LOYALTEL / Salir) */
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user>.dropdown-toggle{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  padding:8px 14px !important;
  margin:8px 8px 0 0 !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  line-height:1.2 !important;
}
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user>.dropdown-toggle:hover,
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user.open>.dropdown-toggle{
  background:rgba(255,255,255,.24) !important;
}
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user>.dropdown-toggle>.username{
  color:#fff !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user>.dropdown-toggle>i{
  color:#fff !important;
  font-size:14px !important;
}
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user>.dropdown-menu{
  border-radius:12px !important;
  border:0 !important;
  box-shadow:0 12px 28px rgba(23,36,59,.22) !important;
  min-width:190px;
  padding:6px 0 !important;
  margin-top:6px !important;
}
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user>.dropdown-menu>li>a{
  padding:10px 16px !important;
  color:#17243b !important;
  font-weight:600;
}
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user>.dropdown-menu>li>a:hover{
  background:#eef5ff !important;
  color:#2454a6 !important;
}
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user>.dropdown-menu>li>a>i{
  margin-right:8px;
  width:16px;
  text-align:center;
  color:#2c7be5;
}

/* SIDEBAR */
.page-sidebar-wrapper .page-sidebar,
.page-sidebar.navbar-collapse,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover{
  background:#17243b !important;
}
.page-sidebar .page-sidebar-menu>li.heading>h3{
  color:#8edcff !important;
  font-size:12px !important;
  letter-spacing:1px;
  font-weight:800;
}
.page-sidebar .page-sidebar-menu>li>a{
  color:#dbeafe !important;
  border-left:4px solid transparent;
  margin:4px 10px;
  border-radius:12px;
}
.page-sidebar .page-sidebar-menu>li>a>i{color:#8edcff !important;}
.page-sidebar .page-sidebar-menu>li:hover>a,
.page-sidebar .page-sidebar-menu>li.active>a,
.page-sidebar .page-sidebar-menu>li.open>a{
  background:linear-gradient(90deg,rgba(44,123,229,.35),rgba(123,97,255,.30)) !important;
  border-left-color:var(--gt-green);
  color:#fff !important;
}
.page-sidebar .page-sidebar-menu .sub-menu>li>a{color:#dbeafe !important;border-radius:10px;margin:2px 12px;}
.page-sidebar .page-sidebar-menu .sub-menu>li>a:hover{background:rgba(0,188,212,.18) !important;color:#fff !important;}
/* Boton hamburger bonito (todas las vistas) */
.page-header.navbar .menu-toggler.sidebar-toggler{
  display:block !important;
  float:right !important;
  margin:9px 8px 0 0 !important;
  width:32px !important;
  height:32px !important;
  opacity:1 !important;
  background:rgba(255,255,255,.14) !important;
  border-radius:10px !important;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  cursor:pointer;
}
.page-header.navbar .menu-toggler.sidebar-toggler:hover{
  background:rgba(255,255,255,.26) !important;
}
.page-header.navbar .menu-toggler.sidebar-toggler > span{
  top:15px !important;
  width:16px !important;
  height:2px !important;
  background:#fff !important;
  display:block !important;
  position:relative !important;
  margin:0 auto !important;
}
.page-header.navbar .menu-toggler.sidebar-toggler > span:before,
.page-header.navbar .menu-toggler.sidebar-toggler > span:after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  width:16px !important;
  height:2px !important;
  background:#fff !important;
}
.page-header.navbar .menu-toggler.sidebar-toggler > span:before{top:-5px !important;}
.page-header.navbar .menu-toggler.sidebar-toggler > span:after{top:5px !important;}

/* SIDEBAR: columna completa en todas las vistas, scroll interno, se retrae solo */
.page-header.navbar{
  height:50px !important;
  min-height:50px !important;
}
.page-header-fixed .page-container{
  margin-top:50px !important;
}
.page-sidebar-wrapper{
  position:fixed !important;
  top:50px !important;
  left:0 !important;
  bottom:0 !important;
  width:235px !important;
  z-index:10010 !important;
  background:#17243b !important;
  overflow:hidden !important;
  float:none !important;
}
.page-sidebar-closed .page-sidebar-wrapper{
  width:45px !important;
}
.page-sidebar-wrapper .page-sidebar,
.page-sidebar.navbar-collapse,
.page-sidebar.navbar-collapse.collapse,
#navigation,
#navigation.navbar-collapse.collapse{
  display:block !important;
  visibility:visible !important;
  height:100% !important;
  min-height:100% !important;
  max-height:none !important;
  width:100% !important;
  background:#17243b !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
}
.page-sidebar .page-sidebar-menu{
  margin:0 !important;
  padding:6px 0 28px !important;
  max-height:none !important;
  overflow:visible !important;
  width:100% !important;
}
.page-sidebar ::-webkit-scrollbar{width:7px;}
.page-sidebar ::-webkit-scrollbar-track{background:transparent;}
.page-sidebar ::-webkit-scrollbar-thumb{background:rgba(142,220,255,.42);border-radius:8px;}
.page-content-wrapper{
  margin-left:235px !important;
  padding:0 !important;
}
.page-sidebar-closed .page-content-wrapper{
  margin-left:45px !important;
}
.page-content-wrapper .page-content{
  background:transparent !important;
  padding:10px 14px 16px !important;
}
.page-sidebar ::-webkit-scrollbar-thumb:hover{background:rgba(142,220,255,.7);}
.page-sidebar-closed .page-sidebar .page-sidebar-menu>li.heading{
  display:none !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu>li>a>.arrow,
.page-sidebar-closed .page-sidebar .page-sidebar-menu>li>a>.badge{
  display:none !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu>li>a{
  position:relative !important;
  margin:2px 4px !important;
  padding:10px 0 !important;
  text-align:center !important;
  overflow:visible !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu>li>a>i{
  margin:0 !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed>li:hover,
.page-sidebar-closed .page-sidebar .page-sidebar-menu>li:hover{
  width:45px !important;
  max-width:45px !important;
  position:relative !important;
  z-index:10040 !important;
  box-shadow:none !important;
  background:transparent !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed>li:hover>a,
.page-sidebar-closed .page-sidebar .page-sidebar-menu>li:hover>a{
  background:rgba(255,255,255,.10) !important;
  width:auto !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed>li:hover>.sub-menu{
  display:none !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu>li>a>.title,
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed>li>a>.title{
  display:none !important;
  position:absolute !important;
  left:52px !important;
  top:50% !important;
  transform:translateY(-50%);
  background:#0f172a !important;
  color:#fff !important;
  padding:8px 12px !important;
  border-radius:10px !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.3px;
  white-space:nowrap !important;
  z-index:10050 !important;
  box-shadow:0 10px 28px rgba(15,23,42,.55) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.14);
  padding-left:12px !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu>li>a>.title:after{
  content:"";
  position:absolute;
  left:-6px;top:50%;
  margin-top:-6px;
  border:6px solid transparent;
  border-right-color:#0f172a;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu>li:hover>a>.title,
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed>li:hover>a>.title{
  display:inline-block !important;
}

/* Hamburger: menu contraido = misma columna de iconos, arriba-izquierda */
.page-sidebar-closed .page-header.navbar .page-logo{
  width:45px !important;
  min-width:45px !important;
  padding:0 !important;
  position:relative !important;
}
.page-sidebar-closed .page-header.navbar .page-logo .page-logo-link{
  display:none !important;
}
.page-sidebar-closed .page-header.navbar .menu-toggler.sidebar-toggler{
  position:fixed !important;
  left:6px !important;
  top:9px !important;
  float:none !important;
  margin:0 !important;
  z-index:10060 !important;
}

/* CONTENIDO */
.page-container{background:transparent !important;}
h1,h2,h3,.page-title{
  color:#17243b !important;
  font-weight:800 !important;
}

.portlet{
  border-radius:20px !important;
  overflow:hidden;
  border:1px solid rgba(226,232,240,.95) !important;
  box-shadow:var(--gt-shadow) !important;
  background:var(--gt-card) !important;
}
.portlet.box.blue{border:0 !important;}
.portlet.box.blue>.portlet-title,
.portlet>.portlet-title{
  background:linear-gradient(90deg,var(--gt-blue),var(--gt-cyan)) !important;
  color:#fff !important;
  border:0 !important;
  min-height:52px;
  padding:14px 18px !important;
}
.portlet-title .caption{font-weight:800 !important;letter-spacing:.2px;}
.portlet-title .caption i{color:#fff !important;}
.portlet>.portlet-body,
.portlet.box>.portlet-body{
  background:#fff !important;
  padding:22px !important;
  border-radius:0 0 20px 20px !important;
}

/* FORMULARIOS */
label{font-weight:700;color:#334155;font-size:12px;text-transform:uppercase;letter-spacing:.35px;}
.form-control,
input[type=text],input[type=password],input[type=date],input[type=number],select,textarea{
  border-radius:12px !important;
  border:1px solid #d7e3f4 !important;
  background:#fbfdff !important;
  color:#17243b !important;
  box-shadow:none !important;
}
.form-control:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--gt-cyan) !important;
  box-shadow:0 0 0 3px rgba(0,188,212,.16) !important;
}

/* BOTONES */
.btn,.form-control.btn,input[type=submit],input[type=button],button{
  border-radius:12px !important;
  font-weight:700;
}
.btn.blue,.btn_buscar,.btn-primary,
input.btn.blue,input.btn_buscar{
  background:linear-gradient(90deg,var(--gt-blue),var(--gt-purple)) !important;
  border:0 !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(44,123,229,.22);
}
.btn.blue:hover,.btn_buscar:hover,.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 11px 24px rgba(44,123,229,.30);
}
.btn.red,.btn-danger{background:linear-gradient(90deg,#ef4444,#f97316) !important;border:0 !important;color:#fff !important;}
.btn.green,.btn-success{background:linear-gradient(90deg,#16a34a,var(--gt-green)) !important;border:0 !important;color:#fff !important;}

/* TABLAS */
.table,
.tblLista{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(23,36,59,.08);}
.table>thead>tr>th,
.tblLista>thead>tr>th,
table thead tr th{
  background:#17243b !important;
  color:#e0f7ff !important;
  border-color:#24385d !important;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.table>tbody>tr>td,
.tblLista>tbody>tr>td{border-color:#edf2f7 !important;vertical-align:middle !important;}
.table-striped>tbody>tr:nth-of-type(odd){background-color:#f8fbff !important;}
.table-hover>tbody>tr:hover{background:#eef9ff !important;}

/* DASHBOARD SIMPLE */
#div_estadistica,#div_pie{
  min-height:260px;
  border-radius:16px;
  background:linear-gradient(135deg,#f8fbff,#f5f1ff);
  border:1px dashed #cbd5e1;
}

/* FOOTER */
.page-footer{
  background:#101827 !important;
  color:#b6c2d6 !important;
  border-top:0 !important;
  box-shadow:0 -8px 24px rgba(23,36,59,.08);
}
.page-footer .page-footer-inner{color:#b6c2d6 !important;}

/* UTILIDADES */
.badge,.label{border-radius:999px !important;}
.alert{border-radius:14px !important;}
.dropdown-menu{border-radius:14px !important;box-shadow:var(--gt-shadow) !important;border:1px solid #e5e7eb !important;}

@media (max-width: 768px){
  .login .content{width:94% !important;padding:18px 16px !important;}
  .page-content-wrapper .page-content{padding:18px 12px !important;}
  .portlet>.portlet-body,.portlet.box>.portlet-body{padding:16px !important;}
  .table{font-size:12px;}
}

/* ===== HUB header: Chat / Agenda / Notificaciones (tema claro) ===== */
.page-header.navbar .top-menu .gt-hub-item{float:left;margin:8px 4px 0 0;}
.page-header.navbar .top-menu .gt-hub-btn{
  display:inline-flex !important;
  align-items:center;justify-content:center;
  position:relative;
  width:36px;height:36px;
  border-radius:50% !important;
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  color:#fff !important;
  box-shadow:none !important;
  padding:0 !important;
  line-height:36px !important;
}
.page-header.navbar .top-menu .gt-hub-btn:hover{
  background:rgba(255,255,255,.28) !important;
}
.page-header.navbar .top-menu .gt-hub-btn .fa{
  color:#fff !important;
  font-size:15px !important;
  font-family:FontAwesome !important;
}
.gt-hub-badge{
  position:absolute;top:-4px;right:-6px;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:#ef4444;color:#fff;
  font-size:10px;font-weight:800;line-height:16px;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.gt-hub-overlay{
  position:fixed;inset:0;background:rgba(23,36,59,.28);z-index:10040;
}
.gt-hub-panel{
  position:fixed;top:62px;right:18px;width:360px;max-width:94vw;max-height:calc(100vh - 80px);
  background:#fff;border-radius:16px;z-index:10050;
  box-shadow:0 18px 48px rgba(23,36,59,.22);
  border:1px solid #e5eef8;overflow:hidden;
  display:flex;flex-direction:column;
}
.gt-hub-panel-wide{width:440px;}
.gt-hub-panel-chat{width:620px;}
.gt-hub-panel-h{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:linear-gradient(90deg,#eef6ff,#f3fbff);
  border-bottom:1px solid #e5eef8;color:#17243b;
}
.gt-hub-panel-h strong{font-size:15px;}
.gt-hub-x{
  border:0;background:transparent;font-size:22px;line-height:1;color:#64748b;cursor:pointer;padding:0 4px;
}
.gt-hub-panel-b{padding:14px 16px 16px;overflow:auto;max-height:calc(100vh - 140px);}
.gt-hub-panel-chat .gt-hub-panel-b{padding:0;overflow:hidden;max-height:calc(100vh - 140px);}
.gt-chat-layout{display:flex;min-height:320px;max-height:calc(100vh - 140px);}
.gt-chat-side{
  width:168px;flex-shrink:0;border-right:1px solid #e5eef8;background:#f8fbff;
  padding:10px 8px;overflow:auto;
}
.gt-chat-side-label{
  font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#94a3b8;margin:10px 6px 6px;
}
.gt-chat-ch,.gt-chat-user{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  border:0;background:transparent;border-radius:10px;padding:8px 8px;
  color:#334155;font-size:12px;font-weight:700;cursor:pointer;margin:0 0 2px;
}
.gt-chat-ch:hover,.gt-chat-user:hover{background:#e8f2ff;}
.gt-chat-ch.active,.gt-chat-user.active{background:#dbeafe;color:#1e3a8a;}
.gt-chat-user{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gt-chat-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;background:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,.2);
}
.gt-chat-dot-gen{background:#2c7be5;box-shadow:0 0 0 2px rgba(44,123,229,.2);}
.gt-chat-online{min-height:40px;}
.gt-chat-online .gt-hub-empty{padding:8px 4px;font-size:11px;}
.gt-hub-input,.gt-hub-textarea{
  width:100%;box-sizing:border-box;margin:0 0 10px;
  border:1px solid #dbe7f5;border-radius:12px;padding:10px 12px;
  background:#f8fbff;color:#17243b;font-size:13px;
}
.gt-hub-textarea{resize:vertical;min-height:70px;}
.gt-hub-check{display:block;margin:0 0 10px;color:#334155;font-size:13px;font-weight:600;}
.gt-hub-ant{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;color:#475569;font-size:12px;}
.gt-hub-ant input{width:70px;border:1px solid #dbe7f5;border-radius:10px;padding:6px 8px;background:#fff;}
.gt-hub-save{
  width:100%;border:0;border-radius:12px;padding:11px 14px;margin:0 0 14px;
  background:linear-gradient(90deg,#2c7be5,#00bcd4);color:#fff;font-weight:800;cursor:pointer;
  box-shadow:0 8px 18px rgba(44,123,229,.25);
}
.gt-hub-ghost{
  width:100%;border:1px solid #dbe7f5;border-radius:12px;padding:8px 12px;margin:0 0 12px;
  background:#fff;color:#475569;font-weight:700;cursor:pointer;
}
.gt-hub-empty{text-align:center;color:#94a3b8;padding:18px 8px;font-size:13px;line-height:1.45;}
.gt-hub-empty small{display:block;margin-top:6px;font-size:11px;color:#94a3b8;}
.gt-hub-empty b{color:#64748b;}
.gt-chat-loading{color:#64748b;}
.gt-agenda-card,.gt-notif-card{
  border:1px solid #e5eef8;border-radius:12px;padding:12px;margin:0 0 10px;background:#fbfdff;
}
.gt-agenda-tit,.gt-notif-tit{font-weight:800;color:#17243b;margin:0 0 4px;}
.gt-agenda-des,.gt-notif-msg{color:#475569;font-size:12px;margin:0 0 6px;}
.gt-agenda-meta,.gt-notif-meta{color:#94a3b8;font-size:11px;margin:0 0 8px;}
.gt-agenda-actions{display:flex;gap:8px;flex-wrap:wrap;}
.gt-hub-lbl{display:block;margin:0 0 6px;color:#475569;font-size:12px;font-weight:700;}
.gt-agenda-doc-row{display:flex;gap:8px;align-items:center;margin:0 0 8px;}
.gt-agenda-doc-row .gt-hub-input{margin:0;flex:1;}
.gt-agenda-doc-row .gt-hub-save{width:auto;margin:0;padding:10px 14px;}
.gt-agenda-doc-res{margin:0 0 8px;max-height:130px;overflow:auto;}
.gt-agenda-doc-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid #dbe7f5;border-radius:10px;padding:8px 10px;margin:0 0 6px;background:#f8fbff;
  cursor:pointer;
}
.gt-agenda-doc-item:hover{background:#e8f2ff;}
.gt-agenda-doc-item b{color:#17243b;font-size:12px;}
.gt-agenda-doc-item span{display:block;color:#64748b;font-size:11px;}
.gt-agenda-cli{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0 0 10px;padding:8px 10px;border-radius:10px;
  background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;font-size:12px;font-weight:700;
}
.gt-agenda-cli-link{color:#2454a6;font-size:11px;font-weight:700;text-decoration:none;}
.gt-agenda-cli-link:hover{text-decoration:underline;}
.gt-btn-sm{
  border:1px solid #dbe7f5;background:#fff;color:#2454a6;border-radius:8px;
  padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer;
}
.gt-btn-danger{color:#c2410c;border-color:#fed7aa;}
.gt-notif-unread{border-color:#93c5fd;background:#eff6ff;}
.gt-chat-wrap{display:flex;flex-direction:column;flex:1;min-width:0;padding:12px 14px 12px;}
.gt-chat-msgs{flex:1;min-height:220px;max-height:360px;overflow:auto;margin:0 0 10px;padding:4px;}
.gt-chat-msg{margin:0 0 10px;}
.gt-chat-msg.mine .gt-chat-bubble{background:#dbeafe;margin-left:28px;}
.gt-chat-who{font-size:11px;color:#94a3b8;margin:0 0 3px;}
.gt-chat-bubble{
  display:inline-block;max-width:90%;padding:8px 12px;border-radius:12px;
  background:#ecfdf5;color:#17243b;font-size:13px;
}
.gt-chat-send{display:flex;gap:8px;align-items:center;}
.gt-chat-send .gt-hub-input{margin:0;flex:1;}
.gt-chat-send .gt-hub-save{width:auto;margin:0;padding:10px 16px;}
@media (max-width:768px){
  .gt-hub-panel{right:8px;left:8px;width:auto;}
  .gt-chat-side{width:120px;}
  .gt-chat-user{font-size:11px;}
}

/* Tablas y barras discretas */
.gt-sort-th{cursor:pointer;user-select:none;white-space:nowrap;}
.gt-sort-th:after{content:" ↕";font-size:10px;opacity:.35;}
.gt-sort-th[data-dir="asc"]:after{content:" ↑";opacity:.8;}
.gt-sort-th[data-dir="desc"]:after{content:" ↓";opacity:.8;}
.table-responsive{scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.22) transparent;}
.table-responsive::-webkit-scrollbar,
.gt-hub-panel *::-webkit-scrollbar{width:6px;height:6px;}
.table-responsive::-webkit-scrollbar-thumb,
.gt-hub-panel *::-webkit-scrollbar-thumb{background:rgba(100,116,139,.22);border-radius:10px;}
.table-responsive::-webkit-scrollbar-track,
.gt-hub-panel *::-webkit-scrollbar-track{background:transparent;}

/* VISTA AGENTE: en llamada / colgado */
#vistaAgenteBar.call-on,
.portlet.box.blue > .portlet-title.call-on{
  background:linear-gradient(90deg,#128a3a,#22c55e) !important;
  box-shadow:0 0 0 2px rgba(34,197,94,.35) inset;
  transition:background .25s ease;
}
#vistaAgenteBar.call-off,
.portlet.box.blue > .portlet-title.call-off{
  background:linear-gradient(90deg,#b91c1c,#ef4444) !important;
  box-shadow:0 0 0 2px rgba(239,68,68,.35) inset;
  transition:background .25s ease;
}