/* ===================================================================
   Pacientes en Automático · capa móvil compartida  (pea-mobile.css · v7)
   Mobile-first: unifica tipografía, aire, grillas y áreas de toque
   en todas las páginas. No toca el diseño de escritorio (>860px).
   =================================================================== */

/* ---------- salvaguardas generales (todas las medidas) ---------- */
img, svg, video, iframe, canvas { max-width: 100%; }

/* ---------- HEADER UNIFICADO (todas las páginas) ----------
   Mismo logo, mismos tamaños y mismo comportamiento en todo el sitio.
   En pantallas chicas el nombre pasa a dos líneas y el botón se acorta. */
.nav-cta-short { display: none; }
@media (max-width: 560px) {
  .nav-inner { height: auto !important; padding-top: 9px !important; padding-bottom: 9px !important; }
  .nav-word { display: inline-flex !important; flex-direction: column; line-height: 1.1; font-size: 14.4px !important; }
  .nav-word > span:first-child { white-space: nowrap; }
  .nav-sep { display: none; }
  .nav-tag { font-size: 11.2px; margin-top: 1px; }
  .nav-cta-full { display: none; }
  .nav-cta-short { display: inline; }
}

/* ---------- TABLET (≤860px): grillas a una columna ---------- */
@media (max-width: 860px) {
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(auto-fit"],
  [style*="grid-template-columns: repeat(auto-fit"],
  [style*="grid-template-columns:repeat(auto-fill"],
  [style*="grid-template-columns: repeat(auto-fill"],
  [style*="1fr 1fr"],
  [style*="fr 1fr"],
  [style*="fr 0."],
  [style*="fr 3fr"],
  [style*="1fr 1px 1fr"],
  [style*="minmax(0,1fr) minmax"],
  [style*="minmax(280px,0.66fr)"],
  /* el runtime serializa los estilos con espacios ("minmax(280px, 0.66fr)"):
     esta regla genérica cubre cualquier grilla con minmax, sin depender del espaciado */
  [style*="grid-template-columns"][style*="minmax("],
  /* cualquier grilla con repeat(N,…): cubre repeat(5, repeat(6, repeat(12… */
  [style*="grid-template-columns"][style*="repeat("] {
    grid-template-columns: 1fr !important;
  }
  /* mockups con grilla propia (calendarios, mapas de semana): conservan sus columnas.
     Declaran las columnas en --cols y llevan data-pea-grilla-fija */
  [data-pea-grilla-fija][style*="grid-template-columns"] { grid-template-columns: var(--cols) !important; }
  /* una celda que ocupaba varias columnas pasa a ocupar la única que queda */
  [style*="grid-column:span"], [style*="grid-column: span"] { grid-column: 1 / -1 !important; }
  /* una columna sticky no tiene sentido en una sola columna.
     El header y las barras de filtro SÍ siguen fijos: son navegación. */
  :is([style*="position:sticky"], [style*="position: sticky"]):not(nav):not(nav *):not(.filtros-sticky) { position: static !important; }
  /* la grilla de estadísticas del home: 2×2 en vez de 4 */
  [data-stats] { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- MÓVIL (≤700px) ---------- */
@media (max-width: 700px) {
  body { overflow-wrap: break-word; }

  /* barra de navegación: una sola altura en todo el sitio */
  nav > div {
    height: 58px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  nav a[style*="border-radius:999px"],
  nav a[style*="border-radius: 999px"] { min-height: 38px !important; }

  /* aire de sección: mismo ritmo vertical y mismo margen lateral */
  section[data-screen-label] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* que las piezas de una fila o de una grilla puedan encogerse: sin esto una
     palabra larga o una tarjeta con medida propia empuja el texto fuera de caja */
  [style*="grid-template-columns"] > *:not([style*="min-width"]) { min-width: 0 !important; }
  /* una pieza dentro de una fila debe poder encogerse por debajo de su contenido */
  [style*="display:flex"] > *:not([style*="min-width"]),
  [style*="display: flex"] > *:not([style*="min-width"]) { min-width: 0 !important; }
  /* una fila que no entra pasa a dos líneas en vez de apretar sus piezas
     (nav y las filas que ya declaran su comportamiento quedan como están) */
  [style*="display:flex"]:not([style*="flex-wrap"]):not(nav *):not(nav),
  [style*="display: flex"]:not([style*="flex-wrap"]):not(nav *):not(nav) { flex-wrap: wrap !important; }

  /* firma del autor: la foto y el texto van SIEMPRE al lado, nunca apilados.
     En pantallas chicas se oculta la línea de años/consultas, que es la menos
     importante de las tres, para que la credencial entre completa. */
  .pea-autor { flex-wrap: nowrap !important; align-items: center !important; }
  .pea-autor-extra { display: none; }

  /* etiquetas y píldoras: nunca más anchas que su columna (el texto entraba
     de más y quedaba cortado en pantallas chicas) */
  [style*="inline-flex"] { max-width: 100% !important; flex-wrap: wrap !important; }
  /* mayúsculas espaciadas: menos separación para que entren completas */
  :is([style*="letter-spacing:0.12em"], [style*="letter-spacing: 0.12em"],
      [style*="letter-spacing:0.13em"], [style*="letter-spacing: 0.13em"],
      [style*="letter-spacing:0.14em"], [style*="letter-spacing: 0.14em"],
      [style*="letter-spacing:0.16em"], [style*="letter-spacing: 0.16em"]):not([style*="cq"]) { letter-spacing: 0.07em !important; }

  /* escala tipográfica única.
     Excepción: los textos de tapas y mockups se miden en unidades de contenedor
     (cqw/cqi) para escalar con su propia caja — pisarlos los saca del objeto. */
  h1:not([style*="cq"]) { font-size: 32px !important; line-height: 1.08 !important; letter-spacing: -0.025em !important; }
  h2:not([style*="cq"]) { font-size: 25.5px !important; line-height: 1.18 !important; }
  h3:not([style*="cq"]) { font-size: 18.5px !important; line-height: 1.3 !important; }


  /* tarjetas con tapa + texto: la tapa ocupa un poco menos */
  [style*="grid-template-columns:112px 1fr"],
  [style*="grid-template-columns: 112px 1fr"] { grid-template-columns: 92px 1fr !important; }

  /* áreas de toque: botones y enlaces de pie cómodos con el pulgar */
  a[style*="border-radius:999px"]:not(nav a),
  a[style*="border-radius: 999px"]:not(nav a),
  button[style*="border-radius:999px"],
  button[style*="border-radius: 999px"] {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  footer a { min-height: 44px; display: inline-flex; align-items: center; }

  /* controles: nada por debajo del pulgar */
  /* sólo botones de texto: los botones-ícono conservan su forma */
  button:not([aria-label]):not([data-pea-lapiz]):not([class*="pdf"]):not([data-pea-panel] *) { min-height: 42px !important; }
  pea-packshot button,
  button[style*="position:fixed"],
  button[style*="position: fixed"],
  button[style*="width:30px"], button[style*="width: 30px"],
  button[style*="width:32px"], button[style*="width: 32px"],
  button[style*="width:34px"], button[style*="width: 34px"],
  button[style*="width:36px"], button[style*="width: 36px"],
  button[style*="width:38px"], button[style*="width: 38px"],
  button[style*="width:40px"], button[style*="width: 40px"],
  button[style*="width:44px"], button[style*="width: 44px"] { min-height: 0 !important; }
  input:not([type="checkbox"]):not([type="radio"]):not([data-pea-panel] *),
  select:not([data-pea-panel] *), textarea:not([data-pea-panel] *) { min-height: 46px !important; font-size: 16px !important; }
  /* el editor de escenas es una herramienta interna: controles compactos */
  [data-pea-panel], [data-pea-panel] * { min-height: 0 !important; }
  /* el panel es una columna: si la capa móvil lo pone en 'wrap', el cuerpo se
     parte y aparece al costado de la barra */
  [data-pea-panel] { flex-wrap: nowrap !important; }
  [data-pea-panel] *, [data-pea-panel] *::before, [data-pea-panel] *::after { box-sizing: border-box; }
  /* las filas internas SÍ pueden pasar a dos líneas: forzarlas a una sola hacía
     que el contenido midiera más que el panel y se saliera por el costado. Lo
     que necesitan es poder encogerse. */
  [data-pea-panel] [style*="display:flex"] > *,
  [data-pea-panel] [style*="display: flex"] > * { min-width: 0 !important; }
}

/* ---------- MÓVIL CHICO (≤400px) ---------- */
@media (max-width: 400px) {
  nav a[style*="border-radius"] { padding-left: 11px !important; padding-right: 11px !important; }
  section[data-screen-label] { padding-left: 18px !important; padding-right: 18px !important; }
  h1:not([style*="cq"]) { font-size: 30px !important; }
  h2:not([style*="cq"]) { font-size: 24px !important; }
}

/* ---------- BLOQUE CENTRADO EN MÓVIL ----------
   Un bloque que en escritorio va a la izquierda de una imagen y en móvil queda
   solo debajo: ahí la alineación a la izquierda se lee torcida. Se centra el
   encabezado, la bajada y sus filas. */
@media (max-width: 860px) {
  .pea-centro-movil { text-align: center !important; }
  .pea-centro-movil > p { margin-left: auto !important; margin-right: auto !important; }
  .pea-centro-movil > [style*="display:flex"],
  .pea-centro-movil > [style*="display: flex"],
  .pea-centro-movil [style*="justify-content:flex-start"],
  .pea-centro-movil [style*="justify-content: flex-start"] { justify-content: center !important; }
  /* una columna apilada (precio + aclaración) se centra sobre su propio eje */
  .pea-centro-movil > [style*="align-items:flex-start"],
  .pea-centro-movil > [style*="align-items: flex-start"] { align-items: center !important; }
  /* la firma se centra como bloque, pero su texto sigue alineado a la izquierda:
     tres renglones centrados dejarían el margen en zigzag */
  .pea-centro-movil .pea-autor > :last-child { text-align: left !important; }
}

/* tarjetas de una fila (miniatura + texto) que en móvil apilan sus piezas:
   centradas se leen mejor que con la miniatura sola a la izquierda */
@media (max-width: 700px) {
  .pea-tarjetas-centro > * { justify-content: center !important; text-align: center !important; }
}

/* ---------- UN ÍCONO NUNCA SE VA ARRIBA DE SU TEXTO ----------
   La regla que deja que una fila pase a dos líneas es útil para filas de varias
   piezas, pero en una fila de ícono + texto manda el ícono al renglón de arriba.
   Cualquier fila que lleve un ícono propio y no declare su comportamiento se
   mantiene en una sola línea; el ícono conserva su tamaño y el texto se acomoda. */
@media (max-width: 700px) {
  /* la especificidad iguala a la de la regla que reparte las filas en dos
     líneas, más el :has — así gana sin depender del orden del archivo */
  [style*="display:flex"]:not([style*="flex-wrap"]):not(nav *):not(nav):has(> i),
  [style*="display: flex"]:not([style*="flex-wrap"]):not(nav *):not(nav):has(> i),
  [style*="inline-flex"]:not([style*="flex-wrap"]):not(nav *):not(nav):has(> i) {
    flex-wrap: nowrap !important;
  }
  [style*="display:flex"]:not([style*="flex-wrap"]):has(> i) > i,
  [style*="display: flex"]:not([style*="flex-wrap"]):has(> i) > i,
  [style*="inline-flex"]:not([style*="flex-wrap"]):has(> i) > i { flex: none !important; }
  [style*="display:flex"]:not([style*="flex-wrap"]):has(> i) > :not(i),
  [style*="display: flex"]:not([style*="flex-wrap"]):has(> i) > :not(i),
  [style*="inline-flex"]:not([style*="flex-wrap"]):has(> i) > :not(i) { min-width: 0 !important; }
}

/* mock centrado en móvil (tarjeta de agenda y similares) */
@media (max-width: 860px) {
  .pea-mock-centro { flex: 1 1 100% !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }
}

/* pie: logo a la izquierda y crédito a la derecha, siempre en una fila */
@media (max-width: 860px) {
  .pea-pie-credito { flex-wrap: nowrap !important; align-items: center !important; }
  .pea-pie-credito > :last-child { min-width: 0 !important; }
}

/* pie centrado en móvil: el crédito y el enlace quedan en el eje */
@media (max-width: 860px) {
  footer > div { justify-content: center !important; text-align: center !important; }
  .pea-pie-credito { justify-content: center !important; }
}

/* pie: el enlace a la biblioteca se oculta en móvil */
@media (max-width: 860px) {
  /* la especificidad supera la regla de áreas de toque (a[style*="border-radius:999px"]) */
  html footer a.pea-pie-oculto-movil.pea-pie-oculto-movil,
  html a.pea-pie-oculto-movil.pea-pie-oculto-movil,
  .pea-pie-oculto-movil { display: none !important; }
}