/* File: erp-tag-badges/assets/css/frontend.css */
/* ERP Tag Badges – estilos de frontend (apilado multi-etiqueta, posicionamiento y accesibilidad)
   i18n no aplica en CSS. */

/* Contenedor del overlay: tamaño por defecto y lectura de posición.
   Nota: width y z-index definitivos pueden ser fijados por JS leyendo data-width / data-z y
   asignándolos como CSS variables (--etb-width / --etb-z) o inline style. */
.etb-overlay-container {
    position: absolute;
    pointer-events: none;
    width: var(--etb-width, 96px); /* fallback si no se inyecta variable */
    max-width: 100%;
    z-index: var(--etb-z, 9);      /* fallback si no se inyecta variable */
}

/* Posicionamiento según data-position */
.etb-overlay-container[data-position="top-left"] {
    top: 8px;
    left: 8px;
}
.etb-overlay-container[data-position="top-right"] {
    top: 8px;
    right: 8px;
}
.etb-overlay-container[data-position="bottom-left"] {
    bottom: 8px;
    left: 8px;
}
.etb-overlay-container[data-position="bottom-right"] {
    bottom: 8px;
    right: 8px;
}

/* Cada insignia: inline-block para permitir apilado/offset sin romper el flujo */
.etb-overlay-container .etb-badge {
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 0; /* sin márgenes para evitar separación vertical en apilado */
    will-change: transform;
    image-rendering: auto;
}

/* Fallback de offset por CSS (si no llega inline style desde PHP/JS).
   El inline style tiene mayor prioridad, por lo que no habrá doble desplazamiento.
   Incremento de 6px por índice para evitar solapado visual. */
.etb-overlay-container .etb-badge:nth-child(1)  { transform: translate(0, 0); }
.etb-overlay-container .etb-badge:nth-child(2)  { transform: translate(6px, 6px); }
.etb-overlay-container .etb-badge:nth-child(3)  { transform: translate(12px, 12px); }
.etb-overlay-container .etb-badge:nth-child(4)  { transform: translate(18px, 18px); }
.etb-overlay-container .etb-badge:nth-child(5)  { transform: translate(24px, 24px); }
.etb-overlay-container .etb-badge:nth-child(6)  { transform: translate(30px, 30px); }
.etb-overlay-container .etb-badge:nth-child(7)  { transform: translate(36px, 36px); }
.etb-overlay-container .etb-badge:nth-child(8)  { transform: translate(42px, 42px); }

/* Variante para listados (por ahora igual que single; se mantiene para futuras diferencias) */
.etb-overlay-container.etb-loop {
    /* hereda reglas base */
}

/* Bloque de descripción de etiqueta(s) debajo del extracto (se mantiene) */
.etb-tag-description {
    margin: 12px 0;
    padding: 10px 12px;
    background: #f7f7f7;
    border-left: 3px solid #0085ba;
}

/* Responsivo: en móviles, limita más el ancho del overlay (si no hay variable) */
@media (max-width: 480px) {
    .etb-overlay-container {
        width: min(var(--etb-width, 96px), 22vw);
    }
}

/* --- (Opcional futuro) modo grid documentado pero desactivado ---
.etb-overlay-container.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.etb-overlay-container.grid .etb-badge {
    transform: none !important;
}
*/