/* XLS · Ajustes responsive finales: táctil, formularios y pantallas grandes (TV).
   Se carga después de todas las hojas. Probado de 320 px a 3840 px. */

/* ---------- Pantallas táctiles: objetivos de toque de al menos 44 px ---------- */
@media (pointer: coarse), (max-width: 800px) {
  .ad-controls button, .premium-controls button, .brand-ad button, [class*="controls"] > button,
  .iconbutton, #search-close, #menu-toggle, #theme-toggle, #search-open {
    min-width: 44px !important; min-height: 44px !important;
  }
  .sectionhead > a, .storymeta a, .back, .topicbar .xlink, .xls-videorail .railhead a {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .topicbar a { padding-top: 10px; padding-bottom: 10px; }
  /* 16 px evita que iPhone haga zoom al tocar un campo */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
    min-height: 44px; font-size: 16px;
  }
  .xls-player .play { width: 76px; height: 54px; }
}

/* ---------- Móviles muy angostos (≤ 360 px) ---------- */
@media (max-width: 360px) {
  .leadcopy h1 { font-size: 31px; }
  .xls-videorail .railhead h2 { font-size: 24px; }
  .sidefeature { grid-template-columns: 100px minmax(0, 1fr); }
  .sidefeature > h2 { font-size: 17px !important; }
}

/* ---------- Tablet vertical: dos columnas cómodas ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  .xls-rail { grid-auto-columns: 46%; }
}

/* ---------- Monitores grandes y TV ----------
   Se escala el sitio completo para que en 2K/4K se vea con las proporciones de un PC de 1920 px,
   en lugar de una columna diminuta en el centro. */
@media (min-width: 2200px) { html { zoom: 1.2; } }
@media (min-width: 2500px) { html { zoom: 1.33; } }
@media (min-width: 3000px) { html { zoom: 1.6; } }
@media (min-width: 3600px) { html { zoom: 2; } }

/* TV: foco visible para navegar con control remoto (teclas de dirección) */
@media (min-width: 1800px) {
  a:focus-visible, button:focus-visible { outline: 3px solid #ff6b00; outline-offset: 3px; }
}

/* Con el escalado de TV, 100vw no se escala: márgenes en % del ancho real del diseño. */
@media (min-width: 2200px) {
  .sitefooter { padding-left: max(32px, calc((100% - 1376px) / 2)); padding-right: max(32px, calc((100% - 1376px) / 2)); }
  .desktopnav .sectionmenu > div.xls-megamenu { padding-left: max(30px, calc((100% - 1120px) / 2)); padding-right: max(30px, calc((100% - 1120px) / 2)); }
  .mobilenav { padding-left: max(20px, calc((100% - 1250px) / 2)); padding-right: max(20px, calc((100% - 1250px) / 2)); }
}

/* ---------- Celulares (≤ 480 px): anuncio de marcas y línea de edición ---------- */
@media (max-width: 480px) {
  .editionline { flex-wrap: wrap; gap: 6px 12px; }
  .editionline > span { white-space: nowrap; }
  .editionline time { flex: 1 1 100%; text-align: left; }
  /* Anuncio compacto de 92 px: el titular debe caber en 2 líneas */
  .premium-slide .premium-message small { margin-bottom: 3px !important; }
  .premium-slide .premium-message > strong { font-size: 17px !important; line-height: 1.12 !important; letter-spacing: -.2px !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .premium-slide .premium-message > span, .premium-slide .premium-web, .premium-slide .premium-phone { display: none !important; }
}