/*
 * OceraOT — visualizador global del outfit administrativo 302.
 * El GIF tiene lienzo 64x64 y el sprite real ocupa 32x32
 * en la esquina inferior derecha.
 */

.ocera-admin-outfit-viewport {
  position: relative !important;
  display: inline-block !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 0 !important;
}

.ocera-admin-outfit-viewport > img.ocera-admin-outfit-image {
  position: absolute !important;
  display: block !important;

  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;

  left: -32px !important;
  top: -32px !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  transform: none !important;
  inset: auto !important;
  float: none !important;
  object-fit: initial !important;
  object-position: initial !important;
  image-rendering: pixelated;
}

/* Centrado en cualquier celda o contenedor donde aparezca. */
td:has(> .ocera-admin-outfit-viewport),
div:has(> .ocera-admin-outfit-viewport),
a:has(> .ocera-admin-outfit-viewport) {
  vertical-align: middle !important;
}

/* Las tablas deben dejar espacio suficiente sin depender de una página concreta. */
tr:has(.ocera-admin-outfit-viewport) {
  min-height: 40px !important;
}