.panel-detalle{

    position:fixed;

    top:0;

    right:-460px;

    width:440px;

    height:100vh;

    background:#fff;

    z-index:999999;

    transition:.35s;

    box-shadow:-10px 0 40px rgba(0,0,0,.12);

    overflow-y:auto;

}

.panel-detalle.open{

    right:0;

}

#cerrarPanel{

    position:absolute;

    top:20px;

    right:20px;

    z-index:20;

}

.panel-detalle img{

    max-width:100%;

}

.panel-detalle hr{

    margin:25px 0;

}

@media(max-width:768px){

.panel-detalle{

    width:100%;

    right:-100%;

}

}


.servicio-card{

    border:1px solid #E8EBF2;

    border-radius:18px;

    padding:18px;

    margin-bottom:16px;

    background:#FFF;

    transition:.25s;

}

.servicio-card:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.servicio-logo{

    width:72px;

    height:36px;

    object-fit:contain;

    flex-shrink:0;

}

.servicio-titulo{

    font-size:17px;

    font-weight:700;

    color:#1E0C42;

}

.servicio-detalle{

    margin-top:12px;

    color:#6c757d;

    font-size:14px;

    line-height:1.6;

}

.moneygram-top{

    margin-top:14px;

    background:#FFF3F3;

    border-left:4px solid #D71920;

    border-radius:12px;

    padding:14px;

}

.moneygram-top small{

    color:#6c757d;

    display:block;

    margin-bottom:4px;

}

.moneygram-top .fs-5{

    color:#D71920;

}


.panel-detalle h3{

    color:#1E0C42;

    font-size:24px;

    font-weight:700;

}

.panel-detalle .badge{

    border-radius:30px;

    padding:8px 16px;

    font-size:.9rem;

}

.panel-detalle hr{

    border-color:#ECECEC;

}


.servicios-wrapper{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:20px;

}

.servicios-scroll{

    display:flex;

    gap:10px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    flex:1;

    padding:4px 2px;

    scrollbar-width:none;

}

.servicios-scroll::-webkit-scrollbar{

    display:none;

}

.scroll-btn{

    width:24px;

    height:24px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.95);

    color:#1E0C42;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    opacity:0;

    transition:.25s;

    flex-shrink:0;

    font-size:12px;

}

.scroll-btn:hover{

    background:#F2F0FA;

}

.servicio-chip{

    width:82px;

    height:58px;

    border:1px solid #E6E8EE;

    border-radius:14px;

    background:#FFF;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    flex-shrink:0;

    transition:border-color .2s, box-shadow .2s;

}

.servicio-chip:hover{

    border-color:#CFC5F3;

}

.servicio-chip.active{

    border:2px solid #1E0C42;

    box-shadow:0 0 0 3px rgba(30,12,66,.08);

}

.servicio-chip img{

    max-width:66px;

    max-height:36px;

    object-fit:contain;

}

.servicio-chip-all{

    width:92px;

    height:64px;

    padding:6px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.all-label{

    font-size:11px;

    font-weight:600;

    color:#5A4A85;

    margin-bottom:3px;

    line-height:1;

}

.servicio-chip i{

    font-size:22px;

    color:#1E0C42;

}

.servicios-wrapper:hover .scroll-btn{

    opacity:1;

}

@media(max-width:768px){

    .scroll-btn{

        display:none;

    }

}


.all-logos{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:3px;

    width:56px;

    align-items:center;

    justify-items:center;

}

.all-logos img{

    width:24px;

    height:12px;

    object-fit:contain;

    display:block;

}



.btn-banred{

    background:linear-gradient(
        90deg,
        #1E0C42 0%,
        #7B1456 35%,
        #C61B52 60%,
        #F08A00 82%,
        #E6D300 100%
    );

    border:none;

    color:#FFF;

    font-weight:600;

    border-radius:12px;

    height:48px;

    transition:.25s;

    box-shadow:0 8px 18px rgba(30,12,66,.18);

}

.btn-banred:hover{

    color:#FFF;

    transform:translateY(-1px);

    box-shadow:0 12px 24px rgba(30,12,66,.22);

}

.btn-banred:focus{

    color:#FFF;

    box-shadow:0 0 0 .25rem rgba(30,12,66,.20);

}

.btn-banred i{

    margin-right:6px;

}




.lista-corresponsales{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    min-height:0;

    padding-right:6px;

    scrollbar-width:none;

}

.lista-corresponsales::-webkit-scrollbar{

    width:0;

    height:0;

}



/* ===========================
   NAVEGACIÓN MÓVIL
=========================== */

.mobile-tabs{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    height:64px;

    background:#FFF;

    border-top:1px solid #E8EBF2;

    display:flex;

    z-index:99999;

    box-shadow:0 -6px 20px rgba(0,0,0,.08);

}

.mobile-tabs button{

    flex:1;

    border:none;

    background:transparent;

    color:#6c757d;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:600;

    transition:.2s;

}

.mobile-tabs button i{

    font-size:22px;

    margin-bottom:4px;

}

.mobile-tabs button.active{

    background:linear-gradient(
        90deg,
        #1E0C42,
        #7B1456,
        #C61B52
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    font-weight:700;

}

.mobile-tabs button.active i{

    background:linear-gradient(
        90deg,
        #1E0C42,
        #7B1456,
        #C61B52
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

@media(min-width:992px){

    .mobile-tabs{

        display:none;

    }

}


/* ===========================
   MODO MÓVIL
=========================== */

@media(max-width:991px){

    #appPrincipal{

        position:relative;

        overflow:hidden;

        height:100vh;

    }

    .panel-mobile{

        position:absolute;

        top:0;

        left:0;

        width:100%;

        height:calc(100vh - 64px);

        background:#FFF;

        transition:transform .30s ease;

    }

    #panelLista{

        transform:translateX(0);

        z-index:20;

    }

    #panelMapa{

        transform:translateX(100%);

        z-index:10;

    }

    #panelMapa.activo{

        transform:translateX(0);

    }

    #panelLista.oculto{

        transform:translateX(-100%);

    }

    #contenedorMapa{

        display:block !important;

        width:100%;

        height:100%;

    }

    #mapa{

        width:100%;

        height:100% !important;

    }

}



.panel-direccion{

    background:#F8F9FC;

    border:1px solid #ECEEF5;

    border-radius:14px;

    padding:14px;

    margin-bottom:16px;

}

.icon-banred{

    font-size:20px;

    background:linear-gradient(
        90deg,
        #1E0C42,
        #7B1456,
        #C61B52
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.panel-distancia{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:30px;

    background:#F5F2FF;

    color:#1E0C42;

    font-weight:600;

    font-size:.92rem;

    margin-bottom:20px;

}

.panel-distancia i{

    color:#7B1456;

}


.operacion-item{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 10px;

    margin:4px;

    border-radius:30px;

    background:#F6F7FB;

    border:1px solid #E7EAF2;

    color:#4A4A4A;

    font-size:13px;

    font-weight:500;

}

.operacion-item i{

    color:#7B1456;

}

.servicio-detalle{

    display:flex;

    flex-wrap:wrap;

    margin-top:12px;

}


.acciones-panel{

    display:flex;

    justify-content:space-between;

    gap:12px;

}

.accion-btn{

    flex:1;

    border:1px solid #E8EBF2;

    background:#FFF;

    border-radius:16px;

    padding:14px 10px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    transition:.25s;

}

.accion-btn:hover{

    border-color:#7B1456;

    box-shadow:0 10px 20px rgba(0,0,0,.08);

}


.accion-btn span{

    font-size:13px;

    font-weight:600;

    color:#1E0C42;

}

.accion-icon{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#FFF;

}

.accion-icon.ruta{

    background:linear-gradient(
        90deg,
        #1E0C42,
        #7B1456,
        #C61B52
    );

}

.accion-icon.compartir{

    background:linear-gradient(
        90deg,
        #1E0C42,
        #7B1456,
        #C61B52
    );

}

.accion-icon i{

    font-size:16px;

}





.horario-card{

    background:#F8F9FC;

    border:1px solid #ECEEF5;

    border-radius:16px;

    padding:18px;

}

.horario-item{

    display:flex;

    gap:14px;

    align-items:flex-start;

}

.horario-item + .horario-item{

    margin-top:18px;

    padding-top:18px;

    border-top:1px solid #ECEEF5;

}

.horario-icon{

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        90deg,
        #1E0C42,
        #7B1456,
        #C61B52
    );

    color:#FFF;

    flex-shrink:0;

}

.horario-titulo{

    font-weight:700;

    color:#1E0C42;

    margin-bottom:4px;

}

.horario-hora{

    color:#6C757D;

    font-size:.95rem;

}


.estado-detalle{

    font-size:.92rem;

    color:#6C757D;

    font-weight:500;

}