/**

 * Tools hub — iconos como Carne hub, marco definido para contraste.

 * Cargar DESPUÉS de styles.min.css.

 */



/* Tile sin gleam Pebble */

html body #pg-tools.tools-pg-serio .tools-pg-grid--sistema .tools-pg-tile,

html body #pg-tools.tools-pg-serio .tools-pg-grid--apps .tools-pg-tile,

html body #pg-tools.tools-pg-serio .tools-pg-tile {

  appearance: none !important;

  -webkit-appearance: none !important;

  border-radius: 12px !important;

  background: var(--gris-0, #ffffff) !important;

  background-image: none !important;

  border: var(--borde-fino, 1px solid #cbd5e1) !important;

  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;

  overflow: visible !important;

  isolation: auto !important;

  transform: none !important;

}



html body #pg-tools.tools-pg-serio .tools-pg-tile::before,

html body #pg-tools.tools-pg-serio .tools-pg-tile::after {

  content: none !important;

  display: none !important;

}



html body #pg-tools.tools-pg-serio .tools-pg-tile:hover,

html body #pg-tools.tools-pg-serio .tools-pg-tile:focus-visible {

  transform: none !important;

  background: var(--gris-0, #ffffff) !important;

  border-color: var(--gris-400, #94a3b8) !important;

  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1) !important;

}



/* Wrapper neutro — la caja va solo en el PNG */

html body #pg-tools.tools-pg-serio .tools-pg-tile__ico {

  width: auto !important;

  height: auto !important;

  min-width: 0 !important;

  min-height: 0 !important;

  padding: 0 !important;

  margin: 0 !important;

  border: none !important;

  border-radius: 0 !important;

  background: transparent !important;

  background-image: none !important;

  box-shadow: none !important;

  filter: none !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 0 !important;

  line-height: 0 !important;

}



/* Marco del icono — gris slate + borde fuerte (destaca sobre tile blanco) */

html body #pg-tools.tools-pg-serio .tools-pg-tile__ico img.tools-pg-tile__ico-img,

html body #pg-tools.tools-pg-serio .tools-pg-grid--sistema .tools-pg-tile__ico img,

html body #pg-tools.tools-pg-serio .tools-pg-grid--apps .tools-pg-tile__ico img,

html body #pg-tools.tools-pg-serio .tools-pg-tile__ico-img {

  width: 48px !important;

  height: 48px !important;

  max-width: 48px !important;

  max-height: 48px !important;

  min-width: 48px !important;

  min-height: 48px !important;

  padding: 5px !important;

  box-sizing: border-box !important;

  display: block !important;

  object-fit: contain !important;

  border: none !important;

  border-radius: 10px !important;

  background: #ffffff !important;

  box-shadow: inset 0 0 0 2px var(--gris-400, #94a3b8) !important;

  filter: none !important;

  opacity: 1 !important;

  transform: none !important;

}



html body #pg-tools.tools-pg-serio .tools-pg-tile:hover .tools-pg-tile__ico img,

html body #pg-tools.tools-pg-serio .tools-pg-tile:focus-visible .tools-pg-tile__ico img {

  box-shadow: inset 0 0 0 2px #64748b !important;

  filter: none !important;

}



html body #pg-tools.tools-pg-serio .serio-v1-icon-box.header-bloque .tools-pg-htit-ico {

  width: 28px !important;

  height: 28px !important;

  padding: 0 !important;

  object-fit: contain !important;

  background: transparent !important;

  box-shadow: none !important;

  border: none !important;

  filter: none !important;

}



html body #pg-tools.tools-pg-serio .dash-serio-hero__ico-inline {

  filter: none !important;

  background: transparent !important;

  box-shadow: none !important;

  border: none !important;

  object-fit: contain !important;

}



html body #pg-tools.tools-pg-serio .tools-pg-tile__ico img.tools-pg-tile__ico-img:not([style*="display: none"]) + .tools-pg-tile__ico-emoji {

  display: none !important;

}



@media (max-width: 340px) {

  html body #pg-tools.tools-pg-serio .tools-pg-tile__ico img,

  html body #pg-tools.tools-pg-serio .tools-pg-tile__ico-img {

    width: 42px !important;

    height: 42px !important;

    max-width: 42px !important;

    max-height: 42px !important;

    min-width: 42px !important;

    min-height: 42px !important;

    padding: 4px !important;

  }

}