/* ============================================================
   SWM/OS · Design System  (authoritative single source)
   Modular scale 1.25 · 8px grid · dark-first · WCAG 2.2 AA
   Importar en TODAS las páginas del OS — no duplicar tokens.
   ============================================================ */

/* ── Primitive tokens ───────────────────────────────────────── */
:root {
  /* Brand colors — hue NEVER changes */
  --brand-orange:      #F87802;
  --brand-red:         #F03302;
  --brand-cyan:        #039ECD;
  --brand-blue:        #014DA1;
  --brand-yellow:      #FFD700;
  --brand-green:       #1B5E20;

  /* Brand accessible (AA on dark backgrounds) */
  --brand-orange-aa:   #FF8A1A;
  --brand-cyan-aa:     #2DB6E8;
  --brand-red-aa:      #FF4D2E;

  /* Brand accessible (AA on light backgrounds) */
  --brand-orange-text: #C25D00;
  --brand-cyan-text:   #0070A0;
  --brand-red-text:    #C82B0E;
  --brand-green-text:  #1B5E20;

  /* Typefaces */
  --ff-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --ff-mono:  'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale — piso tipográfico 14px (Fase 1 F · ningún texto < 14px en el OS) */
  --t-nano:    14px;
  --t-micro:   14px;
  --t-xs:      14px;
  --t-ui:      15px;
  --t-sm:      16px;
  --t-body:    18px;
  --t-lg:      22px;
  --t-xl:      27px;
  --t-2xl:     34px;
  --t-display: clamp(30px, 2.8vw, 36px);
  --t-hero:    clamp(43px, 5vw, 72px);

  /* Spacing — 4px base, 8px rhythm */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* Motion */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1, 1);
  --ease-std:    cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --dur-fast:    120ms;
  --dur-std:     180ms;
  --dur-slow:    280ms;

  /* Radius */
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-xl:  14px;

  /* Elevation — ONE consistent shadow per level */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.40);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.40);
  --shadow-md: 0 4px 16px rgba(0,0,0,.40);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.40);
}

/* ── Semantic tokens · Dark (default) ──────────────────────── */
[data-theme="dark"], :root {
  --bg:          #0C0C0C;
  --surface:     #141414;
  --surface-2:   #1A1A1A;
  --surface-3:   #212121;
  --surface-4:   #282828;

  --line:        rgba(255,255,255,.06);
  --line-2:      rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);

  --text:        #EFEFEF;      /* AA: 16.2:1 on --bg */
  --text-2:      #A0A0A0;      /* AA: 5.2:1 on --bg */
  --text-3:      #616161;      /* AA large: 3.2:1 on --bg */
  --text-4:      #404040;

  --c-green:     #4CB856;
  --c-orange:    var(--brand-orange-aa);
  --c-red:       var(--brand-red-aa);
  --c-cyan:      var(--brand-cyan-aa);
  --c-yellow:    #FFD700;

  --focus-ring:  var(--brand-cyan-aa);

  --tile-overlay:       rgba(0,0,0,.30);
  --tile-overlay-hover: rgba(0,0,0,.10);
  --tile-text:          #FFFFFF;
  --tile-text-sub:      rgba(255,255,255,.80);
}

/* ── Semantic tokens · Light ────────────────────────────────── */
[data-theme="light"] {
  --bg:          #F4F1EC;
  --surface:     #FFFFFF;
  --surface-2:   #F9F6F1;
  --surface-3:   #EDE9E2;
  --surface-4:   #E2DED7;

  --line:        rgba(26,26,26,.08);
  --line-2:      rgba(26,26,26,.14);
  --line-strong: rgba(26,26,26,.22);

  --text:        #111111;
  --text-2:      #4A4A4A;
  --text-3:      #787878;
  --text-4:      #B0B0B0;

  --c-green:     var(--brand-green-text);
  --c-orange:    var(--brand-orange-text);
  --c-red:       var(--brand-red-text);
  --c-cyan:      var(--brand-cyan-text);
  --c-yellow:    #9A7A00;

  --focus-ring:  var(--brand-blue);

  --tile-overlay:       rgba(255,255,255,.20);
  --tile-overlay-hover: rgba(255,255,255,.04);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-sans);
  font-size: var(--t-body);
  line-height: 1.6;        /* FIX: "letras montadas con líneas" */
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  letter-spacing: -.01em;
  transition: background-color var(--dur-slow) var(--ease-std),
              color var(--dur-slow) var(--ease-std);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; color: inherit; }

/* FIX: foco visible en TODOS los interactivos */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection {
  background: rgba(3,158,205,.25);
  color: var(--text);
}

/* ── Layout ─────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(var(--sp-6), 5vw, var(--sp-16));
}

/* ── Page anatomy ────────────────────────────────────────────── */
.page-head {
  padding: var(--sp-10) 0 var(--sp-6);
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

.page-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.page-eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--t-micro);
  color: var(--text-3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.page-title {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 1.15;      /* FIX: titles tight but not cramped */
  letter-spacing: -.025em;
  color: var(--text);
}

.page-sub {
  margin-top: var(--sp-3);
  font-size: var(--t-body);
  color: var(--text-2);
  max-width: 72ch;
  line-height: 1.65;
  font-weight: 400;
}

.page-sub b { color: var(--text); font-weight: 600; }

main { flex: 1; padding: var(--sp-8) 0 var(--sp-20); }

/* ── Section header ──────────────────────────────────────────── */
.section-h {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: var(--t-micro);
  color: var(--text-3);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-5);
}

/* ── Divider — never crosses text (FIX síntoma 1) ─────────────── */
hr, .divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--sp-8) 0;   /* generous vertical margin — texto nunca toca */
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--sp-5) var(--sp-6);   /* FIX: text never touches border */
  border-radius: var(--r-md);
  transition: border-color var(--dur-std) var(--ease-std),
              box-shadow var(--dur-std) var(--ease-std);
}
.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-xs);
}

/* ── Feature grid ───────────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
}

.feature {
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color var(--dur-std) var(--ease-std);
}
.feature:hover { border-color: var(--line-strong); }

.feature-tag {
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 2px var(--sp-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  align-self: flex-start;
}
.feature-tag.shipping { color: var(--c-cyan); border-color: rgba(45,182,232,.30); }
.feature-tag.next     { color: var(--c-orange); border-color: rgba(255,138,26,.30); }
.feature-tag.later    { color: var(--text-3); }

.feature h3 {
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.3;
}

.feature p {
  font-size: var(--t-ui);
  color: var(--text-2);
  line-height: 1.6;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-sans);
  font-size: var(--t-ui);
  font-weight: 600;
  letter-spacing: .1px;
  padding: var(--sp-2) var(--sp-4);
  min-height: 36px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-std),
              background var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std);
}
.btn:hover {
  border-color: var(--line-strong);
  background: var(--surface-3);
}

.btn-primary {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #fff;
}
.btn-primary:hover {
  background: #e06900;
  border-color: #e06900;
  color: #fff;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-2);
}
.btn-ghost:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.btn-danger {
  background: transparent;
  border-color: rgba(255,77,46,.35);
  color: var(--c-red);
}
.btn-danger:hover {
  background: rgba(255,77,46,.08);
  border-color: var(--c-red);
}

.btn:disabled, .btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  flex-shrink: 0;
}

/* ── Form elements ───────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

label {
  font-family: var(--ff-mono);
  font-size: var(--t-micro);
  color: var(--text-3);
  letter-spacing: .6px;
  text-transform: uppercase;
  display: block;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
  font-family: var(--ff-sans);
  font-size: var(--t-body);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);   /* generous padding */
  width: 100%;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-std);
  min-height: 40px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--brand-cyan);
}
textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

/* ── Tables — FIX síntoma 3: desprolijo ─────────────────────── */
table { border-collapse: collapse; width: 100%; }
th {
  font-family: var(--ff-mono);
  font-size: var(--t-micro);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: var(--sp-3) var(--sp-4);     /* padding por celda */
  text-align: left;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
  font-weight: 700;
}
td {
  padding: var(--sp-3) var(--sp-4);    /* comfortable row height */
  border-bottom: 1px solid var(--line);
  font-size: var(--t-ui);
  vertical-align: middle;
  line-height: 1.5;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface-2); }

/* ── Status pill / badge ─────────────────────────────────────── */
.badge, .status-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.badge-dot::before, .status-tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge-green  { color: var(--c-green);  background: rgba(76,184,86,.12);  border: 1px solid rgba(76,184,86,.25); }
.badge-orange { color: var(--c-orange); background: rgba(255,138,26,.10); border: 1px solid rgba(255,138,26,.25); }
.badge-red    { color: var(--c-red);    background: rgba(255,77,46,.10);  border: 1px solid rgba(255,77,46,.25); }
.badge-cyan   { color: var(--c-cyan);   background: rgba(45,182,232,.10); border: 1px solid rgba(45,182,232,.25); }
.badge-muted  { color: var(--text-3);   background: var(--surface-3);     border: 1px solid var(--line-2); }

/* ── Topbar anchor (for pages using swm-topbar.css) ─────────── */
/* Ensures content never slides under sticky topbar */
body.has-topbar main { padding-top: var(--sp-6); }

/* ── Integration box ────────────────────────────────────────── */
.integration-box {
  margin-top: var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.integration-box-title {
  font-weight: 700;
  font-size: var(--t-body);
  color: var(--text);
}
.integration-box-desc {
  font-size: var(--t-ui);
  color: var(--text-2);
  line-height: 1.5;
}

/* ── Mono data ───────────────────────────────────────────────── */
.mono {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  color: var(--text-3);
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
  color: var(--text-3);
}
.empty-state h3 {
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--text-2);
  margin-bottom: var(--sp-2);
  letter-spacing: -.01em;
}
.empty-state p {
  font-size: var(--t-ui);
  color: var(--text-3);
  max-width: 40ch;
  margin: 0 auto var(--sp-6);
  line-height: 1.6;
}

/* ── Toast ───────────────────────────────────────────────────── */
.swm-toast-host {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  padding: var(--sp-5) 0;
  margin-top: auto;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-family: var(--ff-mono);
  font-size: var(--t-micro);
  color: var(--text-3);
}
.footer-brand {
  font-family: var(--ff-sans);
  font-size: var(--t-ui);
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.footer-meta {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.footer-meta b { color: var(--text-2); }

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Responsive base ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-head { padding: var(--sp-8) 0 var(--sp-5); }
  main { padding: var(--sp-5) 0 var(--sp-16); }
  .features-grid { grid-template-columns: 1fr; }
}