/* Mixins CSS usando custom properties y clases de utilidad */

/* Mixin para iconos SVG */
.icon-base {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

/* Clases específicas para cada icono usando mask para currentColor */
.icon-people { 
    background-color: currentColor;
    mask: url('../../images/icons/people.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/people.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-book { 
    background-color: currentColor;
    mask: url('../../images/icons/book.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/book.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-newspaper { 
    background-color: currentColor;
    mask: url('../../images/icons/newspaper.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/newspaper.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-arrow-right { 
    background-color: currentColor;
    mask: url('../../images/icons/arrow-right.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/arrow-right.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-suitcase { 
    background-color: currentColor;
    mask: url('../../images/icons/suitcase.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/suitcase.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-heart { 
    background-color: currentColor;
    mask: url('../../images/icons/heart.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/heart.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-hand { 
    background-color: currentColor;
    mask: url('../../images/icons/hand.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/hand.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-mortarboard { 
    background-color: currentColor;
    mask: url('../../images/icons/mortarboard.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/mortarboard.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-cake { 
    background-color: currentColor;
    mask: url('../../images/icons/cake.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/cake.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-calendar { 
    background-color: currentColor;
    mask: url('../../images/icons/calendar.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/calendar.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-menu { 
    background-color: currentColor;
    mask: url('../../images/icons/menu.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/menu.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-building { 
    background-color: currentColor;
    mask: url('../../images/icons/building.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/building.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-calculator { 
    background-color: currentColor;
    mask: url('../../images/icons/calculator.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/calculator.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-calendar-2 { 
    background-color: currentColor;
    mask: url('../../images/icons/calendar-2.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/calendar-2.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-code { 
    background-color: currentColor;
    mask: url('../../images/icons/code.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/code.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-graph { 
    background-color: currentColor;
    mask: url('../../images/icons/graph.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/graph.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-location { 
    background-color: currentColor;
    mask: url('../../images/icons/location.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/location.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-shield { 
    background-color: currentColor;
    mask: url('../../images/icons/shield.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/shield.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-suit { 
    background-color: currentColor;
    mask: url('../../images/icons/suit.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/suit.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-caret-left { 
    background-color: currentColor;
    mask: url('../../images/icons/caret-left.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/caret-left.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-caret-right { 
    background-color: currentColor;
    mask: url('../../images/icons/caret-right.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/caret-right.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-external-link { 
    background-color: currentColor;
    mask: url('../../images/icons/external-link.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/external-link.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-bell { 
    background-color: currentColor;
    mask: url('../../images/icons/bell.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/bell.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-circle-question-mark { 
    background-color: currentColor;
    mask: url('../../images/icons/circle-question-mark.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/circle-question-mark.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-paperplane { 
    background-color: currentColor;
    mask: url('../../images/icons/paperplane.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/paperplane.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-save { 
    background-color: currentColor;
    mask: url('../../images/icons/save.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/save.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.icon-upload-file { 
    background-color: currentColor;
    mask: url('../../images/icons/upload-file.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../../images/icons/upload-file.svg') no-repeat center;
    -webkit-mask-size: contain;
}


/* Mixin para botones */
.btn-base {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    user-select: none;
}

/* Mixin para responsive */
@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .container-base,
    .container-fluid {
        padding: 0 var(--spacing-md);
    }
    
    .heading-1 {
        font-size: var(--font-size-3xl);
    }
    
    .heading-2 {
        font-size: var(--font-size-2xl);
    }
}