/* Explicación: Ventanas de consulta rápida: tamaño limitado al área visible, fondo oscurecido y controles accesibles. */
.information-dialog {
  width: min(620px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: clamp(20px, 5vw, 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--green);
  border-radius: 18px;
  background: #f8f9ff;
  color: var(--navy);
  box-shadow: 0 24px 80px #0d1c3240;
}
/* Explicación: Oscurece el fondo cuando el diálogo nativo está abierto. */
.information-dialog::backdrop { background: #0d1c32b3; }
.information-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.information-dialog-heading .eyebrow { margin: 0; }
.information-dialog-close { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--mint); color: var(--navy); font-size: 28px; }
.information-dialog h2 { font-size: clamp(24px, 5vw, 32px); }
.information-dialog h3 { font-size: 19px; margin: 24px 0 8px; }
.information-dialog-content { font-size: 16px; line-height: 1.65; }
.information-dialog-content ul, .information-dialog-content ol { padding-left: 24px; }
.information-dialog-content li + li { margin-top: 12px; }
.information-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.information-dialog-back { padding: 12px 20px; min-height: 44px; border: 1px solid var(--green); border-radius: 5px; background: transparent; color: var(--navy); }
.information-dialog :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.information-dialog h2:focus { outline: none; }
/* Explicación: Ajusta distribución y tamaños para esta condición de pantalla. */
@media (max-width: 480px) {
  .information-dialog-actions > * { width: 100%; }
}