/* Estenedor principal */
.tec {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
}

/* Base común para todas las etiquetas */
.tec span {
    text-transform: uppercase;
    border-radius: 4px;
    padding: 5px 15px;
    height: 28px;
    font-size: 0.85em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.tec i { margin-right: 8px; }

/* --- CATEGORÍAS --- */

.html { color: #e34f26; border: 1px solid #e34f26; }
.css { color: #1572b6; border: 1px solid #1572b6; }
.js { color: #f7df1e; border: 1px solid #f7df1e; }
.react { color: #61dafb; border: 1px solid #61dafb; }

/* Backend & Lenguajes */
.nodejs { color: #68a063; border: 1px solid #68a063; }
.php { color: #777bb4; border: 1px solid #777bb4; }
.python { color: #3776ab; border: 1px solid #3776ab; }
.java, .cpp { color: #f83030; border: 1px solid #f83030; }

/* Bases de Datos */
.sql { color: #ffae00; border: 1px solid #ffae00; }

/* Automatización y Bots */
.bot_wsp { color: #25d366; border: 1px solid #25d366; }
.scraping { color: #ff5722; border: 1px solid #ff5722; }
.api { color: #00bcd4; border: 1px solid #00bcd4; }

/* Mantenimiento y Redes */
.hardware { color: #a55eea; border: 1px solid #a55eea; }
.limpieza, .redes { color: #00d4ff; border: 1px solid #00d4ff; }
.diagnostico { color: #eb3b5a; border: 1px solid #eb3b5a; }

/* Diseño y General */
.web { color: #f87930; border: 1px solid #f87930; }
.figma { color: #a259ff; border: 1px solid #a259ff; }
.ui { color: #ff5e00; border: 1px solid #ff5e00; }