/* La app del miembro.
 *
 * Ningún literal de color vive aquí: todo sale de los tokens, y hay una
 * prueba que lo fija. Es la diferencia entre aplicar el Design System y
 * parecerse a él tres pantallas, que es exactamente lo que pasó con el
 * microsite actual — Bootstrap de fábrica con un logo encima.
 */
@import url("tokens.css");
@import url("fuentes.css");

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  /* Mínimo 30% de espacio limpio: respiración es calidad. */
  padding-bottom: var(--space-9);
}

h1, h2 { font-family: var(--font-display); line-height: var(--leading-tight); margin: 0; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-lg); }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

main { max-width: 32rem; margin: 0 auto; padding: var(--space-5) var(--space-4); }

.tarjeta {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-card);
}

/* El saldo. Es lo primero que la persona viene a ver. */
.saldo { font-family: var(--font-display); font-size: var(--text-4xl);
         line-height: var(--leading-tight); }
.saldo-fecha { color: var(--text-muted); font-size: var(--text-sm); }

.apagado { color: var(--text-muted); }
.mal { color: var(--danger); }

/* El azul da 2.1:1 sobre crema: gráfico, nunca texto de cuerpo. Vive en
   bordes, barras y el disco del logo, y ahí cumple el 10% de área. */
.regla-azul { height: 3px; background: var(--brand-primary); border: 0;
              border-radius: var(--radius-pill); margin: var(--space-5) 0; }

button, .boton {
  font: inherit;
  background: var(--brand-primary);
  color: var(--mm-crema);
  border: 0;
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  min-height: 44px;                 /* área táctil */
  transition: background var(--t-normal) ease;
}
button:hover, .boton:hover { background: var(--brand-primary-hover); }
button.sobrio, .boton.sobrio { background: transparent; color: var(--text-body);
                               border: 1px solid var(--border-strong); }
.boton { display: inline-block; text-decoration: none; }

/* Lo que se va a cancelar al salir del programa, con el número por
   delante. Es la confirmación de verdad de esa pantalla. */
.se-cancela { list-style: none; padding: 0; margin: var(--space-4) 0;
              font-family: var(--font-display); font-size: var(--text-lg); }
.se-cancela li { padding: var(--space-2) 0;
                 border-bottom: 1px solid var(--border-subtle); }

input, select {
  font: inherit; width: 100%; min-height: 44px;
  padding: var(--space-3);
  background: var(--surface-card);
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
label { display: block; margin: var(--space-4) 0 var(--space-1);
        font-size: var(--text-sm); color: var(--text-muted); }

/* El foco no depende solo del color. */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* El logo de Membership va sobre oscuro, nunca directo sobre crema. */
.bloque-membership { background: var(--surface-inverse); color: var(--text-inverse);
                     border-radius: var(--radius-md); padding: var(--space-5); }
.bloque-membership .sello { color: var(--mm-membership); }

/* Navegación inferior, las cuatro pestañas que el miembro ya conoce. */
.pestanas { position: fixed; inset: auto 0 0 0; display: flex;
            background: var(--surface-card); border-top: 1px solid var(--border-subtle); }
.pestanas a { flex: 1; text-align: center; padding: var(--space-3) 0;
              min-height: 44px; text-decoration: none; color: var(--text-muted);
              font-size: var(--text-xs); transition: color var(--t-rapida) ease; }
.pestanas a[aria-current="page"] { color: var(--text-body); }

/* Movimiento: 150–200ms, y nada para quien pidió que no se mueva. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}