/* ==========================================================================
   Casas Olimpo - Material Design 3 (MD3) Expressive & IJP OLED Ink Design System
   Paleta: Blanco Minimalista Satinado, Grises Mate, Blur y Gradiente Tornasol IJP
   ========================================================================== */

:root {
    /* MD3 Motion Easing Curves */
    --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-easing-expressive-fast-spatial: cubic-bezier(0.4, 0, 0.2, 1);
    --md-sys-motion-easing-expressive-slow-spatial: cubic-bezier(0.3, 0, 0, 1);
    --md-sys-motion-easing-expressive-bounce: cubic-bezier(0.34, 1.45, 0.64, 1);

    /* MD3 Expressive Spring Tokens (Exact Analytical ODE Damped Oscillators O(1)) */
    --md-sys-motion-spring-default-spatial: linear(0.0000, 0.0261, 0.0913, 0.1800, 0.2802, 0.3832, 0.4832, 0.5761, 0.6598, 0.7331, 0.7958, 0.8483, 0.8912, 0.9256, 0.9526, 0.9731, 0.9883, 0.9992, 1.0066, 1.0113, 1.0140, 1.0151, 1.0151, 1.0143, 1.0131, 1.0117, 1.0101, 1.0086, 1.0071, 1.0058, 1.0046, 1.0035, 1.0027, 1.0020, 1.0014, 1.0009, 1.0005, 1.0003, 1.0001, 0.9999, 0.9999);
    --md-sys-motion-spring-fast-spatial: linear(0.0000, 0.0356, 0.1259, 0.2492, 0.3876, 0.5274, 0.6588, 0.7754, 0.8736, 0.9520, 1.0111, 1.0524, 1.0783, 1.0915, 1.0947, 1.0906, 1.0816, 1.0697, 1.0565, 1.0433, 1.0310, 1.0201, 1.0110, 1.0038, 0.9984, 0.9947, 0.9924, 0.9912, 0.9910, 0.9915, 0.9924, 0.9935, 0.9948, 0.9960, 0.9972, 0.9982);
    --md-sys-motion-spring-slow-spatial: linear(0.0000, 0.0215, 0.0764, 0.1525, 0.2405, 0.3332, 0.4255, 0.5138, 0.5956, 0.6696, 0.7351, 0.7919, 0.8403, 0.8808, 0.9141, 0.9411, 0.9624, 0.9790, 0.9914, 1.0006, 1.0070, 1.0112, 1.0137, 1.0149, 1.0152, 1.0147, 1.0138, 1.0126, 1.0112, 1.0098, 1.0084, 1.0071, 1.0059, 1.0048, 1.0038, 1.0030, 1.0023, 1.0017, 1.0012, 1.0008, 1.0005, 1.0003, 1.0001, 1.0000, 0.9999, 0.9998);
    --md-sys-motion-spring-default-effects: cubic-bezier(0.2, 0, 0, 1);

    /* MD3 Motion Durations */
    --md-sys-motion-duration-short1: 50ms;
    --md-sys-motion-duration-short2: 100ms;
    --md-sys-motion-duration-short3: 150ms;
    --md-sys-motion-duration-short4: 200ms;
    --md-sys-motion-duration-medium1: 250ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-duration-medium3: 350ms;
    --md-sys-motion-duration-medium4: 400ms;
    --md-sys-motion-duration-long1: 450ms;
    --md-sys-motion-duration-long2: 500ms;
    --md-sys-motion-duration-long3: 550ms;
    --md-sys-motion-duration-long4: 600ms;
    --md-sys-motion-duration-extralong1: 700ms;
    --md-sys-motion-duration-extralong2: 800ms;
    --md-sys-motion-duration-extralong3: 900ms;
    --md-sys-motion-duration-extralong4: 1000ms;

    /* IJP OLED Color Tokens */
    --ink-bg-light: #F5F6F9;
    --ink-bg-dark: #0E1013;
    --ink-text-primary: #0F172A;
    --ink-text-secondary: #64748B;
    --ink-border-subtle: rgba(15, 23, 42, 0.07);
    --ink-subpixel-red: #EF4444;
    --ink-subpixel-green: #10B981;
    --ink-subpixel-blue: #0066CC;

    /* Global Typography Tokens */
    --bs-body-font-family: 'Ubuntu', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-font-sans-serif: 'Ubuntu', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-font-monospace: 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.mud-theme-dark,
[data-bs-theme="dark"],
html.mud-theme-dark {
    --ink-bg-light: #050506;
    --ink-bg-dark: #050506;
    --ink-text-primary: #FFFFFF;
    --ink-text-secondary: #94A3B8;
    --ink-border-subtle: rgba(255, 255, 255, 0.08);
}

html, body {
    font-family: 'Ubuntu', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--mud-palette-background);
}

.mud-theme-dark body,
html.mud-theme-dark,
[data-bs-theme="dark"] body {
    background-color: #050506 !important;
    color: var(--mud-palette-text-primary, #FAFAFA);
}

/* ==========================================================================
   IJP OLED Minimalist Ink & Frosted Glass Components
   ========================================================================== */

/* 1. Tarjeta con cristal acrílico translúcido y blur */
.ink-card-frosted,
.mud-card:not(.mud-card-unstyled):not(.ink-card-hero) {
    background: #FFFFFF !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

.mud-theme-dark .ink-card-frosted,
[data-bs-theme="dark"] .ink-card-frosted,
html.mud-theme-dark .ink-card-frosted,
.mud-theme-dark .mud-card:not(.mud-card-unstyled):not(.ink-card-hero),
[data-bs-theme="dark"] .mud-card:not(.mud-card-unstyled):not(.ink-card-hero),
html.mud-theme-dark .mud-card:not(.mud-card-unstyled):not(.ink-card-hero) {
    background: #18181B !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4) !important;
    color: #FFFFFF !important;
}

/* 2. Tarjeta Hero IJP OLED (Blur acrílico iridiscente suave con tornasol pastel y SIN sombras de borde) */
.ink-card-hero,
.mud-card.ink-card-hero {
    background: linear-gradient(135deg, rgba(168, 216, 240, 0.48) 0%, rgba(254, 226, 179, 0.42) 45%, rgba(254, 197, 193, 0.48) 100%) !important;
    backdrop-filter: blur(20px) saturate(175%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(175%) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
}

.mud-theme-dark .ink-card-hero,
[data-bs-theme="dark"] .ink-card-hero,
html.mud-theme-dark .ink-card-hero,
.mud-theme-dark .mud-card.ink-card-hero,
[data-bs-theme="dark"] .mud-card.ink-card-hero,
html.mud-theme-dark .mud-card.ink-card-hero {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(251, 191, 36, 0.14) 45%, rgba(244, 114, 182, 0.18) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

/* 3. Cabecera IJP Pastel para Fichas de Propiedades (CasasAdmin) */
.ink-property-hero {
    background: linear-gradient(135deg, rgba(168, 216, 240, 0.55) 0%, rgba(254, 226, 179, 0.45) 50%, rgba(254, 197, 193, 0.55) 100%) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: none !important;
    position: relative;
}

.mud-theme-dark .ink-property-hero,
[data-bs-theme="dark"] .ink-property-hero,
html.mud-theme-dark .ink-property-hero {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(251, 191, 36, 0.15) 50%, rgba(244, 114, 182, 0.2) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

/* 4. Ficha M-Color / Ink Screen Tile (.ink-kpi-tile) (SIN sombras de borde) */
.ink-kpi-tile {
    background: rgba(255, 255, 255, 0.80) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    border-radius: 16px !important;
    padding: 1.25rem !important;
    box-shadow: none !important;
    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1), border-color 250ms cubic-bezier(0.2, 0, 0, 1) !important;
}

.ink-kpi-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 102, 204, 0.3) !important;
    box-shadow: none !important;
}

.mud-theme-dark .ink-kpi-tile,
[data-bs-theme="dark"] .ink-kpi-tile,
html.mud-theme-dark .ink-kpi-tile {
    background: rgba(16, 18, 22, 0.88) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.mud-theme-dark .ink-kpi-tile:hover,
[data-bs-theme="dark"] .ink-kpi-tile:hover,
html.mud-theme-dark .ink-kpi-tile:hover {
    border-color: rgba(96, 165, 250, 0.35) !important;
    box-shadow: none !important;
}

/* Tipografía de Fichas Ink Screen */
.ink-tile-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--ink-text-secondary, #64748B) !important;
}

.mud-theme-dark .ink-tile-label,
[data-bs-theme="dark"] .ink-tile-label,
html.mud-theme-dark .ink-tile-label {
    color: #94A3B8 !important;
}

.ink-tile-value {
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: var(--ink-text-primary, #0F172A) !important;
    margin: 0.25rem 0 !important;
    letter-spacing: -0.02em !important;
}

.mud-theme-dark .ink-tile-value,
[data-bs-theme="dark"] .ink-tile-value,
html.mud-theme-dark .ink-tile-value {
    color: #FFFFFF !important;
}

.ink-tile-subtext {
    font-size: 0.78rem !important;
    color: var(--ink-text-secondary, #64748B) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.mud-theme-dark .ink-tile-subtext,
[data-bs-theme="dark"] .ink-tile-subtext,
html.mud-theme-dark .ink-tile-subtext {
    color: #94A3B8 !important;
}

/* Squircle de Icono Refinado (No Avatar Sólido Saturado) */
.ink-icon-squircle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 200ms ease;
}

.ink-kpi-tile:hover .ink-icon-squircle {
    transform: scale(1.05);
}

.squircle-blue {
    background: rgba(0, 102, 204, 0.08) !important;
    color: #0066CC !important;
    border: 1px solid rgba(0, 102, 204, 0.15) !important;
}

.squircle-green {
    background: rgba(16, 185, 129, 0.09) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.18) !important;
}

.squircle-amber {
    background: rgba(245, 158, 11, 0.09) !important;
    color: #D97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.18) !important;
}

.squircle-red {
    background: rgba(239, 68, 68, 0.09) !important;
    color: #DC2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.18) !important;
}

.squircle-cyan {
    background: rgba(2, 132, 199, 0.09) !important;
    color: #0284C7 !important;
    border: 1px solid rgba(2, 132, 199, 0.18) !important;
}

.squircle-slate {
    background: rgba(100, 116, 139, 0.09) !important;
    color: #475569 !important;
    border: 1px solid rgba(100, 116, 139, 0.18) !important;
}

.mud-theme-dark .squircle-blue,
[data-bs-theme="dark"] .squircle-blue,
html.mud-theme-dark .squircle-blue {
    background: rgba(96, 165, 250, 0.16) !important;
    color: #60A5FA !important;
    border-color: rgba(96, 165, 250, 0.25) !important;
}

.mud-theme-dark .squircle-green,
[data-bs-theme="dark"] .squircle-green,
html.mud-theme-dark .squircle-green {
    background: rgba(52, 211, 153, 0.16) !important;
    color: #34D399 !important;
    border-color: rgba(52, 211, 153, 0.25) !important;
}

.mud-theme-dark .squircle-amber,
[data-bs-theme="dark"] .squircle-amber,
html.mud-theme-dark .squircle-amber {
    background: rgba(251, 191, 36, 0.16) !important;
    color: #FBBF24 !important;
    border-color: rgba(251, 191, 36, 0.25) !important;
}

.mud-theme-dark .squircle-red,
[data-bs-theme="dark"] .squircle-red,
html.mud-theme-dark .squircle-red {
    background: rgba(248, 113, 113, 0.16) !important;
    color: #F87171 !important;
    border-color: rgba(248, 113, 113, 0.25) !important;
}

.mud-theme-dark .squircle-cyan,
[data-bs-theme="dark"] .squircle-cyan,
html.mud-theme-dark .squircle-cyan {
    background: rgba(56, 189, 248, 0.16) !important;
    color: #38BDF8 !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
}

.mud-theme-dark .squircle-slate,
[data-bs-theme="dark"] .squircle-slate,
html.mud-theme-dark .squircle-slate {
    background: rgba(148, 163, 184, 0.16) !important;
    color: #94A3B8 !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

/* Indicador de Punto de Estatus Suave */
.ink-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.dot-green { background-color: #10B981; }
.dot-amber { background-color: #F59E0B; }
.dot-red { background-color: #EF4444; }
.dot-blue { background-color: #0066CC; }

/* 4. Barra Superior Frosted Flotante */
.ink-appbar-frosted {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: none !important;
}

.mud-theme-dark .ink-appbar-frosted,
[data-bs-theme="dark"] .ink-appbar-frosted,
html.mud-theme-dark .ink-appbar-frosted,
.mud-theme-dark header.mud-appbar.ink-appbar-frosted {
    background: rgba(7, 8, 10, 0.88) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

.mud-theme-dark .ink-appbar-frosted *,
[data-bs-theme="dark"] .ink-appbar-frosted * {
    color: #FFFFFF !important;
}

/* ==========================================================================
   Espaciado de Layout y Despeje de Barra de Navegación Fija (Navbar)
   Garantiza que el contenido en todas las rutas quede visible holgadamente
   debajo de la barra superior fija, evitando que quede tapado o encimado.
   ========================================================================== */
.app-main-content,
.mud-main-content {
    padding-top: calc(var(--mud-appbar-height, 64px) + 1.5rem) !important;
}

@media (max-width: 599.98px) {
    .app-main-content,
    .mud-main-content {
        padding-top: calc(var(--mud-appbar-height, 56px) + 1rem) !important;
    }
}

/* Salvaguarda contra clases utilitarias de padding en MudMainContent */
.mud-main-content.pa-0,
.mud-main-content.pa-1,
.mud-main-content.pa-2,
.mud-main-content.pa-3,
.mud-main-content.pa-4,
.mud-main-content.pa-5,
.mud-main-content.pa-6,
.mud-main-content.pa-sm-6 {
    padding-top: calc(var(--mud-appbar-height, 64px) + 1.5rem) !important;
}

/* Normalizar contenedores de página con .my-6 para que el espaciado superior
   sea 100% consistente y uniforme en todas las rutas del sistema */
.app-main-content .mud-container.my-6,
.mud-main-content .mud-container.my-6 {
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Vistas sin barra superior (como /login), no requieren despeje superior */
.mud-layout:not(:has(.mud-appbar)) .mud-main-content,
.mud-layout:not(:has(.ink-appbar-frosted)) .mud-main-content {
    padding-top: 0 !important;
}

/* 5. Micro-Badge Subpixel RGB */
.ink-subpixel-stripe {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.04);
}

.ink-subpixel-stripe span {
    width: 6px;
    height: 14px;
    border-radius: 2px;
    display: inline-block;
}

.ink-subpixel-red { background-color: var(--ink-subpixel-red); }
.ink-subpixel-green { background-color: var(--ink-subpixel-green); }
.ink-subpixel-blue { background-color: var(--ink-subpixel-blue); }

/* ==========================================================================
   Material Design 3 / Flutter-Style Circular Reveal View Transitions
   ========================================================================== */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 9999;
}

html.theme-ripple-animating::view-transition-new(root) {
    animation: ripple-reveal 450ms cubic-bezier(0.2, 0, 0, 1) forwards;
}

@keyframes ripple-reveal {
    from {
        clip-path: circle(0px at var(--ripple-x, 50%) var(--ripple-y, 50%));
    }
    to {
        clip-path: circle(var(--ripple-r, 150vmax) at var(--ripple-x, 50%) var(--ripple-y, 50%));
    }
}

/* ==========================================================================
   Page Transitions (MD3 Expressive Entrance)
   ========================================================================== */
@keyframes md3-expressive-fade-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-transition {
    animation: md3-expressive-fade-in 450ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ==========================================================================
   Bootstrap / MudBlazor Dynamic Bridges
   ========================================================================== */
.text-dark {
    color: var(--mud-palette-text-primary) !important;
}

.text-black {
    color: var(--mud-palette-text-primary) !important;
}

.text-secondary {
    color: var(--mud-palette-text-secondary) !important;
}

.text-muted {
    color: var(--mud-palette-text-secondary) !important;
}

.text-primary {
    color: var(--mud-palette-primary) !important;
}

.bg-white {
    background-color: var(--mud-palette-surface) !important;
}

.bg-light {
    background-color: var(--mud-palette-background) !important;
}

/* ==========================================================================
   MD3 Cards & Hover Interactions
   ========================================================================== */
.hover-card {
    transition: transform 0.25s cubic-bezier(0.34, 1.45, 0.64, 1), border-color 0.25s ease !important;
    cursor: pointer;
    box-shadow: none !important;
}

.hover-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(0, 102, 204, 0.3) !important;
    box-shadow: none !important;
}

/* Force user popover dropdown to occupy appropriate width matching header button */
.user-menu-popover {
    min-width: 280px !important;
    width: 280px !important;
}

/* ==========================================================================
   Mini Drawer / Rail Mode (Closed Drawer)
   ========================================================================== */
.mud-drawer-close .mud-nav-link-text,
.mud-drawer-close .mud-typography-subtitle2,
.mud-drawer-close .mud-divider,
.mud-drawer-close .sidebar-nav-container .mud-nav-link-text,
.mud-drawer-close .sidebar-nav-container .mud-typography-subtitle2,
.mud-drawer-close .sidebar-nav-container .mud-divider,
.mud-drawer--closed .mud-nav-link-text,
.mud-drawer--closed .mud-typography-subtitle2,
.mud-drawer--closed .mud-divider,
.mud-drawer--closed .sidebar-nav-container .mud-nav-link-text,
.mud-drawer--closed .sidebar-nav-container .mud-typography-subtitle2,
.mud-drawer--closed .sidebar-nav-container .mud-divider {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.mud-drawer--closed,
.mud-drawer-close {
    width: 64px !important;
}

/* Allow overflow on closed MudDrawer so flyout popovers float outside drawer bounds */
.mud-drawer--closed,
.mud-drawer--closed .mud-drawer-content,
.mud-drawer-close,
.mud-drawer-close .mud-drawer-content,
.sidebar-nav-container {
    overflow: visible !important;
}

/* Centering direct links in mini mode */
.mud-drawer--closed .sidebar-nav-container > .mud-navmenu > .mud-tooltip-root > .mud-nav-link,
.mud-drawer--closed .sidebar-nav-container > .mud-navmenu > .mud-nav-link,
.mud-drawer-close .sidebar-nav-container > .mud-navmenu > .mud-tooltip-root > .mud-nav-link,
.mud-drawer-close .sidebar-nav-container > .mud-navmenu > .mud-nav-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    margin: 4px auto !important;
    border-radius: 12px !important;
}

.mud-drawer--closed .sidebar-nav-container > .mud-navmenu > .mud-tooltip-root > .mud-nav-link .mud-nav-link-icon-default,
.mud-drawer--closed .sidebar-nav-container > .mud-navmenu > .mud-nav-link .mud-nav-link-icon-default,
.mud-drawer-close .sidebar-nav-container > .mud-navmenu > .mud-tooltip-root > .mud-nav-link .mud-nav-link-icon-default,
.mud-drawer-close .sidebar-nav-container > .mud-navmenu > .mud-nav-link .mud-nav-link-icon-default,
.nav-group-collapsed-button .mud-icon-root {
    margin: 0 !important;
}

/* ==========================================================================
   MD3 Expressive NavGroup Flyout (Collapsed Drawer Hover Menu)
   ========================================================================== */
.nav-group-collapsed-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px !important;
    height: 44px !important;
    margin: 4px auto !important;
    cursor: pointer;
    border-radius: 12px;
    color: var(--mud-palette-text-primary);
    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1), color 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.nav-group-collapsed-wrapper:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.nav-group-collapsed-wrapper.active {
    background-color: rgba(0, 102, 204, 0.12);
}

.nav-group-collapsed-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.nav-group-mini-icon {
    font-size: 1.25rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin: 0 !important;
}

/* Flyout Popover Container */
.nav-group-flyout-popover {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 10px;
    min-width: 250px !important;
    width: max-content !important;
    max-width: 320px !important;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 16px;
    border: 1px solid var(--mud-palette-divider);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    padding: 10px 8px;
    z-index: 1400;
    
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px) scale(0.95);
    transform-origin: top left;
    transition: opacity 0.22s cubic-bezier(0.2, 0, 0, 1),
                transform 0.22s cubic-bezier(0.2, 0, 0, 1),
                visibility 0.22s;
    pointer-events: none;
}

/* Mouse bridge for seamless hover */
.nav-group-flyout-popover::before {
    content: '';
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -18px;
    width: 18px;
}

.nav-group-collapsed-wrapper:hover .nav-group-flyout-popover,
.nav-group-flyout-popover:hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.nav-group-flyout-header {
    display: flex;
    align-items: center;
    padding: 6px 12px 8px 12px;
}

.nav-group-flyout-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.nav-group-flyout-divider {
    height: 1px;
    background-color: var(--mud-palette-divider);
    margin: 4px 10px 8px 10px;
    opacity: 0.7;
}

.nav-group-flyout-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 4px;
    width: 100%;
    box-sizing: border-box;
}

.mud-drawer--closed .nav-group-flyout-popover .mud-nav-link,
.mud-drawer-close .nav-group-flyout-popover .mud-nav-link,
.nav-group-flyout-popover .mud-nav-link {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    margin: 1px 0 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.mud-drawer--closed .nav-group-flyout-popover .mud-nav-link-text,
.mud-drawer-close .nav-group-flyout-popover .mud-nav-link-text,
.nav-group-flyout-popover .mud-nav-link-text {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 0 12px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--mud-palette-text-primary) !important;
}

.mud-drawer--closed .nav-group-flyout-popover .mud-icon-root,
.mud-drawer-close .nav-group-flyout-popover .mud-icon-root,
.nav-group-flyout-popover .mud-icon-root {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1.25rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

.nav-group-flyout-popover .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

.nav-group-flyout-popover .mud-nav-link.active {
    background-color: rgba(0, 102, 204, 0.12) !important;
    color: var(--mud-palette-primary) !important;
}

.nav-group-flyout-popover .mud-nav-link.active .mud-nav-link-text {
    color: var(--mud-palette-primary) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   Material Design 3 (MD3) Expressive - Container Morphing & Transform System
   ========================================================================== */
.md3-expressive-expandable {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 360ms cubic-bezier(0.3, 0, 0.8, 0.15);
    will-change: grid-template-rows;
}

.md3-expressive-expandable.speed-fast {
    transition: grid-template-rows 240ms cubic-bezier(0.3, 0, 0.8, 0.15);
}

.md3-expressive-expandable.speed-slow {
    transition: grid-template-rows 480ms cubic-bezier(0.3, 0, 0.8, 0.15);
}

.md3-expressive-expandable.is-expanded {
    grid-template-rows: 1fr;
    transition: grid-template-rows 480ms var(--md-sys-motion-spring-default-spatial);
}

.md3-expressive-expandable.speed-fast.is-expanded {
    transition: grid-template-rows 320ms var(--md-sys-motion-spring-fast-spatial);
}

.md3-expressive-expandable.speed-slow.is-expanded {
    transition: grid-template-rows 580ms var(--md-sys-motion-spring-slow-spatial);
}

.md3-expressive-expandable > .md3-expandable-content {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, -6px, 0) scale(0.985);
    transition: opacity 160ms cubic-bezier(0.4, 0, 1, 1),
                transform 240ms cubic-bezier(0.4, 0, 1, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
    contain: layout paint;
}

.md3-expressive-expandable.is-expanded > .md3-expandable-content {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition: opacity 280ms var(--md-sys-motion-spring-default-effects) 60ms,
                transform 480ms var(--md-sys-motion-spring-default-spatial);
}

.md3-expressive-expandable.speed-fast > .md3-expandable-content {
    transition: opacity 120ms cubic-bezier(0.4, 0, 1, 1),
                transform 180ms cubic-bezier(0.4, 0, 1, 1);
}

.md3-expressive-expandable.speed-fast.is-expanded > .md3-expandable-content {
    transition: opacity 200ms var(--md-sys-motion-spring-default-effects) 40ms,
                transform 320ms var(--md-sys-motion-spring-fast-spatial);
}

.md3-expressive-expandable.speed-slow > .md3-expandable-content {
    transition: opacity 200ms cubic-bezier(0.4, 0, 1, 1),
                transform 280ms cubic-bezier(0.4, 0, 1, 1);
}

.md3-expressive-expandable.speed-slow.is-expanded > .md3-expandable-content {
    transition: opacity 350ms var(--md-sys-motion-spring-default-effects) 80ms,
                transform 580ms var(--md-sys-motion-spring-slow-spatial);
}

/* ==========================================================================
   Global MudTable & MudDialog Ink Screen & Frosted Styling
   Aplica la estética e-ink de pantalla satinada a todas las tablas y diálogos.
   ========================================================================== */

/* Tablas con cabecera mate e-ink y filas suaves */
.mud-table {
    background: transparent !important;
}

.mud-table-head {
    background: #ECEFF4 !important;
}

.mud-theme-dark .mud-table-head,
[data-bs-theme="dark"] .mud-table-head,
html.mud-theme-dark .mud-table-head {
    background: #111317 !important;
}

.mud-table-head .mud-th {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--ink-text-secondary, #64748B) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.mud-theme-dark .mud-table-head .mud-th,
[data-bs-theme="dark"] .mud-table-head .mud-th,
html.mud-theme-dark .mud-table-head .mud-th {
    color: #CBD5E1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.mud-table-hover .mud-table-row:hover {
    background-color: rgba(0, 102, 204, 0.035) !important;
}

.mud-theme-dark .mud-table-hover .mud-table-row:hover,
[data-bs-theme="dark"] .mud-table-hover .mud-table-row:hover,
html.mud-theme-dark .mud-table-hover .mud-table-row:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.mud-theme-dark .mud-table-row,
[data-bs-theme="dark"] .mud-table-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.mud-theme-dark .mud-table-cell,
[data-bs-theme="dark"] .mud-table-cell,
.mud-theme-dark .mud-td,
[data-bs-theme="dark"] .mud-td {
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.mud-theme-dark .mud-table-pagination,
[data-bs-theme="dark"] .mud-table-pagination {
    color: #94A3B8 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Entradas de formulario y búsqueda en Dark Mode */
.mud-theme-dark .mud-input-control input,
[data-bs-theme="dark"] .mud-input-control input,
.mud-theme-dark .mud-input-slot,
[data-bs-theme="dark"] .mud-input-slot {
    color: #FFFFFF !important;
}

.mud-theme-dark .mud-input-outlined-border,
[data-bs-theme="dark"] .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.mud-theme-dark .mud-input-control ::placeholder,
[data-bs-theme="dark"] .mud-input-control ::placeholder {
    color: rgba(148, 163, 184, 0.6) !important;
}

/* Diálogos con fondo sólido nítido y sombra de elevación */
.mud-dialog {
    background: #FFFFFF !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.22), 0 0 1px 1px rgba(0, 0, 0, 0.05) !important;
}

.mud-theme-dark .mud-dialog,
[data-bs-theme="dark"] .mud-dialog,
html.mud-theme-dark .mud-dialog {
    background: #18181B !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important;
    color: #FFFFFF !important;
}

.mud-dialog .mud-dialog-title {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    padding: 16px 24px !important;
}

.mud-theme-dark .mud-dialog .mud-dialog-title,
[data-bs-theme="dark"] .mud-dialog .mud-dialog-title,
html.mud-theme-dark .mud-dialog .mud-dialog-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   Ink & Paper Neutral Minimalist Tabs (MD3 Expressive)
   Sustituye fondos primarios saturados por una estética de tinta sobre papel
   ========================================================================== */
.mud-tabs,
.md3-expressive-tabs {
    background: transparent !important;
}

/* Barra de pestañas con borde inferior sutil tipo editorial */
.mud-tabs .mud-tabs-tabbar,
.md3-expressive-tabs .mud-tabs-tabbar {
    background: transparent !important;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
    padding: 0 8px !important;
}

/* Pestaña individual */
.mud-tabs .mud-tab,
.md3-expressive-tabs .mud-tab {
    min-height: 48px !important;
    padding: 10px 18px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: var(--mud-palette-text-secondary) !important;
    border-radius: 8px 8px 0 0 !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
}

.mud-tabs .mud-tab:hover,
.md3-expressive-tabs .mud-tab:hover {
    color: var(--mud-palette-text-primary) !important;
    background-color: rgba(128, 128, 128, 0.05) !important;
}

/* Pestaña activa: Tinta de alto contraste */
.mud-tabs .mud-tab.mud-tab-active,
.md3-expressive-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 700 !important;
}

/* Indicador de pestaña: Barra sutil de tinta de 2.5px */
.mud-tabs .mud-tab-slider,
.md3-expressive-tabs .mud-tab-slider {
    background-color: var(--mud-palette-text-primary) !important;
    height: 2.5px !important;
    border-radius: 3px 3px 0 0 !important;
}

/* Badges neutros en las pestañas */
.mud-tabs .mud-tab .mud-badge,
.md3-expressive-tabs .mud-tab .mud-badge {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 1px 7px !important;
    border-radius: 9999px !important;
    background-color: rgba(128, 128, 128, 0.14) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* ==========================================================================
   Ink & Paper Button Legibility in Dark Mode
   Asegura contraste nítido (tinta oscura #09090B sobre fondo blanco papel #FAFAFA)
   ========================================================================== */

/* 1. Botones Primarios Filled en Dark Mode (Fondo blanco papel + texto/iconos tinta negra) */
.mud-theme-dark .mud-button-filled.mud-button-filled-primary,
[data-bs-theme="dark"] .mud-button-filled.mud-button-filled-primary,
html.mud-theme-dark .mud-button-filled.mud-button-filled-primary {
    background-color: #FAFAFA !important;
    color: #09090B !important;
}

.mud-theme-dark .mud-button-filled.mud-button-filled-primary *,
[data-bs-theme="dark"] .mud-button-filled.mud-button-filled-primary *,
html.mud-theme-dark .mud-button-filled.mud-button-filled-primary * {
    color: #09090B !important;
}

.mud-theme-dark .mud-button-filled.mud-button-filled-primary:hover,
[data-bs-theme="dark"] .mud-button-filled.mud-button-filled-primary:hover,
html.mud-theme-dark .mud-button-filled.mud-button-filled-primary:hover {
    background-color: #E4E4E7 !important;
}

/* 2. Botones Secundarios Filled en Dark Mode */
.mud-theme-dark .mud-button-filled.mud-button-filled-secondary,
[data-bs-theme="dark"] .mud-button-filled.mud-button-filled-secondary,
html.mud-theme-dark .mud-button-filled.mud-button-filled-secondary {
    background-color: #A1A1AA !important;
    color: #09090B !important;
}

.mud-theme-dark .mud-button-filled.mud-button-filled-secondary *,
[data-bs-theme="dark"] .mud-button-filled.mud-button-filled-secondary *,
html.mud-theme-dark .mud-button-filled.mud-button-filled-secondary * {
    color: #09090B !important;
}

.mud-theme-dark .mud-button-filled.mud-button-filled-secondary:hover,
[data-bs-theme="dark"] .mud-button-filled.mud-button-filled-secondary:hover,
html.mud-theme-dark .mud-button-filled.mud-button-filled-secondary:hover {
    background-color: #71717A !important;
}

/* 3. Botones Success y Warning en Dark Mode */
.mud-theme-dark .mud-button-filled.mud-button-filled-success,
[data-bs-theme="dark"] .mud-button-filled.mud-button-filled-success,
html.mud-theme-dark .mud-button-filled.mud-button-filled-success {
    background-color: #34D399 !important;
    color: #09090B !important;
}

.mud-theme-dark .mud-button-filled.mud-button-filled-success *,
[data-bs-theme="dark"] .mud-button-filled.mud-button-filled-success *,
html.mud-theme-dark .mud-button-filled.mud-button-filled-success * {
    color: #09090B !important;
}

.mud-theme-dark .mud-button-filled.mud-button-filled-warning,
[data-bs-theme="dark"] .mud-button-filled.mud-button-filled-warning,
html.mud-theme-dark .mud-button-filled.mud-button-filled-warning {
    background-color: #FBBF24 !important;
    color: #09090B !important;
}

.mud-theme-dark .mud-button-filled.mud-button-filled-warning *,
[data-bs-theme="dark"] .mud-button-filled.mud-button-filled-warning *,
html.mud-theme-dark .mud-button-filled.mud-button-filled-warning * {
    color: #09090B !important;
}

/* 4. FABs y Chips Primarios en Dark Mode */
.mud-theme-dark .mud-fab.mud-fab-primary,
[data-bs-theme="dark"] .mud-fab.mud-fab-primary,
html.mud-theme-dark .mud-fab.mud-fab-primary {
    background-color: #FAFAFA !important;
    color: #09090B !important;
}

.mud-theme-dark .mud-fab.mud-fab-primary *,
[data-bs-theme="dark"] .mud-fab.mud-fab-primary *,
html.mud-theme-dark .mud-fab.mud-fab-primary * {
    color: #09090B !important;
}

.mud-theme-dark .mud-chip.mud-chip-filled.mud-chip-color-primary,
[data-bs-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-primary,
html.mud-theme-dark .mud-chip.mud-chip-filled.mud-chip-color-primary {
    background-color: #FAFAFA !important;
    color: #09090B !important;
}

.mud-theme-dark .mud-chip.mud-chip-filled.mud-chip-color-primary *,
[data-bs-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-primary *,
html.mud-theme-dark .mud-chip.mud-chip-filled.mud-chip-color-primary * {
    color: #09090B !important;
}