/* ============================================================
   SIG_V1 - Normalizacion de tamano de los iconos de mosaico
   ------------------------------------------------------------
   NO cambia ningun icono: usa las mismas imagenes de /Imagenes.
   Solo iguala su tamano y posicion para que:
     - todos los mosaicos (cuadro azul del menu y cuadro de los
       submenus) midan EXACTAMENTE lo mismo;
     - la imagen de cada mosaico ocupe la misma superficie, centrada,
       con el mismo margen arriba y abajo;
     - ningun icono se vea mas grande ni mas chico que otro.
   Aditivo y reversible: si se quita el <link>, todo vuelve como estaba.
   ============================================================ */

/* 1) MENU PRINCIPAL — estilos.css achicaba los mosaicos de
      SIG / Almacen / Laboratorio con una regla :has(). Se anula
      para que midan igual que el resto.                                */
.menu-grid .mod-tile-3d:has(img[alt="SIG"]),
.menu-grid .mod-tile-3d:has(img[alt="Almacén"]),
.menu-grid .mod-tile-3d:has(img[alt="Laboratorio"]){
  width:var(--tile-col) !important;
  height:auto !important;
  justify-self:auto !important;
}

/* 2) La imagen del mosaico ocupa SIEMPRE todo el cuadro, centrada e
      identica en todos. Anula los `transform: scale(0.75)` que algunos
      <img> traen en su atributo style y que los hacian mas pequenos.   */
.menu-grid .mod-tile-3d .mod-tile-icon-img img,
.submenu-tiles .mod-tile-3d .mod-tile-icon-img img,
.mant-tiles .mod-tile-3d .mod-tile-icon-img img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  transform:none !important;
  border-radius:14px !important;
}

/* 3) Mosaicos que aun usan emoji (IA Proteos, Reuniones SST): se les da
      el mismo cuadro azul, tamano y etiqueta que a los demas, para que
      no rompan la fila.                                                 */
.menu-grid .mod-tile:not(:has(img)){
  aspect-ratio:1/1 !important;
  background:linear-gradient(160deg,#1f4fae,#0f2c72) !important;
  border:1.5px solid #2a5ec2 !important;
  border-radius:18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:14px 8px !important;
}
.menu-grid .mod-tile:not(:has(img)) .mod-tile-icon{
  font-size:clamp(40px,5vw,60px) !important;
  filter:none !important;
}
.menu-grid .mod-tile:not(:has(img)) .mod-tile-label{
  display:block !important;
  color:#fff !important;
  font-size:clamp(10.5px,.85vw,12.5px) !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-align:center !important;
}

/* ============================================================
   4) MOVIL / TELEFONO  (<= 768 px)
   ------------------------------------------------------------
   En el telefono los mosaicos pasan a FILAS tipo WhatsApp:
   icono chico a la izquierda (44 px, nitido), etiqueta legible
   al lado (16 px) y alto comodo para el pulgar (~60 px).
   Menos alto que en escritorio, pero todo se lee bien.
   ============================================================ */
@media (max-width:768px){

  /* --- Menu principal y submenus: mismo formato de fila --- */
  .menu-grid .mod-tile,
  .menu-grid .mod-tile-3d,
  .submenu-tiles .mod-tile,
  .submenu-tiles .mod-tile-3d,
  .mant-tiles .mod-tile,
  .mant-tiles .mod-tile-3d{
    aspect-ratio:auto !important;
    width:100% !important;
    min-height:60px !important;
    height:auto !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;
    padding:9px 14px !important;
    background:linear-gradient(160deg,#1f4fae,#0f2c72) !important;
    border:1px solid #2a5ec2 !important;
    border-radius:12px !important;
    position:relative !important;
    overflow:hidden !important;
  }

  /* Caja del icono: 44x44, imagen recortada a cuadrado nitido */
  .menu-grid .mod-tile-icon,
  .menu-grid .mod-tile-icon-img,
  .submenu-tiles .mod-tile-icon,
  .submenu-tiles .mod-tile-icon-img,
  .mant-tiles .mod-tile-icon,
  .mant-tiles .mod-tile-icon-img{
    position:static !important;
    inset:auto !important;
    flex:0 0 44px !important;
    width:44px !important;
    height:44px !important;
    border-radius:9px !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.06) !important;
  }
  .menu-grid .mod-tile-icon-img img,
  .submenu-tiles .mod-tile-icon-img img,
  .mant-tiles .mod-tile-icon-img img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    border-radius:9px !important;
    transform:none !important;
  }

  /* Etiqueta SIEMPRE visible al lado del icono, tamano WhatsApp */
  .menu-grid .mod-tile .mod-tile-label,
  .menu-grid .mod-tile-3d .mod-tile-label,
  .submenu-tiles .mod-tile .mod-tile-label,
  .submenu-tiles .mod-tile-3d .mod-tile-label{
    display:block !important;
    color:#fff !important;
    font-size:16px !important;
    font-weight:600 !important;
    line-height:1.25 !important;
    text-align:left !important;
    letter-spacing:0 !important;
    white-space:normal !important;
  }

  /* Mosaicos con emoji: mismo formato de fila */
  .menu-grid .mod-tile:not(:has(img)) .mod-tile-icon{
    font-size:26px !important;
    flex:0 0 44px !important;
    width:44px !important;
    height:44px !important;
  }
  .menu-grid .mod-tile:not(:has(img)){
    aspect-ratio:auto !important;
    min-height:60px !important;
    height:auto !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:14px !important;
    padding:9px 14px !important;
  }
  .menu-grid .mod-tile:not(:has(img)) .mod-tile-label{
    text-align:left !important;
    font-size:16px !important;
  }

  /* Secciones y titulos: compactos pero legibles */
  .menu-section-title{ font-size:15px !important; letter-spacing:.06em !important; }
  .menu-grid{ gap:10px !important; }
  .submenu-tiles{ gap:10px !important; }

  /* --- Submenus: UNA sola pagina que se desplaza ---
     Antes los mosaicos quedaban atrapados en un mini-scroll de ~450 px
     y la pizarra en otro scroll aparte: en el telefono se sentia
     "trabado" y los iconos tapaban la pizarra. Ahora todo fluye en
     vertical y se desplaza la pantalla completa. */
  .submenu-split,
  .submenu-tiles,
  .mant-tiles,
  .submenu-content-block,
  #screen-unidades-hub .submenu-tiles,
  #screen-sst-checklist-um .submenu-tiles{
    overflow:visible !important;
    max-height:none !important;
    min-height:0 !important;
    height:auto !important;
    flex:0 0 auto !important;
  }
  .submenu-content-block .unidades-pizarra,
  .submenu-content-block .unidades-pizarra-body{
    max-height:none !important;
    overflow:visible !important;
  }
  /* La pantalla activa es la que se desplaza. */
  .screen.active{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}