/* ============================================================================
   SIOV360 V21.333 · IMÁGENES INTERACTIVAS DE ALTO CONTRASTE EN DASHBOARD
   Alcance: SOLO las seis tarjetas principales del Dashboard.
   No modifica lógica, métricas, botones, mapas ni navegación.
   ============================================================================ */

/* La ilustración vive en una capa decorativa propia y no captura clics. */
.siov-dashboard-card.siov-dashboard-card--module{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.siov-dashboard-card.siov-dashboard-card--module::after{
  content:"";
  position:absolute;
  z-index:0;
  right:8px;
  bottom:2px;
  width:min(48%, 330px);
  height:72%;
  background-image:var(--siov-dashboard-art, none);
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;
  opacity:.98;
  pointer-events:none;
  transform-origin:right bottom;
  transform:translate3d(0,0,0) scale(1);
  filter:saturate(1.06) contrast(1.06);
  transition:transform .24s ease, filter .24s ease, opacity .24s ease;
  will-change:transform;
}

/* Todo el contenido funcional permanece siempre por encima de la imagen. */
.siov-dashboard-card.siov-dashboard-card--module > *{
  position:relative;
  z-index:2;
}

/* Reserva visual a la izquierda para cifras y evita que la ilustración invada datos. */
.siov-dashboard-card.siov-dashboard-card--module .siov-dashboard-metrics{
  width:54%;
  min-width:205px;
}
.siov-dashboard-card.siov-dashboard-card--module .siov-dashboard-actions{
  width:max-content;
  max-width:58%;
}

/* Microinteracción: la imagen cobra vida al pasar el mouse, sin desplazar la tarjeta. */
.siov-dashboard-card.siov-dashboard-card--module:hover::after{
  transform:translate3d(-2px,-3px,0) scale(1.035);
  filter:saturate(1.14) contrast(1.10);
  opacity:1;
}

/* Ilustración específica por módulo. */
.siov-dashboard-card--module[data-map-module="mantenimiento"]{
  --siov-dashboard-art:url("assets/dashboard-v333/maintenance.png");
}
.siov-dashboard-card--module[data-map-module="logistica"]{
  --siov-dashboard-art:url("assets/dashboard-v333/logistics.png");
}
.siov-dashboard-card--module[data-map-module="sso"]{
  --siov-dashboard-art:url("assets/dashboard-v333/sst.png");
}
.siov-dashboard-card--module[data-map-module="administracion"]{
  --siov-dashboard-art:url("assets/dashboard-v333/admin.png");
}
.siov-dashboard-card--module[data-map-module="documental"]{
  --siov-dashboard-art:url("assets/dashboard-v333/documents.png");
}
.siov-dashboard-card--module[data-map-module="capacitaciones"]{
  --siov-dashboard-art:url("assets/dashboard-v333/training.png");
}

/* Pantallas medianas: conserva la misma posición derecha sin tapar métricas. */
@media(max-width:1260px){
  .siov-dashboard-card.siov-dashboard-card--module::after{
    width:min(46%, 310px);
    height:70%;
  }
}

/* Móvil/tablet angosto: se mantiene la imagen, pero se reduce para priorizar lectura. */
@media(max-width:900px){
  .siov-dashboard-card.siov-dashboard-card--module::after{
    width:min(43%, 270px);
    height:66%;
    right:6px;
  }
  .siov-dashboard-card.siov-dashboard-card--module .siov-dashboard-metrics{
    width:58%;
  }
}

@media(max-width:640px){
  .siov-dashboard-card.siov-dashboard-card--module::after{
    width:39%;
    height:58%;
    opacity:.90;
  }
  .siov-dashboard-card.siov-dashboard-card--module .siov-dashboard-metrics{
    width:61%;
    min-width:0;
  }
}

@media(prefers-reduced-motion:reduce){
  .siov-dashboard-card.siov-dashboard-card--module::after{
    transition:none;
  }
  .siov-dashboard-card.siov-dashboard-card--module:hover::after{
    transform:none;
  }
}