@charset "utf-8";
.box-views p{margin-bottom: 0px;}
.box-views.card{background-color: #fff; border-radius: 0px 18px}
.box-views .tag-primary a{background-color: #006a5b!important;margn-right: 3px;padding:2px 4px;}
.box-views .tag-secondary a{background-color: #ff8000!important;margn-right: 3px;padding:2px 4px;}
.box-views .tag-primary,.box-views .tag-secondary{border-radius: 0px;}
.box-views .tag{font-size: var( --font-size-small);padding-bottom: 10px;}
.box-views .change p{font-size: var( --font-size-tag-views); padding: 10px;background-color: #006a5b;border-radius: 0px 18px;color: #FFF;}
.box-views .tag-primary a,
.box-views .tag-secondary a, 
.box-views a.animated-button {text-decoration: none;color:var(--font-size-small);}
.box-views .text {font-size:var(--font-size-small);}
.box-views a.animated-button:hover{color:#FFF;}
.box-views .tag-primary a,
.box-views .tag-secondary a{font-size: var(--font-size-small)!important;margin-bottom: 4px;}
.date time{font-size: var(--font-size-small);}
.box-views .tag-primary a:hover .box-views .tag-primary{background-color: #ccc!important;}
.box-views .badge{padding:0px; display: flex;justify-content: flex-start;flex-wrap: wrap;}
/* Botón animado corregido */
.animated-button {max-width: 200px;position: relative;display: flex;align-items: center;gap: 8px;padding: 6px 32px;border: 4px solid transparent;font-size: 16px;background-color: #f1f1f1;border-radius: 100px;font-weight: 600;box-shadow: 0 0 0 2px #006a5b;cursor: pointer;overflow: hidden;transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);text-decoration: none;}
.animated-button img {position: relative;width: 10px;z-index: 9;transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
/* Posicionamiento inicial de las flechas */
.animated-button .arr-1 {right: 16px;position: absolute;}
.animated-button .arr-2 {left: -25%;position: absolute;}
.animated-button .circle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 20px;height: 20px;background-color: #006a5b;border-radius: 50%;opacity: 0;transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);}
.animated-button .text {position: relative;z-index: 1;transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);}/* Efectos al pasar el mouse */
.animated-button:hover {box-shadow: 0 0 0 12px transparent;color: #212121;border-radius: 12px;}
.animated-button:hover .arr-1 {right: -25%;}
.animated-button:hover .arr-2 {left: 16px;}
.animated-button:hover .text {transform: translateX(12px);}
.animated-button:hover img {filter: invert(100%) sepia(45%) saturate(0%) hue-rotate(265deg) brightness(112%) contrast(100%);}
.animated-button:active {scale: 0.95;box-shadow: 0 0 0 4px #57b6b1;}
.animated-button:hover .circle {width: 220px;height: 220px;opacity: 1;}
.results{background-color: #ffcd37; color: var(--text-color);}
.results{margin-bottom: 0px;padding: 5px;}
.card{border-color: #57b6b2;}
.card:hover .change p{background-color: #333;}
.box-views.card:hover{background-color: #57b6b21a;  transition: all 0.3s ease;}
.content-views{gap:20px;}
/*Filter display*/
#selected-filters-display {
    display: inline-block;
    background-color: #f1f1f1;
    border: 0px solid #dee2e6;
    padding: 25px 6px;
    border-radius: 0px!important;
    font-size: var(--font-size-small);
}

/* Diseño de las etiquetas de los filtros */
.filter-badge {
    display: inline-flex;
    align-items: center;
    background-color: #006a5b!important;
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-right: 8px;
    margin-bottom: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.filter-badge:hover {
    background-color: #57b6b2;
}

/* Icono de la X */
.filter-badge::after {
    content: "✖";
    font-size: 14px;
    margin-left: 8px;
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Efecto hover sobre la X */
.filter-badge:hover::after {
    transform: scale(1.2);
}

/* Estilo para "Any" cuando no hay filtros */
.badge.bg-secondary {
    background-color: #000;
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}
@media (max-width: 475px) {
.animated-button .circle {background-color: #006a5b20;transition: all 0s}
}