/* ==========================================================================
   ACCESO — la ventana del ícono de usuario de la cabecera (partes/acceso.php), 2026-10-04.
   Es la ventana del sistema (.ventana, sistema/componentes.css): el velo, la entrada, la cruz, el ícono
   y el título vienen de allí. Aquí solo lo suyo: los dos botones, el bloque «¿Ya tienes cuenta?» y la
   nota. Se carga en todas las páginas porque la cabecera sale en todas. Regla: SOLO tokens (--mel-*).
   ========================================================================== */
@layer componentes {
  /* Los dos botones, uno encima del otro y a todo el ancho: en un teléfono la etiqueta entera cabe en
     una línea y el dedo no tiene que apuntar. 10 entre ellos, como en .botones-par. */
  .acceso__botones { display: grid; gap: var(--mel-espacio-dentro); margin-top: var(--mel-espacio-titulo); }
  /* El segundo es de contorno: el mismo violeta que el primero, pero sin relleno, para que «Publica tu
     anuncio» sea lo primero que se ve y este se lea como la otra opción. Filo de 1 px y no de 2: el
     grueso es solo para el foco y lo seleccionado (fundamentos §7). Al tocarlo se tiñe (fundamentos §8). */
  .acceso__secundario { border: var(--mel-borde-fino) solid var(--mel-color-marca); }
  .acceso__secundario:active { background: var(--mel-color-marca-suave); }

  /* Quien ya tiene cuenta: un bloque aparte, tras una línea, con la acción de texto del sistema
     (.enlace-accion). Es la tercera en peso porque quien vuelve ya sabe a qué viene. */
  .acceso__cuenta { margin-top: var(--mel-espacio-titulo); padding-top: var(--mel-espacio-grupo); border-top: var(--mel-borde-fino) solid var(--mel-color-borde); }
  .acceso__pregunta { font-size: var(--mel-texto-pequeno); line-height: var(--mel-interlineado-pequeno); color: var(--mel-color-texto-secundario); }
  /* La fila entera responde al dedo, con el mínimo táctil (la acción de texto mide 24). */
  .acceso__entrar { min-block-size: var(--mel-tactil-min); }
  .acceso__entrar:hover, .acceso__entrar:active { text-decoration: underline; text-underline-offset: var(--mel-espacio-optico); }

  .acceso__nota { margin-top: var(--mel-espacio-grupo); }

  /* Con la ventana abierta, la página de detrás no se desplaza. <dialog> deja inerte el fondo, pero no
     lo sujeta: medido en el listado de Guayaquil, la rueda sobre el velo lo bajaba 500 px; con esto, 0.
     Es una regla sobre :root dentro de la capa y SÍ se aplica (medido; ver fundamentos §1.5, que lo
     prohíbe para body). `scrollbar-gutter` guarda el hueco de la barra en escritorio, para que la
     página no salte a la derecha al abrir. */
  :root:has(.acceso[open]) { overflow: hidden; scrollbar-gutter: stable; }
  .acceso { overscroll-behavior: contain; }
}