/* Hoja de prueba. Si la página se ve con estilo, el CSS por ruta absoluta llega. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Figtree:wght@300;400;600&display=swap");

:root{
  --violeta:#480484; --orquidea:#773DAB; --nacar:#F5E9FF;
  --oro:#FFCD6B; --tinta:#2B1240; --menta:#58B884; --alerta:#DF3A3A;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:Figtree,system-ui,"Segoe UI",sans-serif;
  font-weight:300; color:var(--tinta); background:var(--nacar);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:2rem 1.25rem; line-height:1.6;
}

main{width:100%;max-width:38rem;background:#fff;padding:2.5rem 2rem;
  border-radius:3px;box-shadow:0 1px 2px rgba(43,18,64,.04),0 12px 32px -20px rgba(43,18,64,.28)}

.rotulo{letter-spacing:.18em;text-transform:uppercase;font-size:.62rem;
  font-weight:600;color:var(--orquidea)}

h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:2.2rem;line-height:1.1;color:var(--violeta);margin:.75rem 0 0}

.intro{margin-top:.9rem;color:rgba(43,18,64,.7);font-size:.95rem}

#checks{list-style:none;margin-top:1.75rem;border-top:1px solid rgba(72,4,132,.14)}
#checks li{padding:.85rem 0;border-bottom:1px solid rgba(72,4,132,.14);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem}
#checks b{font-weight:600;color:var(--violeta);font-size:.95rem}
#checks small{flex-basis:100%;font-size:.8rem;color:rgba(43,18,64,.55)}
code{font-family:ui-monospace,Consolas,monospace;font-size:.95em;
  background:rgba(72,4,132,.06);padding:.05rem .3rem;border-radius:3px}

.estado{margin-left:auto;font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.2rem .6rem;border-radius:99px;white-space:nowrap}
.ok{background:rgba(88,184,132,.16);color:#1c6440;border:1px solid rgba(88,184,132,.45)}
.fallo{background:rgba(223,58,58,.1);color:#a11f1f;border:1px solid rgba(223,58,58,.4)}
.esperando{background:rgba(72,4,132,.07);color:var(--orquidea);border:1px solid rgba(72,4,132,.2)}

.pie{margin-top:1.75rem;font-size:.75rem;color:rgba(43,18,64,.45)}
#url{font-family:ui-monospace,Consolas,monospace}
