/* Super-Administrador (superadmin.php). Se apoya en landing.css (variables, botones) y demo.css (barra, menu, campos);
   aqui solo va lo propio del panel. El ingreso usa ingreso.css + el bloque .sa-login. */

/* ---------- ingreso ---------- */
.sa-login{background:#eceef2;background-image:radial-gradient(circle at 20% 10%,#ffffff 0,rgba(255,255,255,0) 45%),radial-gradient(circle at 85% 90%,#dfe4ec 0,rgba(223,228,236,0) 50%)}
.sa-login .in-caja{border:1px solid #0d1117;box-shadow:0 30px 60px -28px rgba(13,17,23,.55)}
.sa-login .in-logo{width:120px;margin-bottom:10px}
.sa-login-sello{display:flex;align-items:center;justify-content:center;gap:8px;width:fit-content;margin:0 auto 12px;padding:4px 12px;border-radius:999px;background:#0d1117;color:#fff;font-size:.78rem;letter-spacing:.02em}
.sa-login .in-caja h1{font-size:1.75rem;font-weight:600}
.sa-login .in-sub{margin-bottom:18px}
.sa-login .in-etiqueta{font-weight:500}

/* ---------- panel ---------- */
.sa{min-height:100vh}
.sa .dm-contenido{display:grid;align-content:start;gap:20px}
.sa .dm-titulo h1{font-weight:600}
.sa a.dm-ir{text-decoration:none}
.sa .dm-ir em{margin-left:auto;min-width:22px;padding:0 7px;border-radius:999px;background:var(--azul-suave);color:var(--azul-2);font-size:.75rem;line-height:20px;text-align:center}
.sa .dm-ir.is-activo em,.sa .dm-ir:hover em{background:#fff;color:var(--azul-2)}
.sa-fuerte{font-weight:500;color:var(--tinta)}

/* avisos */
.sa-aviso{display:flex;align-items:center;gap:12px;padding:14px 18px;border:var(--borde);border-radius:16px;background:#fff;box-shadow:var(--sombra);animation:saEntra calc(.35s*var(--t)) var(--curva) both}
.sa-aviso > i{color:var(--verde);font-size:1.1rem}
.sa-aviso.is-error > i{color:var(--rojo)}
.sa-aviso.is-error{border-color:var(--rojo)}
.sa-aviso.is-clave{flex-wrap:wrap;border-color:var(--azul);background:var(--azul-suave)}
.sa-aviso.is-clave > i{color:var(--azul)}
.sa-aviso-texto{display:grid;gap:6px;flex:1;min-width:220px}
.sa-aviso-texto code{width:fit-content;padding:6px 14px;border:1px dashed var(--azul);border-radius:10px;background:#fff;color:var(--tinta);font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:1.15rem;letter-spacing:.06em;user-select:all}
.sa-aviso-acciones{display:flex;flex-wrap:wrap;gap:8px}
@keyframes saEntra{from{opacity:0;transform:translateY(8px)}}

/* indicadores */
.sa-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sa-kpi{display:grid;gap:2px;padding:16px 18px;border:var(--borde);border-radius:18px;background:#fff;box-shadow:var(--sombra);color:var(--tinta);text-decoration:none;transition:transform calc(.25s*var(--t)) var(--curva),box-shadow calc(.25s*var(--t)) ease;animation:saEntra calc(.4s*var(--t)) var(--curva) both}
.sa-kpi:nth-child(2){animation-delay:calc(.05s*var(--t))}
.sa-kpi:nth-child(3){animation-delay:calc(.1s*var(--t))}
.sa-kpi:nth-child(4){animation-delay:calc(.15s*var(--t))}
a.sa-kpi:hover{transform:translateY(-2px);box-shadow:var(--sombra-h)}
.sa-kpi small{color:var(--suave);font-size:.82rem}
.sa-kpi strong{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.sa-kpi span{color:var(--tenue);font-size:.8rem}
@media (max-width:1100px){.sa-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* cajas */
.sa-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.sa-dos-actividad{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
@media (max-width:1100px){.sa-dos,.sa-dos-actividad{grid-template-columns:1fr}}
.sa-caja{display:grid;gap:12px;min-width:0;padding:18px;border:var(--borde);border-radius:20px;background:#fff;box-shadow:var(--sombra)}
.sa-caja-cabeza{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 12px}
.sa-caja-cabeza h2{font-size:1.08rem;font-weight:600}
.sa-caja-cabeza a{color:var(--azul);font-size:.86rem;text-decoration:none}
.sa-caja-cabeza a:hover{text-decoration:underline}
.sa-caja-cabeza small{color:var(--tenue);font-size:.8rem}
.sa-caja .sa-tabla-caja{border:0;box-shadow:none;border-radius:0}
.sa-vacio{padding:14px 4px;color:var(--suave);font-size:.92rem}
.sa-lista{display:grid;margin:0;padding:0;list-style:none}
.sa-lista li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px;border-top:1px solid var(--linea)}
.sa-lista li:first-child{border-top:0}
.sa-lista li > div{display:grid;min-width:0}
.sa-lista small{color:var(--suave);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-nota{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:14px;background:var(--azul-suave);color:var(--tinta-2);font-size:.88rem}
.sa-nota i{margin-top:4px;color:var(--azul)}

/* chips de estado */
.sa-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:var(--gris);color:var(--tinta-2);font-size:.76rem;white-space:nowrap}
.sa-chip.is-nuevo{background:var(--azul-suave);color:var(--azul-2)}
.sa-chip.is-contactado{background:#fff4e5;color:#9a5b00}
.sa-chip.is-cliente,.sa-chip.is-activa{background:#e7f6ee;color:var(--verde)}
.sa-chip.is-descartado{background:#eef0f3;color:var(--tenue)}
.sa-chip.is-pendiente{background:#fff4e5;color:#9a5b00}
.sa-chip.is-suspendida{background:#fdecea;color:var(--rojo)}
.sa-chip.is-total{background:#0d1117;color:#fff}

/* filtros */
.sa-filtros{display:flex;flex-wrap:wrap;gap:8px}
.sa-filtro{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid var(--linea);border-radius:999px;background:#fff;color:var(--tinta-2);font-size:.88rem;text-decoration:none;transition:background-color calc(.2s*var(--t)) ease,color calc(.2s*var(--t)) ease,border-color calc(.2s*var(--t)) ease}
.sa-filtro em{font-style:normal;color:var(--tenue);font-size:.8rem}
.sa-filtro:hover{border-color:var(--tinta)}
.sa-filtro.is-activo{border-color:var(--tinta);background:var(--tinta);color:#fff}
.sa-filtro.is-activo em{color:#c9ced8}

/* tablas */
.sa-tabla-caja{min-width:0;overflow-x:auto;border:var(--borde);border-radius:18px;background:#fff;box-shadow:var(--sombra)}
.sa-tabla{width:100%;border-collapse:collapse;font-size:.88rem}
.sa-tabla th{position:sticky;top:0;padding:11px 14px;border-bottom:1px solid var(--linea);background:var(--gris);color:var(--suave);font-size:.76rem;font-weight:500;letter-spacing:.03em;text-align:left;text-transform:uppercase;white-space:nowrap}
.sa-tabla td{padding:12px 14px;border-top:1px solid var(--linea);vertical-align:top}
.sa-tabla tbody tr:first-child td{border-top:0}
.sa-tabla tbody tr{transition:background-color calc(.2s*var(--t)) ease}
.sa-tabla tbody tr:hover{background:#fafbfc}
.sa-tabla tr.is-alerta td{background:#fff7f6}
.sa-tabla td > small,.sa-tabla td small{display:block;margin-top:2px;color:var(--suave);font-size:.78rem}
.sa-tabla .sa-fuerte{display:block}
.sa-nowrap{white-space:nowrap}
.sa-mensaje{max-width:320px;font-style:italic}
.sa-wa{display:inline-flex;align-items:center;gap:6px;color:var(--verde);text-decoration:none}
.sa-wa:hover{text-decoration:underline}
.sa-wa i{font-size:1.05rem}
.sa-tabla a{color:inherit}
.sa-select{min-height:38px;padding:6px 10px;border:1px solid #c5cbd5;border-radius:10px;background:#fff;font:inherit;font-size:.86rem}
.sa-notas{display:grid;gap:6px;min-width:210px}
.sa-notas textarea{width:100%;min-height:44px;padding:8px 10px;border:1px solid #c5cbd5;border-radius:10px;font:inherit;font-size:.84rem;resize:vertical}
.sa-notas textarea:focus,.sa-select:focus,.sa-precio:focus,.sa-cuenta-form input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(23,71,209,.15)}
.sa-link{justify-self:start;padding:0;border:0;background:none;color:var(--azul);font:inherit;font-size:.84rem;cursor:pointer}
.sa-link:hover{text-decoration:underline}
.sa-link.is-peligro{color:var(--rojo)}
.sa-acciones{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 14px}
.sa-acciones form{margin:0}
.sa-usuario{display:inline-block;margin:0 6px 6px 0;padding:2px 10px;border:1px solid var(--linea);border-radius:999px;font-size:.8rem}
.sa-cuenta-form{display:flex;align-items:center;gap:8px}
.sa-cuenta-form input{width:140px;min-height:34px;padding:4px 10px;border:1px solid #c5cbd5;border-radius:10px;font:inherit;font-size:.82rem}
.sa-precio{width:140px;min-height:40px;padding:6px 12px;border:1px solid #c5cbd5;border-radius:10px;font:inherit;font-variant-numeric:tabular-nums}

/* formularios */
.sa-form{display:grid;gap:16px;padding:22px;border:var(--borde);border-radius:20px;background:#fff;box-shadow:var(--sombra)}
.sa-form .sa-tabla-caja{box-shadow:none;border-color:var(--linea)}
.sa-form-chico{padding:0;border:0;box-shadow:none;gap:12px}
.sa-campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.sa .dm-campo > span{font-size:.86rem;color:var(--tinta-2)}
.sa .dm-campo textarea{width:100%;padding:10px 14px;border:1px solid #c5cbd5;border-radius:12px;background:#fff;font:inherit;font-size:.95rem;resize:vertical}
.sa .dm-campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(23,71,209,.15)}
.sa .dm-campo select[disabled],.sa .dm-campo input[disabled]{background:var(--gris);color:var(--tenue)}
.sa-grupo{margin:0;padding:14px 16px 16px;border:1px solid var(--linea);border-radius:16px}
.sa-grupo legend{padding:0 8px;color:var(--suave);font-size:.86rem}
.sa-modulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.sa-check{display:flex;align-items:center;gap:10px;min-height:42px;padding:8px 12px;border:1px solid var(--linea);border-radius:12px;font-size:.88rem;cursor:pointer;transition:border-color calc(.2s*var(--t)) ease,background-color calc(.2s*var(--t)) ease}
.sa-check:has(input:checked){border-color:var(--azul);background:var(--azul-suave)}
.sa-check input{width:18px;height:18px;accent-color:var(--azul)}
.sa-check.is-cambio{animation:saPulso calc(.6s*var(--t)) ease}
@keyframes saPulso{40%{transform:scale(1.03)}}
.sa-form-acciones{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}

@media (max-width:760px){
    .sa-kpis{grid-template-columns:1fr 1fr;gap:10px}
    .sa-kpi{padding:12px 14px}
    .sa-kpi strong{font-size:1.4rem}
    .sa-form{padding:16px}
    .sa-aviso{align-items:flex-start}
}