/* ── 6. CARDS ─────────────────────────────────────────────────── */

.card, .sa-card, .panel {
  width:100%; max-width:100%; min-width:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color var(--t);
}
.card:hover { border-color:var(--border2); }
.sa-card { padding:var(--space-4); margin-bottom:var(--space-3); overflow:visible; }
.card-header { padding:var(--space-4); display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); border-bottom:1px solid var(--border); }
.card-body    { padding:var(--space-4); }
.card-footer  { padding:var(--space-3) var(--space-4); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-size:var(--text-xs); color:var(--text3); }
.sa-card-title { font-size:var(--text-xs); font-weight:800; color:var(--text); display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3); }

/* ── Aire interno en TODAS las tarjetas (antes .card no tenía padding → contenido pegado al borde) ── */
.card { padding: var(--space-4); }
/* Las 4 tarjetas con header propio: que el header siga a ancho completo (borde de punta a punta) */
.card > .card-header:first-child {
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
}
/* Filas info (Usuario/Email/Rol/Sesión y similares) — estilo superadmin */
.config-row { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.config-row:first-of-type { padding-top: 0; }
.config-row:last-child { border-bottom: none; }
.config-label { font-size: var(--text-xs); font-weight: 600; color: var(--text); }
.config-sub { font-size: 12px; color: var(--text3); margin-top: 3px; word-break: break-word; }

/* ── Tarjetas de Integraciones ── */
.integ-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: 8px; }
.integ-card.active { border-color: var(--accent); }
.integ-card h4 { margin: 0; font-size: var(--text-sm); }
.integ-actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }

/* KPI cards */
.kpi-card, .sa-kpi {
  width:100%; max-width:100%; min-width:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--t);
}
.kpi-card:hover, .sa-kpi:hover { border-color:var(--border2); }
.sa-kpi::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); opacity:0; transition:opacity .2s; }
.sa-kpi:hover::after { opacity:1; }
.kpi-icon, .sa-kpi-icon { width:32px; height:32px; border-radius:var(--radius-sm); background:var(--surface2); display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:var(--space-3); flex-shrink:0; }
.kpi-tag { position:absolute; top:var(--space-3); right:var(--space-3); font-size:10px; font-weight:700; padding:2px var(--space-2); border-radius:20px; background:var(--green-l); color:var(--green); }
.kpi-tag.warn   { background:var(--amber-l); color:var(--amber); }
.kpi-tag.stable { background:var(--surface2); color:var(--text3); }
.sa-kpi-delta { font-size:10px; font-weight:700; color:var(--green); }
.sa-kpi-delta.neg { color:var(--red); }
.sa-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-3); margin-bottom:var(--space-5); }

/* SA stat (small inline stat) */
.sa-stat { background:var(--surface2); border-radius:var(--radius-sm); padding:var(--space-3); text-align:center; }
.sa-sv   { font-size:var(--text-lg); font-weight:900; color:var(--text); letter-spacing:-.5px; }
.sa-sl   { font-size:10px; color:var(--text3); margin-top:2px; }

/* ── 7. TABLES ────────────────────────────────────────────────── */

.table-wrap, .sa-table-wrap {
  width:100%; max-width:100%; min-width:0;
  overflow-x:auto;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  scrollbar-width:thin;
  scrollbar-color:var(--border2) transparent;
}
table, .sa-table { width:100%; border-collapse:collapse; font-size:var(--text-xs); }
th { padding:var(--space-2) var(--space-4); text-align:left; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--text3); background:var(--surface2); border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); color:var(--text2); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--surface2); color:var(--text); }
.td-id     { font-family:monospace; font-size:11px; color:var(--text3); }
.td-route  { font-weight:600; color:var(--text); }
.td-amount { font-weight:700; color:var(--accent); }

/* ── 8. BUTTONS ───────────────────────────────────────────────── */

.btn,
button.sa-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-h);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: var(--font);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background var(--t), opacity var(--t), transform .12s;
}
.btn:active, button.sa-btn-primary:active { transform: scale(.98); }
.btn.loading { opacity:.7; cursor:wait; pointer-events:none; }

.btn-primary, button.sa-btn-primary { background:var(--accent); color:#000; }
.btn-primary:hover, button.sa-btn-primary:hover { opacity:.88; }
.btn-secondary { background:var(--surface2); color:var(--text2); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--surface3); color:var(--text); }
.btn-ghost { background:transparent; color:var(--text2); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--surface2); }
.btn-danger { background:var(--red-l); color:var(--red); border:1px solid rgba(239,68,68,.3); }
.btn-danger:hover { background:rgba(239,68,68,.22); }
.btn-sm     { height:var(--btn-h-sm); padding:0 var(--space-3); font-size:var(--text-xs); }
.btn-xs     { height:26px; padding:0 var(--space-2); font-size:10px; border-radius:6px; }
.btn-icon   { width:var(--btn-h); padding:0; }

/* SA button aliases */
.sa-btn-xs {
  display:inline-flex; align-items:center; gap:4px;
  height:var(--btn-h-sm); padding:0 var(--space-3);
  font-size:var(--text-xs); font-weight:600;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface2); color:var(--text2);
  cursor:pointer; font-family:var(--font);
  transition:background var(--t);
}
.sa-btn-xs:hover { background:var(--surface3); color:var(--text); }
.sa-btn-xs.r { border-color:rgba(239,68,68,.3); color:var(--red); background:var(--red-l); }
.sa-btn-xs.b { border-color:rgba(59,130,246,.3); color:var(--blue); background:var(--blue-l); }

/* SA btn (legacy non-primary) */
.sa-btn { display:inline-flex; align-items:center; gap:4px; height:var(--btn-h-sm); padding:0 var(--space-3); font-size:var(--text-xs); font-weight:600; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface2); color:var(--text2); cursor:pointer; font-family:var(--font); transition:background var(--t); }
.sa-btn:hover { background:var(--surface3); color:var(--text); }
.sa-btn.r  { border-color:rgba(239,68,68,.3); color:var(--red); background:var(--red-l); }
.sa-btn.g  { border-color:rgba(34,197,94,.3); color:var(--green); background:var(--green-l); }

/* ── 9. FORMS ─────────────────────────────────────────────────── */

.form         { display:flex; flex-direction:column; gap:var(--space-4); }
.form-section { display:flex; flex-direction:column; gap:var(--space-3); }
.form-section-title { font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text3); padding-bottom:var(--space-2); border-bottom:1px solid var(--border); }
.form-group { display:flex; flex-direction:column; gap:var(--space-1); margin-bottom:var(--space-3); }
.fg         { display:flex; flex-direction:column; gap:var(--space-1); margin-bottom:var(--space-3); }
.form-row   { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
.fg-row     { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
.form-row-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); }
.form-hint  { font-size:10px; color:var(--text3); margin-top:var(--space-1); }
.form-error { font-size:10px; color:var(--red); margin-top:var(--space-1); display:flex; align-items:center; gap:var(--space-1); }

label, .label, .form-label {
  display:block;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text3);
  margin-bottom:var(--space-1);
}

input, textarea, select,
.form-input, .sa-inp {
  display: block;
  width: 100%;
  height: var(--input-h);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  font-size: var(--text-xs);
  color: var(--text);
  outline: none;
  font-family: var(--font);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  box-sizing: border-box;
}
textarea { height:auto; padding:var(--space-3); min-height:80px; resize:vertical; }
input:focus, textarea:focus, select:focus,
.form-input:focus, .sa-inp:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-l); background:var(--surface); }
input::placeholder, textarea::placeholder { color:var(--text3); }
select option { background:var(--surface2); }
input[type=checkbox], input[type=radio] { width:auto; height:auto; accent-color:var(--accent); }
.input-error, input.error { border-color:var(--red); box-shadow:0 0 0 2px var(--red-l); }
.input-success, input.success { border-color:var(--green); }

/* Password strength */
.pw-strength { margin-top:var(--space-2); }
.pw-bar { height:3px; background:var(--surface3); border-radius:2px; overflow:hidden; margin-bottom:4px; }
.pw-bar-fill { height:100%; border-radius:2px; transition:width .3s, background .3s; }
.pw-label { font-size:10px; color:var(--text3); }