/* ==========================================================================
   SISTEMA DE DISEÑO SISBASE DARK NAVY - sisbaseStyle
   ========================================================================== */

/* Fuentes y Variables */
:root,
.dark,
html.sisbaseStyle-night,
html.smartolt-night {
    --navy-950: #06162f;
    --navy-900: #071b3d;
    --navy-800: #0d1e3a;
    --navy-700: #112240;
    --sisbaseStyle-topbar-height: 60px;
    --smartolt-topbar-height: 60px;

    --glass-bg: rgba(13, 25, 48, 0.72);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(0, 123, 255, 0.4);

    --text-primary: #ffffff;
    --text-secondary: #c2c8f0;
    --text-muted: #8b949e;

    /* sisbaseStyle Specific Colors */
    --smart-blue: #007bff;
    --smart-blue-dark: #1b70c4;
    --smart-green: #1ea844;
    --smart-green-vibrant: #28a745;
    --smart-amber: #ff9800;
    --smart-orange: #f39c12;
    --smart-red: #dc3545;
    --smart-neutral: #343a40;
    --smart-border: #273447;
}

/* Base HTML y Body Transparentes para la Capa Fija */
html,
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #06162f !important;
    color: #f8fafc;
}

/* Capa de Fondo Fija con images/vuela_bg.jpg y Overlay Azul Marino Transparente */
body::before,
.sisbaseStyle-site::before,
.smartolt-site::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-image: linear-gradient(180deg, rgba(6, 22, 47, 0.62) 0%, rgba(7, 27, 61, 0.75) 100%), url('/images/vuela_bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    pointer-events: none;
}

/* Forzar Transparencia en Contenedores Principales de Blazor / MudBlazor */
.mud-layout,
.mud-main-content,
.bg-sisbaseStyle,
.bg-smartolt {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* AppBar / Topbar sisbaseStyle con Vidrio Esmerilado (Frosted Glass Blur) */
.mud-appbar.glass-header,
.sisbaseStyle-topbar,
.smartolt-topbar {
    height: var(--sisbaseStyle-topbar-height) !important;
    background-color: rgba(6, 22, 47, 0.82) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border-bottom: 1px solid #273447 !important;
    color: #c2c8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Sidebar Lateral sisbaseStyle con Vidrio Esmerilado (Frosted Glass Blur) */
.mud-drawer.glass-sidebar,
.sisbaseStyle-sidebar,
.smartolt-sidebar {
    background-color: rgba(6, 22, 47, 0.80) !important;
    backdrop-filter: blur(6px) saturate(20%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    border-right: 1px solid #273447 !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4) !important;
}

/* NavLinks sisbaseStyle Lateral */
.glass-nav-item .mud-nav-link {
    border-radius: 4px !important;
    margin: 3px 10px;
    padding: 8px 14px;
    color: #c2c8f0 !important;
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent;
}

.glass-nav-item .mud-nav-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    transform: translateX(3px);
}

.glass-nav-item .mud-nav-link.active {
    background: rgba(0, 123, 255, 0.18) !important;
    color: #38bdf8 !important;
    font-weight: 700;
    border-left: 3px solid #007bff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.glass-nav-item .mud-nav-link .mud-nav-link-icon {
    transition: all 0.2s ease;
    color: inherit !important;
}

.glass-nav-item .mud-nav-link.active .mud-nav-link-icon {
    color: #007bff !important;
}

/* Componente Tarjeta / Panel sisbaseStyle con Vidrio Esmerilado (Frosted Glass Blur) */
.glass-card,
.sisbaseStyle-panel,
.smartolt-panel,
.mud-paper:not(.mud-popover-paper),
.mud-card {
    background: rgba(11, 22, 42, 0.65) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
    color: #ffffff;
}

.sisbaseStyle-panel-heading,
.smartolt-panel-heading {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid #273447 !important;
    padding: 10px 16px;
    color: #f1f5f9;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Custom MudTabs Panel & Toolbar Styling Estructurado */
.custom-mud-tabs {
    background: transparent !important;
}

.custom-mud-tabs .mud-tabs-toolbar {
    background: rgba(7, 27, 61, 0.72) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border: 1px solid #273447 !important;
    border-radius: 4px !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.custom-mud-tabs .mud-tabs-panels {
    padding-top: 0 !important;
}

.custom-mud-tabs .mud-tab {
    color: #c2c8f0 !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 10px 18px !important;
}

.custom-mud-tabs .mud-tab.mud-tab-active {
    color: #38bdf8 !important;
    background: rgba(0, 123, 255, 0.2) !important;
}

.custom-mud-tabs .mud-tabs-indicator {
    background-color: #007bff !important;
    height: 3px !important;
}

.smartolt-panel-heading {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid #273447 !important;
    padding: 10px 16px;
    color: #f1f5f9;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Tarjetas KPI SmartOLT */
.smart-kpi-card {
    border-radius: 4px !important;
    padding: 0 !important;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.smart-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.smart-kpi-body {
    padding: 1.15rem 1.25rem 0.65rem 1.25rem;
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.smart-kpi-footer {
    background: rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0.55rem 1.25rem;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Card 1: Azul Authorization */
.smart-kpi-blue {
    background: linear-gradient(135deg, #1b70c4 0%, #007bff 100%) !important;
}

/* Card 2: Verde Online */
.smart-kpi-green {
    background: linear-gradient(135deg, #1ea844 0%, #28a745 100%) !important;
}

/* Card 3: Gris Total Offline */
.smart-kpi-neutral {
    background: linear-gradient(135deg, #343a40 0%, #1e293b 100%) !important;
}

/* Card 4: Naranja/Ámbar Low Signals / Warning */
.smart-kpi-amber {
    background: linear-gradient(135deg, #f39c12 0%, #ff9800 100%) !important;
}

/* Botones SmartOLT (Limpios sin Neón) */
.glass-btn,
.btn-smart-blue {
    background-color: #007bff !important;
    border: 1px solid #007bff !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.glass-btn:hover,
.btn-smart-blue:hover {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.glass-btn-emerald,
.btn-smart-green {
    background-color: #28a745 !important;
    border: 1px solid #28a745 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

.glass-btn-emerald:hover,
.btn-smart-green:hover {
    background-color: #218838 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.btn-smart-red {
    background-color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

.btn-smart-red:hover {
    background-color: #c82333 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* Badges SmartOLT */
.glass-badge,
.smart-badge-active {
    background: #007bff !important;
    border: 1px solid #007bff !important;
    color: #ffffff !important;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px !important;
}

.glass-badge-amber,
.smart-badge-warning {
    background: #ff9800 !important;
    border: 1px solid #ff9800 !important;
    color: #ffffff !important;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px !important;
}

.glass-badge-cyan,
.smart-badge-online {
    background: #28a745 !important;
    border: 1px solid #28a745 !important;
    color: #ffffff !important;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px !important;
}

/* Modales y Diálogos MudBlazor con Vidrio Esmerilado */
.mud-dialog {
    background-color: rgba(15, 28, 50, 0) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    border: 1px solid #334662 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75) !important;
    border-radius: 4px !important;
}

.mud-overlay-dialog .mud-overlay-scrim {
    background-color: rgba(6, 22, 47, 0.75) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* Modificaciones Generales de MudBlazor */
.mud-button-root,
.mud-input-control,
.mud-input-outlined,
.mud-input-text,
.mud-card,
.mud-paper,
.mud-chip,
.mud-alert,
.mud-tooltip,
.mud-dialog-container .mud-paper,
.mud-table-container,
.mud-menu-paper,
.mud-popover-paper,
.mud-picker-paper {
    border-radius: 4px !important;
}

/* MudTable Overrides */
.mud-table-root {
    background-color: transparent !important;
}

.mud-table-head {
    background-color: rgba(6, 22, 47, 0.8) !important;
}

.mud-table-head .mud-table-cell {
    color: #c2c8f0 !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #273447 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.mud-table-body .mud-table-row {
    border-bottom: 1px solid rgba(39, 52, 71, 0.6) !important;
}

.mud-table-body .mud-table-row:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.mud-table-cell {
    color: #f1f5f9 !important;
    border-bottom: 1px solid rgba(39, 52, 71, 0.6) !important;
}

/* Input Fields SmartOLT */
.glass-input,
input[type="text"]:not(.mud-input-slot),
select:not(.mud-select-input) {
    background: rgba(13, 25, 45, 0.8) !important;
    border: 1px solid #273447 !important;
    color: #f8fafc !important;
    border-radius: 4px !important;
}

.glass-input:focus,
input[type="text"]:not(.mud-input-slot):focus,
select:not(.mud-select-input):focus {
    border-color: #007bff !important;
    outline: none !important;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.3) !important;
}

/* Corrección de Label Tachado en Inputs y MudTextField/MudSelect al Enfocar */
.mud-input-slot,
input.mud-input-slot,
.mud-input-outlined input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.mud-input-label-outlined {
    z-index: 2 !important;
}

.mud-input-label-outlined.mud-input-label-inputcontrol,
.mud-input-label-outlined.mud-input-label-shrink {
    background-color: var(--navy-900, #071b3d5e) !important;
    padding: 0 6px !important;
    margin-left: -2px !important;
    border-radius: 2px !important;
    z-index: 2 !important;
}

/* Contenedor de Login Transparente */
.login-card-transparent {
    background: rgb(8 20 42 / 65%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 30px rgba(0, 123, 255, 0.12) !important;
}

/* Animación y Corrección de despliegue normal para Selects, Menús, Submenús y Popovers (Sin zoom desde top-left) */
@keyframes mudDropdownNormalOpen {
    0% {
        opacity: 0;
        transform: translateY(-6px);
    }

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

/* Desactivar Popups y Sugerencias de Autocompletado Nativo del Navegador (Chrome/Edge) */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button,
input::-webkit-autofill-preview-text {
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 0 !important;
    display: none !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f8fafc !important;
    -webkit-box-shadow: 0 0 0px 1000px #071b3d inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* ELIMINAR DE RAÍZ EL EFECTO ZOOM Y TRANSICIÓN SCALE(0->1) DESDE TOP-LEFT EN POPOVERS */
.mud-popover-provider,
.mud-popover-provider *,
.mud-popover,
.mud-popover *,
.mud-popover-paper,
.mud-popover-paper *,
.mud-popover-open,
.mud-popover-open *,
.mud-popover-cascading,
.mud-popover-cascading *,
.mud-popover-cascading-open,
.mud-popover-cascading-open *,
.mud-popover-cascading-closed,
.mud-popover-cascading-closed *,
.mud-select-paper,
.mud-select-paper *,
.mud-autocomplete-paper,
.mud-autocomplete-paper *,
[class*="mud-popover-transformation"],
[class*="mud-popover-transformation"] * {
    transform-origin: top center !important;
}

.mud-popover,
.mud-popover-open,
.mud-popover-cascading,
.mud-popover-cascading-open,
.mud-popover-cascading-closed,
.mud-popover-transformation-default,
[class*="mud-popover-transformation"] {
    transform: none !important;
    transition: opacity 0.15s ease-out !important;
    animation: none !important;
}

.mud-popover-paper,
.mud-menu-paper,
.mud-picker-paper,
.mud-picker-popover-paper,
.mud-menu-content,
.mud-popover>.mud-paper,
.smartolt-panel.mud-paper,
.mud-select-paper,
.mud-autocomplete-paper,
.mud-list {
    transform-origin: top center !important;
    animation: mudDropdownNormalOpen 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}








/* Scrollbar Personalizado Sutil SmartOLT Dark Navy */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(35, 47, 65, 0.75) transparent;
}

/* Ocultar botones con flechas/triángulos */
::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

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

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(39, 52, 71, 0.75) !important;
    border-radius: 4px !important;
    border: none !important;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 123, 255, 0.75) !important;
}

::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* Restricción Estricta de Bordes Redondeados (Max 4px / 0.25rem) */
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl,
.rounded-full:not(.w-1):not(.w-1\.5):not(.w-2):not(.w-2\.5):not(.w-3):not(.w-3\.5):not(.w-4):not(.h-1):not(.h-1\.5):not(.h-2):not(.h-2\.5):not(.h-3):not(.h-3\.5):not(.h-4) {
    border-radius: 4px !important;
}

/* ==========================================
   ESTILOS MAPA EN PANTALLA COMPLETA
   ========================================== */
.map-picker-wrapper.map-picker-fullscreen-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #06162f !important;
    box-shadow: none !important;
}

.map-picker-wrapper.map-picker-fullscreen-active .map-instance-container {
    height: 100vh !important;
    width: 100vw !important;
}

/* Ocultar atribución y bandera de Leaflet */
.leaflet-control-attribution {
    display: none !important;
}

.leaflet-control-zoom-fullscreen svg {
    color: #333333;
    transition: transform 0.15s ease, color 0.15s ease;
}

.leaflet-control-zoom-fullscreen:hover svg {
    transform: scale(1.15);
    color: #06b6d4 !important;
}