/* === UTILIDADES CSS - KEIMADA LIVE === */
/* Clases utility para uso común en componentes */

/* === GRADIENTES UTILITY CLASSES === */
.bg-gradient-primary {
    background: var(--gradient-keimada-primary);
}

.bg-gradient-card {
    background: var(--gradient-keimada-card);
}

.bg-gradient-overlay {
    background: var(--gradient-keimada-overlay);
}

.bg-gradient-subtle {
    background: var(--gradient-keimada-subtle);
}

.text-gradient {
    background: var(--gradient-keimada-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === SOMBRAS UTILITY CLASSES === */
.shadow-sm {
    box-shadow: var(--shadow-keimada-sm);
}

.shadow-md {
    box-shadow: var(--shadow-keimada-md);
}

.shadow-lg {
    box-shadow: var(--shadow-keimada-lg);
}

.shadow-glow {
    box-shadow: var(--shadow-keimada-glow);
}

/* === SPACING UTILITIES === */
.p-frame {
    padding: var(--frame-padding);
}

.m-frame {
    margin: var(--frame-padding);
}

.gap-card {
    gap: var(--card-gap);
}

/* === RESPONSIVE UTILITIES === */
.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

@media (min-width: 769px) {
    .mobile-only {
        display: none;
    }
    
    .desktop-only {
        display: block;
    }
}

/* === FLEX UTILITIES === */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* === GRID UTILITIES === */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
    gap: var(--card-gap);
}

/* === TEXT UTILITIES === */
.text-primary {
    color: var(--primary-color);
}

.text-accent {
    color: var(--accent-text);
}

.text-light {
    color: var(--text-color-light);
}

.text-dark {
    color: var(--text-color-dark);
}

/* === BACKGROUND UTILITIES === */
.bg-primary {
    background: var(--primary-color);
}

.bg-secondary {
    background: var(--secondary-color);
}

.bg-card {
    background: var(--card-bg);
}

.bg-dark {
    background: var(--background-dark);
}

/* === BORDER UTILITIES === */
.border-primary {
    border-color: var(--border-color);
}

.border-accent {
    border-color: var(--accent-color);
}

/* === Z-INDEX UTILITIES === */
.z-base {
    z-index: var(--z-base);
}

.z-header {
    z-index: var(--z-header);
}

.z-navigation {
    z-index: var(--z-navigation);
}

.z-fab {
    z-index: var(--z-fab);
}

.z-modal {
    z-index: var(--z-modal-content);
}

.z-critical {
    z-index: var(--z-critical-alert);
}

/* === POSITION UTILITIES === */
.fixed-top-right {
    position: fixed;
    top: 20px;
    right: 20px;
}

.fixed-bottom-right {
    position: fixed;
    bottom: 30px;
    right: 30px;
}

.fixed-top-left {
    position: fixed;
    top: 80px;
    left: 20px;
}

.fixed-bottom-left {
    position: fixed;
    bottom: 100px;
    left: 20px;
}

/* === VISIBILITY UTILITIES === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

/* === INTERACTIVE UTILITIES === */
.cursor-pointer {
    cursor: pointer;
}

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

.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

/* === OVERFLOW UTILITIES === */
.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-scroll {
    overflow: scroll;
}

/* === RESPONSIVE MOBILE ADJUSTMENTS === */
@media (max-width: 768px) {
    .fixed-top-right {
        top: 10px;
        right: 10px;
    }
    
    .fixed-bottom-right {
        bottom: 20px;
        right: 20px;
    }
    
    .fixed-top-left {
        top: 70px;
        left: 10px;
    }
    
    .fixed-bottom-left {
        bottom: 80px;
        left: 10px;
    }
    
    .mobile-full-width {
        left: 10px !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
    }
}