/* ============================================================
   Cancha La 10 — capa responsive
   Los diseños vienen del design system con estilos inline sobre un
   lienzo fijo de 1440px. Esta capa los vuelve fluidos sin tocar la
   lógica: solo se añadieron marcadores data-r a la plantilla.

   Dos cosas obligatorias aquí:
   - !important en todo: un estilo inline solo se vence así.
   - selectores por data-r y no por substring del style: el runtime
     re-serializa los estilos al renderizar (flex:none -> flex:0 0 auto),
     así que buscar el texto del fuente en el DOM no coincide.

   Breakpoints según 05-responsive-layout-and-tablet-presentation.md:
     >=1440      3 columnas (diseño original intacto)
     1200-1439   gutters reducidos
     900-1199    2 columnas
     <900        1 columna, tabs con scroll horizontal, cards 100%
   "No convertir el dashboard en estilo móvil completamente
    diferente" — se reflowea, no se rediseña.
   ============================================================ */

/* ---------- 1. Lienzo fluido y centrado ---------- */
[data-screen-label] {
  width: 100% !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
}

/* En pantallas anchas el lienzo queda centrado; el body pinta el resto */
body {
  background: linear-gradient(180deg, #F4FAF6 0%, #F1F7F3 52%, #ECF5F0 100%) !important;
  min-height: 100vh;
}

/* ---------- 2. <=1180px: el panel lateral deja de robar ancho ---------- */
@media (max-width: 1180px) {
  [data-r="sec-main"] { grid-template-columns: 1fr !important; }

  /* el aside de Tito pasa a overlay en vez de comprimir el dashboard */
  [data-screen-label="Inicio"] aside {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: min(420px, 92vw) !important;
    z-index: 70 !important;
    box-shadow: -18px 0 46px rgba(11, 26, 19, .22) !important;
  }
}

/* ---------- 3. <=899px: una columna ---------- */
@media (max-width: 899px) {
  /* márgenes laterales (Inicio 30px, Reserva 40px) */
  [data-r="pad"], [data-r="sec-main"], [data-r="sec-mapa"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  [data-screen-label="Inicio"] [data-r="pad"],
  [data-r="sec-main"], [data-r="sec-mapa"] { margin-left: 0 !important; margin-right: 0 !important; }

  /* un hijo de grid/flex no baja de su contenido salvo que se le diga:
     sin esto las cards del heatmap y el donut se salen de su columna */
  [data-r="sec-main"] > *, [data-r="sec-mapa"] > * { min-width: 0 !important; }

  /* nav superior: scroll horizontal (spec §5) en vez de wrap.
     min-width:0 es imprescindible: sin él un flex item no baja de su
     contenido y el scroll interno nunca llega a activarse. */
  [data-screen-label="Inicio"] nav,
  [data-r="pills"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  [data-screen-label="Inicio"] nav::-webkit-scrollbar,
  [data-r="pills"]::-webkit-scrollbar { display: none; }
  [data-screen-label="Inicio"] nav > button,
  [data-r="pills"] > button { flex: 0 0 auto !important; }

  /* columnas flex con basis fijo (560px, 400px…): en una fila con wrap
     bajan solas de línea, pero no encogen por debajo de su contenido.
     min-width:0 + basis 100% las hace caber de verdad. */
  [data-r="col"] { flex: 1 1 100% !important; min-width: 0 !important; }

  /* rejillas fijas -> fluidas */
  [data-r="g4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-r="g2"] { grid-template-columns: 1fr !important; }
  [data-r="horas"] { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)) !important; }

  /* heatmap de 16 horas: celdas compactas para que quepan sin scroll.
     Las etiquetas de día viven en una columna aparte, así que su alto
     tiene que bajar igual que el de las celdas o las filas se desalinean. */
  [data-r="heat-head"], [data-r="heat-row"] { gap: 3px !important; }
  [data-r="heat-row"] > div { height: 22px !important; }
  [data-r="heat-head"] > div { font-size: 11px !important; }
  [data-r="heat-days"] > div {
    height: 22px !important;
    width: 30px !important;
    font-size: 12px !important;
  }

  /* ranking de sedes: el nombre venía con nowrap y sin ellipsis, así que
     con la columna estrecha se metía encima del % */
  [data-r="rank"] { grid-template-columns: 24px 1fr auto !important; gap: 10px !important; }
  [data-r="rank"] > span:nth-child(2) > span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* donut + leyenda se apilan */
  [data-r="donut-row"] { flex-direction: column !important; align-items: stretch !important; }
  [data-r="donut"] { width: 100% !important; max-width: 260px !important; margin-inline: auto !important; }

  /* etiquetas del mapa: van absolutas con left:% y nowrap, así que con
     nombres largos (San Juan de Lurigancho) se salen del lienzo */
  [data-r="mapa-label"] { white-space: normal !important; max-width: 96px !important; }
  [data-r="mapa-label"] > div { font-size: 11px !important; line-height: 1.25 !important; }
  [data-r="mapa-label"] > div + div { font-size: 10px !important; }

  /* hero de Reserva */
  [data-screen-label="Reserva"] h1 { font-size: 30px !important; }
  [data-r="hero"] { padding: 22px 20px !important; min-height: 0 !important; }

  /* acciones del header de Reserva: el enlace al panel y el chip de
     promo van con nowrap, así que juntos no caben en una línea */
  [data-r="head-actions"] { flex: 1 1 100% !important; flex-wrap: wrap !important; }
  [data-r="promo"] {
    white-space: normal !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 8px 16px !important;
    font-size: 15px !important;
  }
}

/* ---------- 4. <=640px: teléfono ---------- */
@media (max-width: 640px) {
  [data-r="pad"], [data-r="sec-main"], [data-r="sec-mapa"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  [data-screen-label="Reserva"] [data-r="pad"],
  [data-r="hero"] { margin-left: 12px !important; margin-right: 12px !important; }

  /* KPIs y sub-rejillas a una columna */
  [data-recorrido="kpis"] { grid-template-columns: 1fr !important; }
  [data-r="g4"] { grid-template-columns: 1fr !important; }

  /* cifras grandes: bajan un escalón para no desbordar su card */
  [data-screen-label] [style*="font-size: 56px"] { font-size: 42px !important; }
  [data-screen-label] [style*="font-size: 52px"] { font-size: 40px !important; }
  [data-screen-label] [style*="font-size: 44px"] { font-size: 34px !important; }
  [data-screen-label] [style*="font-size: 40px"] { font-size: 30px !important; }

  /* mapa: a este tamaño las etiquetas de dos líneas chocan entre sí.
     Se deja el nombre del distrito; el detalle está justo debajo en el
     ranking de sedes, así que no se pierde información. */
  [data-r="mapa-label"] { max-width: 78px !important; }
  [data-r="mapa-label"] > div + div { display: none !important; }

  /* botones flotantes más discretos */
  [data-recorrido="tito"], [data-r="fab"] {
    right: 12px !important;
    bottom: 12px !important;
    height: 54px !important;
    font-size: 16px !important;
    padding: 0 18px 0 12px !important;
  }

  /* el FAB es fixed: sin este colchón taparía el último bloque */
  [data-screen-label] { padding-bottom: 88px !important; }
}

/* ---------- 4b. <=380px: pantallas muy estrechas (iPhone SE y similares) ---------- */
@media (max-width: 380px) {
  /* "San Juan de Miraflores" con nowrap + 22px de padding no cabe en 320px */
  [data-r="distrito"] {
    padding: 0 14px !important;
    font-size: 15px !important;
    gap: 7px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  [data-r="distrito"] > span:first-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }

  [data-r="pad"], [data-r="sec-main"], [data-r="sec-mapa"], [data-r="hero"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  [data-screen-label="Reserva"] [data-r="pad"], [data-r="hero"] {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  [data-screen-label] [style*="padding: 24px 28px 28px"],
  [data-screen-label] [style*="padding: 30px 34px"] { padding: 16px 14px !important; }

  /* heatmap: una columna 1fr no baja del ancho de su contenido, así que el
     rótulo "22" empujaba la rejilla fuera. minmax(0,1fr) sí deja encoger. */
  [data-r="heat-head"], [data-r="heat-row"] {
    grid-template-columns: repeat(16, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }
  [data-r="heat-head"] > div { font-size: 9px !important; overflow: hidden !important; }
  [data-r="heat-days"] > div { width: 24px !important; font-size: 10px !important; }
}

/* ---------- 5. Flotantes que nunca deben desbordar ---------- */
[data-globo] { width: min(560px, calc(100vw - 24px)) !important; }

[data-r="chat"] {
  width: min(430px, calc(100vw - 24px)) !important;
  right: 12px !important;
}

/* ---------- 6. El mapa punteado escala con su contenedor ---------- */
[data-r="mapa"] { max-width: min(530px, 100%) !important; }