/*
 * STE Design System v1.0 · CRM Comercial STE
 * Capa visual canónica. No contiene lógica de negocio.
 */
:root{
  --ste-ds-primary:#17324d;
  --ste-ds-primary-strong:#0d1f2f;
  --ste-ds-primary-soft:#203f5a;
  --ste-ds-accent:#db7b12;
  --ste-ds-accent-strong:#c16a0b;
  --ste-ds-bg:#f3f6f8;
  --ste-ds-surface:#ffffff;
  --ste-ds-surface-subtle:#f8fafb;
  --ste-ds-border:#dce4ea;
  --ste-ds-border-strong:#c9d4dc;
  --ste-ds-text:#1d2731;
  --ste-ds-text-muted:#657482;
  --ste-ds-success:#24684f;
  --ste-ds-success-bg:#e7f4ee;
  --ste-ds-warning:#8c6500;
  --ste-ds-warning-bg:#fff6d8;
  --ste-ds-danger:#a93636;
  --ste-ds-danger-bg:#fdecec;
  --ste-ds-info:#2f6d98;
  --ste-ds-info-bg:#e8f1f7;
  --ste-ds-focus:#2f6d98;
  --ste-ds-disabled:#a7b2bb;
  --ste-ds-space-1:4px;
  --ste-ds-space-2:8px;
  --ste-ds-space-3:12px;
  --ste-ds-space-4:16px;
  --ste-ds-space-6:24px;
  --ste-ds-space-8:32px;
  --ste-ds-radius-sm:8px;
  --ste-ds-radius-md:12px;
  --ste-ds-radius-lg:16px;
  --ste-ds-shadow-sm:0 4px 16px rgba(16,42,61,.07);
  --ste-ds-shadow-md:0 16px 40px rgba(13,31,47,.14);
  --ste-ds-sidebar-expanded:304px;
  --ste-ds-sidebar-compact:72px;
  --ste-ds-topbar-height:72px;
  --ste-ds-content-max:1680px;
  --ste-ds-motion-fast:150ms;
  --ste-ds-motion-normal:220ms;
  --bg:var(--ste-ds-bg);
  --panel:var(--ste-ds-surface);
  --text:var(--ste-ds-text);
  --muted:var(--ste-ds-text-muted);
  --primary:var(--ste-ds-primary);
  --primary2:var(--ste-ds-primary-soft);
  --line:var(--ste-ds-border);
  --radius:var(--ste-ds-radius-md);
  --shadow:var(--ste-ds-shadow-sm);
}

html{scroll-behavior:smooth}
body.app-body{font-size:15px;line-height:1.45;background:var(--ste-ds-bg);color:var(--ste-ds-text)}
:focus-visible{outline:3px solid rgba(47,109,152,.28);outline-offset:2px}
.ste-icon{display:inline-block;flex:0 0 auto;vertical-align:-.16em}

/* AppShell / Sidebar ------------------------------------------------------ */
.sidebar{
  width:var(--ste-ds-sidebar-expanded);
  padding:0;
  overflow-x:hidden;
  background:linear-gradient(180deg,var(--ste-ds-primary-strong),#10283c 62%,#0e2233);
  box-shadow:8px 0 28px rgba(9,27,41,.10);
  transition:width var(--ste-ds-motion-normal) ease,transform var(--ste-ds-motion-normal) ease;
}
.main{
  margin-left:var(--ste-ds-sidebar-expanded);
  width:calc(100% - var(--ste-ds-sidebar-expanded));
  transition:margin-left var(--ste-ds-motion-normal) ease,width var(--ste-ds-motion-normal) ease;
}
.sidebar-head{
  min-height:var(--ste-ds-topbar-height);
  padding:10px 10px 10px 14px;
  border-bottom:1px solid rgba(255,255,255,.09);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.sidebar-head .brand{min-width:0;margin:0;display:flex;align-items:center;gap:10px;color:#fff}
.brand-logo{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.18));flex:0 0 auto}
.brand-copy{min-width:0;display:block;overflow:hidden}
.brand-copy strong{font-size:15px;white-space:nowrap}
.brand-copy span{font-size:11px;color:#9eb1bf;white-space:nowrap}
.sidebar-collapse,.sidebar-mobile-close{
  width:36px;height:36px;display:inline-grid;place-items:center;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(255,255,255,.04);color:#d8e2e9;cursor:pointer;
}
.sidebar-collapse:hover,.sidebar-mobile-close:hover{background:rgba(255,255,255,.10);color:#fff}
.sidebar-mobile-close{display:none}
.sidebar nav{padding:10px 10px 18px;display:block}
.sidebar-item,.menu-group-links a{
  position:relative;min-height:42px;display:flex!important;align-items:center;gap:11px;
  padding:8px 10px!important;margin:3px 0!important;border-radius:9px!important;
  color:#c8d4dd!important;font-weight:700!important;white-space:nowrap;
  transition:background var(--ste-ds-motion-fast),color var(--ste-ds-motion-fast),box-shadow var(--ste-ds-motion-fast);
}
.sidebar-item:hover,.menu-group-links a:hover{background:rgba(255,255,255,.065)!important;color:#fff!important}
.sidebar nav a.active{
  color:#fff!important;
  background:rgba(43,75,99,.62)!important;
  box-shadow:inset 3px 0 0 var(--ste-ds-accent)!important;
}
.sidebar nav a.active .nav-icon{color:#ffad54}
.nav-icon{width:20px;height:20px;flex:0 0 20px;color:#9fb1bf}
.nav-label{overflow:hidden;text-overflow:ellipsis}
.menu-group{margin:7px 0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
.menu-group summary{
  min-height:38px;padding:7px 9px!important;display:flex;align-items:center;justify-content:space-between;gap:8px;
  color:#8499a9!important;font-size:.69rem!important;letter-spacing:.09em!important;font-weight:800!important;
  text-transform:uppercase;cursor:pointer;list-style:none;border-radius:8px;
}
.menu-group summary::-webkit-details-marker{display:none}
.menu-group summary:hover{background:rgba(255,255,255,.035);color:#aebfca!important}
.menu-group summary:after{content:none!important}
.summary-main{display:flex;align-items:center;gap:10px;min-width:0}
.group-chevron{transition:transform var(--ste-ds-motion-fast)}
.menu-group[open] .group-chevron{transform:rotate(180deg)}
.menu-group-links{padding:0 0 2px 9px!important}
.menu-group-links a{font-size:13px!important}
.sidebar-backdrop{background:rgba(8,21,33,.46)!important;backdrop-filter:blur(2px)}

body.sidebar-compact .sidebar{width:var(--ste-ds-sidebar-compact)}
body.sidebar-compact .main{margin-left:var(--ste-ds-sidebar-compact);width:calc(100% - var(--ste-ds-sidebar-compact))}
body.sidebar-compact .sidebar-head{padding-left:11px;padding-right:11px;justify-content:center}
body.sidebar-compact .brand-copy,body.sidebar-compact .sidebar-collapse{display:none}
body.sidebar-compact .brand-logo{width:44px;height:44px}
body.sidebar-compact .sidebar nav{padding-left:10px;padding-right:10px}
body.sidebar-compact .sidebar-item,body.sidebar-compact .menu-group-links a{width:52px;justify-content:center;padding:8px!important;gap:0}
body.sidebar-compact .sidebar .nav-label,body.sidebar-compact .menu-group summary .nav-label,body.sidebar-compact .group-chevron{display:none}
body.sidebar-compact .menu-group summary{width:52px;justify-content:center;padding:7px!important}
body.sidebar-compact .menu-group-links{padding-left:0!important}
body.sidebar-compact .menu-group{margin:4px 0!important}
body.sidebar-compact .menu-group:not([open]) .menu-group-links{display:none}
body.sidebar-compact .menu-group[open]{padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.055)!important}
body.sidebar-compact .sidebar nav a.active{box-shadow:inset 3px 0 0 var(--ste-ds-accent)!important}

/* Topbar ------------------------------------------------------------------ */
.topbar{
  min-height:var(--ste-ds-topbar-height);height:var(--ste-ds-topbar-height);
  padding:10px 24px;display:flex;align-items:center;gap:18px;
  background:rgba(255,255,255,.97);border-bottom:1px solid var(--ste-ds-border);box-shadow:none;
}
.topbar-leading{display:flex;align-items:center;gap:10px;min-width:190px}
.topbar-context{display:grid;line-height:1.2}
.topbar-context strong{font-size:14px;font-weight:800;color:var(--ste-ds-text)}
.topbar-context small{font-size:11px;color:var(--ste-ds-text-muted)}
.topbar-menu{display:none;width:38px;height:38px;border:1px solid var(--ste-ds-border);border-radius:9px;background:#fff;color:var(--ste-ds-primary);cursor:pointer;place-items:center}
.global-search{position:relative;flex:1;max-width:640px;margin-inline:auto}
.global-search .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#7a8995;pointer-events:none;display:grid}
.global-search input{height:42px;min-height:42px;padding:8px 14px 8px 38px!important;border:1px solid var(--ste-ds-border-strong)!important;border-radius:10px!important;background:#fff!important}
.global-search input:focus{border-color:var(--ste-ds-focus)!important;box-shadow:0 0 0 3px rgba(47,109,152,.10)!important}
.top-user{display:flex;align-items:center;gap:7px;margin-left:auto}
.network-pill{height:34px;min-height:34px!important;padding:5px 9px!important;gap:6px;border:1px solid var(--ste-ds-border)!important;border-radius:9px!important;background:#fff!important;color:var(--ste-ds-text-muted)!important}
.network-pill.online .ste-icon{color:var(--ste-ds-success)}
.network-pill.offline .ste-icon{color:var(--ste-ds-danger)}
.icon-button{width:36px;height:36px;display:inline-grid;place-items:center;border:1px solid var(--ste-ds-border);border-radius:9px;background:#fff;color:var(--ste-ds-primary);cursor:pointer}
.icon-button:hover{background:var(--ste-ds-surface-subtle);border-color:var(--ste-ds-border-strong)}
.user-menu{position:relative}
.user-chip{min-height:40px;border:1px solid transparent;background:transparent;color:var(--ste-ds-text);cursor:pointer;display:flex;align-items:center;gap:8px;padding:3px 7px 3px 3px;border-radius:10px}
.user-chip:hover,.user-menu.is-open .user-chip{background:var(--ste-ds-surface-subtle);border-color:var(--ste-ds-border)}
.avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--ste-ds-primary);color:#fff;font-weight:800}
.user-copy{display:grid;text-align:left;line-height:1.2}
.user-copy span{font-size:13px;font-weight:800}.user-copy small{font-size:11px;color:var(--ste-ds-text-muted)}
.user-chevron{color:#7a8995;transition:transform var(--ste-ds-motion-fast)}
.user-menu.is-open .user-chevron{transform:rotate(180deg)}
.user-dropdown{position:absolute;right:0;top:calc(100% + 8px);width:220px;padding:7px;background:#fff;border:1px solid var(--ste-ds-border);border-radius:12px;box-shadow:var(--ste-ds-shadow-md);z-index:80}
.user-dropdown[hidden]{display:none}
.user-dropdown-head{display:grid;gap:2px;padding:9px 10px 10px;border-bottom:1px solid var(--ste-ds-border);margin-bottom:5px}
.user-dropdown-head strong{font-size:13px}.user-dropdown-head small{font-size:11px;color:var(--ste-ds-text-muted)}
.user-dropdown a{display:flex;align-items:center;gap:9px;min-height:38px;padding:8px 9px;border-radius:8px;color:var(--ste-ds-text);font-weight:700;font-size:13px}
.user-dropdown a:hover,.user-dropdown a:focus{background:var(--ste-ds-surface-subtle)}

/* Main content / PageHeader ---------------------------------------------- */
.content{width:100%;max-width:var(--ste-ds-content-max);margin:0 auto;padding:24px 28px 40px}
.content>.toolbar:first-child,.page-header{
  margin:0 0 20px;padding:2px 0 4px;min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.content>.toolbar:first-child h1,.page-header h1{margin:0;font-size:1.65rem;line-height:1.18;letter-spacing:-.025em;color:var(--ste-ds-text)}
.page-header-copy{display:grid;gap:4px;min-width:0}
.page-header-copy p,.page-header .page-meta{margin:0;color:var(--ste-ds-text-muted);font-size:13px}
.page-header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ste-ds-text-muted)}
.breadcrumb a{color:var(--ste-ds-info);font-weight:700}
.hero{background:var(--ste-ds-surface)!important;border-color:var(--ste-ds-border)!important}
.footer{padding:12px 28px 20px;color:var(--ste-ds-text-muted);font-size:11px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.footer-ds{font-weight:700;color:#73828e}

/* Surfaces / controls ----------------------------------------------------- */
.card{border:1px solid var(--ste-ds-border)!important;border-radius:var(--ste-ds-radius-md)!important;box-shadow:var(--ste-ds-shadow-sm)!important;padding:18px!important;background:var(--ste-ds-surface)!important}
.card:not(.kpi-card):hover{box-shadow:var(--ste-ds-shadow-sm)!important}
.btn{min-height:38px;padding:7px 13px!important;border-radius:8px!important;background:var(--ste-ds-primary)!important;box-shadow:none!important;font-weight:750!important;transition:background var(--ste-ds-motion-fast),border-color var(--ste-ds-motion-fast),transform var(--ste-ds-motion-fast)}
.btn:hover{filter:none!important;background:#1e405e!important}.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff!important;color:var(--ste-ds-primary)!important;border:1px solid var(--ste-ds-border-strong)!important}.btn.ghost:hover{background:var(--ste-ds-surface-subtle)!important}
.btn.danger{background:var(--ste-ds-danger)!important}.btn.danger:hover{background:#8f2d2d!important}
.btn.small{min-height:32px;padding:5px 9px!important;font-size:12.5px!important}
.btn:disabled,.btn.disabled{background:#d9e0e5!important;color:#71808c!important}
.actions{gap:7px!important}
.field{gap:5px!important;margin-bottom:12px!important}.field label{font-size:12.5px!important;color:#475764!important;font-weight:750!important}
input,select,textarea{border:1px solid var(--ste-ds-border-strong)!important;border-radius:8px!important;background:#fff!important;color:var(--ste-ds-text)!important}
input,select{min-height:40px!important;padding:8px 10px!important}textarea{padding:9px 10px!important}
input:focus,select:focus,textarea:focus{border-color:var(--ste-ds-focus)!important;box-shadow:0 0 0 3px rgba(47,109,152,.11)!important}
input:disabled,select:disabled,textarea:disabled{background:#f0f3f5!important;color:#7f8b94!important}
.badge{min-height:23px;padding:3px 8px!important;align-items:center;border-radius:999px!important;font-size:11.5px!important;line-height:1.2}
.badge-success{background:var(--ste-ds-success-bg)!important;color:var(--ste-ds-success)!important}.badge-warning{background:var(--ste-ds-warning-bg)!important;color:var(--ste-ds-warning)!important}.badge-danger{background:var(--ste-ds-danger-bg)!important;color:var(--ste-ds-danger)!important}.badge-info{background:var(--ste-ds-info-bg)!important;color:var(--ste-ds-info)!important}.badge-neutral{background:#e9eef2!important;color:#52616d!important}
.alert{padding:10px 12px!important;border-radius:9px!important;margin-bottom:12px!important}.alert.success{background:var(--ste-ds-success-bg)!important;color:var(--ste-ds-success)!important}.alert.warning{background:var(--ste-ds-warning-bg)!important;color:var(--ste-ds-warning)!important}.alert.error{background:var(--ste-ds-danger-bg)!important;color:var(--ste-ds-danger)!important}

/* KPI --------------------------------------------------------------------- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.kpi-card,.stat{position:relative;min-height:112px;overflow:hidden}
.kpi-card{display:grid;grid-template-columns:1fr auto;grid-template-areas:"copy icon";gap:10px;align-items:start;padding:16px!important}
.kpi-copy{grid-area:copy;min-width:0}.kpi-icon{grid-area:icon;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--ste-ds-info-bg);color:var(--ste-ds-info)}
.kpi-card .label,.stat .label{font-size:11px!important;line-height:1.25;text-transform:uppercase;letter-spacing:.045em;font-weight:800;color:var(--ste-ds-text-muted)!important}
.kpi-card .num,.stat .num{font-size:28px!important;line-height:1.12;font-weight:850;margin-top:7px!important;letter-spacing:-.025em;color:var(--ste-ds-text)}
.kpi-support{display:block;margin-top:5px;color:var(--ste-ds-text-muted);font-size:11.5px}
.kpi-card.kpi-warning .kpi-icon{background:var(--ste-ds-warning-bg);color:var(--ste-ds-warning)}
.kpi-card.kpi-critical .kpi-icon{background:var(--ste-ds-danger-bg);color:var(--ste-ds-danger)}
.kpi-card.kpi-positive .kpi-icon{background:var(--ste-ds-success-bg);color:var(--ste-ds-success)}
.kpi-link{transition:border-color var(--ste-ds-motion-fast),box-shadow var(--ste-ds-motion-fast),transform var(--ste-ds-motion-fast)}
.kpi-link:hover{transform:translateY(-1px)!important;border-color:#c7d4de!important;box-shadow:0 7px 20px rgba(16,42,61,.09)!important}
.lifecycle-kpis .card{min-height:106px}

/* DataTable / filters ----------------------------------------------------- */
.table-wrap{overflow:auto;overscroll-behavior-inline:contain;border:1px solid var(--ste-ds-border)!important;border-radius:10px!important;background:#fff;scrollbar-width:thin;scrollbar-color:#bcc8d1 transparent}
.table-wrap[data-responsive-strategy="scroll"]{position:relative}
table{font-size:13.5px}th,td{padding:10px 11px!important}th{position:relative;background:#f7f9fa!important;color:#53626e!important;font-size:11px!important;font-weight:800!important;letter-spacing:.04em!important}
tr:hover td{background:#fbfcfd!important}
.table-wrap td[colspan]{color:var(--ste-ds-text-muted)}
.filters,.filter-bar{gap:8px!important}
.toolbar{gap:12px!important}

/* Empty / Loading / Error ------------------------------------------------ */
.empty-state{padding:30px 20px!important;border:1px dashed var(--ste-ds-border-strong);border-radius:10px;background:var(--ste-ds-surface-subtle);color:var(--ste-ds-text-muted)}
.loading-state{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;color:var(--ste-ds-text-muted)}
.error-state{padding:16px;border:1px solid #f0c8c8;border-radius:10px;background:var(--ste-ds-danger-bg);color:var(--ste-ds-danger)}

/* Help Drawer ------------------------------------------------------------- */
.help-drawer-panel{width:min(460px,96vw)!important;border-left:1px solid var(--ste-ds-border);box-shadow:-16px 0 38px rgba(13,31,47,.16)!important}
.help-drawer-head{min-height:72px;padding:14px 16px!important;align-items:center!important}.help-drawer-head h2{font-size:1.3rem}.help-drawer-body{padding:16px!important}.help-drawer-footer{padding:12px 16px!important}.help-search-result{background:var(--ste-ds-surface-subtle)!important;border-radius:9px!important}

/* Responsive -------------------------------------------------------------- */
@media(max-width:1200px){
  .topbar{padding-left:18px;padding-right:18px;gap:12px}.topbar-leading{min-width:160px}.content{padding-left:20px;padding-right:20px}.user-copy{display:none}.kpi-grid,.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .sidebar{width:min(90vw,320px)!important;transform:translateX(-105%)}
  .sidebar.open{transform:translateX(0)}
  .main,body.sidebar-compact .main{margin-left:0!important;width:100%!important}
  body.sidebar-compact .sidebar{width:min(90vw,320px)!important}
  body.sidebar-compact .brand-copy{display:block}
  body.sidebar-compact .brand-logo{width:46px;height:46px}
  body.sidebar-compact .sidebar nav{padding-left:10px;padding-right:10px}
  body.sidebar-compact .sidebar-item,body.sidebar-compact .menu-group-links a{width:auto;justify-content:flex-start;padding:8px 10px!important;gap:11px}
  body.sidebar-compact .sidebar .nav-label,body.sidebar-compact .menu-group summary .nav-label,body.sidebar-compact .group-chevron{display:inline-block}
  body.sidebar-compact .menu-group summary{width:auto;justify-content:space-between;padding:7px 9px!important}
  body.sidebar-compact .menu-group-links{padding-left:9px!important}
  .sidebar-collapse{display:none}.sidebar-mobile-close{display:inline-grid}.topbar-menu{display:inline-grid}
  .topbar{height:auto;min-height:72px;flex-wrap:wrap;padding:10px 14px}.topbar-leading{min-width:0}.topbar-context{display:none}.global-search{order:3;flex-basis:100%;max-width:none}.top-user{margin-left:auto}
  .content{padding:18px 16px 34px}.content>.toolbar:first-child,.page-header{align-items:flex-start}.catalog-admin-grid{grid-template-columns:1fr!important}
}
@media(max-width:640px){
  .content{padding:14px 12px 28px}.card{padding:14px!important}.kpi-grid,.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr!important}.kpi-card{min-height:100px}.global-search input{font-size:14px}.network-pill span{display:none}.network-pill{width:36px;justify-content:center;padding:0!important}.user-chevron{display:none}.footer{padding:12px;display:grid}.content>.toolbar:first-child h1,.page-header h1{font-size:1.45rem}.page-header-actions,.content>.toolbar:first-child>.actions{width:100%}.page-header-actions .btn,.content>.toolbar:first-child>.actions .btn{flex:1 1 auto}
  .table-wrap{border-radius:8px!important}.table-wrap table{min-width:680px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
.sidebar-collapse .expand-icon{display:none}
body.sidebar-compact .sidebar-head{padding-left:6px;padding-right:6px;justify-content:space-between}
body.sidebar-compact .brand{gap:0}
body.sidebar-compact .brand-copy{display:none}
body.sidebar-compact .brand-logo{width:34px;height:34px}
body.sidebar-compact .sidebar-collapse{display:inline-grid;width:26px;height:30px;border-radius:7px}
body.sidebar-compact .sidebar-collapse .collapse-icon{display:none}
body.sidebar-compact .sidebar-collapse .expand-icon{display:inline-grid}
/* Compact shell final sizing: 72 px without horizontal overflow. */
@media(min-width:901px){
  body.sidebar-compact .sidebar-head{padding:6px 4px;gap:2px}
  body.sidebar-compact .brand-logo{width:28px;height:28px}
  body.sidebar-compact .sidebar-collapse{width:24px;height:30px;padding:0}
  body.sidebar-compact .sidebar-collapse .ste-icon{width:16px;height:16px}
}
.menu-group:has(a.active)>summary{color:#aebfca!important;background:rgba(255,255,255,.035)}