/* CrediSan Control · base visual
   Colores y tipografía del manual de identidad. */

:root {
  --morado:        #662D91;
  --morado-oscuro: #4A1F6B;
  --morado-claro:  #8A4FC0;
  --amarillo:      #FFF200;
  --negro:         #000000;
  --blanco:        #FFFFFF;

  --texto:         #1A1420;
  --texto-suave:   #6B6274;
  --linea:         rgba(102, 45, 145, .14);
  --fondo:         #F7F5FA;

  --verde:         #1E8E3E;
  --ambar:         #B26A00;
  --rojo:          #C0392B;

  --radio:         16px;
  --sombra:        0 2px 16px rgba(74, 31, 107, .10);

  --fuente: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* `hidden` tiene que ganar siempre: cualquier regla que fije `display`
   (grid, flex, inline-flex) lo anula en silencio, y el elemento se queda
   a la vista aunque el código crea haberlo ocultado. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── Cabecera de marca ────────────────────────────────────────────── */
.marca {
  background: var(--morado);
  color: var(--blanco);
  padding: 2.5rem 1.25rem 2.75rem;
  text-align: center;
}

.marca__logo {
  width: min(280px, 72vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

.marca__slogan {
  margin: .85rem 0 0;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--amarillo);
}

/* ── Contenido ───────────────────────────────────────────────────── */
.contenido {
  max-width: 560px;
  margin: -1.5rem auto 3rem;
  padding: 0 1rem;
}

.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.5rem 1.25rem;
  margin-bottom: 1rem;
}

.tarjeta h2 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.tarjeta p { margin: 0 0 .75rem; color: var(--texto-suave); font-size: .92rem; }
.tarjeta p:last-child { margin-bottom: 0; }

/* ── Lista de estado ─────────────────────────────────────────────── */
.estado { list-style: none; margin: 0; padding: 0; }

.estado li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: .93rem;
}
.estado li:last-child { border-bottom: 0; padding-bottom: 0; }

.estado__icono {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700;
  color: var(--blanco);
  background: var(--texto-suave);
  margin-top: 1px;
}
.estado__icono[data-e="ok"]      { background: var(--verde); }
.estado__icono[data-e="aviso"]   { background: var(--ambar); }
.estado__icono[data-e="error"]   { background: var(--rojo); }
.estado__icono[data-e="espera"]  { background: var(--texto-suave); }

.estado__texto { flex: 1; min-width: 0; }
.estado__texto strong { display: block; font-weight: 600; }
.estado__texto span   { color: var(--texto-suave); font-size: .85rem; }

/* ── Botones ─────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 48px;
  padding: .8rem 1.25rem;
  border: 0; border-radius: 12px;
  background: var(--morado); color: var(--blanco);
  font-family: inherit; font-size: 1rem; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.boton:hover  { background: var(--morado-oscuro); }
.boton:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.boton[hidden] { display: none; }

.boton--amarillo { background: var(--amarillo); color: var(--negro); }
.boton--amarillo:hover { background: #E6DA00; }

/* ── Pie ─────────────────────────────────────────────────────────── */
.pie {
  text-align: center;
  padding: 0 1rem 2.5rem;
  color: var(--texto-suave);
  font-size: .8rem;
}

.etiqueta {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: rgba(102, 45, 145, .1);
  color: var(--morado);
  font-size: .75rem; font-weight: 600;
  margin-bottom: .75rem;
}

code {
  background: rgba(102, 45, 145, .08);
  padding: .1rem .35rem;
  border-radius: 5px;
  font-size: .85em;
}

@media (prefers-reduced-motion: no-preference) {
  .tarjeta { animation: subir .35s ease both; }
  @keyframes subir { from { opacity: 0; transform: translateY(8px); } }
}