/* ============================================================================
   Portal HSE · Administrador de Extintores — estilos propios del prototipo.
   Depende de gruposokol-ui.css (usa sus tokens: --primary, --bg, --radius, …).
   ============================================================================ */

.app-hidden{display:none!important}

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-wrap{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1100px 480px at 50% -8%,var(--bg-soft),var(--bg));
}
.login-card{width:100%;max-width:400px}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:6px}
.login-logo{
  width:64px;height:64px;border-radius:16px;background:#221f1d;color:#fff;
  display:grid;place-items:center;font-size:1.8rem;box-shadow:var(--shadow-md);
}

/* ── Shell (menú lateral + contenido) ──────────────────────────────────── */
.gs-main-scroll{padding:22px 24px 44px}

.view-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:18px;flex-wrap:wrap;
}

.user-chip{
  display:flex;align-items:center;gap:9px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:30px;padding:5px 6px 5px 12px;
}
.user-chip .u-meta{display:flex;flex-direction:column;line-height:1.12}
.user-chip .u-meta b{font-size:.78rem;color:var(--text)}
.user-chip .u-meta span{font-size:.64rem;color:var(--muted)}
.user-av{
  width:30px;height:30px;border-radius:50%;background:var(--primary-soft);
  color:var(--primary-strong);display:grid;place-items:center;font-size:1rem;
}

.nav-soon{
  margin-left:auto;font-size:.53rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:2px 7px;
}
.gs-sidebar a.is-disabled{opacity:.55;cursor:default}

/* ── Barra de herramientas / tabla ─────────────────────────────────────── */
.toolbar-grid{display:grid;grid-template-columns:1.2fr 1.2fr 1fr 1fr 1.4fr auto;gap:12px;align-items:end}
@media(max-width:960px){.toolbar-grid{grid-template-columns:1fr 1fr}}

.table-scroll{overflow-x:auto}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.icon-btn{
  width:32px;height:32px;border-radius:9px;border:1px solid transparent;background:transparent;
  color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.15s;
}
.icon-btn:hover{background:var(--bg-soft);color:var(--text)}
.icon-btn.danger:hover{background:var(--bad-soft);color:var(--bad-strong)}

.est-sub{font-size:.6rem;color:var(--muted);margin-top:3px}
.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty .gs-icon{font-size:2rem;color:var(--faint);display:block;margin-bottom:8px}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;background:rgba(59,45,39,.45);backdrop-filter:blur(2px);
  display:grid;place-items:center;padding:20px;z-index:50;animation:gsfade .15s ease;
}
.modal-card{
  width:100%;max-width:640px;max-height:92vh;overflow:auto;background:var(--surface);
  border-radius:var(--radius);box-shadow:var(--shadow-md);animation:gspop .16s ease;
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 20px;border-bottom:1px solid var(--border);
}
.modal-body{padding:20px}
.modal-foot{
  display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;
  border-top:1px solid var(--border);background:var(--surface-2);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .col-2{grid-column:1/-1}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
.classes-hint{font-size:.66rem;color:var(--muted);margin-top:3px;min-height:14px}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;right:20px;bottom:20px;z-index:60;max-width:340px;
  box-shadow:var(--shadow-md);animation:gspop .18s ease;
}

@keyframes gsfade{from{opacity:0}}
@keyframes gspop{from{opacity:0;transform:translateY(8px) scale(.98)}}
@media(prefers-reduced-motion:reduce){.modal,.modal-card,.toast{animation:none}}