:root {
        --azul-principal: #0a3d62;
        --azul-claro: #9ec8e1;
        --sb-width: 280px;
        --sb-collapsed: 85px;
        --sb-bg: linear-gradient(135deg, #5b7fa8 0%, #9ec8e1 100%);
        --sb-accent: rgba(255, 255, 255, 0.2);
        --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    body.dark-mode {
        --azul-principal: #2563eb; /* Azul Rey Vibrante (Mejora radical de contraste en botones y chat) */
        --azul-claro: #1e3a8a;
        --sb-bg: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
        background-color: #020617;
    }
    body.dark-mode main { background-color: #0f172a; border-color: #1e293b; color: #f8fafc; }

    body { 
        font-family: 'Poppins', sans-serif; 
        transition: background 0.3s;
        background-color: #f8fafc;
    }

    /* --- SCROLLBAR PREMIUM GLOBAL --- */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.02);
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(10, 61, 98, 0.2);
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(10, 61, 98, 0.4);
    }

    /* Contenedor Sidebar con Estilo 3D */
    .sidebar {
        width: var(--sb-width);
        height: 95vh;
        margin: 2.5vh 0 2.5vh 20px;
        background: var(--sb-bg);
        transition: var(--transition);
        flex-direction: column;
        position: relative;
        z-index: 50;
        overflow: hidden;
        border-radius: 30px 0 0 30px; 
        border: 1px solid rgba(0, 0, 255, 0.3); 
        border-right: none;
        box-shadow: 
            -10px 10px 20px -5px rgba(0, 0, 0, 0.9),
            inset 0 2px 10px rgba(255, 255, 255, 0.2);
    }
    .sidebar.closed {
        width: var(--sb-collapsed);
    }

    /* User Card */
    .holo-user-card {
        margin: 1.5rem 1rem;
        position: relative;
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        color: #f8fafc;
        z-index: 30;
    }

    .holo-user-card-bg {
        position: absolute;
        inset: 0;
        border-radius: 1.5rem;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
        border: 1px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: -2;
        overflow: hidden;
        box-shadow: 0 10px 30px -5px rgba(0,0,0,0.2);
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .holo-user-card:hover { transform: translateY(-2px); }
    .holo-user-card:hover .holo-user-card-bg { box-shadow: 0 20px 40px -10px rgba(14, 165, 233, 0.3); }

    .holo-card-inner {
        padding: 1rem 0.75rem;
        height: 100%;
        width: 100%;
        position: relative;
        z-index: 1;
    }

    .holo-user-card-bg::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; height: 40%;
        background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }

    .avatar-ring {
        position: absolute; inset: -4px; border-radius: 50%;
        border: 2px dashed rgba(56, 189, 248, 0.5);
        animation: spinRing 8s linear infinite;
        transition: all 0.3s;
    }
    .holo-user-card:hover .avatar-ring { border-style: solid; border-color: rgba(16, 185, 129, 0.8); box-shadow: 0 0 15px rgba(16,185,129,0.5); }
    @keyframes spinRing { 100% { transform: rotate(360deg); } }

    .ekg-path { stroke-dasharray: 150; stroke-dashoffset: 150; animation: drawEkg 3s linear infinite; }
    @keyframes drawEkg { 0% { stroke-dashoffset: 150; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -150; } }
    @keyframes fibEkg { 0% { stroke-dashoffset: 50; } 100% { stroke-dashoffset: -50; } }

    .avatar-container { position: relative; width: 80px; height: 80px; perspective: 1000px; z-index: 50; }
    .profile-avatar-wrapper { transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; }
    .avatar-container:hover .profile-avatar-wrapper { transform: scale(0.8); opacity: 0.3; filter: blur(3px); pointer-events: none; }

    .action-menu-grid { position: absolute; inset: -5px; display: flex; flex-direction: column; gap: 4px; z-index: 5; opacity: 0; transform: scale(0.5) rotate(45deg); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; }
    .avatar-container:hover .action-menu-grid { opacity: 1; transform: scale(1) rotate(0deg); pointer-events: auto; }
    .menu-row { display: flex; flex-direction: row; gap: 4px; height: 50%; }
    .menu-btn { flex: 1; border: none; outline: none; background: rgba(255, 255, 255, 0.9); color: #334155; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: 0.2s ease-in-out; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); position: relative; cursor: pointer; backdrop-filter: blur(5px); }
    .btn-settings { border-radius: 90px 10px 10px 10px; }
    .btn-messages { border-radius: 10px 90px 10px 10px; }
    .btn-theme    { border-radius: 10px 10px 10px 90px; }
    .btn-logout   { border-radius: 10px 10px 90px 10px; }
    .btn-settings, .btn-messages, .btn-kpis, .btn-theme, .btn-logout { border-radius: 12px; }
    .btn-settings:hover { background-color: #8b5cf6; color: white; transform: scale(1.05); z-index: 10; }
    .btn-messages:hover { background-color: #3b82f6; color: white; transform: scale(1.05); z-index: 10; }
    .btn-kpis:hover     { background-color: #10b981; color: white; transform: scale(1.05); z-index: 10; }
    .btn-theme:hover    { background-color: #f59e0b; color: white; transform: scale(1.05); z-index: 10; }
    .btn-logout:hover   { background-color: #ef4444; color: white; transform: scale(1.05); z-index: 10; }

    .bb8-toggle { --toggle-size: 16px; --toggle-width: 10.625em; --toggle-height: 5.625em; --toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2); --toggle-bg: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4) no-repeat; --bb8-diameter: 4.375em; --radius: 99em; --transition: 0.4s; --accent: #de7d2f; --bb8-bg: #fff; cursor: pointer; font-size: var(--toggle-size); }
    .bb8-toggle * { box-sizing: border-box; }
    .bb8-toggle__checkbox { display: none; }
    .bb8-toggle__container { width: var(--toggle-width); height: var(--toggle-height); background: var(--toggle-bg); background-size: 100% 11.25em; background-position-y: -5.625em; border-radius: var(--radius); position: relative; transition: var(--transition); }
    .bb8 { display: flex; flex-direction: column; align-items: center; position: absolute; top: calc(var(--toggle-offset) - 1.688em + 0.188em); left: var(--toggle-offset); transition: var(--transition); z-index: 2; }
    .bb8__head-container { position: relative; transition: var(--transition); z-index: 2; transform-origin: 1.25em 3.75em; }
    .bb8__head { overflow: hidden; margin-bottom: -0.188em; width: 2.5em; height: 1.688em; background: linear-gradient(transparent 0.063em, dimgray 0.063em 0.313em, transparent 0.313em 0.375em, var(--accent) 0.375em 0.5em, transparent 0.5em 1.313em, silver 1.313em 1.438em, transparent 1.438em), linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 1.25em), linear-gradient(-45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 1.25em), linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em); border-radius: var(--radius) var(--radius) 0 0; position: relative; z-index: 1; filter: drop-shadow(0 0.063em 0.125em gray); }
    .bb8__head::before { content: ""; position: absolute; width: 0.563em; height: 0.563em; background: radial-gradient(0.125em circle at 0.25em 0.375em, red, transparent), radial-gradient(0.063em circle at 0.375em 0.188em, var(--bb8-bg) 50%, transparent 100%), linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em); border-radius: var(--radius); top: 0.413em; left: 50%; transform: translate(-50%); box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em, 0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em; z-index: 1; transition: var(--transition); }
    .bb8__head::after { content: ""; position: absolute; bottom: 0.375em; left: 0; width: 100%; height: 0.188em; background: linear-gradient(to right, var(--accent) 0.125em, transparent 0.125em 0.188em, var(--accent) 0.188em 0.313em, transparent 0.313em 0.375em, var(--accent) 0.375em 0.938em, transparent 0.938em 1em, var(--accent) 1em 1.125em, transparent 1.125em 1.875em, var(--accent) 1.875em 2em, transparent 2em 2.063em, var(--accent) 2.063em 2.25em, transparent 2.25em 2.313em, var(--accent) 2.313em 2.375em, transparent 2.375em 2.438em, var(--accent) 2.438em); transition: var(--transition); }
    .bb8__antenna { position: absolute; transform: translateY(-90%); width: 0.059em; border-radius: var(--radius) var(--radius) 0 0; transition: var(--transition); }
    .bb8__antenna:nth-child(1) { height: 0.938em; right: 0.938em; background: linear-gradient(#000 0.188em, silver 0.188em); }
    .bb8__antenna:nth-child(2) { height: 0.375em; left: 50%; transform: translate(-50%, -90%); background: silver; }
    .bb8__body { width: 4.375em; height: 4.375em; background: var(--bb8-bg); border-radius: var(--radius); position: relative; overflow: hidden; transition: var(--transition); z-index: 1; transform: rotate(45deg); background: linear-gradient(-90deg, var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10% 90%, var(--accent) 90% 96%, var(--bb8-bg) 96%), linear-gradient(var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10% 90%, var(--accent) 90% 96%, var(--bb8-bg) 96%), linear-gradient(to right, transparent 2.156em, silver 2.156em 2.219em, transparent 2.188em), linear-gradient(transparent 2.156em, silver 2.156em 2.219em, transparent 2.188em); background-color: var(--bb8-bg); }
    .bb8__body::after { content: ""; bottom: 1.5em; left: 0.563em; position: absolute; width: 0.188em; height: 0.188em; background: rgb(236, 236, 236); border-radius: 50%; box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 2.125em -2.125em, 3.063em -1.25em, 3.063em 0, 2.125em 0.938em; }
    .bb8__body::before { content: ""; width: 2.625em; height: 2.625em; position: absolute; border-radius: 50%; z-index: 0.1; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0.313em solid var(--accent); background: radial-gradient(1em circle at center, rgb(236, 236, 236) 50%, transparent 51%), radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%), linear-gradient(-90deg, transparent 42%, var(--accent) 42% 58%, transparent 58%), linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%); }
    .artificial__hidden { position: absolute; border-radius: inherit; inset: 0; pointer-events: none; overflow: hidden; }
    .bb8__shadow { content: ""; width: var(--bb8-diameter); height: 20%; border-radius: 50%; background: #3a271c; box-shadow: 0.313em 0 3.125em #3a271c; opacity: 0.25; position: absolute; bottom: 0; left: calc(var(--toggle-offset) - 0.938em); transition: var(--transition); transform: skew(-70deg); z-index: 1; }
    .bb8-toggle__scenery { width: 100%; height: 100%; pointer-events: none; overflow: hidden; position: relative; border-radius: inherit; }
    .bb8-toggle__scenery::before { content: ""; position: absolute; width: 100%; height: 30%; bottom: 0; background: #b18d71; z-index: 1; }
    .bb8-toggle__cloud { z-index: 1; position: absolute; border-radius: 50%; }
    .bb8-toggle__cloud:nth-last-child(1) { width: 0.875em; height: 0.625em; filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae) drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff); right: 1.875em; top: 2.813em; background: linear-gradient(to top right, #ffffffae, #ffffffae); transition: var(--transition); }
    .bb8-toggle__cloud:nth-last-child(2) { top: 0.625em; right: 4.375em; width: 0.875em; height: 0.375em; background: #dfdedeae; filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae) drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae); transition: 0.6s; }
    .bb8-toggle__cloud:nth-last-child(3) { top: 1.25em; right: 0.938em; width: 0.875em; height: 0.375em; background: #ffffffae; filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae) drop-shadow(-0.625em 0.313em #ffffffae); transition: 0.8s; }
    .gomrassen, .hermes, .chenini { position: absolute; border-radius: var(--radius); background: linear-gradient(#fff, #6e8ea2); top: 100%; }
    .gomrassen { left: 0.938em; width: 1.875em; height: 1.875em; box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b; transition: var(--transition); }
    .gomrassen::before, .gomrassen::after { content: ""; position: absolute; border-radius: inherit; box-shadow: inset 0 0 0.063em rgb(140, 162, 169); background: rgb(184, 196, 200); }
    .gomrassen::before { left: 0.313em; top: 0.313em; width: 0.438em; height: 0.438em; }
    .gomrassen::after { width: 0.25em; height: 0.25em; left: 1.25em; top: 0.75em; }
    .hermes { left: 3.438em; width: 0.625em; height: 0.625em; box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b; transition: 0.6s; }
    .chenini { left: 4.375em; width: 0.5em; height: 0.5em; box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b; transition: 0.8s; }
    .tatto-1, .tatto-2 { position: absolute; width: 1.25em; height: 1.25em; border-radius: var(--radius); }
    .tatto-1 { background: #fefefe; right: 3.125em; top: 0.625em; box-shadow: 0 0 0.438em #fdf4e1; transition: var(--transition); }
    .tatto-2 { background: linear-gradient(#e6ac5c, #d75449); right: 1.25em; top: 2.188em; box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f; transition: 0.7s; }
    .bb8-toggle__star { position: absolute; width: 0.063em; height: 0.063em; background: #fff; border-radius: var(--radius); filter: drop-shadow(0 0 0.063em #fff); color: #fff; top: 100%; }
    .bb8-toggle__star:nth-child(1) { left: 3.75em; box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em, -3.125em 1.875em, 1.25em 2.813em; transition: 0.2s; }
    .bb8-toggle__star:nth-child(2) { left: 4.688em; box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em, -3.125em 1.25em, 1.25em -1.563em; transition: 0.3s; }
    .bb8-toggle__star:nth-child(3) { left: 5.313em; box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, -3.75em -0.625em, -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em; transition: var(--transition); }
    .bb8-toggle__star:nth-child(4) { left: 1.875em; width: 0.125em; height: 0.125em; transition: 0.5s; }
    .bb8-toggle__star:nth-child(5) { left: 5em; width: 0.125em; height: 0.125em; transition: 0.6s; }
    .bb8-toggle__star:nth-child(6) { left: 2.5em; width: 0.125em; height: 0.125em; transition: 0.7s; }
    .bb8-toggle__star:nth-child(7) { left: 3.438em; width: 0.125em; height: 0.125em; transition: 0.8s; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(1) { top: 0.625em; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(2) { top: 1.875em; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(3) { top: 1.25em; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(4) { top: 3.438em; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(5) { top: 3.438em; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(6) { top: 0.313em; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(7) { top: 1.875em; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud { right: -100%; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen { top: 0.938em; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes { top: 2.5em; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini { top: 2.75em; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container { background-position-y: 0; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1 { top: 100%; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 { top: 100%; }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 { left: calc(100% - var(--bb8-diameter) - var(--toggle-offset)); }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow { left: calc(100% - var(--bb8-diameter) - var(--toggle-offset) + 0.938em); transform: skew(70deg); }
    .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body { transform: rotate(225deg); }
    .bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before { left: 100%; }
    .bb8-toggle__checkbox:not(:checked):hover + .bb8-toggle__container .bb8__antenna:nth-child(1) { right: 1.5em; }
    .bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__antenna:nth-child(2) { left: 0.938em; }
    .bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::after { background-position: 1.375em 0; }
    .bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::before { left: 0; }
    .bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__antenna:nth-child(2) { left: calc(100% - 0.938em); }
    .bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::after { background-position: -1.375em 0; }
    .bb8-toggle__checkbox:active + .bb8-toggle__container .bb8__head-container { transform: rotate(25deg); }
    .bb8-toggle__checkbox:checked:active + .bb8-toggle__container .bb8__head-container { transform: rotate(-25deg); }
    .bb8:hover .bb8__head::before, .bb8:hover .bb8__antenna:nth-child(2) { left: 50% !important; }
    .bb8:hover .bb8__antenna:nth-child(1) { right: 0.938em !important; }
    .bb8:hover .bb8__head::after { background-position: 0 0 !important; }

    /* --- INVERSIÓN INTELIGENTE MODO CLARO/OSCURO PARA LA TARJETA --- */
    body.dark-mode .holo-user-card-bg { background: linear-gradient(145deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 41, 59, 0.8) 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px -5px rgba(0,0,0,0.5); }
    body.dark-mode .holo-user-card-bg::after { background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%); }
    body.dark-mode .holo-user-card h4 { color: #f8fafc; }
    body.dark-mode .holo-user-card p#nav-user-role { color: #93c5fd; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)); }
    body.dark-mode .sys-ok-text { color: #94a3b8; }
    body.dark-mode .menu-btn { background: rgba(30, 41, 59, 0.9); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.05); }
    body.dark-mode .btn-settings:hover { background-color: #8b5cf6; color: white; border-color: #8b5cf6; }
    body.dark-mode .btn-messages:hover { background-color: #3b82f6; color: white; border-color: #3b82f6; }
    body.dark-mode .btn-kpis:hover     { background-color: #10b981; color: white; border-color: #10b981; }
    body.dark-mode .btn-logout:hover   { background-color: #ef4444; color: white; border-color: #ef4444; }

    /* --- MODO COMPACTO SUPER PREMIUM (AVATAR FLOTANTE) --- */
    .sidebar.closed .holo-user-card { margin: 1.5rem auto; width: 56px; height: 56px; display: flex; justify-content: center; align-items: center; border-radius: 50%; cursor: default; }
    .sidebar.closed .holo-user-card:hover { transform: scale(1); box-shadow: none; }
    .sidebar.closed .holo-user-card-bg { background: transparent !important; box-shadow: none !important; border: none; }
    .sidebar.closed .holo-card-inner { padding: 0; display: flex; justify-content: center; align-items: center; background: transparent; }
    .sidebar.closed .holo-user-card-bg::before, .sidebar.closed .holo-user-card-bg::after, .sidebar.closed .holo-premium-card-content { display: none !important; }
    .sidebar.closed .avatar-ring { inset: -4px; border-width: 2px; opacity: 1; border-style: solid; border-color: rgba(56, 189, 248, 0.8); animation: spinRing 4s linear infinite; box-shadow: 0 0 10px rgba(56,189,248,0.4); }
    .sidebar.closed #nav-user-img { width: 56px; height: 56px; border-width: 2px; border-color: #38bdf8; }
    .sidebar.closed #user-status-indicator { bottom: 0px; right: 0px; width: 14px; height: 14px; border-width: 2px; }
    .sidebar.closed .hide-on-closed { display: none !important; }
    .sidebar.closed .avatar-container { transform: scale(0.8); }
    .sidebar.closed .action-menu-grid { display: none !important; }
    .sidebar.closed .avatar-container:hover .profile-avatar-wrapper { transform: scale(0.8); opacity: 1; pointer-events: auto; }

    /* Menú Adaptativo */
    .menu-container { flex: 1; overflow-y: overlay; padding: 20px 12px; scrollbar-width: none; }
    .menu-container::-webkit-scrollbar { display: none; }
    .menu-link { display: flex; align-items: center; padding: 12px 18px; margin-bottom: 8px; border-radius: 50px; color: white; text-decoration: none; transition: 0.3s; font-weight: 300; white-space: nowrap; }
    .menu-link i { font-size: 22px; min-width: 24px; text-align: center; }
    .menu-link:hover, .menu-link.active { background: var(--sb-accent); transform: translateX(5px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); font-weight: 600; }

    /* Control de visibilidad al colapsar */
    .sidebar.closed .hide-on-closed { opacity: 0; visibility: hidden; width: 0; height: 0; margin: 0; padding: 0; }
    .sidebar.closed .menu-link { justify-content: center; padding: 12px 0; }
    .sidebar.closed .sidebar-user-card .user-actions { display: none; }
    .sidebar.closed #sidebar-logo { height: 40px; margin-bottom: 0.5rem; }

    /* Botón Hamburger Animado / Estilo unificado */
    .hamburger-menu { cursor: pointer; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 10px auto; position: relative; z-index: 60; border-radius: 50px; background: transparent; transition: 0.3s; }
    .hamburger-menu:hover { background: var(--sb-accent); box-shadow: 0 4px 15px rgba(0,0,0,0.1); transform: translateX(5px); }
    .hamburger-menu input { display: none; }
    .hamburger-menu svg { height: 2.2em; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); }
    .hamburger-menu .line { fill: none; stroke: #ffffff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); }
    .hamburger-menu .line-top-bottom { stroke-dasharray: 12 63; }
    .hamburger-menu input:checked + svg { transform: rotate(-45deg); }
    .hamburger-menu input:checked + svg .line-top-bottom { stroke-dasharray: 20 300; stroke-dashoffset: -32.42; }
    body.dark-mode .hamburger-menu .line { stroke: #cbd5e1; }

    /* --- LOGO Y CONTRASTES GLOBALES --- */
    #sidebar-logo { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); transition: all 0.3s ease; }
    body.dark-mode #sidebar-logo { filter: drop-shadow(0 2px 6px rgba(255,255,255,0.2)) brightness(1.2); }

    /* --- MOBILE NAVBAR --- */
    .mobile-navbar { display: none; }
    .mobile-hamburger { display: flex; position: relative; width: 3rem; height: 3rem; background: transparent; align-items: center; justify-content: center; cursor: pointer; }
    .mobile-hamburger input { display: none; }
    .mobile-hamburger svg { height: 2em; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); }
    .mobile-hamburger .line { fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); }
    .mobile-hamburger .line-top-bottom { stroke-dasharray: 12 63; }
    .mobile-hamburger input:checked + svg { transform: rotate(-45deg); }
    .mobile-hamburger input:checked + svg .line-top-bottom { stroke-dasharray: 20 300; stroke-dashoffset: -32.42; }

    /* --- OVERLAY NAVIGATION MOBILE --- */
    .overlay-navigation { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: hsla(222, 47%, 11%, 0.98); backdrop-filter: blur(10px); transform: translateY(-100%); display: flex; align-items: center; justify-content: center; }
    .overlay-slide-down { transition: all .4s ease-in-out; transform: translateY(0); }
    .overlay-slide-up { transition: all .8s ease-in-out; transform: translateY(-100%); }
    .overlay-navigation nav ul { display: flex; flex-direction: column; list-style: none; padding: 0; width: 100%; height: 100%; }
    .overlay-navigation nav ul li { flex: 1; display: flex; justify-content: center; align-items: center; overflow: hidden; transform: translateX(-100%); }
    @keyframes slide-in-nav-item-h { from { transform: translateX(-100%); } to { transform: translateX(0); } }
    @keyframes slide-in-nav-item-h-reverse { from { transform: translateX(0); } to { transform: translateX(-100%); } }
    .slide-in-nav-item { animation: slide-in-nav-item-h 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
    .slide-in-nav-item-reverse { animation: slide-in-nav-item-h-reverse 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
    .delay-0 { animation-delay: 0.1s; } .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.3s; } .delay-3 { animation-delay: 0.4s; } .delay-4 { animation-delay: 0.5s; } .delay-5 { animation-delay: 0.6s; } .delay-6 { animation-delay: 0.7s; }
    .overlay-navigation nav li a { color: #fff; text-transform: uppercase; font-family: 'Poppins', sans-serif; font-weight: 300; letter-spacing: 4px; text-decoration: none; font-size: 1.2rem; position: relative; }
    .overlay-navigation nav li a:after { content: attr(data-content); font-size: 0.6rem; transition: all .2s linear; opacity: 0; position: absolute; color: rgba(255,255,255,0.5); left: 0; right: 0; bottom: -20px; text-align: center; text-transform: none; letter-spacing: 0; }
    .overlay-navigation nav li a:hover:after { transform: translateY(5px); opacity: 1; }
    .overlay-navigation nav li:nth-of-type(1){background-color: rgba(30,41,59,0.5)}
    .overlay-navigation nav li:nth-of-type(2){background-color: rgba(59,130,246,0.5)}
    .overlay-navigation nav li:nth-of-type(3){background-color: rgba(16,185,129,0.5)}
    .overlay-navigation nav li:nth-of-type(4){background-color: rgba(245,158,11,0.5)}
    .overlay-navigation nav li:nth-of-type(5){background-color: rgba(239,68,68,0.5)}
    .overlay-navigation nav li:nth-of-type(6){background-color: rgba(139,92,246,0.5)}
    .overlay-navigation nav li:nth-of-type(7){background-color: rgba(15,23,42,0.5)}

    /* --- DECORADOR: CONTENEDOR DE MAPA --- */
    .map-container { --city-radius: 2rem; --city-sign-color-back: #00c080; --city-sign-color-font: #fff; --city-pin-size-font: 1.2rem; border-radius: 0.5em; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); line-height: 1; position: relative; width: 100%; aspect-ratio: 1; }
    .map-background { border-radius: inherit; left: 0; position: absolute; top: 0; width: 100%; }
    .map-cities { width: 100%; }
    .map-city { border-radius: var(--city-radius); left: calc(var(--x) * 1% - var(--city-radius)); padding: var(--city-radius); position: absolute; top: calc(var(--y) * 1% - var(--city-radius)); }
    .map-city::before { font-size: var(--city-pin-size-font); content: "•"; left: calc(-50% + var(--city-radius)); position: absolute; top: calc(-0.65em + var(--city-radius)); text-align: center; text-shadow: 0 1px 1px #000; width: 100%; }
    .map-city::after { font-size: var(--city-pin-size-font); clip-path: inset(-0.5em 0 0 0); content: "📍"; left: calc(-50% + var(--city-radius)); position: absolute; top: calc(-1em + var(--city-radius)); text-align: center; transition: all 300ms ease-out; width: 100%; z-index: var(--y); }
    .map-city__label { display: none; left: calc(-5em + 50%); position: absolute; text-align: center; width: 10em; z-index: 999; }
    .map-city__sign { align-items: center; background-color: var(--city-sign-color-back); border-radius: 0.2rem; border: 0.15em solid var(--city-sign-color-font); box-shadow: 0 0 3px #000; color: var(--city-sign-color-font); column-gap: 0.3em; display: flex; font-weight: 700; justify-content: center; margin: 0 auto; max-width: 100%; overflow: hidden; padding: 0.4em 0.6em 0.4em 0.3em; text-overflow: ellipsis; text-wrap: nowrap; width: max-content; }
    .map-city__sign::before { content: attr(data-icon); }
    .map-city:hover::after { clip-path: inset(-0.5em 0 0.5em 0); transform: translateY(0.5em); }
    .map-city:hover .map-city__label { animation: fadein 300ms forwards ease-out; display: block; }
    @keyframes fadein { 0% { opacity: 0; top: calc(var(--city-radius)); } 100% { opacity: 1; top: calc(var(--city-radius) + var(--city-pin-size-font) / 2); } }

    @media (max-width: 768px) {
        /* Ajustes de Contenedor en Móvil */
        main { margin-left: 0 !important; border-radius: 0 !important; margin-top: 0 !important; height: auto !important; }
    }

    /* --- MENÚ FLOTANTE MÓVIL (GLASSMORPHISM) --- */
    .menu {
      position: relative;
      margin: 16px auto 0 auto;
      flex-shrink: 0;
      width: calc(100% - 20px);
      max-width: 520px;
      backdrop-filter: blur(12px) saturate(180%) contrast(200%);
      -webkit-backdrop-filter: blur(12px) saturate(180%) contrast(200%);
      background: rgba(0, 122, 255, 0.404);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
      padding: 8px;
      border-radius: 99rem;
      display: flex;
      justify-content: center;
      gap: 8px;
      z-index: 50;
    }
    
    /* FIX: Forzar ocultamiento para evitar que 'display: flex' anule a Tailwind */
    .menu.hidden {
      display: none !important;
    }
    
    /* Asegurar que el menú móvil desaparezca completamente en PC */
    @media (min-width: 768px) {
      .menu { display: none !important; }
    }

    body.dark-mode .menu {
      background: rgba(15, 23, 42, 0.75); 
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .menu::after {
      content: ""; position: absolute; inset: 0; border-radius: inherit;
      box-shadow: inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4), inset -2px -2px 5px 2px rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(255, 255, 255, 0.2);
      pointer-events: none; z-index: -1;
    }
    
    .menu a, .menu button {
      display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0;
      color: rgba(255, 255, 255, 0.9); text-decoration: none; padding: 10px 6px; border-radius: 999rem;
      -webkit-tap-highlight-color: transparent; transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
      background: transparent; border: none; cursor: pointer;
    }
    
    .menu a:hover, .menu button:hover {
      background-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); color: rgba(0, 122, 255, 0.9);
      box-shadow: inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4), inset -2px -1px 5px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(255, 255, 255, 0.2);
    }
    
    .menu a svg, .menu button svg { width: 1.4rem; height: 1.4rem; }
    .menu a span, .menu button span { font-size: 0.7rem; font-weight: 600; line-height: 1; margin-top: 4px; }
    .menu a.active, .menu button.active { background: rgba(237, 237, 237, 0.6); color: rgba(0, 122, 255, 0.9); }
    .menu a:active, .menu button:active { transform: scale(0.98); }
    
    .vertical-menu {
      position: absolute !important;
      flex-direction: column; 
      width: auto; 
      min-width: 100px; 
      padding: 8px; 
      border-radius: 20px; 
      top: calc(100% + 8px) !important;
    }
    .vertical-menu a { flex: none; width: 100%; border-radius: 12px; padding: 10px 15px; }

    /* Pie de Página Sidebar */
    .sidebar-footer {
        background: rgba(0,0,0,0.1);
        border-top: 1px solid rgba(255,255,255,0.1);
        padding: 10px 10px;
        text-align: center;
    }
    /* Contenido Principal */
    main {
        flex: 1;
        margin: 2.5vh 20px 2.5vh 0;
        background: white;
        border-radius: 0 30px 30px 0;
        border: 1px solid rgba(226, 232, 240, 1);
        border-left: none;
        box-shadow: 
        15px 15px 35px rgba(0, 0, 0, 0.05), 
        inset 0 2px 10px rgba(0, 0, 0, 0.02);
        overflow-y: auto;
        position: relative;
    }

    /* --- COMPONENTE: TARJETA DE USUARIO B2B (MÓDULO EMPRESAS) --- */
    .b2b-user-card {
        position: relative;
        background: #ffffff;
        border-radius: 1.5rem;
        border: 1px solid rgba(226, 232, 240, 1); /* border-slate-200 */
        padding: 1.5rem;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        overflow: hidden;
        z-index: 1;
    }
    .b2b-user-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        background: linear-gradient(90deg, #3b82f6, #8b5cf6);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .b2b-user-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
        border-color: rgba(203, 213, 225, 1); /* border-slate-300 */
    }
    .b2b-user-card:hover::before {
        opacity: 1;
    }
    
    .b2b-user-avatar-wrapper {
        position: relative;
        width: 4rem;
        height: 4rem;
        border-radius: 1rem;
        padding: 0.125rem;
        background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
        flex-shrink: 0;
    }
    .b2b-user-avatar {
        width: 100%;
        height: 100%;
        border-radius: 0.875rem;
        object-fit: cover;
        background: #f8fafc;
        border: 2px solid #ffffff;
    }
    .b2b-status-dot {
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        background-color: #cbd5e1; /* Offline por defecto */
        transition: background-color 0.3s;
    }
    .b2b-status-dot.online { background-color: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); }
    .b2b-status-dot.busy { background-color: #f59e0b; }
    
    .b2b-user-info { flex: 1; min-width: 0; }
    .b2b-user-name { font-size: 1.125rem; font-weight: 900; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
    .b2b-user-role { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-top: 0.25rem; }
    
    .b2b-user-contact { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; padding-top: 1rem; border-top: 1px dashed #e2e8f0; }
    .b2b-contact-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #475569; font-weight: 600; transition: color 0.2s; text-decoration: none; cursor: pointer; }
    .b2b-contact-item:hover { color: #2563eb; }
    .b2b-contact-item i { color: #94a3b8; font-size: 1.1rem; }
    
    .b2b-user-actions { display: flex; gap: 0.5rem; margin-top: auto; }
    .b2b-btn-action { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.6rem; border-radius: 0.75rem; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; transition: all 0.2s; background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; cursor: pointer; }
    .b2b-btn-action:hover { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; transform: translateY(-1px); }
    .b2b-btn-action.primary { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
    .b2b-btn-action.primary:hover { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }

    /* --- INVERSIÓN MODO OSCURO PARA CARDS DE USUARIO --- */
    body.dark-mode .b2b-user-card { background: #1e293b; border-color: #334155; }
    body.dark-mode .b2b-user-card:hover { border-color: #475569; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4); }
    
    body.dark-mode .b2b-user-avatar-wrapper { background: linear-gradient(135deg, #334155, #1e293b); }
    body.dark-mode .b2b-user-avatar { border-color: #1e293b; background: #0f172a; }
    body.dark-mode .b2b-status-dot { border-color: #1e293b; background-color: #475569; }
    
    body.dark-mode .b2b-user-name { color: #f8fafc; }
    body.dark-mode .b2b-user-role { color: #94a3b8; }
    
    body.dark-mode .b2b-user-contact { border-top-color: #334155; }
    body.dark-mode .b2b-contact-item { color: #cbd5e1; }
    body.dark-mode .b2b-contact-item:hover { color: #60a5fa; }
    body.dark-mode .b2b-contact-item i { color: #64748b; }
    
    body.dark-mode .b2b-btn-action { background: #0f172a; color: #cbd5e1; border-color: #334155; }
    body.dark-mode .b2b-btn-action:hover { background: #1e293b; color: #f8fafc; border-color: #475569; }
    body.dark-mode .b2b-btn-action.primary { background: rgba(37, 99, 235, 0.1); color: #93c5fd; border-color: rgba(37, 99, 235, 0.2); }
    body.dark-mode .b2b-btn-action.primary:hover { background: rgba(37, 99, 235, 0.2); border-color: rgba(37, 99, 235, 0.4); }