/*
 * OceraOT Inventory — versión azul limpia.
 * No modifica Twig, orden, tamaños de celdas ni IDs de equipo.
 */

.ocera-inventory-grid {
  width: 126px !important;
  min-width: 126px !important;
  max-width: 126px !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  overflow: visible !important;
}

.ocera-inventory-grid tbody,
.ocera-inventory-grid tr {
  background: transparent !important;
  overflow: visible !important;
}

.ocera-inventory-grid tr {
  height: 42px !important;
}

/* Celdas normales: 42x42, sin bordes horizontales que crucen imágenes. */
.ocera-inventory-grid tr:not(:last-child) td,
.ocera-inventory-grid tr:last-child td:nth-child(2) {
  position: relative !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  background:
    radial-gradient(circle at 48% 38%,
      rgba(22, 78, 105, .90) 0%,
      rgba(8, 47, 68, .96) 58%,
      rgba(3, 24, 36, 1) 100%) !important;

  box-shadow:
    inset 1px 1px 0 rgba(77, 177, 218, .42),
    inset -1px -1px 0 rgba(0, 5, 9, .92),
    inset 0 0 0 1px rgba(10, 65, 88, .82),
    inset 0 0 9px rgba(0, 0, 0, .42) !important;
}

/* Marco interior limpio, sin líneas sobre los objetos. */
.ocera-inventory-grid td > div {
  position: relative !important;
  z-index: 3 !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Todas las imágenes internas quedan exactamente iguales. */
.ocera-inventory-grid img {
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .62));
}

/* Soul y Cap: celda estructural de 42px, caja visible inferior de 28px. */
.ocera-inventory-grid tr:last-child td:first-child,
.ocera-inventory-grid tr:last-child td:last-child {
  position: relative !important;
  z-index: 20 !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 14px 0 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: Verdana, Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: bold !important;
  line-height: 10px !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-shadow: 1px 1px 0 #000 !important;
  box-sizing: border-box !important;
}

/* Fondo azul visible únicamente en los 28px inferiores. */
.ocera-inventory-grid tr:last-child td:first-child::before,
.ocera-inventory-grid tr:last-child td:last-child::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: -1 !important;
  width: 42px !important;
  height: 28px !important;
  box-sizing: border-box !important;

  background:
    linear-gradient(to bottom,
      #14506c 0%,
      #0a3349 48%,
      #041c2a 100%) !important;

  border: 0 !important;
  box-shadow:
    inset 1px 1px 0 rgba(88, 190, 230, .48),
    inset -1px -1px 0 rgba(0, 4, 8, .92),
    inset 0 0 0 1px rgba(10, 69, 94, .85),
    inset 0 0 6px rgba(0, 0, 0, .35) !important;
}

/* Centrado exacto de etiqueta y valor. */
.ocera-inventory-grid tr:last-child td:first-child strong,
.ocera-inventory-grid tr:last-child td:last-child strong {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: bold !important;
  line-height: 10px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/*
 * Ajuste ya aprobado:
 * las tres celdas superiores laterales bajan 14px.
 * Sin bordes reales, ya no aparecen líneas sobre los objetos.
 */
.ocera-inventory-grid tr:nth-child(1) td:first-child,
.ocera-inventory-grid tr:nth-child(2) td:first-child,
.ocera-inventory-grid tr:nth-child(3) td:first-child,
.ocera-inventory-grid tr:nth-child(1) td:last-child,
.ocera-inventory-grid tr:nth-child(2) td:last-child,
.ocera-inventory-grid tr:nth-child(3) td:last-child {
  transform: translateY(14px) !important;
  z-index: 8 !important;
}

/* OCERAOT_EMPTY_SLOTS_BLUE_START
 * Solo afecta las siluetas de espacios vacíos.
 * Los objetos equipados y sus animaciones permanecen intactos.
 */
.ocera-inventory-grid img[src*="/images/items/no_"],
.ocera-inventory-grid img[src^="images/items/no_"],
.ocera-inventory-grid img[alt^=" no_"],
.ocera-inventory-grid img[alt="hidden"] {
  opacity: .46 !important;
  filter:
    brightness(.72)
    sepia(1)
    saturate(4.2)
    hue-rotate(154deg)
    contrast(1.08)
    drop-shadow(1px 1px 1px rgba(0, 4, 8, .72)) !important;
}

/* Las siluetas quedan más discretas que los objetos reales. */
.ocera-inventory-grid img[src*="/images/items/no_"],
.ocera-inventory-grid img[src^="images/items/no_"],
.ocera-inventory-grid img[alt^=" no_"] {
  transform: scale(.92) !important;
}
/* OCERAOT_EMPTY_SLOTS_BLUE_END */