:root { color-scheme: light dark; --fondo: #f4f1ea; --tarjeta: #ffffff; --tinta: #1b1b1b; --acento: #0b5d4b; --suave: #5b5b5b; --filete: #d9d6cf;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; }
@media (prefers-color-scheme: dark) { :root:not([data-marca]) { --fondo: #14171a; --tarjeta: #1d2125; --tinta: #eceae4; --acento: #5fd1b3; --suave: #a4a7aa; --filete: #33383d; } }
/* Con la marca de un cliente la bienvenida va siempre en claro: sus colores corporativos están pensados para fondo claro. */
:root[data-marca] { color-scheme: light; --fondo: #f5f5f0; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; grid-template-rows: 1fr auto; background: var(--fondo); color: var(--tinta);
  font: 17px/1.5 var(--sans); }
main { display: grid; place-items: center; padding: 2rem 1rem; }
.tarjeta { width: min(100%, 28rem); background: var(--tarjeta); border: 1px solid var(--filete); border-top: 6px solid var(--acento);
  border-radius: 10px; padding: 2.4rem 2.2rem 2rem; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
#logo { display: block; height: 64px; width: auto; margin: 0 0 1.6rem; }
#logo[hidden] { display: none; }
h1 { margin: 0; font: 700 1.9rem/1.15 var(--sans); color: var(--acento); letter-spacing: -0.01em; }
.sub { margin: .4rem 0 1.8rem; color: var(--suave); font-size: .95rem; }
#estado { margin: 0 0 1rem; }
button { font: 600 1rem/1 var(--sans); width: 100%; padding: .95rem 1.4rem; border: 2px solid var(--acento); background: var(--acento);
  color: #fff; border-radius: 8px; cursor: pointer; transition: filter 150ms ease; }
@media (hover: hover) and (pointer: fine) { button:hover { filter: brightness(0.88); } }
button:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.nota { margin: 1.6rem 0 0; font-size: .82rem; color: var(--suave); }
footer { text-align: center; padding: 1rem; font-size: .78rem; color: var(--suave); }
#estado.error { color: #b3261e; font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-marca]) #estado.error { color: #ff8a80; } }