/* Ajustes de interacción y diseño para pantallas táctiles y equipos pequeños. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
button, select { min-height: 44px; touch-action: manipulation; }
.controls select { min-height: 44px; }
.panel { overflow: hidden; }
.zone-row { grid-template-columns: minmax(0, 1fr) auto; }
.zone-impact { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }

@media (max-width: 1020px) {
  .shell { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding: 34px clamp(24px, 6vw, 48px); }
  .live { margin-top: 58px; }
  .grid-main { align-items: flex-start; }
}

@media (max-width: 680px) {
  .hero { padding-top: calc(28px + env(safe-area-inset-top)); padding-bottom: 30px; }
  .hero > p { max-width: 34rem; }
  .dashboard { padding: 26px max(16px, env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .topbar { gap: 18px; margin-bottom: 20px; }
  .topbar h2 { font-size: 25px; }
  .controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; width: 100%; gap: 8px; }
  .controls label { min-width: 0; }
  .controls select { width: 100%; min-width: 0; }
  .controls button { width: 44px; padding: 0; }
  .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { min-width: 0; padding: 15px; }
  .kpi strong { font-size: clamp(22px, 7vw, 28px); }
  .kpi p { min-height: 32px; margin-bottom: 8px; }
  .grid-main, .grid-bottom { gap: 10px; margin-top: 10px; }
  .panel { padding: 17px; min-height: 0; }
  .chart { height: 190px; margin-top: 15px; }
  .zone-list, .reviews, .transitions { margin-top: 12px; }
  .zone-row { padding: 13px 0; }
  .zone-meta { line-height: 1.45; }
  .state { white-space: nowrap; }
}

@media (max-width: 420px) {
  .hero { padding-left: 20px; padding-right: 20px; }
  h1 { font-size: 39px; }
  .controls { grid-template-columns: 1fr; }
  .controls button { width: 100%; }
  .kpi { padding: 13px; }
  .kpi small { display: block; line-height: 1.35; }
  .panel-heading { gap: 10px; }
  .panel-heading h3 { font-size: 17px; }
  .zone-row { grid-template-columns: 1fr; gap: 8px; }
  .zone-row > div:last-child { display: flex; align-items: baseline; gap: 7px; }
  .zone-row > div:last-child .state { text-align: left; }
}