/* Solicitud de evaluación de Nonnos (§73). Los colores y las fuentes son los de
   `src/raiz.css` y `src/fuentes.css`, copiados y no importados: esta página no
   pasa por el bundler. */

@font-face {
  font-family: "DM Sans";
  font-weight: 400 700;
  font-display: swap;
  src: url("/fuentes/DMSans-400-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-weight: 500 700;
  font-display: swap;
  src: url("/fuentes/SpaceGrotesk-500-700-latin.woff2") format("woff2");
}

:root {
  --navy: #12245c;
  --cyan: #00a6de;
  --paper: #eef3f7;
  --card: #ffffff;
  --line: #d9e2ea;
  --ink: #0f1b33;
  --ink-soft: #5c6b85;
  --error: #d9484f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 "DM Sans", system-ui, sans-serif;
}

/* Las dos marcas a la misma altura: 64 px en el teléfono (Nonnos queda en
   ~175 px de ancho, y las dos entran en 375 px con aire), 80 px desde tablet. */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px;
  --alto-logo: 64px;
}
@media (min-width: 600px) { .cabecera { --alto-logo: 80px; } }
.logo { display: block; height: var(--alto-logo); width: auto; }
.logo-nonnos, .logo-nonnos img { display: block; height: var(--alto-logo); width: auto; }
.separador { width: 1px; align-self: stretch; margin: 8px 0; background: var(--line); }

.hoja {
  max-width: 560px;
  margin: 0 auto 48px;
  padding: 24px 16px;
  background: var(--card);
  border-radius: 12px;
}

h1, h2 { font-family: "Space Grotesk", system-ui, sans-serif; color: var(--navy); }
h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 0 0 8px; }
.bajada { margin: 0 0 16px; color: var(--ink-soft); }
.intro p { margin: 0 0 12px; }
.instruccion { margin: 20px 0 16px; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 500; }

fieldset { border: 0; padding: 0; margin: 0 0 20px; }
legend { font-weight: 700; margin-bottom: 8px; color: var(--navy); }

label { display: block; margin-bottom: 12px; font-weight: 500; }
input, select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}
input:focus, select:focus { outline: 2px solid var(--cyan); border-color: transparent; }
input[aria-invalid="true"], select[aria-invalid="true"] { border: 2px solid var(--error); }
input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--error); }

.ayuda { display: block; font-size: 0.875rem; color: var(--ink-soft); font-weight: 400; }
.error { display: block; color: var(--error); font-size: 0.875rem; font-weight: 400; min-height: 1em; }
.error.general { margin: 8px 0; }

.oculto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.aviso {
  margin: 8px 0 16px;
  padding: 16px;
  background: var(--paper);
  border-radius: 8px;
  font-size: 0.9rem;
}
.aviso p { margin: 0 0 8px; }
.aviso details { margin: 0 0 4px; }
.aviso summary { cursor: pointer; color: var(--navy); font-weight: 600; }
.aviso details[open] summary { margin-bottom: 8px; }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; margin: 12px 0 0; }
.casilla input { width: auto; margin-top: 4px; }

button, .boton {
  display: block;
  width: 100%;
  padding: 14px;
  font: 600 1rem "DM Sans", system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--navy);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
[hidden] { display: none !important; }

button:disabled { background: var(--line); color: var(--ink-soft); cursor: not-allowed; }

.cierre { margin: 16px 0 0; color: var(--ink-soft); }
.otra { margin: 24px 0 0; text-align: center; }
.otra a { color: var(--navy); font-weight: 600; }
/* Mientras confirma un pago, el enlace no compite con el mensaje. */
.otra.chica { margin-top: 40px; font-size: 0.85rem; }
.otra.chica a { color: var(--ink-soft); font-weight: 400; }
.actualizando { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 0.9rem; }
.girando {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--cyan);
  animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 3s; } }