/* SA progress */
.sa-progress     { height:5px; background:var(--surface3); border-radius:3px; overflow:hidden; margin-top:var(--space-2); }
.sa-progress-bar { height:100%; background:var(--accent); border-radius:3px; transition:width .5s; }

/* SA feature toggles */
.sa-feat-row { transition:border-color .15s; }
.sa-feat-row.active { border-color:var(--accent); background:var(--accent-l); }
.sa-feat-cat { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--text3); padding:var(--space-2) 0 var(--space-1); border-bottom:1px solid var(--border); margin-bottom:var(--space-2); }
.feat-toggle2 { width:36px; height:20px; background:var(--surface3); border-radius:10px; position:relative; cursor:pointer; transition:background var(--t); flex-shrink:0; border:none; }
.feat-toggle2.on { background:var(--accent); }
.feat-toggle2::after { content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; background:#fff; border-radius:50%; transition:left var(--t); }
.feat-toggle2.on::after { left:19px; }
.feat-knob { width:20px; height:20px; border-radius:50%; background:var(--surface2); border:2px solid var(--border2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.feat-pill { display:inline-flex; align-items:center; height:18px; padding:0 7px; border-radius:9px; font-size:9px; font-weight:700; background:var(--accent-l); color:var(--accent); }

/* ── 14. LOGIN PAGE ───────────────────────────────────────────── */

body:has(.left) {
  display:flex;
  min-height:100vh;
  overflow:hidden;
  background:#0d0f14;
}

.left {
  flex:1; min-width:0;
  background:#0d0f14;
  position:relative;
  display:flex; flex-direction:column;
  padding:40px 48px;
  overflow:hidden;
}
.left-orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; opacity:.35; }
.left-orb1 { width:400px; height:400px; background:radial-gradient(circle,#C8F04C 0%,transparent 70%); top:-120px; left:-100px; }
.left-orb2 { width:300px; height:300px; background:radial-gradient(circle,#3b82f6 0%,transparent 70%); bottom:-80px; right:40px; }
.left-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; }
.brand { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:900; color:#f0f0ee; position:relative; z-index:1; margin-bottom:48px; }
.brand-mark { width:28px; height:28px; background:#C8F04C; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.brand-tld { color:#7a8196; font-weight:500; }
.left-main { flex:1; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1; }
.left-tag { display:inline-flex; align-items:center; gap:8px; background:rgba(200,240,76,.1); border:1px solid rgba(200,240,76,.25); border-radius:20px; padding:5px 12px; font-size:11px; font-weight:700; color:#C8F04C; margin-bottom:24px; width:fit-content; }
.left-main h1 { font-size:clamp(32px,4vw,52px); font-weight:900; color:#f0f0ee; line-height:1.1; letter-spacing:-1.5px; margin-bottom:20px; }
.left-main h1 em { font-style:normal; color:#C8F04C; }
.left-main > p { font-size:15px; color:#b8bcc8; line-height:1.6; max-width:400px; margin-bottom:40px; }
.feature-list { display:flex; flex-direction:column; gap:16px; }
.feat-row { display:flex; align-items:flex-start; gap:14px; }
.feat-icon { width:36px; height:36px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.feat-copy strong { display:block; font-size:13px; font-weight:700; color:#f0f0ee; margin-bottom:2px; }
.feat-copy span { font-size:12px; color:#7a8196; }
.left-foot { position:relative; z-index:1; margin-top:40px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.sp-bar { display:flex; align-items:center; gap:14px; padding:14px 18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; width:fit-content; }
.sp-avs { display:flex; }
.sp-av { width:32px; height:32px; border-radius:50%; border:2px solid #0d0f14; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; margin-left:-8px; flex-shrink:0; }
.sp-avs .sp-av:first-child { margin-left:0; }
.sp-stars { font-size:12px; color:#C8F04C; letter-spacing:1px; line-height:1; margin-bottom:2px; }
.sp-text { font-size:11px; color:#7a8196; line-height:1.3; }
.sp-text strong { color:#f0f0ee; }
.right { width:480px; min-width:480px; background:#111420; border-left:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; padding:40px 32px; overflow-y:auto; }
.auth-card { width:100%; max-width:380px; }
.auth-tabs { display:flex; gap:4px; background:rgba(255,255,255,.04); border-radius:10px; padding:4px; margin-bottom:28px; }
.auth-tab { flex:1; text-align:center; padding:8px 12px; border-radius:7px; font-size:13px; font-weight:600; color:#7a8196; cursor:pointer; transition:all var(--t); border:none; background:none; font-family:var(--font); }
.auth-tab.active { background:#1e2230; color:#f0f0ee; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.auth-view { display:none; }
.auth-view.active { display:block; }
.auth-card h2 { font-size:22px; font-weight:900; color:#f0f0ee; margin-bottom:6px; }
.social-btn { width:100%; height:42px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:13px; font-weight:600; color:#f0f0ee; cursor:pointer; transition:background var(--t); margin-bottom:12px; font-family:var(--font); }
.social-btn:hover { background:rgba(255,255,255,.09); }
.divider { display:flex; align-items:center; gap:12px; margin:20px 0; font-size:11px; color:#7a8196; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.08); }
.field-wrap { position:relative; margin-bottom:14px; }
.field-wrap input { padding-right:40px; }
.field-icon { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#7a8196; cursor:pointer; font-size:16px; background:none; border:none; padding:0; }
.forgot-link { font-size:11px; color:#7a8196; text-align:right; display:block; margin-top:-8px; margin-bottom:20px; cursor:pointer; text-decoration:none; }
.forgot-link:hover { color:#C8F04C; }
.auth-error, .auth-success { border-radius:8px; padding:10px 14px; font-size:12px; margin-bottom:14px; display:none; }
.auth-error   { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:#ef4444; }
.auth-success { background:rgba(34,197,94,.12);  border:1px solid rgba(34,197,94,.3);  color:#22c55e; }
.auth-error.show, .auth-success.show { display:block; }
.auth-foot { margin-top:20px; text-align:center; font-size:12px; color:#7a8196; }
.auth-foot a { color:#C8F04C; text-decoration:none; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.si-dots { display:flex; gap:6px; justify-content:center; margin-bottom:24px; }
.si-dot { width:8px; height:8px; border-radius:50%; background:#252840; transition:all .2s; }
.si-dot.active { background:#C8F04C; width:20px; border-radius:4px; }
.si-dot.done   { background:#22c55e; }
.otp-input { width:100%; text-align:center; letter-spacing:8px; font-size:24px; font-weight:700; font-family:monospace; }
.reset-icon { width:56px; height:56px; border-radius:14px; background:rgba(200,240,76,.1); border:1px solid rgba(200,240,76,.25); display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 20px; }

/* ── 15. SUPERADMIN — SA specific ─────────────────────────────── */

/* SA table (different from main table — no outer border) */
.sa-table { font-size:var(--text-xs); }
.sa-table th { background:var(--surface2); padding:var(--space-2) var(--space-4); }
.sa-table td { padding:var(--space-3) var(--space-4); border-top:1px solid var(--border); color:var(--text); }
.sa-table tr:hover td { background:var(--surface2); }
.sa-table-wrap { border-radius:var(--radius-md); border:1px solid var(--border); overflow:hidden; }

/* SA two-column layout inside content */
.sa-two-col   { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
.sa-three-col { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); }
.sa-grid      { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-3); }

/* ── 16. UTILITIES ────────────────────────────────────────────── */

.flex          { display:flex; }
.flex-col      { display:flex; flex-direction:column; }
.flex-center   { display:flex; align-items:center; }
.flex-between  { display:flex; align-items:center; justify-content:space-between; }
.inline-flex   { display:inline-flex; }
.hidden        { display:none; }
.items-center  { align-items:center; }
.justify-between { justify-content:space-between; }
.flex-1        { flex:1; }
.flex-shrink-0 { flex-shrink:0; }
.w-full        { width:100%; max-width:100%; }
.min-w-0       { min-width:0; }
.gap-1 { gap:var(--space-1); } .gap-2 { gap:var(--space-2); }
.gap-3 { gap:var(--space-3); } .gap-4 { gap:var(--space-4); }
.gap-5 { gap:var(--space-5); }
.mt-1 { margin-top:var(--space-1); } .mt-2 { margin-top:var(--space-2); }
.mt-3 { margin-top:var(--space-3); } .mt-4 { margin-top:var(--space-4); }
.mb-2 { margin-bottom:var(--space-2); } .mb-3 { margin-bottom:var(--space-3); }
.mb-4 { margin-bottom:var(--space-4); }
.p-3  { padding:var(--space-3); } .p-4 { padding:var(--space-4); }
.rounded-sm { border-radius:var(--radius-sm); }
.rounded-md { border-radius:var(--radius-md); }
.text-center  { text-align:center; }
.text-accent  { color:var(--accent); }
.text-green   { color:var(--green); }
.text-red     { color:var(--red); }
.text-amber   { color:var(--amber); }
.text-muted   { color:var(--text3); }
.text-xs      { font-size:var(--text-xs); }
.text-sm      { font-size:var(--text-sm); }
.font-bold    { font-weight:700; }
.font-black   { font-weight:900; }
.truncate     { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uppercase    { text-transform:uppercase; letter-spacing:.05em; }
.border-b     { border-bottom:1px solid var(--border); }
.shadow-sm    { box-shadow:var(--shadow-sm); }
.shadow-md    { box-shadow:var(--shadow-md); }
.icon-sm { width:var(--text-sm); height:var(--text-sm); font-size:var(--text-sm); flex-shrink:0; }
.icon-md { width:var(--text-md); height:var(--text-md); font-size:var(--text-md); flex-shrink:0; }
.icon-lg { width:var(--text-lg); height:var(--text-lg); font-size:var(--text-lg); flex-shrink:0; }

/* Unified scrollbars */
.sidebar, .sa-sidebar,
.main, .sa-content, #sa-content-area,
.sidebar-nav, .sa-nav-body,
.detail-body, .modal-box, .table-wrap, .sa-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.sidebar::-webkit-scrollbar, .sa-sidebar::-webkit-scrollbar,
.main::-webkit-scrollbar, .sa-content::-webkit-scrollbar,
#sa-content-area::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar, .sa-nav-body::-webkit-scrollbar,
.detail-body::-webkit-scrollbar,
.modal-box::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar, .sa-table-wrap::-webkit-scrollbar { width:4px; height:4px; }
.sidebar::-webkit-scrollbar-thumb, .sa-sidebar::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb, .sa-content::-webkit-scrollbar-thumb,
#sa-content-area::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb, .sa-nav-body::-webkit-scrollbar-thumb,
.detail-body::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb, .sa-table-wrap::-webkit-scrollbar-thumb { background:var(--border2); border-radius:4px; }

/* Motion tokens */
:root {
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms; transition-duration:.01ms; }
}

/* Light theme: reserved for future use */

/* ── 17. RESPONSIVE ───────────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --sidebar-w: 64px; }
  .sidebar, .sa-sidebar { width:64px; min-width:64px; }
  .nav-item span:not(.nav-item-icon):not(.nav-badge),
  .sa-nav-btn span:not(.icon),
  .nav-label, .sa-nav-label,
  .sidebar-empresa-name, .sidebar-empresa-plan,
  .sa-logo-sub, .sa-admin-name, .sa-admin-role { display:none; }
  .nav-item, .sa-nav-btn { padding:var(--space-2); justify-content:center; height:38px; }
  .sa-logo-mark { padding:var(--space-3) var(--space-2); justify-content:center; }
  .kpi-grid, .sa-kpi-grid, .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-2-3, .grid-3-2, .sa-two-col, .sa-three-col { grid-template-columns:1fr; }
  .main, .sa-content, #sa-content-area { padding:var(--space-4); }
  .topbar-search { max-width:200px; }
}
@media (max-width: 640px) {
  :root { --sidebar-w:0px; --text-xl:24px; --text-lg:18px; --text-md:15px; }
  .sidebar, .sa-sidebar { transform:translateX(-100%); width:260px; min-width:260px; transition:transform .25s ease; }
  .sidebar.open, .sa-sidebar.open { transform:translateX(0); }
  .kpi-grid, .sa-kpi-grid, .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-2 { grid-template-columns:1fr; }
  .form-row, .fg-row { grid-template-columns:1fr; }
  .main, .sa-content, #sa-content-area { padding:var(--space-3); }
  .page-header { flex-direction:column; }
  .detail-panel { width:100%; max-width:100%; right:-100%; }
  .modal-box { max-width:100%; border-radius:var(--radius-md); }
  /* Login */
  body:has(.left) { flex-direction:column; }
  .left { padding:32px 24px 24px; }
  .left-orb { display:none; }
  .feature-list { display:none; }
  .right { width:100%; min-width:0; border-left:none; border-top:1px solid rgba(255,255,255,.07); padding:32px 24px; }
}

/* ══ SA SUPERADMIN COMPONENT CLASSES ════════════════════════════
   Extracted from 335 inline styles in superadmin.html
   ═══════════════════════════════════════════════════════════════ */

/* Feature toggle rows (feat-wrap — 23x repeated) */
.sa-feat-wrap {
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1.5px solid var(--border);
  transition: all var(--t);
  background: var(--surface);
  margin-bottom: var(--space-1);
}
.sa-feat-wrap:hover  { background: var(--surface2); border-color: var(--border2); }
.sa-feat-wrap.active { background: var(--accent-l); border-color: var(--accent); }
.sa-feat-emoji { font-size: 18px; flex-shrink: 0; }
.sa-feat-info  { flex: 1; min-width: 0; }
.sa-feat-name  { font-size: var(--text-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.sa-feat-desc  { font-size: 10px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Status dot (16px circle — 23x repeated) */
.sa-status-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--bg);
  display: inline-block;
}
.sa-status-dot.green  { background: var(--green); }
.sa-status-dot.red    { background: var(--red); }
.sa-status-dot.amber  { background: var(--amber); }
.sa-status-dot.gray   { background: var(--text3); }

/* SA info grid — 2-col label/value grid */
.sa-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-2); }
.sa-info-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); }
.sa-info-value { font-size: var(--text-xs); color: var(--text); font-weight: 500; }

/* SA page header row */
.sa-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.sa-page-head-title { font-size: var(--text-md); font-weight: 700; color: var(--text); margin: 0; }
.sa-page-head-sub   { font-size: var(--text-xs); color: var(--text3); margin-top: 2px; }
.sa-page-head-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* SA section header */
.sa-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.sa-section-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); }

/* SA meta row (text+subtext cell) */
.sa-meta       { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-meta-main  { font-size: var(--text-xs); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-meta-sub   { font-size: 10px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* SA toggle row layout */
.sa-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.sa-toggle-row:last-child { border-bottom: none; }
.sa-toggle-info { flex: 1; min-width: 0; }
.sa-toggle-label { font-size: var(--text-xs); font-weight: 600; color: var(--text); }
.sa-toggle-desc  { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* SA form row */
.sa-form-row { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.sa-form-group { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 120px; }
.sa-form-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); }

/* SA content blocks */
.sa-block          { margin-bottom: var(--space-4); }
.sa-block-head     { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.sa-block-title    { font-size: var(--text-xs); font-weight: 700; color: var(--text); display: flex; align-items: center; gap: var(--space-2); }
.sa-block-actions  { display: flex; gap: var(--space-2); }

/* SA empty/loading states */
.sa-loading { padding: var(--space-5); text-align: center; color: var(--text3); font-size: var(--text-xs); }
.sa-no-data { padding: var(--space-5); text-align: center; color: var(--text3); font-size: var(--text-xs); font-style: italic; }

/* SA list item */
.sa-list-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); transition: background var(--t); cursor: pointer; }
.sa-list-item:hover { background: var(--surface2); }
.sa-list-item:last-child { border-bottom: none; }

/* SA empresa card (empresa list items in sidebar) */
.sa-emp-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); cursor: pointer; border-radius: var(--radius-sm); margin: 1px var(--space-2); transition: background var(--t); }
.sa-emp-item:hover { background: var(--surface2); }
.sa-emp-item.active { background: var(--accent-l); }
.sa-emp-avatar { width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--surface3); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.sa-emp-name   { font-size: var(--text-xs); font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-emp-plan   { font-size: 9px; font-weight: 700; color: var(--accent); flex-shrink: 0; }

/* SA modal widths */
.modal-sm  .modal-box { max-width: 380px; }
.modal-md  .modal-box { max-width: 540px; }
.modal-lg  .modal-box { max-width: 740px; max-height: 92vh; }
.modal-xl  .modal-box { max-width: 95vw; width: 95vw; }

/* Empresa detail modal — large, minimal scroll */
.modal-empresa .modal-box {
  max-width: 820px;
  width: 92%;
  max-height: 94vh;
}
.modal-empresa .sa-det-panel {
  min-height: 280px;
}


/* SA data sections inside modal */
.sa-det-section { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.sa-det-section:last-child { border-bottom: none; }
.sa-det-row { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.sa-det-col { flex: 1; min-width: 200px; }

/* SA color token display */
.sa-color-preview { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 2px solid var(--border2); flex-shrink: 0; }
.sa-color-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }

/* SA textarea */
.sa-textarea { min-height: 80px; resize: vertical; }

/* SA table actions cell */
.sa-td-actions { display: flex; gap: var(--space-1); align-items: center; white-space: nowrap; }

/* SA score/metric display */
.sa-score      { font-size: var(--text-lg); font-weight: 900; color: var(--text); letter-spacing: -.5px; }
.sa-score-sub  { font-size: 10px; color: var(--text3); margin-top: 2px; }
.sa-score.green { color: var(--green); }
.sa-score.red   { color: var(--red);   }
.sa-score.amber { color: var(--amber); }

/* Flex wrap */
.flex-wrap  { flex-wrap: wrap; }
.flex-col   { flex-direction: column; }

/* Gap utilities (supplement existing) */
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }

/* Margin bottom utilities */
.mb-0 { margin-bottom: 0; }      .mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); }

/* Margin top utilities */
.mt-0 { margin-top: 0; }         .mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

/* Padding utilities */
.p-0  { padding: 0; }            .p-2 { padding: var(--space-2); }
.p-3  { padding: var(--space-3); } .p-4 { padding: var(--space-4); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-3 { padding-top: var(--space-3);  padding-bottom: var(--space-3); }

/* Width utilities */
.w-full { width: 100%; }         .w-auto { width: auto; }
.max-w-sm { max-width: 280px; }  .max-w-md { max-width: 400px; }
.max-w-lg { max-width: 600px; }

/* Text utilities (supplement) */
.fw-700   { font-weight: 700; }  .fw-800  { font-weight: 800; }
.fz-10    { font-size: 10px; }   .fz-11   { font-size: 11px; }
.fz-12    { font-size: var(--text-xs); } .fz-13 { font-size: var(--text-sm); }
.c-text   { color: var(--text);  } .c-text2 { color: var(--text2); }
.c-text3  { color: var(--text3); } .c-accent { color: var(--accent); }
.c-green  { color: var(--green); } .c-red   { color: var(--red); }
.c-amber  { color: var(--amber); }

/* ── Offline banner (components-v3.js) ───────────────────────────
   Uses document.body.prepend() — MUST be position:fixed to avoid
   pushing .sa-layout down. Hidden by default, shown via .visible  */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  background: var(--amber);
  color: #000;
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  padding: var(--space-2) var(--space-4);
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.offline-banner.visible { display: flex; }

/* sa-it — sidebar empresa nav item */
.sa-it {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--text2);
  transition: background var(--t);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sa-it:hover { background: var(--surface2); color: var(--text); }
.sa-it.on    { background: var(--accent-l); color: var(--accent); font-weight: 700; }

/* Nueva empresa: enlarge modal + opaque backdrop so sidebar is hidden */
.modal.modal-nueva-full { background: var(--bg); backdrop-filter: none; padding: 2vh 2vw; }
.modal.modal-nueva-full .modal-box,
.modal-empresa.modal-nueva-full .modal-box { width: 96vw; max-width: 1000px; max-height: 96vh; }

/* ── Button modifier aliases: space-separated forms (btn primary == btn-primary) ──
   Fixes buttons that were rendering grey/unstyled because they used
   `btn primary` / `btn sm danger` / `sa-btn pri` instead of the hyphenated classes. */
.btn.primary, .sa-btn.pri { background:var(--accent); color:#000; border:none; }
.btn.primary:hover, .sa-btn.pri:hover { opacity:.88; }
.btn.danger, .sa-btn.r { background:var(--red-l); color:var(--red); border:1px solid rgba(239,68,68,.3); }
.btn.danger:hover, .sa-btn.r:hover { background:rgba(239,68,68,.22); }
.btn.secondary, .sa-btn.b { background:var(--surface2); color:var(--text2); border:1px solid var(--border); }
.btn.secondary:hover, .sa-btn.b:hover { background:var(--surface3); }
.btn.sm { height:var(--btn-h-sm); padding:0 var(--space-3); font-size:var(--text-xs); }

/* ── Estados unificados de botones (focus + disabled) para .btn y .sa-btn ── */
.btn:focus-visible, button.sa-btn-primary:focus-visible,
.sa-btn:focus-visible, .sa-btn-xs:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn:disabled, .btn[disabled],
button.sa-btn-primary:disabled,
.sa-btn:disabled, .sa-btn[disabled],
.sa-btn-xs:disabled, .sa-btn-xs[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Skeletons de carga (shimmer) — placeholders mientras carga data ── */
@keyframes sa-shimmer { 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: sa-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  display: block;
}
.skeleton-text { height: 12px; margin: 6px 0; }
.skeleton-text.sk-lg { height: 18px; }
.skeleton-text.sk-sm { height: 9px; }
.skeleton-row { height: 44px; margin-bottom: 8px; border-radius: var(--radius-md); }
.skeleton-card { height: 96px; border-radius: var(--radius-md); }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }