/* =========================================================
   Patología Mamaria · Responsive (CONAC 2026 · Vínculo Web)
   Se carga después de estilo.css y hMenu.css.
   Escritorio (> 1000 px) queda igual que antes.
   ========================================================= */

/* Botón hamburguesa: oculto en escritorio */
.pm-toggle { display: none; }

/* ---------- Tablet y celular ---------- */
@media (max-width: 1000px) {
  html, body { overflow-x: hidden; }

  /* Contenedores de ancho fijo (980 / 982 px) → fluidos */
  .contenedor_general,
  .wrap-main,
  .titulo-seccion,
  .destacado-index,
  .bloques_calugas {
    width: auto !important;
    max-width: 982px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
  .wrap-main { padding-left: 0; padding-right: 0; }

  /* Banner de video con título encima */
  .video-container { position: relative; margin-top: 60px; }
  .video-container video { display: block; width: 100%; height: auto; }
  .tituloFlotante {
    width: auto !important;
    left: 16px !important;
    right: 16px;
    top: 50% !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
  }
  .tituloFlotante .titulo { font-size: 26px; line-height: 1.2; }
  .tituloFlotante .resena,
  .tituloFlotante .resena p { font-size: 15px; }

  /* Textos */
  .post-content p { text-align: left; }
  .post-interior h1 { font-size: 22px; }
  .post-content h1, .post-content h2, .post-content p, .post-content li { overflow-wrap: anywhere; }

  /* Imágenes nunca más anchas que la pantalla */
  .post-content img { max-width: 100%; height: auto; }

  /* Tablas: se desplazan de lado dentro de su caja */
  .post-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Gráficos/imágenes con ancho fijo (.sombra): js/responsive.js los escala.
     Este contenedor reserva el alto ya escalado. */
  .pm-escala { position: relative; overflow: hidden; margin: 0 auto; max-width: 100%; }
  .pm-escala > .sombra { transform-origin: 0 0; }

  /* Títulos de las cajas de gráficos */
  .boton_imagen, .boton_grafico { font-size: 16px; padding-left: 44px; }

  /* Pie de página (iframe) más alto porque el contenido se apila */
  .direcciones iframe { height: 150px; }
}

/* ---------- Menú en celular ---------- */
@media (max-width: 900px) {
  #navegacion { text-align: left; }

  .pm-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: absolute;
    right: 12px;
    top: 10px;
    width: 44px;
    height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
  }
  .pm-toggle span {
    display: block;
    height: 2px;
    background: #1B1B1D;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  .pm-abierto .pm-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .pm-abierto .pm-toggle span:nth-child(2) { opacity: 0; }
  .pm-abierto .pm-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Panel del menú */
  .menu_php {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: #FFFFFF;
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
    z-index: 98;
  }
  .pm-abierto .menu_php { display: block; }

  .hmenudiv { padding: 8px 0 16px; }
  ul.hmenu li { float: none; width: 100%; }
  ul.hmenu li a.menucon,
  ul.hmenu li span.menucon {
    margin: 0;
    padding: 12px 20px;
    font-size: 16px;
    border-bottom: 1px solid #EEE6DE;
  }

  /* Submenús siempre visibles y en línea dentro del panel */
  ul.ulsubmenu,
  li:hover > ul.ulsubmenu {
    display: block;
    position: static;
    border: 0;
    padding: 0 0 6px 0;
    background: #FFF9F4;
  }
  ul.ulsubmenu li { background-image: none; padding: 0; }
  ul.ulsubmenu a, ul.ulsubmenu span {
    padding: 10px 20px 10px 36px;
    font-size: 14px;
  }

  /* "Volver a CONAC" como botón al final */
  ul.hmenu li.volver-conac { padding: 14px 20px 0; }
  ul.hmenu li.volver-conac a.menucon {
    display: inline-block;
    border-bottom: 2px solid #394C94;
  }
}

/* ---------- Celular chico ---------- */
@media (max-width: 640px) {
  .tituloFlotante .titulo { font-size: 20px; }
  .tituloFlotante .resena,
  .tituloFlotante .resena p { font-size: 13px; }
  .direcciones iframe { height: 190px; }
}