/* Tokens y componentes base del site Wellington Academy.
   Paleta slate + acento azul, tipografía Onest, esquinas redondeadas, sombras suaves. */
:root {
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-body: #475569;
  --color-muted: #64748b;
  --color-faint: #94a3b8;
  --color-divider: rgba(226, 232, 240, 0.8);
  --color-line: #e2e8f0;
  --color-dark: #020617;
  --color-dark-2: #0f172a;
  --color-dark-3: #1e293b;
  --color-accent: #2563eb;
  --color-accent-100: #eff6ff;
  --color-accent-200: #dbeafe;
  --color-accent-300: #bfdbfe;
  --color-accent-400: #93c5fd;
  --color-accent-600: #2563eb;
  --color-accent-700: #1d4ed8;
  --color-accent-800: #1e40af;
  --color-accent-900: #1e3a8a;
  --color-neutral-700: #64748b;
  --color-neutral-800: #475569;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: var(--font-body);
  --font-heading-weight: 600;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --radius-sm: 6px; --radius: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.05);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-body); font-family: var(--font-body); font-size: 17px; line-height: 1.6; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); color: var(--color-text); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 var(--space-4); }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-text); text-decoration: underline; }
img { display: block; max-width: 100%; }
::selection { background: var(--color-accent-200); color: var(--color-accent-900); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius); font: inherit; font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-text); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-dark-3); color: #fff; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-line); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: #f8fafc; color: var(--color-text); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--color-text); padding-inline: 0; }
.btn-ghost:hover { color: var(--color-accent-700); gap: var(--space-3); }
.btn-icon { padding: 0; width: 40px; height: 40px; }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }

/* etiquetas */
.tag { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; line-height: 1.4; border: 1px solid transparent; }
.tag-accent { background: rgba(255, 255, 255, 0.6); border-color: var(--color-divider); color: var(--color-body); box-shadow: var(--shadow-sm); backdrop-filter: blur(4px); }
.tag-neutral { background: var(--color-surface); border-color: var(--color-line); color: var(--color-body); }
.tag-outline { background: var(--color-surface); border-color: var(--color-line); color: var(--color-text); }

/* tarjetas */
.card { position: relative; display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-kicker { font-size: 13px; font-weight: 500; color: var(--color-muted); margin: 0 0 var(--space-2); }
.card-title { margin: 0 0 var(--space-2); }
.card-body { margin: 0; font-size: 15px; line-height: 1.65; color: var(--color-muted); }
.card-meta { font-size: 14px; color: var(--color-muted); margin: var(--space-3) 0 0; }

/* formularios */
.field { display: grid; gap: var(--space-2); }
.field label { font-size: 14px; font-weight: 500; color: var(--color-text); }
.input { width: 100%; font: inherit; font-size: 16px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-sm); transition: border-color 0.2s, box-shadow 0.2s; }
.input:hover { border-color: #cbd5e1; }
.input:focus { outline: none; border-color: var(--color-text); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08); }
textarea.input { resize: vertical; min-height: 120px; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }

/* tablas */
.table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.table thead th { text-align: left; font-size: 13px; font-weight: 500; color: var(--color-muted); background: #f8fafc; border-bottom: 1px solid var(--color-line); }
.table td, .table th { border-bottom: 1px solid var(--color-divider); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }