/* ===== LAYOUT BASE ===== */

body{
background:#f4f7fb;
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* ===== HEADER ===== */

.topbar{
height:60px;
background:#ffffff;
border-bottom:1px solid #e9ecef;
display:flex;
align-items:center;
padding:0 24px;
position:sticky;
top:0;
z-index:1000;
}

.topbar .navbar{
width:100%;
display:flex;
align-items:center;
}

/* titulo empresa */

.navbar-title{
font-size:14px;
font-weight:600;
color:#2b2f33;
margin-left:12px;
}

/* botón sidebar */

.sidebartoggler{
display:flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:8px;
cursor:pointer;
}

.sidebartoggler:hover{
background:#f1f3f5;
}

/* ===== BOTONES HEADER ===== */

.navbar-nav .btn{
border-radius:20px;
padding:6px 16px;
font-size:13px;
display:flex;
align-items:center;
gap:6px;
}

/* ===== SIDEBAR ===== */

.left-sidebar{
width:240px;
background:#ffffff;
border-right:1px solid #e9ecef;
position:fixed;
height:100%;
}

.scroll-sidebar{
padding-top:10px;
}

/* perfil */

.user-profile{
border-bottom:1px solid #f1f1f1;
padding:20px;
background:#fff;
}

.profile-img img{
width:60px;
border-radius:50%;
}

/* menu */

.sidebar-nav ul{
padding:10px;
}

.sidebar-nav ul li{
margin-bottom:4px;
}

.sidebar-nav ul li a{
font-size:14px;
color:#6c757d;
padding:10px 14px;
border-radius:8px;
display:flex;
align-items:center;
gap:10px;
transition:all .15s ease;
}

.sidebar-nav ul li a:hover{
background:#f4f7fb;
color:#000;
}

/* activo (misma familia de azul que el header SaaS: #2c7be5 / #1a5fd0) */

.sidebar-nav ul li.active>a{
background:linear-gradient(90deg, rgba(44, 123, 229, 0.14), rgba(26, 95, 208, 0.2));
color:#1a5fd0;
font-weight:600;
}

/* ===== CONTENIDO ===== */

.page-wrapper{
margin-left:240px;
padding:20px;
min-height:100vh;
background:#f4f7fb;
}

/* ===== TARJETAS ===== */

.card{
border:none;
border-radius:12px;
box-shadow:0 4px 14px rgba(0,0,0,0.04);
}

/* ===== BOTONES ===== */

.btn-primary{
background:#2f7de1;
border:none;
}

.btn-primary:hover{
background:#1f6ed4;
}

/* ===== TABLAS ===== */

.table{
background:#fff;
border-radius:10px;
overflow:hidden;
}

/* ===== SCROLL ===== */

::-webkit-scrollbar{
width:6px;
}

::-webkit-scrollbar-thumb{
background:#ddd;
border-radius:10px;
}

/* ===== TOAST ÉXITO (píldora turquesa, como demo venta) ===== */
.jq-toast-wrap {
  width: auto !important;
  max-width: min(92vw, 480px);
}

.jq-toast-wrap .jq-toast-single.jq-icon-success {
  width: max-content;
  max-width: min(92vw, 480px);
  box-sizing: border-box;
  background-color: #2ccbd8 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px;
  box-shadow: none;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  padding: 14px 32px !important;
  text-align: center;
}

.jq-toast-wrap .jq-toast-single.jq-icon-success.jq-has-icon {
  padding: 14px 36px !important;
}

.jq-toast-single.jq-icon-success .jq-toast-heading {
  color: #ffffff !important;
  font-weight: 700;
  margin-bottom: 4px;
}

.jq-toast-single.jq-icon-success .close-jq-toast-single {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 1;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.jq-toast-single.jq-icon-success .jq-toast-loader {
  background-color: rgba(255, 255, 255, 0.35) !important;
  bottom: 0;
  left: 8px;
  right: 8px;
  width: auto !important;
  height: 3px;
  border-radius: 999px;
}