:root {
    /* color */
    --green: #CDC200;
    --green-2: #59DD7D;
    --green-3: #00C435;
    --black: #2B2620;
    --greay: #F5F5F5;
    --blue-dark: #465F9F;
    --blue-light: #43A5F8;
    --red: #EA0F0F;
    --purple: #971FEF;
    --yellow-light: #FAF8CC;
    --yellow-dark: #F4F1AC;
}
body{
    overflow-x: hidden;
    width:100vw;
    position: relative;
}

body.view-profile #multilenguage button{
    border-left: 0px solid transparent;
}
body.view-registration #alerts,
body.view-registration #search,
body.view-registration #more-actions,
body.view-login #alerts,
body.view-login #search,
body.view-login #more-actions,
body.view-profile #alerts,
body.view-profile #search,
body.view-profile #more-actions{
    display: none;
}


figure{
    margin: 0;
}
p {
    font-size: 18px;
    font-weight: 300;
    color: #4A503B;
}

.modal-backdrop {
    background-color: transparent;
}

.lazy-slick figure img{
    max-width: none;

}
/* substituir esta clase por el iframe del mapa */
.mapa {
    position: relative;
    /* margin-top: 70px; */
    z-index: -1;
    /* height: calc(100vh - 70px); */
    height: calc(100vh);
    width: 100vw;
    transition: 0.3s ease-in-out;
}

button.thunder-fake{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 40%;
    left: 50%;
    background-color: transparent;
    border: 0px solid transparent;
    cursor: pointer;
}

@media(max-width:992px) {
    .mapa {
        height: calc(100vh - 160px);
        margin-top: 120px;
    }
}

/* style header */

header {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    height: 70px;
    width: 100vw;
    padding: 16px;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
}

@media(max-width:992px) {
    header {
        padding: 0px;
        display: flex;
        flex-direction: column;
        height: fit-content;
    }

    header .header {
        /* z-index: 1; */
        padding: 16px;
        background-color: #fff;
    }
}

header #Navmenu {
    background-color: #ffffff;
}

header .header {
    display: flex;
    flex-direction: row;
}

header .logos-header,
header .actions-header {
    display: flex;
    flex-direction: row;
    margin: auto 0;
}

header .logos-header a {
    display: flex;
    width: auto;
    height: 32px;
    margin: 0 30px;
}

header .logos-header a img {
    height: 32px;
}

header .actions-header {
    margin: auto 0 auto auto;
    height: 100%;
}

@media(max-width:992px) {
    header .logos-header {
        margin: 0 auto 0 0;
    }

    header .logos-header a {
        margin: 0 0 0 24px;
    }

    header .logos-header a img {
        height: 32px !important;
        width: auto;
    }

    header .actions-header {
        padding: 0 16px 16px 16px;
        margin: 0;
        width: 100%;
        transition: 0.5s ease-in-out;
    }

    header .actions-header.swicher {
        margin-top: -108px;
    }
}

header #openNav-left {
    background-color: transparent;
    border: 0px solid transparent;
    height: fit-content;
    width: fit-content;
    margin: auto 0;
}

#Navmenubtn {
    background-color: none;
    border: 0px solid transparent;
    background-color: transparent;
    margin: auto 0;
    height: auto;
    width: auto;
}

#Navmenu {
    background-color: var(--green);
    padding: 24px;
    display: flex;
    flex-direction: column;
    border: 0px solid transparent;
}


#Navmenu button {
    background-color: transparent;
    border: 0px solid transparent;
    display: flex;
    height: auto;
    width: auto;
    margin-bottom: 24px;
}

#Navmenu ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

#Navmenu ul li {
    padding: 0;
}

#Navmenu ul li a {
    text-transform: uppercase;
    display: flex;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    margin: 8px 0;
    color: var(--black);
}

button#alerts,
button#search,
button#more-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 500px;
    width: fit-content;
    height: 100%;
    padding: 8px 20px;
    margin-left: 16px;
    border: 0px solid transparent;
    background-color: var(--greay);
    color: var(--black);
    transition: 0.3s ease-in-out;
}

@media(max-width:992px) {

    button#alerts,
    button#search,
    button#more-actions {
        height: fit-content;
        margin-left: 0px;
        margin-right: 16px;
    }
}

button#alerts {
    line-height: 100%;
    text-align: center;
    font-size: 16px;
    border: 0px solid transparent;
    background-color: var(--yellow-dark);
    color: var(--black);
}

button#alerts strong {
    font-weight: 600;
    margin: auto 8px;
}

button#alerts span {
    font-weight: 400;
}

@media(max-width:992px) {
    button#alerts span {
        display: none;
    }
}

button#more-actions.dropdown-toggle::after {
    display: none;
}

.actions-header .dropdown-menu {
    border: 0px solid;
    border-radius: 8px;
    padding: 16px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.actions-header .dropdown-menu .dropdown-item {
    padding: 8px 0;
    border-bottom: 1px solid #E5E5E5;
}

.actions-header .dropdown-menu .dropdown-item img {
    padding-right: 8px;
}

.actions-header .dropdown-menu li:first-of-type .dropdown-item {
    padding-top: 0;
}

.actions-header .dropdown-menu li:last-of-type .dropdown-item {
    border-bottom: 0px transparent;
    padding-bottom: 0px;
}

.actions-header .dropdown-menu .dropdown-item:focus,
.dropdown-item:hover {
    background-color: #fff;
}



#multilenguage .mod-languages__select {
    height: 100%;
}
#multilenguage button {
    padding: 0 24px;
    margin: auto 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    height: 100%;
    border: 0px solid transparent;
    border-right: 1px solid #C5C5C5;
    border-left: 1px solid #C5C5C5;

    background-color: transparent;
    font-size: 16px;
    color: var(--black);
    font-weight: 300;
    transition: 0.3s ease-in-out;

    border-radius: 0;
}
@media(max-width:992px) {
    #multilenguage button{
        border: 0px solid transparent;
        margin: 0 ;
        padding: 0;
    }
    #multilenguage{
        position: absolute;
        top: 16px;
        right: 16px;
        height: fit-content;
        border: 0px solid transparent;
        margin: 0;
        padding: 0;
    }
}
#multilenguage button::after{
    display: none;
}
#multilenguage button i{
    margin:auto 0 auto 4px;
}
#multilenguage .dropdown-menu{
    min-width: inherit;
    width: 87.54px;
    overflow: hidden;
    flex-direction: column;
    padding:0;
}
#multilenguage .dropdown-menu li{
    width: 100%;
}
#multilenguage .dropdown-menu li a{
    padding:4px 16px 4px 16px;
    color: var(--black);
    text-decoration: none;
    background-color: transparent;
    font-size: 16px;
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 300;
}
#multilenguage .dropdown-menu li:focus a,
#multilenguage .dropdown-menu li.lang-active a{
    background-color: var(--yellow-light);
}
#multilenguage .dropdown-menu li:hover a{
    background-color: var(--yellow-dark);
}
#user {
    display: flex;
    flex-direction: row;
    height: 100%;
}
#user  a{
    overflow: hidden;
    border-radius: 500px;
    width: 38px;

    position: relative;
    min-height: 38px;
    min-width: 38px
}
#user  a img{
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
}

@media(max-width:767px) {
    #user {
        position: absolute;
        top: 16px;
        right: 70px;
        height: fit-content;
        border: 0px solid transparent;
        margin: 0;
        padding: 0;
    }
}

#btn-user-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto 0 auto 16px;
    height: 100%;
    background-color: #fff;
    border: 0px solid transparent;
}

#offcanvasRightUser {
    background-color: var(--black);
    display: flex;
    flex-direction: column;
    padding: 24px 36px;
    width: 600px;
    height: calc(100vh -70px);
}
@media(max-width:992px){
    #offcanvasRightUser {
        height: 100vh;
    }
}
#offcanvasRightUser button {
    background-color: transparent;
    border: 0pc solid transparent;
    margin: 0 0 0 auto;
    display: flex;
    width: fit-content;
    padding: 0;
}

#offcanvasRightUser ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 48px 0 0 0;
    padding: 0;
    color: #FFFFFF;
}

#offcanvasRightUser ul li {
    margin: 0;
    padding: 0;
    width: 100%;
}

#offcanvasRightUser ul li a {
    display: flex;
    flex-direction: row;
    color: #FFFFFF;
    padding: 0 0 24px 0;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    width: 100%;
}

#offcanvasRightUser ul li:first-of-type,
#offcanvasRightUser ul li:last-of-type {
    border-bottom: 1px solid #707070;
    margin-bottom: 24px;
}

#offcanvasRightUser ul li a img {
    margin: 0 16px 0 0;
}

#offcanvasRightUser ul li a span {
    height: 100%;
    line-height: 100%;
    background-color: var(--yellow-light);
    color: var(--black);
    border-radius: 500px;
    padding: 4px 16px;
    margin-left: 16px;
}

.contentRS {
    margin-top: auto;
    margin-bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column
}

#offcanvasRightUser p {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 16px;
}

#offcanvasRightUser .contentRS ul {
    display: flex;
    flex-direction: row;
    margin: 0;
}

#offcanvasRightUser .contentRS ul li {
    width: fit-content;
    border: 0px solid transparent;
    margin: 0px;
}

#offcanvasRightUser .contentRS ul li a {
    padding: 0;
}

#not-login {
    height: 100%;
}

#not-login a {
    background-color: var(--blue-dark);
    border-radius: 500px;
    padding: 8px 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    width: fit-content;
    text-decoration: none;
}

#not-login img {
    display: none;
}

@media (max-width:992px) {
    #not-login {
        margin: auto 0 auto auto;
    }

    #not-login img {
        display: block;
        height: 16px;
    }

    #not-login {
        height: fit-content;
    }
    #not-login a{
        position: absolute;
        top: 16px;
        padding: 8px;
        right: 80px;
    }
    #not-login a span {
        display: none
    }
}
/* 
footer {
    padding: 24px 16px;
    background-color: #fff;
    width: 100vw;
    height: fit-content;
}

@media(max-width:992px) {
    footer {
        padding: 20px 8px;
    }
}

footer p {
    font-size: 12px;
    color: #666666;
    margin: 0;
    line-height: 17px;
}

footer .logo-footer {
    margin-bottom: 20px
}

footer .col-logo-footer {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}

footer .col-logo-footer a,
footer .col-logo-footer img {
    width: 17%;
}
footer .col-logo-footer a img {
    width: 100%;
}

@media(max-width:992px) {
    footer .logo-footer {
        width: 100%;
    }
    footer .col-logo-footer a,
    footer .col-logo-footer img {
        width: 47%;
        margin-bottom: 24px;
    }
} */

p.title-logos {
    font-size: 12px;
    color: var(--black);
    margin-bottom: 4px;
    padding: 4px 0;
    width: 60%;
    border-top: 1px solid #9F9F9F;
}

@media(max-width:992px) {
    p.title-logos {
        margin-top: 20px;
        margin-bottom: 0px;
        width: 100%;
        border-top: 1px solid #9F9F9F;
    }
}

footer ul {
    padding: 0;
    display: flex;
    flex-direction: row;
    list-style: none;
}

footer ul li {
    padding: 0 1rem 0 0;
}

footer ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    position: relative;
    padding: 4px 0;
}

footer ul li a:hover {
    color: #fff;
}

footer ul li a::before {
    position: absolute;
    content: "";
    width: 0%;
    bottom: 0;
    left: 0;
    transition: 0.3s ease-in-out;
    height: 1px;
    background-color: #666666;
}

footer ul li a:hover::before {
    width: 100%;
}

footer ul li a::after {
    position: absolute;
    transform: translate(-50%, -50%);
    content: "·";
    right: -0.7rem;
    top: 50%;
}

footer ul li:last-of-type a::after {
    display: none;
}


@media(max-width:992px) {
    footer ul {
        margin-top: 0;
        flex-wrap: wrap;
        margin-bottom: 4px;
    }

    footer ul li a {
        font-size: 10px;
    }

    footer ul li a::after {
        content: "";
    }
}


/* login user & partial contacta */

#contacta {
    margin-top: 70px;
    display: flex;
    flex-direction: row;
    margin-top: 116px;
}

#contacta .cnt-text {
    background-color: var(--yellow-light);
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    width: 50vw;
}

#contacta .cnt-img {
    background-image: url("../img/img-contacta.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 600px;
    width: 50vw;
}

#contacta .cnt-text h2 {
    font-family: "Helvetica Nue", sans-serif;
    font-size: 48px;
    font-weight: 700;
    font-stretch: condensed;
    /* No funciona */

}

@media(max-width:992px) {
    #contacta {
        flex-direction: column;
        margin-top: 0px;
    }

    #contacta .cnt-text,
    #contacta .cnt-img {
        width: 100vw;
    }

    #contacta .cnt-text h2 {
        font-size: 32px;
    }
    #contacta h3{
        font-size: 28px;
    }

    #contacta .cnt-img {
        min-height: 300px;
    }
}

#contacta h3 {
    font-family: "Open Sans", sans-serif;
    font-size: 32px;
    font-weight: 600;
    margin-top: 32px;
}

#contacta p:first-of-type {
    font-size: 24px;
    line-height: 36px;
    font-weight: 500;
    color: var(--black);
    width: 80%;
}

#contacta p:last-of-type {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: var(--black);
    width: 55%;
}
@media(max-width:992px){
    #contacta p:last-of-type,
    #contacta p:first-of-type{
        width: 100%;
    }
}
#contacta a {
    margin-top: 32px;
    border-radius: 12px;
    padding: 8px 32px;
    background-color: var(--green);
    color: var(--black);
    text-decoration: none;
    display: flex;
    width: fit-content;
    font-size: 20px;
    font-weight: 400;
}

@media(max-width:992px){
    #contacta a {
        margin-top: 16px;
        width: 100%;
        display: block;
        text-align: center;
    }
}

#form-login {
    margin-top: 70px;
    padding: 40px 24px;
}


@media(max-width:992px) {
    #form-login {
        margin-top: 90px;
        padding: 40px 16px 32px 16px;
    }
}

#form-login form {
    display: flex;
    flex-direction: column;
    width: 80%;
}

#form-login form label {
    font-size: 18px;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 4px;
    margin-top: 20px;
}
@media(max-width:992px){
    #form-login form label{
        font-size: 16px;
        margin-top: 16px;
        margin-bottom: 8px;
    }
}

#form-login form input {
    border: 1px solid #707070;
    border-radius: 6px;
    background-color: #FFFFFF;
    padding: 12px 24px;
    width: 100%;
    color: #4A503B;
    position: relative;
}

#form-login form .chek-mail {
    position: relative;
}

#form-login form .chek-mail.succes input {
    border: 1px solid #00C43540;
}

#form-login form .chek-mail.succes::before {
    z-index: 1;
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--green-3);
}

#form-login form .chek-mail.fail input {
    border: 1px solid #EA0F0F40;
}

#form-login form .chek-mail.fail::before {
    z-index: 1;
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--red);
}

#form-login form button {
    color: #fff;
    background-color: var(--blue-dark);
    padding: 8px 24px;
    border-radius: 12px;
    margin: 24px 0;
    font-weight: 300;
    width: fit-content;
    display: flex;
    border: 0px;
    font-size: 18px;
}

#form-login form a {
    margin-top: 16px;
    color: var(--black);
    text-decoration: underline;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
}

@media(max-width:992px) {
    #form-login form {
        width: 100%;
    }

    #form-login form button.input-password-toggle{
        width: 48px!important;
    }
    #form-login form button {
        display: block;
        margin: 1rem 0 3rem 0;
        width: 100%;
        text-align: center;
        padding: 12px;
    }
    #form-login form a {
        margin: 8px 0;
    }
}

#form-login p.small-custom{
    font-size: .875em;
    margin: 6px 0;
}
@media(max-width:992px){
    #form-login p.small-custom{
        font-size: .8em;
        margin: 4px 0;
    }
}
#form-login .rrss  {
    display: flex;
    flex-direction: column;
    margin: 24px 0;
}
@media(max-width:992px){
    #form-login .rrss{
        margin:0 ;
    }
}
#form-login .rrss  ul{
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0 0 24px 0;
    left: 0;
    list-style: none;
}

#form-login .rrss ul li {
    padding: 0;
    margin: 0 28px 0 0;
    display: flex;
}
@media(max-width:992px){


    #form-login .rrss p{
        margin-bottom: 8px;
    }
    #form-login .rrss ul{
        margin-bottom: 0;
    }
}

#form-login .rrss ul li a {
    border-radius: 6px;
    background-color: #000000;
    font-size: 30px;
    color: #fff;
    transition: 0.3s ease-in-out;
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
    box-shadow: rgba(100, 100, 111, 0.3) 0px 7px 29px 0px;
}

#form-login .rrss ul li a:hover,
#form-login .rrss ul li a:active {
    background-color: #fff;
    color: #000;
}

#form-login .register {
    background-color: #F5F5F5;
    padding: 32px 20% 32px 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
@media(max-width:992px){
    #form-login .register {
        padding: 24px;
    }
}

#form-login .register h2 {}

#form-login .register h3 {
    color: var(--blue-dark);
    font-size: 24px;
    margin-bottom: 0px;
}

#form-login .register p.identado{
    padding-left:24px ;
    margin: 16px 0;
    border-left: 1px solid var(--blue-dark);
    font-size: 16px;
    line-height: 26px;
}
#form-login p a {
    color:var(--blue-dark);
    text-decoration:none;
    font-weight:700;
}
a#login,
#form-login .register a {
    color: #fff;
    font-weight: 300;
    background-color: var(--blue-dark);
    padding: 8px 40px;
    border-radius: 12px;
    text-decoration: none;
    width: fit-content;
    display: flex;
    border: 0px;
    font-size: 18px;
    margin: auto auto 0 0;
}
@media(max-width:992px){
    a#login,#form-login .register a{width: 100%;text-align: center;display: block;margin: 24px 0 0 0; padding: 8px 24px;}
}

/* offcanvas ruttas */

#offcanvasRutas.offcanvas{ 
    width: 500px;
    background-color: #fff;
    border: 0px solid transparent;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
    display: flex;
    flex-direction:column;
    top:70px;
    height:calc(100vh - 70px);
    z-index:1041;
    overflow: scroll;
}
@media(max-width:992px){
    #offcanvasRutas.offcanvas{
        height: 100%;
        top: 0;
        width: 100%;
        overflow-y: auto;
    } 
}
#offcanvasRutas.offcanvas .search-offcanvas{
    padding:0 16px 24px 16px;
    display: flex;
    flex-direction: column;
    border-bottom:1px solid #E5E5E5;
}
#offcanvasRutas.offcanvas .title-offcanvas{
    display:flex;
    flex-direction:row;
    width: 100%;
    font-size: 32px;
    font-weight: 700;
    padding:16px 16px 0 16px;
}
#offcanvasRutas.offcanvas #numResults{
    padding:16px 16px 0 16px;
    width: 100%;
    font-size: 16px;
    
}
#offcanvasRutas.offcanvas .title-offcanvas button{
    margin: auto 0 auto auto;
    display: flex;
    border: 0px solid transparent;
    background-color: transparent;
}

#offcanvasRutas.offcanvas .search-offcanvas label{
    font-size: 18px;
    font-weight: 700;
    margin-bottom:4px
}

#offcanvasRutas.offcanvas .search-offcanvas input{
    padding: 8px 16px;
    color: #999999;
    font-size: 12px;
    font-weight: 400;
    border-radius:4px;
    border:1px solid #999999;
}

.content-radios{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px 16px;
    border-bottom: 1px solid #e5e5e5;
}

.content-radios .radiogrup{
    flex-wrap: wrap;
    display: flex;;
}
.content-radios .radiogrup p {
    width: 100%;
    margin-top:12px;
    margin-bottom:0px;
    font-weight: 600;
    font-size: 16px;
    color:var(--black);
}

.content-radios .radiogrup input:not([type="range"]){
    display: none;
}

.content-radios .radiogrup label img{
    margin-right: 6px;
    height: auto;
    display: flex;
    width: fit-content;
}
.content-radios .radiogrup label{
    background-color: #F5F5F5;
    display: ruby;
    flex-direction: row;
    border-radius: 500px;
    color: var(--black);
    font-size: 16px;
    padding: 8px 20px;
    margin-right: 8px;
    margin-bottom: 8px;
    width: fit-content;
    transition:0.3s ease-in-out;
    cursor: pointer;
}
@media(max-width:992px){
    .content-radios .radiogrup label{
        padding: 8px 16px;
    }
}

.content-radios .radiogrup input:checked+label{
    background-color: var(--green);
}
#offcanvasRutas form a,
#offcanvasRutas form button[type="submit"]{
    background-color: var(--blue-dark);
    color: #fff;
    font-size: 18px;
    padding: 8px 32px;
    display: flex;
    flex-direction: row;
    width: fit-content;
    border-radius: 500px;
    border: 0px solid transparent;
    margin:28px 16px;
}

@media(max-width:992px){
    #offcanvasRutas form a, #offcanvasRutas form button[type="submit"]{
        width: calc(100% - 32px);
        justify-content: center;
    }
}

#offcanvasRutas form a img,
#offcanvasRutas form button[type="submit"] img{
    margin:auto 8px auto 0;
    height: 100%;
    width: auto;
    display: block;
}

button#goback{
    font-size: 16px ;
    border: 0px solid transparent;
    color:#2B2620;
    display: block;
    width: fit-content;
    text-align: center;
    text-decoration:none;
    background-color:#F5F5F5 ;
    padding: 8px 24px;
    border-radius: 500px;
    margin:12px 0 0 16px;
}

#goback i{
    margin-right: 8px;
}

ul.results{
    display:flex;
    flex-direction:column;
    padding:0;
    margin: 0;
    list-style: none;
}

ul.results li{
    padding: 16px;
    border-top:1px solid #e5e5e5;
    display: flex;
    flex-direction: row;
    cursor:pointer;
    transition:0.3s ease-in-out;
    background-color:#fff;
    position:relative;
}
ul.results li:hover,
ul.results li:focus{
    background-color: var(--yellow-light);
}
ul.results li figure{
    width: 64px;
    height: 64px;
    margin-right: 12px;
    overflow: hidden;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

ul.results li p.title-result {
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
    margin-bottom:4px;
}
ul.results li p.stard-end-result{
    font-size:12px;
    font-weight:400;
    color:var(--black);
    margin-bottom:8px;
}
ul.results li .info {
    position:relative;
    width:calc(100% - 76px);
    
}
ul.results li .info a{
    text-decoration: none;
    width: fit-content;
    position: absolute;
    top: 0px;
    right:-16px;
    background-color: var(--yellow-light);
    border-top-left-radius: 500px;
    border-bottom-left-radius: 500px;
    padding: 8px 16px 8px 12px;
    border: 0px solid transparent;
    color: var(--black);
    font-size: 18px;
    transition:0.3s ease-in-out;
}
ul.results li:hover a,
ul.results li:focus a{ background-color: var(--green);}
ul.results li .info a span{ display:none;} 

@media(max-width:992px){
    ul.results li .info a{
        position: relative;
        top: initial;
        right:initial;
        font-size: 16px;
        padding:8px 24px;
        border-radius: 500px;
        display:flex;
        flex-direction: row;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-top:16px
    }
   
    ul.results li .info a span{ display:block;margin-right:8px}  
}
ul.results li ul{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    width: 100%;
    margin:0;
    padding: 0 44px 0 0;
}
@media(max-width:992px){
    ul.results li ul{padding:0;}
}

ul.results li ul li{
   border:0px solid transparent;
   display:flex;
   flex-direction:column;
   font-size:14px;
   padding: 0;
    background-color: transparent;
}
ul.results li ul li p{
    font-size: 16px;
    margin-bottom: 0;
}
ul.results li ul li img{
    height: 24px;
    width: auto;
    margin:0 auto 4px 0;
}

#openFicha{
    color: var(--black);
    font-size: 16px;
    text-decoration: none;
    transition: .3s ease-in-out;
    position: fixed;
    right: -286px;
    top:50%;
    transform:translate(-50%,-50%)rotate(-90deg);
    width: 254px;
    padding:16px 60px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px; */
    background-color:#fff;
    border: 0px solid transparent;
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
    z-index:100000;
}
#openFicha.show{
    right: -226px;
}
#openFicha.show.opened{
    right: calc(60vw - 227px);
}
#openFicha img{
    margin-right: 8px
}

#offcancasFicha-Ruta{
    width: 60vw;
    border: 0px solid;
    height: calc(100vh - 70px);
    top: 70px;
    overflow-y:scroll;
    display: flex;
    flex-direction:column;
}
@media(max-width:992px){
 
    #offcancasFicha-Ruta{
        width: 100vw;
        padding: 24px 0px;
        height: 100vh;
        top: 0;
    }
    #offcancasFicha-Ruta .default-offcanvas{
        padding: 0;
    }
    #openFicha{
        display: none;
    }
}

#offcancasFicha-Ruta .default-offcanvas p strong{
    font-weight: 600;
    color: var(--black);
}
@media(max-width:992px){
    .default-offcanvas img{
        margin-top: 12px;
    }
}
#offcancasFicha-Ruta .default-offcanvas p strong a{
    color: var(--blue-dark);
    text-decoration: underline;
}
#offcancasFicha-Ruta .default-offcanvas{
    display: flex;
    flex-direction:column;
    padding: 0 56px;
    background-color: #fff;
}
#offcancasFicha-Ruta button{
    margin: 0 24px 16px auto;
}
#offcancasFicha-Ruta p.alert-ficha{
    background-color: var(--yellow-dark);
    display: flex;
    flex-direction: row;
    height: auto;
    width:100% ;
    font-size: 16px;
    line-height: normal;
    padding: 4px 12px;
    color: var(--black);

}
#offcancasFicha-Ruta p.alert-ficha img{
    margin-right: 8px;
    height: auto;
    width: auto;
    display: block;
}

.title-ruta {
    display: flex;
    flex-direction: row;
}
.title-ruta a.rolbuton{
    margin: auto 0 auto auto;
    background-color: var(--greay);
    color: var(--black);
    font-size: 0px;
    border-radius: 500px;
    transition: 0.3s ease-in-out;
    padding: 4px 12px;
    display: block;
    width: fit-content;
}
.title-ruta .dropdown{
    margin: auto 0 auto 8px;;
}
.title-ruta .dropdown ul{
    padding: 24px;
    border: 0px solid transparent;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.title-ruta .dropdown ul li{
    border-bottom: 1px solid #E5E5E5;
    display: flex;
    flex: row;
    width: 100%;
    padding: 8px 0;
}
.title-ruta .dropdown ul li:first-of-type{
    padding-top: 0;
}
.title-ruta .dropdown ul li:last-of-type{
    padding-bottom: 0;
    border: 0px solid transparent;
}
.title-ruta .dropdown ul li a{
    height: 100%;
    width: auto;
    margin: 0;
    color: var(--black);
    font-size: 14px;
    padding: 0;
    display: flex;
    flex-direction: row;
    min-width: 174px;
    text-decoration: none;

}
.title-ruta .dropdown ul li a span.a2a_label{
    visibility: visible;
    padding-left: 20px;
    margin: auto 0;
    height: 100%;
    width: 100%;
    font-size: 20px;
    color: var(--black);
    overflow: inherit;
    position: relative!important;
    display: flex;
    clip-path: none;
    z-index: 100;
    

}
.title-ruta .dropdown ul li a img{
    margin-right: 8px;
    height: 20px;
    width: fit-content;
}
.title-ruta p{
    font-size: 32px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 4px;
}
@media(max-width:768px){
    .title-ruta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.title-ruta a.rolbuton{
    font-size: 18px;
    text-decoration: none;
    width: 100%;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.title-ruta a.rolbuton img{
    margin: 0 8px 0 0;
    height: 100%;
    display: flex;
}
.title-ruta .dropdown{
    margin: 0;
    width: 100%;
}
}

.lazy-slick{
    margin-left: -12px;
    margin-right: -12px;
}
 .lazy-slick .slick-slide  {
    margin-bottom: 12px;
    margin-right: 12px;
    margin-left: 12px;
}
 .lazy-slick figure{
    display: block;
    margin: 0!important;
    position: relative;
    height: 300px;
    overflow: hidden;

}

 .lazy-slick figure img{
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
    width: 100%;
    height: auto;
    transition: 0.3s ease-in-out;
}
 .lazy-slick figure:hover img{
    transform: translate(-50%,-50%) scale(1.05);
}

.lazy-slick button.slick-arrow.slick-next{right: 0%;}
.lazy-slick button.slick-arrow.slick-prev{left: 5%;}

@media(max-width:768px){
    .lazy-slick button.slick-arrow.slick-next{right: -1%;}
    .lazy-slick button.slick-arrow.slick-prev{left: 12%;}
}

.lazy-slick button.slick-arrow.slick-next::before{
    content: "\f061";
        font-weight: 900;
        font-family: "Font Awesome 5 Free";
        position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    height: 32px;
    width: 32px;
    font-size: 20px;
    z-index: 100;
}
.lazy-slick button.slick-arrow.slick-prev::before{
    content: "\f060";
        font-weight: 900;
        font-family: "Font Awesome 5 Free";
        position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    height: 32px;
    width: 32px;
    font-size: 20px;
    z-index: 100;
}

 .lazy-slick button.slick-arrow{
    position: absolute;
    top: 50%; 
    transform: translate(-50%,-50%);
    font-size: 0px;
    height: 50px;
    width: 50px;
    border-radius: 500px;
    background-color: #ffffff;
    outline: 3px solid #ffffff70;
    border: 0px ;
    opacity: 0.8;
    transition: 0.3s ease-in-out;
    z-index: 100;
     font-family: "Font Awesome 5 Free";
        position: absolute;

}
.lazy-slick button.slick-arrow:hover{
    opacity: 1;
    background-color: #ffffff;
    outline: 3px solid #ffffff70;
}
.info-extra-ficha {
    padding: 24px 0;
    border-top: 1px solid #E5E5E5;
    width: 100%;
}
.info-extra-ficha img{
    height: 24px;
    width: fit-content;
    display: block;
    margin-bottom: 0;
}
.info-extra-ficha  p {
    font-size: 16px;
    color: var(--black);
    margin-bottom: 0;
}
.info-extra-ficha p strong{
    font-size: 22px;
    font-weight: 700;
}
.info-extra-ficha p.long-p strong{
    font-size:18px ;
}
.info-extra-ficha p.green strong{
    color: var(--green-3);
}

.row-meteo{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 24px 0;
    flex-wrap: wrap;
}

.row-meteo .content-today{
    display: flex;
    flex-direction: column;
    width: 22%;
}
.row-meteo .content-today p{
    font-size: 16px;
    color: var(--black);
}
.row-meteo .content-today p strong{
    font-size: 18px;
    font-weight: 700;
}
.row-meteo .content-today img{
    height: 60px;
    width: fit-content;
    margin-bottom: 20px;
}

.row-meteo .content-fivedays{
    width: 18%;
    direction: flex;
    flex-direction: column;

}
.row-meteo .content-fivedays img{
    height: 40px;
    width: fit-content;
    margin-top: 44px;
    margin-bottom: 20px;
}
.row-meteo .content-fivedays p{
    font-size: 12px;
    color: var(--black);
}
.row-meteo .content-fivedays p strong{
    font-size: 12px;
    font-weight: 700;
}
#offcancasFicha-Ruta .grey-offcanvas{
    padding: 56px;
    background-color:#F5F5F5 ;
}
@media(max-width:992px){
    .row-meteo .content-today{
        width: 46%;
    }
}
@media(max-width:992px){
    .grey-offcanvas,
    #offcancasFicha-Ruta .grey-offcanvas .altimetria{
        padding:12px!important;
    }
}

#offcancasFicha-Ruta .grey-offcanvas .altimetria{
    background-color: #fff;
    padding: 32px 32px;
}

#offcancasFicha-Ruta .grey-offcanvas .altimetria p{
    display: flex;
    flex-direction: row;
    width: 100%;
    font-size: 22px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 16px;
}
#offcancasFicha-Ruta .grey-offcanvas .altimetria p img{
    margin-right: 16px;
}

#offcancasFicha-Ruta .arribar-info{
    display: flex;
    flex-direction: row;
    margin-bottom: 24px;
}

#offcancasFicha-Ruta .title-canvas{
    font-size: 22px;
    margin-top: 44px;
    margin-bottom: 16px;
    color: var(--black);
}
#offcancasFicha-Ruta .arribar-info img{
    display: flex;
    margin: 0 0 auto 0;
    height: 24px;
    width: 24px;
}
#offcancasFicha-Ruta .arribar-info .info{
    padding-left: 16px;

}
#offcancasFicha-Ruta .arribar-info .info p,
#offcancasFicha-Ruta .arribar-info .info a{
    font-size: 16px;
    color: var(--black);
    margin-bottom: 0px;
    font-weight: 300;
}

#offcancasFicha-Ruta a.card-related-path{
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    text-decoration: none;
}

#offcancasFicha-Ruta a.card-related-path figure{
  position: relative;
  margin-bottom: 12px;
  min-height:300px;
  width: 100%;
  overflow: hidden;
}

#offcancasFicha-Ruta a.card-related-path figure img{
    position: absolute;
    transform: translate(-50%,-50%);
    min-height: 300px;
    width: auto;
    top: 50%;
    left: 50%;
    transition: 0.3s ease-in-out;
}
#offcancasFicha-Ruta a.card-related-path:hover figure img{
    transform: translate(-50%,-50%) scale(1.05);
}

#offcancasFicha-Ruta a.card-related-path p{
    font-size: 14px;
    margin-bottom: 4px;
}

#offcancasFicha-Ruta a.card-related-path p:first-of-type{
    font-size: 18px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 4px;
}


/* ficha servei */

#offcanvas-ficha-servei{
    width: 60vw;
    border: 0px solid;
    height: calc(100vh - 70px);
    top: 70px;
    overflow-y: scroll;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
}
@media(max-width:992px){
    #offcanvas-ficha-servei{
        width: 100vw;
        height: 100vh;
        top: 0;
    }
}

#offcanvas-ficha-servei button{
    margin: 0 24px 1rem auto;
}
#offcanvas-ficha-servei .default-offcanvas{
    display: flex;
    flex-direction: column;
    padding: 0 56px;
    background-color: #fff;
}


/* offcanvasIncidencias */
 #offcanvasIncidencias{
    background-color: var(--yellow-dark);
    border: 0px solid transparent;
    top: 70px;
    height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    width: 500px;
 }
 #offcanvasIncidencias button{
    position: absolute;
    top: 16px;
    right: 16px;
 }

 @media(max-width:992px){
    #offcanvasIncidencias{
        height: 100vh;
        top: 0;
        width: 100vw;
    }
 }

 #offcanvasIncidencias p.head-alertas{
    font-size: 32px;
    font-weight: 600;
    color: var(--black);
    margin: 12px 12px 0 12px;
    width: 100%;

 }
 #offcanvasIncidencias ol {
    display: flex;
    flex-direction: column;
    list-style:decimal;
    padding: 0;
 }

 #offcanvasIncidencias ol li {
    padding: 24px 56px 24px 72px ;
    border-bottom:1px solid var(--green);
    position: relative;
    width: 100%;
    transition: 0.3s ease-in-out;
 }

 #offcanvasIncidencias ol li:focus,
 #offcanvasIncidencias ol li:hover{
    background-color: #fff;
 }

 #offcanvasIncidencias ol li div.num{
    border-radius: 500px;
    /* background-color: var(--green); */
    /* background-color: orange; */
    padding: 20px;
    position: absolute;
    top: 28px;
    left:16px;
 }
 #offcanvasIncidencias ol li div.num span{
    font-weight: 600;
    font-size: 20px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
 }
 #offcanvasIncidencias ol li p:first-of-type{
    font-size: 16px;
    color: var(--black);
    margin: 0;
    width: 100%;
    display: block;
    font-weight: 600;
    line-height: 20px;
 }
 #offcanvasIncidencias ol li p:last-of-type{
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    margin-top: 16px;
    margin-bottom: 0;
 }
#offcanvasIncidencias ol li a.rutas{
    font-size: 16px;
    font-weight: 400;
    color: var(--black);
    text-decoration: underline;
}
 
#offcanvasIncidencias ol li a.arrow {
    text-decoration: none;
    width: fit-content;
    position: absolute;
    top: 24px;
    right: 0px;
    background-color: #fff;
    border-top-left-radius: 500px;
    border-bottom-left-radius: 500px;
    padding: 8px 20px 8px 12px;
    border: 0px solid transparent;
    color: var(--black);
    font-size: 18px;
    transition: 0.3s ease-in-out;
 }

 #offcanvasIncidencias ol li a.arrow span{
    display: none;
 } 

 /* offcanvasIncidenciaFicha */

 #offcanvasIncidenciaFicha {
    width: 500px;
    background-color: var(--yellow-dark);
    padding: 56px;
    display: flex;
    flex-direction: column;
    border: 0px solid transparent;
    overflow: scroll;
    height: calc(100vh - 70px);
    top: 70px;
 }

 #offcanvasIncidenciaFicha button{
    margin: 0 0 1rem auto;
 }


 .default-offcanvas{
    padding: 0 24px!important;
}

 @media(max-width:992px){
 
    #offcanvasIncidenciaFicha {
        width: 100vw;
        height: 100vh;
        padding: 16px;
        top: 0;
        overflow: scroll;
    }
 }
 /* user perfil */

 section#user-perfil-section{
    padding: 24px 24px;
    margin-top: 70px;
 }
 @media(max-width:992px){
    section#user-perfil-section{
        margin-top: 90px;
     }
 }
 /* section#user-perfil-section .user-avatar figure {
    border-radius: 500px;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 86px;
 }*/
 section#user-perfil-section .user-avatar figure img{
    /* height: 100%;
    position: absolute;
    transform: translate(-50% , -50%);
    top: 50%;
    left: 50%; */
    border-radius: 500px;
    width: 100%;
    overflow: hidden;
    position: relative;
} 

 @media(max-width:992px){
    section#user-perfil-section .user-avatar figure {
        width: 100%;
    }

 }
 section#user-perfil-section .user-avatar figure a{
    position: absolute;
    border-radius: 500px;
    font-size: 20px;
    color: var(--black);
    background-color: #E5E5E5;
    width: 40px;
    height:40px;
    top: 100%;
    left: 50%;
    transform: translate(-50%,-50%);
 }
 section#user-perfil-section .user-avatar figure a i{
    top: 50%;
    left: 50%;
    position: absolute;
    font-size: 20px;
    transform: translate(-50%,-50%);
 }

 #user-perfil-section .controls{
    display: flex;
    flex-direction: column;
 }
 @media(max-width:992px){
    #user-perfil-section .controls{
        flex-direction: column;
    }
    #user-perfil-section .controls a{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 12px;
        margin-bottom:12px ;
        text-align: center;

    }
 }

 #user-perfil-section .delete__info{
    color:var(--red);
    background-origin: transparent;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    border: 0ps solid transparent;

 }
 #user-perfil-section .save__info {
    background-color: var(--blue-dark);
    border-radius: 500px;
    padding: 8px 32px;
    display: flex;
    flex-direction: row;
    color: #fff;
    margin-bottom: 3rem;
    width: fit-content;
    text-decoration: none;
    margin-right: 3rem;
 }
 #user-perfil-section .save__info i{
    margin-right: 12px;
}

 #myTab.nav.nav-tabs {
    border-bottom: 0px solid transparent;
 }


 #myTab.nav.nav-tabs .nav-link{
    padding: 0px;
    margin: auto;
    border: 2px solid transparent;
    border-bottom:0px transparent solid ;
    font-size: 20px;
    font-weight: 500;
    padding-bottom: 8px;
    color: #2B2620;
    margin-right: 24px;
 }

 #myTab.nav.nav-tabs .nav-link span{
    border-radius: 500px;
    background-color: var(--yellow-dark);
    color: #2B2620;
    padding: 2px 16px;
    font-weight: 600;
    color: black;
    margin-left: 4px;
    font-size: 16px;
 }

 #myTab.nav.nav-tabs .nav-link.show .nav-link, 
 #myTab.nav.nav-tabs .nav-link.active{
    border-bottom: 2px solid var(--green);
 }
 @media(max-width:992px){
    #myTab.nav.nav-tabs {
        margin: 32px 0;
     }
     #myTab.nav.nav-tabs li,
     #myTab.nav.nav-tabs .nav-link{
        width: 100%;
        text-align: left;
        display: flex;
        flex-direction: row;
        margin-bottom: 8px;

     }
     #myTab.nav.nav-tabs .nav-link span{
        margin: auto 0 auto auto;
        display: block;
        width: fit-content;
     }
 }
 form#user-perfil { margin: 32px 0;}
 form#user-perfil .form-item-user{
    display: flex;
    flex-direction: column;
    margin: 16px 0;
 }

 form#user-perfil .form-item-user label{
    font-size: 18px;
    font-weight: 600;
    color:#2B2620;
    margin-bottom: 4px;
 }
 form#user-perfil .form-item-user input{
    font-size: 18px;
    font-weight: 500;
    color:#2B2620;
    border-radius:4px;
    padding:8px 16px ;
    border: 1px solid #999999;
 }
 form#user-perfil .form-check{
    margin-bottom: 24px;
 }
 form#user-perfil .form-check .form-check-label{
    font-size: 18px;
    font-weight: 500;
    color:#2B2620;

 }
 form#user-perfil .form-check-input{
    width: 20px;
    height: 20px;
    padding: 0!important;
 }
 form#user-perfil .form-check-input:checked{
    background-color: var(--green-3);
    border: var(--green-3);
 }
 form#user-perfil .com-users-profile__edit-submit button{
    border-radius: 500px;
    font-size: 18px;
    display: flex;
    flex-direction: row;
    padding: 8px 24px;
    border: 0px solid ;
    margin-top: 24px;
    margin-right: 16px;
    max-width: 150px;
 }

 form#user-perfil .com-users-profile__edit-submit button:first-of-type{
    background-color: #B2EDC2;
    color: var(--black);
 }
 form#user-perfil .com-users-profile__edit-submit button:last-of-type{
    border: 1px solid var(--red);
    background-color: #fff;
    color: var(--black);
 }
 @media(max-width:992px){
    form#user-perfil button{
        width: 100%;
        bottom: 0;
        top: inherit;
        left: 0;
        right: 0;
        text-align: center;
    }
 }

 p.title-intereses{
    margin-top: 16px;
    font-size: 18px;
    font-weight: 600;
    color:#2B2620;
    margin-bottom: 4px;
 }

 div.personal-rutes{
    margin: 32px 0 ;
 }

 .personal-rutes ul{
    margin: 32px 0;
    padding:0;
    list-style: none;
 }

 .personal-rutes ul li {
    margin-bottom: 16px;
    padding: 24px;
    border: 1px solid #E5E5E5 ;
    position: relative;
 }
 .personal-rutes ul li p.tag-perso{
    background-color: var(--green);
    color: var(--black);
    font-size: 16px;
    font-weight: 500;
    padding: 4px 12px;
    position: absolute;
    top: 36px;
    left: 0;
    display: block;
    width: fit-content;
    z-index: 100;
 }
 .personal-rutes ul li figure{
    height: 200px;
    width: 100%;
    position: relative;
    overflow: hidden;
 }
 .personal-rutes ul li figure img{
    height: 100%;
    width: auto;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;

 }

 .personal-rutes ul li .head-ruta-user{
    display: flex;
    flex-direction: column;
    height: 100%;
 }
 .personal-rutes ul li .head-ruta-user p{
    font-size: 14px ;
    color: var(--black);
    text-transform: capitalize;
 }
 .personal-rutes ul li .head-ruta-user p.title{
    text-transform: none;
    font-size: 24px;
    margin-bottom:0px ;
 }

 .personal-rutes ul li .head-ruta-user p.tag-modalitat{
    width: fit-content;
    background-color: #e5e5e5;
    border-radius: 500px;
    color: var(--black);
    padding: 8px 16px;
    display: flex;
    flex-direction: row;
 }
 .personal-rutes ul li .head-ruta-user p.tag-modalitat img{
    height: 100%;
    margin: auto 8px auto 0;
 }
 .personal-rutes ul li .head-ruta-user .row{
    margin: auto 0 0 0;
 }

 .personal-rutes ul li form{
    display: flex;
    flex-direction: column;
    padding: 16px 40px 16px 16px;
    background-color: #F5F5F5;
    position: relative;
    height: 100%;


 }
 .personal-rutes ul li form label{
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0px;
 }
 .personal-rutes ul li form textarea {
    background-color: transparent;
    border: 0px solid transparent;
    color: var(--black);
    margin-top:8px ;
    height: calc( 200px - 32px - 27px);
 }
 .personal-rutes ul li form button{
    position: absolute;
    top: 16px;
    right:16px ;
    width: 32px;
    height: 32px;
    border-radius: 500px;
    background-color: #E5E5E5;
    color: var(--black);
    display: flex;
    border: 0px solid transparent;

 }

 .personal-rutes ul li form button i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 16px;

 }
 .personal-rutes ul li .options-ruta{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;

 }

 .personal-rutes ul li .options-ruta button,
 .personal-rutes ul li .options-ruta a.share-ruta{
    margin-bottom: 12px;
    border-radius: 500px;
    font-size: 16px;
    color: var(--black);
    padding: 4px 12px;
    background-color:#F5F5F5;
    border: 0px solid transparent;
 }
 .personal-rutes .options-ruta .dropdown button span{
    display: none;
 }
@media(max-width:992px){
    .personal-rutes .options-ruta .dropdown{
        width: 100% !important;

    }
    .personal-rutes .options-ruta .dropdown button{
        width: calc(1.5rem + 100%) !important;
        display: flex;
        flex-direction: row;
        padding: 8px 24px;
        font-size: 20px;
        font-weight: 500;
        color: var(--black);
        text-align: center;
        justify-content: center;
        align-items: center;
        margin: 12px -.75rem 0 -.75rem;
    }
    .personal-rutes .options-ruta .dropdown button img{
        margin-right:12px ;
    }
    .personal-rutes .options-ruta .dropdown button span{
        display: flex;
     }
}
 .personal-rutes ul li .options-ruta button img,
 .personal-rutes ul li .options-ruta a.share-ruta img{
    width: 24px;
    height: 24px;
 }

 .personal-rutes ul li .options-ruta ul {
    flex-direction: column;
    margin: 0;
    padding: 24px;
    background-color: #fff;
    border-radius:8px ;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 }
 .personal-rutes ul li .options-ruta ul li{
    border: 0px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    padding: 8px 0;
    width: 100%;
    font-weight: 600;
    margin: 0;
    color: var(--black);
 }
 
 .personal-rutes ul li .options-ruta ul li:last-of-type{
    border: 0px solid transparent;
    padding: 16px 0 0 0;
 }
 .personal-rutes ul li .options-ruta ul li:first-of-type {
    padding-top: 0;
 }
 .personal-rutes ul li .options-ruta ul li:last-of-type a{
    color: var(--red);
    text-decoration: none;
 }

 .personal-rutes ul li .options-ruta ul li a{
    margin: 0  8px 0 0 ;
    padding:0;

}
.personal-rutes ul li .options-ruta ul li a img{
    margin: auto 12px auto 0;
}


#myTabContent form{
    display: flex;
    flex-direction: column;
}

#myTabContent form label{
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 8px;

}
#myTabContent form select{
    width: 100%;
    border: 1px solid #e5e5e5;
    padding: 8px 16px;
    font-size: 18px;
    font-weight: 500;
    color: var(--black);
    border-radius: 4px;
}

#myTabContent #favorites {
    margin: 44px 0 0 0;
    border-top: 1px solid #e5e5e5;
}

#myTabContent #favorites .row p.title-favorites{
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 16px;
    margin-top: 32px;
}
#myTabContent #favorites .row p.title-favorites span{
    background-color: var(--yellow-dark);
    padding: 2px 16px;
    margin-left: 8px;
    border-radius:500px ;
    color: var(--black);
    font-size: 16px;
    font-weight: 600;
}


#myTabContent #favorites .row .card-favorite{
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #e5e5e5;
}
#myTabContent #favorites .row .card-favorite .options-ruta{
    position: absolute;
    right: 32px;
    top: 32px;
}
#myTabContent #favorites .row .card-favorite .options-ruta button{
    border-radius: 500px;
    background-color: #e5e5e5;
    border: 0px solid transparent;

} 
#myTabContent #favorites .row .card-favorite .options-ruta ul{
    flex-direction: column;
    padding: 16px;
}
#myTabContent #favorites .row .card-favorite .options-ruta ul li{
    padding: 8px 0;
    display: block;
    width: fit-content;
}
#myTabContent #favorites .row .card-favorite .options-ruta ul li:first-of-type{
    border-bottom: 1px solid #e5e5e5;
}
#myTabContent #favorites .row .card-favorite .options-ruta ul li a{
    color: var(--black);
    font-size: 16px;
    text-decoration:  none;
    display: block;
    width: fit-content;
}
#myTabContent #favorites .row .card-favorite .options-ruta ul li:last-of-type a{
    color: var(--red);
}
#myTabContent #favorites .row .card-favorite .options-ruta ul li a img{
    margin-right: 8px;
}
#myTabContent #favorites .row .card-favorite figure{
    position: relative;
    height: 150px;
    width: 100%;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 12px;
}
#myTabContent #favorites .row .card-favorite figure img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-height: 200px;
    height: auto;
    min-width: 100%;
}

#myTabContent #favorites .row .card-favorite .date{
    margin-top: 32px;
    font-size: 16px;
    font-weight: 500;
    color: #999999;
    margin-bottom: 4px;
    font-style: italic;
}
#myTabContent #favorites .row .card-favorite .place{
    font-size: 16px;
    font-weight: 500;
    color: #999999;
    margin-bottom: 4px;
}
#myTabContent #favorites .row .card-favorite .title-card{
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 4px;
}
.personal-rutes ul li .form{
    display: flex;
    flex-direction: column;
    padding: 16px 40px 16px 16px;
    background-color: #F5F5F5;
    position: relative;
    height: 100%;
 }
 @media(max-width:992px){
    .personal-rutes ul li .form{

        padding: 16px;
        background-color: #F5F5F5;
  
     }
 }
 .personal-rutes ul li .form label{
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0px;
 }
 .personal-rutes ul li .form textarea {
    background-color: transparent;
    border: 0px solid transparent;
    color: var(--black);
    margin-top:8px ;
    height: calc( 200px - 32px - 27px);
 }
 .personal-rutes ul li .form button{
    position: absolute;
    top: 16px;
    right:16px ;
    width: 32px;
    height: 32px;
    border-radius: 500px;
    background-color: #E5E5E5;
    color: var(--black);
    display: flex;
    border: 0px solid transparent;

 }

 .personal-rutes ul li .form button i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 16px;

 }
 @media(max-width:992px){
    .personal-rutes ul li .form button{
        padding: 8px 24px;
    }
 }

 .password-group .input-group {
    position: relative;
 }
 .password-group .input-group input{
    flex: inherit;
    width: calc(100% - 56px)!important;
 }
 .password-group .input-group button.input-password-toggle{
    position: absolute;
    right: 0;
    top: 0;
    margin: 0!important;
    border-radius: 6px!important;
    height: 100%;
 }

 .password-group .input-group button i{
    transform: translate(-50% , -50%);
    top: 50%;
    left: 50%;
    position: absolute;
 }


 .elevation-summary{
    margin: 0!important;
 }


/* Sistema de mensajes de Joomla (#system-message-container): fixed en pantalla,
   ancho alineado al container del proyecto (--container-max-width) y paleta
   de marca en vez de los colores genéricos de Joomla. */
div#system-message-container{
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--container-max-width) - 32px);
    max-width: calc(100vw - 32px);
    margin: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Paleta de marca para el sistema de alertas (el CSS del vendor local
   -media/templates/site/viesverdes/css/vendor/joomla-custom-elements/-
   lee estos 4 tokens vía --alert-accent-color: var(--success|info|warning|danger)
   para colorear el borde, el badge del icono y el botón de cerrar). */
#system-message-container joomla-alert[type="success"],
#system-message-container joomla-alert[type="message"]{
    --success: var(--secondary-500);
}
#system-message-container joomla-alert[type="danger"],
#system-message-container joomla-alert[type="error"]{
    --danger: var(--error-500);
}
#system-message-container joomla-alert[type="warning"]{
    --warning: #D98E04;
}
#system-message-container joomla-alert[type="info"],
#system-message-container joomla-alert[type="notice"]{
    --info: var(--info-500);
}

#system-message-container joomla-alert{
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(28, 80, 70, 0.16);
    font-family: var(--font-family-base);
    overflow: hidden;
    align-items: stretch;
}
#system-message-container joomla-alert .alert-heading{
    flex-shrink: 0;
    padding: 16px;
    font-size: 1.5rem;
}
#system-message-container joomla-alert .alert-wrapper{
    display: flex;
    align-items: center;
}
#system-message-container joomla-alert div .alert-message{
    color: var(--text-800);
    font-size: var(--fs-md);
    line-height: var(--lh-md);
    padding: 14px 44px 14px 16px;
}

div#system-message-container .joomla-alert--close{
    opacity: 0.6;
}
div#system-message-container .joomla-alert--close:hover{
    opacity: 1;
}

@media(max-width: 600px){
    div#system-message-container{
        top: 8px;
    }
}


 /* offCanvas Planificador */

/* "Crea la teva ruta": modal flotant obert pel boto pf-plan-fab
   (Figma node 883:23940). Alineat a l'esquerra i abaix, mateixa
   convencio que la resta de modals d'aquesta fase. */
#offCanvasPlanificador{
    position: fixed;
    top: auto;
    left: 40px;
    bottom: 40px;
    width: 606px;
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 200px);
    background-color: #fff;
    border: 0px solid transparent;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    z-index: 1049;
    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility 0s linear .25s;
}
#offCanvasPlanificador.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .25s ease-in-out, transform .25s ease-in-out;
}
#offCanvasPlanificador.hidenbehi {
    overflow:initial!important;
}
.pf-plan-modal__close{
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    border: 0;
    background: transparent;
    color: var(--black);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
/* Nota: per sota de 991px #offCanvasPlanificador passa a pantalla completa
   (vegeu el bloc "RESPONSIVE < 991px" mes avall); no cal cap ajust aqui. */

#offCanvasPlanificador .title-offcanvas{
    font-size: 24px;
    padding: 8px 16px 0 16px;
    font-weight: 700;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
}

.pick-date{
    display: flex;
    flex-direction: row;
    padding:0 0 20px 0;
    border-bottom: 1px solid #E5E5E5;
    padding:20px 16px 12px 16px; 
    
    position: relative;

}
.pick-date p{
    width:100%;
    display: flex;
    font-size: 16px ;
    margin-bottom: 0;
    color: var(--black);
}
.more-days-toogle{
    width: calc(100% - 42px);
    padding-bottom: 2rem;
    display: flex;
    flex-direction: row;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
}

.more-days-toogle .date-picker-item{
    color: #fff;
    display: flex;
    flex-direction: row;
    background-color: #9F9F9F;
    margin-right:12px;
    min-width:100px ;
}
.more-days-toogle .date-picker-item.active{
    background-color: var(--blue-dark);

}

.more-days-toogle .date-picker-item img{
    margin-left: 32px;
}
.more-days-toogle .date-picker-item .controldate{
    position: absolute;
    left: 0;
    top: 110%;
}
.routeStages a.add-day-picker{
    position: absolute;
    top: 20px;
    right: 16px;
    height: 40px;
    width: 40px;
    color: var(--blue-dark);
    background-color: #f5f5f5;
    display: flex;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.date-picker-item {
    position: relative;
}
.date-picker-item  i {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translate(-50%, -50%);
}
.date-picker-item label{
    width: 60px;
    padding: 8px 8px 8px 8px;
    border-right:1px solid white ;
}
.date-picker-item input {
    height: 100%;
    width: 40px;
    opacity: 1;
    background: transparent;
    border: transparent;
    color: transparent;
    font-size: 200px;

    position: absolute; 
    top: 0;
    right: 0;
}

.config-ruta{
    display: flex;
    flex-direction: column;
    padding:20px 16px;

    background-color: #F0F0E1;
}
.config-ruta .title-planificador{
    font-size: 18px;
    color: var(--black);
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 8px;
}
.config-ruta .title-planificador:first-of-type{
    margin-top: 0;
}
.config-ruta .inicio,
.config-ruta .final,
.config-ruta li{
    padding: 0 0 8px 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.config-ruta .inicio div,
.config-ruta .final div{
    width: calc(100% - 36px);
}

.config-ruta .inicio div,
.config-ruta .final div,
.config-ruta li div{
    border: 1px solid #70707070;
    padding: 8px 16px;
    background-color:#FFFFFF;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.config-ruta .inicio  img,
.config-ruta .final  img{   
    margin: auto 12px auto 0;
    display: flex;
    height: auto;
    width: 24px;
}

.config-ruta ul.draggable{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}
.config-ruta ul.draggable li:hover{
    cursor: all-scroll;
}

.config-ruta li i{
    margin: auto 12px auto 0;
    display: flex;
    height: auto;
    font-size: 18px;
    width: 24px;
}
.config-ruta li a{
    margin: auto 0 auto 12px;
    position: relative;
    width: 24px;
    height: 100%;

}
.config-ruta li a img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 24px;
    height: auto;
}
.config-ruta li div.flexer-list{
    /* width: calc(100% -  72px ); */
    width: 100%;
    border: 0px solid transparent;
    padding: 0;
    background-color: transparent;
    display: flex;
    flex-direction:  column;
}

.flexer-list .live-results{
    display: flex;
    flex-direction: column;
    padding: 8px;
    margin: 8px 0;
    background-color: #fff;
    border: 1px var(--black) solid;
}

.flexer-list .live-results li{
    padding: 0;
    margin-bottom: 4px;
}

.flexer-list .live-results li a:hover{
    background-color: var(--yellow-dark);

}
.flexer-list .live-results li a{
    width: 100%;
    transition: 0.3s ease-in-out;
    border-radius: 8px;
    background-color: transparent;
    padding: 4px ;

}
.config-ruta input:focus-visible{
outline: 0px transparent solid;
}
.config-ruta .inicio div label, .config-ruta .final div label,
.config-ruta div.flexer-list label{
    color: #666666;
    font-size: 18px;
    padding:0 8px;
    display: flex;
    font-weight: 600;
    width: 24px;
}
.config-ruta input{
    background-color: transparent;
    border: transparent;
    font-size: 18px;
    width: calc(100% - 32px);
    color: #707070;

}

.config-ruta button.add-inter-point{
    border:0px solid transparent;
    width: 100%;
    background-color: transparent;
    color: var(--black);
    font-size: 18px;
    font-weight: 500;
    margin-top: 16px;
    padding: 4px 36px;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.config-ruta button.add-inter-point img{
    width: 24px;
    height: auto;
    margin-right: 12px;
}

.altimetria-planificador{
   
    width: 100%;
    border-bottom: 1px solid #E5E5E5;
}
.altimetria-planificador .row{
    padding: 24px 16px;
    width: 100%;
    margin: 0;
}
.altimetria-planificador .flex-altimetria{
    display: flex;
    flex-direction: column;

}
.altimetria-planificador .flex-altimetria img{
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
}
.altimetria-planificador .flex-altimetria p{
    font-weight: 600;
    margin-bottom: 0;
}

.trams-vies-verdes{
    display: flex;
    flex-direction: column;
    padding: 24px 16px;

}

.trams-vies-verdes p.title-trams{
    font-size: 24px;
    font-weight: 600;
    color: var(--black);
}

.trams-vies-verdes ul{
    margin: 0;
    padding: 8px 0px;
    display: flex;
    flex-direction: column;
    list-style: none;
}

.trams-vies-verdes ul li{
    padding: 20px;
    border: 1px #C5C5C5 solid;
    border-radius: 8px;
    margin-bottom: 12px;
    position: relative;
}
.trams-vies-verdes ul li p:first-of-type{
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0px;
}
.trams-vies-verdes ul li p:last-of-type{
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}
.trams-vies-verdes ul li a{
    position: absolute;
    right: 20px;
    top: 50%;
    font-size: 20px;
    transform: translate(-50% , -50%);
    color: var(--black);
}



/* guarda rutas */

button#save-ruta{
    /* position: absolute;
    top: 80px;
    right: 72px; */
    border-radius: 500px;
    color: #fff;
    background-color: var(--blue-dark);
    border: 0px solid transparent;
    padding: 12px 24px;
    display: flex;
    flex-direction: row;
}
button#downloadGpx{
    border-radius: 500px;
    color: #fff;
    background-color: var(--blue-dark);
    border: 0px solid transparent;
    padding: 12px 24px;
    display: flex;
    flex-direction: row;
}
@media(max-width:992px){
    /* button#save-ruta{
        display: none;
    } */
}
button#downloadGpx img,
button#save-ruta img{
    margin:auto 12px auto 0;
    display: flex;
    height: 14px;
    width: auto;
}

#savedModal,
#guardarutas, #rutaKo, #spinningModal, #downloadGpxOk {
    left: inherit;
    right: 0;
    width: 100vw;
}
#savedModal .modal-dialog,
#rutaKo .modal-dialog,
#spinningModal .modal-dialog,
#guardarutas .modal-dialog,
#downloadGpxOk .modal-dialog{
  height: 100%;
  margin: 0 auto;
  display: flex;
  
}
#savedModal .modal-dialog .modal-content,
#rutaKo .modal-dialog .modal-content,
#spinningModal .modal-dialog .modal-content,
#guardarutas .modal-dialog .modal-content,
#downloadGpxOk .modal-dialog .modal-content{
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 40px;
    border-radius: 12px;
    border: 0px solid transparent;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    
}

#savedModal .modal-dialog .modal-content p:first-of-type,
#rutaKo .modal-dialog .modal-content p:first-of-type,
#guardarutas .modal-dialog .modal-content p:first-of-type,
#downloadGpxOk .modal-dialog .modal-content p:first-of-type{
    font-size: 32px;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 4px 0;
}
#spinningModal .modal-dialog .modal-content p:first-of-type{
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 4px 0;
}

#guardarutas .modal-dialog .modal-content form{
    display: flex;
    flex-direction: column;
}

#guardarutas .modal-dialog .modal-content form label{
    margin: 16px 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
}

#guardarutas .modal-dialog .modal-content form textarea{
    min-height: 150px;
}
#guardarutas .modal-dialog .modal-content form textarea,
#guardarutas .modal-dialog .modal-content form input{
    padding: 12px;
    width: 100%;
    border: #707070 1px solid;
    background-color: #fff;
    border-radius: 0;
    outline: 0px solid transparent;
}

#guardarutas .modal-dialog .modal-content form .btns-footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 24px;
}

#savedModal .modal-dialog .modal-content .btns-footer button:first-of-type,
#guardarutas .modal-dialog .modal-content form .btns-footer button:first-of-type{
    background-color: var(--green);
    color: var(--black);
    font-size: 16px;
    border-radius: 500px;
    padding: 8px 24px;
    border: 0px solid transparent;
    display: flex;
}

#savedModal .modal-dialog .modal-content button.btn-close,
#rutaKo .modal-dialog .modal-content button.btn-close,
#spinningModal .modal-dialog .modal-content button.btn-close,
#guardarutas .modal-dialog .modal-content button.btn-close,
#downloadGpxOk .modal-dialog .modal-content button.btn-close{
    position: absolute;
    top: 16px;
    right:16px;
    height: 12px;
    width: 12px;
}

#savedModal .modal-dialog .modal-content p.ruta-label{
    width: 100%;
    display:block;
    font-size: 18px;
    color: var(--black);
    margin-top: 16px;
    margin-bottom: 0px;
    font-weight: 600;
}
#savedModal .modal-dialog .modal-content hr{
    border-top: 1px solid #E5E5E5;
    margin:0px;
    background-color: transparent;
    opacity: 1;
}

#savedModal .modal-dialog .modal-content p.name-ruta{
    color: #666666;
    font-size:24px;
    font-weight: 600;
    margin-bottom: 0;
}

#guardarutas .modal-dialog .modal-content form .btns-footer button:last-of-type{
    padding: 8px 0px;
    border: 0px solid transparent;
    border-radius: 0;
    color: var(--red);
    background-color: transparent;
    margin-left: auto 0 0 0;
    display: flex;

}

#savedModal .modal-dialog .modal-content img{
    width: 100px;
    height: auto;
    display: flex;
    margin:0  auto 20px 0;
}

@media (max-width:992px){

    #save-ruta-mobile{
        display: flex;
        flex-direction: row;
        margin: 24px 0;
        border-radius: 500px;
        color: #fff;
        background-color: var(--blue-dark);
        border: 0px solid transparent;
        font-size: 18px;
        font-weight: 600;
        justify-content: center;
        text-align: center;
        align-items: center;
        padding: 12px 24px;
    }
    #save-ruta-mobile i{
        margin-right: 8px;
    }
    #savedModal,
    #guardarutas{
        right: inherit;
        left: 0;
        height: 100vh;
        background-color: #00000050;
        width: 100vw;
        padding: 5vh;
    }
    #savedModal .modal-dialog .modal-content,
    #guardarutas .modal-dialog .modal-content{
    padding: 20px;
}
}


#live-startPoint,
#live-endPoint{
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 12px 0 12px 36px;
    padding:8px;
    width: calc(100% - 36px);
    background-color: #fff;
    border-radius: 8px;
    border:1px solid var(--black);
}

#live-startPoint li,
#live-endPoint li{
    margin: 0 0 4px 0;
    padding: 4px 8px;
    border-radius: 8px;
    transition: 0.3s ease-in-out;
    background-color: transparent;
  
}
#live-startPoint li:hover,
#live-endPoint li:hover{
    background-color: var(--yellow-dark);

}

#live-startPoint li a,
#live-endPoint li a{
    width: 100%;
    color: var(--black);
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
}

.ui-state-default{
    border: 0px transparent solid!important;
    background: transparent!important;
}

.leaflet-marker-icon.custom-icon {
    border-radius: 50%;
    border: 1px solid #fff;
    color: #fff;
    background: black;
    text-align: center;
    font-size: 20px;

}
.leaflet-marker-icon.start-icon {
    border-radius: 50%;
    border: 1px solid #fff;
    color: #fff;
    background: #060af5;
    text-align: center;
    font-size: 20px;

}
.leaflet-marker-icon.end-icon {
    border-radius: 50%;
    border: 1px solid #fff;
    color: #fff;
    background: #f30808;
    text-align: center;
    font-size: 20px;

}

.route-actions{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding:24px  16px;
}

.config-ruta .route-actions button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    border: 1px solid #F0F0E1;
    font-size: 14px;
    width: 33.4%;
    padding: 8px;
    background-color: #fff;
    transition:0.3s ease-in-out ;
}

@media(max-width:768px){
    .config-ruta .route-actions button span{
        display:none;
    }
}
.config-ruta .route-actions button:hover{
    background-color: var(--green);

}

.config-ruta .route-actions button img,
.config-ruta .route-actions button i{
    margin-right: 8px;
}
.config-ruta .route-actions button:first-of-type{
    border-top-left-radius:6px ;
    border-bottom-left-radius:6px ;
}
.config-ruta .route-actions button:last-of-type{
    border-top-right-radius:6px ;
    border-bottom-right-radius:6px ;
}

.leaflet-popup-content-wrapper button{
    width: 100%;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--black);
    background-color: var(--green);
    border: 0px solid transparent;
    border-radius: 100px;
    margin-top: 12px;
}

/* ccs imputs oplanificador data picker */
#loadingPlanificador{
    background-color: #00000030;
    border: 0px solid transparent;
}

#loadingPlanificador .head-modal i{
    color: var(--blue-light);
    margin-right: 8px;
}
#loadingPlanificador a {
    color: var(--blue-dark);
    text-decoration: underline;
    font-weight: 600;
}
#loadingPlanificador .head-modal{
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 8px;
    
}
#loadingPlanificador .destacado{
    font-size: 22px;
}
#loadingPlanificador .modal-footer{
    justify-content: start;

}
#loadingPlanificador .modal-footer form{
    margin: 0 0 12px 0;
}
#loadingPlanificador .modal-footer button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    padding: 8px 12px;
    width: 100%;
    color: #fff;
    background-color: var(--blue-dark);
    border: 0px solid transparent;
    transition: 0.3s ease-in-out;
}
#loadingPlanificador .modal-footer button:hover{
    background-color: var(--black);
}
#loadingPlanificador .modal-content{
    padding: 24px;
    border: 0px solid transparent;

}
#loadingPlanificador .modal-header,
#loadingPlanificador .modal-body,
#loadingPlanificador .modal-footer{
    padding: 8px 0;
}

/* control planificador date */
.controldate {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.controldate p{
    font-size: 12px;
    color: var(--black);
    min-height: 18px;
}
.controldate a{
    text-decoration: none;
    position: relative;
    font-size: 10px;
}

.controldate a i{
    color: var(--black);
}

#offCanvasPlanificador .btncontroler{
    display: flex;
    flex-direction: row;
    background-color: #F0F0E1;
    padding: 8px 16px;
    justify-content: space-between;

}
#offCanvasPlanificador .btncontroler button.btn-close{
    height: 32px;
    width: fit-content;

}
button#collapser{
      display: flex;
    border: 0px solid transparent;
    background-color:#F0F0E1;
    border-radius: 8px;
    transition: 0.3s ease-in-out;
    position: relative;
    height: 40px;
    width: 40px;
    transition: 0.3s ease-in-out;
 
}
button#collapser img{
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    height: 20px;
    width: 20px;
}

#offCanvasPlanificador.hidenbehi{
    left: -606px;
}
button#collapser.expand{
    background-color: var(--green);
    outline: 2px solid #ffffff50;
    position: fixed;
    left: 32px;
}

/*  */
#offCanvasPlanificador  button.btn-close{
    background: none;
}
@media(max-width:768px){
    header.expand{
        top: -100vh;
    }
    #map.expand{
        margin: 0;
        top: 0vh;
        height: 92vh;
    }
    button#collapser.expand{
        background-color: var(--green);
        outline: 2px solid #ffffff50;
        position: fixed;
        left: inherit;
        right: 16px;
    }
    button#collapser.expand{
        background-color: var(--green);
        outline: 2px solid #ffffff50;
    }


 
    #offCanvasPlanificador.hidenbehi{
        left: -100vw;
    }
}



button#openlayer{
    background-color: #ffffff;
    border-radius: 4px;
    height: 50px;
    width:50px;
    position: absolute;
    bottom: 32px;
    right: 16px;
    border: 0px solid transparent;
    transition: 0.3s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    z-index: 1002;
}

button#openlayer img{
    position: absolute;
    height: 20px;
    width: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

button#openlayer.active,
button#openlayer:hover{
    background-color: #F4F1AC;
    outline: 4px solid #ffffff90!important;

}

#custom-layering.show{
    bottom: calc(32px + 50px + 12px);
        opacity: 1;
    pointer-events: inherit;
}
#custom-layering{
    pointer-events: none;
    max-height: 400px;
    overflow: scroll;
    display: flex;
    opacity: 0;
    position: absolute;
    bottom: calc(32px + 40px);
    right: 16px;
    padding: 16px;
    outline:4px solid #ffffff95;
    background-color: #ffffff;
    border-radius: 4px;
    border: 0px;
    transition: 0.3s ease-in-out;
    z-index: 1004;
}
#custom-layering::after{
    display: none;
    bottom: 0;
    left: -16px;
    width: 100%;
    height: 20px;
    content: "";
    position: absolute;
    background: linear-gradient(0deg, rgba(191,191,191,1) 0%, rgba(255,255,255,0.1026785714285714) 70%);
}
#custom-layering p{
    margin-bottom: 0px;
    font-size: 18px;
    font-weight: 600;
    color: var(--blue-dark);
}
#custom-layering ul{
    display: flex;
    flex-direction:column ;
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
}

#custom-layering ul li{
    width: 100%;
    display: flex;
    flex-direction: row;
    padding:8px 0;
    border: 0px solid transparent;
    border-bottom: 1px solid #E5E5E5;
    height: 35px;
}
#custom-layering ul li:last-of-type{
    border: 0px solid transparent;
}

#custom-layering ul li .form-check-input:checked{
    background-color: var(--green);
    box-shadow: 0 0 0 0.25rem #CDC20030;
    border: 1px solid #2B262060;
}
#custom-layering ul li input{
    height: 16px;
    width: 16px;
    margin: auto 0;
}
#custom-layering ul li label{
    display: flex;
    flex-direction: row;
    margin: auto 8px;
    min-width: 200px;
    font-size: 16px;
    width: 100%;
}
#custom-layering ul li img{
    margin: auto 0 auto auto;
    height:24px;
    width: auto;

}

/* provisional */
.leaflet-control-layers.leaflet-control{
    display: none;
}

/* fix user edit */
#jform_com_fields_sg_usr_interests{
    display: flex;
    flex-direction: column;
}

/*  */
.error-custom{
    position: relative;
    margin-top: 70px;
    z-index: -1;
    height: calc(100vh - 70px);
    width: 100vw;
    display: flex;
    padding: 16px;
}
.error-custom .container{
    margin: auto;
}
.error-custom .container .col-md-4,
.error-custom .container .col-md-6{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.error-custom h1{
    font-size: 72px;
    font-weight: 700;
}
.error-custom a
.error-custom a{
    border: 0px solid;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    padding: 8px 32px;
    background-color: var(--blue-dark);
    color: white;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
}
.error-custom img{
    max-width: 100%;
    width: 100%;
    height: auto;
    margin: auto;

}

.stageSelector{
    padding: 16px 0;
    display: flex;
    flex-direction: row;
}


.stageSelector .stage{
    margin: auto 8px;
    position: relative;
}
.stageSelector .stage:last-of-type{
    margin-right: 0;
}
.stageSelector .stage:first-of-type{
    margin-left: 0;
}
.stageSelector .stage button{
    background-color: transparent;
    margin: 0;
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;

    background-color: #F5F5F5;
    color: var(--black);
    border: 0px;
    padding: 12px 24px;

    display: flex;
    flex-direction: column;
    justify-content: start;
}

.stageSelector .stage button.active{
    background-color: var(--blue-dark);
    color: #fff;
}
.stageSelector .stage button.btn-c-alert{
    font-size: 0;
    position: absolute;
    top: 8px;
    right: 8px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    z-index: 100;
    line-height: 0;
    background-color:var(--yellow-light) ;
    border: var(--green) 2px solid ;
    border-radius: 500px;
    width: 14px;
    height: 14px;
    padding:0;

}

.custom-notes {
    padding: 10px;
    background-color: #F5F5F5;
}

a.favoriteLink {
    margin: 0 15px 0 auto;
    text-decoration: none;
    background-color: var(--blue-dark);
    color: #fff!important;
    border: 0px solid transparent;
    border-radius: 500px;
    padding: 8px 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content;


}
a.favoriteLink i{
    display: flex;
    margin: auto 8px auto 0;
}

/* modal delete rutas css */

#removeRuta{
    background-color: #00000070;
}

#removeRuta .modal-dialog{
    height: 100vh;
    margin: 0 auto;
    display: flex;
}
#removeRuta .modal-dialog .modal-content{
    margin: auto;
    border: 0px solid transparent;

}

#removeRuta .modal-dialog .modal-content .btns-footer{
    padding: 1rem 1rem;
    border-top: 1px solid #dee2e6;
}

#removeRuta .modal-dialog .modal-content .btns-footer button{
    padding: 8px 24px;
    border: 0px solid transparent;
    transition: 0.3s ease-in-out;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    margin-right: 12px;
    border-radius: 500px;
}
#removeRuta .modal-dialog .modal-content .btns-footer button.deleterute{
    background-color: var(--red);
    color: #ffffff;
}
#removeRuta .modal-dialog .modal-content .btns-footer button.dimiss{
    background-color: var(--greay);
    color: var(--black);
}

@media(max-width:992px){
    .mobilecontroler{
        display: none;
    }
}
.alertaTag {
    background-color: orange!important;
    border-radius: 50%!important;
    border: unset!important;
    text-align: center;
    font-size: 18px;
}

@media (min-width: 992px){
    #consentModal .modal-lg {
        --bs-modal-width: 80%;
    }
    #consentModal .modal-body.jviewport-height70 {
        height: 70vh;
    }
}
@media (min-width: 576px){
    #consentModal .modal-dialog {
        max-width: 80%;
    }
    #consentModal .modal-body.jviewport-height70 {
        height: 70vh;
    }
}
section#user-perfil-section .user-avatar figure .accions-user label {
    /* display: none; */
    margin-top: 15px;
    background-color: #c5eec4;
    border-radius: 500px;
    font-size: 18px;
    display: flex;
    flex-direction: row;
    padding: 8px 24px;
    border: 0px solid;
}

#jform_com_fields_bffile_sg-usr-avatar {
    margin-top: 15px;
}
.legals #alerts, .legals #search {
    display: none;
}


.row.normativa {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E5E5E5;
    margin-bottom: 24px;
}
.row.normativa p{
    font-size: 16px;
}
.row.normativa img{
    max-width: 100%;
    width: auto;
    min-height: 50px;
    margin-bottom: 20px;
}

.normativa-title{
    font-size: 24px;
    color:var(--black);
    margin-bottom: 12px;

}
.normativa-btn{
    text-decoration: none;
    background-color: var(--blue-dark);
    color: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    transition: 0.3s ease-in-out;
    border: 0px solid transparent;
    margin: 20px 0;
}
.normativa-btn:hover{
    background-color: #2B2620;
    color: #fff;
}


#offcanvasRightUser .a2a_kit ul li a{
    height: 32px;
    width: 32px;

    margin-right: 20px;
}
#offcanvasRightUser .a2a_kit ul li a span{
    width: 32px;
    height: 32px;
    margin: 0;
    position: relative;
}

#offcanvasRightUser .a2a_kit ul li a span svg{
    width: 20px;
    height: 20px;
    margin: 0;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#form-login  .required.radio{
    display: flex;
    flex-direction: row;
}
#form-login  .required.radio label{
    margin: 0;
}
#form-login  .required.radio .form-check{
    margin-right: 20px;
}
#form-login  .required.radio input[type=radio]{
    padding:0;
    border-radius: 500px;
    width: 1em;
    height: 1em;
    background-color: white;
}

#form-login  .required.radio input[type=radio]:checked{
    background-color: var(--blue-dark);
}

#offcanvasIncidencias ol li p.rutas {
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    margin-top: initial;
    margin-bottom: 0;
}
div#alertsGroup hr {
    margin: 10px 0;
}
@media (min-width: 992px){
    button.akeeba-sociallogin-link-button-j4 svg {
        margin-right: 5px;
        margin-top: 3px;
    }
}
@media (max-width: 991px){
    button.akeeba-sociallogin-link-button-j4 svg {
        margin-top: -3px;
    }
}

.leaflet-top {
    top: 100px!important;
}

/* Alineats a la mateixa distancia del marge dret que la resta de botons
   flotants (pf-filters-fab / pf-alerts-fab, right:40px desktop / 16px mobil) */
body.route-planner .leaflet-right .leaflet-control{
    margin-right: 40px;
}
@media(max-width: 991px){
    body.route-planner .leaflet-right .leaflet-control{
        margin-right: 16px;
    }
}

/* Botons natius de zoom de Leaflet: mateix llenguatge visual que els FABs
   propis (pf-filters-fab / pf-alerts-fab) -- quadrats blancs amb vora. */
body.route-planner .leaflet-control-zoom{
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.route-planner .leaflet-control-zoom a{
    width: 48px;
    height: 48px;
    line-height: 44px;
    border: 2px solid var(--text-600);
    background-color: #fff;
    color: var(--black);
    font: 400 24px/44px var(--font-family-base);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
body.route-planner .leaflet-control-zoom a:first-child,
body.route-planner .leaflet-control-zoom a:last-child{
    border-radius: 8px;
    border-bottom: 2px solid var(--text-600);
}
body.route-planner .leaflet-control-zoom a:hover,
body.route-planner .leaflet-control-zoom a:focus{
    background-color: var(--text-600);
    color: #fff;
}
body.route-planner .leaflet-control-zoom a.leaflet-disabled{
    opacity: .5;
    background-color: #fff;
    color: var(--black);
}

button#new-alerts
 {
    line-height: 100%;
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 16px;
    border: 0px solid transparent;
    background-color: var(--yellow-dark);
}
#new-alerts img{
    display: inline-block;
}

/* =========================================
   PLANIFICADOR — FASE 1 (placeholder de disseny)
   Mapa a pantalla completa, columna antiga oculta,
   boto flotant + modal d'alertes (Figma 0uBO8ncLHO0xXyE5CpYx7F, node 857:18413)
   ========================================= */

/* Pagina de planificador: app a pantalla completa, sense scroll.
   Fem servir svh (small viewport height) en lloc de vh: com la pagina no
   fa scroll propi, la barra de Chrome mobil mai s'amaga automaticament,
   aixi que el viewport real sempre es el "petit" -- amb vh el contingut
   queda tallat per sota d'aquesta barra. */
html:has(body.route-planner){
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
body.route-planner{
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
/* El mapa (fixed) no reserva espai de flux normal: amaguem el footer global,
   que altrament pujaria just sota la capcelera */
body.route-planner footer.footer{
    display: none !important;
}

/* Mapa com a referencia visual: 100vw x 100vh, gris pla.
   Nota: la posicio 'sgnewmap-custom' renderitza actualment mod_sgmap (#map.mapa),
   no mod_sgnewmap (.map-ecovias__map) -- per aixo apuntem a .mapa. */
body.route-planner .mapa{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    margin: 0;
    background-color: #c5c5c5;
    z-index: 0;
}
/* El boto real #openlayer es substitueix visualment pel nostre pf-filters-fab
   (que li proxegeja el clic), aixi que l'amaguem nomes a ell, no al panell. */
body.route-planner .mapa #openlayer{
    display: none !important;
}

/* Boto "Planifica la teva ruta" (Figma node 906:27532): centrat, just sota
   la capcelera, alineat amb el top dels modals (bottom:40px + max-height:
   calc(100vh - 200px) => top fix a 160px) */
.pf-plan-fab{
    position: fixed;
    top: 160px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 8px;
    background-color: var(--secondary-500);
    color: #fff;
    font-family: var(--font-family-base);
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    cursor: pointer;
}
.pf-plan-fab i{
    font-size: 24px;
    color: var(--accent-500);
}
.pf-plan-fab.is-hidden,
.pf-filters-fab.is-hidden{
    display: none;
}

/* Boto real antic d'alertes de mod_sgmap (#new-alerts, control de Leaflet):
   substituit visualment pel nostre pf-alerts-fab, que li proxegeja el clic. */
body.route-planner .alerts-control{
    display: none !important;
}

/* Boto flotant que obre/tanca el modal de Filtres (Figma node 821:18243) */
.pf-filters-fab{
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 48px;
    height: 48px;
    border: 2px solid var(--text-600);
    border-radius: 8px;
    background-color: #fff;
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    cursor: pointer;
}
.pf-filters-fab i{
    font-size: 24px;
}
.pf-filters-fab.is-active{
    background-color: var(--text-600);
    color: #fff;
}

/* Boto flotant que obre el modal d'alertes */
.pf-alerts-fab{
    position: fixed;
    bottom: calc(40px + 48px + 24px);
    right: 40px;
    width: 48px;
    height: 48px;
    border: 2px solid var(--text-600);
    border-radius: 8px;
    background-color: var(--bg-accent);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    cursor: pointer;
}
.pf-alerts-fab i{
    font-size: 24px;
}
.pf-alerts-fab__badge{
    position: absolute;
    top: -10px;
    right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--error-500);
    color: #fff;
    font-family: var(--font-family-base);
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Modal d'alertes: floating, obert des del lateral esquerre */
.pf-alerts-modal{
    position: fixed;
    left: 40px;
    bottom: 40px;
    width: 40vw;
    max-width: 40vw;
    max-height: calc(100vh - 200px);
    background-color: var(--bg-accent);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    z-index: 1049;
    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility 0s linear .25s;
}
.pf-alerts-modal.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .25s ease-in-out, transform .25s ease-in-out;
}

.pf-alerts-modal__header{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 0 0 auto;
}
.pf-alerts-modal__header h2{
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    color: var(--black);
    margin: 0;
    flex: 1 1 auto;
}
.pf-alerts-modal__badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    border-radius: 50%;
    background-color: var(--error-500);
    color: #fff;
    font-family: var(--font-family-base);
    font-size: 16px;
}
.pf-alerts-modal__close{
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--black);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.pf-alerts-modal__back{
    display: none;
    flex: 0 0 auto;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--black);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

/* Vista de detall (Figma node 858:18718): amaguem la llista i el badge,
   mostrem la fletxa enrere i la fitxa */
.pf-alerts-modal.is-detail .pf-alerts-modal__list{
    display: none;
}
.pf-alerts-modal.is-detail .pf-alerts-modal__badge{
    display: none;
}
.pf-alerts-modal.is-detail .pf-alerts-modal__back{
    display: flex;
}
.pf-alert-detail{
    display: none;
}
.pf-alerts-modal.is-detail .pf-alert-detail{
    display: flex;
}

.pf-alerts-modal__list{
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.pf-alert-item{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid var(--accent-500);
}
.pf-alert-item:last-child{
    border-bottom: 0;
}
.pf-alert-item__icon{
    flex: 0 0 auto;
    font-size: 24px;
    color: var(--error-500);
}
.pf-alert-item__body{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.pf-alert-item__title{
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 20px;
    color: var(--black);
    margin: 0;
}
.pf-alert-item__footer{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.pf-alert-item__affected p{
    font-family: var(--font-family-base);
    font-size: 16px;
    color: var(--text-800);
    margin: 0;
}
.pf-alert-item__route{
    font-weight: 700;
}
.pf-alert-item__link{
    flex: 0 0 auto;
    width: 42px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-500);
    border-radius: 8px;
    color: var(--black);
    font-size: 16px;
    cursor: pointer;
}

/* Fitxa de detall d'una alerta */
.pf-alert-detail{
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}
.pf-alert-detail__title{
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    color: var(--black);
    margin: 0 0 24px;
}
.pf-alert-detail__affected{
    margin-bottom: 24px;
}
.pf-alert-detail__affected p{
    font-family: var(--font-family-base);
    font-size: 20px;
    color: var(--text-800);
    margin: 0 0 8px;
}
.pf-alert-detail__route{
    font-weight: 700;
}
.pf-alert-detail__map{
    height: 253px;
    border-radius: 8px;
    background-color: #c5c5c5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 40px;
    margin-bottom: 24px;
}
.pf-alert-detail__gmaps{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 20px;
    color: var(--secondary-500);
    text-decoration: underline;
    margin-bottom: 24px;
}
.pf-alert-detail__divider{
    border: none;
    border-top: 1px solid var(--accent-500);
    margin: 0 0 24px;
}
.pf-alert-detail__info-label,
.pf-alert-detail__info-text{
    font-family: var(--font-family-base);
    font-size: 20px;
    color: var(--text-800);
    margin: 0 0 8px;
}
.pf-alert-detail__info-text{
    font-weight: 700;
}

/* =========================================
   Modal de Filtres (Figma node 821:18128)
   ========================================= */
.pf-filters-modal{
    position: fixed;
    right: calc(40px + 48px + 24px);
    bottom: 40px;
    width: 450px;
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 200px);
    background-color: #fff;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    z-index: 1049;
    overflow-y: auto;

    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility 0s linear .25s;
}
.pf-filters-modal.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .25s ease-in-out, transform .25s ease-in-out;
}
.pf-filters-modal__close{
    align-self: flex-end;
    border: 0;
    background: transparent;
    color: var(--black);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    margin-bottom: 8px;
}
.pf-filters-modal__title{
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    color: var(--secondary-500);
    margin: 0;
}
.pf-filters-modal__subtitle{
    font-family: var(--font-family-base);
    font-size: 16px;
    color: var(--text-600);
    margin: 0 0 8px;
}
.pf-filters-modal__body{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pf-filter-section__head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
.pf-filter-section h3,
.pf-filter-map h3{
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 24px;
    color: var(--black);
    margin: 0 0 8px;
}
.pf-filter-bulk{
    display: flex;
    gap: 8px;
    font-family: var(--font-family-base);
    font-size: 14px;
}
.pf-filter-bulk button{
    border: 0;
    background: transparent;
    color: var(--secondary-500);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.pf-filter-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.pf-filter-list li{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.pf-filter-list label{
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family-base);
    font-size: 16px;
    color: var(--text-600);
    cursor: pointer;
}
.pf-filter-list input{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.pf-filter-checkbox{
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-400);
    border-radius: 4px;
    background-color: #fff;
    position: relative;
}
.pf-filter-list input:checked + .pf-filter-checkbox{
    background-color: var(--secondary-500);
    border-color: var(--secondary-500);
}
.pf-filter-list input:checked + .pf-filter-checkbox::after{
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pf-filter-list > li > i{
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--text-500);
}

.pf-filter-map{
    background-color: var(--bg-neutral);
    border-radius: 12px;
    padding: 24px;
}
.pf-filter-map__tiles{
    display: flex;
    gap: 16px;
}
.pf-filter-map__tile{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-base);
    font-size: 14px;
    color: #666;
    cursor: pointer;
}
.pf-filter-map__tile input{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.pf-filter-map__thumb{
    width: 115px;
    height: 115px;
    border-radius: 8px;
    border: 3px solid transparent;
    background-color: #d9d9d9;
    background-size: cover;
    background-position: center;
}
.pf-filter-map__thumb--osm{
    background-image: url('../images/planificador/tileset-osm.png');
}
.pf-filter-map__thumb--sat{
    background-image: url('../images/planificador/tileset-satellite.png');
}
.pf-filter-map__tile.is-active .pf-filter-map__thumb{
    border-color: var(--accent-500);
}

@media(max-width: 992px){
    .pf-alerts-modal,
    .pf-filters-modal{
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        max-width: none;
    }
    .pf-filters-fab{
        right: 16px;
        bottom: 16px;
    }
    .pf-alerts-fab{
        right: 16px;
        bottom: calc(16px + 48px + 24px);
    }
}

/* =========================================
   Modal "Crea la teva ruta" (Figma node 883:23940)
   ========================================= */
#offCanvasPlanificador .pf-plan-scroll{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* "hidden" (no "visible"): amb overflow-y:auto, "visible" es reconverteix
       sempre a "auto" (regla de la spec), i aixo feia que tota la columna
       guanyes scroll horitzontal nomes perque els dies sobresurten. "hidden"
       talla al mateix punt (la vora del panell, no te padding propi extra)
       sense crear cap zona de scroll nova. */
    overflow-x: hidden;
    padding: 32px;
    padding-bottom: 112px;
    gap: 16px;
}
#offCanvasPlanificador .pf-plan-header{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#offCanvasPlanificador .title-offcanvas{
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    color: var(--secondary-500);
    padding: 0;
    margin: 0;
}

/* ---- Tabs de dia ---- */
#offCanvasPlanificador .pf-plan-days{
    position: relative;
    padding: 0;
    border: 0;
    gap: 16px;
    align-items: flex-start;
}
/* Esvaeix l'ultim dia visible abans d'arribar al gap del boto "+". A
   diferencia de l'intent anterior, el boto es position:static (germa flex
   normal, no absolute), aixi que aquest pseudo-element NO afecta com es
   calcula l'alcada de .pf-plan-days -- evita el bug de WebKit/iOS on
   .more-days-toogle era l'unic fill "real" i la fila podia col·lapsar. */
#offCanvasPlanificador .pf-plan-days::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 54px;
    width: 24px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}
/* Els dies fan scroll horitzontal (mai wrap); el "+" es un germa flex
   normal (no position:absolute) perque sempre reservi el seu propi espai
   i no depengui de calculs d'alcada/z-index fragils en WebKit/iOS. */
#offCanvasPlanificador .more-days-toogle{
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}
#offCanvasPlanificador .date-picker-item{
    background-color: transparent;
    color: var(--black);
    flex: 0 0 auto;
    min-width: auto;
    margin-right: 0;
    flex-direction: column;
    gap: 4px;
    padding: 0;
}
#offCanvasPlanificador .date-picker-item label{
    width: auto;
    height: 38px;
    box-sizing: border-box;
    border-right: 0;
    border-radius: 8px;
    background-color: var(--bg-neutral);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 6px 10px;
    margin: 0;
    font-family: var(--font-family-base);
    font-size: 17px;
    color: var(--black);
    cursor: pointer;
}
#offCanvasPlanificador .date-picker-item label i{
    position: static;
    top: auto;
    right: auto;
    transform: none;
    flex: 0 0 auto;
    font-size: 18px;
    /* Sense aixo, l'icona hereta el touch-action:pan-x de .more-days-toogle
       (necessari per fer scroll horitzontal) i el navegador prioritza
       interpretar el tap com un intent de pan, perdent el click al mobil
       real (al desktop, amb clic de ratoli, no passa mai). */
    touch-action: manipulation;
    /* La icona visual nomes fa 16px: massa petita per tocar-la amb el dit
       amb precisio (per aixo el tap "fallava" cap al <label> i seleccionava
       el dia enlloc d'obrir el calendari/menu). Ampliem la zona tactil amb
       padding + margin negatiu, sense canviar la mida ni la posicio visual. */
    padding: 6px;
    margin: -6px;
}
#offCanvasPlanificador .date-picker-item.active label{
    background-color: var(--accent-500);
}
#offCanvasPlanificador .date-picker-item .controldate{
    position: static;
}
#offCanvasPlanificador .date-picker-item .controldate p{
    margin: 0;
    padding: 0 4px;
    touch-action: manipulation;
    font-family: var(--font-family-base);
    font-size: 13px;
    color: var(--text-700);
}
#offCanvasPlanificador .routeStages a.add-day-picker{
    position: static;
    height: 38px;
    width: 38px;
    box-sizing: border-box;
    background-color: var(--accent-500);
    color: var(--black);
    border-radius: 8px;
    flex: 0 0 auto;
    margin: 0;
}
#offCanvasPlanificador .routeStages a.add-day-picker i{
    font-size: 20px;
}

#offCanvasPlanificador .pf-plan-divider{
    margin: 0;
    border: none;
    border-top: 1px solid var(--text-200);
}

/* Neutralitzem el truc de l'input[type=date] nadiu que cobria l'etiqueta
   (calendari propi el substitueix, vegeu .pf-cal-popover mes avall). */
#offCanvasPlanificador .date-picker-item input[type="date"]{
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---- Popovers flotants dels dies: calendari (886-24379) i menu 3 punts (886-24219) ---- */
.pf-menu-card{
    position: fixed;
    /* Superior al z-index 10050 que #offCanvasPlanificador (i la resta de
       panells) fan servir en mobil (<991px) per superar la capcelera --
       si no, el popover s'obre correctament pero queda amagat per
       darrere del panell a pantalla completa. */
    z-index: 10060;
    background-color: var(--white);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    padding: 16px;
    display: none;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}
.pf-menu-card.show{
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.pf-cal-popover{
    width: 216px;
    box-sizing: border-box;
}
.pf-cal-popover__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pf-cal-popover__month{
    margin: 0;
    font-family: var(--font-family-base);
    font-size: 12px;
    font-weight: 500;
    color: var(--black);
    text-transform: capitalize;
}
.pf-cal-popover__nav{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background-color: transparent;
    color: var(--text-500);
    cursor: pointer;
    font-size: 16px;
}
.pf-cal-popover__nav:hover{
    background-color: var(--bg-neutral);
    color: var(--secondary-500);
}
.pf-cal-popover__nav:disabled{
    opacity: .3;
    cursor: not-allowed;
}
.pf-cal-popover__nav:disabled:hover{
    background-color: transparent;
    color: var(--text-500);
}
.pf-cal-popover__weekdays,
.pf-cal-popover__grid{
    display: grid;
    grid-template-columns: repeat(7, 24px);
    justify-content: center;
}
.pf-cal-popover__weekdays span{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    font-family: var(--font-family-base);
    font-size: 12px;
    color: var(--text-700);
}
.pf-cal-popover__day{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background-color: transparent;
    font-family: var(--font-family-base);
    font-size: 12px;
    color: var(--text-700);
    cursor: pointer;
}
.pf-cal-popover__day:hover{
    background-color: var(--bg-neutral);
}
.pf-cal-popover__day.is-muted{
    opacity: .4;
}
.pf-cal-popover__day.is-selected{
    font-weight: 700;
    color: var(--secondary-500);
}
.pf-cal-popover__day.is-past{
    opacity: .3;
    cursor: not-allowed;
}
.pf-cal-popover__day.is-past:hover{
    background-color: transparent;
}

.pf-day-menu{
    width: 154px;
    box-sizing: border-box;
    padding: 8px;
}
.pf-day-menu__item{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: 0;
    border-radius: 8px;
    background-color: transparent;
    font-family: var(--font-family-base);
    font-size: 12px;
    color: var(--black);
    cursor: pointer;
    text-align: left;
}
.pf-day-menu__item i{
    font-size: 16px;
    color: var(--text-500);
}
.pf-day-menu__item:hover{
    background-color: var(--bg-neutral);
}
.pf-day-menu__item--danger{
    color: var(--error-500);
}
.pf-day-menu__item--danger i{
    color: var(--error-500);
}
.pf-day-menu__item:disabled{
    opacity: .4;
    cursor: not-allowed;
}
.pf-day-menu__item:disabled:hover{
    background-color: transparent;
}

/* Per sota de 767px el calendari i el menu de dia (886-24379 / 886-24219)
   es veuen massa petits per tocar-los comodament: augmentem mides de
   cel·la, tipografia i icones sense canviar el disseny. */
@media(max-width: 767px){
    .pf-cal-popover{
        width: 284px;
    }
    .pf-cal-popover__month{
        font-size: 16px;
    }
    .pf-cal-popover__nav{
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
    .pf-cal-popover__weekdays,
    .pf-cal-popover__grid{
        grid-template-columns: repeat(7, 36px);
    }
    .pf-cal-popover__weekdays span{
        height: 36px;
        font-size: 14px;
    }
    .pf-cal-popover__day{
        height: 36px;
        width: 36px;
        font-size: 15px;
    }

    .pf-day-menu{
        width: 190px;
        padding: 12px;
    }
    .pf-day-menu__item{
        gap: 10px;
        padding: 8px 12px;
        font-size: 16px;
    }
    .pf-day-menu__item i{
        font-size: 20px;
    }
}

/* ---- Com la fareu? / Tipus de ruta ---- */
#offCanvasPlanificador .pf-plan-modes{
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 0;
    margin-bottom: 16px;
    border-bottom: none;
}
#offCanvasPlanificador .pf-plan-modes .radiogrup{
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    gap: 8px;
}
#offCanvasPlanificador .pf-plan-modes .radiogrup p{
    margin: 0;
    font-family: var(--font-family-base);
    font-size: 18px;
    color: var(--text-800);
}
#offCanvasPlanificador .pf-plan-modes .radiogrup input{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
#offCanvasPlanificador .pf-plan-modes .pf-plan-toggle{
    display: flex;
    flex-wrap: nowrap;
}
#offCanvasPlanificador .pf-plan-modes .radiogrup label{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--bg-neutral);
    background-color: var(--bg-neutral);
    color: var(--black);
    font-family: var(--font-family-base);
    font-size: 18px;
    white-space: nowrap;
    cursor: pointer;
    margin: 0 0 0 -1px;
}
#offCanvasPlanificador .pf-plan-modes .radiogrup label:first-of-type{
    border-radius: 8px 0 0 8px;
    margin-left: 0;
}
#offCanvasPlanificador .pf-plan-modes .radiogrup label:last-of-type{
    border-radius: 0 8px 8px 0;
}
#offCanvasPlanificador .pf-plan-modes .radiogrup input:checked + label{
    background-color: var(--accent-500);
    border-color: var(--accent-500);
    position: relative;
    z-index: 1;
}

/* ---- Targeta de punts ---- */
#offCanvasPlanificador .config-ruta.pf-plan-points{
    background-color: var(--bg-neutral);
    border-radius: 16px;
    padding: 16px;
    gap: 0px;
}
#offCanvasPlanificador .config-ruta .title-planificador{
    font-family: var(--font-family-heading);
    font-weight: 600;
    font-size: 28px;
    color: var(--black);
    margin: 0;
}
#offCanvasPlanificador .config-ruta .inicio,
#offCanvasPlanificador .config-ruta .final{
    padding: 0;
}
#offCanvasPlanificador .config-ruta .inicio > div,
#offCanvasPlanificador .config-ruta .final > div{
    background-color: #fff;
    border: 1px solid #98A0A6;
    border-radius: 8px;
    padding: 12px 16px;
    gap: 16px;
}
#offCanvasPlanificador .pf-point-badge{
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 12px;
    margin: 0;
    padding: 0;
}
#offCanvasPlanificador .pf-point-badge--a{
    background-color: var(--secondary-500);
}
#offCanvasPlanificador .pf-point-badge--b{
    background-color: var(--primary-500);
}
#offCanvasPlanificador .config-ruta input{
    font-family: var(--font-family-base);
    font-size: 18px;
    color: var(--text-600);
}
#offCanvasPlanificador .config-ruta input::placeholder{
    color: var(--text-600);
}
#offCanvasPlanificador .config-ruta .pf-points-divider{
    margin: 12px 0;
    border: none;
    border-top: 1px solid #1F9562;
}

/* Punts intermedis: generats per JS (sgrouteplanner.js), nomes reskin visual */
#offCanvasPlanificador .config-ruta ul.draggable{
    gap: 8px;
}
#offCanvasPlanificador .config-ruta li{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    max-width: 100%;
}
#offCanvasPlanificador .config-ruta li div.flexer-list{
    flex: 1 1 auto;
    min-width: 0;
}
#offCanvasPlanificador .config-ruta li div.flexer-list > div{
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #fff;
    border: 1px solid #98A0A6;
    border-radius: 8px;
    padding: 12px 16px;
    min-width: 0;
    box-sizing: border-box;
}
/* Icona d'arrossegar (Figma 883-23945): fora de la caixa blanca de l'input */
#offCanvasPlanificador .config-ruta li > i.ti-grip-vertical{
    flex: 0 0 auto;
    margin-top: 12px;
    font-size: 20px;
    color: var(--text-500);
    cursor: grab;
}
#offCanvasPlanificador .config-ruta div.flexer-list label{
    order: 0;
    min-width: 24px!important;
    min-height: 24px!important;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background-color: var(--text-500);
    color: #fff;
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#offCanvasPlanificador .config-ruta li input{
    order: 1;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
#offCanvasPlanificador .config-ruta li a{
    order: 2;
    margin: 0;
}
#offCanvasPlanificador .config-ruta li a img{
    position: static;
    transform: none;
    width: 16px;
}
#offCanvasPlanificador .config-ruta button.add-inter-point{
    color: var(--black);
    font-size: 18px;
    padding-left: 0;
    gap: 8px;
    margin-top:4px
}
#offCanvasPlanificador .config-ruta button.add-inter-point i{
    color: var(--secondary-500);
    font-size: 20px;
}

/* ---- Caracteristiques (altimetria-planificador reskin, Figma 906-27353) ---- */
#offCanvasPlanificador .pf-plan-stats{
    background-color: var(--bg-secondary);
    border-radius: 16px;
    padding: 16px;
    margin: 20px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 0;
}
/* Abans de calcular una ruta el contenidor esta buit: no mostrar la targeta. */
#offCanvasPlanificador .pf-plan-stats:empty{
    display: none;
    margin: 0;
}
#offCanvasPlanificador .pf-plan-stats .row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 32px;
    margin: 0;
    padding: 0;
    width: 100%;
}
#offCanvasPlanificador .pf-plan-stats .flex-altimetria{
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    /* flex-end (no center): alinea la icona amb el value (el numero gran),
       no amb el punt mig entre el label i el value. */
    align-items: flex-end;
    gap: 8px;
    padding: 0;
    margin: 0;
}
#offCanvasPlanificador .pf-plan-stats .flex-altimetria__info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
#offCanvasPlanificador .pf-plan-stats .flex-altimetria i{
    font-size: 28px;
    line-height: 1;
    color: var(--secondary-500);
}
#offCanvasPlanificador .pf-plan-stats .flex-altimetria__label{
    font-family: var(--font-family-base);
    font-size: 14px;
    line-height: 1.2;
    color: var(--black);
}
#offCanvasPlanificador .pf-plan-stats .flex-altimetria p{
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    color: var(--primary-500);
    margin: 0;
}
#offCanvasPlanificador .pf-plan-stats .pf-stats-divider{
    width: 1px;
    padding: 0;
    margin: 6px 0;
    align-self: stretch;
    background-color: #1F9562;
}

/* ---- Rutes relacionades (trams-vies-verdes reskin) ---- */
#offCanvasPlanificador .trams-vies-verdes.pf-plan-related{
    padding: 0;
}
/* Abans de seleccionar punts encara no hi ha rutes relacionades: amagar. */
#offCanvasPlanificador .trams-vies-verdes.pf-plan-related:has(ul:empty){
    display: none;
}
#offCanvasPlanificador .trams-vies-verdes p.title-trams{
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: 32px;
    color: var(--black);
}
#offCanvasPlanificador .trams-vies-verdes ul li{
    display: flex;
    align-items: center;
    background-color: var(--text-50);
    border: 0;
    border-radius: 16px;
    padding: 16px;
    gap: 16px;
}
#offCanvasPlanificador .trams-vies-verdes ul li img{
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
}
#offCanvasPlanificador .trams-vies-verdes ul li .pf-related-route-body{
    flex: 1 1 auto;
    min-width: 0;
}
#offCanvasPlanificador .trams-vies-verdes ul li p:first-of-type{
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 16px;
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#offCanvasPlanificador .trams-vies-verdes ul li p:last-of-type{
    font-family: var(--font-family-base);
    font-size: 14px;
    color: var(--text-700);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
#offCanvasPlanificador .trams-vies-verdes ul li a{
    position: static;
    top: auto;
    right: auto;
    transform: none;
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: auto;
    display: flex;
    align-items: center;
    background-color: transparent;
    color: var(--black);
    width: auto;
    height: auto;
    font-size: 24px;
}
#offCanvasPlanificador .trams-vies-verdes ul li a svg{
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

/* ---- Botons d'accio (Figma 2167-14689): barra fixa al peu de la columna,
   fora del contenidor amb scroll, ocupant tot l'ample, amb ombra amunt. ---- */
#offCanvasPlanificador .pf-plan-actions{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 32px;
    background-color: var(--white);
    box-shadow: 0 -4px 4px rgba(0, 0, 0, .15);
    border-radius: 0 0 16px 16px;
}
/* Amb el botó d'inici de sessió (visitants) el peu té dues files: més aire
   al final de l'scroll perquè no quedi contingut amagat a sota. */
#offCanvasPlanificador.pf-plan-guest .pf-plan-scroll{
    padding-bottom: 192px;
}
#offCanvasPlanificador .pf-btn-primary{
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 8px;
    height: 47px;
    padding: 0 24px 0 16px;
    border: 0;
    border-radius: 8px;
    background-color: var(--accent-500);
    color: var(--black);
    font-family: var(--font-family-base);
    font-size: 20px;
}
#offCanvasPlanificador .pf-btn-primary:disabled{
    opacity: 0.5;
}
#offCanvasPlanificador .pf-plan-actions-dropdown .pf-btn-secondary{
    display: flex;
    align-items: center;
    gap: 8px;
    height: 47px;
    padding: 0 24px 0 16px;
    border: 0;
    border-radius: 8px;
    background-color: var(--bg-neutral);
    color: var(--black);
    font-family: var(--font-family-base);
    font-size: 20px;
}
/* Dropdown "Accions" (Figma 906-27277): targeta blanca amb ombra, items amb
   icona+text i un separador abans de les accions menys frequents. */
#offCanvasPlanificador .pf-plan-actions-dropdown .dropdown-menu{
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
#offCanvasPlanificador .pf-plan-actions-dropdown .dropdown-menu.show{
    display: flex;
}
#offCanvasPlanificador .pf-plan-actions-dropdown .dropdown-item{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    font-family: var(--font-family-base);
    font-size: 14px;
    color: var(--black);
    white-space: nowrap;
    background-color: transparent;
}
#offCanvasPlanificador .pf-plan-actions-dropdown .dropdown-item i{
    font-size: 16px;
    color: var(--text-500);
}
#offCanvasPlanificador .pf-plan-actions-dropdown .dropdown-item:hover,
#offCanvasPlanificador .pf-plan-actions-dropdown .dropdown-item:focus{
    background-color: var(--bg-neutral);
    color: var(--black);
}
#offCanvasPlanificador .pf-plan-actions-dropdown .dropdown-item:disabled,
#offCanvasPlanificador .pf-plan-actions-dropdown .dropdown-item:disabled:hover,
#offCanvasPlanificador .pf-plan-actions-dropdown .dropdown-item:disabled:focus{
    background-color: transparent;
    opacity: .5;
    cursor: not-allowed;
}
#offCanvasPlanificador .pf-plan-actions-dropdown .dropdown-menu hr{
    margin: 0;
    border: none;
    border-top: 1px solid #1F956240;
}

/* Mateixa escala que el menu de dia (886-24219), per coherencia amb el
   dropdown "Accions" del peu de la columna (al costat de "Desa la ruta"). */
@media(max-width: 767px){
    #offCanvasPlanificador .pf-plan-actions-dropdown .dropdown-menu{
        padding: 12px;
    }
    #offCanvasPlanificador .pf-plan-actions-dropdown .dropdown-item{
        gap: 10px;
        padding: 8px 12px;
        font-size: 16px;
    }
    #offCanvasPlanificador .pf-plan-actions-dropdown .dropdown-item i{
        font-size: 20px;
    }

    /* La caixa de caracteristiques (distancia/desnivell) fa flex-wrap: quan
       els items salten de linia el divisor vertical ja no te sentit visual
       (apareix "penjant" al final d'una linia o desalineat). L'amaguem
       nomes en aquest breakpoint. */
    #offCanvasPlanificador .pf-plan-stats .pf-stats-divider{
        display: none;
    }
}

@media(max-width: 992px){
    #offCanvasPlanificador .pf-plan-modes{
        flex-wrap: wrap;
    }
}

/* =========================================
   Modal "Recordeu" registre/inici de sessió (Figma _modal-recordeu):
   salta en clicar #pfPlanFab com a visitant. Sense claus noves.
   ========================================= */
#loadingPlanificador .pf-recordeu-dialog{
    max-width: 606px;
}
#loadingPlanificador .pf-recordeu{
    position: relative;
    border: 0;
    border-radius: 16px;
    padding: 32px;
    background-color: #ffffff;
}
#loadingPlanificador .pf-recordeu__close{
    position: absolute;
    top: 20px;
    right: 20px;
}
#loadingPlanificador .pf-recordeu__title{
    margin-bottom: 16px;
    color: #1F9562;
    font-family: var(--font-family-heading);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
}
#loadingPlanificador .pf-recordeu__divider{
    margin: 0 0 16px;
    border: none;
    border-top: 1px solid #BABDC2;
    opacity: 1;
}
#loadingPlanificador .pf-recordeu__intro{
    margin-bottom: 24px;
    color: #475057;
    font-family: var(--font-family-base);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.35;
}
#loadingPlanificador .pf-recordeu__intro a{
    color: #1F9562;
    font-weight: 600;
}
#loadingPlanificador .pf-recordeu__card{
    margin-bottom: 16px;
    border-radius: 16px;
    background-color: #CCEBDE;
    padding: 24px;
}
#loadingPlanificador .pf-recordeu__card-title{
    margin-bottom: 12px;
    color: #000000;
    font-family: var(--font-family-heading);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}
#loadingPlanificador .pf-recordeu__list{
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #000000;
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 1.4;
}
#loadingPlanificador .pf-recordeu__remember{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 24px;
    color: #383E43;
    font-family: var(--font-family-base);
    font-size: 18px;
    cursor: pointer;
}
/* CTA amb el patró oficial c-button (split-swap + cantonades corbes):
   mateixa animació i junta que la resta del lloc. Només fixem l'ample Figma. */
#loadingPlanificador .pf-recordeu__cta{
    width: 244px;
    max-width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
}
#loadingPlanificador .pf-recordeu__cta .c-button__label{
    flex: 1 1 auto;
    justify-content: center;
}
@media(max-width: 575px){
    #loadingPlanificador .pf-recordeu{
        padding: 24px 20px;
    }
    #loadingPlanificador .pf-recordeu__title{
        font-size: 32px;
    }
    #loadingPlanificador .pf-recordeu__intro{
        font-size: 18px;
    }
    #loadingPlanificador .pf-recordeu__card-title{
        font-size: 22px;
    }
}

/* =========================================
   Panell de capes real (mod_sgmap #custom-layering) amb el disseny
   de "Filtres" (Figma node 821:18128). Mateixa posicio que la resta
   de modals d'aquesta fase: a la dreta, apilat amb els botons.
   ========================================= */
body.route-planner #custom-layering{
    position: fixed;
    top: auto;
    right: calc(40px + 48px + 24px);
    bottom: 40px;
    left: auto;
    width: 450px;
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 200px);
    background-color: #fff;
    border-radius: 16px;
    outline: none;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    z-index: 1049;
    overflow-y: auto;
    overscroll-behavior: contain;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(16px);
    transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility 0s linear .25s;
}
body.route-planner #custom-layering.show{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .25s ease-in-out, transform .25s ease-in-out;
}
body.route-planner #custom-layering::after{
    display: none;
}
body.route-planner .pf-real-filters__header{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.route-planner #custom-layering p.pf-real-filters__title{
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: var(--fs-2xl);
    font-style: normal;
    line-height: normal;
    color: var(--secondary-500);
    margin: 0;
}
body.route-planner #custom-layering p.pf-real-filters__subtitle{
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: var(--fs-md);
    font-style: normal;
    line-height: normal;
    color: var(--text-600);
    margin: 0;
}
body.route-planner #custom-layering form{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
body.route-planner #custom-layering p{
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 24px;
    color: var(--black);
    margin: 0 0 8px;
}
body.route-planner #custom-layering ul{
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Amaguem seccions sense contingut (ex. "Serveis" quan el mapa no te
   categories de servei configurades) */
body.route-planner #custom-layering > form > div:not(#layersGroup):has(ul:empty){
    display: none;
}
body.route-planner #custom-layering ul li{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    border: 0;
    height: auto;
}
body.route-planner #custom-layering ul li label{
    order: 1;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    margin: 0;
    min-width: 0;
    font-family: var(--font-family-base);
    font-size: 16px;
    color: var(--text-600);
    gap: 8px;
}
body.route-planner #custom-layering ul li input{
    order: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--secondary-500);
    margin: 0;
}
body.route-planner #custom-layering ul li img{
    order: 2;
    margin: 0 0 0 auto;
    height: 20px;
    width: auto;
    opacity: 0.7;
}
body.route-planner #custom-layering ul li label img{
    display: none;
}

/* Selector de mapa base (#layersGroup): reutilitzem el component real
   .ficha-filters__map-* ja existent al lloc (styles.css) */
body.route-planner #layersGroup{
    background-color: var(--bg-neutral);
    border-radius: 12px;
    padding: 16px;
}
body.route-planner #layersGroup ul{
    flex-direction: row;
    gap: 12px;
}
body.route-planner #layersGroup ul li{
    flex: 1 1 0;
    height: auto;
}
body.route-planner #layersGroup ul li label{
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
body.route-planner #layersGroup ul li input{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
body.route-planner #layersGroup ul li label img{
    display: block;
    order: 0;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--text-100);
    margin: 0;
    height: auto;
    opacity: 1;
    transition: border-color .2s ease-in-out;
}
body.route-planner #layersGroup ul li input:checked + label img{
    border-color: var(--accent-500);
}
body.route-planner #layersGroup ul li label{
    font-family: var(--font-family-base);
    font-size: 12px;
    color: var(--text-600);
    text-align: center;
}

/* Alertes dins el panell (#alertsGroup): ja fa servir el sistema real
   .ficha-filters__* (styles.css); nomes ajustem l'espaiat perque quedi
   consistent amb la resta de seccions d'aquest panell. */
body.route-planner #alertsGroup .ficha-filters__section{
    gap: 8px;
}
body.route-planner #alertsGroup .ficha-filters__section-title{
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 24px;
    color: var(--black);
}

/* =========================================
   Alertes reals (mod_sgalerts #offcanvasIncidencias /
   #offcanvasIncidenciaFicha) amb el disseny "Alertes"
   (Figma node 857:18413 / 858:18718)
   ========================================= */
body.route-planner #offcanvasIncidencias{
    position: fixed;
    top: auto;
    left: auto;
    right: calc(40px + 48px + 24px);
    bottom: 40px;
    width: 450px;
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 200px);
    height: auto;
    background-color: var(--bg-accent);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    z-index: 1049;

    /* Substituim el slide-in nadiu de Bootstrap (translateX des de la vora)
       per la mateixa transicio fade + translateY que fem servir a la resta
       de modals d'aquesta fase (#custom-layering, etc.) */
    visibility: hidden !important;
    opacity: 0;
    transform: translateY(16px) !important;
    transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility 0s linear .25s !important;
}
body.route-planner #offcanvasIncidencias.show{
    visibility: visible !important;
    opacity: 1;
    transform: translateY(0) !important;
    transition: opacity .25s ease-in-out, transform .25s ease-in-out !important;
}
body.route-planner #offcanvasIncidencias button.btn-close{
    top: 32px;
    right: 32px;
}
body.route-planner #offcanvasIncidencias p.head-alertas{
    font-family: var(--font-family-heading);
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    color: var(--black);
    margin: 0 0 24px;
}
body.route-planner #offcanvasIncidencias ol{
    gap: 0;
    list-style: none;
}
body.route-planner #offcanvasIncidencias ol li{
    padding: 24px 48px 24px 40px;
    border-bottom: 1px solid var(--accent-500);
}
body.route-planner #offcanvasIncidencias ol li:first-child{
    padding-top: 0;
}
body.route-planner #offcanvasIncidencias ol li:hover,
body.route-planner #offcanvasIncidencias ol li:focus{
    background-color: transparent;
}
body.route-planner #offcanvasIncidencias ol li div.num{
    padding: 0;
    top: 24px;
    left: 0;
}
body.route-planner #offcanvasIncidencias ol li div.num img{
    width: 24px;
    height: 24px;
}
body.route-planner #offcanvasIncidencias ol li div.num span{
    position: static;
    transform: none;
    display: flex;
}
body.route-planner #offcanvasIncidencias ol li p:first-of-type{
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 20px;
    color: var(--black);
    line-height: 1.2;
    margin: 0 0 16px;
}
body.route-planner #offcanvasIncidencias ol li p:nth-of-type(2){
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 16px;
    color: var(--text-800);
    margin: 0 0 4px;
}
body.route-planner #offcanvasIncidencias ol li p.rutas{
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-800);
    text-decoration: none;
    margin: 0;
}
body.route-planner #offcanvasIncidencias ol li a.arrow{
    top: 24px;
    right: 0;
    background-color: var(--secondary-500);
    border-radius: 8px;
    padding: 8px;
    width: 42px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
}
body.route-planner #offcanvasIncidencias ol li a.arrow i{
    font-size: 16px;
}

body.route-planner #offcanvasIncidenciaFicha{
    position: fixed;
    top: auto;
    left: auto;
    right: calc(40px + 48px + 24px);
    bottom: 40px;
    width: 450px;
    max-width: calc(100vw - 80px);
    height: calc(100vh - 200px);
    background-color: var(--bg-accent);
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    z-index: 1049;

    visibility: hidden !important;
    opacity: 0;
    transform: translateY(16px) !important;
    transition: opacity .25s ease-in-out, transform .25s ease-in-out, visibility 0s linear .25s !important;
}
body.route-planner #offcanvasIncidenciaFicha.show{
    visibility: visible !important;
    opacity: 1;
    transform: translateY(0) !important;
    transition: opacity .25s ease-in-out, transform .25s ease-in-out !important;
}

/* Nota: per sota de 991px aquests panells passen a pantalla completa
   (vegeu el bloc "RESPONSIVE < 991px" mes avall); no cal cap ajust aqui. */

/* =========================================
   RESPONSIVE < 991px — botons flotants i finestres emergents del
   planificador (Crea la teva ruta, Filtres, Alertes, detall d'alerta)
   ========================================= */
@media(max-width: 991px){
    /* "Planifica la ruta": ample complet (100vw - 32px) i ancorat abaix */
    .pf-plan-fab{
        top: auto;
        left: 16px;
        right: 16px;
        bottom: 16px;
        width: auto;
        transform: none;
        justify-content: center;
    }

    /* Capes i alertes: apilats per sobre del boto de planificar, amb el
       mateix marge, perque mai es "pisin" */
    .pf-filters-fab{
        right: 16px;
        bottom: calc(16px + 48px + 16px);
    }
    .pf-alerts-fab{
        right: 16px;
        bottom: calc(16px + 48px + 16px + 48px + 16px);
    }

    /* Totes les finestres emergents: pantalla completa, cantonades rectes,
       per sobre de tot (incloent la capcelera, que va a z-index 9999).
       svh en lloc de vh: sense scroll de pagina la barra de Chrome mobil
       mai s'amaga, per aixo cal mesurar sempre pel viewport "petit" (amb
       la barra visible) o el contingut queda tallat per sota seu. */
    #offCanvasPlanificador,
    body.route-planner #custom-layering,
    body.route-planner #offcanvasIncidencias,
    body.route-planner #offcanvasIncidenciaFicha{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        height: 100svh;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100svh;
        border-radius: 0;
        z-index: 10050;
    }

    /* #custom-layering viu dins de .mapa, que crea el seu propi contexte
       d'apilament (position:fixed + z-index). Cap z-index intern pot fer-lo
       sortir per sobre de la capcelera (9999) si .mapa es queda a 0 -- nomes
       pugem .mapa quan el panell de filtres esta obert. Nomes cal per sota
       de 991px (a partir d'aqui els panells ja no son pantalla completa ni
       tapen la capcelera). */
    body.route-planner .mapa:has(#custom-layering.show){
        z-index: 10040;
    }

    /* "Com la fareu" / "Tipus de ruta": cada grup ocupa tota l'amplada
       (una sota l'altra, ja que .pf-plan-modes te flex-wrap:wrap) i les
       dues opcions de cada selector es reparteixen el 50% cadascuna. */
    #offCanvasPlanificador .pf-plan-modes .radiogrup{
        flex: 1 1 100%;
        width: 100%;
    }
    #offCanvasPlanificador .pf-plan-modes .pf-plan-toggle{
        width: 100%;
    }
    #offCanvasPlanificador .pf-plan-modes .radiogrup label{
        flex: 1 1 50%;
        width: 50%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}