@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* -------------------------------------------
   TOKENS
------------------------------------------- */
:root {
  --brand:        #2563EB;
  --brand-hover:  #1D4ED8;
  --brand-light:  #EFF6FF;
  --brand-text:   #FFFFFF;
  --success:      #16A34A;  --success-lt: #F0FDF4;
  --warning:      #D97706;  --warning-lt: #FFFBEB;
  --danger:       #DC2626;  --danger-lt:  #FEF2F2;
  --info:         #0891B2;  --info-lt:    #ECFEFF;
  --bg:           #F1F5F9;
  --surface:      #FFFFFF;
  --surface2:     #F8FAFC;
  --border:       #E2E8F0;
  --border2:      #CBD5E1;
  --txt:          #0F172A;
  --txt2:         #475569;
  --txt3:         #94A3B8;
  --sidebar-full: 240px;
  --sidebar-mini: 64px;
  --topbar-h:     56px;
  --r:            8px;
  --r2:           12px;
  --shadow:       0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:    0 10px 30px rgba(0,0,0,.12);
  --t:            .2s ease;
}

/* -------------------------------------------
   RESET
------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--bg);color:var(--txt);
  font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* -------------------------------------------
   SHELL
------------------------------------------- */
.shell{display:flex;min-height:100vh}

/* -------------------------------------------
   SIDEBAR
------------------------------------------- */
.sidebar{
  width:var(--sidebar-full);
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;
  z-index:300;
  transition:width var(--t);
  overflow:hidden;
}
.sidebar.mini{width:var(--sidebar-mini)}

/* Marca / Logo */
.sb-brand{
  height:var(--topbar-h);
  display:flex;align-items:center;
  padding:0 14px;gap:10px;
  border-bottom:1px solid var(--border);
  text-decoration:none;flex-shrink:0;
  overflow:hidden;white-space:nowrap;
}
.sb-logo{
  width:32px;height:32px;border-radius:8px;
  background:var(--brand);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:13px;flex-shrink:0;
  box-shadow:0 2px 8px rgba(37,99,235,.3);
}
.sb-name{
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:opacity var(--t),width var(--t);
}
.sb-title{font-size:14px;font-weight:800;color:var(--txt);white-space:nowrap}
.sb-sub  {font-size:10px;color:var(--txt3);white-space:nowrap}
.sidebar.mini .sb-name{opacity:0;width:0}

/* Toggle button */


/* User info */
.sb-user{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  overflow:hidden;white-space:nowrap;flex-shrink:0;
}
.sb-avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--brand-light);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;
}
.sb-user-info{overflow:hidden;transition:opacity var(--t),width var(--t)}
.sb-user-name{font-size:12px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-rol {font-size:10px;color:var(--txt3);white-space:nowrap}
.sidebar.mini .sb-user-info{opacity:0;width:0}

/* Navegación */
.sb-nav{flex:1;padding:8px 0;overflow-y:auto;overflow-x:hidden}
.sb-nav::-webkit-scrollbar{width:3px}
.sb-nav::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

.sb-section{
  padding:12px 14px 4px;
  font-size:10px;font-weight:700;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.8px;
  white-space:nowrap;overflow:hidden;
  transition:opacity var(--t);
}
.sidebar.mini .sb-section{opacity:0}

.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;
  color:var(--txt2);text-decoration:none;
  font-size:13px;font-weight:500;
  transition:var(--t);position:relative;
  cursor:pointer;border:none;background:none;
  width:100%;white-space:nowrap;
  border-radius:0;overflow:hidden;
}
.nav-item:hover{background:var(--surface2);color:var(--txt)}
.nav-item.active{background:var(--brand-light);color:var(--brand);font-weight:600}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--brand);border-radius:0 2px 2px 0;
}
.nav-icon{
  width:20px;height:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.nav-label{
  transition:opacity var(--t),width var(--t);
  white-space:nowrap;overflow:hidden;
}
.sidebar.mini .nav-label{opacity:0;width:0}

/* Tooltip en modo mini */
.sidebar.mini .nav-item{position:relative}
.sidebar.mini .nav-item:hover::after{
  content:attr(data-label);
  position:absolute;left:calc(var(--sidebar-mini) - 2px);top:50%;
  transform:translateY(-50%);
  background:var(--txt);color:#fff;
  font-size:12px;font-weight:600;
  padding:6px 10px;border-radius:var(--r);
  white-space:nowrap;z-index:500;
  box-shadow:var(--shadow-md);
}

/* Footer del sidebar */
.sb-footer{
  padding:12px 14px;
  border-top:1px solid var(--border);
  flex-shrink:0;
  font-size:11px;color:var(--txt3);
  text-align:center;
  white-space:nowrap;overflow:hidden;
  transition:opacity var(--t);
}
.sidebar.mini .sb-footer{opacity:0}

/* -------------------------------------------
   OVERLAY MÓVIL
------------------------------------------- */
.sb-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.45);z-index:290;
  opacity:0;transition:opacity var(--t);
}
.sb-overlay.show{opacity:1}

/* -------------------------------------------
   CONTENIDO PRINCIPAL
------------------------------------------- */
.main{
  margin-left:var(--sidebar-full);
  flex:1;display:flex;flex-direction:column;
  min-height:100vh;
  transition:margin-left var(--t);
}
.main.mini{margin-left:var(--sidebar-mini)}

/* -------------------------------------------
   TOPBAR
------------------------------------------- */
.topbar{
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 20px;gap:12px;
  position:sticky;top:0;z-index:200;
}

.topbar-menu{
  width:34px;height:34px;border-radius:var(--r);
  border:1px solid var(--border);background:var(--surface2);
  display:none;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;color:var(--txt2);
  flex-shrink:0;transition:var(--t);
}
.topbar-menu:hover{background:var(--brand-light);color:var(--brand);border-color:var(--brand)}

.topbar-breadcrumb{
  font-size:14px;font-weight:600;color:var(--txt);flex:1;
}
.topbar-breadcrumb span{color:var(--txt3);font-weight:400}

/* Acciones del topbar */
.topbar-actions{display:flex;align-items:center;gap:6px}

.tb-btn{
  width:34px;height:34px;border-radius:var(--r);
  border:1px solid var(--border);background:var(--surface2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;color:var(--txt2);
  transition:var(--t);position:relative;
  text-decoration:none;
}
.tb-btn:hover{background:var(--brand-light);color:var(--brand);border-color:var(--brand)}

.tb-badge{
  position:absolute;top:-4px;right:-4px;
  width:16px;height:16px;border-radius:50%;
  background:var(--danger);color:#fff;
  font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--surface);
}

/* Dropdown perfil */
.tb-profile{
  display:flex;align-items:center;gap:8px;
  padding:5px 10px 5px 6px;
  border-radius:var(--r);border:1px solid var(--border);
  background:var(--surface2);cursor:pointer;
  transition:var(--t);position:relative;
}
.tb-profile:hover{background:var(--brand-light);border-color:var(--brand)}
.tb-pname{font-size:12px;font-weight:600;color:var(--txt)}
.tb-prole{font-size:10px;color:var(--txt3)}

.tb-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r2);box-shadow:var(--shadow-lg);
  min-width:200px;z-index:500;
  display:none;
  animation:dropIn .15s ease;
}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.tb-dropdown.open{display:block}

.dd-header{padding:12px 14px;border-bottom:1px solid var(--border)}
.dd-name  {font-size:13px;font-weight:700;color:var(--txt)}
.dd-email {font-size:11px;color:var(--txt3);margin-top:1px}
.dd-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;font-size:13px;color:var(--txt2);
  text-decoration:none;cursor:pointer;transition:var(--t);
  border:none;background:none;width:100%;
}
.dd-item:hover{background:var(--surface2);color:var(--txt)}
.dd-item.danger:hover{background:var(--danger-lt);color:var(--danger)}
.dd-divider{height:1px;background:var(--border);margin:4px 0}

/* -------------------------------------------
   PAGE CONTENT
------------------------------------------- */
.page-content{flex:1;padding:24px;max-width:1400px;width:100%}
.page-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:20px;flex-wrap:wrap;
}
.page-title   {font-size:20px;font-weight:800;color:var(--txt)}
.page-subtitle{font-size:13px;color:var(--txt3);margin-top:2px}

/* -------------------------------------------
   METRICS GRID
------------------------------------------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:20px}
.metric{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r2);padding:18px;
  display:flex;align-items:center;gap:14px;
  box-shadow:var(--shadow);transition:var(--t);cursor:default;
}
.metric:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.metric-icon{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.mi-blue  {background:var(--brand-light)}
.mi-green {background:var(--success-lt)}
.mi-amber {background:var(--warning-lt)}
.mi-red   {background:var(--danger-lt)}
.mi-info  {background:var(--info-lt)}
.metric-label{font-size:12px;color:var(--txt3);margin-bottom:2px}
.metric-val  {font-size:22px;font-weight:800;color:var(--txt);line-height:1}
.metric-sub  {font-size:11px;margin-top:3px}
.ms-up  {color:var(--success)}
.ms-warn{color:var(--warning)}

/* -------------------------------------------
   CARDS / TABLES
------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--shadow)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px}
.card-title {font-size:14px;font-weight:700;color:var(--txt)}
.card-body  {padding:18px}
.card-footer{padding:12px 18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}

.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{text-align:left;padding:10px 14px;font-size:11px;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface2)}
.data-table td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--txt2);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr{transition:var(--t)}
.data-table tbody tr:hover{background:var(--surface2)}

/* -------------------------------------------
   BADGES
------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-success{background:var(--success-lt);color:#166534}
.badge-danger {background:var(--danger-lt); color:#991B1B}
.badge-warning{background:var(--warning-lt);color:#92400E}
.badge-info   {background:var(--info-lt);   color:#164E63}
.badge-gray   {background:#F1F5F9;          color:var(--txt3)}
.badge-brand  {background:var(--brand-light);color:var(--brand)}

/* -------------------------------------------
   BOTONES
------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r);font-size:13px;font-weight:600;font-family:inherit;border:1px solid transparent;cursor:pointer;transition:var(--t);text-decoration:none;white-space:nowrap}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary  {background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover:not(:disabled){background:var(--brand-hover)}
.btn-secondary{background:var(--surface);color:var(--txt2);border-color:var(--border)}
.btn-secondary:hover:not(:disabled){background:var(--surface2);border-color:var(--border2)}
.btn-danger   {background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover:not(:disabled){background:#B91C1C}
.btn-success  {background:var(--success);color:#fff;border-color:var(--success)}
.btn-success:hover:not(:disabled){background:#15803D}
.btn-sm {padding:5px 10px;font-size:12px}
.btn-icon{padding:7px;width:32px;height:32px;justify-content:center}

/* -------------------------------------------
   FORMS
------------------------------------------- */
.form-grid  {display:grid;gap:14px}
.form-grid-2{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.form-group {display:flex;flex-direction:column;gap:5px}
.form-label {font-size:12px;font-weight:600;color:var(--txt2)}
.form-label.req::after{content:' *';color:var(--danger)}
.form-control{padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--r);font-size:13px;font-family:inherit;color:var(--txt);background:var(--surface);transition:var(--t);width:100%}
.form-control:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.form-control:disabled{background:var(--surface2);color:var(--txt3);cursor:not-allowed}
.form-error{font-size:11px;color:var(--danger);margin-top:2px}
.form-hint {font-size:11px;color:var(--txt3); margin-top:2px}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:80px}

/* -------------------------------------------
   PAGINACION
------------------------------------------- */
.paginacion{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pag-btn{min-width:32px;height:32px;padding:0 8px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);font-size:12px;font-weight:600;color:var(--txt2);cursor:pointer;transition:var(--t);display:flex;align-items:center;justify-content:center}
.pag-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.pag-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}
.pag-btn:disabled{opacity:.4;cursor:not-allowed}

/* -------------------------------------------
   ALERTS / MODAL / TABS / EMPTY
------------------------------------------- */
.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r);font-size:13px;border-left:3px solid}
.alert-success{background:var(--success-lt);color:#166534;border-color:var(--success)}
.alert-danger {background:var(--danger-lt); color:#991B1B;border-color:var(--danger)}
.alert-warning{background:var(--warning-lt);color:#92400E;border-color:var(--warning)}
.alert-info   {background:var(--info-lt);   color:#164E63;border-color:var(--info)}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:600;padding:16px}
.modal{background:var(--surface);border-radius:var(--r2);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:mIn .2s ease}
@keyframes mIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-title{font-size:16px;font-weight:700}
.modal-close{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--surface2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt3);font-size:16px;transition:var(--t)}
.modal-close:hover{background:var(--danger-lt);color:var(--danger)}
.modal-body  {padding:20px}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}

.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:16px}
.tab-item{padding:10px 16px;border:none;background:none;font-size:13px;font-weight:500;color:var(--txt3);cursor:pointer;border-bottom:2px solid transparent;transition:var(--t);font-family:inherit}
.tab-item:hover{color:var(--txt)}
.tab-item.active{color:var(--brand);border-color:var(--brand);font-weight:600}

.empty-state{padding:48px 24px;text-align:center;color:var(--txt3)}
.empty-icon {font-size:40px;margin-bottom:12px;opacity:.4}
.empty-title{font-size:15px;font-weight:600;color:var(--txt2);margin-bottom:6px}
.empty-desc {font-size:13px;line-height:1.6;margin-bottom:16px}

/* -------------------------------------------
   LOGIN
------------------------------------------- */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#EFF6FF,#DBEAFE 50%,#EDE9FE);padding:20px}
.login-card{background:var(--surface);border-radius:16px;padding:40px;width:100%;max-width:420px;box-shadow:0 8px 40px rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.08)}

/* -------------------------------------------
   RESPONSIVE — MÓVIL
------------------------------------------- */
@media(max-width:768px){
  /* En móvil el sidebar es un drawer desde la izquierda */
  .sidebar{
    transform:translateX(-100%);
    width:var(--sidebar-full) !important; /* siempre full en móvil */
    box-shadow:var(--shadow-lg);
  }
  .sidebar.mobile-open{transform:translateX(0)}
  .sidebar.mini{width:var(--sidebar-full) !important} /* ignorar mini en móvil */
  .sb-toggle{display:none} /* ocultar toggle en móvil */
  .sb-overlay{display:block}

  .main      {margin-left:0 !important}
  .topbar-menu{display:flex}
  .page-content{padding:16px}
  .metrics{grid-template-columns:1fr 1fr}
  .form-grid-2{grid-template-columns:1fr}
  .page-header{flex-direction:column}

  /* Topbar compacto en móvil */
  .tb-profile .tb-pname,
  .tb-profile .tb-prole{display:none}
  .topbar-breadcrumb{font-size:13px}
}

@media(max-width:480px){
  .metrics{grid-template-columns:1fr}
  .login-card{padding:28px 20px}
}

/* ----------------------------------------------------
   ICONOS SVG EN BOTONES
   Los botones con SVG necesitan alineación correcta
---------------------------------------------------- */
.btn svg { pointer-events:none; flex-shrink:0; }
.btn-icon { padding:6px; width:32px; height:32px; justify-content:center; border-radius:var(--r); }
.btn-action-edit   { background:var(--brand-light); color:var(--brand); border-color:var(--brand-light); }
.btn-action-edit:hover { background:var(--brand); color:#fff; }
.btn-action-del    { background:var(--danger-lt); color:var(--danger); border-color:var(--danger-lt); }
.btn-action-del:hover  { background:var(--danger); color:#fff; }
.btn-action-ok     { background:var(--success-lt); color:var(--success); border-color:var(--success-lt); }
.btn-action-ok:hover   { background:var(--success); color:#fff; }

/* ----------------------------------------------------
   MÉTRICAS — iconos SVG visibles
---------------------------------------------------- */
.metric-icon svg { display:block; }

/* ----------------------------------------------------
   TABLA RESPONSIVE TIPO CARDS EN MÓVIL
   Igual que Rappi/Pedidos Ya: cada fila se convierte
   en una tarjeta con etiqueta + valor
---------------------------------------------------- */
@media (max-width: 768px) {

  /* Ocultar cabecera de la tabla */
  .data-table thead { display: none; }

  /* Cada fila = una card */
  .data-table tbody tr {
    display:       block;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--r2);
    margin-bottom: 10px;
    padding:       12px 14px;
    box-shadow:    var(--shadow);
  }

  /* Cada celda = una fila con etiqueta */
  .data-table tbody td {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    padding:       6px 0;
    border-bottom: 1px solid var(--border);
    font-size:     13px;
  }
  .data-table tbody td:last-child { border-bottom: none; }

  /* Etiqueta generada desde data-label */
  .data-table tbody td::before {
    content:    attr(data-label);
    font-size:  11px;
    font-weight: 700;
    color:      var(--txt3);
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
    margin-right: 12px;
  }

  /* Columna de acciones centrada */
  .data-table tbody td:last-child {
    justify-content: flex-end;
  }
  .data-table tbody td:last-child::before { display: none; }
}

/* ----------------------------------------------------
   FOOTER SIEMPRE VISIBLE
   Aparece al final de cada página, no del viewport
---------------------------------------------------- */
.page-footer {
  margin-top:   auto;
  padding:      16px 24px;
  border-top:   1px solid var(--border);
  font-size:    12px;
  color:        var(--txt3);
  text-align:   center;
  background:   var(--surface);
}

/* Shell con footer sticky */
.shell { min-height: 100vh; }
.main  { display: flex; flex-direction: column; min-height: 100vh; }
.page-content { flex: 1; }

@keyframes spin { to { transform: rotate(360deg); } }


/* ----------------------------------------------------
   FOOTER GLOBAL — siempre visible en todas las paginas
   Esta dentro del .main, debajo de page-content
---------------------------------------------------- */
.global-footer {
  padding:      12px 24px;
  border-top:   1px solid var(--border);
  font-size:    12px;
  color:        var(--txt3);
  display:      flex;
  align-items:  center;
  gap:          8px;
  background:   var(--surface);
  flex-shrink:  0;
}
.global-footer strong { color: var(--txt2); font-weight: 600; }

/* .main necesita flex-column para que el footer quede abajo */
.main {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
}
.page-content { flex: 1; }

/* Quitar el .page-footer de las paginas individuales
   (ya no se necesita, el footer va en el layout) */
.page-footer { display: none; }

/* Sidebar: ocultar URL del pie */
.sb-sub { display: none; }

/* ----------------------------------------------------
   OVERLAY MÓVIL
---------------------------------------------------- */
.sb-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.5);
  z-index:    290;
  opacity:    0;
  transition: opacity .25s ease;
}
.sb-overlay.show {
  display: block;
  opacity: 1;
}

/* ----------------------------------------------------
   SIDEBAR MÓVIL — drawer desde la izquierda
---------------------------------------------------- */
@media (max-width: 768px) {

  /* Sidebar fuera de pantalla por defecto */
  .sidebar {
    position:   fixed !important;
    top:        0;
    left:       0;
    height:     100dvh;
    width:      var(--sidebar-full) !important;
    transform:  translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index:    300;
    box-shadow: none;
    /* Siempre ancho completo en móvil — ignorar estado mini */
  }

  /* Sidebar visible */
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
  }

  /* Forzar modo expandido en móvil aunque esté en mini */
  .sidebar.mini { width: var(--sidebar-full) !important; }
  .sidebar.mini .sb-name,
  .sidebar.mini .sb-user-info,
  .sidebar.mini .nav-label,
  .sidebar.mini .sb-section { opacity: 1 !important; width: auto !important; }

  /* Ocultar botón toggle en móvil */
  .sb-toggle { display: none !important; }

  /* Contenido ocupa todo el ancho */
  .main      { margin-left: 0 !important; }
  .main.mini { margin-left: 0 !important; }

  /* Mostrar botón hamburguesa */
  .topbar-menu { display: flex !important; }

  /* Ajustes topbar móvil */
  .topbar { padding: 0 14px; gap: 8px; }
  .topbar-breadcrumb { font-size: 13px; }

  /* Logout en sidebar visible solo en móvil */
  .sb-logout-movil { display: block; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }

  /* Métricas en 2 columnas en móvil */
  .metrics { grid-template-columns: 1fr 1fr !important; gap: 10px; }

  /* Page content padding reducido */
  .page-content { padding: 14px; }

  /* Footer global compacto */
  .global-footer { padding: 10px 14px; font-size: 11px; }
}

@media (max-width: 480px) {
  /* Métricas en 1 columna en pantallas muy pequeñas */
  .metrics { grid-template-columns: 1fr !important; }
}

/* Logout en sidebar — oculto en desktop */
.sb-logout-movil { display: none; }

/* Ocultar elementos en móvil */
.tb-hide-mobile { display: flex; }
@media (max-width: 768px) {
  .tb-hide-mobile { display: none !important; }
}

/* Footer global */
.global-footer {
  padding:     12px 24px;
  border-top:  1px solid var(--border);
  font-size:   12px;
  color:       var(--txt3);
  display:     flex;
  align-items: center;
  gap:         8px;
  background:  var(--surface);
  flex-shrink: 0;
}
.global-footer strong { color: var(--txt2); font-weight: 600; }
.main { display: flex; flex-direction: column; min-height: 100vh; }
.page-content { flex: 1; }
.page-footer { display: none; }
.sb-sub { display: none; }
.sb-footer { display: none; }

/* ----------------------------------------------------
   SB-TOGGLE — más grande y visible
---------------------------------------------------- */
.sb-toggle {
  position:        absolute;
  top:             50%;
  right:           -14px;
  transform:       translateY(-50%);
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      var(--brand);
  border:          2px solid var(--surface);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  z-index:         10;
  box-shadow:      0 2px 8px rgba(37,99,235,.35);
  transition:      var(--t);
  color:           #fff;
}
.sb-toggle:hover {
  background:  var(--brand-hover);
  box-shadow:  0 4px 14px rgba(37,99,235,.45);
  transform:   translateY(-50%) scale(1.1);
}
.sb-toggle svg {
  width:  14px;
  height: 14px;
  flex-shrink: 0;
}

/* ----------------------------------------------------
   QUITAR el círculo flotante del borde del sidebar
---------------------------------------------------- */
.sb-toggle { display: none !important; }

/* ----------------------------------------------------
   TOPBAR TOGGLE — botón en la topbar
   Desktop: colapsa/expande el sidebar
   Móvil:   abre el drawer (reemplaza al hamburguesa)
---------------------------------------------------- */
.topbar-toggle {
  width:           38px;
  height:          38px;
  border-radius:   var(--r);
  border:          1px solid var(--border);
  background:      var(--surface2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  color:           var(--txt2);
  transition:      var(--t);
  flex-shrink:     0;
}
.topbar-toggle:hover {
  background:   var(--brand-light);
  color:        var(--brand);
  border-color: var(--brand);
}
.topbar-toggle svg { pointer-events: none; }

/* Ocultar el topbar-menu viejo (hamburguesa standalone)
   ya no se necesita — topbar-toggle lo reemplaza */
.topbar-menu { display: none !important; }

/* ----------------------------------------------------
   MODAL — header y footer sticky
   El body hace scroll, header y footer siempre visibles
---------------------------------------------------- */
.modal {
  display:        flex;
  flex-direction: column;
  max-height:     90vh;        /* altura maxima del modal */
}

.modal-header {
  position:    sticky;
  top:         0;
  z-index:     10;
  background:  var(--surface);
  flex-shrink: 0;
  /* borde ya existe */
}

.modal-body {
  flex:       1;
  overflow-y: auto;
  padding:    20px;
  /* scroll suave */
  overscroll-behavior: contain;
}

.modal-footer {
  position:    sticky;
  bottom:      0;
  z-index:     10;
  background:  var(--surface);
  flex-shrink: 0;
  /* borde ya existe */
}

/* ----------------------------------------------------
   MODAL-CLOSE — más grande y visible
---------------------------------------------------- */
.modal-close {
  width:            32px;
  height:           32px;
  border-radius:    var(--r);
  border:           1px solid var(--border);
  background:       var(--surface2);
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--txt2);
  font-size:        18px;
  line-height:      1;
  transition:       var(--t);
  flex-shrink:      0;
}
.modal-close:hover {
  background:   var(--danger-lt);
  color:        var(--danger);
  border-color: var(--danger);
}

/* ----------------------------------------------------
   MODAL — header y footer sticky
   El body hace scroll, header y footer siempre visibles
---------------------------------------------------- */
.modal {
  display:        flex;
  flex-direction: column;
  max-height:     90vh;        /* altura maxima del modal */
}

.modal-header {
  position:    sticky;
  top:         0;
  z-index:     10;
  background:  var(--surface);
  flex-shrink: 0;
  /* borde ya existe */
}

.modal-body {
  flex:       1;
  overflow-y: auto;
  padding:    20px;
  /* scroll suave */
  overscroll-behavior: contain;
}

.modal-footer {
  position:    sticky;
  bottom:      0;
  z-index:     10;
  background:  var(--surface);
  flex-shrink: 0;
  /* borde ya existe */
}

/* ----------------------------------------------------
   MODAL-CLOSE — más grande y visible
---------------------------------------------------- */
.modal-close {
  width:            32px;
  height:           32px;
  border-radius:    var(--r);
  border:           1px solid var(--border);
  background:       var(--surface2);
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--txt2);
  font-size:        18px;
  line-height:      1;
  transition:       var(--t);
  flex-shrink:      0;
}
.modal-close:hover {
  background:   var(--danger-lt);
  color:        var(--danger);
  border-color: var(--danger);
}

/* ---- MODAL DEFINITIVO ---- */
.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.45);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         600;
  padding:         16px;
}

.modal {
  background:      var(--surface);
  border-radius:   var(--r2);
  width:           100%;
  max-width:       560px;
  max-height:      88vh;
  display:         flex;
  flex-direction:  column;
  box-shadow:      0 20px 60px rgba(0,0,0,.2);
  overflow:        hidden;   /* clips hijos, el scroll va en modal-body */
}

.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  border-bottom:   1px solid var(--border);
  background:      var(--surface);
  flex-shrink:     0;         /* nunca se encoge */
}

.modal-title {
  font-size:   16px;
  font-weight: 700;
  color:       var(--txt);
}

.modal-close {
  width:            32px;
  height:           32px;
  border-radius:    var(--r);
  border:           1.5px solid var(--border);
  background:       var(--surface2);
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--txt2);
  font-size:        18px;
  line-height:      1;
  font-weight:      400;
  transition:       var(--t);
  flex-shrink:      0;
}
.modal-close:hover {
  background:   var(--danger-lt);
  color:        var(--danger);
  border-color: var(--danger);
}

.modal-body {
  flex:                1;
  overflow-y:          auto;
  padding:             20px;
  overscroll-behavior: contain;
}

.modal-footer {
  display:         flex;
  justify-content: flex-end;
  gap:             8px;
  padding:         14px 20px;
  border-top:      1px solid var(--border);
  background:      var(--surface);
  flex-shrink:     0;         /* nunca se encoge */
}

/* ---- SELECT / COMBO ---- */
/* El select nativo necesita height explicito y
   appearance para que se vea igual en todos los SO */
select.form-control {
  appearance:       auto;
  -webkit-appearance: auto;
  cursor:           pointer;
  height:           auto;
  min-height:       38px;
  padding-right:    28px;
  background-image: none;  /* quitar icono custom que tape las opciones */
}

/* Asegurar que las opciones del select sean legibles */
select.form-control option {
  font-family: inherit;
  font-size:   13px;
  color:       #000;         /* forzar negro para Windows */
  background:  #fff;
  padding:     6px 10px;
}

/* modal-close con SVG */
.modal-close {
  width:           32px;
  height:          32px;
  border-radius:   var(--r);
  border:          1.5px solid var(--border);
  background:      var(--surface2);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--txt2);
  transition:      var(--t);
  flex-shrink:     0;
  padding:         0;
}
.modal-close:hover {
  background:   var(--danger-lt);
  color:        var(--danger);
  border-color: var(--danger);
}
.modal-close svg { pointer-events: none; }

/* modal-close SVG */
.modal-close {
  width:28px;height:28px;border-radius:var(--r);
  border:1.5px solid var(--border);background:var(--surface2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--txt2);transition:var(--t);flex-shrink:0;padding:0;
}
.modal-close:hover{background:var(--danger-lt);color:var(--danger);border-color:var(--danger)}
.modal-close svg{pointer-events:none}

/* WhatsApp mockup dark */
.phone{width:min(290px,78vw);border-radius:36px;border:8px solid #1a1a1a;background:#111b21;box-shadow:var(--shl);position:relative;z-index:1;overflow:hidden}
.phb{height:22px;background:#1a1a1a;display:flex;align-items:center;justify-content:center}
.phb-n{width:56px;height:5px;background:#333;border-radius:3px}
.was{background:#111b21}
.wah{background:#1f2c34;padding:10px 14px;display:flex;align-items:center;gap:10px}
.wav{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wan{font-size:13px;font-weight:700;color:#e9edef}
.was2{font-size:10px;color:rgba(255,255,255,.5)}
.wah-r{margin-left:auto;display:flex;gap:16px;color:rgba(255,255,255,.5)}
.wab{padding:10px;background:#0b141a;min-height:180px;display:flex;flex-direction:column;gap:6px}
.wb{padding:9px 11px;border-radius:0 10px 10px 10px;background:#202c33;color:#e9edef;font-size:11.5px;line-height:1.55;max-width:90%}
.wb strong{color:#fff}
.wb-link{color:#53bdeb;text-decoration:none;display:flex;align-items:center;gap:5px;margin-top:4px;font-size:11px}
.wt{font-size:10px;color:rgba(255,255,255,.3);text-align:right;margin-top:3px}
.wver{background:#1a1a1a;padding:10px 14px;border-top:1px solid #2a3942}
.wver-btn{display:flex;align-items:center;justify-content:center;gap:8px;color:#00a884;font-size:13px;font-weight:600;cursor:pointer}
.wver-lines{display:flex;flex-direction:column;gap:3px}
.wver-lines i{display:block;height:2px;background:#00a884;border-radius:1px;font-style:normal}
.wver-lines i:nth-child(1){width:10px}
.wver-lines i:nth-child(2){width:16px}
.wver-lines i:nth-child(3){width:16px}

/* Mockup WhatsApp claro - original */
.phone{width:min(280px,78vw);background:#fff;border-radius:32px;border:1px solid var(--b);padding:12px;box-shadow:var(--shl);position:relative;z-index:1}
.phb{height:6px;width:60px;border-radius:3px;background:var(--b2);margin:0 auto 12px}
.was{background:#E5DDD5;border-radius:22px;overflow:hidden}
.wah{background:linear-gradient(135deg,#075E54,#128C7E);padding:10px 12px;display:flex;align-items:center;gap:9px}
.wav{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--g),#34D399);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff;flex-shrink:0}
.wan{font-size:12px;font-weight:700;color:#fff}
.was2{font-size:10px;color:rgba(255,255,255,.7)}
.wab{padding:10px;background:#E5DDD5;min-height:240px;display:flex;flex-direction:column;gap:6px}
.wb{padding:8px 10px;border-radius:2px 10px 10px 10px;background:#fff;color:#111;font-size:11px;line-height:1.5;max-width:88%;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wu{padding:8px 10px;border-radius:10px 2px 10px 10px;background:#DCF8C6;color:#111;font-size:11px;max-width:75%;align-self:flex-end;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wt{font-size:9px;color:rgba(0,0,0,.35);text-align:right;margin-top:2px}
.wop{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0}
.wo{padding:5px 10px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.08);font-size:10px;color:#075E54;font-weight:600}
.wai{background:#F0F0F0;padding:8px 10px;display:flex;align-items:center;gap:8px}
.waib{flex:1;background:#fff;border-radius:20px;padding:6px 10px;font-size:10px;color:var(--t3)}
.wase{width:28px;height:28px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center}

/* ================================================
   MOCKUP WHATSAPP — CLARO (fondo verde agua)
   Sobreescribe cualquier version dark anterior
================================================ */
.phone {
  width:         min(280px, 78vw) !important;
  background:    #fff !important;
  border-radius: 32px !important;
  border:        1px solid var(--b) !important;
  padding:       12px !important;
  box-shadow:    var(--shl) !important;
  position:      relative;
  z-index:       1;
}
.phb {
  height:        6px;
  width:         60px;
  border-radius: 3px;
  background:    var(--b2);
  margin:        0 auto 12px;
}
/* Quitar notch oscuro si quedó */
.phb-n { display: none; }

.was {
  background:    #E5DDD5 !important;
  border-radius: 22px;
  overflow:      hidden;
}
.wah {
  background: linear-gradient(135deg,#075E54,#128C7E) !important;
  padding:    10px 12px;
  display:    flex;
  align-items:center;
  gap:        9px;
}
.wav {
  width:         34px;
  height:        34px;
  border-radius: 50%;
  background:    linear-gradient(135deg,#25D366,#128C7E) !important;
  display:       flex;
  align-items:   center;
  justify-content:center;
  font-weight:   800;
  font-size:     12px;
  color:         #fff;
  flex-shrink:   0;
}
.wan  { font-size:12px; font-weight:700; color:#fff !important; }
.was2 { font-size:10px; color:rgba(255,255,255,.7) !important; }

.wab {
  padding:    10px;
  background: #E5DDD5 !important;
  min-height: 220px;
  display:    flex;
  flex-direction:column;
  gap:        6px;
}
.wb {
  padding:       8px 10px;
  border-radius: 2px 10px 10px 10px;
  background:    #fff !important;
  color:         #111 !important;
  font-size:     11px;
  line-height:   1.5;
  max-width:     88%;
  box-shadow:    0 1px 2px rgba(0,0,0,.1);
}
.wb strong { color: #000 !important; }
.wu {
  padding:       8px 10px;
  border-radius: 10px 2px 10px 10px;
  background:    #DCF8C6 !important;
  color:         #111 !important;
  font-size:     11px;
  max-width:     75%;
  align-self:    flex-end;
  box-shadow:    0 1px 2px rgba(0,0,0,.1);
}
.wt { font-size:9px; color:rgba(0,0,0,.35) !important; text-align:right; margin-top:2px; }

.wop { display:flex; flex-wrap:wrap; gap:4px; padding:2px 0; }
.wo  {
  padding:       5px 10px;
  border-radius: 16px;
  background:    #fff !important;
  border:        1px solid rgba(0,0,0,.08);
  font-size:     10px;
  color:         #075E54 !important;
  font-weight:   600;
}
.wai {
  background: #F0F0F0 !important;
  padding:    8px 10px;
  display:    flex;
  align-items:center;
  gap:        8px;
}
.waib {
  flex:          1;
  background:    #fff !important;
  border-radius: 20px;
  padding:       6px 10px;
  font-size:     10px;
  color:         #aaa;
}
.wase {
  width:          28px;
  height:         28px;
  border-radius:  50%;
  background:     #25D366 !important;
  display:        flex;
  align-items:    center;
  justify-content:center;
}
/* Ocultar boton "Ver opciones" dark si quedó */
.wver { display: none !important; }
/* ─────────────────────────────────────────────────────────────────
   DASHBOARD — agregar al final de panel.css
───────────────────────────────────────────────────────────────── */

/* Spinner reutilizable */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border2);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Grilla de métricas ─────────────────────────────────────── */
.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.metric {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: var(--t);
}

    .metric:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }

.metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: var(--surface2);
    color: var(--txt2);
}

.metric-label {
    font-size: 11px;
    color: var(--txt3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 2px;
}

.metric-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--txt);
    line-height: 1.2;
}

.metric-sub {
    font-size: 11px;
    color: var(--txt3);
    margin-top: 2px;
}

/* Variantes de color para el icono */
.mi-blue .metric-icon {
    background: #E0F2FE;
    color: #0369A1;
}

.mi-green .metric-icon {
    background: #DCFCE7;
    color: #16A34A;
}

.mi-amber .metric-icon {
    background: #FEF9C3;
    color: #A16207;
}

.mi-red .metric-icon {
    background: #FEE2E2;
    color: #DC2626;
}

/* ── Badges inline ───────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-success {
    background: var(--success-lt);
    color: #166534;
}

.badge-danger {
    background: var(--danger-lt);
    color: #991B1B;
}

.badge-warning {
    background: var(--warning-lt);
    color: #92400E;
}

.badge-gray {
    background: var(--surface2);
    color: var(--txt3);
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r2);
    padding: 40px 24px;
    text-align: center;
}

.empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: .5;
}

.empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--txt2);
    margin-bottom: 4px;
}

.empty-desc {
    font-size: 13px;
    color: var(--txt3);
}