/**
 * Utility Classes
 * Clases de utilidad para reemplazar manipulaciones JS de estilos
 */

/* === Display Utilities === */
.hidden {
    display: none !important;
}

.block {
    display: block !important;
}

.flex {
    display: flex !important;
}

.inline-block {
    display: inline-block !important;
}

/* === Opacity Utilities === */
.opacity-0 {
    opacity: 0;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-100 {
    opacity: 1;
}

/* === Pointer Events === */
.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.enabled {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

/* === Loading States === */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '...';
    animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* === Visibility Utilities === */
.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

/* === Transform Utilities === */
.scale-0 {
    transform: scale(0);
}

.scale-100 {
    transform: scale(1);
}

/* === Transition Utilities === */
.transition {
    transition: all var(--transition-base, 0.3s ease);
}

.transition-fast {
    transition: all var(--transition-fast, 0.2s ease);
}

.transition-slow {
    transition: all var(--transition-slow, 0.5s ease);
}

/* === Color States === */
.text-muted {
    color: var(--color-text-muted, #999) !important;
}

.text-error {
    color: var(--color-error, #dc3545) !important;
}

.text-success {
    color: var(--color-success, #28a745) !important;
}

.text-warning {
    color: var(--color-warning, #ffc107) !important;
}

/* === Background States === */
.bg-light {
    background-color: var(--color-bg-light, #f8f9fa) !important;
}

.bg-dark {
    background-color: var(--color-bg-dark, #343a40) !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* === Border Utilities === */
.border-none {
    border: none !important;
}

/* === Cursor Utilities === */
.cursor-pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-default {
    cursor: default;
}

/* === Overflow Utilities === */
.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-scroll {
    overflow: scroll;
}

/* === Position Utilities === */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

/* === Z-Index Utilities === */
.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-50 {
    z-index: 50;
}

.z-100 {
    z-index: 100;
}

/* === Shipping-Specific Utilities === */
/* Contenedor del botón "Ver más opciones" */
.shipping-btn-container {
    text-align: center;
    margin-top: 0.75rem;
}

/* Botón "Ver más opciones" */
.shipping-btn-toggle {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
}

/* Contenedor de contenido completo */
.shipping-content-full {
    width: 100%;
}

/* Contenedor del título con badges */
.shipping-title-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Badge "MÁS BARATA" */
.shipping-badge-cheapest {
    background: #27ae60;
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Badge "MÁS RÁPIDA" */
.shipping-badge-fastest {
    background: #3498db;
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Costo del envío */
.shipping-cost {
    margin-top: 0.5rem;
    font-weight: 600;
    font-size: 1.1em;
}

/* Contenedor de puntos de retiro */
.pickup-points-container {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--checkout-bg-secondary, #f8f9fa);
    border-radius: 8px;
}

/* Título de puntos de retiro */
.pickup-points-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

/* Select de puntos de retiro */
.pickup-point-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--checkout-border, #dee2e6);
    border-radius: 4px;
    font-size: 0.875rem;
}

/* === Button States === */
/* Estado "copiado" para botones */
.btn-copied {
    background: var(--color-success, #22c55e) !important;
    transition: background 0.2s ease;
}

/* === Tooltip Utilities === */
/* Tooltip para opciones bloqueadas */
.locked-tooltip {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Estado visible del tooltip */
.locked-tooltip.active {
    opacity: 1;
}

/* === Body Utilities === */
/* Bloquear scroll del body cuando modal está abierto */
body.modal-open {
    overflow: hidden !important;
}