/*
 * CargoEX Google Maps Isolated CSS v2.1.78
 * Estructura propia del mapa frontend.
 * Google Maps conserva su CSS default/nativo.
 */

.cxgm-panel{
    width:100%;
    box-sizing:border-box;
}

.cxgm-header{
    margin:0 0 12px;
}

.cxgm-header strong{
    display:block;
    color:#111827;
    font-size:14px;
    font-weight:700;
    margin-bottom:6px;
}

.cxgm-header span{
    display:block;
    color:#4b5563;
    font-size:13px;
    line-height:1.4;
}

.cxgm-canvas{
    width:100%;
    min-height:500px;
    border:1px solid #d1d5db;
    border-radius:10px;
    overflow:hidden;
    background:#f3f4f6;
    box-sizing:border-box;
}

/* Selector de capas propio. No toca controles nativos de Google. */
.cxgm-layer-control,
.cxgm-layer-control *,
.cxgm-layer-control *::before,
.cxgm-layer-control *::after{
    box-sizing:border-box;
    font-family:Roboto, Arial, sans-serif;
    text-transform:none;
    letter-spacing:normal;
}

.cxgm-layer-control{
    position:relative;
    z-index:10;
    margin:10px;
}

.cxgm-layer-toggle,
.cxgm-layer-toggle:hover,
.cxgm-layer-toggle:focus,
.cxgm-layer-toggle:active{
    width:40px;
    height:40px;
    min-width:40px;
    max-width:40px;
    min-height:40px;
    max-height:40px;
    padding:0;
    margin:0;
    border:0;
    outline:0;
    border-radius:2px;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.3);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#3c4043;
    line-height:1;
    appearance:none;
    -webkit-appearance:none;
}

.cxgm-layer-icon{
    width:18px;
    height:18px;
    display:block;
    position:relative;
    flex:0 0 auto;
}

.cxgm-layer-icon::before,
.cxgm-layer-icon::after{
    content:"";
    position:absolute;
    left:2px;
    width:14px;
    height:10px;
    border:2px solid #5f6368;
    border-radius:1px;
    transform:skewY(-18deg);
    background:#fff;
}

.cxgm-layer-icon::before{ top:1px; }
.cxgm-layer-icon::after{ top:7px; }

.cxgm-layer-panel{
    position:absolute;
    top:0;
    left:50px;
    display:none;
    align-items:flex-start;
    gap:8px;
    padding:8px;
    background:#fff;
    border:0;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(60,64,67,.30);
    width:auto;
    max-width:calc(100vw - 120px);
}

.cxgm-layer-control.is-open .cxgm-layer-panel{
    display:flex;
}

.cxgm-layer-card,
.cxgm-layer-card:hover,
.cxgm-layer-card:focus,
.cxgm-layer-card:active{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
    width:70px;
    min-width:70px;
    max-width:70px;
    min-height:76px;
    padding:0;
    margin:0;
    border:0;
    outline:0;
    background:transparent;
    box-shadow:none;
    color:#3c4043;
    font-size:12px;
    font-weight:400;
    line-height:1.08;
    text-align:center;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
}

.cxgm-layer-thumb{
    display:block;
    width:56px;
    height:56px;
    border:0;
    border-radius:6px;
    background-color:#f1f3f4;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    box-shadow:none;
    overflow:hidden;
}



.cxgm-layer-label{
    display:block;
    width:100%;
    color:#3c4043;
    font-size:12px;
    font-weight:400;
    line-height:1.08;
    text-align:center;
    white-space:normal;
}

.cxgm-layer-satellite .cxgm-layer-thumb{
    background-image:url("https://maps.gstatic.com/tactile/layerswitcher/ic_satellite-1x.png");
}

.cxgm-layer-terrain .cxgm-layer-thumb{
    background-image:url("https://maps.gstatic.com/tactile/layerswitcher/ic_terrain-1x.png");
}

.cxgm-help{
    margin:8px 0 0;
    color:#4b5563;
    font-size:13px;
}

@media (max-width:760px){
    .cxgm-canvas{
        min-height:380px;
    }

    .cxgm-layer-panel{
        left:0;
        top:48px;
        flex-wrap:wrap;
        max-width:calc(100vw - 40px);
    }
}


/* CargoEX v2.1.78 - Controles propios aislados del mapa frontend.
   Estos controles no usan .button ni clases visuales del sistema CargoEX. */
.cxgm-control-group,
.cxgm-control-stack,
.cxgm-control-group *,
.cxgm-control-stack *{
    box-sizing:border-box;
    font-family:Roboto, Arial, sans-serif;
    text-transform:none;
    letter-spacing:normal;
}

.cxgm-control-group{
    margin:10px;
}

.cxgm-control-stack{
    margin:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.cxgm-control-button,
.cxgm-control-button:hover,
.cxgm-control-button:focus,
.cxgm-control-button:active{
    width:40px;
    height:40px;
    min-width:40px;
    max-width:40px;
    min-height:40px;
    max-height:40px;
    padding:0;
    margin:0;
    border:0;
    outline:0;
    border-radius:2px;
    background:#fff;
    color:#3c4043;
    box-shadow:0 1px 4px rgba(0,0,0,.3);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    font-size:22px;
    font-weight:400;
    appearance:none;
    -webkit-appearance:none;
    text-align:center;
}

.cxgm-control-button:hover,
.cxgm-control-button:focus{
    background:#f8f9fa;
}

.cxgm-zoom-group{
    display:flex;
    flex-direction:column;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.3);
    border-radius:2px;
    overflow:hidden;
}

.cxgm-zoom-group .cxgm-control-button{
    box-shadow:none;
    border-radius:0;
}

.cxgm-zoom-group .cxgm-control-button + .cxgm-control-button{
    border-top:1px solid #e5e7eb;
}

.cxgm-control-fullscreen span{
    width:18px;
    height:18px;
    position:relative;
    display:block;
}

.cxgm-control-fullscreen span::before,
.cxgm-control-fullscreen span::after{
    content:"";
    position:absolute;
    inset:0;
    border:2px solid #5f6368;
}

.cxgm-control-fullscreen span::before{
    clip-path:polygon(0 0, 38% 0, 38% 2px, 2px 2px, 2px 38%, 0 38%, 0 0, 62% 0, 100% 0, 100% 38%, calc(100% - 2px) 38%, calc(100% - 2px) 2px, 62% 2px);
}

.cxgm-control-fullscreen span::after{
    clip-path:polygon(0 62%, 2px 62%, 2px calc(100% - 2px), 38% calc(100% - 2px), 38% 100%, 0 100%, 0 62%, 62% 100%, 100% 100%, 100% 62%, calc(100% - 2px) 62%, calc(100% - 2px) calc(100% - 2px), 62% calc(100% - 2px));
}

.cxgm-control-center span{
    width:18px;
    height:18px;
    position:relative;
    display:block;
}

.cxgm-control-center span::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:8px;
    height:8px;
    border:2px solid #5f6368;
    border-radius:50%;
    transform:translate(-50%, -50%);
}

.cxgm-control-center span::after{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:2px;
    height:18px;
    background:linear-gradient(to bottom, #5f6368 0 5px, transparent 5px 13px, #5f6368 13px 18px);
    transform:translateX(-50%);
    box-shadow:0 0 0 transparent;
}

.cxgm-control-zoom-in,
.cxgm-control-zoom-out{
    font-size:28px;
    color:#3c4043;
}


/* CargoEX v2.1.78 - Selector de capas:
   Se eliminó el box-shadow azul de .cxgm-layer-thumb en hover/focus/activo
   para no afectar visualmente el tipo de vista del mapa.
 */


.cxgm-map-message{
    min-height:260px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    color:#4b5563;
    text-align:center;
    background:#f9fafb;
    border:1px dashed #d1d5db;
    border-radius:8px;
}