/* AutoPostula — identidad compartida (landing + portal).
   Neutros con sesgo verde-teal, acento esmeralda, ámbar para monetización.
   Tema claro/oscuro por prefers-color-scheme + override con data-theme. */

:root {
  --bg: #f1f4f2;
  --surface: #ffffff;
  --surface-2: #f7f9f8;
  --ink: #14201d;
  --muted: #566661;
  --faint: #8b9a95;
  --line: #e2e6e4;
  --accent: #0e7c6f;
  --accent-strong: #0b5e54;
  --accent-soft: #d8ece7;
  --amber: #a9691f;
  --amber-soft: #f4e6d0;
  --done-bg: #d8ece7; --done-ink: #0c5e54;
  --warn-bg: #f4e6d0; --warn-ink: #8a561a;
  --info-bg: #dde8f0; --info-ink: #2d5877;
  --pending-bg: #e6eae8; --pending-ink: #57655f;
  --danger: #b23b3b;
  --shadow-sm: 0 1px 2px rgba(20,32,29,.05);
  --shadow: 0 1px 2px rgba(20,32,29,.04), 0 6px 22px rgba(20,32,29,.06);
  --shadow-lg: 0 20px 50px rgba(20,32,29,.12);
  --radius: 14px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1411; --surface: #131e1a; --surface-2: #16221d;
    --ink: #eaf0ed; --muted: #94a39d; --faint: #6d7d78; --line: #233029;
    --accent: #34b6a5; --accent-strong: #7fd9cb; --accent-soft: #16302b;
    --amber: #e0a35c; --amber-soft: #38290f;
    --done-bg: #123a33; --done-ink: #74dccb;
    --warn-bg: #38290f; --warn-ink: #e6b473;
    --info-bg: #172836; --info-ink: #8fbbdc;
    --pending-bg: #1a2621; --pending-ink: #94a39d;
    --danger: #e07a7a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.45);
  }
}
:root[data-theme="light"] {
  --bg: #f1f4f2; --surface: #ffffff; --surface-2: #f7f9f8;
  --ink: #14201d; --muted: #566661; --faint: #8b9a95; --line: #e2e6e4;
  --accent: #0e7c6f; --accent-strong: #0b5e54; --accent-soft: #d8ece7;
  --amber: #a9691f; --amber-soft: #f4e6d0;
  --done-bg: #d8ece7; --done-ink: #0c5e54; --warn-bg: #f4e6d0; --warn-ink: #8a561a;
  --info-bg: #dde8f0; --info-ink: #2d5877; --pending-bg: #e6eae8; --pending-ink: #57655f;
  --danger: #b23b3b;
}
:root[data-theme="dark"] {
  --bg: #0d1411; --surface: #131e1a; --surface-2: #16221d;
  --ink: #eaf0ed; --muted: #94a39d; --faint: #6d7d78; --line: #233029;
  --accent: #34b6a5; --accent-strong: #7fd9cb; --accent-soft: #16302b;
  --amber: #e0a35c; --amber-soft: #38290f;
  --done-bg: #123a33; --done-ink: #74dccb; --warn-bg: #38290f; --warn-ink: #e6b473;
  --info-bg: #172836; --info-ink: #8fbbdc; --pending-bg: #1a2621; --pending-ink: #94a39d;
  --danger: #e07a7a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
       line-height: 1.55; -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -.02em; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* Botones */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans);
       font-size: 15px; font-weight: 600; border-radius: 10px; padding: 11px 18px;
       cursor: pointer; border: 1px solid transparent; transition: transform .08s ease, background .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: 14px 24px; font-size: 16px; }

/* Chips / badges */
.chip { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em;
        padding: 4px 10px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.chip.ok { background: var(--done-bg); color: var(--done-ink); }
.chip.warn { background: var(--warn-bg); color: var(--warn-ink); }
.chip.info { background: var(--info-bg); color: var(--info-ink); }
.chip.mute { background: var(--pending-bg); color: var(--pending-ink); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px;
        color: var(--ink); letter-spacing: -.02em; }
.logo svg { width: 26px; height: 26px; display: block; }

/* Utilidad de foco accesible */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }