/*
 * DISERC Phase 4 — Responsive + Accessibility hardening
 * No animation systems are changed in this phase.
 */

/* Stable keyboard focus */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan, #5ce1e6);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan, #5ce1e6) 18%, transparent);
}

/* Do not allow media to exceed its containing block */
img, svg, video, canvas {
  max-width: 100%;
}

/* Touch target baseline */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  min-height: 44px;
}

/* Accessible hidden utility */
.sr-only {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/* Prevent accidental horizontal overflow from decorative content */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

/* Safer full-width controls on narrow screens */
@media (max-width: 700px) {
  .container,
  .contenedor,
  .section-container {
    width: min(100% - 32px, 1200px);
  }

  input,
  select,
  textarea {
    max-width: 100%;
  }

  .boton,
  .btn,
  .ds-btn {
    max-width: 100%;
  }
}

/* Respect safe areas on modern mobile devices */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Keep reduced-motion behavior centralized without changing existing animation definitions. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

/* Windows high contrast / forced colors */
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid CanvasText;
    box-shadow: none;
  }

  button,
  input,
  select,
  textarea {
    forced-color-adjust: auto;
  }
}