/* ============================================================================
   AQUADATE · responsive-base.css (v4)
   Fundamentos responsive compartidos. Se enlaza AL FINAL de <head> en cada pagina
   para ganar empates de especificidad. Solo reglas aditivas y de baja especificidad.
   Paleta y tipografia (Manrope) NO se tocan. Para revertir: quitar el <link> de las paginas.
   ============================================================================ */
:root {
  --aq-tap: 44px;                                   /* area tactil minima */
  --aq-foco: #00D2B5;                               /* aqua oficial */
  --aq-safe-t: env(safe-area-inset-top, 0px);
  --aq-safe-r: env(safe-area-inset-right, 0px);
  --aq-safe-b: env(safe-area-inset-bottom, 0px);
  --aq-safe-l: env(safe-area-inset-left, 0px);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-wrap: break-word; }

/* Medios nunca mas anchos que su contenedor */
img, video, canvas { max-width: 100%; }

/* Codigo: el bloque se desplaza, el codigo en linea se parte (no ensancha la pagina) */
pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
code, kbd, samp { overflow-wrap: anywhere; }
pre code { overflow-wrap: normal; }
/* codigo en linea: se parte en vez de ensanchar la pagina */
:not(pre) > code { white-space: pre-wrap; }

/* Ayuda reutilizable: tabla con desplazamiento horizontal contenido */
.tabla-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Alturas de viewport estables en moviles con barra de direcciones que se esconde */
@supports (min-height: 100dvh) { body { min-height: 100dvh; } }

/* Foco visible para teclado (no afecta al toque ni al raton) */
:focus-visible { outline: 3px solid var(--aq-foco); outline-offset: 2px; }

/* Controles tactiles: areas de al menos 44 px y campos de 16 px (evita el zoom automatico de Safari) */
@media (max-width: 768px), (pointer: coarse) {
  button, [role="button"], summary, select,
  input[type="button"], input[type="submit"], input[type="reset"] { min-height: var(--aq-tap); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]),
  select, textarea { font-size: 16px; min-height: var(--aq-tap); }
  textarea { min-height: 88px; }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Alto contraste del sistema */
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  button, input, select, textarea { border: 1px solid ButtonText; }
}

/* Utilidades para barras fijas con zona segura (iPhone con muesca / barra de gestos) */
.aq-safe-bottom { padding-bottom: calc(16px + var(--aq-safe-b)); }
.aq-safe-top { padding-top: calc(12px + var(--aq-safe-t)); }

/* ===== Controles pequenos y enlaces de navegacion (solo movil / tactil) ===== */
@media (max-width: 768px), (pointer: coarse) {
  /* Botones redondos o de icono: no se encogen dentro de filas flex y miden al menos 44 px */
  .spinner-btn, .btn-voz, .copy-btn, .pw-toggle, .password-toggle { flex-shrink: 0; min-width: var(--aq-tap); }
  /* Los campos pueden estrecharse en filas flex en vez de empujar la pagina hacia los lados */
  input, select, textarea { min-width: 0; }
  /* Filas del menu lateral del panel */
  .nav-item { min-height: var(--aq-tap); }
  /* Enlaces de volver / salir y pies de pagina: zona de toque de 44 px sin cambiar el texto */
  a.volver, a#volver, a.back, a.btn-back, a.salir,
  .legal-links a, .footer-links a { padding-block: 13px; box-sizing: border-box; }
  a.btn-back-dashboard, .header > a, header.header > a, a.logo, .topbar a, .link-row > a { min-height: var(--aq-tap); box-sizing: border-box; }
  .login-footer-link a, .auth-footer a, .channel a { display: inline-block; padding-block: 12px; }
  /* Titulos largos no ensanchan la pagina */
  h1, h2 { overflow-wrap: anywhere; }
}

/* Filas con controles de incremento (siembra, registro) en pantallas muy angostas */
@media (max-width: 400px) {
  .spinner-control { gap: 8px; min-width: 0; }
  input.spinner-value { min-width: 0; width: auto; flex: 1 1 0; }
}

/* Cuadriculas de 2-3 columnas escritas en linea (dashboard): una sola columna en moviles angostos */
@media (max-width: 520px) {
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
}