/* ============================================
   ICONOGRAPHY SYSTEM
   Iconos optimizados para visibilidad
   ============================================ */

/* ===== Icon Base ===== */
.icon {
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    transition: all var(--transition-base);
}

/* ===== Icon Sizes ===== */
.icon-xs {
    width: 14px;
    height: 14px;
}

.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md {
    width: 20px;
    height: 20px;
}

.icon-lg {
    width: 24px;
    height: 24px;
}

.icon-xl {
    width: 32px;
    height: 32px;
}

.icon-2xl {
    width: 40px;
    height: 40px;
}

/* ===== Icon States ===== */
.icon:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.icon:active {
    transform: scale(0.95);
}

/* ===== Icon Colors ===== */
.icon-primary {
    color: var(--text-primary);
}

.icon-secondary {
    color: var(--text-secondary);
}

.icon-cyan {
    color: var(--color-cyan-400);
}

.icon-green {
    color: var(--color-green-400);
}

.icon-yellow {
    color: var(--color-yellow-500);
}

.icon-red {
    color: var(--color-red-500);
}

/* ===== SVG Optimization ===== */
svg.icon {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke: currentColor;
}

svg.icon-filled {
    fill: currentColor;
    stroke: none;
}

/* ===== Icon Button ===== */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
}

.icon-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.icon-button:active {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(0.95);
}