/* 
   Visor Geográfico Pro - Custom Stylesheet
   Theme: Dark Tech GIS / Glassmorphism
   Typography: Inter
*/

/* Global Layout, Variables & Scrollbars */
:root {
    --hover-highlight-fill: #fbbe24b3;
    /* Color de relleno al hacer hover sobre objetos (Amarillo Dorado / Ámbar) */
    --hover-highlight-stroke: #000000;
    /* Color del borde al hacer hover */
}

html,
body {
    height: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: #0b0f19;
    color: #e2e8f0;
    overflow: hidden;
    touch-action: manipulation;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3);
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

.app-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    position: relative;
}

/* Header */
.sig-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 2000;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Renglón 1: título + isologotipo + tema/pantalla completa. La barra de menú
   (.header-actions) es un segundo renglón independiente, a todo el ancho, ver
   más abajo — pedido explícito: que la barra de botones luzca como un menú y
   quede en su propia línea debajo del título. */
.header-title-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    min-height: 60px;
    box-sizing: border-box;
}

/* .header-logo era el emoji 🌎 (dimensionado con font-size); ahora es
   <img src="logo_mini.png">, así que se dimensiona por alto/ancho en vez de
   font-size — object-fit:contain preserva la relación de aspecto original. */
.header-logo {
    height: 28px;
    width: auto;
    object-fit: contain;
    margin-right: 12px;
}

.sig-header h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.025em;
    background: linear-gradient(to right, #ffffff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Destaca la "E" de "sigE" en el título/isologotipo textual, igual que el
   isologotipo gráfico (ver cne_192x192.png): letra más grande, más gruesa y en
   el celeste de acento de la app. .sig-header h2 (y sus overrides por tema) usan
   un degradado con -webkit-text-fill-color:transparent para pintar el texto —
   una propiedad heredable — así que acá se resetea explícitamente color/
   -webkit-text-fill-color/background para que la "E" se vea sólida en celeste
   sin importar qué combinación de tema esté activa. */
.brand-e {
    color: #38bdf8 !important;
    -webkit-text-fill-color: #38bdf8 !important;
    background: none !important;
    font-size: 1.15em;
    font-weight: 800;
}

.header-badge-container {
    margin-left: 16px;
    display: flex;
    align-items: center;
}

/* Empuja el grupo "Ingresar / usuario + tema + pantalla completa + ☰" al
   extremo derecho del renglón 1 de la cabecera (.header-title-bar) — antes
   este margen lo tenía .theme-toggle-btn directamente; se movió acá porque
   "Ingresar" pasó a ser el primer elemento del grupo (pedido del usuario:
   ubicarlo antes del selector de tema). */
.header-title-bar-push-right {
    margin-left: auto;
}

.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f1f5f9;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.theme-toggle-btn:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
    transform: translateY(-1px);
}

.fullscreen-toggle-btn {
    margin-left: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f1f5f9;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.fullscreen-toggle-btn:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
    transform: translateY(-1px);
}

.fullscreen-toggle-btn.is-fullscreen {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #10b981;
}

/* Botón ☰ que colapsa/expande la barra de menú (.header-actions) en pantallas
   angostas — oculto en escritorio, ver su display:flex dentro de
   @media (max-width: 992px). Mismo estilo redondo de ícono que
   .fullscreen-toggle-btn, junto al cual se ubica en .header-title-bar. */
.mobile-menu-toggle-btn {
    display: none;
    margin-left: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f1f5f9;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.mobile-menu-toggle-btn:hover,
.mobile-menu-toggle-btn.is-open {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #ffffff;
}

body.light-theme .mobile-menu-toggle-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}

body.light-theme .mobile-menu-toggle-btn:hover,
body.light-theme .mobile-menu-toggle-btn.is-open {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: #ffffff !important;
}

body.light-theme .fullscreen-toggle-btn {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

body.light-theme .fullscreen-toggle-btn:hover {
    background: #f0f9ff !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}

.theme-toggle-icon {
    font-size: 14px;
    line-height: 1;
}

.header-badge-img {
    height: 38px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    transition: transform 0.2s ease;
}

.header-badge-img:hover {
    transform: scale(1.05);
}

/* Main Container Layout */
.main-container {
    display: flex;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* El panel lateral (.sig-sidebar) y sus controles asociados (colapso,
   redimensionado, expansión flotante, secciones colapsables) se retiraron por
   completo en la Fase 3 del rediseño de navegación — todo su contenido vive
   ahora en los desplegables de .header-actions (.header-tools-dropdown-menu /
   .header-mega-dropdown, más abajo en este archivo). */

/* Íconos de control (apagar/expandir/colapsar capas) a la derecha del título
   "Capas de Información" (ver index.php, menú "🥞 Capas de Info"). */
.layer-tree-header-icons {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.btn-icon-header {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.2s ease;
}

.btn-icon-header:hover {
    background: rgba(0, 120, 255, 0.15);
    color: #00d2ff;
}

body.light-theme .btn-icon-header {
    color: #64748b !important;
}

body.light-theme .btn-icon-header:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Botones "🔄 Refrescar" en verde (pedido explícito) — distinto del resto de los
   íconos de acción (restaurar/apagar), que quedan en el gris/celeste genérico
   de .btn-icon-header. Mismo verde ya usado en el resto de la app para estados
   "activo/success" (ver .fullscreen-toggle-btn.is-fullscreen). */
#btnRefreshLayerTree,
#btnRefreshAssociatedDocs {
    color: #10b981;
}

#btnRefreshLayerTree:hover,
#btnRefreshAssociatedDocs:hover {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

body.light-theme #btnRefreshLayerTree,
body.light-theme #btnRefreshAssociatedDocs {
    color: #059669 !important;
}

body.light-theme #btnRefreshLayerTree:hover,
body.light-theme #btnRefreshAssociatedDocs:hover {
    background: rgba(5, 150, 105, 0.15) !important;
    color: #059669 !important;
}

/* Search Box styling */
.search-wrapper {
    position: relative;
    margin-bottom: 12px;
}

.layer-search {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
    border-radius: 6px !important;
    padding: 10px 12px 10px 36px !important;
    font-size: 13px !important;
    transition: all 0.3s ease;
}

.layer-search:focus {
    border-color: rgba(0, 120, 255, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 255, 0.2) !important;
    background: rgba(30, 41, 59, 0.8) !important;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #64748b;
    pointer-events: none;
}

/* Layer Tree Accordions */
.layer-tree-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tree-loader {
    font-size: 12px;
    color: #64748b;
    text-align: center;
    padding: 20px 0;
}

details.layer-category {
    background: rgba(30, 41, 59, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.25 ease;
}

details.layer-category[open] {
    border-color: rgba(0, 120, 255, 0.2);
}

details.layer-category.has-active-layers {
    border-color: rgba(56, 189, 248, 0.6) !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.18);
}

details.layer-category.has-active-layers summary.category-title {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.22) 0%, rgba(30, 41, 59, 0.6) 100%) !important;
    color: #38bdf8 !important;
    font-weight: 700;
}

.schema-active-badge {
    background: #0284c7;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: 8px;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Per-Layer Feature / Object Search Controls */
.layer-item-controls {
    padding: 6px 8px 8px;
    background: rgba(15, 23, 42, 0.75);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
}

.control-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.opacity-row {
    gap: 8px;
}

.search-row {
    flex-direction: column;
    width: 100%;
}

.layer-feat-search-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #f8fafc !important;
    font-size: 10px;
    padding: 5px 7px;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.layer-feat-search-input:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

.btn-layer-search {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: 1px solid #38bdf8 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 5px 9px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
}

.btn-layer-search:hover {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
}

.btn-layer-search-clear {
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    color: #fca5a5 !important;
    font-size: 10px !important;
    padding: 5px 7px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.btn-layer-search-clear:hover {
    background: rgba(239, 68, 68, 0.4) !important;
    color: #ffffff !important;
}

body.light-theme .btn-layer-search-clear {
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #991b1b !important;
}

body.light-theme .btn-layer-search-clear:hover {
    background: #fca5a5 !important;
    color: #7f1d1d !important;
}

.layer-feat-results {
    width: 100%;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 4px;
    max-height: 180px;
    overflow-y: auto;
    margin-top: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.layer-feat-item {
    padding: 7px 10px;
    font-size: 11px;
    color: #f1f5f9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: background 0.15s ease;
}

.layer-feat-item:last-child {
    border-bottom: none;
}

.layer-feat-item:hover {
    background: rgba(14, 165, 233, 0.25);
}

.feat-item-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.feat-item-icon {
    font-size: 11px;
}

.feat-item-title {
    font-weight: 600;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feat-item-match-info {
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 17px;
}

.match-field-label {
    color: #94a3b8;
    font-weight: 500;
}

.match-field-val {
    color: #38bdf8;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

summary.category-title {
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: none;
    background: rgba(30, 41, 59, 0.4);
    user-select: none;
}

/* Capa Padre Única Colapsable para Capas de Información Electoral */
details.parent-info-category {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

body.light-theme details.parent-info-category {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

summary.parent-category-title {
    background: rgba(30, 41, 59, 0.9) !important;
    color: #38bdf8 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
}

body.light-theme summary.parent-category-title {
    background: #e2e8f0 !important;
    color: #1d4ed8 !important;
    border-bottom-color: #cbd5e1 !important;
}

.parent-category-content {
    padding: 4px !important;
    gap: 3px !important;
    max-height: none !important;
}

details.nested-layer-category {
    margin-bottom: 3px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body.light-theme details.nested-layer-category {
    border-color: #e2e8f0 !important;
}

summary.nested-category-title {
    padding: 6px 8px !important;
    font-size: 12px !important;
    font-weight: 600;
    background: rgba(30, 41, 59, 0.4) !important;
    transition: background 0.2s ease, color 0.2s ease;
    justify-content: flex-start !important;
    gap: 6px;
}

/* Ícono de agarre que indica que el título es arrastrable para reordenar el
   subpanel — mismo criterio visual que .active-layer-drag-handle (panel "Capas
   Activas"). Ver draggable="true" en el <summary>, initDistrictPanelDragAndDrop(). */
.nested-category-drag-handle {
    cursor: grab;
    color: #64748b;
    font-size: 13px;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
}

summary.nested-category-title:hover .nested-category-drag-handle {
    color: #38bdf8;
}

body.light-theme .nested-category-drag-handle {
    color: #94a3b8 !important;
}

/* Distrito seleccionado/abierto: se destaca el título del subpanel (independiente
   de si tiene o no capas activas — has-active-layers, más arriba, sigue teniendo
   prioridad visual si ambas condiciones se dan a la vez, por el orden de las
   reglas). Abrir el subpanel y "seleccionarlo" (zoomToSchemaDistrict) ocurren
   siempre juntos: el clic en el título dispara ambos a la vez. */
details.nested-layer-category[open] summary.nested-category-title {
    background: rgba(56, 189, 248, 0.3) !important;
    color: #7dd3fc !important;
    border-left: 4px solid #38bdf8 !important;
}

/* Arrastre de subpaneles de distrito para reordenarlos (ver
   initDistrictPanelDragAndDrop() en sig.js) — mismo criterio visual que
   .active-layer-card.is-dragging/.drag-over en el panel "Capas Activas". */
details.nested-layer-category.is-dragging {
    opacity: 0.4;
}

details.nested-layer-category.drag-over {
    box-shadow: 0 -3px 0 0 #38bdf8 !important;
}

summary.category-title::-webkit-details-marker {
    display: none;
}

summary.category-title::after {
    content: '▼';
    font-size: 9px;
    color: #64748b;
    transition: transform 0.2s ease;
}

details.layer-category[open] summary.category-title::after {
    transform: rotate(-180deg);
    color: #00d2ff;
}

.category-content {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Sin límite de alto ni scroll propio (pedido explícito): el subpanel de un
       distrito crece a su alto natural según la cantidad de capas — el único
       scroll vertical queda a cargo del contenedor desplegable completo
       (.header-mega-dropdown, ver #capasInfoDropdownMenu), sin scroll anidado. */
}

/* Custom Prominent Scrollbar for District Layer Subpanel */
.category-content::-webkit-scrollbar {
    width: 8px;
}

.category-content::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 6px;
}

.category-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.category-content::-webkit-scrollbar-thumb:hover {
    background: #38bdf8;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.9);
}

/* Scrollbar destacada del panel completo "Capas de Distritos Electorales"
   (pedido explícito) — mismo criterio que la de arriba para cada subpanel de
   distrito, aplicada acá al contenedor que scrollea TODO el árbol.
   #docsDropdownMenu ("Documentos") y #wmsSublayerCheckboxes ("Capas del
   Servicio WMS:") suman el mismo criterio de diseño a pedido explícito del
   usuario. */
#capasInfoDropdownMenu::-webkit-scrollbar,
#docsDropdownMenu::-webkit-scrollbar,
#wmsSublayerCheckboxes::-webkit-scrollbar {
    width: 10px;
}

#capasInfoDropdownMenu::-webkit-scrollbar-track,
#docsDropdownMenu::-webkit-scrollbar-track,
#wmsSublayerCheckboxes::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 6px;
}

#capasInfoDropdownMenu::-webkit-scrollbar-thumb,
#docsDropdownMenu::-webkit-scrollbar-thumb,
#wmsSublayerCheckboxes::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
    border-radius: 6px;
    border: 2px solid rgba(15, 23, 42, 0.5);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

#capasInfoDropdownMenu::-webkit-scrollbar-thumb:hover,
#docsDropdownMenu::-webkit-scrollbar-thumb:hover,
#wmsSublayerCheckboxes::-webkit-scrollbar-thumb:hover {
    background: #38bdf8;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.9);
}

body.light-theme #capasInfoDropdownMenu::-webkit-scrollbar-track,
body.light-theme #docsDropdownMenu::-webkit-scrollbar-track,
body.light-theme #wmsSublayerCheckboxes::-webkit-scrollbar-track {
    background: #e2e8f0;
}

body.light-theme #capasInfoDropdownMenu::-webkit-scrollbar-thumb,
body.light-theme #docsDropdownMenu::-webkit-scrollbar-thumb,
body.light-theme #wmsSublayerCheckboxes::-webkit-scrollbar-thumb {
    border-color: #e2e8f0;
}

body.glassmorphic-theme #capasInfoDropdownMenu::-webkit-scrollbar-track,
body.glassmorphic-theme #docsDropdownMenu::-webkit-scrollbar-track,
body.glassmorphic-theme #wmsSublayerCheckboxes::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body.glassmorphic-theme #capasInfoDropdownMenu::-webkit-scrollbar-thumb,
body.glassmorphic-theme #docsDropdownMenu::-webkit-scrollbar-thumb,
body.glassmorphic-theme #wmsSublayerCheckboxes::-webkit-scrollbar-thumb {
    border-color: transparent;
}

/* Insignia de capas activas / totales (X / Y) */
.schema-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0284c7;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: auto;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4);
    transition: all 0.2s ease;
}

.schema-active-badge.badge-zero {
    background: transparent !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    font-weight: 600;
}

body.light-theme .category-content::-webkit-scrollbar-track {
    background: #e2e8f0;
}

body.light-theme .schema-active-badge.badge-zero {
    background: transparent !important;
    color: #64748b !important;
    box-shadow: none !important;
}

body.glassmorphic-theme .category-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body.glassmorphic-theme .category-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
    border-radius: 8px;
}

body.glassmorphic-theme .schema-active-badge {
    background: rgba(2, 132, 199, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

body.glassmorphic-theme .schema-active-badge.badge-zero {
    background: transparent !important;
    border-color: transparent !important;
    color: #64748b !important;
}

body.glassmorphic-theme.light-theme .schema-active-badge.badge-zero {
    background: transparent !important;
    border-color: transparent !important;
    color: #64748b !important;
}

/* Styled Switch (Toggle Checkbox) */
.layer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.layer-item:hover {
    background: rgba(30, 41, 59, 0.4);
    border-color: rgba(255, 255, 255, 0.05);
}

.layer-item-label {
    font-size: 12px;
    color: #cbd5e1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 210px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase !important;
}

summary.category-title,
.active-layer-title,
.legend-label,
.legend-title,
.legend-layer-title {
    text-transform: uppercase !important;
}

.layer-item-label i {
    font-style: normal;
    opacity: 0.7;
}

/* Spinner for Loading Layer GeoJSON */
.layer-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-top-color: #00d2ff;
    animation: spin 0.8s linear infinite;
    margin-right: 4px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Switch UI Checkbox */
.switch-wrapper {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
}

.switch-wrapper input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(100, 116, 139, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: .3s;
    border-radius: 18px;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: .3s;
    border-radius: 50%;
}

/* Switch deshabilitado (ej. ventana de Atributos 🏷️ en modo solo lectura para un
   operador): se ve apagado y sin cursor de mano, aunque siga reflejando su estado. */
.switch-wrapper input:disabled+.switch-slider {
    opacity: 0.4;
    cursor: not-allowed;
}

.switch-wrapper input:checked+.switch-slider {
    background-color: #0078ff;
    box-shadow: 0 0 8px rgba(0, 120, 255, 0.5);
}

.switch-wrapper input:checked+.switch-slider:before {
    transform: translateX(14px);
    background-color: #00d2ff;
}

/* Map Viewport Container */
.map-viewport {
    flex: 1;
    height: 100%;
    position: relative;
    background: #090d16;
}

#map {
    height: 100%;
    width: 100%;
}

/* Velo que tapa el mapa hasta contestar "Restaurar sesión anterior" (ver
   sig.js: la muestra de forma síncrona en la carga inicial si hay algo para
   restaurar, y window.sigHideMapLoadingGate() la retira una vez respondido el
   diálogo). z-index por encima de los paneles flotantes del mapa (1000-1050) pero
   muy por debajo de SweetAlert2 (.swal2-container, forzado a 999999 más abajo en
   este archivo) para que el diálogo se pueda seguir contestando con normalidad. */
.map-loading-gate {
    position: absolute;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #090d16;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.map-loading-gate.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}

.map-loading-gate-content {
    text-align: center;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 500;
}

.map-loading-gate-icon {
    font-size: 42px;
    margin-bottom: 12px;
    animation: mapLoadingGatePulse 1.4s ease-in-out infinite;
}

@keyframes mapLoadingGatePulse {
    0%, 100% { opacity: 0.5; transform: scale(0.94); }
    50% { opacity: 1; transform: scale(1.04); }
}

body.light-theme .map-loading-gate {
    background: #f8fafc;
}

body.light-theme .map-loading-gate-content {
    color: #334155;
}

/* Dynamic Legend styling */
.legend-container {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.legend-empty {
    font-size: 12px;
    color: #64748b;
    font-style: italic;
    text-align: center;
    padding: 8px 0;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    color: #cbd5e1;
}

.legend-item:last-child {
    margin-bottom: 0;
}

.legend-color {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    margin-right: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
}

/* Popups and Tooltips override */
.leaflet-popup-content-wrapper {
    background: rgba(15, 23, 42, 0.95) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(0, 120, 255, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px !important;
    padding: 2px;
    resize: horizontal !important;
    overflow: auto !important;
    min-width: 280px !important;
    max-width: 650px !important;
}

.leaflet-popup-content {
    margin: 12px 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    width: auto !important;
    max-width: 100% !important;
}

.leaflet-popup-tip {
    background: rgba(15, 23, 42, 0.95) !important;
    border-bottom: 1px solid rgba(0, 120, 255, 0.3) !important;
    border-right: 1px solid rgba(0, 120, 255, 0.3) !important;
}

.leaflet-popup-close-button {
    color: #94a3b8 !important;
    padding: 6px 8px 0 0 !important;
}

.leaflet-popup-close-button:hover {
    color: #f1f5f9 !important;
}

/* Styled popup content table */
.popup-sig {
    width: 240px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}

.popup-sig h4 {
    font-size: 13px;
    font-weight: 700;
    color: #00d2ff;
    margin: 0 0 8px 0;
    letter-spacing: 0.02em;
}

/* Nombre de la capa a la que pertenece el objeto, ANTES del título "Atributos del
   Objeto" y con su propia línea separadora (pedido explícito) — ver
   buildDynamicPopup() en sig.js. El <h4> ya no lleva separador propio (se lo dejó
   a este renglón, que ahora va primero), para que siga quedando UN solo divisor
   entre "capa" y "título", no dos. */
.popup-layer-name {
    font-size: 11px;
    font-weight: 700;
    color: #fbbf24;
    margin: 0 0 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 6px;
}

.popup-sig {
    width: 100% !important;
    box-sizing: border-box !important;
}

.popup-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}

.popup-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.popup-table tr:last-child {
    border-bottom: none;
}

.popup-table td {
    padding: 4px 0;
    vertical-align: top;
}

.popup-table td.key {
    font-weight: 600;
    color: #94a3b8;
    width: 30%;
    min-width: 85px;
    max-width: 150px;
    text-transform: capitalize;
    word-break: break-word;
}

.popup-table td.val {
    color: #f1f5f9;
    width: 70%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Tooltips */
.leaflet-tooltip {
    background: rgba(15, 23, 42, 0.95) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-family: 'Inter', sans-serif !important;
    padding: 6px 10px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-tooltip.tooltip-distritos {
    border-color: rgba(0, 120, 255, 0.4) !important;
}

.leaflet-tooltip.tooltip-otros {
    border-color: rgba(148, 163, 184, 0.3) !important;
}

/* Tooltip personalizado para los title="" nativos de toda la interfaz (menús,
   botones, íconos, badges, celdas) — antes usaban el tooltip por defecto del
   navegador, sin estilo y sin relación visual con el resto de la app. Ver
   initCustomTooltips() en sig.js: intercepta el hover, oculta el title nativo
   (para que no se muestren los dos superpuestos) y muestra este en su lugar. No
   aplica dentro del mapa (.leaflet-container) — ahí Leaflet ya maneja sus propios
   tooltips (.leaflet-tooltip arriba, mismo lenguaje visual reutilizado acá), y
   agregar otro listener de hover ahí podría interferir con el imán de snapping y
   otros handlers de edición GIS ya de por sí delicados. */
.sig-tooltip {
    position: fixed;
    z-index: 100000;
    background: rgba(15, 23, 42, 0.97);
    color: #e2e8f0;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 6px;
    font-size: 11.5px;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
    padding: 6px 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    white-space: pre-line;
    max-width: 300px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.sig-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

body.light-theme .sig-tooltip {
    background: rgba(255, 255, 255, 0.98);
    color: #1e293b;
    border-color: rgba(2, 132, 199, 0.35);
    box-shadow: 0 6px 18px rgba(30, 41, 59, 0.18);
}

/* Footer styling */
.sig-footer {
    background: #0f172a;
    color: #64748b;
    text-align: center;
    padding: 10px;
    font-size: 11px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    height: 35px;
    line-height: 15px;
    z-index: 1000;
}

/* Marker Cluster Customization Styling */
.marker-cluster-small {
    background-color: rgba(0, 120, 255, 0.4) !important;
}

.marker-cluster-small div {
    background-color: rgba(0, 120, 255, 0.8) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.marker-cluster-medium {
    background-color: rgba(0, 210, 255, 0.4) !important;
}

.marker-cluster-medium div {
    background-color: rgba(0, 210, 255, 0.8) !important;
    color: #0b0f19 !important;
    font-weight: 600 !important;
}

.marker-cluster-large {
    background-color: rgba(236, 72, 153, 0.4) !important;
}

.marker-cluster-large div {
    background-color: rgba(236, 72, 153, 0.8) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Base Map styling */
.base-map-wrapper {
    position: relative;
    margin-bottom: 10px;
}

.base-map-select {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    height: 38px !important;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.base-map-select:focus {
    border-color: rgba(0, 120, 255, 0.5) !important;
    background: rgba(30, 41, 59, 0.8) !important;
}

.wms-sublayers-wrapper {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 10px;
    margin-top: 8px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wms-sublayers-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 6px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wms-select-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.wms-sublayer-select {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    height: 34px !important;
    width: 100%;
    cursor: pointer;
}

.wms-sublayer-select:focus {
    border-color: rgba(0, 210, 255, 0.4) !important;
}

.wms-loader {
    position: absolute;
    right: 30px;
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-top-color: #00d2ff;
    animation: spin 0.8s linear infinite;
}

/* Layer item flex layouts for opacity control */
.layer-item {
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.layer-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.layer-item-controls {
    display: none;
    /* Controlled by js */
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    animation: slideDown 0.2s ease;
    width: 100%;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
    }

    to {
        opacity: 1;
        max-height: 40px;
    }
}

.opacity-label {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 44px;
    user-select: none;
}

.opacity-slider {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(71, 85, 105, 0.4) !important;
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00d2ff;
    box-shadow: 0 0 6px rgba(0, 210, 255, 0.6);
    transition: transform 0.1s ease;
}

.opacity-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

/* Floating Loading Badge on Map */
.map-loading-badge {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 210, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 15px rgba(0, 210, 255, 0.25);
    color: #f1f5f9;
    padding: 9px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    animation: fadeInDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.map-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-top-color: #00d2ff;
    border-right-color: #00d2ff;
    animation: spin 0.7s linear infinite;
}

.loading-label-text {
    font-size: 11px;
    color: #00d2ff;
    font-weight: 600;
    margin-left: 2px;
    letter-spacing: 0.02em;
}

/* Floating Active Layers Panel (Top Right) */
.active-layers-panel {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1050;
    width: 380px;
    min-width: 260px;
    max-width: calc(100vw - 40px);
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.active-layers-panel.is-dragging {
    transition: none !important;
}

/* Tirador de redimensionado (esquina inferior derecha) — mismo criterio de arrastre
   (mousedown/mousemove/mouseup + soporte táctil) que usaba el redimensionado del
   panel lateral (retirado en la Fase 3 del rediseño de navegación), ver
   initActiveLayersPanel() en sig.js. Ajusta el ancho del panel y el alto máximo de
   .active-layers-body simultáneamente. */
.active-layers-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 5;
    background: linear-gradient(135deg,
        transparent 0%, transparent 40%,
        rgba(148, 163, 184, 0.6) 40%, rgba(148, 163, 184, 0.6) 46%,
        transparent 46%, transparent 60%,
        rgba(148, 163, 184, 0.6) 60%, rgba(148, 163, 184, 0.6) 66%,
        transparent 66%, transparent 80%,
        rgba(148, 163, 184, 0.6) 80%, rgba(148, 163, 184, 0.6) 86%,
        transparent 86%);
    border-bottom-right-radius: 7px;
    transition: background 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.active-layers-resize-handle:hover,
.active-layers-panel.is-resizing-panel .active-layers-resize-handle {
    background: linear-gradient(135deg,
        transparent 0%, transparent 40%,
        rgba(56, 189, 248, 0.9) 40%, rgba(56, 189, 248, 0.9) 46%,
        transparent 46%, transparent 60%,
        rgba(56, 189, 248, 0.9) 60%, rgba(56, 189, 248, 0.9) 66%,
        transparent 66%, transparent 80%,
        rgba(56, 189, 248, 0.9) 80%, rgba(56, 189, 248, 0.9) 86%,
        transparent 86%);
}

.active-layers-panel.is-resizing-panel .active-layers-body {
    transition: none !important;
}

.active-layers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: rgba(30, 41, 59, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
    cursor: grab;
    touch-action: none;
}

.active-layers-header:active {
    cursor: grabbing;
}

.active-layers-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #f8fafc;
}

.active-layers-icon {
    font-size: 13px;
}

.active-layers-badge {
    background: #0284c7;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}

.btn-active-layers-toggle {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    transition: color 0.2s ease;
}

.btn-active-layers-toggle:hover {
    color: #38bdf8;
}

.active-layers-body {
    max-height: 320px;
    overflow-y: auto;
    transition: max-height 0.3s ease;
}

.active-layers-body.collapsed {
    max-height: 0 !important;
    overflow: hidden !important;
}

.active-layers-list {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.active-layers-empty {
    padding: 12px;
    font-size: 11px;
    color: #64748b;
    text-align: center;
    font-style: italic;
}

.active-layer-card {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    position: relative;
}

.active-layer-card:hover {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(56, 189, 248, 0.35);
}

.active-layer-drag-handle {
    cursor: grab;
    color: #64748b;
    font-size: 13px;
    line-height: 1;
    padding: 2px 3px;
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.active-layer-drag-handle:hover {
    color: #38bdf8;
}

.active-layer-card.is-dragging {
    opacity: 0.35;
    border: 1.5px dashed #38bdf8 !important;
    background: rgba(14, 165, 233, 0.12) !important;
}

.active-layer-card.drag-over {
    border-top: 2px solid #38bdf8 !important;
    background: rgba(56, 189, 248, 0.2) !important;
}

.active-layer-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.active-layer-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.active-layer-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.active-layer-name {
    font-size: 11px;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.active-layer-schema {
    font-size: 9px;
    color: #38bdf8;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.active-layer-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.btn-active-layer-action {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    /* El tamaño del ícono (font-size) se mantiene grande a propósito para que el
       emoji siga siendo bien visible; solo el "chasis" del botón (width/height) se
       redujo respecto de la versión anterior (30x30) para que la fila de acciones
       ocupe menos espacio en la tarjeta. */
    font-size: 15px;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-active-layer-action:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #ef4444;
}

.btn-active-layer-action.action-zoom:hover {
    background: rgba(14, 165, 233, 0.25);
    border-color: #38bdf8;
    color: #38bdf8;
}

/* Botón "✏️ Editar" (habilita edición de esta capa) — mismo criterio de color que
   su equivalente en el árbol lateral (.btn-row-edit-icon), ver
   updateSidebarEditingIndicators() en sig.js. */
.btn-active-layer-action.action-edit:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #fbbf24;
}

.btn-active-layer-action.action-edit.is-active-editing {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #f87171 !important;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.65) !important;
}

.btn-active-layer-action.action-edit.is-disabled-by-config {
    opacity: 0.35;
    filter: grayscale(70%);
    cursor: not-allowed;
}

.btn-active-layer-action.action-edit.is-disabled-by-config:hover {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

/* Ícono ⚙️ "Controles rápidos" (opacidad/leyendas/límites) — abre el mini-panel
   colgante .active-layer-mini-controls debajo de esta tarjeta puntual, ver
   toggleActiveLayerMiniControls() en sig.js. Violeta para diferenciarlo del resto
   de la paleta ya usada acá (celeste=zoom, ámbar=editar, rojo=default/apagar). */
.btn-active-layer-action.action-quick-controls:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: #a78bfa;
    color: #c4b5fd;
}

.btn-active-layer-action.action-quick-controls.is-active {
    background: rgba(139, 92, 246, 0.3) !important;
    border-color: #a78bfa !important;
    color: #ede9fe !important;
}

/* Mini-panel colgante de controles rápidos — mismas clases internas
   (control-row/opacity-row/circuit-label-row/black-border-row/switch-wrapper) que
   ya usa .layer-item-controls del árbol lateral, así que hereda su estilo sin
   necesidad de repetirlo acá; solo se define el contenedor propio. */
.active-layer-mini-controls {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 6px;
    padding: 8px 10px;
    margin: -2px 2px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: slideDown 0.2s ease;
}

.active-layer-mini-controls-empty {
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    padding: 2px 0;
}

body.light-theme .active-layer-mini-controls {
    background: #f8fafc;
    border-color: rgba(139, 92, 246, 0.35);
}

body.glassmorphic-theme .active-layer-mini-controls {
    background: rgba(30, 41, 59, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(139, 92, 246, 0.3);
}

body.glassmorphic-theme.light-theme .active-layer-mini-controls {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(139, 92, 246, 0.35);
}

/* Pulsating Red Circle Highlight for Selected Point Features */
@keyframes pulseRedRing {
    0% {
        r: 16;
        stroke-opacity: 1;
        fill-opacity: 0.6;
    }

    50% {
        r: 26;
        stroke-opacity: 0.85;
        fill-opacity: 0.25;
    }

    100% {
        r: 16;
        stroke-opacity: 1;
        fill-opacity: 0.6;
    }
}

.pulsating-red-circle {
    animation: pulseRedRing 1.4s infinite ease-in-out;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.9));
}

/* Responsive Media Queries (Mobile & Tablet <= 768px) */
@media (max-width: 768px) {
    .header-title-bar {
        padding: 8px 14px;
        min-height: 54px;
    }

    .sig-header h2 {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-badge-img {
        height: 30px;
    }

    .header-logo {
        height: 22px;
        margin-right: 8px;
    }

    /* .main-container ya se dimensiona solo vía flexbox (.app-layout es
       flex-direction:column, .main-container tiene flex:1) — no hace falta
       calcular un alto fijo restando el alto de la cabecera, que además ahora
       varía (título + menú en dos renglones) en vez de ser siempre igual. */

    .map-viewport {
        width: 100%;
        height: 100%;
    }

    .map-loading-badge {
        top: 12px;
        font-size: 11px;
        padding: 7px 14px;
        max-width: 90%;
    }

    .sig-footer {
        height: 30px;
        font-size: 10px;
        padding: 6px;
    }
}

/* Custom High-Visibility Point Pin Markers & Clusters */
.custom-point-pin {
    background: transparent !important;
    border: none !important;
}

.custom-point-pin svg {
    transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease;
    cursor: pointer;
}

.custom-point-pin:hover svg {
    transform: scale(1.28) translateY(-4px);
    filter: drop-shadow(0 6px 14px rgba(0, 210, 255, 0.7)) !important;
}

/* Marker Cluster Styling */
.marker-cluster-small {
    background-color: rgba(0, 120, 255, 0.35) !important;
}

.marker-cluster-small div {
    background-color: rgba(0, 210, 255, 0.9) !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.6);
}

.marker-cluster-medium {
    background-color: rgba(234, 179, 8, 0.35) !important;
}

.marker-cluster-medium div {
    background-color: rgba(234, 179, 8, 0.95) !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.6);
}

.marker-cluster-large {
    background-color: rgba(239, 68, 68, 0.35) !important;
}

.marker-cluster-large div {
    background-color: rgba(239, 68, 68, 0.95) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
}

/* ==========================================================================
   TEMA CLARO (LIGHT THEME OVERRIDES)
   ========================================================================== */
body.light-theme {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

body.light-theme .sig-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

body.light-theme .sig-header h2 {
    background: linear-gradient(to right, #ffffff, #e2e8f0) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.light-theme .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}

body.light-theme .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4) !important;
}

body.light-theme .layer-search {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

body.light-theme .layer-search::placeholder {
    color: #94a3b8 !important;
}

body.light-theme .layer-search:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

body.light-theme details.layer-category {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme summary.category-title {
    color: #1e293b !important;
    background: #f1f5f9 !important;
}

body.light-theme details.layer-category[open] summary.category-title {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Distrito abierto: se posiciona DESPUÉS de la regla genérica de arriba (misma
   especificidad, .nested-layer-category/.nested-category-title en vez de
   .layer-category/.category-title) para ganarle en la cascada — ver el mismo
   criterio para los temas neumórficos, más abajo en este archivo. */
body.light-theme details.nested-layer-category[open] summary.nested-category-title {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border-left: 4px solid #2563eb !important;
}

body.light-theme .schema-active-badge {
    background: #2563eb !important;
    color: #ffffff !important;
}

body.light-theme details.layer-category.has-active-layers {
    border-color: #2563eb !important;
}

body.light-theme .layer-item {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

body.light-theme .layer-item:hover {
    background: #f8fafc !important;
}

body.light-theme .layer-item-label {
    color: #334155 !important;
}

body.light-theme .switch-slider {
    background-color: #cbd5e1 !important;
}

body.light-theme input:checked+.switch-slider {
    background-color: #2563eb !important;
}

/* Layer Search & Controls inside layer items */
body.light-theme .layer-item-controls {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-theme .layer-feat-search-input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

body.light-theme .layer-feat-search-input::placeholder {
    color: #94a3b8 !important;
}

body.light-theme .layer-feat-search-input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

body.light-theme .btn-layer-search {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: 1px solid #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}

body.light-theme .btn-layer-search:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.4) !important;
}

body.light-theme .layer-feat-results {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
}

body.light-theme .layer-feat-item {
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    color: #0f172a !important;
}

body.light-theme .layer-feat-item:hover {
    background: #eff6ff !important;
}

body.light-theme .feat-item-title {
    color: #0f172a !important;
    font-weight: 600 !important;
}

body.light-theme .match-field-label {
    color: #64748b !important;
}

body.light-theme .match-field-val {
    color: #2563eb !important;
    font-weight: 600 !important;
}

body.light-theme .feature-search-empty {
    color: #64748b !important;
    background: #ffffff !important;
}

body.light-theme .opacity-label {
    color: #475569 !important;
    font-weight: 600 !important;
}

/* Base maps & WMS selects */
body.light-theme .base-map-select,
body.light-theme .wms-sublayer-select {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

body.light-theme .wms-sublayers-wrapper {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

body.light-theme .wms-sublayers-label {
    color: #475569 !important;
}

body.light-theme .legend-container {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

body.light-theme .legend-empty {
    color: #94a3b8 !important;
}

body.light-theme .legend-item {
    color: #334155 !important;
}

/* Floating Active Layers Panel */
body.light-theme .active-layers-panel {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .active-layers-header {
    background: #f1f5f9 !important;
    border-bottom-color: #e2e8f0 !important;
}

body.light-theme .active-layers-title {
    color: #0f172a !important;
}

body.light-theme .active-layer-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

body.light-theme .active-layer-name {
    color: #0f172a !important;
}

body.light-theme .active-layer-schema {
    color: #2563eb !important;
}

body.light-theme .btn-active-layer-action {
    background: #ffffff !important;
    border: 1px solid #94a3b8 !important;
    color: #1e293b !important;
    font-weight: 700 !important;
}

body.light-theme .btn-active-layer-action:hover {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

body.light-theme .btn-active-layer-action.action-move-up:hover,
body.light-theme .btn-active-layer-action.action-move-down:hover {
    background: #475569 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

body.light-theme .btn-active-layer-action.action-filter:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}

body.light-theme .btn-active-layer-action.action-table:hover {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

body.light-theme .btn-active-layer-action.action-zoom:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

body.light-theme .btn-layer-table {
    background: #e0f2fe !important;
    border: 1px solid #0284c7 !important;
    color: #0369a1 !important;
    font-weight: 700 !important;
}

body.light-theme .btn-layer-table:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
}

body.light-theme .btn-layer-filter-shortcut {
    background: #fef3c7 !important;
    border: 1px solid #d97706 !important;
    color: #b45309 !important;
    font-weight: 700 !important;
}

body.light-theme .btn-layer-filter-shortcut:hover {
    background: #d97706 !important;
    color: #ffffff !important;
}

body.light-theme .btn-row-edit-icon,
body.light-theme .btn-edit-layer,
body.light-theme .btn-edit-user {
    background: #fef3c7 !important;
    border: 1px solid #d97706 !important;
    color: #92400e !important;
    font-weight: 700 !important;
}

body.light-theme .btn-row-edit-icon:hover,
body.light-theme .btn-edit-layer:hover,
body.light-theme .btn-edit-user:hover {
    background: #d97706 !important;
    color: #ffffff !important;
}

body.light-theme .active-layers-empty {
    color: #64748b !important;
}

/* Leaflet Popups ("Detalle de Información") & Tooltips */
body.light-theme .leaflet-popup-content-wrapper {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .leaflet-popup-tip {
    background: #ffffff !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-right: 1px solid #cbd5e1 !important;
}

body.light-theme .leaflet-popup-close-button {
    color: #64748b !important;
}

body.light-theme .leaflet-popup-close-button:hover {
    color: #0f172a !important;
}

body.light-theme .popup-sig {
    color: #0f172a !important;
}

body.light-theme .popup-sig h4 {
    color: #1e3a8a !important;
}

body.light-theme .popup-layer-name {
    color: #b45309 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-theme .popup-table tr {
    border-bottom: 1px solid #f1f5f9 !important;
}

body.light-theme .popup-table tr:hover {
    background: #f8fafc !important;
}

body.light-theme .popup-table td.key {
    color: #64748b !important;
}

body.light-theme .popup-table td.val {
    color: #0f172a !important;
    font-weight: 500 !important;
}

body.light-theme .leaflet-tooltip {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .sig-footer {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-top-color: #e2e8f0 !important;
}

/* Permanent Circuit Number Map Badges */
.circuit-number-icon-wrapper {
    background: transparent !important;
    border: none !important;
}

.circuit-number-badge {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(15, 23, 42, 0.9);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.7);
    border-radius: 12px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
    user-select: none;
    z-index: 600;
}

body.light-theme .circuit-number-badge {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #1e3a8a !important;
    border: 1px solid #2563eb !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important;
}

.point-legend-badge {
    transform: translate(-50%, -38px) !important;
}

/* Resalte Prominente de Capa Activa en el Panel Lateral */
.layer-item.is-active {
    background: rgba(0, 120, 255, 0.18) !important;
    border: 1px solid rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 2px 10px rgba(0, 120, 255, 0.25) !important;
}

.layer-item.is-active .layer-item-label {
    color: #38bdf8 !important;
    font-weight: 600 !important;
}

body.light-theme .layer-item.is-active {
    background: #dbeafe !important;
    border: 1px solid #0284c7 !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2) !important;
}

body.light-theme .layer-item.is-active .layer-item-label {
    color: #0369a1 !important;
    font-weight: 600 !important;
}

/* Estilos de Selección Múltiple WMS */
.wms-sublayers-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 6px;
}

.wms-sublayer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.wms-sublayer-item:hover {
    background: rgba(56, 189, 248, 0.12);
}

body.light-theme .wms-sublayers-list {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}

body.light-theme .wms-sublayer-item:hover {
    background: #eff6ff !important;
}

/* =================================================================== */
/* NUEVOS COMPONENTES: HEADER ACTIONS, GEOCODER, LEYENDA & MEDICIÓN  */
/* =================================================================== */

/* Header Search / Geocoder */
.header-search-container {
    position: relative;
    margin: 0 15px;
    flex: 1;
    max-width: 320px;
}

.header-search-input-group {
    display: flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 20px;
    padding: 2px 4px 2px 12px;
    transition: all 0.2s ease;
}

.header-search-input-group:focus-within {
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
    background: rgba(15, 23, 42, 0.9);
}

.header-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #f1f5f9;
    font-size: 13px;
    width: 100%;
}

.header-search-input::placeholder {
    color: #94a3b8;
}

.header-search-btn {
    background: transparent;
    border: none;
    color: #38bdf8;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.header-search-btn:hover {
    transform: scale(1.15);
}

.header-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    max-height: 250px;
    overflow-y: auto;
    z-index: 2000;
}

.search-result-item {
    padding: 8px 12px;
    font-size: 12px;
    color: #cbd5e1;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
}

/* Header GIS Action Buttons */
/* Renglón 2 de la cabecera: barra de menú horizontal a todo el ancho (pedido
   explícito del usuario) con look de menú de escritorio tradicional (tipo
   Archivo/Edición/Ver) — franja fina y compacta, ítems empaquetados a la
   izquierda con resaltado rectangular al pasar el mouse (no píldoras/chips
   flotantes ni subrayados). En pantallas angostas colapsa a un panel
   desplegable vertical activado por el botón ☰ — ver
   #btnMobileMenuToggle/.mobile-menu-toggle-btn y @media (max-width: 992px)
   más abajo en este archivo. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.16);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 3px 16px;
    /* Sin overflow-x:auto acá: en CSS, restringir un eje de overflow fuerza al
       otro eje a comportarse como "auto" también, así que un scroll horizontal
       en este contenedor recortaría los desplegables (.header-tools-dropdown-menu)
       que cuelgan hacia abajo de sus botones. A este ancho (barra a pantalla
       completa) los botones entran sin necesidad de scroll; en pantallas
       angostas la barra se reemplaza por el panel colapsable de abajo, así que
       tampoco hace falta ahí. */
}

.header-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #cbd5e1;
    padding: 6px 12px;
    margin: 2px 1px;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
}

/* Destaca "Capas de Info Electoral" como el ítem principal del menú (pedido
   explícito) — mismo ítem, solo con una letra un poco más grande y de mayor
   peso que el resto de la barra. */
.header-action-btn-highlight {
    font-size: 14px;
    font-weight: 700;
}

.header-action-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.header-action-btn.active {
    background: rgba(56, 189, 248, 0.28) !important;
    color: #ffffff !important;
    box-shadow: none;
}

/* Floating Legend Panel */
.legend-panel {
    position: absolute;
    bottom: 24px;
    left: 20px;
    z-index: 1040;
    width: 350px;
    max-width: calc(100vw - 32px);
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(30, 41, 59, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
}

.btn-close-legend {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.btn-close-legend:hover {
    color: #ef4444;
}

.legend-body {
    padding: 12px;
    max-height: 260px;
    overflow-y: auto;
}

.legend-empty {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    font-style: italic;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.legend-item:last-child {
    border-bottom: none;
}

.legend-color-box {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.legend-label {
    font-size: 12px;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Floating Measurement Tool Panel */
.measure-panel {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(245, 158, 11, 0.5);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(245, 158, 11, 0.25);
    border-radius: 30px;
    padding: 6px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: fadeInDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.measure-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #fbbf24;
    font-weight: 500;
}

.measure-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Botones del banner de medición — antes usaban clases genéricas de Bootstrap
   (btn-outline-warning/btn-outline-light), chicas y de bajo contraste contra el
   fondo semitransparente del panel; el de desactivar encima solo mostraba "×"
   sin texto, fácil de pasar por alto (pedido explícito: "agregar un botón para
   desactivarla" — ya existía, funcionalmente, pero no se leía como tal). Estas
   clases propias les dan texto explícito, más tamaño/padding y mejor contraste. */
.btn-measure-action {
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-measure-reset {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
    color: #fde68a;
}

.btn-measure-reset:hover {
    background: rgba(245, 158, 11, 0.32);
    border-color: #fbbf24;
    color: #fff7ed;
}

.btn-measure-deactivate {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #fecaca;
}

.btn-measure-deactivate:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

/* Light Theme overrides for new components */
body.light-theme .header-search-input-group {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

body.light-theme .header-search-input {
    color: #0f172a !important;
}

body.light-theme .header-search-results {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .search-result-item {
    color: #334155 !important;
    border-bottom-color: #f1f5f9 !important;
}

body.light-theme .search-result-item:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

body.light-theme .header-actions {
    background: rgba(0, 0, 0, 0.1) !important;
    border-top-color: rgba(255, 255, 255, 0.25) !important;
    border-bottom-color: rgba(255, 255, 255, 0.25) !important;
}

body.light-theme .header-action-btn {
    background: transparent !important;
    color: #f1f5f9 !important;
}

body.light-theme .header-action-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

body.light-theme .header-action-btn.active {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

body.light-theme .legend-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .legend-header {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-bottom-color: #e2e8f0 !important;
}

body.light-theme .legend-label {
    color: #334155 !important;
}

body.light-theme .measure-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .measure-info {
    color: #b45309 !important;
}

body.light-theme .btn-measure-reset {
    background: #fffbeb !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
}

body.light-theme .btn-measure-reset:hover {
    background: #fef3c7 !important;
    color: #78350f !important;
}

body.light-theme .btn-measure-deactivate {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
}

body.light-theme .btn-measure-deactivate:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* Marcador Destacado Pulsante para Buscador de Ubicación */
.geocoder-pulsing-icon-wrapper {
    background: transparent !important;
    border: none !important;
}

.geocoder-pulsing-icon {
    position: relative;
    width: 30px;
    height: 30px;
}

.geocoder-pulsing-pin {
    width: 24px;
    height: 24px;
    border-radius: 50% 50% 50% 0;
    background: #ef4444;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -18px 0 0 -12px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6);
    border: 2px solid #ffffff;
}

.geocoder-pulsing-pin::after {
    content: '';
    width: 8px;
    height: 8px;
    margin: 6px 0 0 6px;
    background: #ffffff;
    position: absolute;
    border-radius: 50%;
}

.geocoder-pulsing-pulse {
    background: rgba(239, 68, 68, 0.4);
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
    z-index: -1;
    animation: geocoderPulse 1.8s ease-out infinite;
}

@keyframes geocoderPulse {
    0% {
        transform: scale(0.2);
        opacity: 1;
    }

    80% {
        transform: scale(1.6);
        opacity: 0;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Footer Coordinates Tracker */
.sig-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
}

.footer-coordinates {
    font-family: monospace;
    font-size: 12px;
    color: #38bdf8;
    background: rgba(15, 23, 42, 0.6);
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

body.light-theme .footer-coordinates {
    color: #1d4ed8 !important;
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

/* Expandable Attribute Table Panel */
.attribute-table-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 320px;
    z-index: 1060;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 2px solid #38bdf8;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    animation: slideUpTable 0.3s ease;
}

@keyframes slideUpTable {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.attribute-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: rgba(30, 41, 59, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.attribute-table-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #f1f5f9;
}

.attribute-table-badge {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
}

.attribute-table-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.attribute-table-search {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 16px;
    padding: 3px 12px;
    color: #f1f5f9;
    font-size: 12px;
    outline: none;
    width: 180px;
}

.attribute-table-search:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.btn-close-attribute-table {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.btn-close-attribute-table:hover {
    color: #ef4444;
}

.attribute-table-body {
    flex: 1;
    overflow: auto;
}

.attribute-table-content {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #cbd5e1;
}

.attribute-table-content th {
    position: sticky;
    top: 0;
    background: #1e293b;
    color: #38bdf8;
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid rgba(56, 189, 248, 0.3);
    white-space: nowrap;
    z-index: 10;
}

.attribute-table-content td {
    padding: 6px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    white-space: nowrap;
}

.attribute-table-content tr {
    cursor: pointer;
    transition: background 0.15s ease;
}

.attribute-table-content tbody tr:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8;
}

body.light-theme .attribute-table-panel {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top-color: #2563eb !important;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .attribute-table-header {
    background: #f8fafc !important;
    border-bottom-color: #cbd5e1 !important;
}

body.light-theme .attribute-table-title {
    color: #0f172a !important;
}

body.light-theme .attribute-table-search {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

body.light-theme .attribute-table-content th {
    background: #f1f5f9 !important;
    color: #1d4ed8 !important;
    border-bottom-color: #2563eb !important;
}

body.light-theme .attribute-table-content td {
    border-bottom-color: #e2e8f0 !important;
    color: #334155 !important;
}

body.light-theme .attribute-table-content tbody tr:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.btn-layer-table {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    margin-left: 6px;
}

.btn-layer-table:hover {
    background: rgba(56, 189, 248, 0.35);
}

.btn-layer-filter-shortcut {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

.btn-layer-filter-shortcut:hover {
    background: rgba(245, 158, 11, 0.35);
}

/* Print Report Styles (@media print) */
@page {
    size: A4 landscape;
    margin: 8mm;
}

@media print {

    *,
    *:before,
    *:after {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    html,
    body {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #ffffff !important;
        color: #000000 !important;
    }

    .app-layout {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .header-actions,
    .header-search-container,
    .active-layers-panel,
    .measure-panel,
    .attribute-table-panel,
    .leaflet-control-zoom {
        display: none !important;
    }

    .sig-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 45px !important;
        padding: 0 10px !important;
        background: #ffffff !important;
        color: #0f172a !important;
        border-bottom: 2px solid #0f172a !important;
        margin-bottom: 8px !important;
    }

    .sig-header h2 {
        font-size: 18px !important;
        color: #0f172a !important;
        margin: 0 !important;
        font-weight: 700 !important;
    }

    .header-badge-container,
    .header-badge-img {
        height: 38px !important;
        width: auto !important;
        display: block !important;
    }

    .main-container {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 165mm !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }

    .map-viewport {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
    }

    #map {
        display: block !important;
        width: 100% !important;
        height: 165mm !important;
        position: relative !important;
        border: 1px solid #94a3b8 !important;
        border-radius: 4px !important;
    }

    .legend-panel {
        display: block !important;
        position: absolute !important;
        bottom: 12px !important;
        left: 12px !important;
        z-index: 2000 !important;
        background: #ffffff !important;
        border: 1px solid #0f172a !important;
        box-shadow: none !important;
        width: 240px !important;
        max-height: 150px !important;
        border-radius: 4px !important;
    }

    .legend-header {
        background: #f1f5f9 !important;
        color: #0f172a !important;
        border-bottom: 1px solid #cbd5e1 !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .legend-body {
        padding: 6px !important;
        max-height: 110px !important;
    }

    .legend-label {
        color: #0f172a !important;
        font-size: 10px !important;
    }

    .btn-close-legend,
    .btn-layer-table {
        display: none !important;
    }

    .sig-footer {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 25px !important;
        margin-top: 8px !important;
        padding: 0 10px !important;
        background: #ffffff !important;
        color: #475569 !important;
        border-top: 1px solid #cbd5e1 !important;
        font-size: 10px !important;
    }
}

/* Mode select in search bar */
.header-search-mode-select {
    background: transparent;
    border: none;
    outline: none;
    color: #38bdf8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 6px;
    padding-right: 4px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

body.light-theme .header-search-mode-select {
    color: #1d4ed8 !important;
    border-right-color: #cbd5e1 !important;
}

/* Modal de Filtro por Atributos / Query Builder */
.attribute-filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInModal 0.2s ease;
}

@keyframes fadeInModal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.attribute-filter-content {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    width: 520px;
    max-width: 90%;
    overflow: hidden;
}

.attribute-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(30, 41, 59, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.attribute-filter-header h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #f1f5f9;
}

.btn-close-modal {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

.btn-close-modal:hover {
    color: #ef4444;
}

.attribute-filter-body {
    padding: 18px;
    font-size: 13px;
    color: #cbd5e1;
    scrollbar-width: auto; /* Firefox: muestra barra nativa gruesa */
    scrollbar-color: #38bdf8 rgba(15, 23, 42, 0.8); /* Firefox */
}

/* Barra de scroll de alta visibilidad (mismo criterio que .attribute-table-body,
   la Tabla de Atributos) para el cuerpo de las ventanas de administración
   (Documentos, Historial, Usuarios, Capas Habilitadas, Configuración, Servicios
   OGC, SHP/KML, etc.) y las tablas internas que a veces necesitan scroll
   horizontal — antes heredaban la barra global, muy fina y poco visible. */
.attribute-filter-body::-webkit-scrollbar,
.attribute-filter-body .table-responsive::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.attribute-filter-body::-webkit-scrollbar-track,
.attribute-filter-body .table-responsive::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.9);
    border-radius: 6px;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.attribute-filter-body::-webkit-scrollbar-thumb,
.attribute-filter-body .table-responsive::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    border-radius: 6px;
    border: 2px solid rgba(15, 23, 42, 0.9);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.attribute-filter-body::-webkit-scrollbar-thumb:hover,
.attribute-filter-body .table-responsive::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #7dd3fc 100%);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.9);
}

.attribute-filter-body::-webkit-scrollbar-corner,
.attribute-filter-body .table-responsive::-webkit-scrollbar-corner {
    background: rgba(15, 23, 42, 0.9);
}

.attribute-filter-body label {
    font-weight: 500;
    color: #94a3b8;
    margin-bottom: 4px;
}

.attribute-filter-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(30, 41, 59, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.light-theme .attribute-filter-content {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2) !important;
}

body.light-theme .attribute-filter-header {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
}

body.light-theme .attribute-filter-header h5 {
    color: #0f172a !important;
}

body.light-theme .attribute-filter-footer {
    background: #f8fafc !important;
    border-top-color: #e2e8f0 !important;
}

/* Sub-panel agrupador dentro de un modal de gestión (barra de búsqueda/filtros de
   Usuarios, fila de selector de color de capas SHP/KML, etc.). Reemplaza los fondos
   oscuros fijos que quedaban puestos por style="" inline y no se adaptaban a
   Claro/Glassmorfismo. Ver también los overrides de Glassmorfismo más abajo en este
   archivo. */
.filter-bar-panel {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.light-theme .filter-bar-panel {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

/* Editor Visual de Configuración del Sistema (config.php) — ver
   renderAdminConfigVisualForm() en js/sig.js. Los <label>/<select>/.form-control que
   arma dinámicamente ya heredan el theming genérico de .attribute-filter-content de
   más arriba; estas reglas son solo layout + los pocos elementos propios (título de
   grupo, aviso, checkboxes de esquemas) que no son inputs estándar. */
.config-group {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.config-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.config-group-title {
    font-size: 13px;
    font-weight: 700;
    color: #38bdf8;
    margin-bottom: 8px;
}

body.light-theme .config-group-title {
    color: #0284c7 !important;
}

.config-group-warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    margin-bottom: 10px;
}

body.light-theme .config-group-warning {
    color: #92400e !important;
}

.config-field-row {
    margin-bottom: 10px;
}

.config-field-row label {
    font-size: 11px;
    font-weight: 600;
    display: block;
    margin-bottom: 3px;
}

.config-field-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 6px;
}

.config-field-inline label {
    margin-bottom: 0;
}

.config-field-help {
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
}

.config-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.config-label-row label {
    margin-bottom: 0;
}

/* Botón "❓" que abre el tooltip mejorado con el comentario original de config.php
   para esa constante (ver renderAdminConfigHelpButton/showAdminConfigFieldHelp en
   js/sig.js). Solo se renderiza cuando hay texto de ayuda disponible. */
.config-help-btn {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38bdf8;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.config-help-btn:hover {
    background: #38bdf8;
    color: #0f172a;
}

body.light-theme .config-help-btn {
    background: rgba(2, 132, 199, 0.1) !important;
    border-color: rgba(2, 132, 199, 0.35) !important;
    color: #0284c7 !important;
}

body.light-theme .config-help-btn:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
}

.config-schemas-array {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.config-schemas-checkbox-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0;
}

.config-schemas-known-checkbox {
    accent-color: #38bdf8;
}

body.light-theme .config-schemas-known-checkbox {
    accent-color: #0284c7;
}

.config-schemas-extra-row {
    margin-top: 6px;
}

.config-schemas-extra-row label {
    font-size: 11px;
    font-weight: 600;
    display: block;
    margin-bottom: 3px;
}

.config-advanced-details {
    margin-top: 8px;
}

.config-advanced-details summary {
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}

.config-advanced-details summary:hover {
    color: #38bdf8;
}

/* Badges de filtro activo en Leyenda */
.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fbbf24;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 10px;
    margin-left: 6px;
}

.btn-clear-filter-tag {
    background: transparent;
    border: none;
    color: #f59e0b;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0 2px;
}

.btn-clear-filter-tag:hover {
    color: #ef4444;
}

/* Menú Desplegable "Más Herramientas" en Cabecera */
.header-tools-dropdown-container {
    position: relative;
    display: inline-block;
}

/* Los botones que abren un desplegable (identificados por el "▾" en su propio
   texto, ej. "Mapa Base ▾") se ven igual que el resto de los ítems de la barra
   de menú (.header-action-btn) — es el patrón habitual de una barra de menú de
   escritorio, sin un estilo de "chip" aparte para distinguirlos. */

.header-tools-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    padding: 6px;
    z-index: 2200;
    animation: fadeInModal 0.15s ease;
}

/* Los dos primeros ítems de la barra de menú (ahora a todo el ancho, con estos
   botones muy cerca del borde izquierdo) abren su desplegable alineado a la
   IZQUIERDA del botón en vez de a la derecha — con right:0 el panel (hasta
   360px de ancho, ver .header-mega-dropdown) se recortaba contra el borde
   izquierdo del viewport. El resto de los menús, más centrados/a la derecha,
   conservan el anclaje a la derecha por defecto. */
#capasInfoDropdownMenu,
#capasTempDropdownMenu {
    right: auto;
    left: 0;
}

body.light-theme .header-tools-dropdown-menu {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.dropdown-item-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}

body.light-theme .dropdown-item-btn {
    color: #0f172a !important;
}

.dropdown-item-btn:hover {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

body.light-theme .dropdown-item-btn:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}

.dropdown-divider {
    margin: 4px 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Menú de usuario (Fase 1 del rediseño de navegación) — #userAuthDropdownMenu ya
   hereda el look de .header-tools-dropdown-menu (fondo/blur/borde), acá solo se
   acomoda la lista de botones .footer-btn (que en su uso original en el pie de
   página eran píldoras chicas en fila) para que se vean bien apiladas
   verticalmente, conservando el color distintivo por rol de cada una
   (footer-btn-success/purple/teal/etc.). */
#userAuthDropdownMenu {
    min-width: 220px;
}

.user-auth-menu-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-auth-menu-list .footer-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 6px;
}

/* Desplegable "ancho" de la barra superior (Fase 2 del rediseño de navegación) —
   para las secciones que antes eran del panel lateral y tienen listas que pueden
   crecer bastante (Documentos Asociados, subcapas de Servicios WMS): hereda fondo/
   blur/borde de .header-tools-dropdown-menu, solo amplía el ancho y agrega su
   propio scroll interno para no crecer indefinidamente hacia abajo. */
.header-mega-dropdown {
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: 60vh;
    overflow-y: auto;
}

/* Subpanel "Capas de Información" (dentro de "🥞 Capas de Distritos
   Electorales") un poco más ancho que el resto de los mega-desplegables —
   pedido explícito: sus nombres de distrito/categoría son más largos y se
   beneficia del espacio extra. También ocupa el alto disponible completo de la
   ventana en vez del max-height:60vh genérico de .header-mega-dropdown (pedido
   explícito) — 120px es la altura medida en vivo del renglón de título +
   renglón de menú + el margen de 6px antes del propio desplegable
   (top: calc(100% + 6px)), más un pequeño respiro contra el borde inferior. */
#capasInfoDropdownMenu {
    width: 440px;
    max-height: calc(100vh - 120px);
}

/* "Documentos" adopta el mismo criterio de alto disponible completo que
   "Capas de Distritos Electorales" (pedido explícito), sin el ancho extra que
   ese panel tiene por su propio motivo de contenido (nombres de distrito
   largos). */
#docsDropdownMenu {
    max-height: calc(100vh - 120px);
}

body.light-theme .dropdown-divider {
    border-top-color: #e2e8f0 !important;
}

/* Responsividad Adaptativa de Cabecera en Pantallas Reducidas — las etiquetas de
   texto de los botones del menú (.action-text) se mantienen visibles en todo este
   rango (pedido explícito), hasta los 992px donde la barra entera pasa al menú ☰
   colapsable (ver @media (max-width: 992px) más abajo), que ya las muestra por su
   cuenta en su propia regla. Sin achicar acá el padding/gap/tamaño de fuente de
   cada botón (más el buscador), la fila de 8 botones con su texto completo no
   entra a 992px de ancho — desborda ~113px y el navegador recorta los últimos
   ítems ("Servicios WMS", "Ayuda") fuera de la vista, porque .header-actions no
   tiene wrap ni scroll horizontal (ver comentario en su regla base, más arriba:
   un scroll ahí recortaría los desplegables que cuelgan hacia abajo). Estos
   valores se ajustaron probando en vivo hasta que la fila completa entra justo a
   992px de ancho. */
@media (max-width: 1280px) {
    .sig-header h2 {
        font-size: 15px !important;
    }

    .header-search-input {
        width: 130px !important;
    }

    .header-action-btn {
        padding: 4px 6px !important;
        gap: 3px !important;
        font-size: 11.5px !important;
    }
}

@media (max-width: 992px) {
    .header-title-bar {
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .sig-header h2 {
        display: inline-block !important;
        font-size: 14px !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* En pantallas angostas la barra de menú ya no vive en su propio renglón
       fijo: se oculta y se reemplaza por un panel colapsable que cuelga del
       botón ☰ (#btnMobileMenuToggle), como cualquier menú responsive
       tradicional (navbar de Bootstrap, menú hamburguesa de WordPress, etc.) —
       initMobileMenuToggle() en js/sig.js alterna la clase .mobile-menu-open. */
    .mobile-menu-toggle-btn {
        display: flex !important;
    }

    .header-actions {
        display: none;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5) !important;
        max-height: calc(100vh - 54px) !important;
        overflow-y: auto !important;
        z-index: 2100 !important;
        padding: 6px !important;
    }

    .header-actions.mobile-menu-open {
        display: flex !important;
    }

    /* El panel colapsable siempre usa la paleta oscura (arriba) para no tener
       que resolver contraste de texto contra el fondo azul del header en tema
       claro — mismo criterio que ya usan los demás desplegables flotantes de
       la barra (.header-tools-dropdown-menu es oscuro incluso en tema claro,
       salvo su propia excepción explícita). Sin este override,
       "body.light-theme .header-actions" (la franja fina semitransparente del
       renglón 2 en escritorio, definida más arriba en este archivo) le ganaba
       por especificidad (3 clases vs. 2) al fondo oscuro de arriba y dejaba
       el panel casi transparente, mostrando el mapa detrás. */
    body.light-theme .header-actions.mobile-menu-open {
        background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
        border-top-color: transparent !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }

    body.light-theme .header-actions.mobile-menu-open .header-action-btn {
        color: #cbd5e1 !important;
    }

    body.light-theme .header-actions.mobile-menu-open .header-action-btn:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
    }

    body.light-theme .header-actions.mobile-menu-open .header-action-btn.active {
        background: rgba(56, 189, 248, 0.28) !important;
        color: #ffffff !important;
    }

    .header-action-btn {
        width: 100% !important;
        justify-content: flex-start !important;
        padding: 12px 14px !important;
        margin: 1px 0 !important;
        font-size: 13px !important;
    }

    .header-action-btn .action-text {
        display: inline !important;
        font-size: 13px !important;
    }

    /* Va después de las reglas genéricas de arriba para ganarles el empate de
       especificidad (misma cantidad de clases + !important: gana la que
       aparece última en el archivo). */
    .header-action-btn-highlight,
    .header-action-btn-highlight .action-text {
        font-size: 15px !important;
    }

    /* Los desplegables/mega-desplegables que cuelgan de un ítem del menú
       colapsado (ej. tocar "Capas de Info ▾" estando el panel ☰ abierto) pasan
       de position:absolute (que con el botón disparador a 100% de ancho
       terminaba anclando el panel lejos del botón, contra el borde derecho de
       la pantalla) a fluir en línea, justo debajo de su botón, empujando hacia
       abajo al resto de la lista — el patrón de acordeón habitual de un menú
       responsive colapsado. */
    .header-tools-dropdown-container {
        width: 100% !important;
    }

    .header-tools-dropdown-menu {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        margin: 4px 0 8px !important;
        box-shadow: none !important;
        animation: none !important;
    }

    .header-mega-dropdown {
        max-height: 50vh !important;
    }

    .header-search-container {
        flex: 1 !important;
        max-width: none !important;
        margin-right: 0 !important;
    }

    .header-search-input {
        width: 100% !important;
    }
}

/* Garantizar que los avisos y popups de SweetAlert2 estén siempre por encima de cualquier ventana activa o modal */
.swal2-container {
    z-index: 999999 !important;
}

/* Indicadores y Badges Visuales de Filtro de Atributos Activo */
.tree-layer-filter-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.layer-item.layer-item-filtered {
    border-left: 3px solid #f59e0b !important;
    background: rgba(245, 158, 11, 0.12) !important;
}

.active-layer-filter-badge {
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.6);
    color: #fbbf24;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.active-layer-card.active-card-filtered {
    border-left: 3px solid #f59e0b !important;
    background: rgba(245, 158, 11, 0.08) !important;
}

/* Tarjetas de Selección de Formato de Descarga Spatiales (GeoJSON, KML, SHP) */
.download-format-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.download-format-card:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    transform: translateY(-2px);
}

.download-format-card.active {
    background: rgba(56, 189, 248, 0.25);
    border: 2px solid #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.download-format-card .format-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.download-format-card .format-title {
    font-size: 13px;
    font-weight: 700;
    color: #f1f5f9;
}

.download-format-card .format-desc {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 2px;
}

/* ==========================================================================
   MEJORAS GENERALES DE LEGIBILIDAD PARA EL TEMA CLARO (body.light-theme)
   ========================================================================== */

body.light-theme {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* Modales y Cuadros de Diálogo en Tema Claro */
body.light-theme .attribute-filter-content {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important;
    color: #0f172a !important;
}

body.light-theme .attribute-filter-header {
    background: #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-theme .attribute-filter-header h5 {
    color: #0284c7 !important;
    font-weight: 800 !important;
}

body.light-theme .attribute-filter-body label,
body.light-theme .attribute-filter-content label,
body.light-theme .attribute-filter-content .form-group label {
    color: #0f172a !important;
    font-weight: 700 !important;
}

body.light-theme .btn-close-modal {
    color: #475569 !important;
}

body.light-theme .btn-close-modal:hover {
    color: #0f172a !important;
}

body.light-theme .attribute-filter-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Controles de Formulario e Inputs en Tema Claro */
body.light-theme .attribute-filter-content select,
body.light-theme .attribute-filter-content input[type="text"],
body.light-theme .attribute-filter-content input[type="number"],
body.light-theme .attribute-filter-content .form-control {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #94a3b8 !important;
    font-weight: 600 !important;
}

body.light-theme .attribute-filter-content select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

body.light-theme .attribute-filter-content input::placeholder {
    color: #64748b !important;
}

/* Tablas de gestión (Usuarios, Capas Habilitadas, Capas SHP/KML) en Tema Claro. Estas
   tablas usan las clases fijas de Bootstrap table-dark/table-striped/table-hover, que
   no tienen variante clara propia, por lo que quedaban como una "isla" oscura dentro
   de un modal blanco. */
body.light-theme .attribute-filter-content .table {
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}

body.light-theme .attribute-filter-content .table.table-dark,
body.light-theme .attribute-filter-content .table.table-dark td,
body.light-theme .attribute-filter-content .table.table-dark th {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}

body.light-theme .attribute-filter-content .table thead.table-dark,
body.light-theme .attribute-filter-content .table thead.table-dark th {
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
    border-color: #bae6fd !important;
}

body.light-theme .attribute-filter-content .table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8fafc !important;
}

body.light-theme .attribute-filter-content .table.table-hover tbody tr:hover {
    background-color: #e0f2fe !important;
    color: #0f172a !important;
}

/* Fila resaltada mientras se arrastra para reordenar en "Capas Habilitadas" */
.layer-visibility-row-dragging {
    opacity: 0.5;
    outline: 2px dashed #38bdf8;
    outline-offset: -2px;
}

body.light-theme .layer-visibility-row-dragging {
    outline-color: #0284c7 !important;
}

/* Tarjetas de Selección de Formato en Modal de Descargas en Tema Claro */
body.light-theme .download-format-card {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}

body.light-theme .download-format-card:hover {
    background: #e0f2fe !important;
    border-color: #0284c7 !important;
}

body.light-theme .download-format-card.active {
    background: #bae6fd !important;
    border: 2px solid #0284c7 !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.35) !important;
}

body.light-theme .download-format-card .format-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}

body.light-theme .download-format-card .format-desc {
    color: #334155 !important;
    font-weight: 600 !important;
}

/* Contenedor de Alcance y Avisos de Filtro en Tema Claro */
body.light-theme #downloadScopeContainer {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

body.light-theme #downloadScopeContainer label {
    color: #0f172a !important;
}

body.light-theme #downloadFilterNotice {
    background: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
    color: #78350f !important;
    font-weight: 700 !important;
}

body.light-theme #shpModalErrorAlert {
    background: #fee2e2 !important;
    border: 1px solid #f87171 !important;
    color: #991b1b !important;
    font-weight: 700 !important;
}

/* =================================================================== */
/* ESTILOS DE AUTENTICACIÓN POR DISTRITO Y EDITOR GIS GEOMAN            */
/* =================================================================== */
.user-auth-badge,
.user-auth-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.user-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #10b981;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 14px;
    backdrop-filter: blur(8px);
}

.footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.2;
    background: none;
}

.footer-btn-success {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.4);
    color: #4ade80;
}

.footer-btn-success:hover {
    background: rgba(74, 222, 128, 0.35);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
}

.footer-btn-warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #f59e0b;
}

.footer-btn-warning:hover {
    background: rgba(245, 158, 11, 0.35);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.footer-btn-info {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.4);
    color: #38bdf8;
}

.footer-btn-info:hover {
    background: rgba(56, 189, 248, 0.35);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.footer-btn-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.footer-btn-danger:hover {
    background: rgba(239, 68, 68, 0.35);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.footer-btn-purple {
    background: rgba(167, 139, 250, 0.15);
    border-color: rgba(167, 139, 250, 0.4);
    color: #a78bfa;
}

.footer-btn-purple:hover {
    background: rgba(167, 139, 250, 0.35);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.3);
}

.footer-btn-teal {
    background: rgba(45, 212, 191, 0.15);
    border-color: rgba(45, 212, 191, 0.4);
    color: #2dd4bf;
}

.footer-btn-teal:hover {
    background: rgba(45, 212, 191, 0.35);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(45, 212, 191, 0.3);
}

/* Estilos de Botón Iniciar Sesión en Footer */
.footer-login-btn {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.footer-login-btn:hover {
    background: rgba(56, 189, 248, 0.3);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

body.light-theme .footer-login-btn {
    background: #e0f2fe;
    border: 1px solid #0284c7;
    color: #0284c7;
}

/* Ajustes de Tema Claro para Autenticación */
body.light-theme .user-auth-badge {
    background: #d1fae5 !important;
    border: 1px solid #10b981 !important;
    color: #065f46 !important;
}

body.light-theme .btn-login-action {
    background: #e0f2fe !important;
    border: 1px solid #0284c7 !important;
    color: #0284c7 !important;
}

/* Estilos de Botón Limpiar Búsqueda de Ubicación */
.header-search-clear-btn {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
    transition: color 0.15s ease;
}

.header-search-clear-btn:hover {
    color: #ef4444;
}

body.light-theme .header-search-clear-btn {
    color: #64748b;
}

body.light-theme .header-search-clear-btn:hover {
    color: #dc2626;
}

/* =================================================================== */
/* RESALTADO VISUAL Y TAMAÑO DE BOTONES EN LA BARRA DE EDICIÓN GIS */
.leaflet-editable-toolbar-container {
    border-radius: 10px !important;
}

.leaflet-editable-btn {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 22px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.leaflet-pm-toolbar .leaflet-buttons-control-button,
.leaflet-pm-toolbar a.leaflet-buttons-control-button {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
}

.leaflet-pm-toolbar .control-icon,
.leaflet-pm-toolbar .control-fa-icon {
    font-size: 22px !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
}

.leaflet-editable-btn:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
}

.leaflet-editable-btn.is-active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 12px rgba(56, 189, 248, 0.9), 0 0 16px rgba(2, 132, 199, 0.8) !important;
    border-left: 3px solid #38bdf8 !important;
    transform: scale(1.08);
    animation: toolActivePulse 2s infinite ease-in-out;
}

@keyframes toolActivePulse {

    0%,
    100% {
        box-shadow: inset 0 0 12px rgba(56, 189, 248, 0.9), 0 0 14px rgba(2, 132, 199, 0.6);
    }

    50% {
        box-shadow: inset 0 0 20px rgba(56, 189, 248, 1), 0 0 22px rgba(56, 189, 248, 0.9);
    }
}

body.light-theme .leaflet-editable-btn.is-active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 10px rgba(251, 191, 36, 0.9), 0 0 14px rgba(217, 119, 6, 0.6) !important;
    border-left: 3px solid #b45309 !important;
}

/* BANNER FLOTANTE DE MODO EDICIÓN GIS ACTIVO                           */
/* =================================================================== */
.geoman-active-banner {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
    background: rgba(15, 23, 42, 0.96);
    border: 1.5px solid rgba(245, 158, 11, 0.9);
    color: #fbbf24;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.geoman-active-banner.is-dragging {
    cursor: grabbing !important;
    transition: none !important;
}

.banner-drag-handle {
    cursor: grab;
    color: #94a3b8;
    font-size: 15px;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.15s ease;
}

.geoman-active-banner:hover .banner-drag-handle {
    color: #f59e0b;
}

.banner-pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 10px #f59e0b;
    animation: pulseGlow 1.2s infinite ease-in-out;
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.3);
    }
}

/* Botones de la ventana flotante "MODO EDICIÓN" — antes eran píldoras translúcidas
   con texto pastel (#6ee7b7 verde clara, #fca5a5 roja clara) sobre un fondo también
   semi-transparente: poco contraste incluso en tema oscuro, y SIN ninguna regla para
   tema claro (mejora de legibilidad pedida por el usuario). Ahora son fondo sólido +
   texto blanco/oscuro con buen contraste en ambos temas, sin depender del fondo del
   banner que las contiene. */
.btn-save-vertex-changes {
    background: #10b981;
    border: 1px solid #047857;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.btn-save-vertex-changes:hover {
    background: #059669;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.75);
}

/* Botón "⚡ Fusionar Polígonos" — antes reutilizaba .btn-save-vertex-changes con un
   style="background:#f59e0b" inline que SOLO pisaba el fondo, dejando el texto verde
   claro de esa clase sobre naranja sólido (combinación de bajo contraste y colores
   que no combinan). Ahora tiene su propia clase con texto oscuro, que es lo que mejor
   contrasta sobre un ámbar/naranja claro. */
.btn-merge-polygons {
    background: #f59e0b;
    border: 1px solid #b45309;
    color: #451a03;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.btn-merge-polygons:hover {
    background: #d97706;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.75);
}

.btn-cancel-geoman-mode {
    background: #ef4444;
    border: 1px solid #b91c1c;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-geoman-mode:hover {
    background: #dc2626;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

/* Botón "?" de ayuda contextual — abre un swal explicando cómo usar la herramienta
   activa (ver window.showEditModeHelp() en sig.js). Círculo chico y en un color
   "info" (azul) para distinguirse claramente de las acciones (guardar/fusionar/
   cancelar) que sí modifican datos. */
.btn-help-geoman-mode {
    background: #0ea5e9;
    border: 1px solid #0369a1;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
}

.btn-help-geoman-mode:hover {
    background: #0284c7;
    box-shadow: 0 0 14px rgba(14, 165, 233, 0.75);
}

.banner-tool-pill {
    background: rgba(56, 189, 248, 0.22);
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, 0.55);
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.banner-layer-pill {
    background: rgba(251, 191, 36, 0.25);
    color: #fef08a;
    border: 1px solid rgba(251, 191, 36, 0.5);
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

body.light-theme .geoman-active-banner {
    background: rgba(255, 251, 235, 0.96) !important;
    border: 1.5px solid #f59e0b !important;
    color: #92400e !important;
    box-shadow: 0 8px 24px rgba(180, 83, 9, 0.25) !important;
}

body.light-theme .geoman-active-banner .banner-tool-pill {
    background: rgba(14, 165, 233, 0.18) !important;
    color: #0369a1 !important;
    border-color: rgba(14, 165, 233, 0.5) !important;
}

body.light-theme .geoman-active-banner .banner-layer-pill {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #78350f !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
}

/* Indicador persistente de estado del imán (Snapping) — ver showGeomanActiveBanner()
   en sig.js. Antes no había ninguna señal de que esta función estuviera activa. */
.banner-snap-pill {
    background: rgba(0, 255, 136, 0.18);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.5);
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

body.light-theme .geoman-active-banner .banner-snap-pill {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #065f46 !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

/* ================================================================================
 * MODAL DE PRESENTACIÓN INSTITUCIONAL Y PANTALLA DE BIENVENIDA (SPLASH SCREEN)
 * ================================================================================ */
.welcome-splash-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 99999;
    background: rgba(10, 15, 26, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s ease;
}

.welcome-splash-backdrop.fade-out {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

.welcome-splash-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(241, 245, 249, 0.8);
    border: 1px solid #cbd5e1;
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.welcome-splash-close:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    transform: scale(1.1);
}

.welcome-splash-content {
    text-align: center;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.65), 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 56px 64px;
    border-radius: 24px;
    max-width: 680px;
    width: 90%;
    animation: splashZoomIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

@keyframes splashZoomIn {
    0% {
        transform: scale(0.82);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.welcome-splash-logo {
    max-width: 420px;
    width: 100%;
    height: auto;
    margin-bottom: 24px;
    filter: drop-shadow(0 10px 22px rgba(15, 23, 42, 0.15));
    transition: transform 0.3s ease;
}

.welcome-splash-logo:hover {
    transform: scale(1.03);
}

.welcome-splash-title {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.welcome-splash-subtitle {
    font-size: 13.5px;
    font-weight: 700;
    color: #0284c7;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.welcome-splash-badge-container {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcome-splash-badge-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.welcome-splash-badge-img:hover {
    transform: scale(1.1) rotate(4deg);
}

.welcome-splash-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    color: #475569;
    font-weight: 600;
    background: #f1f5f9;
    padding: 10px 24px;
    border-radius: 24px;
    border: 1px solid #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.splash-spinner {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(2, 132, 199, 0.2);
    border-top-color: #0284c7;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* =================================================================== */
/* RESALTE VISUAL DEL PRIMER PUNTO PARA CIERRE DE POLÍGONOS GEOMAN    */
/* =================================================================== */
path.geoman-first-vertex-highlight,
circle.geoman-first-vertex-highlight,
.leaflet-marker-icon.geoman-first-vertex-highlight {
    fill: #22c55e !important;
    fill-opacity: 1 !important;
    stroke: #ffffff !important;
    stroke-width: 3px !important;
    background-color: #22c55e !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.5), 0 0 20px rgba(34, 197, 94, 0.9) !important;
    animation: firstVertexPulse 1.2s infinite ease-in-out !important;
    z-index: 10000 !important;
    transition: transform 0.2s ease !important;
}

path.geoman-first-vertex-highlight:hover,
circle.geoman-first-vertex-highlight:hover,
.leaflet-marker-icon.geoman-first-vertex-highlight:hover {
    /* Sin transform (ver corrección del "círculo rojo danzante" más arriba, mismo
       motivo): Leaflet posiciona estos elementos por su cuenta (translate3d para el
       div, atributos de geometría para el path/circle SVG), y un transform de hoja
       de estilos los desplaza visiblemente al chocar con eso. */
    fill: #16a34a !important;
    stroke-width: 4px !important;
    box-shadow: 0 0 0 9px rgba(22, 163, 74, 0.7), 0 0 25px rgba(22, 163, 74, 1) !important;
}

@keyframes firstVertexPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.4), 0 0 12px rgba(74, 222, 128, 0.8);
    }

    50% {
        box-shadow: 0 0 0 9px rgba(74, 222, 128, 0.7), 0 0 22px rgba(74, 222, 128, 1);
    }
}

.geoman-first-vertex-tooltip {
    background: #0f172a !important;
    border: 1px solid #4ade80 !important;
    color: #4ade80 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.geoman-first-vertex-tooltip::before {
    border-top-color: #4ade80 !important;
}

/* =================================================================== */
/* ESTILOS PARA BARRA DE SESIÓN Y BOTÓN ALTERNADOR DE MODO EDICIÓN   */
/* =================================================================== */
.user-auth-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.user-info-pill {
    background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.footer-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ffffff;
    line-height: 1.4;
}

.footer-btn-secondary {
    background: #64748b;
    color: #ffffff;
}

.footer-btn-secondary:hover {
    background: #475569;
}

.footer-btn-success {
    background: #10b981;
    color: #ffffff;
}

.footer-btn-success:hover {
    background: #059669;
}

.footer-btn-warning {
    background: #f59e0b;
    color: #0f172a;
}

.footer-btn-info {
    background: #0284c7;
    color: #ffffff;
}

.footer-btn-danger {
    background: #ef4444;
    color: #ffffff;
}

.footer-btn-danger:hover {
    background: #dc2626;
}

.footer-btn-purple {
    background: #8b5cf6;
    color: #ffffff;
}

.footer-btn-purple:hover {
    background: #7c3aed;
}

.footer-btn-teal {
    background: #14b8a6;
    color: #ffffff;
}

.footer-btn-teal:hover {
    background: #0d9488;
}

/* =================================================================== */
/* TARJETA DE INDICACIÓN Y CONTROLES DE CAPA EN EDICIÓN                */
/* (vive dentro del menú "🥞 Capas de Info" desde la Fase 3 del         */
/* rediseño de navegación; antes en el panel lateral, ya retirado)     */
/* =================================================================== */
/* Tarjeta "CAPA EN EDICIÓN": fondo rojo de alerta sólido (en vez del ámbar tenue
   anterior, poco legible) — es la advertencia más visible de que hay ediciones
   geográficas en curso sobre una capa puntual. */
.active-editing-layer-card {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border: 1.5px solid #f87171;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45);
}

.active-editing-layer-card.is-inactive {
    background: rgba(30, 41, 59, 0.35);
    border: 1px dashed rgba(148, 163, 184, 0.35);
    box-shadow: none;
}

.editing-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.editing-card-title-group {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.active-editing-layer-card.is-inactive .editing-card-title-group {
    color: #94a3b8;
    text-shadow: none;
}

.editing-card-layer-name {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
    line-height: 1.3;
}

.active-editing-layer-card.is-inactive .editing-card-layer-name {
    color: #94a3b8;
    font-weight: 400;
    font-style: italic;
}

/* Invertido (fondo blanco / texto rojo) para que se distinga bien contra el nuevo
   fondo rojo sólido de la tarjeta — con el estilo rojo-sobre-rojo tenue anterior
   quedaba prácticamente invisible. */
.btn-disable-editing {
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #b91c1c;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-disable-editing:hover {
    background: #fef2f2;
    color: #991b1b;
}

/* RESALTADO DE ÍTEM DE CAPA EN EDICIÓN DENTRO DEL ÁRBOL LATERAL */
.layer-item.layer-item-is-editing {
    border: 1.5px solid #f59e0b !important;
    background: rgba(245, 158, 11, 0.14) !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.22) !important;
}

.layer-item.layer-item-is-editing .layer-item-label {
    color: #fbbf24 !important;
    font-weight: 700 !important;
}

.badge-editing-active {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    background: rgba(245, 158, 11, 0.22);
    border: 1px solid rgba(245, 158, 11, 0.8);
    color: #fbbf24;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.35);
}

/* Indicador de que el ID de objeto en la columna "Objeto" del Historial de
   Ediciones tiene un tooltip enriquecido (atributos configurados como "visible en
   el tooltip" para esa tabla) — ver buildHistoryObjectTooltip() en sig.js. */
.history-object-id-tooltip {
    cursor: help;
    border-bottom: 1px dotted #38bdf8;
}

/* Botón "↩️ Revertir" del Historial de Ediciones: antes usaba el outline amarillo
   genérico de Bootstrap (btn-outline-warning), con poco contraste sobre el fondo
   oscuro del modal — fondo sólido en su lugar, para mejorar la legibilidad. */
.btn-revert-gis-edit {
    background: #f59e0b;
    border: 1px solid #fbbf24;
    color: #0f172a;
    font-weight: 700;
}

.btn-revert-gis-edit:hover {
    background: #fbbf24;
    border-color: #fcd34d;
    color: #0f172a;
}

body.light-theme .btn-revert-gis-edit {
    background: #d97706;
    border-color: #b45309;
    color: #ffffff;
}

body.light-theme .btn-revert-gis-edit:hover {
    background: #b45309;
    border-color: #92400e;
    color: #ffffff;
}

/* "Revertir" deshabilitado visualmente cuando el modo de edición general está
   OFF (ver renderGisEditHistoryTable() en sig.js): no se usa el atributo HTML
   disabled para que el title (tooltip) siga funcionando de forma confiable en
   todos los navegadores al pasar el mouse por encima. */
.btn-revert-gis-edit.is-revert-disabled {
    cursor: not-allowed;
    opacity: 0.45;
    filter: grayscale(40%);
}

.btn-revert-gis-edit.is-revert-disabled:hover {
    background: #f59e0b;
    border-color: #fbbf24;
    color: #0f172a;
}

body.light-theme .btn-revert-gis-edit.is-revert-disabled:hover {
    background: #d97706;
    border-color: #b45309;
    color: #ffffff;
}

.btn-toggle-layer-edit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-toggle-layer-edit.is-editing {
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid #f59e0b;
    color: #fbbf24;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
}

.btn-toggle-layer-edit.is-editing:hover {
    background: rgba(245, 158, 11, 0.4);
    color: #ffffff;
}

.btn-toggle-layer-edit.not-editing {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

.btn-toggle-layer-edit.not-editing:hover {
    background: rgba(51, 65, 85, 0.85);
    color: #ffffff;
    border-color: rgba(245, 158, 11, 0.6);
}

/* BOTÓN DE EDICIÓN RÁPIDA EN LA FILA PRINCIPAL DE CADA CAPA */
.btn-row-edit-icon {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1.2;
    margin-right: 4px;
}

.btn-row-edit-icon:hover {
    background: rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
    color: #ffffff;
    transform: scale(1.05);
}

.btn-row-edit-icon.is-active-editing {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #f87171 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.65) !important;
}

body.light-theme .btn-row-edit-icon {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
}

body.light-theme .btn-row-edit-icon.is-active-editing {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #b91c1c !important;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.5) !important;
}

/* Botón "Editar" (fila o panel expandido) deshabilitado visualmente porque
   HABILITAR_EDICION_PUNTOS o TODAS las HABILITAR_EDICION_POLIGONOS_* están en false para el
   tipo de geometría de esta capa. Se conserva visible (no se oculta) con el mismo
   title/tooltip explicando el motivo; el clic queda bloqueado en window.toggleLayerEditingState(). */
.btn-row-edit-icon.is-disabled-by-config,
.btn-toggle-layer-edit.is-disabled-by-config {
    opacity: 0.4;
    filter: grayscale(70%);
    cursor: not-allowed;
}

.btn-row-edit-icon.is-disabled-by-config:hover,
.btn-toggle-layer-edit.is-disabled-by-config:hover {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    transform: none;
    box-shadow: none;
}

body.light-theme .btn-row-edit-icon.is-disabled-by-config:hover,
body.light-theme .btn-toggle-layer-edit.is-disabled-by-config:hover {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
}

/* Adaptación para Tema Claro */
body.light-theme .active-editing-layer-card {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-color: #b91c1c !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35) !important;
}

body.light-theme .active-editing-layer-card.is-inactive {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}

body.light-theme .editing-card-title-group {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.light-theme .active-editing-layer-card.is-inactive .editing-card-title-group {
    color: #64748b !important;
}

/* BORDE Y ENMARCADO UNIFICADO DE PANELES (CAPAS LOCALES, MAPA BASE, SERVICIOS WMS, MARCADORES) */
#shapefileLayersTree,
#associatedDocumentsContainer,
.base-map-wrapper,
.wms-service-wrapper,
.bookmark-wrapper {
    background: rgba(30, 41, 59, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.25s ease !important;
}

#shapefileLayersTree:hover,
#associatedDocumentsContainer:hover,
.base-map-wrapper:hover,
.wms-service-wrapper:hover,
.bookmark-wrapper:hover {
    border-color: rgba(56, 189, 248, 0.35) !important;
}

body.light-theme #shapefileLayersTree,
body.light-theme #associatedDocumentsContainer,
body.light-theme .base-map-wrapper,
body.light-theme .wms-service-wrapper,
body.light-theme .bookmark-wrapper {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Modal de Vista Previa de Documentos (PDFs e Imágenes) */
.doc-preview-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 99999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInModal 0.2s ease;
}

/* =================================================================== */
/* ESTILOS PARA DOCUMENTOS ASOCIADOS POR DISTRITO                      */
/* =================================================================== */
.associated-docs-container {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.assoc-docs-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assoc-district-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(51, 65, 85, 0.7);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.assoc-district-card.is-open {
    border-color: rgba(56, 189, 248, 0.4);
}

.assoc-district-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    background: rgba(30, 41, 59, 0.8);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.assoc-district-header:hover {
    background: rgba(51, 65, 85, 0.9);
}

.assoc-district-arrow {
    font-size: 10px;
    color: #38bdf8;
    margin-right: 6px;
}

.assoc-district-name {
    font-size: 11.5px;
    font-weight: 700;
    color: #f1f5f9;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assoc-doc-badge {
    font-size: 10px;
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.assoc-district-body {
    padding: 6px 8px;
    background: rgba(15, 23, 42, 0.4);
}

.assoc-doc-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(51, 65, 85, 0.5);
    border-radius: 5px;
    margin-bottom: 6px;
}

.assoc-doc-item:last-child {
    margin-bottom: 0;
}

.assoc-doc-meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.assoc-doc-icon {
    font-size: 18px;
}

.assoc-doc-text {
    flex: 1;
    min-width: 0;
}

.assoc-doc-title {
    font-size: 11px;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assoc-doc-subtext {
    font-size: 10px;
    color: #94a3b8;
}

.assoc-doc-btn-group {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.assoc-btn {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.assoc-btn-view {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
}

.assoc-btn-view:hover {
    background: rgba(56, 189, 248, 0.4);
    color: #ffffff;
}

.assoc-btn-download {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.assoc-btn-download:hover {
    background: rgba(16, 185, 129, 0.4);
    color: #ffffff;
}

.assoc-btn-delete {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.assoc-btn-delete:hover {
    background: rgba(239, 68, 68, 0.4);
    color: #ffffff;
}

.assoc-btn-upload-item {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
}

.assoc-btn-upload-item:hover {
    background: rgba(56, 189, 248, 0.35);
    color: #ffffff;
}

body.light-theme .assoc-district-card {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

body.light-theme .assoc-district-header {
    background: #f1f5f9 !important;
}

body.light-theme .assoc-district-name {
    color: #1e293b !important;
}

body.light-theme .assoc-doc-item {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

body.light-theme .assoc-doc-title {
    color: #0f172a !important;
}

body.light-theme .active-editing-layer-card.is-inactive .editing-card-layer-name {
    color: #64748b !important;
}

body.light-theme .layer-item.layer-item-is-editing {
    background: #fffbeb !important;
    border: 1.5px solid #d97706 !important;
}

body.light-theme .layer-item.layer-item-is-editing .layer-item-label {
    color: #b45309 !important;
}

body.light-theme .badge-editing-active {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
}

body.light-theme .btn-toggle-layer-edit.not-editing {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

body.light-theme .btn-toggle-layer-edit.is-editing {
    background: #fef3c7 !important;
    border-color: #d97706 !important;
    color: #b45309 !important;
}

/* ========================================================================== */
/* ESTILOS DE RESALTADO DE VÉRTICES E IMÁN (SNAPPING) - LEAFLET.EDITABLE     */
/* ========================================================================== */

/* Inhibición de tooltips y ventanas de atributos (popups) del RESTO de las capas
   visibles mientras CUALQUIER herramienta de edición GIS está activa (dibujar,
   editar vértices, arrastrar, eliminar, dividir o unir) — no solo al editar
   vértices de un objeto puntual como antes — para que no interfieran/tapen la
   edición en curso. Ver refreshEditingToolsBodyClass() en sig.js. Excluye el
   mini-menú contextual del vértice, que sigue siendo necesario mientras se edita. */
body.is-gis-editing-active .leaflet-tooltip,
body.is-gis-editing-active .layer-tooltip,
body.is-gis-editing-active .leaflet-popup:not(.vertex-context-menu-popup) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Anillo rojo punteado pulsante alrededor del vértice u objeto destino atraído por el
   imán (Snapping) — ver window.showSnapTargetHighlightRing() en sig.js, que fuerza
   este círculo puntual a un renderer SVG dedicado (el mapa usa preferCanvas:true, así
   que sin eso estas reglas no tendrían ningún efecto visual). Reforzado para que se
   note claramente incluso con el mapa cargado de capas de colores similares:
   trazo más grueso, color más saturado y un resplandor (drop-shadow) alrededor. */
/* CORRECCIÓN DE BUG (2da parte — "círculo rojo danzante"): igual que .marker-snapped
   más abajo, esta animación usaba transform: scale(...) para el efecto de pulso. Acá
   el elemento es un <path>/<circle> SVG (window.snapTargetCircleMarker, ver
   showSnapTargetHighlightRing() en sig.js) posicionado por Leaflet mediante sus
   propios atributos de geometría (no mediante transform) — pero el transform-origin
   POR DEFECTO de un elemento SVG es la esquina (0,0) del <svg> raíz del mapa, NO el
   centro del propio círculo. Como el círculo casi nunca está cerca de ese (0,0) (el
   mapa se panea/zoomea libremente), escalarlo con transform lo desplaza
   visiblemente en cada pulso — confirmado en vivo: oscilaba más de 180px de un lado
   a otro en sincronía con el pulso de 0.6s, exactamente el "círculo rojo danzante"
   reportado. Se logra el mismo efecto de "más intenso" pulsando solo stroke-width /
   stroke-opacity (que no dependen de ningún origen de transformación) y agrandando
   el radio real del círculo (r, vía JS en showSnapTargetHighlightRing) en vez de
   escalarlo por CSS. */
.snap-target-highlight-ring {
    stroke: #ff1744 !important;
    stroke-dasharray: 5, 4 !important;
    stroke-width: 4px !important;
    fill: #ff1744 !important;
    fill-opacity: 0.3 !important;
    filter: drop-shadow(0 0 6px rgba(255, 23, 68, 0.9)) !important;
    animation: targetSnapRingPulse 0.6s infinite alternate !important;
}

@keyframes targetSnapRingPulse {
    0% { stroke-width: 3px; stroke-opacity: 0.75; }
    100% { stroke-width: 6px; stroke-opacity: 1; }
}

/* Mini-menú contextual flotante para vértices */
.vertex-context-menu-popup .leaflet-popup-content-wrapper {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(56, 189, 248, 0.6) !important;
    border-radius: 10px !important;
    padding: 3px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7), 0 0 15px rgba(56, 189, 248, 0.2) !important;
}

.vertex-context-menu-popup .leaflet-popup-content {
    margin: 4px 6px !important;
    line-height: 1 !important;
}

.vertex-context-menu-popup .leaflet-popup-tip {
    background: rgba(15, 23, 42, 0.95) !important;
}

.vertex-context-menu-body {
    display: flex !important;
    gap: 6px !important;
    padding: 2px !important;
}

.btn-vertex-action {
    background: #1e293b;
    color: #f8fafc;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.btn-vertex-action.btn-vertex-move:hover {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

.btn-vertex-action.btn-vertex-delete:hover {
    background: #dc2626;
    border-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* Tiradores de vértices existentes (Polígonos y Líneas) - Amarillo Dorado Destacado (Hitbox estable de 24px) */
.leaflet-vertex-icon {
    background: #facc15 !important;
    border: 3px solid #0f172a !important;
    border-radius: 50% !important;
    box-shadow: 0 0 14px #facc15, 0 0 6px #ffffff, inset 0 0 4px #ffffff !important;
    width: 24px !important;
    height: 24px !important;
    margin-left: -12px !important;
    margin-top: -12px !important;
    box-sizing: border-box !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    cursor: pointer !important;
    z-index: 2000 !important;
}

/* Cambio de resplandor y color en hover SIN modificar el tamaño ni provocar parpadeo */
.leaflet-vertex-icon:hover {
    background: #ef4444 !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 22px #ef4444, 0 0 10px #ffffff !important;
    cursor: pointer !important;
}

/* Tiradores de puntos medios (para CREAR NUEVOS VÉRTICES) - Con símbolo + y Hitbox de 24px */
.leaflet-middle-icon {
    background: #f59e0b !important;
    border: 2.5px solid #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 12px #f59e0b, 0 0 4px #ffffff !important;
    width: 24px !important;
    height: 24px !important;
    margin-left: -12px !important;
    margin-top: -12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    transition: background 0.15s ease, box-shadow 0.15s ease !important;
    cursor: copy !important;
    z-index: 1999 !important;
}

.leaflet-middle-icon::after {
    content: "+" !important;
}

.leaflet-middle-icon:hover {
    background: #10b981 !important;
    box-shadow: 0 0 20px #10b981, 0 0 8px #ffffff !important;
}

/* Resaltado destacado de vértice cuando el imán (Snapping) se activa con un vértice
   cercano.
   CORRECCIÓN DE BUG CRÍTICO: esta regla usaba "transform: scale(...) !important"
   para agrandar el ícono — pero Leaflet posiciona cada marcador con SU PROPIO
   style.transform = translate3d(x,y,0) (inline, puesto por L.DomUtil.setPosition()
   en cada movimiento/arrastre). Una regla de hoja de estilos con transform +
   !important GANA sobre ese translate3d inline y lo REEMPLAZA POR COMPLETO — el
   navegador solo puede aplicar un valor de transform, no combinar ambos — dejando
   al vértice "pegado" cerca del origen del pane del mapa en vez de en su posición
   geográfica real apenas se le agregaba esta clase. Confirmado en vivo: el
   ícono quedaba a más de 500px del mouse real, congelado, durante todo el resto del
   arrastre (exactamente el "círculo rojo saltando y quedando fijo" reportado). Se
   logra el mismo efecto de "más grande y pulsante" agrandando width/height (con
   margin-left/margin-top ajustado a la mitad negativa para seguir centrado en el
   mismo punto) en vez de con transform, que Leaflet no toca. */
.marker-snapped,
.leaflet-vertex-icon.marker-snapped,
.leaflet-middle-icon.marker-snapped {
    background: #00ff88 !important;
    border: 2.5px solid #ffffff !important;
    box-shadow: 0 0 22px #00ff88, 0 0 10px #ffffff, inset 0 0 6px #ffffff !important;
    width: 36px !important;
    height: 36px !important;
    margin-left: -18px !important;
    margin-top: -18px !important;
    animation: snapPulse 0.8s infinite alternate !important;
    z-index: 2050 !important;
}

@keyframes snapPulse {
    0% { width: 32px; height: 32px; margin-left: -16px; margin-top: -16px; box-shadow: 0 0 14px #00ff88, 0 0 6px #ffffff; }
    100% { width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; box-shadow: 0 0 26px #00ff88, 0 0 14px #ffffff; }
}

/* ==========================================================================
   DESPLAZAMIENTO BIDIRECCIONAL (SCROLL VERTICAL Y HORIZONTAL) PARA TABLA DE ATRIBUTOS
   ========================================================================== */
.attribute-table-panel {
    position: absolute !important;
    bottom: 24px !important;
    /* 68px (no 16px) para no quedar por debajo de la barra de herramientas de
       edición (.leaflet-editable-toolbar-container, position:topleft dentro del
       mapa) — su borde derecho real llega a ~56px del borde del mapa (medido en
       vivo). Con solo 16px, este panel se superponía visualmente sobre sus
       botones inferiores (✂️ Dividir / 🧩 Unir / 🗑️ Eliminar) al abrir la tabla de
       atributos de cualquier capa — bug reportado ("efecto extraño sobre el resto
       de los paneles" al usar "Capas Temporales", reproducido con cualquier capa). */
    left: 68px !important;
    right: 16px !important;
    z-index: 1050 !important;
    max-height: 52vh !important;
    background: rgba(15, 23, 42, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
    flex-direction: column !important;
    overflow: hidden !important;
    resize: vertical !important;
}

.attribute-table-panel[style*="display: none"],
#attributeTablePanel[style*="display: none"] {
    display: none !important;
}

.attribute-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(30, 41, 59, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.attribute-table-body {
    flex: 1 !important;
    overflow-x: auto !important; /* Scroll Horizontal */
    overflow-y: auto !important; /* Scroll Vertical */
    max-height: calc(52vh - 48px) !important;
    padding: 0 0 8px 0 !important;
    position: relative !important;
    scrollbar-width: auto !important; /* Firefox: muestra barra nativa gruesa */
    scrollbar-color: #38bdf8 rgba(15, 23, 42, 0.8) !important; /* Firefox */
}

/* Estilos de barras de scroll de alta visibilidad para WebKit (Chrome, Edge, Brave, Safari) */
.attribute-table-body::-webkit-scrollbar {
    width: 12px !important; /* Grosor cómodo de 12px para scroll vertical */
    height: 12px !important; /* Alto cómodo de 12px para scroll horizontal */
}

.attribute-table-body::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.9) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.attribute-table-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    border-radius: 6px !important;
    border: 2px solid rgba(15, 23, 42, 0.9) !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
}

.attribute-table-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #7dd3fc 100%) !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.9) !important;
}

.attribute-table-body::-webkit-scrollbar-corner {
    background: rgba(15, 23, 42, 0.9) !important;
}

.attribute-table-content {
    width: 100% !important;
    min-width: max-content !important; /* Permite expansión horizontal según el ancho de columnas */
    border-collapse: collapse !important;
    white-space: nowrap !important; /* Mantiene celdas sin colapso de texto */
}

.attribute-table-content th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #1e293b !important;
    color: #38bdf8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 8px 14px !important;
    border-bottom: 2px solid rgba(56, 189, 248, 0.5) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.attribute-table-content td {
    padding: 8px 14px !important;
    font-size: 11.5px !important;
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.attribute-table-content tr {
    transition: background 0.15s ease !important;
    cursor: pointer !important;
}

.attribute-table-content tr:hover td {
    background: rgba(14, 165, 233, 0.18) !important;
    color: #ffffff !important;
}

/* Adaptación para Tema Claro */
body.light-theme .attribute-table-panel {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .attribute-table-header {
    background: #f1f5f9 !important;
    border-bottom-color: #cbd5e1 !important;
}

body.light-theme .attribute-table-content th {
    background: #e2e8f0 !important;
    color: #0369a1 !important;
    border-bottom-color: #0284c7 !important;
    border-right-color: #cbd5e1 !important;
}

body.light-theme .attribute-table-content td {
    color: #334155 !important;
    border-bottom-color: #e2e8f0 !important;
    border-right-color: #f1f5f9 !important;
}

body.light-theme .attribute-table-content tr:hover td {
    background: #dbeafe !important;
    color: #1e3a8a !important;
}

/* Scroll Bidireccional para el Modal Formulario de Atributos de Objeto (editFeatureModal) */
#editFeatureFieldsContainer {
    max-height: 52vh !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
}

/* Insignias de Selección para Unión de Polígonos */
.polygon-merge-order-badge {
    z-index: 10000 !important;
    pointer-events: none !important;
    animation: badgePopIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes badgePopIn {
    /* Sin transform (mismo motivo que el "círculo rojo danzante" más arriba):
       .polygon-merge-order-badge es un L.divIcon de un L.marker real, posicionado
       por Leaflet vía su propio translate3d — escalarlo acá lo desplazaría a la
       posición equivocada durante el breve instante de esta animación de entrada. */
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Estilos para la Tabla de Resultados de la Ventana Flotante de Búsqueda */
.search-table-row:hover {
    background: rgba(56, 189, 248, 0.15) !important;
}

body.light-theme .search-table-row:hover {
    background: rgba(2, 132, 199, 0.15) !important;
}

/* Floating Location Search Panel (Top Left sobre el Mapa) */
.location-search-panel {
    position: absolute;
    top: 16px;
    left: 60px;
    z-index: 1050;
    width: 440px;
    max-width: calc(100vw - 80px);
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.location-search-panel.is-dragging {
    transition: none !important;
}

.location-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(30, 41, 59, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
    cursor: grab;
    touch-action: none;
}

.location-search-header:active {
    cursor: grabbing;
}

.location-search-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #38bdf8;
}

.btn-location-search-toggle,
.btn-close-location-search {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.btn-location-search-toggle:hover,
.btn-close-location-search:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.1);
}

.location-search-body {
    padding: 14px;
    transition: all 0.25s ease;
}

.location-search-body.collapsed {
    display: none !important;
}

body.light-theme .location-search-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .location-search-header {
    background: rgba(241, 245, 249, 0.9) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .location-search-title {
    color: #0284c7 !important;
}

body.light-theme .location-search-body label {
    color: #1e293b !important;
}

/* ==========================================================================
   SISTEMA DE DISEÑO GLASSMORFISMO DUAL (DARK & LIGHT FROSTED GLASS THEME)
   Habilitado mediante la constante ESTILO_GLASSMORFISMO en config.php.
   Reemplaza al antiguo sistema "Neumorfismo / Soft UI 3D": misma cobertura de
   elementos y misma paleta de acento (#38bdf8/#0284c7), pero las superficies
   pasan de sólidas con sombra dual embutida ("presionadas") a vidrio esmerilado
   translúcido (backdrop-filter: blur() + fondo semitransparente + borde fino
   que capta luz + una sola sombra suave hacia abajo) — el mismo lenguaje que ya
   usan .header-tools-dropdown-menu/.header-mega-dropdown y los paneles
   flotantes (.legend-panel, .measure-panel) en el tema base, aplicado acá de
   forma consistente a toda la interfaz.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MODO OSCURO GLASSMORFISMO (PREDETERMINADO: body.glassmorphic-theme)
   -------------------------------------------------------------------------- */
body.glassmorphic-theme {
    background-color: #181f2b !important;
    color: #cbd5e1 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Cabecera de Vidrio Oscura */
body.glassmorphic-theme .sig-header {
    background: rgba(24, 31, 43, 0.55) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
    border-radius: 0 0 16px 16px !important;
    margin-bottom: 8px !important;
}

body.glassmorphic-theme .sig-header h2 {
    color: #f1f5f9 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Botones de Cabecera de Vidrio Oscuros */
body.glassmorphic-theme .header-action-btn,
body.glassmorphic-theme .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.glassmorphic-theme .header-action-btn:hover,
body.glassmorphic-theme .theme-toggle-btn:hover {
    background: rgba(56, 189, 248, 0.16) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    color: #38bdf8 !important;
}

body.glassmorphic-theme .header-action-btn:active,
body.glassmorphic-theme .theme-toggle-btn:active {
    background: rgba(56, 189, 248, 0.24) !important;
    border-color: #38bdf8 !important;
}

/* Buscador de la Cabecera (Panel de Vidrio Recesado Oscuro) */
body.glassmorphic-theme .header-search-input-group {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    border-radius: 20px !important;
}

body.glassmorphic-theme .header-search-input {
    color: #f1f5f9 !important;
}

body.glassmorphic-theme .header-search-input::placeholder {
    color: #64748b !important;
}

body.glassmorphic-theme .header-search-btn {
    color: #38bdf8 !important;
}

/* Buscador de Capas Lateral (Panel de Vidrio Recesado Oscuro) */
body.glassmorphic-theme .layer-search {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    color: #f1f5f9 !important;
    border-radius: 12px !important;
}

body.glassmorphic-theme .layer-search::placeholder {
    color: #64748b !important;
}

/* Tarjetas y Acordeones de Categorías (details.layer-category) */
body.glassmorphic-theme details.layer-category {
    background: rgba(30, 41, 59, 0.5) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    margin-bottom: 6px !important;
}

body.glassmorphic-theme summary.category-title {
    background: transparent !important;
    color: #f1f5f9 !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
}

body.glassmorphic-theme details.layer-category[open] summary.category-title {
    background: rgba(56, 189, 248, 0.14) !important;
    color: #38bdf8 !important;
}

/* Distrito abierto (tema glassmorfismo oscuro, el default de la app —
   ESTILO_GLASSMORFISMO en config.php): misma especificidad que la regla genérica
   de arriba, posicionada después para ganarle en la cascada. Además del relleno
   de acento que ya trae el estado [open] genérico, se agrega un borde para que
   se note claramente cuál distrito está seleccionado/abierto, no solo cuál está
   simplemente desplegado. */
body.glassmorphic-theme details.nested-layer-category[open] summary.nested-category-title {
    background: rgba(56, 189, 248, 0.22) !important;
    color: #38bdf8 !important;
    border-left: 4px solid #38bdf8 !important;
}

body.glassmorphic-theme .layer-item {
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    margin: 6px 0 !important;
}

body.glassmorphic-theme .layer-item.is-active {
    background: rgba(56, 189, 248, 0.1) !important;
    box-shadow: none !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
}

body.glassmorphic-theme .layer-item.is-active .layer-item-label {
    color: #38bdf8 !important;
    font-weight: 700 !important;
}

/* Conmutadores de Vidrio (Switches Oscuros) */
/* Mismo criterio de contraste que ya traía el sistema anterior: un track
   totalmente transparente se confunde con el fondo del panel, así que se le da
   un borde y un relleno translúcido propios para que se distinga claramente del
   fondo en ambos estados (apagado/encendido). */
body.glassmorphic-theme .switch-slider {
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
    border-radius: 20px !important;
}

body.glassmorphic-theme input:checked + .switch-slider {
    background-color: rgba(2, 132, 199, 0.65) !important;
    border-color: rgba(56, 189, 248, 0.6) !important;
    box-shadow: none !important;
}

body.glassmorphic-theme .switch-slider:before {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Ventanas Flotantes de Vidrio Oscuras (.active-layers-panel, .location-search-panel, .legend-floating-panel, .tools-dropdown-panel) */
body.glassmorphic-theme .active-layers-panel,
body.glassmorphic-theme .location-search-panel,
body.glassmorphic-theme .legend-floating-panel,
body.glassmorphic-theme .tools-dropdown-panel {
    background: rgba(24, 31, 43, 0.55) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    color: #f1f5f9 !important;
}

body.glassmorphic-theme .active-layers-header,
body.glassmorphic-theme .location-search-header {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    border-radius: 16px 16px 0 0 !important;
}

body.glassmorphic-theme .active-layers-title,
body.glassmorphic-theme .location-search-title {
    color: #38bdf8 !important;
    font-weight: 700 !important;
}

body.glassmorphic-theme .active-layer-card {
    background: rgba(30, 41, 59, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    margin-bottom: 8px !important;
}

body.glassmorphic-theme .btn-active-layer-action,
body.glassmorphic-theme .assoc-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #cbd5e1 !important;
}

body.glassmorphic-theme .btn-active-layer-action:hover,
body.glassmorphic-theme .assoc-btn:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    box-shadow: none !important;
    color: #38bdf8 !important;
}

/* Modales de Vidrio Oscuros (.modal-content) */
body.glassmorphic-theme .modal-content {
    background: rgba(24, 31, 43, 0.72) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    color: #f1f5f9 !important;
}

body.glassmorphic-theme .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.glassmorphic-theme .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Modales de gestión (.attribute-filter-content: Usuarios, Capas Habilitadas, Capas
   SHP/KML y demás) — no usan la clase Bootstrap .modal-content, así que necesitan su
   propio override para adoptar el mismo panel de vidrio elevado. */
body.glassmorphic-theme .attribute-filter-content {
    background: rgba(24, 31, 43, 0.72) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    color: #f1f5f9 !important;
}

body.glassmorphic-theme .attribute-filter-header,
body.glassmorphic-theme .attribute-filter-footer {
    background: rgba(255, 255, 255, 0.03) !important;
}

body.glassmorphic-theme .attribute-filter-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.glassmorphic-theme .attribute-filter-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.glassmorphic-theme .filter-bar-panel {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Tablas de gestión — versión Vidrio Oscura: se aplana el .table-dark de
   Bootstrap para que se integre con el panel translúcido en vez de verse como una
   tabla genérica sólida ajena al resto de la interfaz. */
body.glassmorphic-theme .attribute-filter-content .table.table-dark,
body.glassmorphic-theme .attribute-filter-content .table.table-dark td,
body.glassmorphic-theme .attribute-filter-content .table.table-dark th {
    background-color: transparent !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

body.glassmorphic-theme .attribute-filter-content .table thead.table-dark,
body.glassmorphic-theme .attribute-filter-content .table thead.table-dark th {
    background-color: rgba(16, 21, 29, 0.6) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
}

body.glassmorphic-theme .attribute-filter-content .table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

body.glassmorphic-theme .attribute-filter-content .table.table-hover tbody tr:hover {
    background-color: rgba(56, 189, 248, 0.08) !important;
    color: #f1f5f9 !important;
}

body.glassmorphic-theme .form-control,
body.glassmorphic-theme select {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
}

body.glassmorphic-theme .form-control:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35) !important;
}

/* Pie de Página de Vidrio Oscuro (.sig-footer) */
body.glassmorphic-theme .sig-footer {
    background: rgba(24, 31, 43, 0.5) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    color: #64748b !important;
}


/* --------------------------------------------------------------------------
   2. MODO CLARO GLASSMORFISMO OVERRIDES (body.glassmorphic-theme.light-theme)
   -------------------------------------------------------------------------- */
body.glassmorphic-theme.light-theme {
    background-color: #e2e8f0 !important;
    color: #334155 !important;
}

body.glassmorphic-theme.light-theme .sig-header {
    background: rgba(255, 255, 255, 0.55) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 8px 32px rgba(30, 41, 59, 0.15) !important;
}

body.glassmorphic-theme.light-theme .sig-header h2 {
    color: #1e293b !important;
    text-shadow: 1px 1px 1px #ffffff !important;
}

body.glassmorphic-theme.light-theme .header-action-btn,
body.glassmorphic-theme.light-theme .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #1e293b !important;
    box-shadow: none !important;
}

body.glassmorphic-theme.light-theme .header-action-btn:hover,
body.glassmorphic-theme.light-theme .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(2, 132, 199, 0.4) !important;
    color: #0284c7 !important;
}

body.glassmorphic-theme.light-theme .header-action-btn:active,
body.glassmorphic-theme.light-theme .theme-toggle-btn:active {
    background: rgba(2, 132, 199, 0.18) !important;
    border-color: #0284c7 !important;
}

body.glassmorphic-theme.light-theme .header-search-input-group {
    background: rgba(226, 232, 240, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: inset 0 2px 6px rgba(148, 163, 184, 0.35) !important;
}

body.glassmorphic-theme.light-theme .header-search-input {
    color: #1e293b !important;
}

body.glassmorphic-theme.light-theme .layer-search {
    background: rgba(226, 232, 240, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: inset 0 2px 6px rgba(148, 163, 184, 0.35) !important;
    color: #1e293b !important;
}

body.glassmorphic-theme.light-theme details.layer-category {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 6px 20px rgba(30, 41, 59, 0.1) !important;
}

body.glassmorphic-theme.light-theme summary.category-title {
    color: #1e293b !important;
}

body.glassmorphic-theme.light-theme details.layer-category[open] summary.category-title {
    background: rgba(2, 132, 199, 0.12) !important;
    color: #0284c7 !important;
}

/* Distrito abierto (tema glassmorfismo claro) — ver el mismo criterio para el
   oscuro, más arriba en este archivo. */
body.glassmorphic-theme.light-theme details.nested-layer-category[open] summary.nested-category-title {
    background: rgba(2, 132, 199, 0.15) !important;
    color: #0284c7 !important;
    border-left: 4px solid #0284c7 !important;
}

body.glassmorphic-theme.light-theme .layer-item {
    background: rgba(255, 255, 255, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.08) !important;
}

body.glassmorphic-theme.light-theme .layer-item.is-active {
    background: rgba(2, 132, 199, 0.1) !important;
    box-shadow: none !important;
    border-color: rgba(2, 132, 199, 0.4) !important;
}

body.glassmorphic-theme.light-theme .layer-item.is-active .layer-item-label {
    color: #0284c7 !important;
}

body.glassmorphic-theme.light-theme .switch-slider {
    background-color: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(148, 163, 184, 0.5) !important;
    box-shadow: inset 0 2px 4px rgba(148, 163, 184, 0.3) !important;
}

body.glassmorphic-theme.light-theme input:checked + .switch-slider {
    background-color: rgba(2, 132, 199, 0.75) !important;
    border-color: rgba(2, 132, 199, 0.5) !important;
}

body.glassmorphic-theme.light-theme .active-layers-panel,
body.glassmorphic-theme.light-theme .location-search-panel,
body.glassmorphic-theme.light-theme .legend-floating-panel,
body.glassmorphic-theme.light-theme .tools-dropdown-panel {
    background: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 10px 40px rgba(30, 41, 59, 0.18) !important;
    color: #1e293b !important;
}

body.glassmorphic-theme.light-theme .active-layers-header,
body.glassmorphic-theme.light-theme .location-search-header {
    background: rgba(255, 255, 255, 0.3) !important;
    border-bottom-color: rgba(184, 194, 208, 0.5) !important;
    box-shadow: none !important;
}

body.glassmorphic-theme.light-theme .active-layers-title,
body.glassmorphic-theme.light-theme .location-search-title {
    color: #0284c7 !important;
}

body.glassmorphic-theme.light-theme .active-layer-card {
    background: rgba(255, 255, 255, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 4px 14px rgba(30, 41, 59, 0.1) !important;
}

body.glassmorphic-theme.light-theme .btn-active-layer-action,
body.glassmorphic-theme.light-theme .assoc-btn {
    background: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: none !important;
    color: #334155 !important;
}

body.glassmorphic-theme.light-theme .btn-active-layer-action:hover,
body.glassmorphic-theme.light-theme .assoc-btn:hover {
    background: rgba(2, 132, 199, 0.14) !important;
    border-color: rgba(2, 132, 199, 0.4) !important;
    box-shadow: none !important;
    color: #0284c7 !important;
}

/* El combo glassmorphic-theme + light-theme (default con "modo claro" activado)
   tiene más especificidad que .btn-active-layer-action.action-edit.* (selector
   "body.X.Y" suma un elemento extra a la cuenta de clases empatada) y pisaba en
   silencio los colores de alerta roja de arriba (~línea 1722). Re-afirmar aquí,
   después de la regla que compite, igual que se hace en los demás gotchas de
   tema de este archivo. */
body.glassmorphic-theme.light-theme .btn-active-layer-action.action-edit:hover {
    background: rgba(245, 158, 11, 0.25) !important;
    box-shadow: none !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
}

body.glassmorphic-theme.light-theme .btn-active-layer-action.action-edit.is-active-editing {
    background: #dc2626 !important;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.65) !important;
    border-color: #f87171 !important;
    color: #ffffff !important;
}

body.glassmorphic-theme.light-theme .btn-active-layer-action.action-edit.is-disabled-by-config {
    opacity: 0.35;
    filter: grayscale(70%);
}

body.glassmorphic-theme.light-theme .btn-active-layer-action.action-edit.is-disabled-by-config:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #334155 !important;
}

body.glassmorphic-theme.light-theme .modal-content {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 20px 60px rgba(30, 41, 59, 0.2) !important;
    color: #1e293b !important;
}

body.glassmorphic-theme.light-theme .attribute-filter-content {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 20px 60px rgba(30, 41, 59, 0.2) !important;
    color: #1e293b !important;
}

body.glassmorphic-theme.light-theme .attribute-filter-header,
body.glassmorphic-theme.light-theme .attribute-filter-footer {
    background: rgba(255, 255, 255, 0.3) !important;
}

body.glassmorphic-theme.light-theme .filter-bar-panel {
    background: rgba(226, 232, 240, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: inset 0 2px 6px rgba(148, 163, 184, 0.3) !important;
}

/* Tablas de gestión — versión Vidrio Clara */
body.glassmorphic-theme.light-theme .attribute-filter-content .table.table-dark,
body.glassmorphic-theme.light-theme .attribute-filter-content .table.table-dark td,
body.glassmorphic-theme.light-theme .attribute-filter-content .table.table-dark th {
    background-color: transparent !important;
    color: #334155 !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

body.glassmorphic-theme.light-theme .attribute-filter-content .table thead.table-dark,
body.glassmorphic-theme.light-theme .attribute-filter-content .table thead.table-dark th {
    background-color: rgba(215, 227, 240, 0.7) !important;
    color: #0284c7 !important;
    border-color: rgba(2, 132, 199, 0.25) !important;
}

body.glassmorphic-theme.light-theme .attribute-filter-content .table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(184, 194, 208, 0.25) !important;
}

body.glassmorphic-theme.light-theme .attribute-filter-content .table.table-hover tbody tr:hover {
    background-color: rgba(2, 132, 199, 0.12) !important;
    color: #0f172a !important;
}

body.glassmorphic-theme.light-theme .form-control,
body.glassmorphic-theme.light-theme select {
    background: rgba(226, 232, 240, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: inset 0 2px 6px rgba(148, 163, 184, 0.3) !important;
    color: #1e293b !important;
}

body.glassmorphic-theme.light-theme .sig-footer {
    background: rgba(255, 255, 255, 0.5) !important;
    border-top-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: none !important;
    color: #64748b !important;
}