/* =========================
BASE.CSS — Relematic (B2B)
Ubicación: /assets/css/base.css
========================= */

/* Variables (colores y sistema) */
:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #0B0F14;
  --muted: #5B6776;
  --border: rgba(11,15,20,.12);

  --brand: #1457FF;      /* azul técnico */
  --accent: #FFC400;     /* dorado/amarillo marca */

  --radius-sm: 12px;
  --radius-md: 18px;

  --container: 1160px;
  --pad: 20px;

  --shadow-sm: 0 10px 30px rgba(2,6,23,.08);
}

/* Reset moderno */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ margin:0; padding:0; }

body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; height: auto; display: block; }

a{ color: inherit; text-decoration: none; }

.container{
  width: min(var(--container), calc(100% - (var(--pad) * 2)));
  margin: 0 auto;
}

/* Accesibilidad: focus visible */
:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, white 45%);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Texto auxiliar */
.text-sm{ font-size: .95rem; color: var(--muted); }