/* ============================================================================
   GridYX · web v2 · acceso.css
   Estilos propios de acceso.html (tema claro en toda la página: <html data-gx-theme="light">,
   de modo que cabecera y pie siguen el tema; solo el panel de descargas es oscuro).
   Se carga después de styles.css. Solo composición de página: fotografía fija, cabecera,
   descargas e impresión. Los campos de formulario, los estados y la lista de preguntas viven en
   styles.css (bloques «Formulario» y «Preguntas»): una sola fuente de verdad. (Nunca escribir un
   cierre de comentario dentro de esta cabecera.) Solo tokens --gx-* y alias --web-*; sin hex nuevos.
   ========================================================================== */

/* ---------- Composición: flujo a la izquierda, fotografía fija a la derecha ---------- */
.acceso { display: grid; gap: 0; }
.acceso__photo { order: -1; margin-top: 24px; }
.acceso__photo .media__view { height: 40svh; min-height: 280px; max-height: 480px; }
.acceso__flow { min-width: 0; }
.acceso__head { padding-top: 48px; padding-bottom: 48px; }
.acceso__head + .section { border-top: 1px solid var(--web-hairline); }
.acceso__cierre { margin-top: 40px; color: var(--gx-text-secondary); }

@media (min-width: 640px) {
  .acceso__photo .media__view { height: auto; min-height: 0; max-height: none; --ratio: 3 / 2; }
}
@media (min-width: 768px) {
  .acceso__head { padding-top: var(--web-section); padding-bottom: 64px; }
}
@media (min-width: 1024px) {
  .acceso {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--web-gutter);
    align-items: start;
  }
  .acceso__flow { grid-column: 1 / 8; grid-row: 1; }
  .acceso__photo {
    order: 0;
    grid-column: 9 / 13;
    grid-row: 1;
    margin-top: 24px;
    position: sticky;
    top: calc(var(--web-header) + 24px);
    height: calc(100svh - var(--web-header) - 48px);
    min-height: 480px;
  }
  .acceso__photo .media__view { --ratio: auto; aspect-ratio: auto; }
}
@media (min-width: 1440px) {
  /* Página de formulario en columna 7/12: ritmo de 96 en lugar de 128 */
  .acceso__flow { --web-section: 96px; }
}
/* Pantallas bajas: la columna deja de ser fija y vuelve a proporción vertical */
@media (min-width: 1024px) and (max-height: 699px) {
  .acceso__photo { position: static; height: auto; min-height: 0; }
  .acceso__photo .media__view { --ratio: 3 / 4; aspect-ratio: 3 / 4; }
}

/* ---------- Formulario: solo composición de página ---------- */
.form { margin-top: 40px; }
.form input.w3f-botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#enviado { display: none; }
#enviado:target { display: block; }
.form__sent { margin-top: 24px; }
@media (max-width: 767px) {
  /* La navegación sin JS ocupa una segunda fila en la cabecera móvil. */
  html:not(.js) #enviado { scroll-margin-top: 48px; }
}
/* Sin JS: alternativa al envío nativo; con JS se ofrece en el estado de error. */
.js .acceso__nojs { display: none; }
.acceso__nojs { margin-top: 16px; max-width: 40em; }
.acceso__nojs a { color: inherit; }

/* ---------- Descargas: panel oscuro plano · lista de dos filas con hairline · ilustración rotulada debajo ---------- */
.descargas__panel { padding: 0; overflow: hidden; color: var(--gx-text-primary); }
.descargas__head { padding: 32px 24px 0; }
.descargas__list { list-style: none; margin: 32px 0 0; padding: 0 24px; }
.descarga {
  display: grid;
  gap: 8px 16px;
  padding: 24px 0;
  border-top: 1px solid var(--web-hairline);
}
.descarga__num { grid-column: 1; }
.descarga__name { font-weight: 600; }
.descarga__plat { margin-top: 4px; color: var(--gx-text-secondary); }
.descarga__text { margin-top: 8px; color: var(--gx-text-secondary); max-width: 36em; }
.descarga__state { display: grid; gap: 8px; justify-items: start; }
.descarga__state p { margin: 0; color: var(--gx-text-secondary); max-width: 36em; }
.descargas__fig { margin-top: 32px; }
.descargas__fig .media__view { --ratio: 16 / 7; }
.descargas__aviso { margin-top: 32px; }
@media (min-width: 640px) {
  .descargas__head { padding: 40px 32px 0; }
  .descargas__list { padding: 0 32px; }
  /* numeral | info; el estado baja a una segunda fila bajo la info */
  .descarga { grid-template-columns: 3ch minmax(0, 1fr); }
  .descarga__num { grid-row: 1 / 3; }
  .descarga__state { grid-column: 2; }
  .descargas__fig .media__view { --ratio: 16 / 6; }
}
@media (min-width: 1280px) {
  .descargas__head { padding: 48px 40px 0; }
  .descargas__list { padding: 0 40px; }
  /* numeral | info | estado, todo en una fila */
  .descarga { grid-template-columns: 3ch minmax(0, 1.2fr) minmax(0, 1fr); }
  .descarga__num { grid-row: 1; }
  .descarga__info { grid-column: 2; grid-row: 1; }
  .descarga__state { grid-column: 3; grid-row: 1; }
}

/* ---------- Impresión ---------- */
@media print {
  .acceso { display: block; }
  .acceso__photo { position: static; height: auto; }
  .form__result, .acceso__nojs { display: none !important; }
  .faq__item { break-inside: avoid; }
}