/* ============================================================
   Puenteceso S.D. — Shared design-system layer
   Canonical component variants and layout primitives loaded by
   every layout, before the surface-specific stylesheets.
   Base component styles (`.btn`, typography, tokens) live in
   styles.css; this layer only adds the variants/classes that
   were previously used without a definition.
   ============================================================ */

/* ---------- Focus ring ---------- */
:root {
  --focus-ring: var(--brand-500);
}
:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn-filled {
  background: var(--brand-500);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-brand);
}
.btn-filled:hover { background: var(--brand-600); }
.btn-filled:disabled { opacity: .5; cursor: not-allowed; }

.btn-tonal {
  background: var(--surface-alt);
  color: var(--fg);
  border-color: var(--border);
}
.btn-tonal:hover { background: var(--border); }

/* ---------- Cards ---------- */
.card-outlined {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
}

.card-elev {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ---------- Layout primitives ---------- */
.col { min-width: 0; }