/* Olimpiadas STEM — paginas embebibles. Fondo blanco, titulos y bordes en
   #1e3876, Open Sans; el texto corriente en negro y gris. */
:root {
  --stem: #1e3876;
  --stem-suave: #e8ecf5;
  --texto: #222;
  --gris: #555;
  --linea: #c9d1e3;
  --ok: #1b7a43;
  --ok-fondo: #e7f5ec;
  --error: #b3261e;
  --error-fondo: #fdecea;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #fff; }
body {
  font-family: 'Open Sans', Arial, sans-serif; color: var(--texto);
  font-size: 15px; line-height: 1.45; padding: 16px;
}
h2, h3, .titulo { font-family: 'Open Sans', Arial, sans-serif; color: var(--stem); font-weight: 600; }

/* ── Formulario ───────────────────────────────────────────── */
/* Embebido: el formulario ocupa todo el ancho del iframe. */
.stem-form { width: 100%; }
.seccion {
  border: 1px solid var(--stem); border-radius: 8px; padding: 16px 18px 6px; margin-bottom: 16px;
}
.seccion h3 { margin: 0 0 12px; font-size: 16px; }
.opc-titulo { font-weight: 400; color: var(--gris); font-size: 13px; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fila.tres { grid-template-columns: 1.2fr 1fr 1.2fr; }
.campo { margin-bottom: 14px; }
.campo label, .campo .rotulo { display: block; font-size: 14px; color: var(--texto); margin-bottom: 5px; }
.campo .opc { color: var(--gris); font-size: 12px; }
.campo input[type=text], .campo input[type=email], .campo input[type=tel],
.campo input[type=number], .campo textarea {
  width: 100%; font: inherit; color: var(--texto); padding: 9px 11px;
  border: 1px solid var(--linea); border-radius: 6px; background: #fff;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #9aa3b5; opacity: 1; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--stem);
  box-shadow: 0 0 0 3px rgba(30,56,118,.15); }
.opciones { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 2px; }
.opciones label { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.opciones input, .acepto input { accent-color: var(--stem); width: 17px; height: 17px; }
.acepto { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.stem-form a { color: var(--stem); font-weight: 600; }
.stem-form a:hover { text-decoration: underline; }
.campo.mal input, .campo.mal textarea { border-color: var(--error); }
.campo .msj { display: none; color: var(--error); font-size: 12.5px; margin-top: 4px; }
.campo.mal .msj { display: block; }
.trampa { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* Botón de inscripción: lados redondeados (forma de píldora) y #2853b9. */
.boton {
  font: inherit; font-weight: 600; color: #fff; background: #2853b9; border: 0;
  border-radius: 999px; padding: 11px 34px; cursor: pointer; font-size: 15px;
}
.boton:hover:not(:disabled) { filter: brightness(1.15); }
.boton:disabled { opacity: .55; cursor: wait; }
.aviso { border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; font-size: 14.5px; display: none; }
.aviso.ok { display: block; background: var(--ok-fondo); color: var(--ok); border: 1px solid #b6e0c5; }
.aviso.error { display: block; background: var(--error-fondo); color: var(--error); border: 1px solid #f3c1bc; }
.aviso strong { display: block; font-size: 16px; margin-bottom: 2px; }

/* ── Lista de inscritos ───────────────────────────────────── */
/* Embebido: la lista ocupa todo el ancho del iframe y su alto lo da el contenido. */
.stem-lista { width: 100%; }
.resumen { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cifra { flex: 1 1 140px; border: 1px solid var(--stem); border-radius: 8px; padding: 10px 14px; }
.cifra .n { font-size: 26px; font-weight: 700; color: var(--stem); line-height: 1.1; }
.cifra .t { font-size: 13px; color: var(--gris); }
table.inscritos { width: 100%; border-collapse: collapse; border: 1px solid var(--stem); }
table.inscritos th {
  background: var(--stem); color: #fff; font-weight: 600; text-align: left;
  font-size: 13.5px; padding: 9px 12px;
}
table.inscritos td { padding: 9px 12px; border-top: 1px solid var(--linea); font-size: 14px; }
table.inscritos td.num, table.inscritos th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.inscritos td.fecha { color: var(--gris); white-space: nowrap; }
table.inscritos tr.nuevo td { animation: resalta 2.5s ease; }
@keyframes resalta { from { background: var(--stem-suave); } to { background: transparent; } }
.vacio { color: var(--gris); text-align: center; padding: 18px; }
.pie { color: var(--gris); font-size: 12px; margin-top: 8px; text-align: right; }

/* ── Fondo oscuro de la lista de inscritos (app/prueba/fondo.md, 2-oct) ──
   Solo para inscritos.php; el formulario sigue en blanco. Sobre este azul
   casi negro, el texto pasa a tonos claros para que se lea. */
html:has(body.pagina-inscritos) { background: #050B18; }
body.pagina-inscritos {
  min-height: 100vh;
  background-color: #050B18;
  background-image: radial-gradient(1100px 620px at 82% -6%, rgba(30,136,229,0.20), transparent 60%), radial-gradient(900px 560px at 10% 110%, rgba(21,101,192,0.16), transparent 60%), linear-gradient(180deg, #050B18 0%, #0A1830 55%, #0E2244 100%);
  color: #e8eefb;
}
.pagina-inscritos .cifra { border-color: rgba(120,160,230,.35); background: rgba(255,255,255,.04); }
.pagina-inscritos .cifra .n { color: #ffffff; }
.pagina-inscritos .cifra .t { color: #a9b8d6; }
.pagina-inscritos table.inscritos { border-color: rgba(120,160,230,.35); background: rgba(255,255,255,.03); }
.pagina-inscritos table.inscritos th { background: #2853b9; }
.pagina-inscritos table.inscritos td { border-top-color: rgba(255,255,255,.10); color: #e8eefb; }
.pagina-inscritos table.inscritos td.fecha { color: #a9b8d6; }
.pagina-inscritos .vacio, .pagina-inscritos .pie { color: #a9b8d6; }
@keyframes resalta-oscuro { from { background: rgba(40,83,185,.45); } to { background: transparent; } }
.pagina-inscritos table.inscritos tr.nuevo td { animation: resalta-oscuro 2.5s ease; }

@media (max-width: 640px) {
  body { padding: 10px; }
  .fila, .fila.tres { grid-template-columns: 1fr; }
  table.inscritos td.fecha { white-space: normal; }
}