/* ============================================================
   SST (hub) - tarjetas al MISMO modelo y tamano que la MATRIZ CENTRAL
   ------------------------------------------------------------
   - Escritorio: cada tarjeta mide lo mismo que un .mod-tile-3d del menu
     principal (cuadrado de var(--tile-col) del .menu-grid:
     clamp(185px,15.5vw,235px)) y la imagen va sin caja, sin fondo blanco
     y sin sombra de tarjeta, solo la insignia azul con su sombra sutil
     (igual que css/menu-iconos.css).
   - Telefono (<=768 px): rejilla de 3 columnas con tarjeta vertical
     (icono de 52 px arriba y nombre debajo), igual que el menu
     (css/movil.css, bloque "Menu principal en iconos").
   - Los PNG icon-sst-*.png traen un marco claro/gris pegado a la imagen
     (no son transparentes como los del menu). Sin tocar los archivos, se
     RECORTA la insignia azul dentro de su cuadro con el encuadre medido
     de cada PNG (left/top/width en %), asi todas quedan centradas y del
     mismo tamano aparente.
   - Las tarjetas con emoji (sin imagen) toman el mismo tamano cuadrado.
   Aditivo y reversible: quitando el <link> vuelve a como estaba.
   ============================================================ */

/* ---------- Encuadre de cada insignia (medido sobre el PNG de 512 px) ---------- */
#screen-seguridad .seg-card-icon-img{ overflow:hidden; }
#screen-seguridad .seg-card-icon-img img{ position:absolute; max-width:none; object-fit:fill; border-radius:0; }
#screen-seguridad .seg-card-icon-img img[src*="icon-sst-inspecciones"]{ width:112.3%;height:112.3%;left:-5.9%;top:-4.1%; }
#screen-seguridad .seg-card-icon-img img[src*="icon-sst-checklist-um"]{ width:135.8%;height:135.8%;left:-17.8%;top:-12.7%; }
#screen-seguridad .seg-card-icon-img img[src*="icon-sst-seguimiento-epps"]{ width:123.4%;height:123.4%;left:-11.6%;top:-0.6%; }
#screen-seguridad .seg-card-icon-img img[src*="icon-sst-investigacion"]{ width:126.1%;height:126.1%;left:-10.3%;top:-3.5%; }
#screen-seguridad .seg-card-icon-img img[src*="icon-sst-monitoreo-ocupacional"]{ width:124.9%;height:124.9%;left:-8.8%;top:-2.1%; }
#screen-seguridad .seg-card-icon-img img[src*="icon-sst-trazabilidad-accidentes"]{ width:123.7%;height:123.7%;left:-11.6%;top:-0.8%; }

/* ---------- Escritorio / tableta ---------- */
@media (min-width:769px){
  #screen-seguridad > .submenu-split > .seg-grid{
    --tile-col:clamp(185px,15.5vw,235px);
    gap:clamp(14px,1.3vw,22px);
    /* ancho para 3 tarjetas del tamano de la matriz (como el menu: 3 por fila) */
    flex:0 0 min(72%,calc(3 * clamp(185px,15.5vw,235px) + 2 * clamp(14px,1.3vw,22px) + 44px));
  }
  /* Todas las tarjetas del hub: el mismo cuadrado que la matriz central */
  #screen-seguridad > .submenu-split > .seg-grid > .seg-card{
    aspect-ratio:1/1;width:100%;box-sizing:border-box;
    padding:10px 8px;gap:6px;overflow:hidden;position:relative;
  }
  /* Con emoji: contenido compacto para que quepa en el cuadrado */
  #screen-seguridad > .submenu-split > .seg-grid > .seg-card:not(:has(.seg-card-icon-img)) .seg-card-icon{ font-size:clamp(30px,3vw,44px);line-height:1; }
  #screen-seguridad > .submenu-split > .seg-grid > .seg-card:not(:has(.seg-card-icon-img)) .seg-card-title{ font-size:clamp(13px,1.1vw,15px);padding:0 6px; }
  #screen-seguridad > .submenu-split > .seg-grid > .seg-card:not(:has(.seg-card-icon-img)) .seg-card-sub{
    font-size:10px;line-height:1.3;margin-top:0;padding:0 8px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  #screen-seguridad > .submenu-split > .seg-grid > .seg-card:not(:has(.seg-card-icon-img)) .seg-card-pct{ font-size:14px;padding:1px 12px;margin-top:0; }

  /* Con imagen: sin tarjeta, sin fondo, sin borde (como .mod-tile-3d del menu) */
  #screen-seguridad > .submenu-split > .seg-grid > .seg-card:has(.seg-card-icon-img){
    padding:0;background:transparent !important;border:0 !important;box-shadow:none;
  }
  #screen-seguridad > .submenu-split > .seg-grid > .seg-card:has(.seg-card-icon-img):hover{
    background:transparent !important;box-shadow:none;transform:translateY(-3px);filter:brightness(1.08);
  }
  #screen-seguridad .seg-card:has(.seg-card-icon-img) .seg-card-icon-img{
    position:absolute;inset:0;width:100%;height:100%;font-size:inherit;
    border-radius:13%;filter:drop-shadow(0 2px 4px rgba(15,23,42,.28));
  }
  /* El nombre ya viene en la insignia: se oculta el texto repetido
     (queda disponible para lectores de pantalla). */
  #screen-seguridad .seg-card:has(.seg-card-icon-img) .seg-card-title,
  #screen-seguridad .seg-card:has(.seg-card-icon-img) .seg-card-sub{
    position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  /* Contador: chip pequeno en la esquina, letra clara sobre fondo oscuro */
  #screen-seguridad .seg-card:has(.seg-card-icon-img) .seg-card-pct{
    position:absolute;top:8px;right:8px;margin:0;font-size:12px;padding:1px 9px;
    background:rgba(8,24,70,.85);color:#fff;z-index:2;
  }
}

/* 769-900 px: la matriz pasa a 4 columnas de 1fr (estilos.css, max-width:900px);
   aqui se replica el mismo ancho de tarjeta: (ancho - relleno - 3 huecos) / 4. */
@media (min-width:769px) and (max-width:900px){
  #screen-seguridad > .submenu-split > .seg-grid{
    --tile-col:calc((100vw - 36px - 42px) / 4);
    flex:0 0 100%;justify-content:start;
  }
}

/* ---------- Telefono: 3 columnas, tarjeta vertical como la matriz ---------- */
@media (max-width:768px){
  #screen-seguridad > .submenu-split > .seg-grid{
    display:grid !important;flex-direction:row !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-rows:min-content !important;align-content:start !important;
    justify-content:stretch !important;gap:10px !important;padding:12px !important;
    max-width:100% !important;overflow-x:hidden !important;
  }
  #screen-seguridad > .submenu-split > .seg-grid > .seg-card{
    width:100% !important;min-width:0;min-height:104px;aspect-ratio:auto;box-sizing:border-box;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:6px;padding:10px 4px 8px;position:relative;overflow:hidden;
    background:linear-gradient(160deg,#1f4fae,#0f2c72) !important;
    border:1px solid #2a5ec2 !important;border-radius:14px;box-shadow:none;
  }
  #screen-seguridad .seg-card .seg-card-icon{ font-size:30px;line-height:1;flex:0 0 52px;height:52px;display:flex;align-items:center;justify-content:center; }
  #screen-seguridad .seg-card .seg-card-icon-img{
    position:relative;inset:auto;width:52px;height:52px;flex:0 0 52px;
    border-radius:13%;font-size:inherit;
  }
  #screen-seguridad .seg-card .seg-card-title{
    font-size:11px;font-weight:700;line-height:1.2;color:#fff;padding:0 2px;
    position:static;width:auto;height:auto;clip:auto;white-space:normal;overflow:visible;
  }
  #screen-seguridad .seg-card .seg-card-sub{ display:none; }
  #screen-seguridad .seg-card .seg-card-pct{
    position:absolute;top:4px;right:4px;margin:0;font-size:10px;padding:0 6px;
    background:rgba(8,24,70,.85);color:#fff;z-index:2;
  }
}