/* Estilos del Modal de Capas */
/*   .layer-modal {*/
/*       position: absolute;*/
/*       top: 20px;*/
/*       right: 50px;*/
/*       width: 420px;*/
/*       background: white;*/
/*       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);*/
/*       border-radius: 12px;*/
/*       z-index: 1000;*/
/*       display: none;*/
/*       !* Se activa con el botón *!*/
/*       flex-direction: column;*/
/*       max-height: 85vh;*/
/*       !* border: 1px solid #e0e0e0; *!*/
/*   }*/

/*   .layer-modal-header {*/
/*       padding: 12px;*/
/*       background: var(--theme-accent-color);*/
/*       color: white;*/
/*       cursor: move;*/
/*       display: flex;*/
/*       justify-content: space-between;*/
/*       align-items: center;*/
/*       font-weight: 600;*/
/*       font-size: 0.9rem;*/
/*       border-radius: 12px 12px 0 0;*/
/*   }*/

/*   .layer-modal-body {*/
/*       overflow-y: auto;*/
/*       padding: 10px;*/
/*       background: #fdfdfd;*/
/*   }*/

/*   .layer-modal-footer {*/
/*       padding: 10px;*/
/*       background: #fdfdfd;*/
/*       border-radius: 0 0 12px 12px;*/
/*   }*/

/*   !* Grupos y Elementos *!*/
/*   .layer-group {*/
/*       margin-bottom: 12px;*/
/*       background: #fff;*/
/*       border: 1px solid #ececec;*/
/*       border-radius: 6px;*/
/*       overflow: hidden;*/
/*   }*/

/*   .group-title {*/
/*       background: #f1f1f1;*/
/*       padding: 6px 12px;*/
/*       font-size: 0.75rem;*/
/*       font-weight: bold;*/
/*       color: #7f8c8d;*/
/*       text-transform: uppercase;*/
/*       display: block;*/
/*   }*/

/*   .layer-item {*/
/*       display: flex;*/
/*       align-items: center;*/
/*       padding: 10px 12px;*/
/*       border-bottom: 1px solid #f9f9f9;*/
/*       background: white;*/
/*       transition: background 0.2s;*/
/*   }*/

/*   .layer-item:hover {*/
/*       background: #f8f9fa;*/
/*   }*/

/*   !* Icono de arrastre (Handle) *!*/
/*   .drag-handle {*/
/*       cursor: grab;*/
/*       margin-right: 10px;*/
/*       color: #ccc;*/
/*       font-size: 18px;*/
/*       user-select: none;*/
/*   }*/

/*   .layer-item span.layer-name {*/
/*       flex-grow: 1;*/
/*       font-size: 11px;*/
/*       color: #333;*/
/*       font-weight: 600;*/
/*       white-space: nowrap;*/
/*       overflow: hidden;*/
/*       text-overflow: ellipsis;*/
/*       padding-right: 5px;*/
/*       margin-left: 3px;*/
/*   }*/

/*   .opacity-slider {*/
/*       width: 50px;*/
/*       cursor: pointer;*/
/*       margin: 0;*/
/*       padding: 0;*/
/*       flex-shrink: 0;*/
/*       min-height: 12px;*/
/*   }*/

/*   .group-opacity-slider {*/
/*       width: 48px;*/
/*       margin-right: 10px;*/
/*       cursor: pointer;*/
/*       margin-top: 0;*/
/*       margin-bottom: 0;*/
/*       padding: 0;*/
/*       flex-shrink: 0;*/
/*       min-height: 12px;*/
/*   }*/

/*   .close-btn {*/
/*       background: none;*/
/*       border: none;*/
/*       color: white;*/
/*       font-size: 14px;*/
/*       cursor: pointer;*/
/*       line-height: 1;*/
/*       font-weight: bold;*/

/*   }*/

/*   !* Botón de control en el mapa *!*/
/*   .maplibregl-ctrl-layers {*/
/*       background-color: white;*/
/*       background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%23333" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L1 7L12 12L23 7L12 2Z"/><path d="M1 12L12 17L23 12"/><path d="M1 17L12 22L23 17"/></svg>');*/
/*       background-size: 20px;*/
/*       background-repeat: no-repeat;*/
/*       background-position: center;*/
/*       width: 30px;*/
/*       height: 30px;*/
/*       display: block;*/
/*       padding: 0;*/
/*       outline: none;*/
/*       border: 0;*/
/*       cursor: pointer;*/
/*   }*/

/*   !* Color personalizado para checks y barras de transparencia (range) configurable *!*/
/*   :root {*/
/*       --theme-accent-color: rgb(142, 22, 22);*/
/*   }*/

/*   input[type="checkbox"],*/
/*   input[type="radio"] {*/
/*       accent-color: var(--theme-accent-color);*/
/*   }*/

/*   input[type="range"] {*/
/*       -webkit-appearance: none;*/
/*       appearance: none;*/
/*       background: transparent;*/
/*       accent-color: var(--theme-accent-color);*/
/*       --value: 100%;*/
/*       margin: 0;*/
/*       padding: 0;*/
/*       outline: none;*/
/*       border: none;*/
/*       box-sizing: border-box;*/
/*   }*/

/*   input[type="range"]::-webkit-slider-runnable-track {*/
/*       width: 100%;*/
/*       height: 2px;*/
/*       cursor: pointer;*/
/*       background: linear-gradient(to right, var(--theme-accent-color) var(--value), #e0e0e0 var(--value));*/
/*       border-radius: 2px;*/
/*       border: 0 solid transparent;*/
/*       box-sizing: border-box;*/
/*       outline: none;*/
/*   }*/

/*   input[type="range"]::-webkit-slider-thumb {*/
/*       height: 12px;*/
/*       width: 12px;*/
/*       border-radius: 50%;*/
/*       background: var(--theme-accent-color);*/
/*       cursor: pointer;*/
/*       -webkit-appearance: none;*/
/*       margin-top: -5px;*/
/*       !* (2px/2) - (12px/2) = -5px exactos para centrar perfectamente *!*/
/*       box-shadow: none;*/
/*       border: 0 solid transparent;*/
/*       box-sizing: border-box;*/
/*   }*/

/*   input[type="range"]::-moz-range-track {*/
/*       width: 100%;*/
/*       height: 2px;*/
/*       cursor: pointer;*/
/*       background: linear-gradient(to right, var(--theme-accent-color) var(--value), #e0e0e0 var(--value));*/
/*       border-radius: 2px;*/
/*       border: 0 solid transparent;*/
/*       box-sizing: border-box;*/
/*       outline: none;*/
/*   }*/

/*   input[type="range"]::-moz-range-thumb {*/
/*       height: 12px;*/
/*       width: 12px;*/
/*       border-radius: 50%;*/
/*       background: var(--theme-accent-color);*/
/*       cursor: pointer;*/
/*       border: none;*/
/*   }*/


.layer-modal {
    position: absolute;
    top: 20px;
    right: 50px;
    width: 420px;
    background: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    z-index: 1000;
    display: none;
    /* Se activa con el botón */
    flex-direction: column;
    max-height: 85vh;
    /* border: 1px solid #e0e0e0; */
}

.layer-modal-header {
    padding: 12px;
    background: var(--theme-accent-color);
    color: white;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 12px 12px 0 0;
}

.layer-modal-body {
    overflow-y: auto;
    padding: 10px;
    background: #fdfdfd;
}

.layer-modal-footer {
    padding: 10px;
    background: #fdfdfd;
    border-radius: 0 0 12px 12px;
}

/* Grupos y Elementos */
.layer-group {
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    overflow: hidden;
}

.group-title {
    background: #f1f1f1;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: bold;
    color: #7f8c8d;
    text-transform: uppercase;
    display: block;
}

.layer-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #f9f9f9;
    background: white;
    transition: background 0.2s;
}

.layer-item:hover {
    background: #f8f9fa;
}

/* Icono de arrastre (Handle) */
.drag-handle {
    cursor: grab;
    margin-right: 10px;
    color: #ccc;
    font-size: 18px;
    user-select: none;
}

.layer-item span.layer-name {
    flex-grow: 1;
    font-size: 13px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 5px;
    margin-left: 12px;
}

.opacity-slider {
    width: 50px;
    cursor: pointer;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    min-height: 12px;
}

.group-opacity-slider {
    width: 48px;
    margin-right: 10px;
    cursor: pointer;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    flex-shrink: 0;
    min-height: 12px;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    font-weight: bold;

}

/* Botón de control en el mapa */
.maplibregl-ctrl-layers {
    background-color: white;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%23333" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L1 7L12 12L23 7L12 2Z"/><path d="M1 12L12 17L23 12"/><path d="M1 17L12 22L23 17"/></svg>');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    display: block;
    padding: 0;
    outline: none;
    border: 0;
    cursor: pointer;
}

/* Color personalizado para checks y barras de transparencia (range) configurable */
:root {
    --theme-accent-color: rgb(142, 22, 22);
}

input[type="checkbox"],
input[type="radio"] {

    accent-color: var(--theme-accent-color);
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    accent-color: var(--theme-accent-color);
    --value: 100%;
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    box-sizing: border-box;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: linear-gradient(to right, var(--theme-accent-color) var(--value), #e0e0e0 var(--value));
    border-radius: 2px;
    border: 0 solid transparent;
    box-sizing: border-box;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: var(--theme-accent-color);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
    /* (2px/2) - (12px/2) = -5px exactos para centrar perfectamente */
    box-shadow: none;
    border: 0 solid transparent;
    box-sizing: border-box;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: linear-gradient(to right, var(--theme-accent-color) var(--value), #e0e0e0 var(--value));
    border-radius: 2px;
    border: 0 solid transparent;
    box-sizing: border-box;
    outline: none;
}

input[type="range"]::-moz-range-thumb {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: var(--theme-accent-color);
    cursor: pointer;
    border: none;
}


.mapcompare-reset-button {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
}