/* ============================================================================
   Superadmin — sistema visual ÚNICO, calcado de la FOTO MAESTRA (12 pantallas).
   Solo capa de presentación. Los datos/endpoints/lógica no viven acá.
   ============================================================================ */

/* ---- Tokens ---- */
:root {
    --sa-bg:#eef1f6; --sa-navy:#0f1b2d; --sa-navy-2:#16233a; --sa-blue:#1d64f0; --sa-blue-2:#1b57d6;
    --sa-ink:#0f1b2d; --sa-ink-2:#334155; --sa-muted:#64748b; --sa-faint:#94a3b8;
    --sa-line:#e6e9f1; --sa-card:#ffffff; --sa-radius:12px;
    --sa-shadow:0 1px 2px rgba(15,27,45,.05), 0 1px 3px rgba(15,27,45,.04);
    --sa-ok-bg:#dcfce7; --sa-ok-fg:#166534; --sa-warn-bg:#fef3c7; --sa-warn-fg:#92400e;
    --sa-danger-bg:#fee2e2; --sa-danger-fg:#991b1b; --sa-info-bg:#e0edff; --sa-info-fg:#1d4ed8;
}

/* ---- Página / cabecera ---- */
.sa-page { max-width:1280px; margin:0 auto; }
.sa-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.sa-page-head h1 { margin:0; font-size:1.5rem; font-weight:700; color:var(--sa-ink); letter-spacing:-.01em; }
.sa-page-head p { margin:.25rem 0 0; color:var(--sa-muted); font-size:.86rem; }
.sa-eyebrow { text-transform:uppercase; letter-spacing:.09em; font-size:.68rem; font-weight:600; color:var(--sa-faint); }

/* ---- KPI cards (fila de tarjetas de encabezado) ---- */
.sa-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:20px; }
.sa-kpi { background:var(--sa-card); border:1px solid var(--sa-line); border-radius:var(--sa-radius); box-shadow:var(--sa-shadow); padding:16px 18px; }
.sa-kpi-k { display:flex; align-items:center; gap:7px; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--sa-muted); font-weight:600; }
.sa-kpi-ico { color:var(--sa-blue); font-size:.9rem; }
.sa-kpi-v { font-size:1.9rem; font-weight:700; color:var(--sa-ink); margin:.2rem 0 .1rem; line-height:1.1; }
.sa-kpi-d { font-size:.78rem; color:var(--sa-faint); }
.sa-kpi-d.up { color:#15803d; }
.sa-kpi-d.down { color:#b91c1c; }

/* Compat: sa-cards/sa-metric (usadas por páginas ya escritas) alineadas al mismo lenguaje */
.sa-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:20px; }
.sa-metric { background:var(--sa-card); border:1px solid var(--sa-line); border-radius:var(--sa-radius); box-shadow:var(--sa-shadow); padding:16px 18px; }
.sa-metric .k { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--sa-muted); font-weight:600; }
.sa-metric .v { font-size:1.9rem; font-weight:700; color:var(--sa-ink); margin:.2rem 0 .1rem; line-height:1.1; }
.sa-metric .h { font-size:.78rem; color:var(--sa-faint); }

/* ---- Fila de dos paneles (chart + feed, etc.) ---- */
.sa-row2 { display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:20px; align-items:stretch; }
.sa-row2-eq { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; align-items:stretch; }
@media (max-width:1000px){ .sa-row2,.sa-row2-eq { grid-template-columns:1fr; } }

/* ---- Panel (card con cabecera + cuerpo) ---- */
.sa-panel { background:var(--sa-card); border:1px solid var(--sa-line); border-radius:var(--sa-radius); box-shadow:var(--sa-shadow); display:flex; flex-direction:column; }
.sa-panel-h { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--sa-line); }
.sa-panel-h h2 { margin:0; font-size:1rem; font-weight:700; color:var(--sa-ink); }
.sa-panel-h .sub { font-size:.76rem; color:var(--sa-faint); }
.sa-panel-b { padding:16px 18px; }

/* ---- Sección (título con acción) ---- */
.sa-sec { display:flex; align-items:center; justify-content:space-between; margin:6px 0 12px; }
.sa-sec h2 { margin:0; font-size:1.05rem; font-weight:700; color:var(--sa-ink); }
.sa-sec a { color:var(--sa-blue); text-decoration:none; font-size:.84rem; font-weight:500; }
.sa-sec a:hover { text-decoration:underline; }

/* ---- Feed de actividad ---- */
.sa-feed { display:flex; flex-direction:column; }
.sa-feed-it { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid #f1f5f9; }
.sa-feed-it:last-child { border-bottom:0; }
.sa-feed-ico { width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:.85rem; background:var(--sa-info-bg); color:var(--sa-info-fg); }
.sa-feed-tx { flex:1; min-width:0; }
.sa-feed-tx b { display:block; font-weight:600; color:var(--sa-ink-2); font-size:.86rem; }
.sa-feed-tx small { color:var(--sa-faint); font-size:.76rem; }
.sa-feed-time { color:var(--sa-faint); font-size:.74rem; white-space:nowrap; }

/* ---- Gráfico liviano (barras/línea inline SVG) ---- */
.sa-chart { width:100%; }
.sa-chart svg { width:100%; height:auto; display:block; }
.sa-bars { display:flex; align-items:flex-end; gap:8px; height:150px; padding-top:8px; }
.sa-bar { flex:1; background:linear-gradient(180deg,#3b82f6,#1d64f0); border-radius:5px 5px 0 0; min-height:3px; position:relative; }
.sa-bar span { position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:.66rem; color:var(--sa-faint); }

/* ---- Acciones rápidas ---- */
.sa-qa { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.sa-qa-btn { display:flex; align-items:center; gap:12px; background:var(--sa-card); border:1px solid var(--sa-line); border-radius:var(--sa-radius); box-shadow:var(--sa-shadow); padding:14px 16px; cursor:pointer; text-decoration:none; color:var(--sa-ink-2); font-weight:600; font-size:.9rem; transition:border-color .12s, box-shadow .12s; }
.sa-qa-btn:hover { border-color:#c7d2e6; box-shadow:0 2px 8px rgba(15,27,45,.08); }
.sa-qa-ico { width:38px; height:38px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:1rem; background:var(--sa-info-bg); color:var(--sa-info-fg); }

/* ---- Toolbar / búsqueda / filtros ---- */
.sa-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.sa-inp { flex:1; min-width:240px; padding:10px 13px; border:1px solid #d7dce6; border-radius:9px; font-size:.88rem; background:#fff; color:var(--sa-ink-2); }
.sa-inp:focus { outline:none; border-color:var(--sa-blue); box-shadow:0 0 0 3px rgba(29,100,240,.12); }
.sa-chip { background:#fff; border:1px solid #d7dce6; border-radius:9px; padding:8px 12px; font-size:.82rem; color:var(--sa-ink-2); }
.sa-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.sa-filter { background:#eef2f7; border:1px solid #e2e8f0; border-radius:999px; padding:6px 13px; font-size:.78rem; color:var(--sa-ink-2); cursor:pointer; user-select:none; font-weight:500; }
.sa-filter:hover { background:#e2e8f0; }
.sa-filter-on { background:var(--sa-blue); border-color:var(--sa-blue); color:#fff; }
/* Grupo de filtros segmentado (como los toggles de la foto) */
.sa-seg { display:inline-flex; border:1px solid #d7dce6; border-radius:9px; overflow:hidden; background:#fff; }
.sa-seg button { border:0; background:#fff; color:var(--sa-ink-2); padding:8px 15px; font-size:.83rem; cursor:pointer; }
.sa-seg button.on { background:var(--sa-blue); color:#fff; font-weight:600; }

/* ---- Botones ---- */
.sa-btn { border:1px solid #d7dce6; background:#fff; color:var(--sa-ink-2); border-radius:9px; padding:8px 14px; font-size:.85rem; cursor:pointer; font-weight:500; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.sa-btn:hover { background:#f6f8fc; }
.sa-btn-p { background:var(--sa-blue); border-color:var(--sa-blue); color:#fff; font-weight:600; }
.sa-btn-p:hover { background:var(--sa-blue-2); }
.sa-btn-ok { background:#16a34a; border-color:#16a34a; color:#fff; font-weight:600; }
.sa-btn-ok:hover { background:#15803d; }
.sa-btn-warn { background:#f59e0b; border-color:#f59e0b; color:#fff; font-weight:600; }
.sa-btn-danger { background:#ef4444; border-color:#ef4444; color:#fff; font-weight:600; }
.sa-btn-danger:hover { background:#dc2626; }
.sa-btn-ghost-danger { background:#fff; border-color:#fecaca; color:#b91c1c; }
.sa-btn[disabled] { opacity:.55; cursor:not-allowed; }
.sa-btn-sm { padding:5px 10px; font-size:.78rem; }
.sa-actions { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.sa-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid #d7dce6; background:#fff; color:var(--sa-ink-2); border-radius:8px; cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
.sa-iconbtn:hover { background:#f6f8fc; color:var(--sa-ink); }
.sa-iconbtn svg { width:16px; height:16px; display:block; }
.sa-iconbtn-warn { color:#b45309; border-color:#fde68a; }
.sa-iconbtn-warn:hover { background:#fffbeb; color:#92400e; }
.sa-iconbtn-ok { color:#15803d; border-color:#bbf7d0; }
.sa-iconbtn-ok:hover { background:#f0fdf4; color:#166534; }
.sa-iconbtn-danger { color:#b91c1c; border-color:#fecaca; }
.sa-iconbtn-danger:hover { background:#fef2f2; color:#991b1b; }

/* ---- Cards / paneles simples ---- */
.sa-card { background:var(--sa-card); border:1px solid var(--sa-line); border-radius:var(--sa-radius); box-shadow:var(--sa-shadow); overflow:hidden; }
.sa-card + .sa-card { margin-top:16px; }
.sa-card-h { padding:13px 18px; border-bottom:1px solid var(--sa-line); font-weight:700; color:var(--sa-ink); font-size:.95rem; }

/* ---- Tabs horizontales ---- */
.sa-tabs { display:flex; gap:2px; border-bottom:1px solid var(--sa-line); margin-bottom:16px; overflow-x:auto; }
.sa-tab { padding:10px 16px; font-size:.85rem; color:var(--sa-muted); border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; font-weight:500; }
.sa-tab:hover { color:var(--sa-ink-2); }
.sa-tab.active { color:var(--sa-blue); border-bottom-color:var(--sa-blue); font-weight:600; }

/* ---- Tablas ---- */
.sa-tablewrap { overflow-x:auto; }
.sa-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.sa-table th { text-align:left; padding:11px 16px; background:#f8fafc; color:var(--sa-muted); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--sa-line); white-space:nowrap; }
.sa-table td { padding:12px 16px; border-bottom:1px solid #f1f5f9; color:var(--sa-ink-2); vertical-align:middle; }
.sa-table tbody tr:hover { background:#f9fbff; }
.sa-table tbody tr:last-child td { border-bottom:0; }
.sa-empty { text-align:center; color:var(--sa-faint); padding:28px 14px; font-style:italic; }
.sa-td-strong { font-weight:600; color:var(--sa-ink); }
.sa-td-muted { color:var(--sa-muted); }

/* ---- Estados (badges) ---- */
.sa-st { display:inline-flex; align-items:center; border-radius:999px; padding:3px 11px; font-size:.74rem; font-weight:600; line-height:1.4; }
.sa-st-ok { background:var(--sa-ok-bg); color:var(--sa-ok-fg); }
.sa-st-warn { background:var(--sa-warn-bg); color:var(--sa-warn-fg); }
.sa-st-danger { background:var(--sa-danger-bg); color:var(--sa-danger-fg); }
.sa-st-info { background:var(--sa-info-bg); color:var(--sa-info-fg); }
.sa-st-mute { background:#eef1f6; color:#64748b; }
/* Compat */
.sa-badge-ok { background:var(--sa-ok-bg); color:var(--sa-ok-fg); border-radius:999px; padding:3px 11px; font-size:.74rem; font-weight:600; }
.sa-badge-warn { background:var(--sa-warn-bg); color:var(--sa-warn-fg); border-radius:999px; padding:3px 11px; font-size:.74rem; font-weight:600; }

.sa-note { background:var(--sa-info-bg); border:1px solid #cddffb; color:var(--sa-info-fg); border-radius:10px; padding:12px 14px; font-size:.83rem; }
.sa-hint { color:var(--sa-faint); font-size:.8rem; margin-top:12px; }
.sa-msg-ok { background:#ecfdf5; border:1px solid #a7f3d0; border-radius:10px; padding:10px 14px; color:#065f46; font-size:.85rem; }
.sa-msg-err { background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; padding:10px 14px; color:#9a3412; font-size:.85rem; }

/* ---- Planes (tarjetas tipo pricing) ---- */
.sa-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:20px; }
.sa-plan { position:relative; background:var(--sa-card); border:1px solid var(--sa-line); border-radius:14px; box-shadow:var(--sa-shadow); padding:20px 18px; }
.sa-plan.pop { border:2px solid var(--sa-blue); box-shadow:0 6px 20px rgba(29,100,240,.14); }
.sa-plan-tag { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--sa-blue); color:#fff; font-size:.68rem; font-weight:700; padding:3px 12px; border-radius:999px; white-space:nowrap; }
.sa-plan-name { font-size:.9rem; font-weight:600; color:var(--sa-muted); }
.sa-plan-price { font-size:1.7rem; font-weight:700; color:var(--sa-ink); margin:.15rem 0 .8rem; }
.sa-plan-price small { font-size:.8rem; font-weight:500; color:var(--sa-faint); }
.sa-plan-feats { list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:7px; }
.sa-plan-feats li { font-size:.82rem; color:var(--sa-ink-2); display:flex; gap:8px; }
.sa-plan-feats li::before { content:"✓"; color:#16a34a; font-weight:700; }

/* ---- Ficha de empresa: cabecera ---- */
.sa-ent-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.sa-ent-logo { width:52px; height:52px; border-radius:12px; background:var(--sa-info-bg); color:var(--sa-info-fg); display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:700; flex:0 0 auto; }
.sa-ent-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sa-ent-title h1 { margin:0; font-size:1.4rem; font-weight:700; color:var(--sa-ink); }
.sa-ent-sub { color:var(--sa-muted); font-size:.84rem; }

/* ---- Definición clave/valor ---- */
.sa-kv { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:.86rem; }
.sa-kv dt { color:var(--sa-muted); }
.sa-kv dd { margin:0; color:var(--sa-ink-2); font-weight:500; text-align:right; }

/* ============================================================================
   SuperadminLayout — shell
   ============================================================================ */
.sa-shell { display:flex; min-height:100vh; background:var(--sa-bg); font-family:'Segoe UI',system-ui,-apple-system,sans-serif; color:var(--sa-ink-2); }

.sa-side { width:240px; min-width:240px; background:var(--sa-navy); color:#c7d2e0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.sa-brand { display:flex; align-items:center; gap:11px; padding:20px 18px 16px; }
.sa-brand-mark { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; flex:0 0 auto; }
.sa-brand-txt { display:flex; flex-direction:column; line-height:1.15; font-weight:700; color:#fff; font-size:1.08rem; }
.sa-brand-txt small { font-weight:400; font-size:.66rem; color:#8b98ad; letter-spacing:.02em; }

.sa-nav { flex:1; overflow-y:auto; padding:8px 12px; display:flex; flex-direction:column; gap:2px; }
.sa-nav-item { display:flex; align-items:center; gap:12px; padding:9px 13px; border-radius:9px; color:#aebbcf; text-decoration:none; font-size:.88rem; cursor:pointer; transition:background .12s,color .12s; }
.sa-nav-item:hover { background:var(--sa-navy-2); color:#fff; }
.sa-nav-item.active { background:var(--sa-blue); color:#fff; font-weight:600; box-shadow:0 2px 8px rgba(29,100,240,.35); }
.sa-nav-ico { width:20px; text-align:center; font-size:.95rem; flex:0 0 auto; }
.sa-nav-lbl { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sa-side-foot { border-top:1px solid #1e2c42; padding:12px; }
.sa-user { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sa-user-ava { width:34px; height:34px; border-radius:50%; background:var(--sa-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.sa-user-meta { display:flex; flex-direction:column; line-height:1.2; }
.sa-user-meta b { color:#fff; font-size:.85rem; }
.sa-user-meta small { color:#8b98ad; font-size:.7rem; }
.sa-logout { width:100%; background:transparent; border:1px solid #2b3a54; color:#aebbcf; border-radius:8px; padding:8px; font-size:.8rem; cursor:pointer; }
.sa-logout:hover { background:var(--sa-navy-2); color:#fff; }

.sa-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.sa-top { display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; border-bottom:1px solid var(--sa-line); padding:13px 26px; position:sticky; top:0; z-index:5; }
.sa-top-l { display:flex; flex-direction:column; line-height:1.25; }
.sa-top-app { font-weight:700; color:var(--sa-ink); font-size:1rem; }
.sa-top-sub { color:var(--sa-muted); font-size:.76rem; }
.sa-top-r { display:flex; align-items:center; gap:12px; }
.sa-badge { display:inline-flex; align-items:center; gap:7px; background:var(--sa-info-bg); color:var(--sa-info-fg); border:1px solid #cddffb; padding:7px 14px; border-radius:999px; font-size:.78rem; font-weight:600; white-space:nowrap; }
.sa-top-ava { width:34px; height:34px; border-radius:50%; background:var(--sa-navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.sa-content { padding:24px 26px; flex:1; overflow-x:hidden; }

@media (max-width: 900px) {
    .sa-side { width:64px; min-width:64px; }
    .sa-brand-txt, .sa-nav-lbl, .sa-user-meta { display:none; }
    .sa-badge { display:none; }
    .sa-row2, .sa-row2-eq { grid-template-columns:1fr; }
}

/* ============================================================================
   Añadidos Pantalla 1 (Dashboard) — íconos SVG del nav, gráfico línea/área,
   chips de tendencia con flecha, feed con tono por tipo. FOTO MAESTRA panel 1.
   ============================================================================ */

/* Íconos de línea en el sidebar */
.sa-nav-ico svg { width:18px; height:18px; display:block; }

/* Chips de tendencia (KPI) con flecha */
.sa-kpi-d { display:inline-flex; align-items:center; gap:4px; font-weight:500; }
.sa-kpi-d.up::before  { content:"▲"; font-size:.62rem; line-height:1; }
.sa-kpi-d.down::before{ content:"▼"; font-size:.62rem; line-height:1; }

/* Gráfico de línea + área (inline SVG) */
.sa-chart svg { width:100%; height:auto; display:block; }
.sa-area { fill:rgba(29,100,240,.12); stroke:none; }
.sa-line { fill:none; stroke:var(--sa-blue); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
.sa-dot  { fill:#fff; stroke:var(--sa-blue); stroke-width:2; }
.sa-xlbl { fill:var(--sa-faint); font-size:11px; font-family:'Segoe UI',system-ui,sans-serif; }

/* Feed de actividad: tono del ícono por tipo de evento (paleta de la foto) */
.sa-feed-ico.green  { background:#dcfce7; color:#166534; }
.sa-feed-ico.blue   { background:#e0edff; color:#1d4ed8; }
.sa-feed-ico.purple { background:#ede9fe; color:#6d28d9; }
.sa-feed-ico.orange { background:#ffedd5; color:#c2410c; }
.sa-feed-ico.red    { background:#fee2e2; color:#991b1b; }

/* ============================================================================
   Añadidos Pantalla 2 (Empresas/Clientes) — selects de filtro, menú "···",
   modal de alta. FOTO MAESTRA panel 2.
   ============================================================================ */

/* Selects de filtro */
.sa-sel { background:#fff; border:1px solid #d7dce6; border-radius:9px; padding:8px 12px; font-size:.83rem; color:var(--sa-ink-2); cursor:pointer; }
.sa-sel:focus { outline:none; border-color:var(--sa-blue); box-shadow:0 0 0 3px rgba(29,100,240,.12); }

/* Menú de acciones "···" por fila */
.sa-menu { position:absolute; right:12px; top:calc(100% - 6px); z-index:30; background:#fff; border:1px solid var(--sa-line);
           border-radius:10px; box-shadow:0 10px 28px rgba(15,27,45,.16); min-width:200px; padding:6px; display:flex; flex-direction:column; }
.sa-menu-item { padding:8px 12px; font-size:.84rem; color:var(--sa-ink-2); border-radius:7px; cursor:pointer; white-space:nowrap; text-decoration:none; text-align:left; }
.sa-menu-item:hover { background:#f1f5f9; }
.sa-menu-item.danger { color:#b91c1c; }
.sa-menu-item.danger:hover { background:#fef2f2; }

/* Modal (alta de empresa, etc.) */
.sa-lbl { display:block; font-size:.76rem; font-weight:600; color:var(--sa-muted); margin:12px 0 5px; }
.sa-modal-backdrop { position:fixed; inset:0; background:rgba(15,27,45,.45); display:flex; align-items:flex-start; justify-content:center; padding-top:8vh; z-index:100; }
.sa-modal { background:#fff; border-radius:14px; width:min(480px,92vw); box-shadow:0 20px 60px rgba(15,27,45,.3); overflow:hidden; }
.sa-modal-h { padding:16px 20px; font-size:1.05rem; font-weight:700; color:var(--sa-ink); border-bottom:1px solid var(--sa-line); }
.sa-modal-b { padding:8px 20px 16px; max-height:65vh; overflow-y:auto; }
.sa-modal-f { padding:14px 20px; border-top:1px solid var(--sa-line); display:flex; justify-content:flex-end; gap:10px; }

/* ============================================================================
   Superadmin · Planes y Precios / Facturación y Renovaciones
   Piezas nuevas calcadas de las referencias visuales aprobadas: paneles con
   subtítulo, formularios en grilla, switch mensual/anual, filas de escalas,
   tabla editable de precios, tarjetas de promo/cupón y bloque de prorrateo.
   Solo presentación: los cálculos vienen del backend.
   ============================================================================ */

/* Panel con título + subtítulo (el encabezado de cada bloque de la referencia) */
.sa-block { background:var(--sa-card); border:1px solid var(--sa-line); border-radius:14px; box-shadow:var(--sa-shadow); padding:18px 20px; }
.sa-block + .sa-block { margin-top:16px; }
.sa-block-h { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.sa-block-h h3 { margin:0; font-size:1.05rem; font-weight:700; color:var(--sa-ink); letter-spacing:-.01em; }
.sa-block-h p { margin:.2rem 0 0; font-size:.8rem; color:var(--sa-muted); max-width:62ch; }
.sa-block-h .sa-actions { flex:0 0 auto; }

/* Sub-bloque con ícono a la izquierda (ej. "Escalas por ventas", "Fecha de cierre común") */
.sa-subhead { display:flex; align-items:center; gap:11px; margin:18px 0 12px; }
.sa-subhead-ico { flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:var(--sa-info-bg); color:var(--sa-blue);
    display:inline-flex; align-items:center; justify-content:center; font-size:1rem; }
.sa-subhead b { display:block; font-size:.95rem; color:var(--sa-ink); }
.sa-subhead small { display:block; font-size:.78rem; color:var(--sa-muted); }

/* Formularios en grilla (etiqueta arriba, campo abajo) */
.sa-form { display:grid; gap:14px 16px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.sa-form-1 { grid-template-columns:1fr; }
.sa-form-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sa-form-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sa-form-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.sa-fld { display:flex; flex-direction:column; gap:6px; min-width:0; }
.sa-fld > label { font-size:.78rem; font-weight:600; color:var(--sa-ink-2); }
.sa-fld > label small { display:block; font-weight:400; color:var(--sa-faint); font-size:.72rem; }
.sa-fld .sa-inp, .sa-fld select.sa-inp, .sa-fld textarea.sa-inp { flex:none; width:100%; min-width:0; }
.sa-fld textarea.sa-inp { min-height:74px; resize:vertical; font-family:inherit; }
.sa-span-2 { grid-column:span 2; }
.sa-span-all { grid-column:1 / -1; }
.sa-form-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* Campo con prefijo/sufijo (US$ … , … %) */
.sa-inp-group { display:flex; align-items:stretch; border:1px solid #d7dce6; border-radius:9px; background:#fff; overflow:hidden; }
.sa-inp-group:focus-within { border-color:var(--sa-blue); box-shadow:0 0 0 3px rgba(29,100,240,.12); }
.sa-inp-group .sa-affix { display:inline-flex; align-items:center; padding:0 11px; background:#f6f8fc; color:var(--sa-muted); font-size:.82rem; font-weight:600; border-right:1px solid #e6e9f1; }
.sa-inp-group .sa-affix-r { border-right:0; border-left:1px solid #e6e9f1; }
.sa-inp-group input { flex:1; min-width:0; border:0; outline:none; padding:10px 12px; font-size:.88rem; color:var(--sa-ink-2); background:transparent; }

/* Switch Mensual / Anual */
.sa-switch { display:inline-flex; align-items:center; gap:9px; font-size:.82rem; color:var(--sa-ink-2); }
.sa-switch input { position:absolute; opacity:0; width:0; height:0; }
.sa-switch .sa-track { width:40px; height:22px; border-radius:999px; background:#cbd5e1; position:relative; transition:background .15s; cursor:pointer; flex:0 0 auto; }
.sa-switch .sa-track::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s; }
.sa-switch input:checked + .sa-track { background:var(--sa-blue); }
.sa-switch input:checked + .sa-track::after { transform:translateX(18px); }
.sa-switch .on { font-weight:700; color:var(--sa-ink); }

/* Checkbox / radio con texto de ayuda (ajustes, prueba gratis) */
.sa-check { display:flex; align-items:flex-start; gap:11px; padding:9px 0; }
.sa-check input { width:18px; height:18px; margin:1px 0 0; accent-color:var(--sa-blue); flex:0 0 auto; cursor:pointer; }
.sa-check b { display:block; font-size:.87rem; color:var(--sa-ink); font-weight:600; }
.sa-check small { display:block; font-size:.79rem; color:var(--sa-muted); margin-top:2px; }
.sa-check.sel { }

/* Aviso informativo con ícono (los cuadros azules de la referencia) */
.sa-info-box { display:flex; gap:12px; align-items:flex-start; background:#f2f7ff; border:1px solid #d8e5fb; border-radius:11px; padding:14px 16px; }
.sa-info-box .ico { flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:#e0edff; color:var(--sa-blue); display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; }
.sa-info-box b { display:block; font-size:.87rem; color:var(--sa-ink); }
.sa-info-box small, .sa-info-box p { display:block; margin:.2rem 0 0; font-size:.8rem; color:var(--sa-ink-2); line-height:1.45; }

/* Fila de escala (Desde / Hasta / Precio / acción) */
.sa-tier-head, .sa-tier-row { display:grid; grid-template-columns:1fr 1fr 1.25fr 44px; gap:12px; align-items:center; }
.sa-tier-head { font-size:.75rem; font-weight:600; color:var(--sa-ink-2); margin-bottom:8px; }
.sa-tier-head small { display:block; font-weight:400; color:var(--sa-faint); font-size:.7rem; }
.sa-tier-row { padding:5px 0; }
.sa-tier-row .sa-inp { min-width:0; }
.sa-tier-add { width:100%; justify-content:center; margin-top:12px; border-style:dashed; color:var(--sa-blue); border-color:#c7d7f7; background:#f8fbff; }
.sa-tier-add:hover { background:#eff5ff; }

/* Grilla de dos columnas de página (paneles lado a lado) */
.sa-grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:18px; align-items:start; }
.sa-grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; align-items:start; }

/* Fila de la tabla de precios seleccionable */
.sa-table tr.sa-row-sel { background:#eef4ff; }
.sa-table tr.sa-clickable { cursor:pointer; }
.sa-num { text-align:right; font-variant-numeric:tabular-nums; }

/* Celda de promoción/cupón con ícono */
.sa-ent { display:flex; align-items:center; gap:11px; }
.sa-ent-ico { flex:0 0 auto; width:32px; height:32px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; background:#f1f5f9; }
.sa-ent b { display:block; font-size:.86rem; color:var(--sa-ink); font-weight:600; }
.sa-ent small { display:block; font-size:.76rem; color:var(--sa-muted); }

/* Bloque numerado del ejemplo de cobro proporcional */
.sa-steps { display:flex; flex-direction:column; gap:10px; }
.sa-step { display:grid; grid-template-columns:32px 1fr 1fr; gap:12px; align-items:center; }
.sa-step-n { width:28px; height:28px; border-radius:50%; background:var(--sa-blue); color:#fff; font-size:.8rem; font-weight:700;
    display:inline-flex; align-items:center; justify-content:center; }
.sa-step-k { background:#f6f8fc; border:1px solid var(--sa-line); border-radius:9px; padding:9px 13px; font-size:.84rem; color:var(--sa-ink-2); }
.sa-step-v { background:#fff; border:1px solid var(--sa-line); border-radius:9px; padding:9px 13px; font-size:.84rem; color:var(--sa-ink); font-weight:600; }
.sa-step-v small { display:block; font-weight:400; color:var(--sa-muted); font-size:.75rem; }
.sa-step.hl .sa-step-k { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.sa-step.hl .sa-step-v { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; font-size:1.15rem; font-weight:700; }
.sa-step-inline { display:flex; align-items:center; gap:8px; }
.sa-step-inline .sa-inp { width:82px; min-width:0; text-align:center; }

/* Desglose del simulador */
.sa-break { font-size:.86rem; }
.sa-break-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed #eef1f6; }
.sa-break-row:last-child { border-bottom:0; }
.sa-break-row .k small { display:block; color:var(--sa-faint); font-size:.74rem; }
.sa-break-row.neg .v { color:#b91c1c; }
.sa-break-row.tot { border-top:2px solid var(--sa-line); border-bottom:0; margin-top:6px; padding-top:12px; font-size:1.05rem; font-weight:700; color:var(--sa-ink); }

/* Paginador */
.sa-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid var(--sa-line); }
.sa-pager-btns { display:flex; align-items:center; gap:6px; }
.sa-pager-btns .sa-page-n { min-width:32px; height:32px; border-radius:8px; border:1px solid var(--sa-blue); background:var(--sa-blue); color:#fff;
    display:inline-flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:600; }

/* Modal simple reutilizable */
.sa-modal-bg { position:fixed; inset:0; background:rgba(15,27,45,.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; z-index:60; overflow:auto; }
.sa-modal { background:#fff; border-radius:14px; box-shadow:0 20px 50px rgba(15,27,45,.25); width:100%; max-width:720px; }
.sa-modal-h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--sa-line); }
.sa-modal-h h3 { margin:0; font-size:1.02rem; font-weight:700; color:var(--sa-ink); }
.sa-modal-b { padding:18px 20px; }
.sa-modal-x { border:0; background:transparent; font-size:1.2rem; line-height:1; color:var(--sa-muted); cursor:pointer; }

@media (max-width:820px) {
    .sa-form-2, .sa-form-3, .sa-form-4 { grid-template-columns:1fr; }
    .sa-span-2 { grid-column:span 1; }
    .sa-step { grid-template-columns:28px 1fr; }
    .sa-step-v { grid-column:2; }
    .sa-grid2, .sa-grid3 { grid-template-columns:1fr; }
}

/* Importe negativo (consumo de crédito) */
.sa-amount-neg { color:#b91c1c; }

/* Dentro de una fila con controles, el texto de ayuda va en línea (no en bloque) */
.sa-step-inline small { display:inline; color:var(--sa-muted); font-size:.75rem; }