:root{
    --ink:#16233F; --ink-soft:#48557a; --paper:#F7F4EC; --card:#FFFFFF;
    --accent:#0E6E5C; --accent-dark:#0A5548; --accent-soft:#E3EEEC;
    --amber:#C97A2B; --amber-soft:#FBEBD9;
    --line:#E3DECF; --danger:#B23A3A; --danger-soft:#F6E4E2;

    --sidebar-w: 255px;
    --topbar-h: 64px;

    --bg-sidebar: #10162B;
    --bg-sidebar-active: #1B2242;
    --border-sidebar: #232B4D;
    --text-muted: #8891B5;
    --text-light: #EDEFF7;

    --accent: #33D6A6;
    --accent-soft: rgba(51, 214, 166, .14);

    --tier-trial: #6B7280;
    --tier-emprende: #33D6A6;
    --tier-profesional: #F2B84B;
    --tier-enterprise: #A78BFA;

    --bg-app: #F5F6FA;
    --bg-card: #FFFFFF;
    --text-body: #1C2340;

    --font-display: 'Sora', sans-serif;
    --font-body: 'Inter', sans-serif;

}
  *{ box-sizing:border-box; }
  body{
    font-family: var(--font-body);
    background: var(--bg-app);
    color: var(--text-body);
    margin: 0;
  }

  /* =========================================================
   Tamaño personalizado de fuentes
   ========================================================= */
  .fs-7 {
    font-size: 0.875rem !important;
  }
  .fs-8 {
    font-size: 0.75rem !important;
  }
  .fs-9 {
    font-size: 0.65rem !important;
  }

  .font-mono{ font-family:'IBM Plex Mono', monospace; }
  .item-name{ font-weight:500; color:var(--ink);}
  .item-desc{ font-size:.7rem; color:#7b86a3; }

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

   .sidebar{
  position:fixed; top:0; left:0; bottom:0;
  width:var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-sidebar);
  display:flex; flex-direction:column;
  z-index:1030;
  transition: width .22s ease, transform .22s ease;
}

.sidebar-header{
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-sidebar);
}
.brand{
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; overflow: hidden;
}
.brand-mark{
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), #1FA37E);
  color: #0A0F1E;
  font-family: var(--font-display); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.brand-text{
  font-family: var(--font-display); font-weight: 700;
  color: var(--text-light); font-size: 1.02rem;
  white-space: nowrap;
  display: flex; flex-direction: column; line-height: 1.4;
}
.brand-text small{ font-family: var(--font-body); font-weight: 500; color: var(--fog); font-size: .65rem; letter-spacing: .06em; }

.btn-collapse{
  background: transparent; border: 1px solid var(--border-sidebar);
  color: var(--fog); width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform .22s ease, background .15s ease;
}
.btn-collapse:hover{ background: var(--panel-2); color: var(--paper); }

.sidebar-nav{
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 14px 10px;
}
.sidebar-nav::-webkit-scrollbar{ width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background: var(--overlay-bg); border-radius: 4px; }

.nav-section-label{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--text-muted); font-weight:600; padding:0 .6rem; margin:1.1rem 0 .5rem;
}
.nav-section-label:first-of-type{ margin-top:0; }

.side-link{
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; margin: 1px 0;
  border-radius: 9px;
  color: #C4CAE6; font-size: .875rem; font-weight: 500;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease; text-decoration: none;
}
.side-link i{ font-size:1.05rem; width:20px; text-align:center; flex-shrink:0; }
.side-link:hover{ background:rgba(124,140,248,.08); color:var(--paper); }
.side-link.active{
  background:rgba(124,140,248,.08); color:var(--paper);
  color:var(--paper);
}
.side-link.active::before{
  content:""; position:absolute; left:-1rem; top:50%; translate:0 -50%;
  width:3px; height:60%; border-radius:3px;
  background:linear-gradient(180deg, var(--violet), var(--teal));
}
.side-link .badge-count{
  margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:.68rem;
  color: var(--text-muted); background:var(--panel-2); border:1px solid var(--line);
  padding:.1rem .4rem; border-radius:8px;
}
.side-link.active .badge-count{ color:var(--violet); border-color:rgba(124,140,248,.35); }

/* Submenús */
.nav-item.has-submenu{ position:relative; }
.submenu-toggle .badge-count{ margin-left:0; }
.submenu-caret{
  margin-left:auto; font-size:.7rem; color: var(--text-muted);
  transition:transform .2s ease;
}
.submenu-toggle[aria-expanded="true"] .submenu-caret{ transform:rotate(180deg); }
.submenu-toggle[aria-expanded="true"]{ color:var(--paper); }

.submenu{
  list-style:none; margin:0; padding:2px 0 4px 2rem;
}
.submenu-link{
  display:flex; align-items:center; gap:.5rem;
  padding:.45rem .6rem; margin:1px 0; border-radius:8px;
  color: var(--text-muted); font-size:.82rem; text-decoration:none;
  transition:background .15s ease, color .15s ease;
  position:relative;
}
.submenu-link::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--text-muted); flex-shrink:0;
}
.submenu-link:hover{ background:rgba(124,140,248,.08); color:var(--paper); }
.submenu-link.active::before{ background:var(--violet); box-shadow:0 0 0 3px rgba(124,140,248,.18); }
.submenu-link .badge-count{ margin-left:auto; }

.sidebar-footer{
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); flex-shrink:0;
}
.user-card{
  width:100%; background:transparent; border:none;
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem; border-radius:10px; cursor:pointer; transition:.15s ease;
}
.user-card:hover{ background:var(--panel-2); }
.user-card .agent-avatar{ width:32px; height:32px; border-radius:9px; font-size:.75rem; flex-shrink:0; }
.user-meta{ display:flex; flex-direction:column; align-items:flex-start; overflow:hidden; flex:1; }
.u-name{ font-size:.82rem; font-weight:600; line-height:1.1; color:var(--paper); white-space:nowrap; }
.u-role{ font-size:.7rem; }
.u-email{ font-size:.8rem; font-weight:600; line-height:1; color: var(--text-muted); }
.user-card i.bi-three-dots-vertical{ color: var(--text-muted); flex-shrink:0; }

/* =========================================================
   SIDEBAR OCULTO — el botón de colapsar esconde el sidebar
   completo (se desplaza fuera de pantalla) en vez de reducirlo
   a un riel de íconos.
   ========================================================= */
.sidebar.sidebar-hidden{ transform: translateX(-100%); }
.btn-collapse i{ transition: transform .22s ease; }

.sidebar.sidebar-hidden{ transform:translateX(-100%); }

.app-shell{ margin-left:var(--sidebar-w); transition:margin-left .22s ease; min-height:100vh; }
.sidebar.sidebar-hidden ~ .app-shell{ margin-left:0; }

.menu-toggle{
  background:var(--panel-2); border:1px solid var(--line); color:var(--paper);
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(6,10,18,.55); z-index:1025;
}
.sidebar-overlay.show{ display:block; }

@media (max-width: 991.98px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.show-mobile{ transform:translateX(0); }
  .sidebar.sidebar-hidden ~ .app-shell{ margin-left:0; }
  .app-shell{ margin-left:0; }
  .btn-collapse{ display:none; }
}

@media (max-width: 767.98px){
  .kpi-value{ font-size:1.9rem; }
  .donut-wrap{ justify-content:center; }
  .pulse-strip{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; }
}
/****************************/
.sidebar-footer{
  margin-top:auto; padding:10px; border-top: 1px solid var(--border-sidebar); flex-shrink:0;
}
.user-card{
  width:100%; background:transparent; border:none;
  display:flex; align-items:center; gap:.6rem;
  padding:8px; border-radius:10px; cursor:pointer; transition: background .15s ease;
}
.user-card:hover{ background: var(--bg-sidebar-active); }
.user-card .agent-avatar{
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--bg-sidebar-active); color: var(--text-light);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; font-family: var(--font-display);
    border: 1px solid var(--border-sidebar);
}
.user-meta{ display:flex; flex-direction:column; align-items:flex-start; overflow:hidden; flex:1; }
.u-name{ font-size:.82rem; font-weight:600; line-height:1.1; color: var(--text-light); white-space:nowrap; }
.u-role{ font-size:.7rem; color: var(--tier-profesional); }
.user-card i.bi-three-dots-vertical{ color:var(--text-muted); flex-shrink:0; }

/* El sidebar se oculta desplazándose fuera de pantalla; el contenido
   recupera el espacio ajustando su margen */
.sidebar.sidebar-hidden{ transform:translateX(-100%); }

.app-shell{ margin-left:var(--sidebar-w); transition:margin-left .22s ease; min-height:100vh; }
.sidebar.sidebar-hidden ~ .app-shell{ margin-left:0; }

.menu-toggle{
  background:var(--panel-2); border:1px solid var(--line); color: var(--text-light);
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.theme-toggle{
  background:var(--panel-2); border:1px solid var(--line); color:var(--paper);
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:.15s ease;
}

/* Overlay para el modo off-canvas en móvil/tablet */
.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(6,10,18,.55); z-index:1025;
}
.sidebar-overlay.show{ display:block; }

@media (max-width: 991.98px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.show-mobile{ transform:translateX(0); }
  .sidebar.sidebar-hidden ~ .app-shell{ margin-left:0; }
  .app-shell{ margin-left:0; }
  .btn-collapse{ display:none; }
}

@media (max-width: 767.98px){
  .kpi-value{ font-size:1.9rem; }
  .donut-wrap{ justify-content:center; }
  .pulse-strip{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; }
}

/* =========================================================
   TOPBAR + CONTENIDO
   ========================================================= */
.app-shell{ margin-left: var(--sidebar-w); transition: margin-left .22s ease; min-height: 100vh; }
.sidebar.sidebar-hidden ~ .app-shell{ margin-left: 0; }

.topbar{
  height: var(--topbar-h);
  background: var(--bg-card);
  border-bottom: 1px solid #E7E9F2;
  display: flex; align-items: center; gap: 14px;
  padding: 0 15px; position: sticky; top: 0; z-index: 1020;
}
.btn-icon{
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid #E7E9F2;
  background: var(--bg-card); color: var(--text-body);
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
}
.btn-icon:hover{ background: var(--bg-app); }
.dot-badge{
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tier-profesional); border: 2px solid var(--bg-card);
}
.breadcrumb{ font-family: var(--font-display); font-weight: 600; font-size: .92rem; }
.topbar-actions{ margin-left: auto; display: flex; gap: 8px; }

.content{ padding: 20px; }
.page-title{ font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; margin-bottom: 4px; }
.page-subtitle{ color: #6B7280; font-size: .9rem; margin-bottom: 22px; }

.stat-card{
  background: var(--bg-card); border: 1px solid #E7E9F2; border-radius: 14px;
  padding: 18px; height: 100%;
}
.stat-card .stat-label{ font-size: .78rem; color: #6B7280; font-weight: 500; }
.stat-card .stat-value{ font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-top: 4px; }
.stat-card .stat-tier{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

/* =========================================================
   RESPONSIVE — mobile: sidebar off-canvas
   ========================================================= */
.sidebar-overlay{
  display: none;
  position: fixed; inset: 0; background: rgba(10,14,30,.5);
  z-index: 1025;
}
.sidebar-overlay.show{ display: block; }

@media (max-width: 991.98px){
  .sidebar{ transform: translateX(-100%); }
  .sidebar.show-mobile{ transform: translateX(0); }
  .app-shell{ margin-left: 0; }
  .btn-collapse{ display: none; }
}

  .font-display{ font-family:'Fraunces', serif; }
  .font-mono{ font-family:'IBM Plex Mono', monospace; }

  .split-wrap{ min-height:100vh; }

  /* ---------- Panel de marca ---------- */
  .brand-panel{
    background:linear-gradient(160deg, var(--ink) 0%, #1f3159 60%, #223a63 100%);
    color:#EDE9DD;
    position:relative;
    overflow:hidden;
    padding:3rem 3rem;
    display:flex; flex-direction:column; justify-content:space-between;
    min-height:100vh;
  }
  .brand-panel::before{
    content:"";
    position:absolute; width:26rem; height:26rem; border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    top:-8rem; right:-8rem;
  }
  .brand-panel::after{
    content:"";
    position:absolute; width:18rem; height:18rem; border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    bottom:-6rem; left:-6rem;
  }
  .brand-panel .glow{
    position:absolute; inset:0;
    background-image:radial-gradient(circle at 20% 85%, rgba(14,110,92,.35), transparent 45%);
    pointer-events:none;
  }

  .brand-logo{
    width:2.6rem; height:2.6rem; border-radius:.7rem;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
    display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:#EDE9DD;
  }
  .brand-name{ font-family:'IBM Plex Mono', monospace; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:#B9C3DE; }

  .brand-panel h1{ font-size:2.2rem; font-weight:600; line-height:1.25; margin-top:1.75rem; position:relative; z-index:2; }
  .brand-panel .lead-text{ color:#C7CFE6; font-size:.95rem; margin-top:.75rem; max-width:26rem; position:relative; z-index:2; }

  .feature-list{ margin-top:2.25rem; position:relative; z-index:2; }
  .feature-item{ display:flex; gap:.85rem; align-items:flex-start; margin-bottom:1.15rem; }
  .feature-icon{
    width:2.3rem; height:2.3rem; border-radius:.6rem; flex-shrink:0;
    background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center; font-size:1.05rem; color:#8FE0CC;
  }
  .feature-title{ font-weight:600; font-size:.9rem; color:#EDE9DD; }
  .feature-desc{ font-size:.78rem; color:#A9B4D6; }

  .brand-footer{ position:relative; z-index:2; font-size:.72rem; color:#8592B8; }

  /* ---------- Panel de formulario ---------- */
  .form-panel{
    display:flex; align-items:center; justify-content:center;
    min-height:100vh; padding:2.5rem 1.5rem;
  }
  .form-wrap{ width:100%; max-width:23rem; }

  .mobile-brand{ display:none; }

  .form-title{ font-family:'Fraunces', serif; font-weight:600; font-size:1.6rem; color:var(--ink); }
  .form-sub{ font-size:.88rem; color:#8a93ac; margin-top:.2rem; }

  .field-label{ font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:.35rem; }
  .form-control:focus{ border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(14,110,92,.12); }
  .input-group .form-control{ border-right:0; }
  .input-group-text{ background:#fff; border-color:var(--line); border-left:0; color:#9aa5c4; cursor:pointer; }
  .input-group:focus-within .input-group-text{ border-color:var(--accent); }
  .input-group:focus-within .form-control{ border-color:var(--accent); }

  .form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); }
  .link-accent{ color:var(--accent-dark); text-decoration:none; font-weight:600; font-size:.85rem; }
  .link-accent:hover{ text-decoration:underline; color:var(--accent-dark); }

  .btn-login{
    background:var(--accent); border:1px solid var(--accent); color:#fff; font-weight:600;
    padding:.7rem; border-radius:.65rem; width:100%;
  }
  .btn-login:hover{ background:var(--accent-dark); color:#fff; }
  .btn-login:disabled{ opacity:.65; }

  .divider-or{ display:flex; align-items:center; gap:.75rem; margin:1.4rem 0; color:#9aa5c4; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }
  .divider-or::before, .divider-or::after{ content:""; flex:1; height:1px; background:var(--line); }

  .btn-sso{
    background:#fff; border:1px solid var(--line); color:var(--ink); font-weight:500; font-size:.85rem;
    padding:.55rem; border-radius:.6rem; display:flex; align-items:center; justify-content:center; gap:.5rem;
  }
  .btn-sso:hover{ background:#FAF8F2; border-color:#D8D0B8; }

  .alert-login{
    border-radius:.65rem; font-size:.83rem; padding:.7rem .9rem; border:1px solid var(--danger); background:var(--danger-soft); color:var(--danger);
  }

  .footer-note{ font-size:.78rem; color:#8a93ac; text-align:center; margin-top:1.75rem; }

/* ---------- Panel de formulario ---------- */
#spreadsheet .jexcel {
    width: 100%;
}
#spreadsheet .jexcel > tbody > tr {
    height: 9px;
    font-size: 0.85rem;
}
#spreadsheet .jexcel_selectall{
    width: 2px !important;
}
#spreadsheet .jexcel > thead > tr > td {
    height: 9px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
}
#spreadsheet .jexcel > tbody > tr:nth-child(even) > td {
    background-color: #fdfff1;
}
#spreadsheet .jexcel > tbody > tr:hover > td {
    background-color: #f1f3f5;
}

/* ---------- Totals ---------- */
  .totals-box{
    border:1px dashed #C7BFA6; border-radius:.9rem; background:#FCFAF4; padding:.245rem .6rem;
  }
  .totals-row{ display:flex; justify-content:space-between; font-size:.9rem; padding:.3rem 0; color:var(--ink-soft); }
  .totals-row .val{ font-family:'IBM Plex Mono', monospace; color:var(--ink); }
  .totals-row.total{
    border-top:1px solid #DBD3B9; margin-top:.4rem; padding-top:.7rem; font-size:.9rem; font-weight:700; color:var(--ink);
  }
  .totals-row.total .val{ color:var(--accent-dark); font-size:.9rem; }