/*
  responsive.css — Ajustes finos transversales que no encajan naturalmente
  dentro de components.css/home.css/account.css (esos ya llevan sus propias
  media queries junto a cada componente). Aquí van reglas de última pasada
  y breakpoints "raros" (viewports muy pequeños o muy grandes).

  Breakpoints usados en todo el proyecto:
    375 / 390 / 430   -> móvil
    768               -> tablet vertical
    1024              -> tablet horizontal / laptop pequeño
    1280 / 1440       -> escritorio
    1920              -> escritorio grande
*/

/* Viewports muy pequeños (<= 375px): reducir tamaños de fuente grandes */
@media (max-width: 375px) {
  :root {
    --fs-3xl: 2.25rem;
    --fs-4xl: 2.75rem;
  }
  .btn {
    padding: 12px 20px;
  }
}

/* Tablet vertical */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .hide-on-desktop {
    display: none !important;
  }
}

/* Escritorio grande: evitar que el contenido se sienta perdido */
@media (min-width: 1920px) {
  :root {
    --container-max: 1320px;
  }
}

/* Nunca permitir scroll horizontal accidental */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.table-scroll,
pre {
  max-width: 100%;
}