/* [SCP-APP] Tokens del sistema de diseno de Ofertec (los da el PO, 07-11). Claro por defecto; oscuro si Telegram o el sistema lo piden. */
@font-face { font-family: "Sora"; src: url("sora.ttf") format("truetype"); font-weight: 100 800; font-style: normal; font-display: swap; }
:root {
  --brand-deep: #12343d; --brand-orange: #d9702a; --brand-teal: #1f4e5a;
  --accent: #b4500b; --on-accent: #ffffff; --accent-soft: #f2a46b;
  --ink: #0e2329; --ink-muted: #5f7279; --ground: #f2f3f5; --surface: #ffffff;
  --mist: #b9cdd2; --line: #e1e3e8; --warn-ink: #8a4b00; --warn-bg: #fff1e0;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --r-marca: 8px; --r-boton: 14px; --r-tarjeta: 16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --brand-teal: #7fa9b4; --accent: #f2a46b; --on-accent: #0e2329; --accent-soft: #b4500b;
    --ink: #eef2f4; --ink-muted: #a9b8bd; --ground: #0e1c22; --surface: #18303a;
    --mist: #3a5560; --line: #2a3f48; --warn-ink: #f2b880; --warn-bg: #3a2a18;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --brand-teal: #7fa9b4; --accent: #f2a46b; --on-accent: #0e2329; --accent-soft: #b4500b;
  --ink: #eef2f4; --ink-muted: #a9b8bd; --ground: #0e1c22; --surface: #18303a;
  --mist: #3a5560; --line: #2a3f48; --warn-ink: #f2b880; --warn-bg: #3a2a18;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); }
body {
  font-family: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.5;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: max(var(--s6), env(safe-area-inset-top)) max(var(--s4), env(safe-area-inset-right)) max(var(--s6), env(safe-area-inset-bottom)) max(var(--s4), env(safe-area-inset-left));
}
.caja { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-tarjeta); padding: var(--s6); max-width: 28rem; width: 100%; margin: 0 auto; }
.marca { display: inline-block; margin: 0 0 var(--s4); padding: var(--s1) var(--s2); border-radius: var(--r-marca); background: var(--brand-deep); color: #ffffff; font-weight: 750; letter-spacing: -0.03em; }
h1 { margin: 0 0 var(--s3); font-weight: 750; letter-spacing: -0.03em; font-size: 28px; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
h1 .acento { color: var(--brand-orange); }
.estado { margin: 0; color: var(--ink-muted); }
.estado.aviso { color: var(--warn-ink); background: var(--warn-bg); border-radius: var(--r-marca); padding: var(--s3) var(--s4); }
.pie { text-align: center; margin-top: var(--s5); color: var(--ink-muted); font-size: 12px; }
.pie a { color: var(--brand-teal); }