/* MiradorTEC — Formulario de Innovación.
   Tokens tomados del design system oficial (Mirador TEC Design System):
   teal #00CCCC solo para acciones primarias y highlights. Nunca azul Material. */

/* ── Fuentes de marca (self-hosted) ─────────────────────────────────────── */
/* Montserrat es la tipografía funcional de la marca. Los títulos usan pesos
   600–700 (la app Mirador usa Montserrat w600–w800 para headlines). El wordmark
   Rounded Elegance de la marca aparece como logo en el header. */
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/Montserrat-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Marca */
  --teal-500: #00CCCC;
  --teal-700: #008080;
  --teal-800: #006060;
  --ink-900: #000604;
  --gray-700: #383838;
  --gray-500: #6B7280;
  --white: #FFFFFF;
  --gray-50: #F1F5F9;
  --gray-100: #F0F0F0;
  --gray-200: #E5E7EB;
  --gray-300: #D2D2D2;

  --bg: #F4F8F8;
  --surface: var(--white);
  --text-primary: var(--gray-700);
  --text-secondary: var(--gray-500);
  --border: var(--gray-200);
  --accent: var(--teal-500);
  --accent-strong: var(--teal-700);
  --accent-text: var(--teal-800);
  --accent-soft: rgba(0, 204, 204, 0.07);
  --accent-soft-strong: rgba(0, 204, 204, 0.15);
  --border-accent: rgba(0, 204, 204, 0.30);

  --success: #22C55E;
  --error: #EF4444;

  --font-display: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;

  /* 8pt grid */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 18px;
  --radius-pill: 999px;

  --shadow-card: 0 8px 14px rgba(0, 0, 0, 0.07);
  --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.13);
  --shadow-accent: 0 6px 14px rgba(0, 204, 204, 0.35);
  --focus-ring: 0 0 0 3px rgba(0, 204, 204, 0.35);

  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg);
  line-height: 1.5;
  font-size: 16px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.hero {
  background: var(--ink-900);
  color: var(--white);
  padding: var(--space-2xl) var(--space-lg) var(--space-xl);
  text-align: center;
}
.hero__logo {
  height: 34px;
  width: auto;
  margin-bottom: var(--space-lg);
}

/* ⚠️ MODIFICADOR, no un cambio de la regla de arriba: `.hero__logo` la usan
   también eventos, eventos-propuesta y sorteo con el wordmark suelto de
   MiradorTEC, que es de una línea y mide 34 px de alto. Esto es la marca del
   PROGRAMA (MiradorTEC Impulsa), que es un lockup de dos líneas: se mide por
   ANCHO, porque el alto depende de cuántas líneas tenga la versión que se use.

   Sólo la usa innovación, así que las otras tres apps no ven ninguna diferencia
   aunque sigan sirviendo la copia cacheada de esta hoja. */
.hero__logo--impulsa {
  height: auto;
  width: min(460px, 82vw);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
}
.hero__title .accent { color: var(--teal-500); }
.hero__lead {
  max-width: 620px;
  margin: 0 auto;
  color: #C7D2D2;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  font-weight: 300;
}
.hero__meta {
  margin-top: var(--space-lg);
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  justify-content: center;
  font-size: 0.8rem;
  color: #9FB3B3;
}
.hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero__meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal-500); }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.wrap {
  max-width: 760px;
  margin: -24px auto 0;
  padding: 0 var(--space-md) var(--space-2xl);
  position: relative;
}

form { margin: 0; }

.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  margin-bottom: var(--space-md);
}
.section__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.section__num {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-soft-strong);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 0.9rem;
  display: grid; place-items: center;
}
.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink-900);
}
.section__desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 0 var(--space-md);
}
/* El título de una tarjeta sin `.section__head` (la intro del programa) queda
   pegado al párrafo: el margen lo daba el flex del head, que ahí no existe. */
.section > .section__title { margin-bottom: var(--space-xs); }

/* ── Diagrama Incubadora → Aceleradora ────────────────────────────────────────
   Las dos instancias a las que MiradorTEC Impulsa deriva un proyecto. Son dos
   recuadros al mismo nivel con una flecha al medio: en escritorio uno al lado
   del otro, y EN CELULAR APILADOS CON LA FLECHA ROTADA 90° — las dos variantes
   de la imagen de referencia son el mismo diagrama en horizontal y en vertical,
   no dos diagramas distintos.

   El default es la columna y el `@media` agrega la fila (mobile-first): así el
   caso angosto, que es el mayoritario, no depende de sobrescribir nada. */
.impulsa-diag {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
}
.impulsa-box {
  flex: 1 1 0;
  border: 1.5px solid var(--border-accent);
  border-radius: var(--radius-card);
  background: var(--accent-soft);
  padding: var(--space-md);
}
.impulsa-box__t {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-text);
  margin: 0 0 6px;
}
.impulsa-box__p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-primary);
}
.impulsa-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--accent);
  /* Apunta hacia abajo mientras los recuadros están apilados. */
  transform: rotate(90deg);
}
.impulsa-arrow svg { width: 26px; height: 26px; display: block; }

@media (min-width: 620px) {
  /* `stretch` y no `center`: son dos instancias del mismo nivel, y dos
     recuadros de alto distinto se leen como si uno pesara más que el otro. La
     flecha sí se centra sola contra el alto resultante. */
  .impulsa-diag { flex-direction: row; align-items: stretch; gap: var(--space-sm); }
  .impulsa-arrow { transform: none; align-self: center; }
}

/* ── Campos ───────────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--space-lg); }
.field:last-child { margin-bottom: var(--space-xs); }

.field__label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-900);
  margin-bottom: 4px;
}
.field__label .req { color: var(--accent-strong); margin-left: 2px; }
.field__hint {
  color: var(--text-secondary);
  font-size: 0.82rem;
  margin: 0 0 var(--space-xs);
}
/* Un link dentro de una ayuda (la tabla de TRL del CNEA) tiene que verse como
   link: sin esto hereda el gris del hint y queda indistinguible del texto. */
.field__hint a { color: var(--accent-text); font-weight: 600; }

/* ── Teléfono en tres partes ──────────────────────────────────────────────────
   El +54 es fijo y no se pregunta, y separar característica de número hace
   imposible equivocarse de formato. Vive en esta hoja —la compartida de las
   páginas públicas— y no en la de cada app porque lo usan DOS formularios
   públicos: el Formulario 1 de eventos y la postulación de innovación. Estaba
   sólo en eventos/styles.css; dejar las dos bases es tener dos definiciones de
   lo mismo, que es cómo una se queda vieja.

   Las medidas de cada input van en la hoja de cada app, scopeadas por su id:
   los campos se llaman distinto en cada formulario. */
.tel-group { display: flex; align-items: stretch; gap: 8px; }
.tel-group__pais {
  display: inline-flex; align-items: center; padding: 0 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--accent-soft); color: var(--text-secondary);
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600;
  white-space: nowrap;
}
.tel-group input#whatsapp_area { flex: 0 1 90px; min-width: 68px; }
.tel-group input#whatsapp_numero { flex: 1 1 auto; min-width: 0; }

input[type="text"],
input[type="email"],
input[type="url"],
textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
input::placeholder, textarea::placeholder { color: #AEB6BE; }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
textarea { resize: vertical; min-height: 92px; line-height: 1.45; }

.counter {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 4px;
}
.counter.over { color: var(--error); font-weight: 600; }

/* ── Opciones (checkbox / radio como chips-card) ──────────────────────────── */
.options { display: grid; gap: var(--space-xs); }
.options.cols { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
/* Título de grupo DENTRO de una grilla de opciones (las verticales prioritarias
   de Impulsa y el resto): ocupa la fila entera. Nombre propio porque esta hoja
   la importan eventos, eventos-propuesta y sorteo, que no lo usan. */
.areas-grupo {
  grid-column: 1 / -1; margin: var(--space-sm) 0 0; font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-text);
}
.areas-grupo:first-child { margin-top: 0; }

.opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--white);
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
  user-select: none;
}
.opt:hover { border-color: var(--border-accent); background: var(--accent-soft); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt__box {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 1.5px solid #C4CDD5;
  border-radius: 6px;
  display: grid; place-items: center;
  transition: all 160ms var(--ease-out);
}
.opt--radio .opt__box { border-radius: 50%; }
.opt__box::after {
  content: "";
  opacity: 0;
  transition: opacity 140ms var(--ease-out);
}
.opt--check .opt__box::after {
  width: 6px; height: 10px;
  border: solid var(--white);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translateY(-1px);
}
.opt--radio .opt__box::after {
  width: 9px; height: 9px; border-radius: 50%; background: var(--white);
}
.opt__text { font-size: 0.92rem; line-height: 1.35; }
.opt__text small { display: block; color: var(--text-secondary); font-size: 0.8rem; margin-top: 1px; }

.opt input:checked ~ .opt__box { background: var(--accent); border-color: var(--accent); }
.opt input:checked ~ .opt__box::after { opacity: 1; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.opt input:focus-visible ~ .opt__box { box-shadow: var(--focus-ring); }

.opt.is-disabled { opacity: 0.45; cursor: not-allowed; }
.opt.is-disabled:hover { border-color: var(--border); background: var(--white); }

.opt-note {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}
.opt-note strong { color: var(--accent-text); }

/* Campo "Otra" que aparece condicionalmente */
.subfield { margin-top: var(--space-xs); }
.subfield[hidden] { display: none; }

/* ── Error inline ─────────────────────────────────────────────────────────── */
.field.has-error input,
.field.has-error textarea { border-color: var(--error); }
.field.has-error .opt { border-color: var(--error); }
.error-msg {
  display: none;
  color: var(--error);
  font-size: 0.8rem;
  margin-top: 6px;
  font-weight: 500;
}
.field.has-error .error-msg { display: block; }

/* ── Footer / submit ──────────────────────────────────────────────────────── */
.actions {
  margin-top: var(--space-lg);
  text-align: center;
}
.btn {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.02rem;
  border: none;
  border-radius: var(--radius-md);
  padding: 15px 40px;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms var(--ease-out);
}
.btn--primary {
  background: var(--accent);
  color: var(--ink-900);
  box-shadow: var(--shadow-accent);
}
.btn--primary:hover { background: #00E0E0; }
.btn--primary:active { transform: scale(0.97); }
.btn--primary:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; transform: none; }

.form-note {
  margin-top: var(--space-md);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.form-error-summary {
  display: none;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #B91C1C;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}
.form-error-summary.show { display: block; }

/* ── Estados de carga / éxito ─────────────────────────────────────────────── */
.state { display: none; }
.state.show { display: block; }

.success-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}
.success-card__icon {
  width: 72px; height: 72px;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  background: var(--accent-soft-strong);
  display: grid; place-items: center;
}
.success-card__icon svg { width: 34px; height: 34px; }
.success-card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--ink-900);
  margin: 0 0 var(--space-sm);
}
.success-card p { color: var(--text-secondary); max-width: 460px; margin: 0 auto var(--space-xs); }

.footer {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.footer a { color: var(--accent-text); text-decoration: none; }

.spinner {
  width: 20px; height: 20px;
  border: 2.5px solid rgba(0,6,4,0.25);
  border-top-color: var(--ink-900);
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Overlay de espera ──────────────────────────────────────────────────────
   Atenúa la pantalla, BLOQUEA el clic y dice qué está pasando mientras una
   escritura viaja. Existe porque en producción estas operaciones tardan de 2 a
   5 segundos —y la propuesta espera el envío SMTP, con un socketTimeout de 30 s—
   y hasta acá lo único que pasaba era `btn.disabled = true`. Quien acepta una
   propuesta desde el link del correo se quedaba mirando un cursor bloqueado sin
   saber si se colgó o si su respuesta llegó.

   z-index 200: por encima de todo lo que existe en el proyecto (20 topbar / 40
   modales / 60 toast y datepop / 100 lightbox).

   Geometría copiada de `.busy` en innovacion-admin/styles.css: son dos familias
   de CSS que no se cruzan, y lo que cambia entre ellas es la paleta, no la
   forma. Si se toca una, tocar la otra. */
.busy {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,6,4,0.55); cursor: progress;
}
.busy.show { display: flex; }
.busy__card {
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: 0 30px 80px rgba(0,6,4,0.4);
  padding: 26px 28px; width: 100%; max-width: 380px; text-align: center;
  /* Keyframe propio: el `pop` de la modal existe sólo en la hoja de paneles. */
  animation: busy-pop 180ms var(--ease-out);
}
@keyframes busy-pop { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.busy__msg {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--text-primary); margin: 0 0 16px;
}
.busy__bar {
  height: 6px; border-radius: var(--radius-pill); background: var(--gray-200);
  overflow: hidden; position: relative;
}
/* Se anima `transform` y no `left`: mover la posición recalcula layout en cada
   frame, y esto corre indefinidamente mientras dura la request. */
.busy__bar::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  border-radius: var(--radius-pill); background: var(--accent);
  animation: busy-sweep 1.15s ease-in-out infinite;
}
@keyframes busy-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
/* Aviso de demora. Vacío no ocupa lugar: la tarjeta no cambia de alto al
   aparecer el texto a los 8 s, sólo crece hacia abajo. */
.busy__demora {
  margin: 14px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary);
}
.busy__demora:empty { display: none; }

/* La barra que barre es una animación INFINITA, que es exactamente lo que esta
   preferencia pide evitar. El latido de opacidad no desplaza nada y sigue
   diciendo "esto está vivo", que es la información que hace falta acá. */
@media (prefers-reduced-motion: reduce) {
  .busy__card { animation: none; }
  .busy__bar::after { animation: busy-latido 1.8s ease-in-out infinite; width: 100%; transform: none; }
}
@keyframes busy-latido { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ── Toast ────────────────────────────────────────────────────────────────
   Aviso fijo al pie, visible sin importar dónde esté el scroll. Existe porque
   el resumen de error vive arriba del formulario: al tocar "Enviar" al pie de
   un formulario largo el aviso quedaba fuera de pantalla y parecía que no
   había pasado nada.

   Geometría y animación copiadas de `.toast` en innovacion-admin/styles.css:
   son dos familias de CSS que no se cruzan (nadie importa las dos), y lo que
   cambia entre ellas es la paleta, no la forma. Si se toca una, tocar la otra. */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  display: flex; align-items: center; gap: 14px;
  max-width: min(560px, calc(100vw - 32px));
  background: var(--ink-900); color: var(--white); padding: 12px 22px;
  border-radius: var(--radius-pill); font-size: 0.9rem; line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0, 6, 4, 0.3); opacity: 0; pointer-events: none;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out); z-index: 60;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.toast.err { background: var(--error); }
/* El texto va en un <span> propio y no en el nodo: `toast()` reescribe sólo ese
   span, porque un `textContent` sobre el contenedor se llevaría puesto el
   botón de cerrar. */
.toast__msg { flex: 1; }
.toast__x {
  flex: none; background: none; border: none; color: inherit; cursor: pointer;
  font: inherit; font-size: 1rem; line-height: 1; padding: 4px; opacity: 0.75;
}
.toast__x:hover { opacity: 1; }

@media (max-width: 520px) {
  .section { padding: var(--space-md) var(--space-md) var(--space-sm); }
  .options.cols { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  /* Pegado a los bordes: en un teléfono el ancho es lo que falta, no el alto. */
  .toast {
    left: 16px; right: 16px; bottom: 16px; max-width: none;
    transform: translateX(0) translateY(80px); border-radius: var(--radius-md);
  }
  .toast.show { transform: translateX(0) translateY(0); }
}