/**
 * ============================================
 * ESTILOS UNIFICADOS PARA ETIQUETAS/TAGS
 * ============================================
 * 
 * Archivo común para todas las etiquetas de la plataforma.
 * Usar las clases aquí definidas para mantener consistencia visual.
 * 
 * Clases disponibles:
 * - .tag-badge: Etiqueta básica (badge simple)
 * - .tag-pill: Etiqueta tipo pill para filtros (con estados active/hover)
 * - .tag-count: Contador dentro de una etiqueta
 * - .tags-container: Contenedor flex para múltiples tags
 * 
 * Categorías de ANIMALES y colores de borde:
 * - geolocalizacion: primary (#0d6efd)
 * - raza: info (#0dcaf0)
 * - caracteristica_fisica: secondary (#6c757d)
 * - comportamiento: success (#198754)
 * - compatibilidad: warning (#ffc107)
 * - hogar: cyan (#0dcaf0)
 * - salud_necesidades: danger (#dc3545)
 * - urgencia_origen: dark (#212529)
 * 
 * Categorías de ARTÍCULOS y colores de borde:
 * - Adopción: success (#198754)
 * - Legal: dark (#212529)
 * - Salud: danger (#dc3545)
 * - Alimentación: warning (#ffc107)
 * - Educación: info (#0dcaf0)
 * - Cuidados: secondary (#6c757d)
 * - Productos: primary (#0d6efd)
 * - Lifestyle: purple (#6f42c1)
 * - Razas: teal (#20c997)
 */

/* ===== CONTENEDOR DE TAGS ===== */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ===== TAG BADGE (Etiqueta básica) ===== */
/* Usado en: ficha de animal, ficha de artículo */
.tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    background-color: #f8f9fa;
    color: #212529;
    border: 2px solid #dee2e6;
}

.tag-badge:hover {
    background-color: #e9ecef;
    text-decoration: none;
    color: #212529;
}

.tag-badge i {
    margin-right: 0.35rem;
}

/* ===== COLORES DE BORDE POR CATEGORÍA ===== */
.tag-badge[data-categoria="geolocalizacion"] {
    border-color: #0d6efd;
}
.tag-badge[data-categoria="geolocalizacion"]:hover {
    border-color: #0a58ca;
    background-color: #e7f1ff;
}

.tag-badge[data-categoria="raza"] {
    border-color: #0dcaf0;
}
.tag-badge[data-categoria="raza"]:hover {
    border-color: #0aa2c0;
    background-color: #cff4fc;
}

.tag-badge[data-categoria="caracteristica_fisica"] {
    border-color: #6c757d;
}
.tag-badge[data-categoria="caracteristica_fisica"]:hover {
    border-color: #565e64;
    background-color: #e2e3e5;
}

.tag-badge[data-categoria="comportamiento"] {
    border-color: #198754;
}
.tag-badge[data-categoria="comportamiento"]:hover {
    border-color: #146c43;
    background-color: #d1e7dd;
}

.tag-badge[data-categoria="compatibilidad"] {
    border-color: #ffc107;
}
.tag-badge[data-categoria="compatibilidad"]:hover {
    border-color: #cc9a06;
    background-color: #fff3cd;
}

.tag-badge[data-categoria="hogar"] {
    border-color: #0dcaf0;
}
.tag-badge[data-categoria="hogar"]:hover {
    border-color: #0aa2c0;
    background-color: #cff4fc;
}

.tag-badge[data-categoria="salud_necesidades"] {
    border-color: #dc3545;
}
.tag-badge[data-categoria="salud_necesidades"]:hover {
    border-color: #b02a37;
    background-color: #f8d7da;
}

.tag-badge[data-categoria="urgencia_origen"] {
    border-color: #212529;
}
.tag-badge[data-categoria="urgencia_origen"]:hover {
    border-color: #000;
    background-color: #d3d3d4;
}

/* ===== COLORES PARA CATEGORÍAS DE ARTÍCULOS (tag-badge) ===== */
.tag-badge[data-categoria="Adopción"],
.tag-badge[data-categoria="Adopcion"] {
    border-color: #198754;
}
.tag-badge[data-categoria="Adopción"]:hover,
.tag-badge[data-categoria="Adopcion"]:hover {
    border-color: #146c43;
    background-color: #d1e7dd;
}

.tag-badge[data-categoria="Legal"] {
    border-color: #212529;
}
.tag-badge[data-categoria="Legal"]:hover {
    border-color: #000;
    background-color: #d3d3d4;
}

.tag-badge[data-categoria="Salud"] {
    border-color: #dc3545;
}
.tag-badge[data-categoria="Salud"]:hover {
    border-color: #b02a37;
    background-color: #f8d7da;
}

.tag-badge[data-categoria="Alimentación"],
.tag-badge[data-categoria="Alimentacion"] {
    border-color: #ffc107;
}
.tag-badge[data-categoria="Alimentación"]:hover,
.tag-badge[data-categoria="Alimentacion"]:hover {
    border-color: #cc9a06;
    background-color: #fff3cd;
}

.tag-badge[data-categoria="Educación"],
.tag-badge[data-categoria="Educacion"] {
    border-color: #0dcaf0;
}
.tag-badge[data-categoria="Educación"]:hover,
.tag-badge[data-categoria="Educacion"]:hover {
    border-color: #0aa2c0;
    background-color: #cff4fc;
}

.tag-badge[data-categoria="Cuidados"] {
    border-color: #6c757d;
}
.tag-badge[data-categoria="Cuidados"]:hover {
    border-color: #565e64;
    background-color: #e2e3e5;
}

.tag-badge[data-categoria="Productos"] {
    border-color: #0d6efd;
}
.tag-badge[data-categoria="Productos"]:hover {
    border-color: #0a58ca;
    background-color: #e7f1ff;
}

.tag-badge[data-categoria="Lifestyle"] {
    border-color: #6f42c1;
}
.tag-badge[data-categoria="Lifestyle"]:hover {
    border-color: #59359a;
    background-color: #e2d9f3;
}

.tag-badge[data-categoria="Razas"] {
    border-color: #20c997;
}
.tag-badge[data-categoria="Razas"]:hover {
    border-color: #1aa179;
    background-color: #d2f4ea;
}

/* ===== TAG PILL (Para filtros interactivos) ===== */
/* Usado en: listado de artículos, listado de animales por etiquetas */
.tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid #dee2e6;
    text-decoration: none;
    color: #212529;
    background-color: #f8f9fa;
    white-space: nowrap;
    min-height: 44px; /* Área táctil óptima mobile */
    user-select: none;
    position: relative;
    overflow: hidden;
}

/* Efecto ripple al hacer click (feedback táctil) */
.tag-pill::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.tag-pill:active::before {
    width: 300px;
    height: 300px;
}

.tag-pill:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tag-pill.active {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    border-color: #0d6efd;
    color: white;
    font-weight: 600;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

.tag-pill.active::before {
    background: rgba(255, 255, 255, 0.3);
}

.tag-pill.active:hover {
    background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%);
    border-color: #0a58ca;
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4);
}

.tag-pill:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}

.tag-pill i {
    margin-right: 0.4rem;
    transition: transform 0.25s ease;
    position: relative;
    z-index: 1;
}

.tag-pill.active i {
    transform: scale(1.1);
}

.tag-text {
    position: relative;
    z-index: 1;
}

/* ===== COLORES DE BORDE PARA TAG-PILL POR CATEGORÍA ===== */
.tag-pill[data-categoria="geolocalizacion"] {
    border-color: #0d6efd;
}
.tag-pill[data-categoria="geolocalizacion"]:hover {
    border-color: #0a58ca;
    background-color: #e7f1ff;
}

.tag-pill[data-categoria="raza"] {
    border-color: #0dcaf0;
}
.tag-pill[data-categoria="raza"]:hover {
    border-color: #0aa2c0;
    background-color: #cff4fc;
}

.tag-pill[data-categoria="caracteristica_fisica"] {
    border-color: #6c757d;
}
.tag-pill[data-categoria="caracteristica_fisica"]:hover {
    border-color: #565e64;
    background-color: #e2e3e5;
}

.tag-pill[data-categoria="comportamiento"] {
    border-color: #198754;
}
.tag-pill[data-categoria="comportamiento"]:hover {
    border-color: #146c43;
    background-color: #d1e7dd;
}

.tag-pill[data-categoria="compatibilidad"] {
    border-color: #ffc107;
}
.tag-pill[data-categoria="compatibilidad"]:hover {
    border-color: #cc9a06;
    background-color: #fff3cd;
}

.tag-pill[data-categoria="hogar"] {
    border-color: #0dcaf0;
}
.tag-pill[data-categoria="hogar"]:hover {
    border-color: #0aa2c0;
    background-color: #cff4fc;
}

.tag-pill[data-categoria="salud_necesidades"] {
    border-color: #dc3545;
}
.tag-pill[data-categoria="salud_necesidades"]:hover {
    border-color: #b02a37;
    background-color: #f8d7da;
}

.tag-pill[data-categoria="urgencia_origen"] {
    border-color: #212529;
}
.tag-pill[data-categoria="urgencia_origen"]:hover {
    border-color: #000;
    background-color: #d3d3d4;
}

/* ===== COLORES PARA CATEGORÍAS DE ARTÍCULOS (tag-pill) ===== */
.tag-pill[data-categoria="Adopción"],
.tag-pill[data-categoria="Adopcion"] {
    border-color: #198754;
}
.tag-pill[data-categoria="Adopción"]:hover,
.tag-pill[data-categoria="Adopcion"]:hover {
    border-color: #146c43;
    background-color: #d1e7dd;
}

.tag-pill[data-categoria="Legal"] {
    border-color: #212529;
}
.tag-pill[data-categoria="Legal"]:hover {
    border-color: #000;
    background-color: #d3d3d4;
}

.tag-pill[data-categoria="Salud"] {
    border-color: #dc3545;
}
.tag-pill[data-categoria="Salud"]:hover {
    border-color: #b02a37;
    background-color: #f8d7da;
}

.tag-pill[data-categoria="Alimentación"],
.tag-pill[data-categoria="Alimentacion"] {
    border-color: #ffc107;
}
.tag-pill[data-categoria="Alimentación"]:hover,
.tag-pill[data-categoria="Alimentacion"]:hover {
    border-color: #cc9a06;
    background-color: #fff3cd;
}

.tag-pill[data-categoria="Educación"],
.tag-pill[data-categoria="Educacion"] {
    border-color: #0dcaf0;
}
.tag-pill[data-categoria="Educación"]:hover,
.tag-pill[data-categoria="Educacion"]:hover {
    border-color: #0aa2c0;
    background-color: #cff4fc;
}

.tag-pill[data-categoria="Cuidados"] {
    border-color: #6c757d;
}
.tag-pill[data-categoria="Cuidados"]:hover {
    border-color: #565e64;
    background-color: #e2e3e5;
}

.tag-pill[data-categoria="Productos"] {
    border-color: #0d6efd;
}
.tag-pill[data-categoria="Productos"]:hover {
    border-color: #0a58ca;
    background-color: #e7f1ff;
}

.tag-pill[data-categoria="Lifestyle"] {
    border-color: #6f42c1;
}
.tag-pill[data-categoria="Lifestyle"]:hover {
    border-color: #59359a;
    background-color: #e2d9f3;
}

.tag-pill[data-categoria="Razas"] {
    border-color: #20c997;
}
.tag-pill[data-categoria="Razas"]:hover {
    border-color: #1aa179;
    background-color: #d2f4ea;
}

/* ===== CONTADOR DE TAGS ===== */
.tag-count {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    transition: all 0.25s ease;
    position: relative;
    z-index: 1;
}

.tag-pill:hover .tag-count {
    background: rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}

.tag-pill.active .tag-count {
    background: rgba(255, 255, 255, 0.35);
    font-weight: 700;
}

/* ===== TAG COMO ENLACE ===== */
.tag-badge[href],
.tag-pill[href] {
    cursor: pointer;
}

.tag-badge[href]:hover,
.tag-pill[href]:hover {
    text-decoration: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .tag-badge {
        font-size: 0.8rem;
        padding: 0.4rem 0.7rem;
    }
    
    .tag-pill {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
}