/* =============================================================================
   sa-redesign.css · Super-Admin panel — skin Lum
   Carga después de design-system.css + lum-brand.css.
   Tema claro por defecto (opera igual que el panel de operaciones).
   NO modifica IDs ni estructura del markup: solo estiliza las clases y
   elementos que usa sa.html/sa.js.
   ============================================================================= */

/* ── Reset puntual ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  min-height: 100vh;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
}

/* ── Login ─────────────────────────────────────────────────────────────────── */
#login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

/* .card — login card (no confundir con .card del DS que es un contenedor genérico;
   aquí replicamos la especificidad porque sa.html usa .card para el form de login) */
#login .card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-md);
}

#login .card h1 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tighter);
  color: var(--text);
}

#login .card .sub {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ── Labels (scoped al login, modales y main para no afectar de más) ───────── */
#login label,
.modal label,
main label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-subtle);
  margin: var(--sp-4) 0 var(--sp-1);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

#login label:first-of-type,
.modal label:first-of-type {
  margin-top: 0;
}

/* ── Inputs / selects (scoped) ─────────────────────────────────────────────── */
#login input[type="text"],
#login input[type="password"],
#login input[type="email"],
#login input[type="date"],
#login select,
.modal input[type="text"],
.modal input[type="password"],
.modal input[type="email"],
.modal input[type="date"],
.modal select,
main input[type="text"],
main input[type="password"],
main input[type="email"],
main input[type="date"],
main select {
  display: block;
  width: 100%;
  height: var(--h-md);
  padding: 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

#login input:focus,
#login select:focus,
.modal input:focus,
.modal select:focus,
main input:focus,
main select:focus {
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}

/* ── Botones base ──────────────────────────────────────────────────────────── */
button {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

/* .btn-primary */
.btn-primary {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
  padding: 0 var(--sp-4);
  height: var(--h-md);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-primary:active { background: var(--brand-active); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* loginSubmit — full width */
#loginSubmit {
  width: 100%;
  margin-top: var(--sp-5);
  height: var(--h-lg);
  font-size: var(--fs-base);
}

/* .btn-ghost */
.btn-ghost {
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 0 var(--sp-4);
  height: var(--h-md);
  box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { background: var(--bg-hover); }

/* .btn-danger */
.btn-danger {
  background: var(--bg-surface);
  color: var(--danger-fg);
  border: 1px solid var(--danger-border);
  padding: 0 var(--sp-3);
  height: var(--h-sm);
  font-size: var(--fs-caption);
  border-radius: var(--r-sm);
}
.btn-danger:hover { background: var(--danger-bg); }

/* .btn-ok */
.btn-ok {
  background: var(--success-fg);
  color: var(--on-brand);
  border-color: transparent;
  padding: 0 var(--sp-3);
  height: var(--h-sm);
  font-size: var(--fs-caption);
  border-radius: var(--r-sm);
}
.btn-ok:hover { opacity: 0.88; }

/* .btn-sm — modificador de tamaño */
.btn-sm {
  height: var(--h-sm);
  padding: 0 var(--sp-3);
  font-size: var(--fs-caption);
  border-radius: var(--r-sm);
}

/* Cuando btn-primary se combina con btn-sm */
.btn-primary.btn-sm { height: var(--h-sm); font-size: var(--fs-caption); border-radius: var(--r-sm); }
.btn-ghost.btn-sm   { height: var(--h-sm); font-size: var(--fs-caption); border-radius: var(--r-sm); }

/* ── Error ─────────────────────────────────────────────────────────────────── */
.error {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--danger-fg);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--r-sm);
}
.error:empty { display: none; }

/* ── Header del panel ──────────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  height: 52px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

header h1 {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tight);
  color: var(--text);
}

header .spacer { flex: 1; }

header .who {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ── Main / layout del panel ───────────────────────────────────────────────── */
main {
  padding: var(--sp-6);
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Toolbar ───────────────────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.toolbar h2 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tight);
  color: var(--text);
}

.toolbar .spacer { flex: 1; }

/* ── Tabla de talleres ─────────────────────────────────────────────────────── */
#tenantsList {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

#tenantsList table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

#tenantsList th,
#tenantsList td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

#tenantsList th {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

#tenantsList tbody tr:last-child td { border-bottom: 0; }

#tenantsList tbody tr:hover td { background: var(--bg-hover); }

/* td.metrics — números tabulares, muted */
#tenantsList td.metrics {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

/* .slug — monospace */
.slug {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text);
  letter-spacing: 0;
}

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge-ok {
  color: var(--success-fg);
  background: var(--success-bg);
  border-color: var(--success-border);
}

.badge-susp {
  color: var(--danger-fg);
  background: var(--danger-bg);
  border-color: var(--danger-border);
  cursor: help;
}

/* ── Vencimiento ───────────────────────────────────────────────────────────── */
.venc-vencido {
  color: var(--danger-fg);
  font-weight: var(--fw-semibold);
}

.venc-pronto {
  color: var(--warning-fg);
  font-weight: var(--fw-semibold);
}

/* ── Acciones de fila ──────────────────────────────────────────────────────── */
.row-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}

/* ── Fila de edición inline ────────────────────────────────────────────────── */
.edit-row td {
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
}

.edit-grid {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
  flex-wrap: wrap;
  padding: var(--sp-3) 0;
}

.edit-grid .f {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* labels dentro del edit-grid: anulamos el margin-top general */
.edit-grid label {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

.edit-grid select,
.edit-grid input {
  width: auto;
  min-width: 150px;
}

.edit-grid .f-full {
  flex: 1 1 100%;
}

/* ── Modales ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--gray-950) 45%, transparent);
  backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: var(--z-modal);
}

.modal h3 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tight);
  color: var(--text);
}

.modal .actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  margin-top: var(--sp-5);
}

/* label:first-child sin margen superior (ya lo tiene el .modal label scope) */
.modal label:first-child { margin-top: 0; }

/* ── Field group (bloque "Dueño" en onboarding) ────────────────────────────── */
.field-group {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4);
  background: var(--bg-inset);
}

.field-group .lg {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin-bottom: var(--sp-1);
  letter-spacing: var(--track-tight);
}

/* ── Copybox (resultado de creación) ───────────────────────────────────────── */
.copybox {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  word-break: break-all;
  color: var(--text);
}

.copybox .k {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  margin-bottom: 2px;
}

/* ── Muted ─────────────────────────────────────────────────────────────────── */
.muted {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

/* ── [hidden] ──────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }