/*
 * Xerintel One · iPhone Duo y pantallas intermedias (28/10/2026)
 * Capa acotada que se carga después de one-motion.css. Solo media queries (nada de user agent).
 * Escritorio (>= 1024 px) no cambia salvo los tooltips de la gráfica entre 1024 y 1279 px.
 */

/* 1. Gráfica «Tu actividad con nosotros»: los tooltips estaban ocultos con opacity pero seguían ocupando
      sitio y ensanchaban la página (scroll lateral de hasta 70 px, también en iPhone normal). */
@media (max-width: 1279.98px), (hover: none) {
  .xi-col:not(:hover):not(:focus-visible) .xi-tooltip,
  .xi-mini-col:not(:hover) .xi-tooltip { display: none; }
  .xi-tooltip { white-space: normal; width: max-content; max-width: min(220px, 60vw); text-align: center; }
  .xi-col:first-child .xi-tooltip, .xi-col:nth-child(2) .xi-tooltip { left: 0; transform: none; text-align: left; }
  .xi-col:last-child .xi-tooltip, .xi-col:nth-last-child(2) .xi-tooltip { left: auto; right: 0; transform: none; text-align: right; }
}

@media (max-width: 1023.98px) {
  /* 2. Tablas visibles en móvil (cuentas de correo de la ficha del servicio): las direcciones largas parten
        en vez de sacar la tabla de la tarjeta. */
  .o-tabla td { overflow-wrap: anywhere; }
  /* Títulos con un dominio largo (renovaciones.rayovallecano.es a 28 px) partían la página. */
  main#contenido :is(h1, h2, h3, p) { overflow-wrap: break-word; }

  /* 3. Zonas seguras en los cuatro lados (el layout usa viewport-fit=cover). Con insets a 0 no cambia nada. */
  header.o-vt-menu.lg\:hidden {
    padding-top: max(.75rem, env(safe-area-inset-top));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  body.om-desplazado header.o-vt-menu.lg\:hidden { padding-top: max(.375rem, env(safe-area-inset-top)) !important; }
  main#contenido {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  nav[aria-label="Secciones"] { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .o-modal.inset-x-0.bottom-0 {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .oa-main {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }
  .oa-mtop {
    margin-left: calc(-1 * max(1.25rem, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(1.25rem, env(safe-area-inset-right)));
  }

}
/* 4. Formularios: con menos de 16 px iOS hace zoom al escribir. Va en la capa «utilities» de Tailwind
      para poder con los !text-[13px] del build (un !important sin capa pierde contra uno con capa). */
@layer utilities {
  @media (max-width: 1023.98px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),
    textarea:not([data-duo]), select:not([data-duo]) { font-size: 16px !important; }
  }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  main#contenido {
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
  .oa-main {
    padding-left: max(2.5rem, env(safe-area-inset-left));
    padding-right: max(2.5rem, env(safe-area-inset-right));
  }
  .oa-mtop {
    margin-left: calc(-1 * max(2.5rem, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(2.5rem, env(safe-area-inset-right)));
  }
}

/* 5. Hoja «Más» a partir de 560 px (interior vertical, exterior horizontal): centrada y en dos columnas
      en vez de filas de 600 px con mucho hueco. */
@media (min-width: 560px) and (max-width: 1023.98px) {
  .o-modal.inset-x-0.bottom-0 { max-width: 640px; margin-left: auto; margin-right: auto; }
  .o-modal.inset-x-0.bottom-0 > .grid.grid-cols-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 6. Poca altura (exterior horizontal 368-406 px): barra de pestañas y cabecera más bajas, acceso compacto. */
@media (max-height: 460px) and (max-width: 1023.98px) {
  .o-tab { flex-direction: row; justify-content: center; gap: .4rem; padding: .55rem 0; }
  main#contenido.pb-28 { padding-bottom: 5rem; }
  header.o-vt-menu.lg\:hidden {
    padding-top: max(.5rem, env(safe-area-inset-top));
    padding-bottom: .5rem;
  }
  .oa-mtop { padding-bottom: 1rem; margin-bottom: 1.25rem; }
  .oa-mclaim { margin-top: .75rem; font-size: 22px; }
  .oa-mclaim small, .oa-mapps { display: none; }
  .oa-main { padding-top: 2.5rem; padding-bottom: 1.5rem; }
}

/* 7. Chat abierto con poca altura (horizontal): fuera el título de la página (el chat ya lleva su cabecera)
      y el chat ocupa la pantalla, sin el mínimo de 420 px que lo sacaba por abajo. */
@media (max-height: 640px) and (max-width: 1023.98px) {
  main#contenido:has(.xc-rejilla > section + section) > div.mb-5:first-child { display: none; }
  .xc-rejilla > section + section {
    height: calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 0;
  }
}

/* 8. Interior horizontal (900-1023 px): lista y chat lado a lado, como en escritorio. */
@media (min-width: 900px) and (max-width: 1023.98px) {
  .xc-rejilla:has(> section + section) {
    grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
    height: calc(100dvh - 170px);
    min-height: 400px;
  }
  .xc-rejilla:has(> section + section) > section.hidden { display: flex; }
  .xc-rejilla > section + section { height: auto; min-height: 0; }
  .xc-rejilla > section + section > header > a.lg\:hidden { display: none; }
}
@media (min-width: 900px) and (max-width: 1023.98px) and (max-height: 640px) {
  .xc-rejilla:has(> section + section) {
    height: calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 0;
  }
}

/* 9. Extra (solo si Safari activa los segmentos de pantalla, postura libro): lista a un lado del pliegue y
      chat al otro. Nada depende de esto. */
@media (horizontal-viewport-segments: 2) and (max-width: 1023.98px) {
  .xc-rejilla:has(> section + section) {
    grid-template-columns: calc(env(viewport-segment-right 0 0) - max(1.5rem, env(safe-area-inset-left)) - 1rem) minmax(0, 1fr);
    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0) + 2rem);
    height: calc(100dvh - 170px);
    min-height: 0;
  }
  .xc-rejilla:has(> section + section) > section.hidden { display: flex; }
  .xc-rejilla > section + section { height: auto; min-height: 0; }
  .xc-rejilla > section + section > header > a.lg\:hidden { display: none; }
}