/* Estilos generales para el control de capas */
.maplibregl-ctrl-switch {
    position: absolute;
    background: white;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    width: 420px;
    border-radius: 12px;
    z-index: 1 !important;
}

/*.maplibregl-ctrl-switch * {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    box-sizing: border-box;*/


/*}*/

.maplibregl-ctrl-switch-header {
    background: #400A0A;
    padding: 10px ;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
     border-top-left-radius   : 12px;
    border-top-right-radius: 12px;
}

.maplibregl-ctrl-switch-header-close-btn {
    background: transparent;
    border: none;
    font-size: 25px;
    box-sizing: border-box;
    padding: 0;
    font-weight: 600;
    font-family: "Poppins", sans-serif !important;
    color: white !important;
    width: fit-content !important;
}

.maplibregl-ctrl-switch-body {
    width: 100%;
    padding: 10px 10px 0px 10px;

     border-bottom-left-radius   : 12px;
    border-bottom-right-radius: 12px;
}

.maplibregl-ctrl-switch-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.maplibregl-ctrl-switch-container-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding: 4px 8px;
    position: relative;
    background-color: white;
    transition: background-color 0.2s ease;

}

.maplibregl-ctrl-switch-container-item:hover {
    background-color: rgba(129, 127, 127, 0.13);
}

.maplibregl-ctrl-switch-container-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;

}



.maplibregl-ctrl-switch-checkbox {
    position: relative;
    margin: 0 !important;
    display: flex;
    align-items: center;
}

.maplibregl-ctrl-switch-checkbox label {
    position: relative;
    cursor: pointer;
    user-select: none;
    width: 18em;
    overflow: hidden;
    white-space: nowrap;
     color: #000000; /* negro puro */
    text-transform: capitalize !important;
    text-overflow: ellipsis;

}


.maplibregl-ctrl-switch-checkbox label:before {
    content: "";
    background-color: transparent;
    border: 1px solid #400A0A;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
        inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
}


/* Estilo específico para el pseudo-elemento :before cuando el input es de tipo radio */
.maplibregl-ctrl-switch-checkbox-label-radio:before {
    border-radius: 50%;
}

/* Estilo específico para el pseudo-elemento :before cuando el input es de tipo checkbox */
.maplibregl-ctrl-switch-checkbox-label:before {
    border-radius: 0;


}

.maplibregl-ctrl-switch-checkbox input:checked + label {
      font-weight: 410;  /* más suave que bold (700) */
        color: #000000; /* negro puro */
}


.maplibregl-ctrl-switch-checkbox input:checked+label:before {
    background-color: #ffffff;
    border-color: #400A0A;
}

.maplibregl-ctrl-switch-checkbox input:checked+label:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid black;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.maplibregl-ctrl-switch-checkbox input {
    display: none;
    /* Oculta el checkbox nativo */
}

.maplibregl-ctrl-switch-range {
    width: 25%;
    position: relative;
}

.maplibregl-ctrl-switch-range-label {
    position: absolute;
    top: -4px;
    left: calc(50% - 8px);
    font-size: 10px;
    font-weight: 500;
}

.maplibregl-ctrl-switch-range input[type="range"] {
    font-size: 1.5rem;
    width: 100%;
    margin-top: 12px;
}

.maplibregl-ctrl-switch-range input[type="range"] {
    color: #aa151f;
    --thumb-height: 1.125em;
    --track-height: 0.125em;
    --track-color: rgba(0, 0, 0, 0.2);
    --brightness-hover: 130%;
    --brightness-down: 80%;
    --clip-edges: 0.125em;
}

.maplibregl-ctrl-switch-range input[type="range"].win10-thumb {
    color: #aa151f;
    --thumb-height: 0.6em;
    --thumb-width: 0.2em;
    --clip-edges: 0.00125em;
}

.maplibregl-ctrl-switch-range input[type="range"] {
    position: relative;
    background: #fff0;
    overflow: hidden;
}

.maplibregl-ctrl-switch-range input[type="range"]:active {
    cursor: ew-resize;
}

.maplibregl-ctrl-switch-range input[type="range"]:disabled {
    filter: grayscale(1);
    opacity: 0.3;
    cursor: not-allowed;
}

/* === WebKit specific styles === */
.maplibregl-ctrl-switch-range input[type="range"],
.maplibregl-ctrl-switch-range input[type="range"]::-webkit-slider-runnable-track,
.maplibregl-ctrl-switch-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

.maplibregl-ctrl-switch-range input[type="range"]::-webkit-slider-runnable-track,
.maplibregl-ctrl-switch-range input[type="range"]::-webkit-slider-thumb {
    position: relative;
}

.maplibregl-ctrl-switch-range input[type="range"]::-webkit-slider-thumb {
    --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
    --clip-further: calc(100% + 1px);
    --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;

    width: var(--thumb-width, var(--thumb-height));
    background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
    background-color: currentColor;
    box-shadow: var(--box-fill);
    border-radius: var(--thumb-width, var(--thumb-height));

    filter: brightness(100%);
    clip-path: polygon(100% -1px,
            var(--clip-edges) -1px,
            0 var(--clip-top),
            -100vmax var(--clip-top),
            -100vmax var(--clip-bottom),
            0 var(--clip-bottom),
            var(--clip-edges) 100%,
            var(--clip-further) var(--clip-further));
}

.maplibregl-ctrl-switch-range input[type="range"]:hover::-webkit-slider-thumb {
    filter: brightness(var(--brightness-hover));
    cursor: ew-resize;
}

.maplibregl-ctrl-switch-range input[type="range"]:active::-webkit-slider-thumb {
    filter: brightness(var(--brightness-down));
    cursor: ew-resize;
}

.maplibregl-ctrl-switch-range input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
}

.maplibregl-ctrl-switch-range input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

/* === Firefox specific styles === */
.maplibregl-ctrl-switch-range input[type="range"],
.maplibregl-ctrl-switch-range input[type="range"]::-moz-range-track,
.maplibregl-ctrl-switch-range input[type="range"]::-moz-range-thumb {
    appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

.maplibregl-ctrl-switch-range input[type="range"]::-moz-range-track,
.maplibregl-ctrl-switch-range input[type="range"]::-moz-range-thumb,
.maplibregl-ctrl-switch-range input[type="range"]::-moz-range-progress {
    background: #fff0;
}

.maplibregl-ctrl-switch-range input[type="range"]::-moz-range-thumb {
    background: currentColor;
    border: 0;
    width: var(--thumb-width, var(--thumb-height));
    border-radius: var(--thumb-width, var(--thumb-height));
    cursor: grab;
}

.maplibregl-ctrl-switch-range input[type="range"]:active::-moz-range-thumb {
    cursor: grabbing;
}

.maplibregl-ctrl-switch-range input[type="range"]::-moz-range-track {
    width: 100%;
    background: var(--track-color);
}

.maplibregl-ctrl-switch-range input[type="range"]::-moz-range-progress {
    appearance: none;
    background: currentColor;
    transition-delay: 30ms;
}

.maplibregl-ctrl-switch-range input[type="range"]::-moz-range-track,
.maplibregl-ctrl-switch-range input[type="range"]::-moz-range-progress {
    height: calc(var(--track-height) + 1px);
    border-radius: var(--track-height);
}

.maplibregl-ctrl-switch-range input[type="range"]::-moz-range-thumb,
.maplibregl-ctrl-switch-range input[type="range"]::-moz-range-progress {
    filter: brightness(100%);
}

.maplibregl-ctrl-switch-range input[type="range"]:hover::-moz-range-thumb,
.maplibregl-ctrl-switch-range input[type="range"]:hover::-moz-range-progress {
    filter: brightness(var(--brightness-hover));
}

.maplibregl-ctrl-switch-range input[type="range"]:active::-moz-range-thumb,
.maplibregl-ctrl-switch-range input[type="range"]:active::-moz-range-progress {
    filter: brightness(var(--brightness-down));
}

.maplibregl-ctrl-switch-range input[type="range"]:disabled::-moz-range-thumb {
    cursor: not-allowed;
}

/* Estilos específicos para drag and drop */
.maplibregl-ctrl-switch-move button {
    cursor: ns-resize !important;

}

.maplibregl-ctrl-switch-item.drag {
    opacity: 0.5;
    transform: scale(0.95);
}

.ol-dragover {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px dashed #ffffff;
    pointer-events: none;
    z-index: 1000;
}

.maplibregl-ctrl-switch-item.dropover {
    background-color: rgba(64, 10, 10, 0.9) !important;
    position: relative;
    cursor: grab !important;
}

.maplibregl-ctrl-switch-item.dropover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #ffffff;
}

.maplibregl-ctrl-switch-item.dropover.dropover-after::after {
    bottom: -1px;
}

.maplibregl-ctrl-switch-item.dropover.dropover-before::after {
    top: -1px;
}

/* Estados durante el drag */
.maplibregl-ctrl-switch.drag .maplibregl-ctrl-switch-item:not(.dropover) {
    cursor: no-drop !important;
}

.maplibregl-ctrl-switch.drag .maplibregl-ctrl-switch-item:not(.dropover) .maplibregl-ctrl-switch-checkbox-label {
    cursor: no-drop !important;
}

.maplibregl-ctrl-switch.drag .maplibregl-ctrl-switch-item:not(.dropover) .maplibregl-ctrl-switch-range .range-style {
    cursor: no-drop !important;
}

.maplibregl-ctrl-switch.drag .maplibregl-ctrl-switch-item:not(.dropover) .maplibregl-ctrl-switch-move-button {
    cursor: no-drop !important;
}

.maplibregl-ctrl-switch.drag .maplibregl-ctrl-switch-item.dropover {
    cursor: move;
}

/* Collapse */
.maplibregl-ctrl-group-toggle {
    transition: transform 0.2s ease;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E") no-repeat center center;
    background-size: 24px 24px;
    width: 24px;
    height: 24px;
}

.maplibregl-ctrl-group-toggle.collapsed {
    transform: rotate(-90deg);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/%3E%3C/svg%3E") no-repeat center center;
    background-size: 24px 24px;
    width: 24px;
    height: 24px;
}

.maplibregl-ctrl-collapsable {
    transition: max-height 0.5s ease;
}

.maplibregl-ctrl-switch-group {
    /*overflow-y: auto;*/
    /*max-height: 121px;*/
}