/* ======================================================================
   UBICUO UI — Estilos modernos limpios y compactos
   ====================================================================== */

/* ---------------------------------------------------------
   BASE
--------------------------------------------------------- */
html, body {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    color: #1e1e1e !important;
    overflow: visible !important;
}

* {
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   SIDEBAR
--------------------------------------------------------- */
#sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
    padding-top: 10px !important;
}

#sidebar input[type="text"],
#sidebar .form-control {
    border-radius: 8px !important;
    border: 1px solid #d2d6dc !important;
    padding: 6px 10px !important;
}

#sidebar .nav-tabs > li > a {
    font-weight: 500 !important;
    color: #374151 !important;
    border-radius: 6px !important;
}

#sidebar .nav-tabs > li.active > a {
    background: #eef2ff !important;
    border: 1px solid #d1d5db !important;
    color: #111827 !important;
}

#sidebar .list-group-item {
    border-radius: 8px !important;
    background: #f9fafb !important;
    margin-bottom: 6px !important;
}

#sidebar .list-group-item:hover {
    background: #eef2ff !important;
}

/* ---------------------------------------------------------
   MAP CONTROLS — BOTONES DERECHA
--------------------------------------------------------- */

#map-controls .btn,
#map-controls a,
#map-controls button {
    width: 34px !important;
    height: 34px !important;
    margin: 2px 0 !important;

    border-radius: 8px !important;
    background-color: #2563eb !important;
    border: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    transition: 0.15s ease-in-out !important;
    position: relative !important;
}

#map-controls .btn:hover,
#map-controls a:hover {
    background-color: #3b82f6 !important;
}

#map-controls .btn.active,
#map-controls a.active {
    background-color: #6b7280 !important;
}

/* Iconos blancos */
#map-controls .btn .icon,
#map-controls .btn i,
#map-controls .btn span {
    filter: brightness(0) invert(1) !important;
}

/* ---------------------------------------------------------
   LEAFLET — ZOOM Y BOTÓN DE CAPAS
--------------------------------------------------------- */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background-color: #2563eb !important;
    color: #fff !important;
    border: none !important;
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
    background-color: #3b82f6 !important;
}

.leaflet-control-zoom-in:active,
.leaflet-control-zoom-out:active {
    background-color: #6b7280 !important;
}

/* Botón original Leaflet */
.leaflet-control-layers-toggle {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background-color: #2563eb !important;
    background-image: url('/assets/images/layers-white.png') !important;
    background-size: 18px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: none !important;
}

.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    background-color: #6b7280 !important;
}

/* Panel */
.leaflet-control-layers {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 8px !important;
}

/* Texto */
.leaflet-control-layers label,
.leaflet-control-layers label span {
    color: #0d1b2a !important;
    filter: none !important;
}

/* Checkbox */
.leaflet-control-layers-selector {
    accent-color: #2563eb !important;
}

.leaflet-top,
.leaflet-bottom,
.leaflet-control {
    overflow: visible !important;
    z-index: 999999 !important;
}

/* ======================================================================
   TOOLTIP UBICUO
====================================================================== */

#ubicuo-tooltip {
    position: fixed;
    background: #0d1b2a;
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 999999999 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .10s ease-in-out;
}

/* ======================================================================
   FIX BOTÓN FANTASMA GPSWOX
====================================================================== */

#map-controls .btn-group-vertical button .map-change,
#map-controls .btn-group-vertical .map-change {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Botón vacío debajo de layers */
#map-controls .btn-group-vertical button:has(> span.icon:empty) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
}

/* ======================================================================
   HEADER UBICUO — gris
====================================================================== */

#header .navbar-main,
.navbar-main {
    background: #e5e7eb !important;
    border-bottom: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Contenedor del icono */
#header .navbar-nav > li > a {
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* ===============================================================
   FIX CRÍTICO — eliminar INFLUENCIA de icomoon / fontawesome
   evita iconos aplastados
================================================================ */

#header .navbar-nav > li > a .icon {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    background-repeat: no-repeat !important;
    background-size: 32px 32px !important;
    background-position: center !important;
    width: 32px !important;
    height: 32px !important;
    display: block !important;
}


/* Hover */
#header .navbar-nav > li > a:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    border-radius: 8px !important;
}

/* ======================================================================
   ICONOS SVG DEL HEADER (24px)
====================================================================== */

/* ADMIN */
#header .navbar-nav > li > a .icon.admin {
    background-image: url('/assets/icons/header-admin-gear-blue.svg');
}

/* TOOLS */
#header .navbar-nav > li > a .icon.tools {
    background-image: url('/assets/icons/header-tools-wrench-blue.svg');
}

/* SETTINGS extra */
#header .navbar-nav > li > a .icon.setup {
    background-image: url('/assets/icons/header-settings-gear-gray.svg');
}

/* CHAT */
#header .navbar-nav > li > a .icon.chat {
    background-image: url('/assets/icons/header-chat-bubble-orange.svg');
}

/* USER */
#header .navbar-nav > li > a .icon.account {
    background-image: url('/assets/icons/header-user-circle-blue.svg');
}

/* ======================================================================
   MENÚ DE USUARIO (dropdown Mi cuenta) — iconos SVG
====================================================================== */

ul.dropdown-menu[aria-labelledby="dropMyAccount"] > li > a {
    position: relative;
    padding-left: 40px !important;
    display: flex;
    align-items: center;
    min-height: 32px;
}

/* Ocultar iconos viejos */
ul.dropdown-menu[aria-labelledby="dropMyAccount"] > li > a .icon {
    display: none !important;
}

/* Iconos SVG */
ul.dropdown-menu[aria-labelledby="dropMyAccount"] > li > a::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Suscripción */
ul.dropdown-menu[aria-labelledby="dropMyAccount"] > li:nth-child(1) > a::before {
    background-image: url('/assets/icons/ux-subscription-tag.svg');
}

/* Cambiar contraseña */
ul.dropdown-menu[aria-labelledby="dropMyAccount"] > li:nth-child(2) > a::before {
    background-image: url('/assets/icons/ux-change-password-key.svg');
}

/* Salir */
ul.dropdown-menu[aria-labelledby="dropMyAccount"] > li:nth-child(3) > a::before {
    background-image: url('/assets/icons/ux-logout-power.svg');
}