/* Pantallas de cuenta (PLAN D10): sobrias, legibles en el teléfono, claro/oscuro. */
:root {
  --fondo: #f6f7f5;
  --tarjeta: #ffffff;
  --texto: #1c2321;
  --suave: #5b6661;
  --borde: #dfe3e0;
  --acento: #1f7a4d;
  --acento-texto: #ffffff;
  --peligro: #b3261e;
  --ok-fondo: #e4f3ea;
  --error-fondo: #fbe9e7;
  --radio: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121614;
    --tarjeta: #1b211e;
    --texto: #e8ece9;
    --suave: #9aa5a0;
    --borde: #2c3531;
    --acento: #4cc38a;
    --acento-texto: #0d1410;
    --peligro: #f2837b;
    --ok-fondo: #183324;
    --error-fondo: #3a1f1c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.barra {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--borde); background: var(--tarjeta);
}
.marca { font-weight: 700; color: var(--texto); text-decoration: none; }
.marca span { color: var(--acento); }
.barra nav { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.barra nav a, .enlace { color: var(--texto); text-decoration: none; padding: 6px 0; }
.barra nav a:hover, .enlace:hover { color: var(--acento); }
.barra form { display: inline; margin: 0; }
.enlace { background: none; border: 0; font: inherit; cursor: pointer; }

main { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }

main a:not(.boton) { color: var(--acento); }

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px;
}
.tarjeta.angosta { max-width: 420px; margin: 0 auto; }
h1 { font-size: 1.4rem; margin: 0 0 8px; }
.suave { color: var(--suave); font-size: 0.9rem; }

.formulario { display: grid; gap: 6px; margin-top: 16px; }
.formulario label { font-weight: 600; margin-top: 8px; }
input[type="email"], input[type="password"] {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--texto); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 8px;
}
input:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

.boton {
  display: inline-block; margin-top: 12px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--acento-texto); background: var(--acento); border: 1px solid var(--acento); border-radius: 8px;
  text-decoration: none;
}
.boton.secundario { color: var(--acento); background: transparent; margin-top: 0; }
.boton.peligro { color: var(--peligro); background: transparent; border-color: var(--peligro); margin-top: 0; }

.lista { list-style: none; padding: 0; margin: 16px 0 0; }
.lista li {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 14px 0; border-top: 1px solid var(--borde);
}
.lista li > div { display: grid; }
.lista form { margin: 0; }

.aviso { padding: 10px 14px; border-radius: 8px; margin: 0 0 16px; }
.aviso.ok { background: var(--ok-fondo); }
.aviso.error { background: var(--error-fondo); }

.qr { max-width: 240px; margin: 16px 0; padding: 12px; background: #fff; border-radius: 8px; }
.qr svg { width: 100%; height: auto; display: block; }

@media (max-width: 480px) {
  .lista li { flex-direction: column; align-items: flex-start; }
}