@import '_content/Z.Blazor.Diagrams/Z.Blazor.Diagrams.ezdqu7jd9f.bundle.scp.css';

/* _content/ProyectEC/Components/Layout/EmptyLayout.razor.rz.scp.css */
.login-page-background[b-26yht26f3g] {
    background-color: #f0f2f5; /* Fondo gris suave */
    display: flex;
    justify-content: center;   /* Centra horizontalmente */
    align-items: center;       /* Centra verticalmente */
    min-height: 100vh;         /* Ocupa toda la altura de la pantalla */
    padding: 2rem;             /* Añade un poco de espacio en bordes */
}
/* _content/ProyectEC/Components/Layout/FormLayout.razor.rz.scp.css */

.form-page-wrapper[b-13zax8frip] {
    display: flex;
    flex-direction: column; 
    align-items: center;   
    width: 100%;
    position: relative;    
    min-height: 100vh;     
    background-color: #f8f9fa; 
    padding-bottom: 4rem;  
}


.form-banner-container[b-13zax8frip] {
    width: 100%;
    max-width: 1000px; 
    position: absolute; 
    
    
    top: 1.5rem; 
    
    z-index: 1; 
    
    
    border-radius: 16px; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden; 
    
    
    left: 50%;
    transform: translateX(-50%);
}


.form-card-unified[b-13zax8frip] {
    background-color: #ffffff;
    width: 100%;
    max-width: 700px; 
    padding: 3rem;
    border-radius: 16px;
    
    
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 
                0 5px 15px rgba(0, 0, 0, 0.05);
    
    border: 1px solid rgba(0, 0, 0, 0.05);

    
    position: relative; 
    z-index: 2;         
    
    
   
    margin-top: 2rem;  
}


@media (max-width: 768px) {
    .form-banner-container[b-13zax8frip] {
        width: 95%;
        height: 150px;
        top: 4rem;
    }
    .form-card-unified[b-13zax8frip] {
        padding: 1.5rem;
        max-width: 90%;
        margin-top: 6rem;
    }
}
/* _content/ProyectEC/Components/Layout/LayoutVertical.razor.rz.scp.css */
html[b-1zpfiw39ne],
body[b-1zpfiw39ne] {
    height: auto;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto !important;

    overflow-x: hidden;
    background-color: #f8f9fa;
    font-family: 'Montserrat', sans-serif;
}




#wrapper[b-1zpfiw39ne] {
    display: flex;
    width: 100%;
    min-height: 100vh;

    overflow: visible !important;

}





#page-content-wrapper[b-1zpfiw39ne] {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible !important;

}




.top-navbar[b-1zpfiw39ne] {

    flex-shrink: 0;
    min-height: 60px;

}



.main-scroll[b-1zpfiw39ne] {
    flex-grow: 1;
    height: auto !important;
    overflow: visible !important;
    position: relative;
}

@media (max-width: 768px) {
    #sidebar-wrapper[b-1zpfiw39ne] {
        display: none;
    }

    #sidebar-wrapper.toggled[b-1zpfiw39ne] {
        display: flex;
        position: absolute;
    }
}

#sidebar-wrapper .text-white-50[b-1zpfiw39ne] {
    flex-shrink: 0;

}


.parallax-hero-section[b-1zpfiw39ne],
.content-section[b-1zpfiw39ne],
.container[b-1zpfiw39ne] {

    overflow: visible !important;


    height: auto !important;

}



body[b-1zpfiw39ne]::before {

    content: "";

    position: fixed;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=1920&auto=format&fit=crop') no-repeat center center;

    background-size: cover;

    z-index: -2;

    filter: brightness(0.6);

}



.d-flex#wrapper[b-1zpfiw39ne] {

    width: 100%;

    height: 100vh;

    overflow: hidden;

    position: relative;

}





#sidebar-wrapper[b-1zpfiw39ne] {
    position: fixed;
    height: 100vh;
    width: 260px;
    z-index: 2000;


    overflow: visible !important;


    display: flex;
    flex-direction: column;


    background: rgba(0, 51, 102, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.3);

    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}



#sidebar-wrapper.toggled[b-1zpfiw39ne] {

    transform: translateX(-100%);

}





.top-navbar[b-1zpfiw39ne] {

    position: fixed;

    top: 0;
    right: 0;

    height: 60px;

    left: 260px;



    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(5px);

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0;

    z-index: 1050;



    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

}



.top-navbar.toggled[b-1zpfiw39ne] {

    left: 0;

}





#page-content-wrapper[b-1zpfiw39ne] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding-top: 40px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    background-color: rgba(243, 246, 249, 0.96);
    z-index: 1;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;

}




.full-height-section[b-1zpfiw39ne] {
    height: calc(100vh - 60px);
    scroll-snap-align: start;
    position: relative;

}



.main-content-scrollable[b-1zpfiw39ne] {
    padding: 0px;

}


.sidebar-header-custom[b-1zpfiw39ne] {
    padding: 15px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}



.glass-btn[b-1zpfiw39ne] {

    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
    flex-shrink: 0;
    backdrop-filter: blur(5px);

}

.glass-btn:hover[b-1zpfiw39ne] {
    background-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.glass-btn[b-1zpfiw39ne]  button,
.glass-btn[b-1zpfiw39ne]  .btn {
    background: transparent !important;
    border: none !important;
    width: 100%;
    height: 100%;
    color: white !important;
}

.glass-btn i[b-1zpfiw39ne],
.glass-btn[b-1zpfiw39ne]  i,
.glass-btn[b-1zpfiw39ne]  svg {
    color: white !important;
    font-size: 1.1rem;
}

.glass-btn[b-1zpfiw39ne]  .badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ff3b30 !important;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(25%, -25%);
    font-size: 0.65rem;
}



.avatar-text[b-1zpfiw39ne] {
    font-weight: 600;
    font-size: 1.1rem;
    color: white;
}


.list-group-flush[b-1zpfiw39ne] {
    
    overflow-y: auto !important;
    overflow-x: hidden;
    flex-grow: 1;
    padding-top: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}


.sidebar-link[b-1zpfiw39ne],
[b-1zpfiw39ne] .sidebar-link {
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    display: flex;
    align-tems: center;
    gap: 12px;
    transition: 0.2s;
    border-left: 3px solid transparent;
    font-size: 0.95rem;
    width: 100%;
    cursor: pointer;

}





.sidebar-link:hover[b-1zpfiw39ne],
.sidebar-link.active[b-1zpfiw39ne],
[b-1zpfiw39ne] .sidebar-link.active {
    background: rgba(255, 255, 255, 0.1);
    color: white !important;
    border-left-color: #4facfe;

}

.sidebar-link:hover[b-1zpfiw39ne],
.sidebar-link.active[b-1zpfiw39ne] {
    background: rgba(255, 255, 255, 0.1);
    color: white !important;
    border-left-color: #4facfe;
}




.sub-menu[b-1zpfiw39ne] {
    background: rgba(0, 0, 0, 0.25);
}

.sub-menu a[b-1zpfiw39ne] {
    padding: 10px 10px 10px 58px;
    display: block;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.2s;
}

.sub-menu a:hover[b-1zpfiw39ne] {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}



.custom-dropdown-menu[b-1zpfiw39ne] {
    border-radius: 16px;
    animation: fadeIn-b-1zpfiw39ne 0.2s ease-out;

}


.dropdown-menu[b-1zpfiw39ne] {
    position: absolute;
    z-index: 9999 !important;

}

.hover-danger[b-1zpfiw39ne] {
    transition: all 0.2s;
    color: #555;
    background-color: white;

}



.hover-danger:hover[b-1zpfiw39ne] {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545 !important;

}




.btn.rounded-pill[b-1zpfiw39ne] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.apps-dropdown[b-1zpfiw39ne] {
    width: 300px;
    padding: 15px;
}

.apps-grid[b-1zpfiw39ne] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.app-item[b-1zpfiw39ne] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #555;
    font-size: 0.75rem;
    padding: 10px 5px;
    border-radius: 8px;
    transition: 0.2s;
    object-fit: contain;
}

.app-item:hover[b-1zpfiw39ne] {
    background-color: #f0f2f5;
    color: #003366;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.app-item i[b-1zpfiw39ne] {
    font-size: 1.8rem;
    margin-bottom: 5px;
}



@keyframes fadeIn-b-1zpfiw39ne {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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



.btn-hamburger[b-1zpfiw39ne] {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: #003366;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.btn-hamburger:hover[b-1zpfiw39ne] {
    background-color: rgba(0, 51, 102, 0.1);
    border-radius: 5px;
}


[b-1zpfiw39ne]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[b-1zpfiw39ne]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}


.user-pill-hover:hover[b-1zpfiw39ne] {
    background-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.text-truncate[b-1zpfiw39ne] {
    max-width: 140px;
}
/* _content/ProyectEC/Components/Pages/Admin/GestionUsuarios.razor.rz.scp.css */

.approval-layout[b-ykfzogzjuo] {
    display: flex;
    height: calc(100vh - 60px);
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}


.requests-sidebar[b-ykfzogzjuo] {
    width: 360px;
    background: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
}

.sidebar-header[b-ykfzogzjuo] {
    padding: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    flex-shrink: 0;
}


.search-wrapper[b-ykfzogzjuo] { position: relative; margin-top: 0.5rem; }
.search-icon[b-ykfzogzjuo] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #adb5bd; font-size: 0.9rem; pointer-events: none;
}
.search-input[b-ykfzogzjuo] {
    width: 100%; padding: 8px 12px 8px 35px;
    border-radius: 8px; border: 1px solid #e9ecef;
    background-color: #f8f9fa; font-size: 0.9rem; color: #495057; transition: all 0.2s ease;
}
.search-input:focus[b-ykfzogzjuo] {
    outline: none; background-color: #ffffff; border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}


.filter-tabs[b-ykfzogzjuo] {
    display: flex; gap: 4px; background-color: #f1f3f5; padding: 4px; border-radius: 8px; margin-top: 12px;
}
.filter-tab[b-ykfzogzjuo] {
    flex: 1; border: none; background: transparent; padding: 6px;
    font-size: 0.75rem; font-weight: 600; color: #6c757d;
    border-radius: 6px; transition: all 0.2s ease; text-align: center; cursor: pointer;
}
.filter-tab:hover[b-ykfzogzjuo] { color: #212529; background-color: rgba(255, 255, 255, 0.5); }
.filter-tab.active[b-ykfzogzjuo] { background-color: #ffffff; color: #0d6efd; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }


.requests-list[b-ykfzogzjuo] { flex-grow: 1; overflow-y: auto; padding: 0.5rem; }

.request-item[b-ykfzogzjuo] {
    display: flex; align-items: center; padding: 12px; margin-bottom: 4px;
    border-radius: 8px; cursor: pointer; transition: background 0.2s; border: 1px solid transparent;
}
.request-item:hover[b-ykfzogzjuo] { background-color: #f8f9fa; }
.request-item.active[b-ykfzogzjuo] { background-color: #f0f7ff; border-left: 4px solid #0d6efd; }

.avatar-small[b-ykfzogzjuo] { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-right: 12px; flex-shrink: 0; }

.status-dot-small[b-ykfzogzjuo] { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.status-dot-small.bg-danger[b-ykfzogzjuo] { background-color: #dc3545; }
.status-dot-small.bg-warning[b-ykfzogzjuo] { background-color: #ffc107; }
.status-dot-small.bg-success[b-ykfzogzjuo] { background-color: #198754; }

.request-detail-panel[b-ykfzogzjuo] {
    flex-grow: 1; display: flex; flex-direction: column;
    background-color: #f5f7fa; overflow: hidden; padding: 1rem;
    padding-top: 2rem;
}

.detail-content[b-ykfzogzjuo] {
    background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
}

.detail-header[b-ykfzogzjuo] {
    padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: flex; align-items: center;
}
.avatar-large[b-ykfzogzjuo] { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-right: 1rem; }


.admin-content-grid[b-ykfzogzjuo] { flex: 1; display: flex; overflow: hidden; }


.col-info[b-ykfzogzjuo] { 
    width: 50%; 
    padding: 2rem; 
    overflow-y: auto; 
    border-right: 1px solid #f0f0f0; 
    
    
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

.col-info[b-ykfzogzjuo]::-webkit-scrollbar { 
    display: none; 
}

.section-label[b-ykfzogzjuo] { display: block; font-size: 0.75rem; font-weight: 800; color: #adb5bd; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
.file-card[b-ykfzogzjuo] { transition: all 0.2s; border: 1px solid #eee; }
.file-card:hover[b-ykfzogzjuo] { background-color: #f8f9fa; border-color: #ddd; }


.col-chat[b-ykfzogzjuo] { width: 50%; display: flex; flex-direction: column; background-color: #fff; }

.chat-header[b-ykfzogzjuo] {
    padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f0;
    font-weight: 700; color: #6c757d; font-size: 0.8rem; text-transform: uppercase;
}

.chat-body[b-ykfzogzjuo] {
    flex: 1; overflow-y: auto; padding: 1.5rem; background-color: #f8f9fa;
    display: flex; flex-direction: column; gap: 1rem;

    
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chat-body[b-ykfzogzjuo]::-webkit-scrollbar {
    display: none;
}

.chat-footer[b-ykfzogzjuo] { padding: 1rem; background: white; border-top: 1px solid #f0f0f0; }


.chat-message[b-ykfzogzjuo] { display: flex; flex-direction: column; max-width: 85%; }
.message-content[b-ykfzogzjuo] { padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; position: relative; }


.align-self-end .message-content[b-ykfzogzjuo] { background-color: #0d6efd; color: white; border-bottom-right-radius: 2px; }
.align-self-end .msg-meta[b-ykfzogzjuo] { text-align: right; }


.align-self-start .message-content[b-ykfzogzjuo] { background-color: white; border: 1px solid #e0e0e0; color: #333; border-bottom-left-radius: 2px; }

.msg-meta[b-ykfzogzjuo] { font-size: 0.7rem; margin-top: 4px; opacity: 0.7; }


[b-ykfzogzjuo]::-webkit-scrollbar { width: 5px; height: 5px; }
[b-ykfzogzjuo]::-webkit-scrollbar-track { background: transparent; }
[b-ykfzogzjuo]::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }
[b-ykfzogzjuo]::-webkit-scrollbar-thumb:hover { background: #ccc; }



.calendar-grid-header[b-ykfzogzjuo] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 700;
    color: #adb5bd;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.calendar-grid[b-ykfzogzjuo] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px; 
}

.calendar-day[b-ykfzogzjuo] {
    min-height: 120px; 
    position: relative;
    transition: transform 0.2s;
}

.calendar-day:hover[b-ykfzogzjuo] {
    background-color: #fcfcfc;
}

.calendar-day.empty[b-ykfzogzjuo] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.day-number[b-ykfzogzjuo] {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
}


.event-pill[b-ykfzogzjuo] {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    cursor: default;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}









    .dashboard-container[b-ykfzogzjuo] {
        height: 100vh;
        max-height: 100vh;
        background-color: #f8f9fa;
        overflow: hidden; 
    }

    
    .sidebar[b-ykfzogzjuo] {
        width: 360px; 
        flex-shrink: 0;
    }
    
    .sidebar-list .user-card[b-ykfzogzjuo] {
        transition: all 0.2s ease;
        border-left: 3px solid transparent;
    }

    .sidebar-list .user-card:hover[b-ykfzogzjuo] {
        background-color: #f1f3f5 !important;
    }

    .sidebar-list .user-card.selected[b-ykfzogzjuo] {
        background-color: #eef2ff !important; 
        border-left-color: #0d6efd; 
    }

   
    .filter-chip[b-ykfzogzjuo] {
        border: 1px solid #e9ecef;
        background: white;
        color: #6c757d;
        border-radius: 6px;
        padding: 4px 8px;
        font-size: 0.7rem;
        font-weight: 600;
        transition: all 0.2s;
    }

    .filter-chip.active[b-ykfzogzjuo] {
        background-color: #343a40;
        color: white;
        border-color: #343a40;
    }
    
    .filter-chip:hover:not(.active)[b-ykfzogzjuo] {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }

    
    .view-switcher .switcher-btn[b-ykfzogzjuo] {
        border: none;
        background: transparent;
        padding: 8px;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 600;
        color: #6c757d;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .view-switcher .switcher-btn.active[b-ykfzogzjuo] {
        background-color: white;
        color: #212529;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    .view-switcher .switcher-btn:hover:not(.active)[b-ykfzogzjuo] {
        color: #212529;
        background-color: rgba(0,0,0,0.03);
    }

   
    .fade-in[b-ykfzogzjuo] {
        animation: fadeIn-b-ykfzogzjuo 0.3s ease-in-out;
    }
    @keyframes fadeIn-b-ykfzogzjuo {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    
    .custom-scroll[b-ykfzogzjuo]::-webkit-scrollbar { width: 5px; }
    .custom-scroll[b-ykfzogzjuo]::-webkit-scrollbar-track { background: transparent; }
    .custom-scroll[b-ykfzogzjuo]::-webkit-scrollbar-thumb { background-color: #ced4da; border-radius: 4px; }
    .custom-scroll:hover[b-ykfzogzjuo]::-webkit-scrollbar-thumb { background-color: #adb5bd; }

    .ls-1[b-ykfzogzjuo] { letter-spacing: 1px; }
    .cursor-pointer[b-ykfzogzjuo] { cursor: pointer; }

   
.filter-tabs[b-ykfzogzjuo] {
    display: flex; gap: 4px; background-color: #f1f3f5; padding: 4px; border-radius: 8px; margin-top: 12px;
}
.filter-tab[b-ykfzogzjuo] {
    flex: 1; border: none; background: transparent; padding: 6px;
    font-size: 0.75rem; font-weight: 600; color: #6c757d;
    border-radius: 6px; transition: all 0.2s ease; text-align: center; cursor: pointer;
}
.filter-tab:hover[b-ykfzogzjuo] { color: #212529; background-color: rgba(255, 255, 255, 0.5); }
.filter-tab.active[b-ykfzogzjuo] { background-color: #ffffff; color: #0d6efd; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }




    .success-toast-container[b-ykfzogzjuo] {
        position: fixed;
        top: 2rem;
        right: 2rem;
        z-index: 2050;
        pointer-events: none;
    }

    
    .success-card[b-ykfzogzjuo] {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-left: 5px solid #198754;
        border-radius: 12px;
        padding: 1rem 1.5rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        gap: 1rem;
        transform: translateY(-20px);
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

  
    .success-card.show[b-ykfzogzjuo] {
        transform: translateY(0);
        opacity: 1;
    }

   
    .icon-box-success[b-ykfzogzjuo] {
        width: 40px;
        height: 40px;
        background-color: #d1e7dd;
        color: #198754;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    .border-dashed[b-ykfzogzjuo] {
        border-style: dashed !important;
    }
/* _content/ProyectEC/Components/Pages/Auth/ForgotPassWord.razor.rz.scp.css */

[b-rmwlhzjo6d] body {
    background-color: #f0f2f5; 
    margin: 0;
    padding-top: 40px;
    padding-bottom: 40px;
}


.login-container[b-rmwlhzjo6d] {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}


.login-card[b-rmwlhzjo6d] {
    background-color: #ffffff;
    padding: 40px;
    padding-top: 60px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}


.login-header[b-rmwlhzjo6d] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
}

.app-logo[b-rmwlhzjo6d] {
    width: 120px; 
    height: auto;
    margin-right: 0;
}


.login-subtitle[b-rmwlhzjo6d] {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 8px;
    text-align: center;
}

.login-title[b-rmwlhzjo6d] {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}


[b-rmwlhzjo6d] .login-input {
    height: 48px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 0 15px;
    font-size: 16px;
}


.login-btn[b-rmwlhzjo6d] {
    height: 48px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}


.signup-prompt[b-rmwlhzjo6d] {
    text-align: center;
    margin-top: 25px;
    color: #6c757d;
}

.signup-link[b-rmwlhzjo6d] {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 600;
}
/* _content/ProyectEC/Components/Pages/Auth/Login.razor.rz.scp.css */

[b-vdyo996o5h] body {
    background-color: #f0f2f5; 
    display: flex;
    justify-content: center;   
    align-items: center;      
    min-height: 100vh;
    margin: 0;
}



.login-container[b-vdyo996o5h] {
    width: 100%;
    max-width: 420px; 
}


.login-card[b-vdyo996o5h] {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}


.login-header[b-vdyo996o5h] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
}

.app-logo[b-vdyo996o5h] {
    width: 240px;
    height: auto;
    margin-right: 0;
}


.login-subtitle[b-vdyo996o5h] {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 8px;
    text-align: center;
}

.login-title[b-vdyo996o5h] {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}


[b-vdyo996o5h] .login-input {
    height: 48px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 0 15px;
    font-size: 16px;
}


.login-options[b-vdyo996o5h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
}
.remember-me-text[b-vdyo996o5h] { color: #6c757d; }
.forgot-password-link[b-vdyo996o5h] {

    color: #011F41; 
    text-decoration: none;
    font-weight: 500;
}
.forgot-password-link:hover[b-vdyo996o5h] { text-decoration: underline; }


.login-btn[b-vdyo996o5h] {
    height: 48px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
}
.google-login-btn[b-vdyo996o5h] {
    height: 48px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid #dadce0;
    color: #3c4043;
    background-color: #ffffff;
}
.google-logo-icon[b-vdyo996o5h] { width: 20px; height: 20px; }


.signup-prompt[b-vdyo996o5h] {
    text-align: center;
    margin-top: 25px;
    color: #6c757d;
}
.signup-link[b-vdyo996o5h] {

    color: #011F41; 
    text-decoration: none;
    font-weight: 600;
}
.signup-link:hover[b-vdyo996o5h] { text-decoration: underline; }
/* _content/ProyectEC/Components/Pages/Auth/MiPerfil.razor.rz.scp.css */

.montserrat-font[b-b5q9eb3fel] {
    font-family: 'Montserrat', sans-serif;
    color: #011F41;
}


.profile-banner-wide[b-b5q9eb3fel] {
    height: 250px;
    background: #011F41;
}


.avatar-wide[b-b5q9eb3fel],
.avatar-initials-wide[b-b5q9eb3fel] {

    width: 150px;
    height: 150px;
    border-radius: 1rem;
    border: 6px solid #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    object-fit: cover;
    background-color: white;
}

.avatar-initials-wide[b-b5q9eb3fel] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    font-weight: 700;
}


.status-dot[b-b5q9eb3fel] {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 3px solid white;
}


.data-item label[b-b5q9eb3fel] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #8898aa;
    font-weight: 700;
    margin-bottom: 0.4rem;
    letter-spacing: 0.5px;
}

.data-item div[b-b5q9eb3fel] {
    font-size: 1.15rem;
    color: #1a1a1a;
    font-weight: 500;
}

.data-box label[b-b5q9eb3fel] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: 700;
}

.data-box .fw-bold[b-b5q9eb3fel] {
    font-size: 1rem;
    color: #003366;
}


.boss-circle[b-b5q9eb3fel] {
    width: 60px;
    height: 60px;
    background-color: white;
    color: #003366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
}


.btn-white[b-b5q9eb3fel] {
    background: white;
    transition: transform 0.2s;
}

.btn-white:hover[b-b5q9eb3fel] {
    transform: translateY(-2px);
}


.avatar-initials-wide[b-b5q9eb3fel] {
    width: 120px;
    height: 120px;
    border-radius: 20px;
}

.status-dot[b-b5q9eb3fel] {
    width: 18px;
    height: 18px;
    border: 3px solid white;
    border-radius: 50%;
    position: absolute;
    bottom: -5px;
    right: -5px;
    z-index: 3;
}

.data-item label[b-b5q9eb3fel] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6c757d;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.data-box[b-b5q9eb3fel] {
    border: 1px solid #f0f0f0;
}


.border-start-md[b-b5q9eb3fel] {
    border-left: 1px solid #dee2e6;
}

@media (max-width: 768px) {
    .border-start-md[b-b5q9eb3fel] {
        border-left: none;
        border-top: 1px solid #dee2e6;
        padding-top: 1rem;
        padding-left: 0 !important;
    }
}
/* _content/ProyectEC/Components/Pages/Auth/RegisterLogin.razor.rz.scp.css */

[b-j5y71h7dnz] body {
  background-color: #f0f2f5; 
  margin: 0;
    padding-top: 40px;    
    padding-bottom: 40px; 
} 

.login-container[b-j5y71h7dnz] {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;


    width: 100%;
    max-width: 420px;
}





.login-header[b-j5y71h7dnz] {
    display: flex;
    justify-content: center; 
    align-items: center;
    margin-bottom: 25px;    
    padding-bottom: 25px;    
    border-bottom: 1px solid #e0e0e0; 
}

.app-logo[b-j5y71h7dnz] {
    width: 240px;  
    height: auto;    
    margin-right: 0;
}


.login-card[b-j5y71h7dnz] {
    background-color: #ffffff;
    padding: 40px; 
    padding-top: 60px; 
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.app-name[b-j5y71h7dnz] {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}


.login-subtitle[b-j5y71h7dnz] {
    text-align: center;
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 8px;
}

.login-title[b-j5y71h7dnz] {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}


[b-j5y71h7dnz] .login-input {
    height: 48px;
    border-radius: 8px;
    border: 1px solid #e0e0e0; 
    padding: 0 15px;
    font-size: 16px;
}

[b-j5y71h7dnz] .login-input::placeholder {
    color: #a0a0a0;
}

.login-options[b-j5y71h7dnz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
}

.remember-me-text[b-j5y71h7dnz] {
    color: #6c757d;
}

.forgot-password-link[b-j5y71h7dnz] {
    color: var(--bs-primary); 
    text-decoration: none;
    font-weight: 500;
}

.forgot-password-link:hover[b-j5y71h7dnz] {
    text-decoration: underline;
}


.login-btn[b-j5y71h7dnz] {
    height: 48px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}


.google-login-btn[b-j5y71h7dnz] {
    height: 48px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid #dadce0; 
    color: #3c4043;
    background-color: #ffffff;
}

.google-login-btn:hover[b-j5y71h7dnz] {
    background-color: #f8f9fa;
}

.google-logo-icon[b-j5y71h7dnz] {
    width: 20px; 
    height: 20px;
}


.signup-prompt[b-j5y71h7dnz] {
    text-align: center;
    margin-top: 25px;
    color: #6c757d;
}

.signup-link[b-j5y71h7dnz] {
    color: var(--bs-primary); 
    text-decoration: none;
    font-weight: 600;
}

.signup-link:hover[b-j5y71h7dnz] {
    text-decoration: underline;
}
/* _content/ProyectEC/Components/Pages/Auth/ResetPassword.razor.rz.scp.css */

[b-1ufsgnpszt] body {
    background-color: #f0f2f5; 
    margin: 0;
    padding-top: 40px;
    padding-bottom: 40px;
}


.login-container[b-1ufsgnpszt] {
    width: 100%;
    max-width: 420px; 
    margin-left: auto;
    margin-right: auto;
}


.login-card[b-1ufsgnpszt] {
    background-color: #ffffff;
    padding: 40px;
    padding-top: 60px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}


.login-header[b-1ufsgnpszt] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
}

.app-logo[b-1ufsgnpszt] {
    width: 120px; 
    height: auto;
    margin-right: 0;
}


.login-subtitle[b-1ufsgnpszt] {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 8px;
    text-align: center;
}

.login-title[b-1ufsgnpszt] {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}


[b-1ufsgnpszt] .login-input {
    height: 48px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 0 15px;
    font-size: 16px;
}


.login-btn[b-1ufsgnpszt] {
    height: 48px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}


.signup-prompt[b-1ufsgnpszt] {
    text-align: center;
    margin-top: 25px;
    color: #6c757d;
}

.signup-link[b-1ufsgnpszt] {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 600;
}
/* _content/ProyectEC/Components/Pages/BuzonPage/Buzon.razor.rz.scp.css */




.buzon-form-banner[b-fho5o83p08] {
    
    background-image: url('/images/buzon-banner.jpg'); 
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%; 
    filter: brightness(0.8); 
}




.form-label-sm[b-fho5o83p08] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8898aa;
    font-weight: 700;
    margin-bottom: 0.5rem;
}


.modern-input[b-fho5o83p08] {
    border: 1px solid #e9ecef;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    color: #495057;
    transition: all 0.2s ease;
    box-shadow: none;
    resize: none; 
}


.modern-input:focus[b-fho5o83p08] {
    background-color: #ffffff;
    border-color: var(--saru-blue, #0a2342);
    box-shadow: 0 0 0 4px rgba(10, 35, 66, 0.05);
    color: #0a2342;
}


select.modern-input[b-fho5o83p08] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    appearance: none;
}


.btn-modern-submit[b-fho5o83p08] {
    background-color: var(--saru-blue, #0a2342);
    border: none;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-modern-submit:hover[b-fho5o83p08] {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(10, 35, 66, 0.2) !important;
    background-color: #0f2d52;
}

.btn-modern-submit:active[b-fho5o83p08] {
    transform: translateY(0);
}
/* _content/ProyectEC/Components/Pages/Capacitaciones/ZonaCapacitaciones.razor.rz.scp.css */

.hero-bg[b-i22qoe47dc] {
    background-color: #011F41;
    background-image: linear-gradient(rgba(1, 31, 65, 0.65), rgba(1, 31, 65, 0.8)), 
                      url('/images/ResponsabilidadSocial/GS Sesión Meditación.jpg');
    background-size: cover;
    background-position: center;
    color: white;
}


.hover-lift[b-i22qoe47dc] {
    transition: transform 0.2s, box-shadow 0.2s;
}

.hover-lift:hover[b-i22qoe47dc] {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.icon-mask[b-i22qoe47dc] {
    width: 40px;
    height: 40px;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: #E9AC2E; 
}

.btn-white-glass[b-i22qoe47dc] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    transition: all 0.3s ease;
}

.btn-white-glass:hover[b-i22qoe47dc] {
    background: rgba(255, 255, 255, 0.9);
    color: #011F41;
    transform: translateY(-2px);
}

.btn-solicitar[b-i22qoe47dc] {
    color: #011F41;
    border: 2px solid #011F41;
    background-color: transparent;
    transition: all 0.3s ease;
}

.btn-solicitar:hover[b-i22qoe47dc] {
    background-color: #011F41;
    color: #ffffff;
}

.card-solicitud[b-i22qoe47dc] {
    border: 2px solid rgba(1, 31, 65, 0.1);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}
/* _content/ProyectEC/Components/Pages/CelebracionesPage/Celebraciones.razor.rz.scp.css */
.grid-catalogo[b-2wnjaae0lw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    width: 100%;
    justify-content: start;
    padding: 1rem;
}

.card-adaptable[b-2wnjaae0lw] {
    width: 100%;
    max-width: 400px
}
.text-rosa[b-2wnjaae0lw] {
    color: #f454a4 !important;
}
.text-azulSaru[b-2wnjaae0lw] {
    color: #0a2342 !important;
}
.asana-card[b-2wnjaae0lw] {
    background-color: #ffffff;
    border: none !important; 
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    overflow: hidden;
}
.asana-card:hover[b-2wnjaae0lw] {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}
.asana-card:hover .icon-container[b-2wnjaae0lw] { transform: scale(1.1); }
.btn-outline-primary:hover[b-2wnjaae0lw]{
    background-color: #0a2342;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
    
}
.btn-outline-primary:hover i[b-2wnjaae0lw] {
    color: #ffffff !important;
}
.btn-soft[b-2wnjaae0lw] {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #e9ecef;
    font-weight: 500;
    transition: all 0.2s;
}
.btn-soft:hover[b-2wnjaae0lw], .btn-soft:focus[b-2wnjaae0lw], .show > .btn-soft.dropdown-toggle[b-2wnjaae0lw] {
    background-color: #e2e6ea;
    color: #212529;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    transform: translateY(-1px);
}
.dropdown-menu-custom[b-2wnjaae0lw] {
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    border-radius: 12px;
    padding: 10px;
}
.dropdown-item[b-2wnjaae0lw] {
    border-radius: 8px; 
    margin-bottom: 2px;
}

/* _content/ProyectEC/Components/Pages/Home.razor.rz.scp.css */
/* =========================================
   1. LIMPIEZA DEL LAYOUT
   ========================================= */
[b-891szosi4q] main {
    background-color: #f8f9fa; /* Fondo general gris muy claro */
    padding-top: 0 !important; /* Elimina padding superior para el banner full-screen */
}

/* =========================================
   2. HERO PARALLAX (BANNER)
   ========================================= */
.parallax-hero-section[b-891szosi4q] {
    height: 100vh; /* Ocupa toda la pantalla */
    width: 100%;
    aspect-ratio: 16/9;
    /* Imagen de fondo */
    background-image: url('https://saruacassets2026.blob.core.windows.net/banners-saruconnect/HomeBannerGs-5331.webp'); 
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    
    /* Centrado del texto */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


.hero-text[b-891szosi4q] {
    text-align: center;
    color: white;
    text-shadow: 0 4px 15px rgba(0,0,0,0.8);
}
.hero-text h1[b-891szosi4q] { 
    color: #E9AC2E !important; /* <--- IMPORTANTE: Fuerza el blanco puro */
    font-size: 2.5rem; 
    font-weight: 800; 
    text-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Sombra para contraste */
}

.hero-text p[b-891szosi4q] { 
    color: #f0f0f0; /* <--- Blanco apenas grisáceo para diferenciarlo del título */
    font-size: 1.2rem; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); 
}

/* Animación de la flecha hacia abajo */
.animate-bounce[b-891szosi4q] {
    animation: bounce-b-891szosi4q 2s infinite;
}

@keyframes bounce-b-891szosi4q {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* =========================================
   3. ESTILOS GENERALES
   ========================================= */
.main-content-container[b-891szosi4q] {
    background-color: #f8f9fa; /* Asegura el fondo gris */
    min-height: 100vh; /* Asegura que la sección de contenido ocupe al menos una pantalla */
}

.section-header[b-891szosi4q] {
    letter-spacing: -0.5px;
}

/* =========================================
   4. TARJETAS (ASANA STYLE)
   ========================================= */
.asana-card[b-891szosi4q] {
    background-color: #ffffff;
    border: none !important; /* Sin bordes visibles */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Sombra suave inicial */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    cursor: pointer;
}

/* Efecto Hover para tarjetas */
.card-hover:hover[b-891szosi4q] {
    transform: translateY(-8px) !important;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.15) !important;
}

.icon-container[b-891szosi4q] {
    transition: transform 0.3s ease;
}
.asana-card:hover .icon-container[b-891szosi4q] {
    transform: scale(1.1); /* Efecto zoom en el icono */
}

/* Colores consistentes */
.text-primary[b-891szosi4q] { color: #011F41 !important; } /* Azul corporativo */


/* =========================================
   5. CARRUSEL DE MARCAS
   ========================================= */
.brands-carousel-section[b-891szosi4q] {
    padding: 3rem 0;
    margin-top: 3rem;
}

/* Contenedor flexible para los logos */
.brands-carousel-section .d-flex[b-891szosi4q] {
    flex-wrap: wrap; /* Permite envolver si no caben */
    row-gap: 1rem;   /* Espacio vertical si bajan de línea */
    justify-content: center;
}

/* Estilos para Logos de Marcas - CORREGIDO */
.brand-logo2[b-891szosi4q] {
    /* height: 60px;       
    width: 100%;         
    object-fit: contain; 
    
    
    filter: grayscale(100%);
    opacity: 0.6;        
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 5px;         */
    height: 70px;        /* 1. Altura fija para todos igual */
    width: 100%;         /* 2. Ocupan el ancho de su columna */
    object-fit: contain; /* 3. MAGIA: La imagen se ajusta dentro sin estirarse */
    
    /* Efectos visuales */
    filter: grayscale(100%);
    opacity: 0.6;        /* Un poco más visibles por defecto */
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 5px;   
}

.brand-logo[b-891szosi4q] {
    height: 90px;        /* 1. Altura fija para todos igual */
    width: 100%;         /* 2. Ocupan el ancho de su columna */
    object-fit: contain; /* 3. MAGIA: La imagen se ajusta dentro sin estirarse */
    
    /* Efectos visuales */
    filter: grayscale(100%);
    opacity: 0.6;        /* Un poco más visibles por defecto */
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 5px;        /* Un pequeño margen interno para que no toquen bordes */
}
.brand-logoChico[b-891szosi4q]{
    height: 135px;        /* 1. Altura fija para todos igual */
    width: 100%;         /* 2. Ocupan el ancho de su columna */
    object-fit: contain; /* 3. MAGIA: La imagen se ajusta dentro sin estirarse */
    /*object-position: center 0% !important;*/
    margin-top: 10px ; 

    filter: grayscale(100%);
    opacity: 0.6;        /* Un poco más visibles por defecto */
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 5px;        /* Un pequeño margen interno para que no toquen bordes */
}

.brand-logoRed[b-891szosi4q]{
    height: 115px;        /* 1. Altura fija para todos igual */
    width: 100%;         /* 2. Ocupan el ancho de su columna */
    object-fit: contain; /* 3. MAGIA: La imagen se ajusta dentro sin estirarse */
    
    /* Efectos visuales */
    filter: grayscale(100%);
    opacity: 0.6;        /* Un poco más visibles por defecto */
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 5px;        /* Un pequeño margen interno para que no toquen bordes */
}

.brand-logoRed:hover[b-891szosi4q] {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}
.brand-logo:hover[b-891szosi4q] {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.brand-logoChico:hover[b-891szosi4q] {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}
.brand-logo2:hover[b-891szosi4q] {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Controles del Carrusel (Flechas) */
.custom-arrow[b-891szosi4q] {
    width: 5%;
    opacity: 0.5;
}
.custom-arrow:hover[b-891szosi4q] {
    opacity: 1;
}

/* Iconos de flecha negros */
.carousel-control-prev-icon[b-891szosi4q],
.carousel-control-next-icon[b-891szosi4q] {
    filter: invert(1); 
    width: 2.5rem;
    height: 2.5rem;
}

/* Ajuste para que las flechas no tapen el contenido en pantallas grandes */
.carousel-control-prev[b-891szosi4q] { left: -40px; }
.carousel-control-next[b-891szosi4q] { right: -40px; }

/* Responsive: Flechas dentro en pantallas chicas */
@media (max-width: 768px) {
    .carousel-control-prev[b-891szosi4q] { left: 0; }
    .carousel-control-next[b-891szosi4q] { right: 0; }
    .carousel-inner[b-891szosi4q] { padding: 0 30px; }
}



/* 5. ESTILOS PARA LA TARJETA COMPACTA DE AVISO */
    /* NUEVOS ESTILOS PARA LAS CÁPSULAS DE AVISOS */
    .aviso-capsula[b-891szosi4q] {
        background-color: #fff;
        border: 1px solid #f0f0f0;
        transition: all 0.2s ease-in-out;
        cursor: pointer; /* Manita al pasar mouse */
        position: relative;
        overflow: hidden;
    }

    /* Efecto Hover: Se levanta un poco y sombra suave */
    .aviso-capsula:hover[b-891szosi4q] {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
        border-color: transparent;
        background-color: #fff;
    }

    /* Indicador de importancia (Barra lateral sutil) */
    .indicador-tipo[b-891szosi4q] {
        width: 6px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    .tipo-normal[b-891szosi4q] { background-color: #0d6efd; } /* Azul */
    .tipo-importante[b-891szosi4q] { background-color: #ffc107; } /* Amarillo */

    /* Contador de Notificaciones */
    .counter-badge[b-891szosi4q] {
        background-color: #eef2ff; /* Azul muy pálido */
        color: #4f46e5; /* Azul intenso */
        font-weight: 800;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 1rem;
    }


    /* Scrollbar bonita y delgada para la lista de celebraciones */
.custom-scrollbar[b-891szosi4q]::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar[b-891szosi4q]::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar[b-891szosi4q]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.custom-scrollbar:hover[b-891szosi4q]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
}



.shortcut-card[b-891szosi4q] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        text-decoration: none;
        color: #495057;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        height: 100%;
        border: 1px solid rgba(0,0,0,0.05);
    }
    .shortcut-card:hover[b-891szosi4q] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        color: #0d6efd; /* Azul primary */
    }
    .shortcut-card .icon-box[b-891szosi4q] {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        line-height: 1;
    }
    .shortcut-card span[b-891szosi4q] {
        font-weight: 600;
        font-size: 0.9rem;
        text-align: center;
    }

    /* Estado Deshabilitado (Próximamente) */
    .shortcut-card.disabled[b-891szosi4q] {
        opacity: 0.6;
        cursor: not-allowed;
        background: #f8f9fa;
    }
    .shortcut-card.disabled:hover[b-891szosi4q] {
        transform: none;
        box-shadow: none;
        color: #6c757d;
    }

    /* Scroll personalizado para la lista de avisos */
    .avisos-scroll-container[b-891szosi4q] {
        max-height: 500px; /* Altura fija para el scroll */
        overflow-y: auto;
        padding-right: 5px;
    }
    /* Estilizar barra de scroll */
    .avisos-scroll-container[b-891szosi4q]::-webkit-scrollbar { width: 6px; }
    .avisos-scroll-container[b-891szosi4q]::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; }



    /* Estilos para Logos de Marcas */
.brand-logo[b-891szosi4q] {
    max-height: 50px; /* Controla la altura para que sea pequeño */
    width: auto;
    max-width: 100%;
    
    /* Efecto: Gris y transparente por defecto */
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s ease;
    cursor: pointer;
}

.brand-logo:hover[b-891szosi4q] {
    /* Al pasar el mouse: Color original y opacidad total */
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1); /* Pequeño zoom */
}

/* Ajuste de los puntitos del carrusel */
.carousel-indicators [data-bs-target][b-891szosi4q] {
    height: 3px;
    width: 20px;
    border-radius: 2px;
}







.info-articles-container[b-891szosi4q] {
        max-width: 1100px;
        margin: 0 auto;
        padding: 3rem 0;
    }

    .info-img[b-891szosi4q] {
        width: 100%;
        height: auto;
        border-radius: 16px !important;
        object-fit: cover;
    }

    .info-title[b-891szosi4q] {
        font-weight: 800;
        margin-bottom: 1.5rem;
        font-size: 2rem;
        line-height: 1.2;
    }

    .info-text[b-891szosi4q] {
        font-size: 1.15rem;
        color: #555;
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }

    .info-list[b-891szosi4q] {
        list-style-type: none;
        padding-left: 0;
        margin-top: 1.5rem;
    }

    .info-list li[b-891szosi4q] {
        position: relative;
        padding-left: 2rem;
        margin-bottom: 1rem;
        font-size: 1.1rem;
        color: #444;
    }

    .info-list li[b-891szosi4q]::before {
        content: "✔";
        color: #011F41;
        position: absolute;
        left: 0;
        font-weight: bold;
        font-size: 1.2rem;
        top: -2px;
    }

    .asana-card[b-891szosi4q] {
        background: #fff;
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 1rem;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    }
    
    .asana-card:hover[b-891szosi4q] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        border-color: rgba(13, 110, 253, 0.3);
    }

    .icon-container[b-891szosi4q] {
        width: 80px;
        height: 80px;
        background: rgba(13, 110, 253, 0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }

    .asana-card:hover .icon-container[b-891szosi4q] {
        transform: scale(1.1) rotate(5deg);
        background: rgba(13, 110, 253, 0.15);
    }

    /* Texto Primario (Títulos e Iconos) */
.text-primary[b-891szosi4q] {
    color: #0a2342 !important; /* Azul Marino Oscuro */
}

/* Botones Outline */
.btn-outline-primary[b-891szosi4q] {
    color: #0a2342;
    border-color: #0a2342;
    border-width: 2px;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    transition: all 0.2s;
}

.btn-outline-primary:hover[b-891szosi4q] {
    background-color: #0a2342;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}



/* Estilos para el banner de mision y vision */

.banner-container[b-891szosi4q] {
    /* PASO 1: Poner uno al lado del otro */
    display: flex;       
    justify-content: center; /* Centra los dos bloques en medio de la pantalla */
    align-items: stretch;     /* Los alinea verticalmente */
    
    /* Estilo del fondo */
    background-color: #13142b; /* Tu azul oscuro */
    color: white;
    width: 100%;

    /* CAMBIO CLAVE: Aumentamos el padding superior a 60px o más
       para que los títulos/iconos no queden pegados al borde de arriba */
    padding: 70px 30px;
    
    gap: 50px; /* Separación entre Visión y Misión */
    border-radius: 1rem; /* Borde redondeado para armonía visual */
    
}

.banner-item[b-891szosi4q] {
    /* PASO 2: Centrar el texto INTERNAMENTE */
    text-align: center; 
    /* Controlar el ancho para que no se estiren demasiado */
    max-width: 500px; 
    flex: 1; /* Hace que ambos ocupen el mismo espacio disponible */

    /* Aseguramos que el contenido no se centre verticalmente dentro de su propia caja */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente el icono y el texto */
    justify-content: flex-start;
}

/* NUEVA CLASE PARA LOS ICONOS */
.banner-icon[b-891szosi4q] {
    /* width: 60px;  Tamaño del icono */
    /* height: 60px; */
    margin-bottom: 20px; /* Espacio entre el icono y el título */
    object-fit: contain;
}

.titulo[b-891szosi4q] {
    font-size: 2.5rem; /* Letra grande para el título */
    font-weight: bold;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #E9AC2E; /* Un toque amarillo/dorado queda bien con azul oscuro */
    line-height: 1; /* Evita espacios extra en el título */
}

.texto[b-891szosi4q] {
    font-size: 1.2rem;
    line-height: 1.6; /* Espaciado entre líneas para leer mejor */
}

/* Línea vertical separadora */
.separador[b-891szosi4q] {
    width: 2px;
    height: 150px;
    background-color: rgba(255, 255, 255, 0.2); /* Línea blanca semitransparente */
    align-self: center;
}

/* RESPONSIVIDAD: Para que en celular se pongan uno debajo del otro */
@media (max-width: 768px) {
    .banner-container[b-891szosi4q] {
        flex-direction: column; /* Cambia a columna en pantallas chicas */
        padding: 40px 20px; /* Padding un poco menor en celular */
        text-align: center;
    }
    
    .separador[b-891szosi4q] {
        width: 100px; /* La línea vertical se vuelve horizontal */
        height: 2px;
        margin: 20px 0;
    }
}




    .banner-container[b-891szosi4q] {
        /* Aquí ocurre la magia: Capa azul semitransparente + Imagen de fondo */
        background: linear-gradient(rgba(1, 31, 65, 0.85), rgba(1, 31, 65, 0.85)), 
                    url('/images/ResponsabilidadSocial/GS Activación Física.jpg');
        
        background-size: cover;      /* Asegura que la foto cubra todo */
        background-position: center; /* Centra la foto */
        color: white;                /* Texto blanco */
        
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 4rem 2rem;          /* Espaciado interno amplio */
        text-align: center;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Sombra elegante */
    }

    .banner-item[b-891szosi4q] {
        flex: 1;
        padding: 0 2rem;
        max-width: 500px; /* Evita que el texto se estire demasiado */
    }

    .banner-icon[b-891szosi4q] {
        width: 80px;        /* Ajusta el tamaño de tus iconos */
        height: auto;
        margin-bottom: 1.5rem;
        filter: brightness(0) invert(1); /* Vuelve los iconos blancos si son negros */
    }

    .titulo[b-891szosi4q] {
        font-weight: 700;
        margin-bottom: 1rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 1.5rem;
        color: #E9AC2E; /* Títulos dorados para resaltar sobre el azul */
    }

    .texto[b-891szosi4q] {
        font-size: 1rem;
        line-height: 1.6;
        opacity: 0.9; /* Un poco de transparencia para elegancia */
    }

    /* Línea separadora vertical */
    .separador[b-891szosi4q] {
        width: 1px;
        height: 150px;
        background-color: rgba(255, 255, 255, 0.3); /* Línea blanca sutil */
        margin: 0 1rem;
    }

    /* Responsivo: En celulares se pone uno debajo del otro */
    @media (max-width: 768px) {
        .banner-container[b-891szosi4q] {
            flex-direction: column;
            gap: 2rem;
        }
        .separador[b-891szosi4q] {
            width: 100%;
            height: 1px; /* La línea se vuelve horizontal */
            margin: 1rem 0;
        }
    }
/* _content/ProyectEC/Components/Pages/MantenimientoPage/CrearTicketMantenimiento.razor.rz.scp.css */
/* --- 1. BANNER (Imagen de Mantenimiento) --- */
.maintenance-form-banner[b-kvrgupbl5h] {
    /* Asegúrate de tener esta imagen en wwwroot/images/ */
    background-image: url('/images/maintenance-hero.jpg'); 
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%; 
    filter: brightness(0.9);
}

/* --- 2. ESTILOS DE FORMULARIO MODERNO --- */

/* Etiquetas (Labels) */
.form-label-sm[b-kvrgupbl5h] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8898aa;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Inputs Modernos */
.modern-input[b-kvrgupbl5h] {
    border: 1px solid #e9ecef;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    color: #495057;
    transition: all 0.2s ease;
    box-shadow: none;
}

.modern-input:focus[b-kvrgupbl5h] {
    background-color: #ffffff;
    border-color: var(--saru-blue, #0a2342);
    box-shadow: 0 0 0 4px rgba(10, 35, 66, 0.05);
    color: #0a2342;
}

/* Ajuste para Selects (Flecha personalizada) */
select.modern-input[b-kvrgupbl5h] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    appearance: none;
}

/* --- 3. BOTÓN DE ENVIAR --- */
.btn-modern-submit[b-kvrgupbl5h] {
    background-color: var(--saru-blue, #0a2342);
    border: none;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-modern-submit:hover[b-kvrgupbl5h] {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(10, 35, 66, 0.2) !important;
    background-color: #0f2d52;
}

.btn-modern-submit:active[b-kvrgupbl5h] {
    transform: translateY(0);
}
/* _content/ProyectEC/Components/Pages/MantenimientoPage/GestionMantenimiento.razor.rz.scp.css */
/* --- LAYOUT GENERAL --- */
.approval-layout[b-m01s464bi4] {
    display: flex;
    height: calc(100vh - 60px);
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

/* --- SIDEBAR --- */
.requests-sidebar[b-m01s464bi4] {
    width: 360px;
    background: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
}

.sidebar-header[b-m01s464bi4] {
    padding: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    flex-shrink: 0;
}

/* Barra de Búsqueda */
.search-wrapper[b-m01s464bi4] { position: relative; margin-top: 0.5rem; }
.search-icon[b-m01s464bi4] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #adb5bd; font-size: 0.9rem; pointer-events: none;
}
.search-input[b-m01s464bi4] {
    width: 100%; padding: 8px 12px 8px 35px;
    border-radius: 8px; border: 1px solid #e9ecef;
    background-color: #f8f9fa; font-size: 0.9rem; color: #495057; transition: all 0.2s ease;
}
.search-input:focus[b-m01s464bi4] {
    outline: none; background-color: #ffffff; border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Filtros Tabs */
.filter-tabs[b-m01s464bi4] {
    display: flex; gap: 4px; background-color: #f1f3f5; padding: 4px; border-radius: 8px; margin-top: 12px;
}
.filter-tab[b-m01s464bi4] {
    flex: 1; border: none; background: transparent; padding: 6px;
    font-size: 0.75rem; font-weight: 600; color: #6c757d;
    border-radius: 6px; transition: all 0.2s ease; text-align: center; cursor: pointer;
}
.filter-tab:hover[b-m01s464bi4] { color: #212529; background-color: rgba(255, 255, 255, 0.5); }
.filter-tab.active[b-m01s464bi4] { background-color: #ffffff; color: #0d6efd; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Lista */
.requests-list[b-m01s464bi4] { flex-grow: 1; overflow-y: auto; padding: 0.5rem; }

.request-item[b-m01s464bi4] {
    display: flex; align-items: center; padding: 12px; margin-bottom: 4px;
    border-radius: 8px; cursor: pointer; transition: background 0.2s; border: 1px solid transparent;
}
.request-item:hover[b-m01s464bi4] { background-color: #f8f9fa; }
.request-item.active[b-m01s464bi4] { background-color: #f0f7ff; border-left: 4px solid #0d6efd; }

.avatar-small[b-m01s464bi4] { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-right: 12px; flex-shrink: 0; }

.status-dot-small[b-m01s464bi4] { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.status-dot-small.bg-danger[b-m01s464bi4] { background-color: #dc3545; }
.status-dot-small.bg-warning[b-m01s464bi4] { background-color: #ffc107; }
.status-dot-small.bg-success[b-m01s464bi4] { background-color: #198754; }

/* --- PANEL DE DETALLE --- */
.request-detail-panel[b-m01s464bi4] {
    flex-grow: 1; display: flex; flex-direction: column;
    background-color: #f5f7fa; overflow: hidden; padding: 1rem;
    padding-top: 2rem;
}

.detail-content[b-m01s464bi4] {
    background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
}

.detail-header[b-m01s464bi4] {
    padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: flex; align-items: center;
}
.avatar-large[b-m01s464bi4] { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-right: 1rem; }

/* GRID */
.admin-content-grid[b-m01s464bi4] { flex: 1; display: flex; overflow: hidden; }

/* --- COLUMNA IZQUIERDA (INFO) --- */
.col-info[b-m01s464bi4] { 
    width: 50%; 
    padding: 2rem; 
    overflow-y: auto; 
    border-right: 1px solid #f0f0f0; 
    
    /* --- SCROLL OCULTO (Pero funcional) --- */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
/* Ocultar barra en Chrome/Safari/Opera */
.col-info[b-m01s464bi4]::-webkit-scrollbar { 
    display: none; 
}

.section-label[b-m01s464bi4] { display: block; font-size: 0.75rem; font-weight: 800; color: #adb5bd; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
.file-card[b-m01s464bi4] { transition: all 0.2s; border: 1px solid #eee; }
.file-card:hover[b-m01s464bi4] { background-color: #f8f9fa; border-color: #ddd; }

/* --- COLUMNA DERECHA (CHAT) --- */
.col-chat[b-m01s464bi4] { width: 50%; display: flex; flex-direction: column; background-color: #fff; }

.chat-header[b-m01s464bi4] {
    padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f0;
    font-weight: 700; color: #6c757d; font-size: 0.8rem; text-transform: uppercase;
}

.chat-body[b-m01s464bi4] {
    flex: 1; overflow-y: auto; padding: 1.5rem; background-color: #f8f9fa;
    display: flex; flex-direction: column; gap: 1rem;

    /* --- SCROLL OCULTO PARA EL CHAT TAMBIÉN --- */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chat-body[b-m01s464bi4]::-webkit-scrollbar {
    display: none;
}

.chat-footer[b-m01s464bi4] { padding: 1rem; background: white; border-top: 1px solid #f0f0f0; }

/* BURBUJAS */
.chat-message[b-m01s464bi4] { display: flex; flex-direction: column; max-width: 85%; }
.message-content[b-m01s464bi4] { padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; position: relative; }

/* Admin (Derecha - Azul) */
.align-self-end .message-content[b-m01s464bi4] { background-color: #0d6efd; color: white; border-bottom-right-radius: 2px; }
.align-self-end .msg-meta[b-m01s464bi4] { text-align: right; }

/* Usuario (Izquierda - Blanco) */
.align-self-start .message-content[b-m01s464bi4] { background-color: white; border: 1px solid #e0e0e0; color: #333; border-bottom-left-radius: 2px; }

.msg-meta[b-m01s464bi4] { font-size: 0.7rem; margin-top: 4px; opacity: 0.7; }

/* Scrollbar Fina (Solo para la lista lateral, ahí sí se suele dejar visible pero delgada) */
[b-m01s464bi4]::-webkit-scrollbar { width: 5px; height: 5px; }
[b-m01s464bi4]::-webkit-scrollbar-track { background: transparent; }
[b-m01s464bi4]::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }
[b-m01s464bi4]::-webkit-scrollbar-thumb:hover { background: #ccc; }

/* --- CALENDARIO VISUAL --- */

.calendar-grid-header[b-m01s464bi4] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 700;
    color: #adb5bd;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.calendar-grid[b-m01s464bi4] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px; /* Espacio entre cuadros */
}

.calendar-day[b-m01s464bi4] {
    min-height: 120px; /* Altura de cada cuadro */
    position: relative;
    transition: transform 0.2s;
}

.calendar-day:hover[b-m01s464bi4] {
    background-color: #fcfcfc;
}

.calendar-day.empty[b-m01s464bi4] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.day-number[b-m01s464bi4] {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

/* Pastilla de Evento (El ticket) */
.event-pill[b-m01s464bi4] {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    cursor: default;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

/* 1. Hacemos que el cuerpo del chat sea una columna flexible */
.chat-body[b-m01s464bi4] {
    display: flex;              /* <--- CRUCIAL */
    flex-direction: column;     /* Apila los mensajes verticalmente */
    gap: 1rem;                  /* Espacio entre mensajes */
    padding: 1rem;
    background-color: #f8f9fa;  /* Fondo gris claro para el chat */
}

/* 2. Estilos base del mensaje */
.chat-message[b-m01s464bi4] {
    max-width: 75%;             /* Que no ocupe todo el ancho */
    display: flex;
    flex-direction: column;
}

/* 3. MENSAJES DEL USUARIO (Derecha) */
.align-self-end[b-m01s464bi4] {
    align-self: flex-end;       /* Mueve el bloque a la derecha */
    align-items: flex-end;      /* Alinea el texto/meta a la derecha */
}

.align-self-end .message-content[b-m01s464bi4] {
    background-color: #0d6efd;  /* Azul primario */
    color: white;               /* Texto blanco */
    border-radius: 15px 15px 0 15px; /* Borde redondeado estilo chat */
}

.align-self-end .msg-meta[b-m01s464bi4] {
    text-align: right;
    margin-right: 5px;
}

/* 4. MENSAJES DE OTROS/ADMIN (Izquierda) */
.align-self-start[b-m01s464bi4] {
    align-self: flex-start;     /* Mueve el bloque a la izquierda */
    align-items: flex-start;    /* Alinea el texto/meta a la izquierda */
}

.align-self-start .message-content[b-m01s464bi4] {
    background-color: white;    /* Blanco */
    color: #212529;             /* Texto oscuro */
    border: 1px solid #dee2e6;  /* Borde sutil */
    border-radius: 15px 15px 15px 0; /* Borde redondeado estilo chat */
}

.align-self-start .msg-meta[b-m01s464bi4] {
    text-align: left;
    margin-left: 5px;
}

/* Estilos generales del contenido */
.message-content[b-m01s464bi4] {
    padding: 10px 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.msg-meta[b-m01s464bi4] {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 4px;
}
/* _content/ProyectEC/Components/Pages/MantenimientoPage/Mantenimiento.razor.rz.scp.css */
/* Limpieza del layout */
[b-cvj16r5kzm] main {
    background-color: #ffffff;
    padding: 0 !important;
}

/* --- Hero Section --- */
.parallax-hero-section[b-cvj16r5kzm] {
    background-image: url('/images/Banners/MANTENIMIENTO.webp'); /* <-- ¡Tu imagen! */
    height: 30vh;
    background-size: cover;      /* <--- CLAVE #1: Cubre todo el espacio sin deformar, recortando lo que sobre */
    background-position: center; 
    text-align: center;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.3);
}

.hero-text[b-cvj16r5kzm] {
    color: white;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8); /* Sombra más fuerte para legibilidad */
}
.hero-text h1[b-cvj16r5kzm] { font-size: 4rem; font-weight: 800; color: #E9AC2E !important; }





/* =========================================
   3. CONTENIDO Y TARJETAS (ESTILO UNIFICADO)
   ========================================= */
.content-section[b-cvj16r5kzm] {
    padding: 1rem 2rem;
    background-color: #6c757d;
    position: relative; z-index: 2; 
}

/* Tarjeta Limpia (Asana Style) */
.asana-card[b-cvj16r5kzm] {
    background-color: #ffffff;
    border: none !important; /* Sin bordes */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Sombra suave */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    overflow: hidden;
}

.asana-card:hover[b-cvj16r5kzm] {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.icon-container[b-cvj16r5kzm] {
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}
.asana-card:hover .icon-container[b-cvj16r5kzm] { transform: scale(1.1); }

/* --- COLORES UNIFICADOS (AZUL OSCURO) --- */

/* Texto Primario (Títulos e Iconos) */
.text-primary[b-cvj16r5kzm] {
    color: #0a2342 !important; /* Azul Marino Oscuro */
}

/* Botones Outline */
.btn-outline-primary[b-cvj16r5kzm] {
    color: #0a2342;
    border-color: #0a2342;
    border-width: 2px;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    transition: all 0.2s;
}

.btn-outline-primary:hover[b-cvj16r5kzm] {
    background-color: #0a2342;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}

/* Estilos de texto */
.card-title[b-cvj16r5kzm] { font-weight: 700; margin-bottom: 0.5rem; color: #0a2342; }
.card-text[b-cvj16r5kzm] { font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.5rem; color: #6c757d; }



.ls-1[b-cvj16r5kzm] { letter-spacing: 2px; font-size: 0.75rem; font-weight: 700; }

.divider-pill[b-cvj16r5kzm] {
    width: 60px;
    height: 6px;
    background-color: #0a2342; /* Azul corporativo */
    border-radius: 10px;
    margin-top: 1rem;
    opacity: 0.8;
}
/* _content/ProyectEC/Components/Pages/MantenimientoPage/MisReportes.razor.rz.scp.css */
/* --- LAYOUT GENERAL --- */
.approval-layout[b-qtn55hzaiw] {
    display: flex;
    height: calc(100vh - 60px); /* Altura fija */
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden; /* Sin scroll global */
}

/* --- SIDEBAR --- */
.requests-sidebar[b-qtn55hzaiw] {
    width: 360px;
    background: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
    padding-top: 1rem;
}

.sidebar-header[b-qtn55hzaiw] {
    padding: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    flex-shrink: 0;
}

/* Barra de Búsqueda */
.search-wrapper[b-qtn55hzaiw] { position: relative; margin-top: 1rem; }
.search-icon[b-qtn55hzaiw] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #adb5bd; font-size: 0.9rem; pointer-events: none;
}
.search-input[b-qtn55hzaiw] {
    width: 100%; padding: 8px 12px 8px 35px;
    border-radius: 8px; border: 1px solid #e9ecef;
    background-color: #f8f9fa; font-size: 0.9rem; color: #495057; transition: all 0.2s ease;
}
.search-input:focus[b-qtn55hzaiw] {
    outline: none; background-color: #ffffff; border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Filtros Tabs */
.filter-tabs[b-qtn55hzaiw] {
    display: flex; gap: 4px; background-color: #f1f3f5; padding: 4px; border-radius: 8px; margin-top: 12px;
}
.filter-tab[b-qtn55hzaiw] {
    flex: 1; border: none; background: transparent; padding: 6px;
    font-size: 0.75rem; font-weight: 600; color: #6c757d;
    border-radius: 6px; transition: all 0.2s ease; text-align: center; cursor: pointer;
}
.filter-tab:hover[b-qtn55hzaiw] { color: #212529; background-color: rgba(255, 255, 255, 0.5); }
.filter-tab.active[b-qtn55hzaiw] { background-color: #ffffff; color: #0d6efd; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Lista de Tickets */
.requests-list[b-qtn55hzaiw] { flex-grow: 1; overflow-y: auto; padding: 0.5rem; }

.request-item[b-qtn55hzaiw] {
    display: flex; align-items: center; padding: 12px; margin-bottom: 4px;
    border-radius: 8px; cursor: pointer; transition: background 0.2s; border: 1px solid transparent;
}
.request-item:hover[b-qtn55hzaiw] { background-color: #f8f9fa; }
.request-item.active[b-qtn55hzaiw] { background-color: #f0f7ff; border-left: 4px solid #0d6efd; }

.avatar-small[b-qtn55hzaiw] { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-right: 12px; flex-shrink: 0; }

/* --- PANEL DE DETALLE --- */
.request-detail-panel[b-qtn55hzaiw] {
    flex-grow: 1; display: flex; flex-direction: column;
    background-color: #f5f7fa; overflow: hidden; padding: 1rem;
    padding-top: 2rem;
}

.detail-content[b-qtn55hzaiw] {
    background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
}

.detail-header[b-qtn55hzaiw] {
    padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: flex; align-items: center;
}
.avatar-large[b-qtn55hzaiw] { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-right: 1rem; }

/* Grid de Contenido */
.admin-content-grid[b-qtn55hzaiw] { flex: 1; display: flex; overflow: hidden; }

/* Columna Izquierda */
.col-info[b-qtn55hzaiw] { width: 50%; padding: 2rem; overflow-y: auto; border-right: 1px solid #f0f0f0; }

.section-label[b-qtn55hzaiw] { display: block; font-size: 0.75rem; font-weight: 800; color: #adb5bd; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
.file-card[b-qtn55hzaiw] { transition: all 0.2s; border: 1px solid #eee; }
.file-card:hover[b-qtn55hzaiw] { background-color: #f8f9fa; border-color: #ddd; }


    /* --- ESTRUCTURA PRINCIPAL DEL CHAT --- */
    .col-chat[b-qtn55hzaiw] { 
        width: 50%; 
        display: flex; 
        flex-direction: column; 
        background-color: #fff; 
        border-left: 1px solid #e9ecef; /* Separador sutil */
    }

    .chat-header[b-qtn55hzaiw] {
        padding: 1rem 1.5rem; 
        border-bottom: 1px solid #f0f0f0;
        font-weight: 700; 
        color: #6c757d; 
        font-size: 0.8rem; 
        text-transform: uppercase;
        background-color: #fff;
    }

    .chat-body[b-qtn55hzaiw] {
        flex: 1; 
        overflow-y: auto; 
        padding: 1.5rem; 
        background-color: #f8f9fa;
        display: flex; 
        flex-direction: column; 
        gap: 1rem;
        
        /* Ocultar scrollbar */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    .chat-body[b-qtn55hzaiw]::-webkit-scrollbar { 
        display: none; /* Chrome/Safari */
    }

    .chat-footer[b-qtn55hzaiw] { 
        padding: 1rem; 
        background: white; 
        border-top: 1px solid #f0f0f0; 
    }

    /* --- BURBUJAS DE MENSAJE --- */
    .chat-message[b-qtn55hzaiw] { 
        display: flex; 
        flex-direction: column; 
        max-width: 80%; /* Ancho máximo de la burbuja */
        min-width: 30%;
    }

    .message-content[b-qtn55hzaiw] { 
        padding: 10px 14px; 
        border-radius: 12px; 
        font-size: 0.9rem; 
        position: relative; 
        word-wrap: break-word;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    /* --- LOGICA DE COLORES --- */
    
    /* MIS MENSAJES (Derecha - Azul) */
    .align-self-end .message-content[b-qtn55hzaiw] { 
        background-color: #0d6efd; 
        color: white; 
        border-bottom-right-radius: 2px; /* Efecto pico */
    }
    .align-self-end .msg-meta[b-qtn55hzaiw] { 
        text-align: right; 
    }
    .align-self-end .text-sender-name[b-qtn55hzaiw] {
        display: none; /* No mostrar mi propio nombre */
    }

    /* MENSAJES DE OTROS (Izquierda - Blanco) */
    .align-self-start .message-content[b-qtn55hzaiw] { 
        background-color: white; 
        border: 1px solid #e0e0e0; 
        color: #333; 
        border-bottom-left-radius: 2px; /* Efecto pico */
    }
    
    /* Metadatos (Hora) */
    .msg-meta[b-qtn55hzaiw] { 
        font-size: 0.7rem; 
        margin-top: 4px; 
        opacity: 0.7; 
        margin-left: 2px;
        margin-right: 2px;
    }

/* Scrollbar */
[b-qtn55hzaiw]::-webkit-scrollbar { width: 6px; height: 6px; }
[b-qtn55hzaiw]::-webkit-scrollbar-track { background: transparent; }
[b-qtn55hzaiw]::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }

/* 1. Hacemos que el cuerpo del chat sea una columna flexible */
.chat-body[b-qtn55hzaiw] {
    display: flex;              /* <--- CRUCIAL */
    flex-direction: column;     /* Apila los mensajes verticalmente */
    gap: 1rem;                  /* Espacio entre mensajes */
    padding: 1rem;
    background-color: #f8f9fa;  /* Fondo gris claro para el chat */
}

/* 2. Estilos base del mensaje */
.chat-message[b-qtn55hzaiw] {
    max-width: 75%;             /* Que no ocupe todo el ancho */
    display: flex;
    flex-direction: column;
}

/* 3. MENSAJES DEL USUARIO (Derecha) */
.align-self-end[b-qtn55hzaiw] {
    align-self: flex-end;       /* Mueve el bloque a la derecha */
    align-items: flex-end;      /* Alinea el texto/meta a la derecha */
}

.align-self-end .message-content[b-qtn55hzaiw] {
    background-color: #0d6efd;  /* Azul primario */
    color: white;               /* Texto blanco */
    border-radius: 15px 15px 0 15px; /* Borde redondeado estilo chat */
}

.align-self-end .msg-meta[b-qtn55hzaiw] {
    text-align: right;
    margin-right: 5px;
}

/* 4. MENSAJES DE OTROS/ADMIN (Izquierda) */
.align-self-start[b-qtn55hzaiw] {
    align-self: flex-start;     /* Mueve el bloque a la izquierda */
    align-items: flex-start;    /* Alinea el texto/meta a la izquierda */
}

.align-self-start .message-content[b-qtn55hzaiw] {
    background-color: white;    /* Blanco */
    color: #212529;             /* Texto oscuro */
    border: 1px solid #dee2e6;  /* Borde sutil */
    border-radius: 15px 15px 15px 0; /* Borde redondeado estilo chat */
}

.align-self-start .msg-meta[b-qtn55hzaiw] {
    text-align: left;
    margin-left: 5px;
}

/* Estilos generales del contenido */
.message-content[b-qtn55hzaiw] {
    padding: 10px 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.msg-meta[b-qtn55hzaiw] {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 4px;
}
/* _content/ProyectEC/Components/Pages/MercadotecniaPage/CrearSolicitud.razor.rz.scp.css */
/* --- 1. BANNER ESPECÍFICO DE MARKETING --- */
.marketing-form-banner[b-4fzo2d2bjz] {
    /* Puedes cambiar esta imagen por una de diseño gráfico o colores corporativos */
    background-image: url('https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80'); 
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%; 
    filter: brightness(0.9);
}

/* --- 2. ESTILOS DE FORMULARIO MODERNO (Copiados de TI para igualdad visual) --- */

/* Etiquetas */
.form-label-sm[b-4fzo2d2bjz] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8898aa;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Inputs */
.modern-input[b-4fzo2d2bjz] {
    border: 1px solid #e9ecef;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    color: #495057;
    transition: all 0.2s ease;
    box-shadow: none;
}

.modern-input:focus[b-4fzo2d2bjz] {
    background-color: #ffffff;
    border-color: #0a2342; /* Azul corporativo */
    box-shadow: 0 0 0 4px rgba(10, 35, 66, 0.05);
    color: #0a2342;
}

/* Icono en Selects */
select.modern-input[b-4fzo2d2bjz] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    appearance: none;
}



.btn-modern-submit:hover[b-4fzo2d2bjz] {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0, 0.1) !important;
}
.btn-modern-submit[b-4fzo2d2bjz] {
    background-color: var(--saru-blue, #0a2342);
    border: none;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Animación de entrada */
.fade-in[b-4fzo2d2bjz] {
    animation: fadeIn-b-4fzo2d2bjz 0.6s ease-out;
}

@keyframes fadeIn-b-4fzo2d2bjz {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* _content/ProyectEC/Components/Pages/MercadotecniaPage/DetalleIdentidad.razor.rz.scp.css */
/* =========================================
   1. CONTENEDORES PRINCIPALES (TARJETAS)
   ========================================= */
.card[b-3myp1f910l] {
    /* Fondo ligeramente tintado */
    background-color: #fcfdfe; 
    
    /* Borde elegante */
    border: 1px solid #e0e6ed !important;
    
    /* ESQUINAS MÁS REDONDEADAS (Cambio clave) */
    border-radius: 28px !important; 
    
    /* Sombra profunda y suave */
    box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Asegura que el contenido respete las esquinas */
}

/* Efecto Hover */
.card:hover[b-3myp1f910l] {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important;
    border-color: #d1d9e6 !important;
}

/* =========================================
   2. ELEMENTOS INTERNOS (REDONDEADOS TAMBIÉN)
   ========================================= */

/* Cajas de iconos internas */
.bg-primary-subtle[b-3myp1f910l], .bg-danger-subtle[b-3myp1f910l], .bg-light.border[b-3myp1f910l] {
    border-radius: 20px !important; /* Coherencia con la tarjeta */
}

/* =========================================
   3. BOTONES Y LISTAS
   ========================================= */

/* Botones Grandes */
.btn-lg[b-3myp1f910l] {
    border-radius: 50px !important; /* Completamente redondos (Píldora) */
    padding: 0.8rem 2rem;
}

/* Botones Pequeños */
.btn-sm[b-3myp1f910l] {
    border-radius: 50px !important;
    padding: 0.4rem 1.2rem;
    font-weight: 600;
}

/* Listas */
.list-group-item[b-3myp1f910l] {
    background-color: transparent;
    border-bottom: 1px solid #f0f0f0;
    padding: 1.2rem 0; /* Un poco más de aire */
}

/* =========================================
   4. PALETA DE COLORES
   ========================================= */
.rounded-3[b-3myp1f910l] {
    border-radius: 18px !important; /* Cuadros de color suavizados */
}

code[b-3myp1f910l] {
    background-color: #f8f9fa;
    padding: 4px 8px;
    border-radius: 8px;
    color: #0a2342; 
    font-weight: bold;
    font-size: 0.9em;
}

.card-title[b-3myp1f910l] {
    color: #0a2342;
    letter-spacing: -0.5px;
}

.detalle-identidad-wrapper[b-3myp1f910l] {
        background-color: #f4f6f9; /* Tu color gris claro (ajusta el hex si es otro) */
        min-height: 100vh;         /* Ocupa al menos el 100% de la altura de la ventana */
        width: 100%;
        display: flex;             /* Ayuda a manejar márgenes colapsados */
        flex-direction: column;
    }
/* _content/ProyectEC/Components/Pages/MercadotecniaPage/GestionMarketing.razor.rz.scp.css */
/* --- LAYOUT GENERAL --- */
.approval-layout[b-907567z2zt] {
    display: flex;
    height: calc(100vh - 60px);
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

/* --- SIDEBAR --- */
.requests-sidebar[b-907567z2zt] {
    width: 360px;
    background: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
}

.sidebar-header[b-907567z2zt] {
    padding: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    flex-shrink: 0;
}

/* Barra de Búsqueda */
.search-wrapper[b-907567z2zt] { position: relative; margin-top: 0.5rem; }
.search-icon[b-907567z2zt] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #adb5bd; font-size: 0.9rem; pointer-events: none;
}
.search-input[b-907567z2zt] {
    width: 100%; padding: 8px 12px 8px 35px;
    border-radius: 8px; border: 1px solid #e9ecef;
    background-color: #f8f9fa; font-size: 0.9rem; color: #495057; transition: all 0.2s ease;
}
.search-input:focus[b-907567z2zt] {
    outline: none; background-color: #ffffff; border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Filtros Tabs */
.filter-tabs[b-907567z2zt] {
    display: flex; gap: 4px; background-color: #f1f3f5; padding: 4px; border-radius: 8px; margin-top: 12px;
}
.filter-tab[b-907567z2zt] {
    flex: 1; border: none; background: transparent; padding: 6px;
    font-size: 0.75rem; font-weight: 600; color: #6c757d;
    border-radius: 6px; transition: all 0.2s ease; text-align: center; cursor: pointer;
}
.filter-tab:hover[b-907567z2zt] { color: #212529; background-color: rgba(255, 255, 255, 0.5); }
.filter-tab.active[b-907567z2zt] { background-color: #ffffff; color: #0d6efd; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Lista */
.requests-list[b-907567z2zt] { flex-grow: 1; overflow-y: auto; padding: 0.5rem; }

.request-item[b-907567z2zt] {
    display: flex; align-items: center; padding: 12px; margin-bottom: 4px;
    border-radius: 8px; cursor: pointer; transition: background 0.2s; border: 1px solid transparent;
}
.request-item:hover[b-907567z2zt] { background-color: #f8f9fa; }
.request-item.active[b-907567z2zt] { background-color: #f0f7ff; border-left: 4px solid #0d6efd; }

.avatar-small[b-907567z2zt] { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-right: 12px; flex-shrink: 0; }

.status-dot-small[b-907567z2zt] { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.status-dot-small.bg-danger[b-907567z2zt] { background-color: #dc3545; }
.status-dot-small.bg-warning[b-907567z2zt] { background-color: #ffc107; }
.status-dot-small.bg-success[b-907567z2zt] { background-color: #198754; }

/* --- PANEL DE DETALLE --- */
.request-detail-panel[b-907567z2zt] {
    flex-grow: 1; display: flex; flex-direction: column;
    background-color: #f5f7fa; overflow: hidden; padding: 1rem;
    padding-top: 2rem;
}

.detail-content[b-907567z2zt] {
    background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
    
}

.detail-header[b-907567z2zt] {
    padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: flex; align-items: center;
}
.avatar-large[b-907567z2zt] { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-right: 1rem; }

/* GRID */
.admin-content-grid[b-907567z2zt] { flex: 1; display: flex; overflow: hidden; }

/* --- COLUMNA IZQUIERDA (INFO) --- */
.col-info[b-907567z2zt] { 
    width: 50%; 
    padding: 2rem; 
    overflow-y: auto; 
    border-right: 1px solid #f0f0f0; 
    
    /* --- SCROLL OCULTO (Pero funcional) --- */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
/* Ocultar barra en Chrome/Safari/Opera */
.col-info[b-907567z2zt]::-webkit-scrollbar { 
    display: none; 
}

.section-label[b-907567z2zt] { display: block; font-size: 0.75rem; font-weight: 800; color: #adb5bd; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
.file-card[b-907567z2zt] { transition: all 0.2s; border: 1px solid #eee; }
.file-card:hover[b-907567z2zt] { background-color: #f8f9fa; border-color: #ddd; }

/* --- COLUMNA DERECHA (CHAT) --- */
.col-chat[b-907567z2zt] { width: 50%; display: flex; flex-direction: column; background-color: #fff; }

.chat-header[b-907567z2zt] {
    padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f0;
    font-weight: 700; color: #6c757d; font-size: 0.8rem; text-transform: uppercase;
}

.chat-body[b-907567z2zt] {
    flex: 1; overflow-y: auto; padding: 1.5rem; background-color: #f8f9fa;
    display: flex; flex-direction: column; gap: 1rem;

    /* --- SCROLL OCULTO PARA EL CHAT TAMBIÉN --- */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chat-body[b-907567z2zt]::-webkit-scrollbar {
    display: none;
}

.chat-footer[b-907567z2zt] { padding: 1rem; background: white; border-top: 1px solid #f0f0f0; }

/* BURBUJAS */
.chat-message[b-907567z2zt] { display: flex; flex-direction: column; max-width: 85%; }
.message-content[b-907567z2zt] { padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; position: relative; }

/* Admin (Derecha - Azul) */
.align-self-end .message-content[b-907567z2zt] { background-color: #0d6efd; color: white; border-bottom-right-radius: 2px; }
.align-self-end .msg-meta[b-907567z2zt] { text-align: right; }

/* Usuario (Izquierda - Blanco) */
.align-self-start .message-content[b-907567z2zt] { background-color: white; border: 1px solid #e0e0e0; color: #333; border-bottom-left-radius: 2px; }

.msg-meta[b-907567z2zt] { font-size: 0.7rem; margin-top: 4px; opacity: 0.7; }

/* Scrollbar Fina (Solo para la lista lateral, ahí sí se suele dejar visible pero delgada) */
[b-907567z2zt]::-webkit-scrollbar { width: 5px; height: 5px; }
[b-907567z2zt]::-webkit-scrollbar-track { background: transparent; }
[b-907567z2zt]::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }
[b-907567z2zt]::-webkit-scrollbar-thumb:hover { background: #ccc; }

/* --- CALENDARIO VISUAL --- */

.calendar-grid-header[b-907567z2zt] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 700;
    color: #adb5bd;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.calendar-grid[b-907567z2zt] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px; /* Espacio entre cuadros */
}

.calendar-day[b-907567z2zt] {
    min-height: 120px; /* Altura de cada cuadro */
    position: relative;
    transition: transform 0.2s;
}

.calendar-day:hover[b-907567z2zt] {
    background-color: #fcfcfc;
}

.calendar-day.empty[b-907567z2zt] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.day-number[b-907567z2zt] {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

/* Pastilla de Evento (El ticket) */
.event-pill[b-907567z2zt] {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    cursor: default;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
/* _content/ProyectEC/Components/Pages/MercadotecniaPage/HojasMembretadas.razor.rz.scp.css */
/* =======================================================
   1. AJUSTE DE LAYOUT (Fuerza Ancho 94% de la Ventana)
   ======================================================= */

/* Fondo general de la página */
[b-vq76axbrri] main {
    background-color: #f8f9fa; 
    padding-top: 0 !important;
}

/* ROMPER LOS LÍMITES DEL LAYOUT PARA OCUPAR EL 94% DE LA PANTALLA */
.main-container-90[b-vq76axbrri] {
    width: 94vw; /* Ocupa casi todo el ancho de la ventana */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -47vw; /* Centrado absoluto negativo */
    margin-right: -47vw;
    padding: 2rem 0;
}

/* En pantallas muy grandes, limitamos un poco el ancho máximo */
@media (min-width: 1920px) {
    .main-container-90[b-vq76axbrri] {
        width: 1800px;
        margin-left: auto;
        margin-right: auto;
        left: auto;
        right: auto;
    }
}


/* =======================================================
   2. BARRA DE HERRAMIENTAS (TOOLBAR)
   ======================================================= */

.toolbar-card[b-vq76axbrri] {
    background-color: #ffffff;
    border: 1px solid #f0f0f0 !important;
}

/* Inputs y Selects */
.form-control[b-vq76axbrri], .form-select[b-vq76axbrri] {
    border-radius: 10px;
    border: 1px solid #dee2e6;
    padding: 0.7rem 1rem;
    background-color: #fcfcfc;
    transition: border 0.2s;
}
.form-control:focus[b-vq76axbrri], .form-select:focus[b-vq76axbrri] {
    border-color: #0a2342;
    box-shadow: 0 0 0 4px rgba(10, 35, 66, 0.05);
}

.input-group-text[b-vq76axbrri] {
    border-radius: 10px 0 0 10px;
    border-color: #dee2e6;
    background-color: #fcfcfc;
}
.form-control.border-start-0[b-vq76axbrri] {
    border-radius: 0 20px 20px 0;
}

/* Botón Subir */
.btn-primary[b-vq76axbrri] {
    background-color: #0a2342;
    border-color: #0a2342;
    transition: transform 0.2s;
}
.btn-primary:hover[b-vq76axbrri] {
    background-color: #0f2d52;
    transform: translateY(-2px);
}


/* =======================================================
   3. TARJETAS DE DOCUMENTOS (DOC-CARD)
   ======================================================= */

.doc-card[b-vq76axbrri] {
    transition: all 0.2s ease;
    background: #ffffff;
    border: 1px solid #f0f0f0 !important;
    border-radius: 16px;
}

/* Efecto de Hover */
.doc-card:hover[b-vq76axbrri] {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
    border-color: #d1d9e6 !important;
}

/* Icono dentro de la tarjeta */
.doc-icon[b-vq76axbrri] {
    width: 55px; height: 55px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; flex-shrink: 0;
}

/* Colores de fondo de los Iconos */
.bg-primary-subtle[b-vq76axbrri] { background-color: #e3f2fd !important; color: #0d6efd !important; }
.bg-danger-subtle[b-vq76axbrri] { background-color: #fde8e8 !important; color: #dc3545 !important; }
.bg-light[b-vq76axbrri] { background-color: #f8f9fa !important; color: #6c757d !important; }

/* Botón Eliminar (Flotante) */
.delete-btn[b-vq76axbrri] {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
    background-color: white; border: 1px solid #eee;
}
.doc-card:hover .delete-btn[b-vq76axbrri] { opacity: 1; }
.delete-btn:hover[b-vq76axbrri] { background-color: #fee2e2; border-color: #fee2e2; }


/* =======================================================
   4. MODAL
   ======================================================= */

.form-label-sm[b-vq76axbrri] { 
    font-size: 0.75rem; 
    font-weight: 700; 
    color: #8898aa; 
    text-transform: uppercase; 
    margin-bottom: 5px; 
    display: block; 
}

.modern-input[b-vq76axbrri] { 
    border: 1px solid #dee2e6; 
    background-color: #f8f9fa; 
    padding: 0.7rem; 
    border-radius: 8px; 
}


.icon-warning-wrapper[b-vq76axbrri] {
    width: 90px; 
    height: 90px;
    background-color: #fff9e6; /* Amarillo muy suave */
    color: #ffc107; /* Amarillo alerta */
    border-radius: 30%; /* Círculo perfecto */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.modal-content[b-vq76axbrri] {
    border-radius: 50px;
    border: none;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    overflow: hidden
}

/* Ajuste del pie del modal para que respete la curva */
.modal-footer[b-vq76axbrri] {
    border-top: none;
    padding-bottom: 2rem; /* Más espacio abajo para que no se vea apretado por la curva */
}

.brand-logoChico[b-vq76axbrri]{
    height: 130%;        /* 1. Altura fija  */
    width: 100%;         /* 2. Ocupan el ancho de su columna */
    object-fit: contain; /* 3. La imagen se ajusta dentro sin estirarse */
    /*object-position: center 0% !important;*/
    margin-top: 10px ; 
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 5px;       
}

.divider-pill[b-vq76axbrri] {
    width: 60px;
    height: 6px;
    background-color: #0a2342; /* Azul corporativo */
    border-radius: 10px;
    margin-top: 1rem;
    opacity: 0.8;
}

.detalle-identidad-wrapper[b-vq76axbrri] {
        background-color: #f4f6f9; /* Tu color gris claro (ajusta el hex si es otro) */
        min-height: 100vh;         /* Ocupa al menos el 100% de la altura de la ventana */
        width: 100%;
        display: flex;             /* Ayuda a manejar márgenes colapsados */
        flex-direction: column;
    }
/* _content/ProyectEC/Components/Pages/MercadotecniaPage/IdentidadVisual.razor.rz.scp.css */

/* 2. CONFIGURACIÓN DE LA IMAGEN HERO (PARALLAX) */
.parallax-hero-section[b-cvvuog4fq9] {
    background-image: url('/Images/FondoHome.jpg'); /* <-- ¡TU IMAGEN! */
    height: 30vh;
    background-size: cover;      /* <--- CLAVE #1: Cubre todo el espacio sin deformar, recortando lo que sobre */
    background-position: center; 
    text-align: center;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.3);
}

/* Estilo del Texto sobre la imagen */
.hero-text[b-cvvuog4fq9] {
    color: white;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

.hero-text h1[b-cvvuog4fq9] { font-size: 4rem; font-weight: 800; color: #E9AC2E !important; }



.content-section[b-cvvuog4fq9] {
    padding: 1rem 2rem;
    background-color: #f4f7f6;
    position: relative; z-index: 2; 
}
/* --- 2. CATÁLOGO DE MARCAS --- */
.brands-section[b-cvvuog4fq9] {
    padding: 4rem 2rem;
    background-color: #f8f9fa;
}

.section-title[b-cvvuog4fq9] {
    text-align: center;
    margin-bottom: 3rem;
    color: #333;
    font-weight: 700;
}

/* --- ESTILOS DE TARJETA MEJORADOS --- */

.brand-card[b-cvvuog4fq9] {
    /* Mantenemos el estilo base */
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    cursor: pointer; /* Indica que es clickeable */
    transition: all 0.3s ease; /* Transición suave para los efectos */
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Efecto al pasar el mouse */
.brand-card:hover[b-cvvuog4fq9] {
    border-color: var(--primary-color,  #0a2342); /* O tu color corporativo */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Sombra elegante */
    transform: translateY(-5px); /* Se eleva ligeramente */
}

.brand-name[b-cvvuog4fq9] {
    margin-top: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
}

.brand-logo-placeholder[b-cvvuog4fq9] {
    font-size: 3rem;
    color: var(--primary-color, #007bff);
    margin-bottom: 5px;
}

.brand-desc[b-cvvuog4fq9] {
    font-size: 0.9rem;
    color: #888;
}

/* --- 3. SECCIÓN DE RECURSOS GENERALES (Abajo) --- */
.resources-preview[b-cvvuog4fq9] {
    padding: 2rem;
    background: white;
    margin-top: 2rem;
    border-radius: 12px;
}


/* tarjetas de marca  */
.card-ficha[b-cvvuog4fq9] {
        background-color: #fff;
        transition: all 0.3s ease;
        cursor: pointer;
        border: 1px solid #f0f0f0 !important; /* Borde muy sutil */
        border-radius: 20px;
    }

    /* Efecto al pasar el mouse: Sombra pronunciada y ligera elevación */
    .card-ficha:hover[b-cvvuog4fq9] {
        transform: translateY(-5px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,0.1) !important;
        border-color: transparent !important;
    }

    /* Círculos de color */
    .color-swatch[b-cvvuog4fq9] {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid #fff; /* Anillo blanco para separar si se enciman */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombrita para que resalten del blanco */
    }





.brand-logoChico[b-cvvuog4fq9]{
    height: 195px;        /* 1. Altura fija  */
    width: 100%;         /* 2. Ocupan el ancho de su columna */
    object-fit: contain; /* 3. La imagen se ajusta dentro sin estirarse */
    /*object-position: center 0% !important;*/
    margin-top: 10px ; 
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 5px;       
}

/* .brand-logoChico:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
} */


.divider-pill[b-cvvuog4fq9] {
    width: 60px;
    height: 6px;
    background-color: #0a2342; /* Azul corporativo */
    border-radius: 10px;
    margin-top: 1rem;
    opacity: 0.8;
}
/* _content/ProyectEC/Components/Pages/MercadotecniaPage/MarketingDashboard.razor.rz.scp.css */

[b-p3xq91cvp6] main {
    padding: 0 !important;
    background-color: #ffffff;
}

/* 2. CONFIGURACIÓN DE LA IMAGEN HERO (PARALLAX) */
.parallax-hero-section[b-p3xq91cvp6] {
    background-image: url('/Images/Banners/MERCA.webp'); 
    height: 30vh;
    background-size: cover;      /* <--- CLAVE #1: Cubre todo el espacio sin deformar, recortando lo que sobre */
    background-position: center; 
    text-align: center;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.3);
}

/* Estilo del Texto sobre la imagen */
.hero-text[b-p3xq91cvp6] {
    color: white;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

.hero-text h1[b-p3xq91cvp6] { font-size: 4rem; font-weight: 800; color: #E9AC2E !important; }

/* --- 3. CONTENIDO DE ABAJO --- */

.content-section[b-p3xq91cvp6] {
    padding: 1rem 2rem;
    background-color: #f4f7f6;
    position: relative; z-index: 2; 
}

/* Tarjeta Limpia (Asana Style) */
.asana-card[b-p3xq91cvp6] {
    background-color: #ffffff;
    border: none !important; /* Sin bordes */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Sombra suave */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    overflow: hidden;
}

.asana-card:hover[b-p3xq91cvp6] {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.icon-container[b-p3xq91cvp6] {
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}
.asana-card:hover .icon-container[b-p3xq91cvp6] { transform: scale(1.1); }

/* --- COLORES UNIFICADOS (AZUL OSCURO) --- */

/* Texto Primario (Títulos e Iconos) */
.text-primary[b-p3xq91cvp6] {
    color: #0a2342 !important; /* Azul Marino Oscuro */
}

/* Botones Outline */
.btn-outline-primary[b-p3xq91cvp6] {
    color: #0a2342;
    border-color: #0a2342;
    border-width: 2px;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    transition: all 0.2s;
}

.btn-outline-primary:hover[b-p3xq91cvp6] {
    background-color: #0a2342;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}

/* Estilos de texto */
.card-title[b-p3xq91cvp6] { font-weight: 700; margin-bottom: 0.5rem; color: #0a2342; }
.card-text[b-p3xq91cvp6] { font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.5rem; color: #6c757d; }




.ls-1[b-p3xq91cvp6] { letter-spacing: 2px; font-size: 0.75rem; font-weight: 700; }

.divider-pill[b-p3xq91cvp6] {
    width: 60px;
    height: 6px;
    background-color: #0a2342; /* Azul corporativo */
    border-radius: 10px;
    margin-top: 1rem;
    opacity: 0.8;
}
/* _content/ProyectEC/Components/Pages/MercadotecniaPage/MisSolicitudes.razor.rz.scp.css */
/* --- LAYOUT GENERAL --- */
.approval-layout[b-1fqgl4h1s9] {
    display: flex;
    height: calc(100vh - 60px); /* Altura fija */
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden; /* Sin scroll global */
}

/* --- SIDEBAR --- */
.requests-sidebar[b-1fqgl4h1s9] {
    width: 360px;
    background: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
    padding-top: 1rem;
}

.sidebar-header[b-1fqgl4h1s9] {
    padding: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    flex-shrink: 0;
}

/* Barra de Búsqueda */
.search-wrapper[b-1fqgl4h1s9] { position: relative; margin-top: 1rem; }
.search-icon[b-1fqgl4h1s9] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #adb5bd; font-size: 0.9rem; pointer-events: none;
}
.search-input[b-1fqgl4h1s9] {
    width: 100%; padding: 8px 12px 8px 35px;
    border-radius: 8px; border: 1px solid #e9ecef;
    background-color: #f8f9fa; font-size: 0.9rem; color: #495057; transition: all 0.2s ease;
}
.search-input:focus[b-1fqgl4h1s9] {
    outline: none; background-color: #ffffff; border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Filtros Tabs */
.filter-tabs[b-1fqgl4h1s9] {
    display: flex; gap: 4px; background-color: #f1f3f5; padding: 4px; border-radius: 8px; margin-top: 12px;
}
.filter-tab[b-1fqgl4h1s9] {
    flex: 1; border: none; background: transparent; padding: 6px;
    font-size: 0.75rem; font-weight: 600; color: #6c757d;
    border-radius: 6px; transition: all 0.2s ease; text-align: center; cursor: pointer;
}
.filter-tab:hover[b-1fqgl4h1s9] { color: #212529; background-color: rgba(255, 255, 255, 0.5); }
.filter-tab.active[b-1fqgl4h1s9] { background-color: #ffffff; color: #0d6efd; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Lista de Tickets */
.requests-list[b-1fqgl4h1s9] { flex-grow: 1; overflow-y: auto; padding: 0.5rem; }

.request-item[b-1fqgl4h1s9] {
    display: flex; align-items: center; padding: 12px; margin-bottom: 4px;
    border-radius: 8px; cursor: pointer; transition: background 0.2s; border: 1px solid transparent;
}
.request-item:hover[b-1fqgl4h1s9] { background-color: #f8f9fa; }
.request-item.active[b-1fqgl4h1s9] { background-color: #f0f7ff; border-left: 4px solid #0d6efd; }

.avatar-small[b-1fqgl4h1s9] { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-right: 12px; flex-shrink: 0; }

/* --- PANEL DE DETALLE --- */
.request-detail-panel[b-1fqgl4h1s9] {
    flex-grow: 1; display: flex; flex-direction: column;
    background-color: #f5f7fa; overflow: hidden; padding: 1rem;
}

.detail-content[b-1fqgl4h1s9] {
    background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
    padding-top: 2rem;
}

.detail-header[b-1fqgl4h1s9] {
    padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: flex; align-items: center;
}
.avatar-large[b-1fqgl4h1s9] { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-right: 1rem; }

/* Grid de Contenido */
.admin-content-grid[b-1fqgl4h1s9] { flex: 1; display: flex; overflow: hidden; }

/* Columna Izquierda */
.col-info[b-1fqgl4h1s9] { width: 50%; padding: 2rem; overflow-y: auto; border-right: 1px solid #f0f0f0; }

.section-label[b-1fqgl4h1s9] { display: block; font-size: 0.75rem; font-weight: 800; color: #adb5bd; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
.file-card[b-1fqgl4h1s9] { transition: all 0.2s; border: 1px solid #eee; }
.file-card:hover[b-1fqgl4h1s9] { background-color: #f8f9fa; border-color: #ddd; }

/* Columna Derecha (Chat) */
.col-chat[b-1fqgl4h1s9] { width: 50%; display: flex; flex-direction: column; background-color: #fff; }

.chat-header[b-1fqgl4h1s9] {
    padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f0;
    font-weight: 700; color: #6c757d; font-size: 0.8rem; text-transform: uppercase;
}

.chat-body[b-1fqgl4h1s9] {
    flex: 1; overflow-y: auto; padding: 1.5rem; background-color: #f8f9fa;
    display: flex; flex-direction: column; gap: 1rem;
}

.chat-footer[b-1fqgl4h1s9] { padding: 1rem; background: white; border-top: 1px solid #f0f0f0; }

/* Burbujas */
.chat-message[b-1fqgl4h1s9] { display: flex; flex-direction: column; max-width: 85%; }
.message-content[b-1fqgl4h1s9] { padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; position: relative; }

/* Usuario (Derecha - Azul) */
.align-self-end .message-content[b-1fqgl4h1s9] { background-color: #0d6efd; color: white; border-bottom-right-radius: 2px; }
.align-self-end .msg-meta[b-1fqgl4h1s9] { text-align: right; }

/* Admin/Marketing (Izquierda - Blanco) */
.align-self-start .message-content[b-1fqgl4h1s9] { background-color: white; border: 1px solid #e0e0e0; color: #333; border-bottom-left-radius: 2px; }

.msg-meta[b-1fqgl4h1s9] { font-size: 0.7rem; margin-top: 4px; opacity: 0.7; }

/* Scrollbar */
[b-1fqgl4h1s9]::-webkit-scrollbar { width: 6px; height: 6px; }
[b-1fqgl4h1s9]::-webkit-scrollbar-track { background: transparent; }
[b-1fqgl4h1s9]::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }
/* _content/ProyectEC/Components/Pages/RecursosHumanosPage/AprobarVacaciones.razor.rz.scp.css */
/* --- LAYOUT GENERAL --- */
.approval-layout[b-w7a4by91ln] {
    display: flex;
    height: calc(100vh - 60px);
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

/* --- SIDEBAR --- */
.requests-sidebar[b-w7a4by91ln] {
    width: 360px;
    background: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
}

.sidebar-header[b-w7a4by91ln] {
    padding: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    flex-shrink: 0;
}

/* Barra de Búsqueda */
.search-wrapper[b-w7a4by91ln] { position: relative; margin-top: 0.5rem; }
.search-icon[b-w7a4by91ln] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #adb5bd; font-size: 0.9rem; pointer-events: none;
}
.search-input[b-w7a4by91ln] {
    width: 100%; padding: 8px 12px 8px 35px;
    border-radius: 8px; border: 1px solid #e9ecef;
    background-color: #f8f9fa; font-size: 0.9rem; color: #495057; transition: all 0.2s ease;
}
.search-input:focus[b-w7a4by91ln] {
    outline: none; background-color: #ffffff; border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Filtros Tabs */
.filter-tabs[b-w7a4by91ln] {
    display: flex; gap: 4px; background-color: #f1f3f5; padding: 4px; border-radius: 8px; margin-top: 12px;
}
.filter-tab[b-w7a4by91ln] {
    flex: 1; border: none; background: transparent; padding: 6px;
    font-size: 0.75rem; font-weight: 600; color: #6c757d;
    border-radius: 6px; transition: all 0.2s ease; text-align: center; cursor: pointer;
}
.filter-tab:hover[b-w7a4by91ln] { color: #212529; background-color: rgba(255, 255, 255, 0.5); }
.filter-tab.active[b-w7a4by91ln] { background-color: #ffffff; color: #0d6efd; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Lista */
.requests-list[b-w7a4by91ln] { flex-grow: 1; overflow-y: auto; padding: 0.5rem; }

.request-item[b-w7a4by91ln] {
    display: flex; align-items: center; padding: 12px; margin-bottom: 4px;
    border-radius: 8px; cursor: pointer; transition: background 0.2s; border: 1px solid transparent;
}
.request-item:hover[b-w7a4by91ln] { background-color: #f8f9fa; }
.request-item.active[b-w7a4by91ln] { background-color: #f0f7ff; border-left: 4px solid #0d6efd; }

.avatar-small[b-w7a4by91ln] { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-right: 12px; flex-shrink: 0; }

.status-dot-small[b-w7a4by91ln] { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.status-dot-small.bg-danger[b-w7a4by91ln] { background-color: #dc3545; }
.status-dot-small.bg-warning[b-w7a4by91ln] { background-color: #ffc107; }
.status-dot-small.bg-success[b-w7a4by91ln] { background-color: #198754; }

/* --- PANEL DE DETALLE --- */
.request-detail-panel[b-w7a4by91ln] {
    flex-grow: 1; display: flex; flex-direction: column;
    background-color: #f5f7fa; overflow: hidden; padding: 1rem;
    padding-top: 2rem;
}

.detail-content[b-w7a4by91ln] {
    background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
}

.detail-header[b-w7a4by91ln] {
    padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: flex; align-items: center;
}
.avatar-large[b-w7a4by91ln] { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-right: 1rem; }

/* GRID */
.admin-content-grid[b-w7a4by91ln] { flex: 1; display: flex; overflow: hidden; }

/* --- COLUMNA IZQUIERDA (INFO) --- */
.col-info[b-w7a4by91ln] { 
    width: 50%; 
    padding: 2rem; 
    overflow-y: auto; 
    border-right: 1px solid #f0f0f0; 
    
    /* --- SCROLL OCULTO (Pero funcional) --- */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
/* Ocultar barra en Chrome/Safari/Opera */
.col-info[b-w7a4by91ln]::-webkit-scrollbar { 
    display: none; 
}

.section-label[b-w7a4by91ln] { display: block; font-size: 0.75rem; font-weight: 800; color: #adb5bd; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
.file-card[b-w7a4by91ln] { transition: all 0.2s; border: 1px solid #eee; }
.file-card:hover[b-w7a4by91ln] { background-color: #f8f9fa; border-color: #ddd; }

/* --- COLUMNA DERECHA (CHAT) --- */
.col-chat[b-w7a4by91ln] { width: 50%; display: flex; flex-direction: column; background-color: #fff; }

.chat-header[b-w7a4by91ln] {
    padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f0;
    font-weight: 700; color: #6c757d; font-size: 0.8rem; text-transform: uppercase;
}

.chat-body[b-w7a4by91ln] {
    flex: 1; overflow-y: auto; padding: 1.5rem; background-color: #f8f9fa;
    display: flex; flex-direction: column; gap: 1rem;

    /* --- SCROLL OCULTO PARA EL CHAT TAMBIÉN --- */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chat-body[b-w7a4by91ln]::-webkit-scrollbar {
    display: none;
}

.chat-footer[b-w7a4by91ln] { padding: 1rem; background: white; border-top: 1px solid #f0f0f0; }

/* BURBUJAS */
.chat-message[b-w7a4by91ln] { display: flex; flex-direction: column; max-width: 85%; }
.message-content[b-w7a4by91ln] { padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; position: relative; }

/* Admin (Derecha - Azul) */
.align-self-end .message-content[b-w7a4by91ln] { background-color: #0d6efd; color: white; border-bottom-right-radius: 2px; }
.align-self-end .msg-meta[b-w7a4by91ln] { text-align: right; }

/* Usuario (Izquierda - Blanco) */
.align-self-start .message-content[b-w7a4by91ln] { background-color: white; border: 1px solid #e0e0e0; color: #333; border-bottom-left-radius: 2px; }

.msg-meta[b-w7a4by91ln] { font-size: 0.7rem; margin-top: 4px; opacity: 0.7; }

/* Scrollbar Fina (Solo para la lista lateral, ahí sí se suele dejar visible pero delgada) */
[b-w7a4by91ln]::-webkit-scrollbar { width: 5px; height: 5px; }
[b-w7a4by91ln]::-webkit-scrollbar-track { background: transparent; }
[b-w7a4by91ln]::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }
[b-w7a4by91ln]::-webkit-scrollbar-thumb:hover { background: #ccc; }

/* --- CALENDARIO VISUAL --- */

.calendar-grid-header[b-w7a4by91ln] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 700;
    color: #adb5bd;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.calendar-grid[b-w7a4by91ln] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px; /* Espacio entre cuadros */
}

.calendar-day[b-w7a4by91ln] {
    min-height: 120px; /* Altura de cada cuadro */
    position: relative;
    transition: transform 0.2s;
}

.calendar-day:hover[b-w7a4by91ln] {
    background-color: #fcfcfc;
}

.calendar-day.empty[b-w7a4by91ln] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.day-number[b-w7a4by91ln] {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

/* Pastilla de Evento (El ticket) */
.event-pill[b-w7a4by91ln] {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    cursor: default;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

    .hide-scrollbar[b-w7a4by91ln]::-webkit-scrollbar {
        display: none;
    }

    .hide-scrollbar[b-w7a4by91ln] {
        -ms-overflow-style: none;
        scrollbar-width: none;
        overflow-y: auto;
    }

    .avatar-small[b-w7a4by91ln] {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f9fa;
    }

    .avatar-large[b-w7a4by91ln] {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f9fa;
        margin-right: 15px;
        flex-shrink: 0;
    }

    .avatar-xs[b-w7a4by91ln] {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .modal-backdrop-custom[b-w7a4by91ln] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(2px);
    }

    .modal-content-custom[b-w7a4by91ln] {
        background: white;
        width: 90%;
        max-width: 800px;
        height: 85vh;
        border-radius: 16px;
        padding: 20px;
        display: flex;
        flex-direction: column;
    }

    .calendar-grid-header[b-w7a4by91ln] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        font-weight: bold;
        color: #6c757d;
        font-size: 0.8rem;
        margin-bottom: 5px;
    }

    .calendar-grid[b-w7a4by91ln] {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        flex: 1;
        overflow-y: auto;
        gap: 4px;
        grid-auto-rows: 1fr;
    }

    .calendar-day[b-w7a4by91ln] {
        border: 1px solid #eee;
        border-radius: 6px;
        padding: 4px;
        min-height: 80px;
        display: flex;
        flex-direction: column;
        background: #fff;
    }

    .calendar-day.empty[b-w7a4by91ln] {
        background: transparent;
        border: none;
    }

    .day-number[b-w7a4by91ln] {
        font-size: 0.75rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 2px;
    }

    .day-number.today[b-w7a4by91ln] {
        color: #0d6efd;
    }

    .events-container[b-w7a4by91ln] {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .event-pill[b-w7a4by91ln] {
        background-color: #d1e7dd;
        color: #0f5132;
        font-size: 0.65rem;
        padding: 1px 4px;
        border-radius: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: help;
    }

    /* Nuevo estilo para el borde punteado */
    .border-dashed[b-w7a4by91ln] {
        border-style: dashed !important;
    }

/* _content/ProyectEC/Components/Pages/RecursosHumanosPage/BuzonAdmin.razor.rz.scp.css */
/* --- LAYOUT GENERAL --- */
.approval-layout[b-0tn7ofqazz] {
    display: flex;
    height: calc(100vh - 60px);
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

/* --- SIDEBAR --- */
.requests-sidebar[b-0tn7ofqazz] {
    width: 360px;
    background: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
}

.sidebar-header[b-0tn7ofqazz] {
    padding: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    flex-shrink: 0;
}

/* Barra de Búsqueda */
.search-wrapper[b-0tn7ofqazz] { position: relative; margin-top: 0.5rem; }
.search-icon[b-0tn7ofqazz] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #adb5bd; font-size: 0.9rem; pointer-events: none;
}
.search-input[b-0tn7ofqazz] {
    width: 100%; padding: 8px 12px 8px 35px;
    border-radius: 8px; border: 1px solid #e9ecef;
    background-color: #f8f9fa; font-size: 0.9rem; color: #495057; transition: all 0.2s ease;
}
.search-input:focus[b-0tn7ofqazz] {
    outline: none; background-color: #ffffff; border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Filtros Tabs */
.filter-tabs[b-0tn7ofqazz] {
    display: flex; gap: 4px; background-color: #f1f3f5; padding: 4px; border-radius: 8px; margin-top: 12px;
}
.filter-tab[b-0tn7ofqazz] {
    flex: 1; border: none; background: transparent; padding: 6px;
    font-size: 0.75rem; font-weight: 600; color: #6c757d;
    border-radius: 6px; transition: all 0.2s ease; text-align: center; cursor: pointer;
}
.filter-tab:hover[b-0tn7ofqazz] { color: #212529; background-color: rgba(255, 255, 255, 0.5); }
.filter-tab.active[b-0tn7ofqazz] { background-color: #ffffff; color: #0d6efd; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Lista */
.requests-list[b-0tn7ofqazz] { flex-grow: 1; overflow-y: auto; padding: 0.5rem; }

.request-item[b-0tn7ofqazz] {
    display: flex; align-items: center; padding: 12px; margin-bottom: 4px;
    border-radius: 8px; cursor: pointer; transition: background 0.2s; border: 1px solid transparent;
}
.request-item:hover[b-0tn7ofqazz] { background-color: #f8f9fa; }
.request-item.active[b-0tn7ofqazz] { background-color: #f0f7ff; border-left: 4px solid #0d6efd; }

.avatar-small[b-0tn7ofqazz] { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-right: 12px; flex-shrink: 0; }

.status-dot-small[b-0tn7ofqazz] { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.status-dot-small.bg-danger[b-0tn7ofqazz] { background-color: #dc3545; }
.status-dot-small.bg-warning[b-0tn7ofqazz] { background-color: #ffc107; }
.status-dot-small.bg-success[b-0tn7ofqazz] { background-color: #198754; }

/* --- PANEL DE DETALLE --- */
.request-detail-panel[b-0tn7ofqazz] {
    flex-grow: 1; display: flex; flex-direction: column;
    background-color: #f5f7fa; overflow: hidden; padding: 1rem;
    padding-top: 2rem;
}

.detail-content[b-0tn7ofqazz] {
    background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
}

.detail-header[b-0tn7ofqazz] {
    padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: flex; align-items: center;
}
.avatar-large[b-0tn7ofqazz] { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-right: 1rem; }

/* GRID */
.admin-content-grid[b-0tn7ofqazz] { flex: 1; display: flex; overflow: hidden; }

/* --- COLUMNA IZQUIERDA (INFO) --- */
.col-info[b-0tn7ofqazz] { 
    width: 50%; 
    padding: 2rem; 
    overflow-y: auto; 
    border-right: 1px solid #f0f0f0; 
    
    /* --- SCROLL OCULTO (Pero funcional) --- */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
/* Ocultar barra en Chrome/Safari/Opera */
.col-info[b-0tn7ofqazz]::-webkit-scrollbar { 
    display: none; 
}

.section-label[b-0tn7ofqazz] { display: block; font-size: 0.75rem; font-weight: 800; color: #adb5bd; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
.file-card[b-0tn7ofqazz] { transition: all 0.2s; border: 1px solid #eee; }
.file-card:hover[b-0tn7ofqazz] { background-color: #f8f9fa; border-color: #ddd; }

/* --- COLUMNA DERECHA (CHAT) --- */
.col-chat[b-0tn7ofqazz] { width: 50%; display: flex; flex-direction: column; background-color: #fff; }

.chat-header[b-0tn7ofqazz] {
    padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f0;
    font-weight: 700; color: #6c757d; font-size: 0.8rem; text-transform: uppercase;
}

.chat-body[b-0tn7ofqazz] {
    flex: 1; overflow-y: auto; padding: 1.5rem; background-color: #f8f9fa;
    display: flex; flex-direction: column; gap: 1rem;

    /* --- SCROLL OCULTO PARA EL CHAT TAMBIÉN --- */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chat-body[b-0tn7ofqazz]::-webkit-scrollbar {
    display: none;
}

.chat-footer[b-0tn7ofqazz] { padding: 1rem; background: white; border-top: 1px solid #f0f0f0; }

/* BURBUJAS */
.chat-message[b-0tn7ofqazz] { display: flex; flex-direction: column; max-width: 85%; }
.message-content[b-0tn7ofqazz] { padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; position: relative; }

/* Admin (Derecha - Azul) */
.align-self-end .message-content[b-0tn7ofqazz] { background-color: #0d6efd; color: white; border-bottom-right-radius: 2px; }
.align-self-end .msg-meta[b-0tn7ofqazz] { text-align: right; }

/* Usuario (Izquierda - Blanco) */
.align-self-start .message-content[b-0tn7ofqazz] { background-color: white; border: 1px solid #e0e0e0; color: #333; border-bottom-left-radius: 2px; }

.msg-meta[b-0tn7ofqazz] { font-size: 0.7rem; margin-top: 4px; opacity: 0.7; }

/* Scrollbar Fina (Solo para la lista lateral, ahí sí se suele dejar visible pero delgada) */
[b-0tn7ofqazz]::-webkit-scrollbar { width: 5px; height: 5px; }
[b-0tn7ofqazz]::-webkit-scrollbar-track { background: transparent; }
[b-0tn7ofqazz]::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }
[b-0tn7ofqazz]::-webkit-scrollbar-thumb:hover { background: #ccc; }

/* --- CALENDARIO VISUAL --- */

.calendar-grid-header[b-0tn7ofqazz] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 700;
    color: #adb5bd;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.calendar-grid[b-0tn7ofqazz] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px; /* Espacio entre cuadros */
}

.calendar-day[b-0tn7ofqazz] {
    min-height: 120px; /* Altura de cada cuadro */
    position: relative;
    transition: transform 0.2s;
}

.calendar-day:hover[b-0tn7ofqazz] {
    background-color: #fcfcfc;
}

.calendar-day.empty[b-0tn7ofqazz] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.day-number[b-0tn7ofqazz] {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

/* Pastilla de Evento (El ticket) */
.event-pill[b-0tn7ofqazz] {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    cursor: default;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
/* _content/ProyectEC/Components/Pages/RecursosHumanosPage/Employes/Employees.razor.rz.scp.css */
/* --- LAYOUT GENERAL (Estilo Sistema) --- */
.directory-layout[b-q88q3ezy7y] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px); /* Ajusta según tu navbar */
    background-color: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 20px;
    overflow: hidden;
}

/* --- HEADER SUPERIOR --- */
.directory-header[b-q88q3ezy7y] {
    background: #ffffff;
    border: 1px solid #d1d7db;
    border-radius: 12px;
    padding: 15px 25px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.header-title h4[b-q88q3ezy7y] { font-weight: 700; color: #111b21; margin: 0; }
.header-title p[b-q88q3ezy7y] { color: #54656f; font-size: 0.85rem; margin: 0; }

/* Barra de Búsqueda Moderna */
.search-wrapper[b-q88q3ezy7y] { position: relative; width: 350px; }
.search-icon[b-q88q3ezy7y] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #6c757d; font-size: 0.9rem; pointer-events: none;
}
.search-input[b-q88q3ezy7y] {
    width: 100%; padding: 10px 12px 10px 38px;
    border-radius: 8px; border: 1px solid #d1d7db;
    background-color: #f8f9fa; font-size: 0.9rem; transition: all 0.2s;
}
.search-input:focus[b-q88q3ezy7y] {
    outline: none; border-color: #0d6efd; background-color: #fff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Botón Recargar */
.btn-reload[b-q88q3ezy7y] {
    border: 1px solid #e9ecef; background: white; color: #54656f;
    border-radius: 8px; padding: 8px 12px; transition: all 0.2s;
}
.btn-reload:hover[b-q88q3ezy7y] { background: #f8f9fa; color: #0d6efd; border-color: #0d6efd; }

/* --- TABLA PRINCIPAL --- */
.table-card[b-q88q3ezy7y] {
    background: #ffffff;
    border: 1px solid #d1d7db;
    border-radius: 12px;
    flex: 1;
    overflow: hidden; /* Para que el scroll sea interno */
    display: flex; flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.table-scroll[b-q88q3ezy7y] {
    overflow-y: auto;
    flex: 1;
}

.custom-table[b-q88q3ezy7y] { width: 100%; border-collapse: separate; border-spacing: 0; }
.custom-table thead th[b-q88q3ezy7y] {
    background: #f8f9fa;
    position: sticky; top: 0; z-index: 10;
    padding: 15px;
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: #6c757d; font-weight: 700;
    border-bottom: 1px solid #e9ecef;
}

.custom-table tbody td[b-q88q3ezy7y] {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f2f5;
    font-size: 0.9rem;
    color: #212529;
    vertical-align: middle;
}
.custom-table tbody tr:hover[b-q88q3ezy7y] { background-color: #f8f9fa; }

/* Avatares en Tabla */
.avatar-table[b-q88q3ezy7y] {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #e9edef; color: #54656f; margin-right: 12px;
    font-weight: 600; font-size: 0.85rem;
}

/* Badges de Estado */
.status-badge[b-q88q3ezy7y] {
    padding: 4px 10px; border-radius: 50px; font-size: 0.75rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
}
.status-active[b-q88q3ezy7y] { background-color: #d1e7dd; color: #0f5132; }
.status-inactive[b-q88q3ezy7y] { background-color: #f8d7da; color: #842029; }

/* Scrollbar */
[b-q88q3ezy7y]::-webkit-scrollbar { width: 6px; height: 6px; }
[b-q88q3ezy7y]::-webkit-scrollbar-track { background: transparent; }
[b-q88q3ezy7y]::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }



    /* Arreglo visual de la barra de búsqueda */
    .search-wrapper-fix[b-q88q3ezy7y] {
        position: relative;
        width: 350px;
        background-color: #ffffff;
        border: 1px solid #d1d7db;
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 5px 12px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    
    .search-input-fix[b-q88q3ezy7y] {
        border: none !important;
        background: transparent !important;
        outline: none !important;
        box-shadow: none !important;
        width: 100%;
        font-size: 0.9rem;
        padding-left: 8px;
        color: #111b21;
    }

    /* Grid System para reemplazar la Tabla y permitir Virtualización */
    .virtual-table-header[b-q88q3ezy7y] {
        display: grid;
        /* Definimos columnas: Avatar+Nombre | Correo | Jefe | Ubicación | Puesto | Estatus */
        grid-template-columns: 2.5fr 2fr 1.8fr 1.2fr 1.5fr 100px; 
        gap: 10px;
        padding: 15px 20px;
        background-color: #f8f9fa;
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        color: #6c757d;
        border-bottom: 1px solid #e9ecef;
        position: sticky;
        top: 0;
        z-index: 10;
        letter-spacing: 0.5px;
    }

    .virtual-table-row[b-q88q3ezy7y] {
        display: grid;
        grid-template-columns: 2.5fr 2fr 1.8fr 1.2fr 1.5fr 100px;
        gap: 10px;
        padding: 12px 20px;
        border-bottom: 1px solid #f0f2f5;
        align-items: center;
        transition: background-color 0.2s;
        height: 72px; /* Altura fija necesaria para el cálculo del scroll */
        cursor: pointer;
        background-color: white;
    }

    .virtual-table-row:hover[b-q88q3ezy7y] {
        background-color: #f8f9fa;
    }

    /* Contenedor del scroll */
    .virtual-scroll-container[b-q88q3ezy7y] {
        height: 70vh; /* Altura de la lista visible */
        overflow-y: auto;
        background-color: white;
    }

    /* Ajuste de imagen en lista */
    .avatar-list-img[b-q88q3ezy7y] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
/* _content/ProyectEC/Components/Pages/RecursosHumanosPage/RecursosHumanos.razor.rz.scp.css */
    /* Estilos Pastel para Avisos */
    .bg-pastel-blue[b-e2j5slxiqw] {
        background-color: #f0f8ff;
        border: 1px solid #dbeafe !important;
    }

    .bg-pastel-yellow[b-e2j5slxiqw] {
        background-color: #fffbeb;
        border: 1px solid #fef3c7 !important;
    }

    /* Estilos Nuevos */
    .aviso-capsula:hover[b-e2j5slxiqw] {
        transform: translateY(-3px);
    }

    .object-fit-cover[b-e2j5slxiqw] {
        object-fit: cover;
    }

    .ls-1[b-e2j5slxiqw] {
        letter-spacing: 1px;
    }

    /* --- CAMBIO AQUÍ: Eliminado ::deep para mejor compatibilidad --- */
    /* Ajuste para que el contenido no quede pegado arriba */
    main[b-e2j5slxiqw] {
        background-color: #ffffff;
        /* Padding top lo manejamos en el Layout, aquí lo dejamos en 0 o lo quitamos */
    }

    /* Resto de tus estilos... */
    .parallax-hero-section[b-e2j5slxiqw] {
        background-image: url('/images/Banners/RH.webp');
        height: 30vh;
        background-size: cover;
        background-position: center;
        text-align: center;
        box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.3);
    }

    .hero-text[b-e2j5slxiqw] {
        color: white;
        text-align: center;
        text-shadow: 0 4px 15px rgba(0,0,0,0.8);
        width: 100%;
    }

    .hero-text h1[b-e2j5slxiqw] {
        font-size: 4rem;
        font-weight: 800;
        color: #E9AC2E !important;
    }

    .hero-text span[b-e2j5slxiqw] {
        font-size: 1rem;
        padding-top: 10px !important;
        letter-spacing: 2px;
        font-weight: 700;
        margin-bottom: 1rem;
        display: inline-block;
    }
    
    .content-section[b-e2j5slxiqw] {
        padding: 1rem 2rem;
        background-color: #f4f7f6;
        position: relative;
        z-index: 2;
    }

    .asana-card[b-e2j5slxiqw] {
        background-color: #ffffff;
        border: none !important;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        height: 100%;
        overflow: hidden;
    }

    .asana-card:hover[b-e2j5slxiqw] {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    }

    .icon-container[b-e2j5slxiqw] {
        margin-bottom: 1.5rem;
        transition: transform 0.3s ease;
    }

    .asana-card:hover .icon-container[b-e2j5slxiqw] {
        transform: scale(1.1);
    }

    .text-primary[b-e2j5slxiqw] {
        color: #011F41 !important;
    }

    .btn-outline-primary[b-e2j5slxiqw] {
        color: #011F41;
        border-color: #011F41;
        border-width: 2px;
        font-weight: 600;
        padding: 0.6rem 1.5rem;
        transition: all 0.2s;
    }

    .btn-outline-primary:hover[b-e2j5slxiqw] {
        background-color: #011F41;
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
    }

    .card-title[b-e2j5slxiqw] {
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #011F41;
    }

    .card-text[b-e2j5slxiqw] {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
        color: #6c757d;
    }

    .info-articles-container[b-e2j5slxiqw] {
        max-width: 1100px;
        margin: 0 auto;
        padding: 3rem 0;
    }

    .info-img[b-e2j5slxiqw] {
        width: 100%;
        height: auto;
        border-radius: 16px !important;
        object-fit: cover;
    }

    .info-title[b-e2j5slxiqw] {
        font-weight: 800;
        margin-bottom: 1.5rem;
        font-size: 2rem;
        line-height: 1.2;
    }

    .info-text[b-e2j5slxiqw] {
        font-size: 1.15rem;
        color: #555;
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }

    .info-list[b-e2j5slxiqw] {
        list-style-type: none;
        padding-left: 0;
        margin-top: 1.5rem;
    }

    .info-list li[b-e2j5slxiqw] {
        position: relative;
        padding-left: 2rem;
        margin-bottom: 1rem;
        font-size: 1.1rem;
        color: #444;
    }

    .info-list li[b-e2j5slxiqw]::before {
        content: "✔";
        color: #011F41;
        position: absolute;
        left: 0;
        font-weight: bold;
        font-size: 1.2rem;
        top: -2px;
    }

    @media (max-width: 768px) {
        .info-row[b-e2j5slxiqw] {
            flex-direction: column-reverse !important;
            text-align: center !important;
        }

        .info-row.flex-row-reverse[b-e2j5slxiqw] {
            flex-direction: column-reverse !important;
        }

        .info-row .col-md-6[b-e2j5slxiqw] {
            margin-bottom: 2rem;
        }

        .text-start[b-e2j5slxiqw] {
            text-align: center !important;
        }

        .hero-text h1[b-e2j5slxiqw] {
            font-size: 2.5rem;
        }
    }

    .ls-1[b-e2j5slxiqw] {
        letter-spacing: 2px;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .divider-pill[b-e2j5slxiqw] {
        width: 60px;
        height: 6px;
        background-color: #011F41;
        border-radius: 10px;
        margin-top: 1rem;
        opacity: 0.8;
    }

    .modal[b-e2j5slxiqw] {
        overscroll-behavior: contain;
    }


/* --- COLOR CORPORATIVO --- */
.bg-corporate[b-e2j5slxiqw] { background-color: #011F41 !important; }
.text-corporate[b-e2j5slxiqw] { color: #011F41 !important; }
.border-corporate[b-e2j5slxiqw] { border-color: #011F41 !important; }

.btn-corporate[b-e2j5slxiqw] {
    background-color: #011F41;
    color: white;
    border: none;
    transition: all 0.2s;
}
.btn-corporate:hover[b-e2j5slxiqw] {
    background-color: #00152e; /* Un tono más oscuro para hover */
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(1, 31, 65, 0.3);
}

/* --- TARJETA COMPACTA --- */
.news-card[b-e2j5slxiqw] {
    height: 380px; /* Altura fija para que todas sean iguales */
    border: 1px solid rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    background: white;
}

.news-card:hover[b-e2j5slxiqw] {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(1, 31, 65, 0.15) !important;
    border-color: #011F41;
}

/* --- IMAGEN DE PORTADA FIJA --- */
.news-img-container[b-e2j5slxiqw] {
    height: 140px; /* Altura estricta para la imagen */
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #f8f9fa;
}

.news-img-cover[b-e2j5slxiqw] {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para llenar el espacio sin deformar */
    object-position: center;
    transition: transform 0.5s ease;
}

.news-card:hover .news-img-cover[b-e2j5slxiqw] {
    transform: scale(1.05);
}

/* --- FECHA FLOTANTE --- */
.floating-date[b-e2j5slxiqw] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    padding: 5px 12px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    line-height: 1.1;
    z-index: 2;
    border: 1px solid rgba(0,0,0,0.05);
}

/* --- TEXTO CORTADO --- */
.text-clamp-3[b-e2j5slxiqw] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 4.5em; /* Asegura que ocupe el mismo espacio tenga texto o no */
}


/* --- CONTENEDOR DESLIZABLE --- */
.horizontal-scroll-wrapper[b-e2j5slxiqw] {
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    padding-bottom: 1rem; /* Espacio para el scrollbar */
    padding-left: 0.5rem; /* Margen de respiro inicial */
    padding-right: 0.5rem;
    
    /* Suavizado del scroll */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    
    /* Scroll Snap (Opcional: para que se detenga tarjeta por tarjeta) */
    scroll-snap-type: x mandatory;
}

/* Forzamos que las tarjetas no se encojan */
.news-card-wrapper[b-e2j5slxiqw] {
    flex: 0 0 auto; /* No encoger, no crecer, base auto */
    width: 320px;   /* Ancho fijo por tarjeta */
    scroll-snap-align: start;
}

/* --- ESTILIZAR BARRA DE SCROLL (Webkit) --- */
.horizontal-scroll-wrapper[b-e2j5slxiqw]::-webkit-scrollbar {
    height: 8px;
}

.horizontal-scroll-wrapper[b-e2j5slxiqw]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.horizontal-scroll-wrapper[b-e2j5slxiqw]::-webkit-scrollbar-thumb {
    background: #011F41; /* Tu color corporativo */
    border-radius: 10px;
    opacity: 0.5;
}

.horizontal-scroll-wrapper[b-e2j5slxiqw]::-webkit-scrollbar-thumb:hover {
    background: #00152e;
}














    /* --- 1. CONFIGURACIÓN DEL CARRUSEL --- */
    .admin-carousel[b-e2j5slxiqw] {
        display: flex;
        flex-wrap: nowrap;          
        overflow-x: auto;           
        gap: 1.5rem;                
        padding: 20px 20px 30px 20px; 
        
        /* TRUCO PARA CENTRAR: */
        justify-content: center; 
        
        /* Scrollbar fina */
        scrollbar-width: thin;
        scrollbar-color: #011F41 #f0f0f0;
    }

    /* SEGURIDAD PARA MÓVILES Y PANTALLAS PEQUEÑAS:
       Si la pantalla es menor a 1200px (aprox cuando caben 3-4 tarjetas),
       alineamos a la izquierda para garantizar que el scroll funcione bien 
       y no corte el contenido inicial. */
    @media (max-width: 1200px) {
        .admin-carousel[b-e2j5slxiqw] {
            justify-content: flex-start; 
        }
    }

    .admin-carousel[b-e2j5slxiqw]::-webkit-scrollbar { height: 8px; }
    .admin-carousel[b-e2j5slxiqw]::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px; }
    .admin-carousel[b-e2j5slxiqw]::-webkit-scrollbar-thumb { background: #011F41; border-radius: 4px; }

    /* --- 2. CONTENEDOR DE TARJETA (Uniformidad) --- */
    .carousel-card-wrapper[b-e2j5slxiqw] {
        flex: 0 0 auto;   
        width: 280px;     /* Ancho exacto igual para todos */
    }

    /* --- 3. ESTILO DE LA TARJETA (Curvas y Sombra) --- */
    .card-saru-uniform[b-e2j5slxiqw] {
        border: 1px solid rgba(1, 31, 65, 0.1);
        border-radius: 1rem; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background-color: #fff;
        height: 100%; 
    }

    .card-saru-uniform:hover[b-e2j5slxiqw] {
        transform: translateY(-5px); 
        box-shadow: 0 10px 25px rgba(1, 31, 65, 0.15);
        border-color: rgba(1, 31, 65, 0.3);
    }

    /* --- 4. TEXTOS E ICONOS --- */
    .text-saru[b-e2j5slxiqw] { color: #011F41 !important; }
    
    .icon-container[b-e2j5slxiqw] {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        color: #011F41;
    }

    /* --- 5. BOTÓN GHOST (Transparente -> Azul) --- */
    .btn-saru-outline[b-e2j5slxiqw] {
        color: #011F41;
        background-color: transparent; /* Fondo transparente por defecto */
        border: 2px solid #011F41; 
        font-weight: bold;
        transition: all 0.3s ease;
    }

    /* Efecto al pasar el mouse (Hover) */
    .card-saru-uniform:hover .btn-saru-outline[b-e2j5slxiqw], /* Se activa al pasar mouse sobre la tarjeta */
    .btn-saru-outline:hover[b-e2j5slxiqw] {                    /* O sobre el botón */
        background-color: #011F41;
        color: #ffffff;
    }

/* _content/ProyectEC/Components/Pages/RecursosHumanosPage/SolicitudVacacionesForm.razor.rz.scp.css */
/* --- 1. BANNER (Imagen de fondo) --- */
.rh-form-banner[b-8c4bzw8gy2] {
    background-image: url('/images/evento-1.jpg'); 
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%; 
    /* Filtro sutil para que no robe atención */
    filter: brightness(0.9);
}

/* --- 2. ESTILOS DE FORMULARIO MODERNO --- */

/* Etiquetas (Labels) */
.form-label-sm[b-8c4bzw8gy2] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8898aa; /* Gris azulado suave */
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Inputs Modernos (Limpios) */
.modern-input[b-8c4bzw8gy2] {
    border: 1px solid #e9ecef; /* Borde muy claro por defecto */
    background-color: #f8f9fa; /* Fondo gris muy tenue */
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    color: #495057;
    transition: all 0.2s ease;
    box-shadow: none;
}

/* Estado Focus (Al escribir) */
.modern-input:focus[b-8c4bzw8gy2] {
    background-color: #ffffff;
    border-color: var(--saru-blue, #0a2342); /* Se ilumina con tu azul corporativo */
    box-shadow: 0 0 0 4px rgba(10, 35, 66, 0.05); /* Halo muy suave */
    color: #0a2342;
}

/* Ajuste para Selects */
select.modern-input[b-8c4bzw8gy2] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    appearance: none; /* Quita el estilo nativo feo */
}

/* --- 3. BOTÓN DE ENVIAR --- */
.btn-modern-submit[b-8c4bzw8gy2] {
    background-color: var(--saru-blue, #0a2342);
    border: none;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-modern-submit:hover[b-8c4bzw8gy2] {
    transform: translateY(-2px); /* Se levanta un poco */
    box-shadow: 0 10px 20px rgba(10, 35, 66, 0.2) !important;
    background-color: #0f2d52; /* Un poco más claro */
}

.btn-modern-submit:active[b-8c4bzw8gy2] {
    transform: translateY(0);
}
/* _content/ProyectEC/Components/Pages/ResponsabilidadSocialPage/ResponsabilidadSocial.razor.rz.scp.css */
/* 1. Hacemos transparente el contenedor principal */
[b-gzonxg5sci] main {
    padding: 0 !important;
    background-color: transparent !important;
}

.full-page-wrapper[b-gzonxg5sci] {
    background-color: transparent;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

.parallax-hero-section[b-gzonxg5sci] {
    background-image: url('/Images/Banners/RESPONSABILIDAD SOCIAL.webp'); 
    height: 60vh;
    background-size: cover;     
    background-position: center; 
    text-align: center;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.3);
    /* background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    width: 100%;
    position: relative; 
    z-index: 0; */
}

/* 2. FONDO FIJO: Lo enviamos al fondo y desactivamos clics */
.hero-fixed-bg[b-gzonxg5sci] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh;
    background-image: url('/images/Banners/RESPONSABILIDAD SOCIAL.png');
    background-position: center;
    background-size: cover;
    z-index: -1;
    will-change: transform;
    pointer-events: none;
}

/* 3. CAPA DE TEXTO: Esta era la culpable */
.hero-content-overlay[b-gzonxg5sci] {
    position: relative;
    height: 50vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    /* <--- SOLUCIÓN: Deja pasar el clic al menú */
}

/* 4. Pero queremos que el texto sí se pueda seleccionar */
.hero-text[b-gzonxg5sci] {
    text-align: center;
    pointer-events: auto;
    /* <--- Reactivamos clics solo para el texto */
}

.hero-text h1[b-gzonxg5sci] {
    font-size: 3.5rem;
    font-weight: 800;
    color: #E9AC2E !important;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* --- CAPA DE CONTENIDO BLANCO --- */
.content-layer[b-gzonxg5sci] {
    position: relative;
    z-index: 2;
    background-color: #f8f9fa;
    /* border-top-left-radius: 2rem;
    border-top-right-radius: 2rem; */
    margin-top: -2rem;
    padding-bottom: 4rem;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
    pointer-events: auto;
    /* El contenido debe ser interactivo */
}

/* --- ESTILOS GENERALES (Carrusel, Textos, etc.) --- */
.section-title[b-gzonxg5sci] {
    text-align: center;
    margin-bottom: 2rem;
    color: #1a3c6d;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.5rem;
}

/* Carrusel */
.carousel-wrapper[b-gzonxg5sci] {
    position: relative;
    width: 100%;
    padding: 0 1rem;
}

.stories-container[b-gzonxg5sci] {
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    padding: 1rem 0 2rem 0;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.stories-container[b-gzonxg5sci]::-webkit-scrollbar {
    display: none;
}

.story-card[b-gzonxg5sci] {
    flex: 0 0 auto;
    width: 320px;
    height: 500px;
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    scroll-snap-align: start;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    background-color: #1a3c6d;
    pointer-events: auto;
    /* Aseguramos que las tarjetas reciban clics */
}

.story-card:hover[b-gzonxg5sci] {
    transform: translateY(-5px);
}

.story-img[b-gzonxg5sci] {
    width: 100%;
    height: 150%;
    object-fit:cover;
    margin-top: -120px;

}

.story-overlay[b-gzonxg5sci] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    color: white;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.story-title[b-gzonxg5sci] {
    font-weight: 800;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    color: #E9AC2E;
}

.story-desc[b-gzonxg5sci] {
    font-size: 0.95rem;
    opacity: 0.95;
    line-height: 1.4;
    margin-bottom: 0;
    font-weight: 400;
}

/* Botones */
.nav-btn[b-gzonxg5sci] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    color: #1a3c6d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 10;
    transition: all 0.2s;
    cursor: pointer;
    opacity: 0.9;
    pointer-events: auto;
}

.nav-btn:hover[b-gzonxg5sci] {
    background-color: #1a3c6d;
    color: white;
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
}

.nav-prev[b-gzonxg5sci] {
    left: -10px;
}

.nav-next[b-gzonxg5sci] {
    right: -10px;
}

@media (max-width: 768px) {
    .hero-text h1[b-gzonxg5sci] {
        font-size: 2.5rem;
    }

    .story-card[b-gzonxg5sci] {
        width: 85vw;
        height: 450px;
    }

    .nav-btn[b-gzonxg5sci] {
        display: none;
    }
}
/* _content/ProyectEC/Components/Pages/SeguridadHigienePage/GestionIncidenciasDashboard.razor.rz.scp.css */
/* --- HERO SECTION (Igual al de Seguridad) --- */
[b-un6ks4u4mw] main { padding: 0 !important; background-color: #ffffff; }

.parallax-hero-section[b-un6ks4u4mw] {
    /* Puedes usar una imagen diferente, ej: un mapa o centro de control */
    background-image: url('/images/Banners/SEGURIDAD E HIGIENE.webp'); 
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    height: 40vh; 
    width: 100%;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    margin-left: 50%; transform: translateX(-50%);
}

.hero-text[b-un6ks4u4mw] {
    color: white;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}
.hero-text h1[b-un6ks4u4mw] { font-size: 4rem; font-weight: 800; color: #E9AC2E !important; }
.hero-text p[b-un6ks4u4mw] { font-size: 1.5rem; }


/* --- CONTENIDO --- */
.content-section[b-un6ks4u4mw] {
    padding: 4rem 2rem;
    background-color: #f8f9fa;
    min-height: 60vh;
}

.section-title[b-un6ks4u4mw] {
    text-align: center;
    color: var(--saru-blue, #1a3c6d);
    font-weight: 700;
    margin-bottom: 3rem;
}

/* --- TARJETAS DE SUCURSAL --- */
.branch-card[b-un6ks4u4mw] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    height: 220px; /* Altura fija para uniformidad */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.branch-card:hover[b-un6ks4u4mw] {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: transparent;
}

/* Estilo del Logo dentro de la tarjeta */
.branch-logo-img[b-un6ks4u4mw] {
    max-width: 70%;
    max-height: 80px;
    object-fit: contain;
    margin-bottom: 1.5rem;
    filter: grayscale(100%); /* Efecto elegante: blanco y negro por defecto */
    opacity: 0.8;
    transition: all 0.3s ease;
}

.branch-card:hover .branch-logo-img[b-un6ks4u4mw] {
    filter: grayscale(0%); /* A color al pasar el mouse */
    opacity: 1;
    transform: scale(1.1);
}

.branch-name[b-un6ks4u4mw] {
    font-weight: 700;
    color: #333;
    font-size: 1.1rem;
}

/* Badge de contador (Opcional: para mostrar cuántos pendientes hay) */
.pending-badge[b-un6ks4u4mw] {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #dc3545;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3);
}
/* _content/ProyectEC/Components/Pages/SeguridadHigienePage/ListaReportes.razor.rz.scp.css */
/* --- LAYOUT GENERAL --- */
.approval-layout[b-4p0lum9kva] {
    display: flex;
    height: calc(100vh - 60px);
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

/* --- SIDEBAR --- */
.requests-sidebar[b-4p0lum9kva] {
    width: 360px;
    background: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
}

.sidebar-header[b-4p0lum9kva] {
    padding: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    flex-shrink: 0;
}

/* Barra de Búsqueda */
.search-wrapper[b-4p0lum9kva] { position: relative; margin-top: 0.5rem; }
.search-icon[b-4p0lum9kva] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #adb5bd; font-size: 0.9rem; pointer-events: none;
}
.search-input[b-4p0lum9kva] {
    width: 100%; padding: 8px 12px 8px 35px;
    border-radius: 8px; border: 1px solid #e9ecef;
    background-color: #f8f9fa; font-size: 0.9rem; color: #495057; transition: all 0.2s ease;
}
.search-input:focus[b-4p0lum9kva] {
    outline: none; background-color: #ffffff; border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Filtros Tabs */
.filter-tabs[b-4p0lum9kva] {
    display: flex; gap: 4px; background-color: #f1f3f5; padding: 4px; border-radius: 8px; margin-top: 12px;
}
.filter-tab[b-4p0lum9kva] {
    flex: 1; border: none; background: transparent; padding: 6px;
    font-size: 0.75rem; font-weight: 600; color: #6c757d;
    border-radius: 6px; transition: all 0.2s ease; text-align: center; cursor: pointer;
}
.filter-tab:hover[b-4p0lum9kva] { color: #212529; background-color: rgba(255, 255, 255, 0.5); }
.filter-tab.active[b-4p0lum9kva] { background-color: #ffffff; color: #0d6efd; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Lista */
.requests-list[b-4p0lum9kva] { flex-grow: 1; overflow-y: auto; padding: 0.5rem; }

.request-item[b-4p0lum9kva] {
    display: flex; align-items: center; padding: 12px; margin-bottom: 4px;
    border-radius: 8px; cursor: pointer; transition: background 0.2s; border: 1px solid transparent;
}
.request-item:hover[b-4p0lum9kva] { background-color: #f8f9fa; }
.request-item.active[b-4p0lum9kva] { background-color: #f0f7ff; border-left: 4px solid #0d6efd; }

.avatar-small[b-4p0lum9kva] { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-right: 12px; flex-shrink: 0; }

.status-dot-small[b-4p0lum9kva] { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.status-dot-small.bg-danger[b-4p0lum9kva] { background-color: #dc3545; }
.status-dot-small.bg-warning[b-4p0lum9kva] { background-color: #ffc107; }
.status-dot-small.bg-success[b-4p0lum9kva] { background-color: #198754; }

/* --- PANEL DE DETALLE --- */
.request-detail-panel[b-4p0lum9kva] {
    flex-grow: 1; display: flex; flex-direction: column;
    background-color: #f5f7fa; overflow: hidden; padding: 1rem;
    padding-top: 2rem;
}

.detail-content[b-4p0lum9kva] {
    background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
}

.detail-header[b-4p0lum9kva] {
    padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: flex; align-items: center;
}
.avatar-large[b-4p0lum9kva] { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-right: 1rem; }

/* GRID */
.admin-content-grid[b-4p0lum9kva] { flex: 1; display: flex; overflow: hidden; }

/* --- COLUMNA IZQUIERDA (INFO) --- */
.col-info[b-4p0lum9kva] { 
    width: 50%; 
    padding: 2rem; 
    overflow-y: auto; 
    border-right: 1px solid #f0f0f0; 
    
    /* --- SCROLL OCULTO (Pero funcional) --- */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
/* Ocultar barra en Chrome/Safari/Opera */
.col-info[b-4p0lum9kva]::-webkit-scrollbar { 
    display: none; 
}

.section-label[b-4p0lum9kva] { display: block; font-size: 0.75rem; font-weight: 800; color: #adb5bd; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
.file-card[b-4p0lum9kva] { transition: all 0.2s; border: 1px solid #eee; }
.file-card:hover[b-4p0lum9kva] { background-color: #f8f9fa; border-color: #ddd; }

/* --- COLUMNA DERECHA (CHAT) --- */
.col-chat[b-4p0lum9kva] { width: 50%; display: flex; flex-direction: column; background-color: #fff; }

.chat-header[b-4p0lum9kva] {
    padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f0;
    font-weight: 700; color: #6c757d; font-size: 0.8rem; text-transform: uppercase;
}

.chat-body[b-4p0lum9kva] {
    flex: 1; overflow-y: auto; padding: 1.5rem; background-color: #f8f9fa;
    display: flex; flex-direction: column; gap: 1rem;

    /* --- SCROLL OCULTO PARA EL CHAT TAMBIÉN --- */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chat-body[b-4p0lum9kva]::-webkit-scrollbar {
    display: none;
}

.chat-footer[b-4p0lum9kva] { padding: 1rem; background: white; border-top: 1px solid #f0f0f0; }

/* BURBUJAS */
.chat-message[b-4p0lum9kva] { display: flex; flex-direction: column; max-width: 85%; }
.message-content[b-4p0lum9kva] { padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; position: relative; }

/* Admin (Derecha - Azul) */
.align-self-end .message-content[b-4p0lum9kva] { background-color: #0d6efd; color: white; border-bottom-right-radius: 2px; }
.align-self-end .msg-meta[b-4p0lum9kva] { text-align: right; }

/* Usuario (Izquierda - Blanco) */
.align-self-start .message-content[b-4p0lum9kva] { background-color: white; border: 1px solid #e0e0e0; color: #333; border-bottom-left-radius: 2px; }

.msg-meta[b-4p0lum9kva] { font-size: 0.7rem; margin-top: 4px; opacity: 0.7; }

/* Scrollbar Fina (Solo para la lista lateral, ahí sí se suele dejar visible pero delgada) */
[b-4p0lum9kva]::-webkit-scrollbar { width: 5px; height: 5px; }
[b-4p0lum9kva]::-webkit-scrollbar-track { background: transparent; }
[b-4p0lum9kva]::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }
[b-4p0lum9kva]::-webkit-scrollbar-thumb:hover { background: #ccc; }

/* --- CALENDARIO VISUAL --- */

.calendar-grid-header[b-4p0lum9kva] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 700;
    color: #adb5bd;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.calendar-grid[b-4p0lum9kva] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px; /* Espacio entre cuadros */
}

.calendar-day[b-4p0lum9kva] {
    min-height: 120px; /* Altura de cada cuadro */
    position: relative;
    transition: transform 0.2s;
}

.calendar-day:hover[b-4p0lum9kva] {
    background-color: #fcfcfc;
}

.calendar-day.empty[b-4p0lum9kva] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.day-number[b-4p0lum9kva] {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

/* Pastilla de Evento (El ticket) */
.event-pill[b-4p0lum9kva] {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    cursor: default;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
/* _content/ProyectEC/Components/Pages/SeguridadHigienePage/ReporteIncidenciaSEH.razor.rz.scp.css */
/* --- 1. BANNER (Imagen de Seguridad) --- */
.security-form-banner[b-536auyjs5i] {
    /* Asegúrate de tener security-hero.jpg en wwwroot/images/ */
    background-image: url('/images/security-hero.jpg'); 
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%; 
    filter: brightness(0.8); 
}

/* --- 2. ESTILOS MODERNOS --- */

/* Etiquetas */
.form-label-sm[b-536auyjs5i] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8898aa;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Inputs */
.modern-input[b-536auyjs5i] {
    border: 1px solid #e9ecef;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    color: #495057;
    transition: all 0.2s ease;
    box-shadow: none;
}

.modern-input:focus[b-536auyjs5i] {
    background-color: #ffffff;
    border-color: var(--saru-blue, #0a2342);
    box-shadow: 0 0 0 4px rgba(10, 35, 66, 0.05);
    color: #0a2342;
}

/* Selects */
select.modern-input[b-536auyjs5i] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    appearance: none;
}

/* Textarea */
textarea.modern-input[b-536auyjs5i] {
    resize: vertical;
    min-height: 100px;
}

/* Botón */
.btn-modern-submit[b-536auyjs5i] {
    background-color: var(--saru-blue, #0a2342);
    border: none;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-modern-submit:hover[b-536auyjs5i] {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(10, 35, 66, 0.2) !important;
    background-color: #0f2d52;
}

.btn-modern-submit:active[b-536auyjs5i] {
    transform: translateY(0);
}
/* _content/ProyectEC/Components/Pages/SeguridadHigienePage/SeguridadH.razor.rz.scp.css */
/* Limpieza del layout para que la imagen toque el borde */
[b-me7oyu04pv] main {
    padding: 0 !important;
    background-color: #ffffff;
}

/* --- 1. HERO PARALLAX --- */
.parallax-hero-section[b-me7oyu04pv] {
    /* Sube una imagen relacionada con seguridad industrial/cascos/chalecos */
    background-image: url('/images/Banners/SEGURIDAD E HIGIENE.webp'); 
    height: 30vh;
    background-size: cover;      /* <--- CLAVE #1: Cubre todo el espacio sin deformar, recortando lo que sobre */
    background-position: center; 
    text-align: center;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.3);
}

.hero-text[b-me7oyu04pv] {
    color: white;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}
.hero-text h1[b-me7oyu04pv] { font-size: 4rem; font-weight: 800; color: #E9AC2E !important; }
.hero-text p[b-me7oyu04pv] { font-size: 1.5rem; }


/* =========================================
   3. CONTENIDO Y TARJETAS (ESTILO UNIFICADO)
   ========================================= */
.content-section[b-me7oyu04pv] {
    padding: 1rem 2rem;
    background-color: #f4f7f6;
    position: relative; z-index: 2; 
}

/* Tarjeta Limpia (Asana Style) */
.asana-card[b-me7oyu04pv] {
    background-color: #ffffff;
    border: none !important; /* Sin bordes */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Sombra suave */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    overflow: hidden;
}

.asana-card:hover[b-me7oyu04pv] {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.icon-container[b-me7oyu04pv] {
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}
.asana-card:hover .icon-container[b-me7oyu04pv] { transform: scale(1.1); }

/* --- COLORES UNIFICADOS (AZUL OSCURO) --- */

/* Texto Primario (Títulos e Iconos) */
.text-primary[b-me7oyu04pv] {
    color: #0a2342 !important; /* Azul Marino Oscuro */
}

/* Botones Outline */
.btn-outline-primary[b-me7oyu04pv] {
    color: #0a2342;
    border-color: #0a2342;
    border-width: 2px;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    transition: all 0.2s;
}

.btn-outline-primary:hover[b-me7oyu04pv] {
    background-color: #0a2342;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}

/* Estilos de texto */
.card-title[b-me7oyu04pv] { font-weight: 700; margin-bottom: 0.5rem; color: #0a2342; }
.card-text[b-me7oyu04pv] { font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.5rem; color: #6c757d; }



/* --- NOTICIAS DE DIFUSIÓN (Estilo Blog) --- */
.info-card[b-me7oyu04pv] {
    border: none;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s;
    height: 100%;
    background: white;
}
.info-card:hover[b-me7oyu04pv] { transform: scale(1.02); }
.info-img-top[b-me7oyu04pv] {
    height: 200px;
    object-fit: cover;
    width: 100%;
}
.info-body[b-me7oyu04pv] { padding: 1.5rem; }
.info-date[b-me7oyu04pv] { font-size: 0.8rem; color: #888; margin-bottom: 0.5rem; display: block; }
.info-title[b-me7oyu04pv] { font-weight: 700; font-size: 1.1rem; color: #333; margin-bottom: 0.5rem; }


.ls-1[b-me7oyu04pv] { letter-spacing: 2px; font-size: 0.75rem; font-weight: 700; }

.divider-pill[b-me7oyu04pv] {
    width: 60px;
    height: 6px;
    background-color: #0a2342; /* Azul corporativo */
    border-radius: 10px;
    margin-top: 1rem;
    opacity: 0.8;
}
/* _content/ProyectEC/Components/Pages/SeguridadPatrimonialPage/GestionSeguridadPatrimonial.razor.rz.scp.css */
/* --- LAYOUT GENERAL --- */
.approval-layout[b-4jh257s1y1] {
    display: flex;
    height: calc(100vh - 60px);
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

/* --- SIDEBAR --- */
.requests-sidebar[b-4jh257s1y1] {
    width: 360px;
    background: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
}

.sidebar-header[b-4jh257s1y1] {
    padding: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    flex-shrink: 0;
}

/* Barra de Búsqueda */
.search-wrapper[b-4jh257s1y1] { position: relative; margin-top: 0.5rem; }
.search-icon[b-4jh257s1y1] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #adb5bd; font-size: 0.9rem; pointer-events: none;
}
.search-input[b-4jh257s1y1] {
    width: 100%; padding: 8px 12px 8px 35px;
    border-radius: 8px; border: 1px solid #e9ecef;
    background-color: #f8f9fa; font-size: 0.9rem; color: #495057; transition: all 0.2s ease;
}
.search-input:focus[b-4jh257s1y1] {
    outline: none; background-color: #ffffff; border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Filtros Tabs */
.filter-tabs[b-4jh257s1y1] {
    display: flex; gap: 4px; background-color: #f1f3f5; padding: 4px; border-radius: 8px; margin-top: 12px;
}
.filter-tab[b-4jh257s1y1] {
    flex: 1; border: none; background: transparent; padding: 6px;
    font-size: 0.75rem; font-weight: 600; color: #6c757d;
    border-radius: 6px; transition: all 0.2s ease; text-align: center; cursor: pointer;
}
.filter-tab:hover[b-4jh257s1y1] { color: #212529; background-color: rgba(255, 255, 255, 0.5); }
.filter-tab.active[b-4jh257s1y1] { background-color: #ffffff; color: #0d6efd; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Lista */
.requests-list[b-4jh257s1y1] { flex-grow: 1; overflow-y: auto; padding: 0.5rem; }

.request-item[b-4jh257s1y1] {
    display: flex; align-items: center; padding: 12px; margin-bottom: 4px;
    border-radius: 8px; cursor: pointer; transition: background 0.2s; border: 1px solid transparent;
}
.request-item:hover[b-4jh257s1y1] { background-color: #f8f9fa; }
.request-item.active[b-4jh257s1y1] { background-color: #f0f7ff; border-left: 4px solid #0d6efd; }

.avatar-small[b-4jh257s1y1] { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-right: 12px; flex-shrink: 0; }

.status-dot-small[b-4jh257s1y1] { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.status-dot-small.bg-danger[b-4jh257s1y1] { background-color: #dc3545; }
.status-dot-small.bg-warning[b-4jh257s1y1] { background-color: #ffc107; }
.status-dot-small.bg-success[b-4jh257s1y1] { background-color: #198754; }

/* --- PANEL DE DETALLE --- */
.request-detail-panel[b-4jh257s1y1] {
    flex-grow: 1; display: flex; flex-direction: column;
    background-color: #f5f7fa; overflow: hidden; padding: 1rem;
    padding-top: 2rem;
}

.detail-content[b-4jh257s1y1] {
    background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
}

.detail-header[b-4jh257s1y1] {
    padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: flex; align-items: center;
}
.avatar-large[b-4jh257s1y1] { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-right: 1rem; }

/* GRID */
.admin-content-grid[b-4jh257s1y1] { flex: 1; display: flex; overflow: hidden; }

/* --- COLUMNA IZQUIERDA (INFO) --- */
.col-info[b-4jh257s1y1] { 
    width: 50%; 
    padding: 2rem; 
    overflow-y: auto; 
    border-right: 1px solid #f0f0f0; 
    
    /* --- SCROLL OCULTO (Pero funcional) --- */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
/* Ocultar barra en Chrome/Safari/Opera */
.col-info[b-4jh257s1y1]::-webkit-scrollbar { 
    display: none; 
}

.section-label[b-4jh257s1y1] { display: block; font-size: 0.75rem; font-weight: 800; color: #adb5bd; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
.file-card[b-4jh257s1y1] { transition: all 0.2s; border: 1px solid #eee; }
.file-card:hover[b-4jh257s1y1] { background-color: #f8f9fa; border-color: #ddd; }

/* --- COLUMNA DERECHA (CHAT) --- */
.col-chat[b-4jh257s1y1] { width: 50%; display: flex; flex-direction: column; background-color: #fff; }

.chat-header[b-4jh257s1y1] {
    padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f0;
    font-weight: 700; color: #6c757d; font-size: 0.8rem; text-transform: uppercase;
}

.chat-body[b-4jh257s1y1] {
    flex: 1; overflow-y: auto; padding: 1.5rem; background-color: #f8f9fa;
    display: flex; flex-direction: column; gap: 1rem;

    /* --- SCROLL OCULTO PARA EL CHAT TAMBIÉN --- */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chat-body[b-4jh257s1y1]::-webkit-scrollbar {
    display: none;
}

.chat-footer[b-4jh257s1y1] { padding: 1rem; background: white; border-top: 1px solid #f0f0f0; }

/* BURBUJAS */
.chat-message[b-4jh257s1y1] { display: flex; flex-direction: column; max-width: 85%; }
.message-content[b-4jh257s1y1] { padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; position: relative; }

/* Admin (Derecha - Azul) */
.align-self-end .message-content[b-4jh257s1y1] { background-color: #0d6efd; color: white; border-bottom-right-radius: 2px; }
.align-self-end .msg-meta[b-4jh257s1y1] { text-align: right; }

/* Usuario (Izquierda - Blanco) */
.align-self-start .message-content[b-4jh257s1y1] { background-color: white; border: 1px solid #e0e0e0; color: #333; border-bottom-left-radius: 2px; }

.msg-meta[b-4jh257s1y1] { font-size: 0.7rem; margin-top: 4px; opacity: 0.7; }

/* Scrollbar Fina (Solo para la lista lateral, ahí sí se suele dejar visible pero delgada) */
[b-4jh257s1y1]::-webkit-scrollbar { width: 5px; height: 5px; }
[b-4jh257s1y1]::-webkit-scrollbar-track { background: transparent; }
[b-4jh257s1y1]::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }
[b-4jh257s1y1]::-webkit-scrollbar-thumb:hover { background: #ccc; }

/* --- CALENDARIO VISUAL --- */

.calendar-grid-header[b-4jh257s1y1] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 700;
    color: #adb5bd;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.calendar-grid[b-4jh257s1y1] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px; /* Espacio entre cuadros */
}

.calendar-day[b-4jh257s1y1] {
    min-height: 120px; /* Altura de cada cuadro */
    position: relative;
    transition: transform 0.2s;
}

.calendar-day:hover[b-4jh257s1y1] {
    background-color: #fcfcfc;
}

.calendar-day.empty[b-4jh257s1y1] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.day-number[b-4jh257s1y1] {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

/* Pastilla de Evento (El ticket) */
.event-pill[b-4jh257s1y1] {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    cursor: default;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
/* _content/ProyectEC/Components/Pages/SeguridadPatrimonialPage/ReporteIncidencia.razor.rz.scp.css */
/* --- 1. BANNER (Imagen de Seguridad) --- */
.security-form-banner[b-pjy9yo07c7] {
    /* Asegúrate de tener security-banner.jpg en wwwroot/images/ */
    background-image: url('/images/security-hero.jpg'); 
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%; 
    filter: brightness(0.8); /* Un poco oscuro para seriedad */
}

/* --- 2. ESTILOS MODERNOS (Copiados de los otros formularios) --- */

/* Etiquetas */
.form-label-sm[b-pjy9yo07c7] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8898aa;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Inputs */
.modern-input[b-pjy9yo07c7] {
    border: 1px solid #e9ecef;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    color: #495057;
    transition: all 0.2s ease;
    box-shadow: none;
}

.modern-input:focus[b-pjy9yo07c7] {
    background-color: #ffffff;
    border-color: var(--saru-blue, #0a2342);
    box-shadow: 0 0 0 4px rgba(10, 35, 66, 0.05);
    color: #0a2342;
}

/* Selects */
select.modern-input[b-pjy9yo07c7] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    appearance: none;
}

/* Botón */
.btn-modern-submit[b-pjy9yo07c7] {
    background-color: var(--saru-blue, #0a2342);
    border: none;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-modern-submit:hover[b-pjy9yo07c7] {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(10, 35, 66, 0.2) !important;
    background-color: #0f2d52;
}

.btn-modern-submit:active[b-pjy9yo07c7] {
    transform: translateY(0);
}
/* _content/ProyectEC/Components/Pages/SeguridadPatrimonialPage/Seguridad.razor.rz.scp.css */
[b-z9qr4dsoza] main { background-color: #fff; padding: 0 !important; }

.parallax-hero-section[b-z9qr4dsoza] {
    background-image: url('/images/Banners/SEGURIDAD PATRIMONIAL.webp');
    height: 30vh;
    background-size: cover;      /* <--- CLAVE #1: Cubre todo el espacio sin deformar, recortando lo que sobre */
    background-position: center; 
    text-align: center;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.3);
}
.hero-text[b-z9qr4dsoza] { color: white; text-align: center; text-shadow: 2px 2px 8px rgba(0,0,0,0.8); }
.hero-text h1[b-z9qr4dsoza] { font-size: 4rem; font-weight: 800; color: #E9AC2E !important; }



/* =========================================
   3. CONTENIDO Y TARJETAS (ESTILO UNIFICADO)
   ========================================= */
.content-section[b-z9qr4dsoza] {
    padding: 1rem 2rem;
    background-color: #f4f7f6;
    position: relative; z-index: 2; 
}

/* Tarjeta Limpia (Asana Style) */
.asana-card[b-z9qr4dsoza] {
    background-color: #ffffff;
    border: none !important; /* Sin bordes */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Sombra suave */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    overflow: hidden;
}

.asana-card:hover[b-z9qr4dsoza] {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.icon-container[b-z9qr4dsoza] {
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}
.asana-card:hover .icon-container[b-z9qr4dsoza] { transform: scale(1.1); }

/* --- COLORES UNIFICADOS (AZUL OSCURO) --- */

/* Texto Primario (Títulos e Iconos) */
.text-primary[b-z9qr4dsoza] {
    color: #0a2342 !important; /* Azul Marino Oscuro */
}

/* Botones Outline */
.btn-outline-primary[b-z9qr4dsoza] {
    color: #0a2342;
    border-color: #0a2342;
    border-width: 2px;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    transition: all 0.2s;
}

.btn-outline-primary:hover[b-z9qr4dsoza] {
    background-color: #0a2342;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}

/* Estilos de texto */
.card-title[b-z9qr4dsoza] { font-weight: 700; margin-bottom: 0.5rem; color: #0a2342; }
.card-text[b-z9qr4dsoza] { font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.5rem; color: #6c757d; }

.ls-1[b-z9qr4dsoza] { letter-spacing: 2px; font-size: 0.75rem; font-weight: 700; }

.divider-pill[b-z9qr4dsoza] {
    width: 60px;
    height: 6px;
    background-color: #0a2342; /* Azul corporativo */
    border-radius: 10px;
    margin-top: 1rem;
    opacity: 0.8;
}
/* _content/ProyectEC/Components/Pages/TIPages/TIAdmin/GestionTicketsTI.razor.rz.scp.css */
/* --- LAYOUT GENERAL --- */
.approval-layout[b-qj6uqjava1] {
    display: flex;
    height: calc(100vh - 60px);
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

/* --- SIDEBAR --- */
.requests-sidebar[b-qj6uqjava1] {
    width: 360px;
    background: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
}

.sidebar-header[b-qj6uqjava1] {
    padding: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    flex-shrink: 0;
}

/* Barra de Búsqueda */
.search-wrapper[b-qj6uqjava1] { position: relative; margin-top: 0.5rem; }
.search-icon[b-qj6uqjava1] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #adb5bd; font-size: 0.9rem; pointer-events: none;
}
.search-input[b-qj6uqjava1] {
    width: 100%; padding: 8px 12px 8px 35px;
    border-radius: 8px; border: 1px solid #e9ecef;
    background-color: #f8f9fa; font-size: 0.9rem; color: #495057; transition: all 0.2s ease;
}
.search-input:focus[b-qj6uqjava1] {
    outline: none; background-color: #ffffff; border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Filtros Tabs */
.filter-tabs[b-qj6uqjava1] {
    display: flex; gap: 4px; background-color: #f1f3f5; padding: 4px; border-radius: 8px; margin-top: 12px;
}
.filter-tab[b-qj6uqjava1] {
    flex: 1; border: none; background: transparent; padding: 6px;
    font-size: 0.75rem; font-weight: 600; color: #6c757d;
    border-radius: 6px; transition: all 0.2s ease; text-align: center; cursor: pointer;
}
.filter-tab:hover[b-qj6uqjava1] { color: #212529; background-color: rgba(255, 255, 255, 0.5); }
.filter-tab.active[b-qj6uqjava1] { background-color: #ffffff; color: #0d6efd; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Lista */
.requests-list[b-qj6uqjava1] { flex-grow: 1; overflow-y: auto; padding: 0.5rem; }

.request-item[b-qj6uqjava1] {
    display: flex; align-items: center; padding: 12px; margin-bottom: 4px;
    border-radius: 8px; cursor: pointer; transition: background 0.2s; border: 1px solid transparent;
}
.request-item:hover[b-qj6uqjava1] { background-color: #f8f9fa; }
.request-item.active[b-qj6uqjava1] { background-color: #f0f7ff; border-left: 4px solid #0d6efd; }

.avatar-small[b-qj6uqjava1] { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-right: 12px; flex-shrink: 0; }

.status-dot-small[b-qj6uqjava1] { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.status-dot-small.bg-danger[b-qj6uqjava1] { background-color: #dc3545; }
.status-dot-small.bg-warning[b-qj6uqjava1] { background-color: #ffc107; }
.status-dot-small.bg-success[b-qj6uqjava1] { background-color: #198754; }

/* --- PANEL DE DETALLE --- */
.request-detail-panel[b-qj6uqjava1] {
    flex-grow: 1; display: flex; flex-direction: column;
    background-color: #f5f7fa; overflow: hidden; padding: 1rem;
    padding-top: 2rem;
}

.detail-content[b-qj6uqjava1] {
    background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
}

.detail-header[b-qj6uqjava1] {
    padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: flex; align-items: center;
}
.avatar-large[b-qj6uqjava1] { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-right: 1rem; }

/* GRID */
.admin-content-grid[b-qj6uqjava1] { flex: 1; display: flex; overflow: hidden; }

/* --- COLUMNA IZQUIERDA (INFO) --- */
.col-info[b-qj6uqjava1] { 
    width: 50%; 
    padding: 2rem; 
    overflow-y: auto; 
    border-right: 1px solid #f0f0f0; 
    
    /* --- SCROLL OCULTO (Pero funcional) --- */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
/* Ocultar barra en Chrome/Safari/Opera */
.col-info[b-qj6uqjava1]::-webkit-scrollbar { 
    display: none; 
}

.section-label[b-qj6uqjava1] { display: block; font-size: 0.75rem; font-weight: 800; color: #adb5bd; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
.file-card[b-qj6uqjava1] { transition: all 0.2s; border: 1px solid #eee; }
.file-card:hover[b-qj6uqjava1] { background-color: #f8f9fa; border-color: #ddd; }

/* --- COLUMNA DERECHA (CHAT) --- */
.col-chat[b-qj6uqjava1] { width: 50%; display: flex; flex-direction: column; background-color: #fff; }

.chat-header[b-qj6uqjava1] {
    padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f0;
    font-weight: 700; color: #6c757d; font-size: 0.8rem; text-transform: uppercase;
}

.chat-body[b-qj6uqjava1] {
    flex: 1; overflow-y: auto; padding: 1.5rem; background-color: #f8f9fa;
    display: flex; flex-direction: column; gap: 1rem;

    /* --- SCROLL OCULTO PARA EL CHAT TAMBIÉN --- */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chat-body[b-qj6uqjava1]::-webkit-scrollbar {
    display: none;
}

.chat-footer[b-qj6uqjava1] { padding: 1rem; background: white; border-top: 1px solid #f0f0f0; }

/* BURBUJAS */
.chat-message[b-qj6uqjava1] { display: flex; flex-direction: column; max-width: 85%; }
.message-content[b-qj6uqjava1] { padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; position: relative; }

/* Admin (Derecha - Azul) */
.align-self-end .message-content[b-qj6uqjava1] { background-color: #0d6efd; color: white; border-bottom-right-radius: 2px; }
.align-self-end .msg-meta[b-qj6uqjava1] { text-align: right; }

/* Usuario (Izquierda - Blanco) */
.align-self-start .message-content[b-qj6uqjava1] { background-color: white; border: 1px solid #e0e0e0; color: #333; border-bottom-left-radius: 2px; }

.msg-meta[b-qj6uqjava1] { font-size: 0.7rem; margin-top: 4px; opacity: 0.7; }

/* Scrollbar Fina (Solo para la lista lateral, ahí sí se suele dejar visible pero delgada) */
[b-qj6uqjava1]::-webkit-scrollbar { width: 5px; height: 5px; }
[b-qj6uqjava1]::-webkit-scrollbar-track { background: transparent; }
[b-qj6uqjava1]::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }
[b-qj6uqjava1]::-webkit-scrollbar-thumb:hover { background: #ccc; }

/* --- CALENDARIO VISUAL --- */

.calendar-grid-header[b-qj6uqjava1] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 700;
    color: #adb5bd;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.calendar-grid[b-qj6uqjava1] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px; /* Espacio entre cuadros */
}

.calendar-day[b-qj6uqjava1] {
    min-height: 120px; /* Altura de cada cuadro */
    position: relative;
    transition: transform 0.2s;
}

.calendar-day:hover[b-qj6uqjava1] {
    background-color: #fcfcfc;
}

.calendar-day.empty[b-qj6uqjava1] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.day-number[b-qj6uqjava1] {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

/* Pastilla de Evento (El ticket) */
.event-pill[b-qj6uqjava1] {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    cursor: default;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
/* _content/ProyectEC/Components/Pages/TIPages/TIAssetTracking/AssetTracking.razor.rz.scp.css */
/* =========================================
   1. LAYOUT PRINCIPAL (Sin scroll global)
   ========================================= */
[b-18i4w2clj8] main {
    background-color: #f8f9fa;
    padding-top: 0 !important;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-container-90[b-18i4w2clj8] {
    width: 95%;
    max-width: 1920px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 1.5rem;
}

@media (min-width: 992px) {
    .main-container-90[b-18i4w2clj8] {
        width: 90%;
    }
}

/* =========================================
   2. ENCABEZADO STICKY
   ========================================= */
.page-header-sticky[b-18i4w2clj8] {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0 0 16px 16px;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    margin-bottom: 1.5rem;
}

/* Buscador */
.modern-input-search[b-18i4w2clj8] {
    border: 1px solid #dee2e6;
    background-color: #fcfcfc;
    padding: 0.7rem 1rem;
}
.modern-input-search:focus[b-18i4w2clj8] {
    background-color: #fff;
    border-color: #0a2342;
    box-shadow: 0 0 0 0.2rem rgba(10, 35, 66, 0.1);
}
.input-group-text[b-18i4w2clj8] { background-color: #fcfcfc; border-color: #dee2e6; }

/* Botones */
.btn-primary[b-18i4w2clj8] { background-color: #0a2342; border-color: #0a2342; transition: transform 0.2s; }
.btn-primary:hover[b-18i4w2clj8] { background-color: #0f2d52; transform: translateY(-2px); }


/* =========================================
   3. TABLA CON SCROLL (CARD-TABLE-WRAPPER)
   ========================================= */
.card-table-wrapper[b-18i4w2clj8] {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: none;
    
    flex: 1; /* Ocupa todo el espacio vertical sobrante */
    overflow: hidden; /* Oculta lo que se salga del borde redondeado */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Necesario para que flexbox active el scroll */
}

.table-scroll[b-18i4w2clj8] {
    overflow-x: auto; 
    overflow-y: auto;
    width: 100%;
    height: calc(90vh - 200px);

}

.custom-table[b-18i4w2clj8] {
    margin-bottom: 0;
    white-space: nowrap; /* Evita que el texto se parta */
}

/* Encabezados Fijos */
.custom-table thead th[b-18i4w2clj8] {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa;
    border-bottom: 2px solid #e8e8e8;
    color: #8898aa;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.custom-table tbody td[b-18i4w2clj8] {
    padding: 1rem;
    font-size: 0.9rem;
    border-bottom: 1px solid #f9f9f9;
    vertical-align: middle;
    color: #525f7f;
}

.table-hover tbody tr:hover[b-18i4w2clj8] { background-color: #f8faff; }

/* =========================================
   4. BADGES
   ========================================= */
.badge[b-18i4w2clj8] { padding: 0.5em 0.9em; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.3px; }
.bg-success-subtle[b-18i4w2clj8] { background-color: #e6fffa !important; color: #2dce89 !important; border: 1px solid #ccf5eb !important; }
.bg-secondary-subtle[b-18i4w2clj8] { background-color: #e9ecef !important; color: #525f7f !important; border: 1px solid #dee2e6 !important; }
.text-primary[b-18i4w2clj8] { color: #0a2342 !important; }

.btn-outline-primary[b-18i4w2clj8] {
    color: #011F41;
    border-color: #011F41;
    border-width: 2px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-outline-primary:hover[b-18i4w2clj8] {
    background-color: #011F41;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}

.badge-glass-practicante[b-18i4w2clj8]{
    
}
/* _content/ProyectEC/Components/Pages/TIPages/TIAssetTracking/AssignEquipment.razor.rz.scp.css */
/* --- BANNER DE ACTIVOS --- */
.asset-form-banner[b-pyu7an4xk1] {
    background-image: url('/Images/fondos/laptop-bg.jpg'); /* Asegúrate de tener una imagen aquí o usa un color */
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); /* Fallback si no hay imagen */
    width: 100%;
    height: 100%;
}

/* --- FORMULARIO MODERNO (Copiado de Tickets) --- */
.form-label-sm[b-pyu7an4xk1] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8898aa;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.modern-input[b-pyu7an4xk1] {
    border: 1px solid #e9ecef;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    color: #495057;
    transition: all 0.2s ease;
    box-shadow: none;
}

.modern-input:focus[b-pyu7an4xk1] {
    background-color: #ffffff;
    border-color: #0a2342;
    box-shadow: 0 0 0 4px rgba(10, 35, 66, 0.05);
    color: #0a2342;
}

/* Ajuste específico para Radzen dentro de este diseño */
.modern-radzen-wrapper .rz-autocomplete[b-pyu7an4xk1] {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.btn-modern-submit[b-pyu7an4xk1] {
    background-color: #011F41; /* Tu azul corporativo */
    border: none;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-modern-submit:hover[b-pyu7an4xk1] {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(10, 35, 66, 0.2) !important;
    background-color: #0f2d52;
}

.btn-outline-danger:hover[b-pyu7an4xk1]{
    color: red;

}

.btn-outline-danger[b-pyu7an4xk1]{
    color: red;
}

.text-primary[b-pyu7an4xk1] {
    color: #0a2342 !important; /* Azul Marino Oscuro */
}

.btn-outline-primary[b-pyu7an4xk1] {
    color: #0a2342;
    border-color: #0a2342;
    border-width: 2px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-outline-primary:hover[b-pyu7an4xk1] {
        transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(10, 35, 66, 0.2) !important;
    background-color: #0f2d52;
    color: white;
}

.btn-primary2[b-pyu7an4xk1] {
    background-color: #ffffff;
    color: #0a2342;
    border-color: #0a2342;
    border-width: 2px;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-primary2:hover[b-pyu7an4xk1] {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(10, 35, 66, 0.2) !important;
    background-color: #0f2d52;
    color: white;
}

.btn-check:checked + .btn-outline-primary[b-pyu7an4xk1] {
        background-color: #011F41 !important; /* <--- CAMBIA ESTE CÓDIGO HEX POR TU COLOR */
        border-color: #011F41 !important;
        color: white !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Opcional: Sombra suave */
    }

    /* .btn-outline-primary:hover {
        background-color: #ffffff !important;
        color: white !important;
    } */

    .btn-check:not(:checked) + .btn-outline-primary:hover[b-pyu7an4xk1] {
    background-color: transparent !important; /* Fondo transparente o blanco */
    color: #0b213b !important; /* El color del texto/borde original (Azul Bootstrap) */
    border-color: #0b213b !important;
    box-shadow: none !important; /* Quita el resplandor si lo hubiera */
}

.btn-otro[b-pyu7an4xk1] {
        background-color: #011F41
 !important; /* Azul Marino Oscuro */
        color: white;
        border-width: 2px;
        font-weight: 600;
        /* box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3); */
}

.btn-registrar:hover[b-pyu7an4xk1] {
        background-color: #133865 !important; /* Azul Marino Oscuro */
        color: white;
        border-width: 2px;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}
/* _content/ProyectEC/Components/Pages/TIPages/TIAssetTracking/ComputerEquipment.razor.rz.scp.css */
/* =========================================
   1. BLOQUEAR SCROLL DE LA PÁGINA
   ========================================= */
[b-0rrjv68mua] main {
    height: 100vh; /* Altura exacta de la ventana */
    overflow: hidden; /* Prohibido scrollear la página entera */
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    padding: 0 !important;
}

.main-container-90[b-0rrjv68mua] {
    width: 95%;
    max-width: 1920px;
    margin: 0 auto;
    height: 100%; /* Ocupa el 100% del padre (main) */
    display: flex;
    flex-direction: column; /* Organiza header y tabla en columna */
    padding-bottom: 1.5rem; /* Un poco de aire abajo */
}

@media (min-width: 992px) {
    .main-container-90[b-0rrjv68mua] {
        width: 90%;
    }
}

/* =========================================
   2. ENCABEZADO FIJO (No se mueve)
   ========================================= */
.page-header-sticky[b-0rrjv68mua] {
    flex-shrink: 0; /* Impide que se encoja */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0 0 16px 16px;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    margin-bottom: 1.5rem;
}

/* Estilos de inputs y botones del header */
.modern-input-search[b-0rrjv68mua] {
    border: 1px solid #dee2e6;
    background-color: #fcfcfc;
    padding: 0.7rem 1rem;
}
.modern-input-search:focus[b-0rrjv68mua] {
    background-color: #fff;
    border-color: #0a2342;
    box-shadow: 0 0 0 0.2rem rgba(10, 35, 66, 0.1);
}
.input-group-text[b-0rrjv68mua] { background-color: #fcfcfc; border-color: #dee2e6; }

.btn-primary[b-0rrjv68mua] { background-color: #0a2342; border-color: #0a2342; transition: transform 0.2s; }
.btn-primary:hover[b-0rrjv68mua] { background-color: #0f2d52; transform: translateY(-2px); }


/* =========================================
   3. CONTENEDOR DE TABLA (El único con Scroll)
   ========================================= */
.card-table-wrapper[b-0rrjv68mua] {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: none;
    
    /* MAGIA DEL SCROLL INTERNO: */
    flex: 1; /* Ocupa todo el espacio vertical sobrante */
    overflow: hidden; /* Oculta lo que se salga del borde redondeado */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Necesario para que flexbox active el scroll */
}

.table-scroll[b-0rrjv68mua] {
    overflow-x: auto; 
    overflow-y: auto;
    width: 100%;
    height: calc(90vh - 200px);

}

.custom-table[b-0rrjv68mua] {
    margin-bottom: 0;
    white-space: nowrap; /* Fuerza scroll horizontal si es ancha */
    width: 100%;
}

/* Encabezados Sticky (Siempre visibles al bajar) */
.custom-table thead th[b-0rrjv68mua] {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa;
    border-bottom: 2px solid #e8e8e8;
    color: #8898aa;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.custom-table tbody td[b-0rrjv68mua] {
    padding: 1rem;
    font-size: 0.9rem;
    border-bottom: 1px solid #f9f9f9;
    vertical-align: middle;
    color: #525f7f;
}

.table-hover tbody tr:hover[b-0rrjv68mua] { background-color: #f8faff; }

/* =========================================
   4. BADGES
   ========================================= */
.badge[b-0rrjv68mua] { padding: 0.5em 0.9em; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.3px; }
.bg-success-subtle[b-0rrjv68mua] { background-color: #e6fffa !important; color: #2dce89 !important; border: 1px solid #ccf5eb !important; }
.bg-danger-subtle[b-0rrjv68mua] { background-color: #fcebeb !important; color: #f5365c !important; border: 1px solid #faddfe !important; }
.bg-warning-subtle[b-0rrjv68mua] { background-color: #fff8e6 !important; color: #fb6340 !important; border: 1px solid #ffe5d0 !important; }
.bg-secondary-subtle[b-0rrjv68mua] { background-color: #e9ecef !important; color: #525f7f !important; border: 1px solid #dee2e6 !important; }
.text-primary[b-0rrjv68mua] { color: #0a2342 !important; }

.btn-group.rounded-pill .btn:first-child[b-0rrjv68mua] {
        border-top-left-radius: 50rem !important;
        border-bottom-left-radius: 50rem !important;
    }

    .btn-group.rounded-pill .btn:last-child[b-0rrjv68mua] {
        border-top-right-radius: 50rem !important;
        border-bottom-right-radius: 50rem !important;
    }

    .btn-primary[b-0rrjv68mua]{
    border-width: 2.5px;
    }

    .btn-outline-primary[b-0rrjv68mua] {
    color: #0a2342;
    border-color: #0a2342;
    border-width: 2px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-outline-primary:hover[b-0rrjv68mua] {
    background-color: #0a2342;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}

    .btn-registrar[b-0rrjv68mua] {
        background-color: #0a2342 !important; /* Azul Marino Oscuro */
        color: white;
        border-width: 2px;
        font-weight: 600;
        /* box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3); */
}

.btn-registrar:hover[b-0rrjv68mua] {
        background-color: #133865 !important; /* Azul Marino Oscuro */
        color: white;
        border-width: 2px;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}
/* _content/ProyectEC/Components/Pages/TIPages/TIAssetTracking/DetailsAssignment.razor.rz.scp.css */
/* VARIABLES DE COLOR */
.details-view-container[b-otr6k5u9gf] {
    --saru-blue: #011F41;
    --saru-light: #f0f4f8;
    --text-muted: #8898aa;
    --text-dark: #32325d;
    padding-bottom: 3rem;
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ANIMACIÓN DE ENTRADA */
.fade-in[b-otr6k5u9gf] { animation: fadeInUp-b-otr6k5u9gf 0.5s ease-out; }
@keyframes fadeInUp-b-otr6k5u9gf {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* TÍTULOS */
.page-title[b-otr6k5u9gf] {
    color: var(--saru-blue);
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* BOTONES */
.btn-modern[b-otr6k5u9gf] {
    border-radius: 50px; /* Bordes redondeados modernos */
    padding: 0.5rem 1.2rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.btn-modern:hover[b-otr6k5u9gf] { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* Botón Personalizado SARU */
.btn-saru[b-otr6k5u9gf] {
    background-color: var(--saru-blue);
    color: white;
    border: 1px solid var(--saru-blue);
}
.btn-saru:hover[b-otr6k5u9gf] {
    background-color: #0d2b4d; /* Un poco más claro al hover */
    color: white;
}

/* TEXTOS DE COLOR PERSONALIZADO */
.text-saru[b-otr6k5u9gf] { color: var(--saru-blue) !important; }

/* TARJETAS LIMPIAS (Sin Bordes, Con Sombra) */
.card-clean[b-otr6k5u9gf] {
    border: none; /* PEDIDO: Sin bordes */
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); /* PEDIDO: Sombra suave */
    transition: transform 0.3s ease;
    overflow: hidden;
}

.card-clean:hover[b-otr6k5u9gf] {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* Header de la Tarjeta */
.card-header-clean[b-otr6k5u9gf] {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.03); /* Separación casi invisible */
}

.header-title[b-otr6k5u9gf] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--saru-blue);
    letter-spacing: 0.5px;
}

.icon-circle[b-otr6k5u9gf] {
    width: 40px; height: 40px;
    background-color: var(--saru-light);
    color: var(--saru-blue);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}

/* Grid de Información */
.info-grid[b-otr6k5u9gf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas dentro de la tarjeta */
    gap: 1.5rem;
    margin-top: 1rem;
}

.info-item[b-otr6k5u9gf] { display: flex; flex-direction: column; }
.info-item.full-width[b-otr6k5u9gf] { grid-column: 1 / -1; }

.label[b-otr6k5u9gf] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.value[b-otr6k5u9gf] {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 600;
    word-break: break-word;
}

.font-mono[b-otr6k5u9gf] {
    font-family: monospace;
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    color: #d63384; /* Color contraste para MACs */
}

/* Estilos Específicos */
.asset-tag-banner[b-otr6k5u9gf] {
    background: var(--saru-blue);
    padding: 1rem;
    border-radius: 12px;
    text-align: center;
    color: white;
}
.asset-tag-banner .label[b-otr6k5u9gf] { color: rgba(255,255,255,0.6); }
.asset-tag-banner .value[b-otr6k5u9gf] { color: white; font-size: 1.5rem; letter-spacing: 2px; }

.employee-profile-header[b-otr6k5u9gf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--saru-light);
    padding: 1.5rem;
    border-radius: 16px;
}

.avatar-large[b-otr6k5u9gf] {
    width: 60px; height: 60px;
    background-color: var(--saru-blue);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    font-weight: bold;
}

.specs-badge span[b-otr6k5u9gf] {
    display: inline-block;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #666;
    margin-right: 5px;
    margin-bottom: 5px;
}

.status-indicator[b-otr6k5u9gf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}
.status-indicator.active[b-otr6k5u9gf] {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.divider-light[b-otr6k5u9gf] { border-top: 1px dashed #dee2e6; opacity: 1; }

.loading-state[b-otr6k5u9gf] {
    padding: 4rem;
    text-align: center;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

@media (max-width: 576px) {
    .info-grid[b-otr6k5u9gf] { grid-template-columns: 1fr; }
}
/* _content/ProyectEC/Components/Pages/TIPages/TIAssetTracking/DetailsEquipment.razor.rz.scp.css */
/* =========================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ========================================= */
.details-view-container[b-w3vxu74dxk] {
    --saru-blue: #011F41;       /* Tu azul personalizado */
    --saru-light: #f0f4f8;      /* Fondo gris muy suave */
    --text-muted: #8898aa;
    --text-dark: #32325d;
    padding-bottom: 3rem;
    padding-top: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Animación de entrada */
.fade-in[b-w3vxu74dxk] { animation: fadeInUp-b-w3vxu74dxk 0.5s ease-out; }
@keyframes fadeInUp-b-w3vxu74dxk {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   2. TÍTULOS Y BOTONES
   ========================================= */
.page-title[b-w3vxu74dxk] {
    color: var(--saru-blue);
    font-weight: 800;
    letter-spacing: -0.5px;
    font-size: 1.75rem;
}

/* Botones Modernos (Redondeados) */
.btn-modern[b-w3vxu74dxk] {
    border-radius: 50px;
    padding: 0.5rem 1.2rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.btn-modern:hover[b-w3vxu74dxk] { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* Botón Estilo SARU */
.btn-saru[b-w3vxu74dxk] {
    background-color: var(--saru-blue);
    color: white;
    border: 1px solid var(--saru-blue);
}
.btn-saru:hover[b-w3vxu74dxk] {
    background-color: #0d2b4d; 
    color: white;
    box-shadow: 0 4px 12px rgba(1, 31, 65, 0.3);
}

/* Utilidad de texto */
.text-saru[b-w3vxu74dxk] { color: var(--saru-blue) !important; }

/* =========================================
   3. TARJETAS MODERNAS (CARD CLEAN)
   ========================================= */
.card-clean[b-w3vxu74dxk] {
    border: none;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); /* Sombra suave, sin borde */
    transition: transform 0.3s ease;
    overflow: hidden;
}

.card-clean:hover[b-w3vxu74dxk] {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* Encabezado de la Tarjeta */
.card-header-clean[b-w3vxu74dxk] {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    background: white;
}

.header-title[b-w3vxu74dxk] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--saru-blue);
    letter-spacing: 0.5px;
}

.icon-circle[b-w3vxu74dxk] {
    width: 42px; height: 42px;
    background-color: var(--saru-light);
    color: var(--saru-blue);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}

/* =========================================
   4. GRID DE INFORMACIÓN (Estándar)
   ========================================= */
.info-grid[b-w3vxu74dxk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Por defecto 2 columnas */
    gap: 1.5rem;
    margin-top: 1rem;
}

.info-item[b-w3vxu74dxk] { display: flex; flex-direction: column; }
.info-item.full-width[b-w3vxu74dxk] { grid-column: 1 / -1; }

.label[b-w3vxu74dxk] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 5px;
}

.value[b-w3vxu74dxk] {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 600;
    word-break: break-word;
    line-height: 1.4;
}

/* Fuente Monoespaciada (Para Series, MACs) */
.font-mono[b-w3vxu74dxk] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    background: #f8f9fa;
    padding: 3px 8px;
    border-radius: 6px;
    color: #d63384; 
    border: 1px solid #e9ecef;
    display: inline-block;
    width: fit-content;
}

/* Divisor Sutil */
.divider-light[b-w3vxu74dxk] { border-top: 1px dashed #dee2e6; opacity: 1; margin: 1.5rem 0; }

/* =========================================
   5. ESTILOS ESPECÍFICOS: ASIGNACIONES
   ========================================= */
.asset-tag-banner[b-w3vxu74dxk] {
    background: var(--saru-blue);
    padding: 1.2rem;
    border-radius: 12px;
    text-align: center;
    color: white;
    box-shadow: 0 4px 15px rgba(1, 31, 65, 0.2);
}
.asset-tag-banner .label[b-w3vxu74dxk] { color: rgba(255,255,255,0.7); }
.asset-tag-banner .value[b-w3vxu74dxk] { color: white; font-size: 1.6rem; letter-spacing: 2px; font-weight: 800; }

.employee-profile-header[b-w3vxu74dxk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--saru-light);
    padding: 1.5rem;
    border-radius: 16px;
}

.avatar-large[b-w3vxu74dxk] {
    width: 60px; height: 60px;
    background-color: var(--saru-blue);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    font-weight: bold;
}

.status-indicator[b-w3vxu74dxk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}
.status-indicator.active[b-w3vxu74dxk] {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
}

/* =========================================
   6. ESTILOS ESPECÍFICOS: EQUIPOS (LO QUE FALTABA)
   ========================================= */

/* Icono Grande para la ficha de equipo */
.equipment-icon-large[b-w3vxu74dxk] {
    width: 100px; height: 100px;
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    color: var(--saru-blue);
    border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
}

/* Píldora de Asset Tag (Estilo alternativo más limpio) */
.asset-tag-pill[b-w3vxu74dxk] {
    background: var(--saru-blue);
    padding: 0.6rem 2rem;
    border-radius: 50px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 12px rgba(1, 31, 65, 0.25);
    transition: transform 0.2s;
}
.asset-tag-pill:hover[b-w3vxu74dxk] { transform: scale(1.02); }
.asset-tag-pill .label[b-w3vxu74dxk] { color: rgba(255,255,255,0.7); margin-bottom: 0; font-size: 0.65rem; }
.asset-tag-pill .value[b-w3vxu74dxk] { color: white; font-size: 1.2rem; font-weight: 800; letter-spacing: 1px; }

/* Subtítulos de Secciones (Hardware, Red, etc.) */
.section-subtitle[b-w3vxu74dxk] {
    color: var(--saru-blue);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 800;
    opacity: 0.9;
    margin: 0;
    display: flex; align-items: center;
}

/* Grids Especiales */
.info-grid.single-col[b-w3vxu74dxk] {
    grid-template-columns: 1fr; /* Una sola columna centrada */
    gap: 1rem;
}

.info-grid.three-cols[b-w3vxu74dxk] {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* 3 columnas adaptables */
}

/* Estado de carga */
.loading-state[b-w3vxu74dxk] {
    padding: 4rem;
    text-align: center;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

/* Responsive */
@media (max-width: 768px) {
    .info-grid[b-w3vxu74dxk], .info-grid.three-cols[b-w3vxu74dxk] { grid-template-columns: 1fr; }
    .card-header-clean[b-w3vxu74dxk] { flex-direction: column; text-align: center; }
}
/* _content/ProyectEC/Components/Pages/TIPages/TIAssetTracking/EditAssigment.razor.rz.scp.css */
/* =========================================
   1. VARIABLES Y BASE (Idéntico a Details)
   ========================================= */
.details-view-container[b-hlfz9t4qmm] {
    /*background-color: aqua;*/
    --saru-blue: #011F41;
    --saru-light: #f0f4f8;
    --text-muted: #8898aa;
    --text-dark: #32325d;
    padding-bottom: 4rem;
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

/* ANIMACIÓN */
.fade-in[b-hlfz9t4qmm] { animation: fadeInUp-b-hlfz9t4qmm 0.5s ease-out; }
@keyframes fadeInUp-b-hlfz9t4qmm {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* TÍTULOS */
.page-title[b-hlfz9t4qmm] {
    color: var(--saru-blue);
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* =========================================
   2. TARJETAS Y ESTRUCTURA (Idéntico a Details)
   ========================================= */
.card-clean[b-hlfz9t4qmm] {
    border: none;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: transform 0.3s ease;
    overflow: visible; /* Cambiado a visible para que los dropdowns no se corten */
}

/* Efecto hover solo sutil en edición para no distraer al escribir */
.card-clean:hover[b-hlfz9t4qmm] {
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.card-header-clean[b-hlfz9t4qmm] {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

.card-footer[b-hlfz9t4qmm] {
    border-radius: 0 0 20px 20px !important; /* Redondear footer igual que la tarjeta */
}

.header-title[b-hlfz9t4qmm] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--saru-blue);
    letter-spacing: 0.5px;
}

.icon-circle[b-hlfz9t4qmm] {
    width: 40px; height: 40px;
    background-color: var(--saru-light);
    color: var(--saru-blue);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}

/* =========================================
   3. INFORMACIÓN VISUAL (Panel Izquierdo)
   ========================================= */
.info-grid[b-hlfz9t4qmm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.info-item[b-hlfz9t4qmm] { display: flex; flex-direction: column; }
.info-item.full-width[b-hlfz9t4qmm] { grid-column: 1 / -1; }

.label[b-hlfz9t4qmm] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}

.value[b-hlfz9t4qmm] {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 600;
    word-break: break-word;
}

.font-mono[b-hlfz9t4qmm] {
    font-family: monospace;
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    color: #d63384;
}

.asset-tag-banner[b-hlfz9t4qmm] {
    background: var(--saru-blue);
    padding: 1rem;
    border-radius: 12px;
    text-align: center;
    color: white;
}
.asset-tag-banner .label[b-hlfz9t4qmm] { color: rgba(255,255,255,0.6); }
.asset-tag-banner .value[b-hlfz9t4qmm] { color: white; font-size: 1.5rem; letter-spacing: 2px; }

.divider-light[b-hlfz9t4qmm] { border-top: 1px dashed #dee2e6; opacity: 1; }

.avatar-large[b-hlfz9t4qmm] {
    width: 50px; height: 50px; /* Ajustado un poco para el panel lateral */
    background-color: var(--saru-blue);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
}

/* =========================================
   4. BOTONES
   ========================================= */
.btn-modern[b-hlfz9t4qmm] {
    border-radius: 50px;
    padding: 0.5rem 1.2rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.btn-modern:hover[b-hlfz9t4qmm] { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

.btn-saru[b-hlfz9t4qmm] {
    background-color: var(--saru-blue);
    color: white;
    border: 1px solid var(--saru-blue);
}
.btn-saru:hover[b-hlfz9t4qmm] { background-color: #0d2b4d; color: white; }

/* =========================================
   5. NUEVO: ESTILOS PARA FORMULARIOS (Edit)
   ========================================= */

/* Inputs Modernos: Limpios y redondeados */
.modern-input[b-hlfz9t4qmm] {
    border: 1px solid #e9ecef;
    background-color: #f8f9fa; /* Fondo gris muy suave */
    border-radius: 12px;       /* Bordes muy redondeados */
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: var(--text-dark);
    transition: all 0.2s ease;
}

/* Efecto al hacer clic en el input */
.modern-input:focus[b-hlfz9t4qmm] {
    background-color: #ffffff;
    border-color: var(--saru-blue);
    box-shadow: 0 0 0 4px rgba(1, 31, 65, 0.1); /* Glow azul SARU suave */
    outline: none;
}

/* Estilo para el input de archivo */
input[type=file].modern-input[b-hlfz9t4qmm] {
    padding: 0.5rem; /* Ajuste para el input file */
    background: white;
}

/* Estilo del botón "Seleccionar archivo" dentro del input */
input[type=file][b-hlfz9t4qmm]::file-selector-button {
    border: none;
    background: var(--saru-light);
    color: var(--saru-blue);
    font-weight: 600;
    margin-right: 1rem;
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
}

input[type=file][b-hlfz9t4qmm]::file-selector-button:hover {
    background: #e2e6ea;
}

/* Ajuste de labels en formularios */
.form-label[b-hlfz9t4qmm] {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
}

/* Mensajes de validación */
.validation-message[b-hlfz9t4qmm] {
    color: #ff0019;
    font-size: 0.8rem;
    margin-top: 4px;
    font-weight: 500;
}

@media (max-width: 576px) {
    .info-grid[b-hlfz9t4qmm] { grid-template-columns: 1fr; }
    .details-view-container[b-hlfz9t4qmm] { padding: 1rem; }
}

.btn-outline-primary[b-hlfz9t4qmm] {
    color: #ffffff;
    border:none;
    background-color: #011F41;
    border-width: 2px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-outline-danger[b-hlfz9t4qmm] {
    color: #ffffff;
    border:none;
    background-color: #af0000;
    border-width: 2px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-outline-danger:hover[b-hlfz9t4qmm] {
    background-color: #d00f0f;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}

.btn-modern-submit[b-hlfz9t4qmm] {
    background-color: #011F41; /* Tu azul corporativo */
    border: none;
    color: white;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-modern-submit:hover[b-hlfz9t4qmm] {
    transform: translateY(-2px);
    color: white;
    box-shadow: 0 10px 20px rgba(10, 35, 66, 0.2) !important;
    background-color: #0f2d52;
}

.btn-outline-primary:hover[b-hlfz9t4qmm] {
    background-color: #0f2d52;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}

/* Contenedor fijo en la esquina superior derecha */
    .success-toast-container[b-hlfz9t4qmm] {
        position: fixed;
        top: 2rem;
        right: 2rem;
        z-index: 2050;
        pointer-events: none;
    }

    /* Tarjeta de éxito con efecto cristal */
    .success-card[b-hlfz9t4qmm] {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-left: 5px solid #198754;
        border-radius: 12px;
        padding: 1rem 1.5rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        gap: 1rem;
        transform: translateY(-20px);
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* Clase para mostrar la tarjeta */
    .success-card.show[b-hlfz9t4qmm] {
        transform: translateY(0);
        opacity: 1;
    }

    /* Icono verde */
    .icon-box-success[b-hlfz9t4qmm] {
        width: 40px;
        height: 40px;
        background-color: #d1e7dd;
        color: #198754;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    /* Transición suave para el botón */
    .transition-all[b-hlfz9t4qmm] {
        transition: all 0.3s ease;
    }
/* _content/ProyectEC/Components/Pages/TIPages/TIAssetTracking/RegisterEquipment.razor.rz.scp.css */
/* Banner específico para Registro de Equipos */
.equipment-form-banner[b-3swqkpl6az] {
    /* Puedes usar la misma de assets o una diferente de servidores/chips */
    background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop'); 
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    filter: brightness(0.7) grayscale(0.5); /* Un poco oscuro y técnico */
}

.azulSaru[b-3swqkpl6az] {
    color: #011F41;
}

.btn-modern-submit[b-3swqkpl6az] {
    background-color: #011F41; /* Tu azul corporativo */
    border: none;
    color: white;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-modern-submit:hover[b-3swqkpl6az] {
    transform: translateY(-2px);
    color: white;
    box-shadow: 0 10px 20px rgba(10, 35, 66, 0.2) !important;
    background-color: #0f2d52;
}
/* _content/ProyectEC/Components/Pages/TIPages/TIAssetTracking/TIDashboardAdmin.razor.rz.scp.css */
/* Layout y Fondo */
[b-06r4n482g6] main {
    background-color: #f8f9fa; /* Fondo gris suave */
    padding-top: 0 !important;
}

/* Encabezado Sticky */
.page-header-sticky[b-06r4n482g6] {
    position: sticky; top: 0; z-index: 1020;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e8e8e8;
    padding: 1rem 1.5rem;
    margin-left: calc(-1 * var(--bs-gutter-x, 0.75rem));
    margin-right: calc(-1 * var(--bs-gutter-x, 0.75rem));
    padding-top: 2.5rem;
}

.content-below-header[b-06r4n482g6] {
    padding-bottom: 4rem;
}

/* Tarjetas Estilo Asana (Monocromático) */
.asana-card[b-06r4n482g6] {
    background-color: #ffffff;
    border: none !important; /* Limpio */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    
    /* Se elimina cualquier border-top de color aquí */
}

.asana-card:hover[b-06r4n482g6] {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

/* Iconos y Textos */
.icon-container[b-06r4n482g6] { transition: transform 0.3s ease; }
.asana-card:hover .icon-container[b-06r4n482g6] { transform: scale(1.1); }

.text-primary[b-06r4n482g6] {
    color: #0a2342 !important; /* Azul Marino Oscuro */
}

/* Botones Outline */
.btn-outline-primary[b-06r4n482g6] {
    color: #011F41
;
    border-color: #011F41
;
    border-width: 2px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-outline-primary:hover[b-06r4n482g6] {
    background-color: #011F41
;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}

.btn-registrar[b-06r4n482g6] {
        background-color: #011F41
 !important; /* Azul Marino Oscuro */
        color: white;
        border-width: 2px;
        font-weight: 600;
        /* box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3); */
}

.btn-registrar:hover[b-06r4n482g6] {
        background-color: #133865 !important; /* Azul Marino Oscuro */
        color: white;
        border-width: 2px;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}

.btn-modern[b-06r4n482g6] {
    border-radius: 50px;
    padding: 0.5rem 1.2rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.btn-modern:hover[b-06r4n482g6] { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* Botón Estilo SARU */
.btn-saru[b-06r4n482g6] {
    background-color: #011F41;
    color: white;
    border: 1px solid var(--saru-blue);
}
.btn-saru:hover[b-06r4n482g6] {
    background-color: #033b7a; 
    color: white;
    box-shadow: 0 4px 12px rgba(1, 31, 65, 0.3);
}
/* _content/ProyectEC/Components/Pages/TIPages/TIUser/CrearTicket.razor.rz.scp.css */
/* --- 1. BANNER (Imagen de fondo TI) --- */
.ticket-form-banner[b-l7gi2svnq7] {
    background-image: url('/images/evento-1.jpg'); 
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%; 
    filter: brightness(0.9); /* Un poco más oscuro para contraste */
}

/* --- 2. ESTILOS DE FORMULARIO MODERNO --- */

/* Etiquetas (Labels) */
.form-label-sm[b-l7gi2svnq7] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8898aa;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Inputs Modernos */
.modern-input[b-l7gi2svnq7] {
    border: 1px solid #e9ecef;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    color: #495057;
    transition: all 0.2s ease;
    box-shadow: none;
}

.modern-input:focus[b-l7gi2svnq7] {
    background-color: #ffffff;
    border-color: var(--saru-blue, #0a2342);
    box-shadow: 0 0 0 4px rgba(10, 35, 66, 0.05);
    color: #0a2342;
}

/* Ajuste para Selects */
select.modern-input[b-l7gi2svnq7] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    appearance: none;
}

/* --- 3. BOTÓN DE ENVIAR --- */
.btn-modern-submit[b-l7gi2svnq7] {
    background-color: var(--saru-blue, #0a2342);
    border: none;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-modern-submit:hover[b-l7gi2svnq7] {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(10, 35, 66, 0.2) !important;
    background-color: #0f2d52;
}

.btn-modern-submit:active[b-l7gi2svnq7] {
    transform: translateY(0);
}

/* _content/ProyectEC/Components/Pages/TIPages/TIUser/MisTicketsTI.razor.rz.scp.css */
/* --- LAYOUT GENERAL --- */
.approval-layout[b-5yuo59h2n1] {
    display: flex;
    height: calc(100vh - 60px); /* Altura fija */
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden; /* Sin scroll global */
}

/* --- SIDEBAR --- */
.requests-sidebar[b-5yuo59h2n1] {
    width: 360px;
    background: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
    padding-top: 1rem;
}

.sidebar-header[b-5yuo59h2n1] {
    padding: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    flex-shrink: 0;
}

/* Barra de Búsqueda */
.search-wrapper[b-5yuo59h2n1] { position: relative; margin-top: 1rem; }
.search-icon[b-5yuo59h2n1] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #adb5bd; font-size: 0.9rem; pointer-events: none;
}
.search-input[b-5yuo59h2n1] {
    width: 100%; padding: 8px 12px 8px 35px;
    border-radius: 8px; border: 1px solid #e9ecef;
    background-color: #f8f9fa; font-size: 0.9rem; color: #495057; transition: all 0.2s ease;
}
.search-input:focus[b-5yuo59h2n1] {
    outline: none; background-color: #ffffff; border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Filtros Tabs */
.filter-tabs[b-5yuo59h2n1] {
    display: flex; gap: 4px; background-color: #f1f3f5; padding: 4px; border-radius: 8px; margin-top: 12px;
}
.filter-tab[b-5yuo59h2n1] {
    flex: 1; border: none; background: transparent; padding: 6px;
    font-size: 0.75rem; font-weight: 600; color: #6c757d;
    border-radius: 6px; transition: all 0.2s ease; text-align: center; cursor: pointer;
}
.filter-tab:hover[b-5yuo59h2n1] { color: #212529; background-color: rgba(255, 255, 255, 0.5); }
.filter-tab.active[b-5yuo59h2n1] { background-color: #ffffff; color: #0d6efd; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Lista de Tickets */
.requests-list[b-5yuo59h2n1] { flex-grow: 1; overflow-y: auto; padding: 0.5rem; }

.request-item[b-5yuo59h2n1] {
    display: flex; align-items: center; padding: 12px; margin-bottom: 4px;
    border-radius: 8px; cursor: pointer; transition: background 0.2s; border: 1px solid transparent;
}
.request-item:hover[b-5yuo59h2n1] { background-color: #f8f9fa; }
.request-item.active[b-5yuo59h2n1] { background-color: #f0f7ff; border-left: 4px solid #0d6efd; }

.avatar-small[b-5yuo59h2n1] { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-right: 12px; flex-shrink: 0; }

/* --- PANEL DE DETALLE --- */
.request-detail-panel[b-5yuo59h2n1] {
    flex-grow: 1; display: flex; flex-direction: column;
    background-color: #f5f7fa; overflow: hidden; padding: 1rem;
    padding-top: 2rem;
}

.detail-content[b-5yuo59h2n1] {
    background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
}

.detail-header[b-5yuo59h2n1] {
    padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; display: flex; align-items: center;
}
.avatar-large[b-5yuo59h2n1] { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-right: 1rem; }

/* Grid de Contenido */
.admin-content-grid[b-5yuo59h2n1] { flex: 1; display: flex; overflow: hidden; }

/* Columna Izquierda */
.col-info[b-5yuo59h2n1] { width: 50%; padding: 2rem; overflow-y: auto; border-right: 1px solid #f0f0f0; }

.section-label[b-5yuo59h2n1] { display: block; font-size: 0.75rem; font-weight: 800; color: #adb5bd; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
.file-card[b-5yuo59h2n1] { transition: all 0.2s; border: 1px solid #eee; }
.file-card:hover[b-5yuo59h2n1] { background-color: #f8f9fa; border-color: #ddd; }

/* Columna Derecha (Chat) */
.col-chat[b-5yuo59h2n1] { width: 50%; display: flex; flex-direction: column; background-color: #fff; }

.chat-header[b-5yuo59h2n1] {
    padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f0;
    font-weight: 700; color: #6c757d; font-size: 0.8rem; text-transform: uppercase;
}

.chat-body[b-5yuo59h2n1] {
    flex: 1; overflow-y: auto; padding: 1.5rem; background-color: #f8f9fa;
    display: flex; flex-direction: column; gap: 1rem;
}

.chat-footer[b-5yuo59h2n1] { padding: 1rem; background: white; border-top: 1px solid #f0f0f0; }

/* Burbujas */
.chat-message[b-5yuo59h2n1] { display: flex; flex-direction: column; max-width: 85%; }
.message-content[b-5yuo59h2n1] { padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; position: relative; }

/* Usuario (Derecha - Azul) */
.align-self-end .message-content[b-5yuo59h2n1] { background-color: #0d6efd; color: white; border-bottom-right-radius: 2px; }
.align-self-end .msg-meta[b-5yuo59h2n1] { text-align: right; }

/* Admin/Marketing (Izquierda - Blanco) */
.align-self-start .message-content[b-5yuo59h2n1] { background-color: white; border: 1px solid #e0e0e0; color: #333; border-bottom-left-radius: 2px; }

.msg-meta[b-5yuo59h2n1] { font-size: 0.7rem; margin-top: 4px; opacity: 0.7; }

/* Scrollbar */
[b-5yuo59h2n1]::-webkit-scrollbar { width: 6px; height: 6px; }
[b-5yuo59h2n1]::-webkit-scrollbar-track { background: transparent; }
[b-5yuo59h2n1]::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }
/* _content/ProyectEC/Components/Pages/TIPages/TIUser/TIDashboardUser.razor.rz.scp.css */

[b-ihqhtpllf1] main {
    background-color: #ffffff;
    padding-top: 0 !important;
}

/* =========================================
   2. HERO SECTION
   ========================================= */
.parallax-hero-section[b-ihqhtpllf1] {
    background-image: url('/images/Banners/TI.webp'); 
    height: 30vh;
    background-size: cover;     
    background-position: center; 
    text-align: center;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.3);
}

.hero-text[b-ihqhtpllf1] {
    color: white;
    text-align: center;
    text-shadow: 0 4px 15px rgba(0,0,0,0.8);
    width: 100%;
}
.hero-text h1[b-ihqhtpllf1] { font-size: 4rem; font-weight: 800; color: #E9AC2E !important; }

/* =========================================
   3. CONTENIDO Y TARJETAS 
   ========================================= */
.content-section[b-ihqhtpllf1] {
    padding: 1rem 2rem;
    background-color: #f8f9fa;
    position: relative; z-index: 2; 
}

/* Tarjeta Limpia (Asana Style) */
.asana-card[b-ihqhtpllf1] {
    background-color: #ffffff;
    border: none !important; /* Sin bordes */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Sombra suave */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    overflow: hidden;
}

.asana-card:hover[b-ihqhtpllf1] {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.icon-container[b-ihqhtpllf1] {
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}
.asana-card:hover .icon-container[b-ihqhtpllf1] { transform: scale(1.1); }

/* --- COLORES UNIFICADOS (AZUL OSCURO) --- */

/* Texto Primario (Títulos e Iconos) */
.text-primary[b-ihqhtpllf1] {
    color: #0a2342 !important; /* Azul Marino Oscuro */
}

/* Botones Outline */
.btn-outline-primary[b-ihqhtpllf1] {
    color: #0a2342;
    border-color: #0a2342;
    border-width: 2px;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    transition: all 0.2s;
}

.btn-outline-primary:hover[b-ihqhtpllf1] {
    background-color: #0a2342;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.3);
}

/* Estilos de texto */
.card-title[b-ihqhtpllf1] { font-weight: 700; margin-bottom: 0.5rem; color: #0a2342; }
.card-text[b-ihqhtpllf1] { font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.5rem; color: #6c757d; }



/* Enlace estirado */
.stretched-link[b-ihqhtpllf1] { text-decoration: none; }


/* --- ARTÍCULOS (DISEÑO ALTERNO CON IMÁGENES) --- */
.articles-container[b-ihqhtpllf1] { max-width: 1000px; margin: 0 auto; }

.article-row[b-ihqhtpllf1] {
    display: flex; align-items: center; gap: 4rem; margin-bottom: 5rem;
}
.article-row.row-reverse[b-ihqhtpllf1] { flex-direction: row-reverse; }

.article-image[b-ihqhtpllf1] { 
    flex: 1; 
    display: flex; 
    justify-content: center; 
}

/* Estilo de la Imagen */
.article-thumb[b-ihqhtpllf1] {
    width: 100%;
    max-width: 450px;       /* Ancho máximo */
    height: 250px;          /* Altura fija para uniformidad */
    object-fit: cover;      /* Recorta la imagen para llenar el espacio sin deformar */
    border-radius: 20px;    /* Bordes muy redondos */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* Sombra elegante */
    transition: transform 0.3s ease;
}

.article-thumb:hover[b-ihqhtpllf1] { transform: scale(1.03); }

.article-content[b-ihqhtpllf1] { flex: 1; }
.article-tag[b-ihqhtpllf1] { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #888; letter-spacing: 1px; display: block; margin-bottom: 0.5rem; }
.article-content h4[b-ihqhtpllf1] { font-weight: 800; color: #0a2342; margin-bottom: 1rem; font-size: 1.8rem; }
.article-content p[b-ihqhtpllf1] { color: #555; line-height: 1.7; margin-bottom: 1.5rem; font-size: 1.05rem; }
/* Colores de placeholders */
.bg-success-subtle[b-ihqhtpllf1] { background-color: #e6fffa !important; color: #2dce89 !important; }
.bg-primary-subtle[b-ihqhtpllf1] { background-color: #e3f2fd !important; color: #0d6efd !important; }
.bg-warning-subtle[b-ihqhtpllf1] { background-color: #fff8e1 !important; color: #f1c40f !important; }

/* --- CARRUSEL DE LIBROS (PDFs) --- */
.book-card[b-ihqhtpllf1] {
    cursor: pointer; perspective: 1000px; width: 180px; margin: 0 auto;
}
.book-cover[b-ihqhtpllf1] {
    width: 100%; height: 240px;
    background: linear-gradient(135deg, #0a2342 0%, #1e4b85 100%);
    border-radius: 8px 16px 16px 8px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: white; padding: 1.5rem; text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
/* Linea decorativa de "lomo" del libro */
.book-cover[b-ihqhtpllf1]::before {
    content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.2);
}

.book-card:hover .book-cover[b-ihqhtpllf1] {
    transform: translateY(-10px) rotateY(-5deg);
    box-shadow: 10px 15px 25px rgba(0,0,0,0.25);
}

.book-cover i[b-ihqhtpllf1] { font-size: 3rem; margin-bottom: 1rem; opacity: 0.8; }
.cover-title[b-ihqhtpllf1] { font-weight: 700; font-size: 0.9rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cover-footer[b-ihqhtpllf1] { position: absolute; bottom: 15px; font-size: 0.7rem; opacity: 0.6; letter-spacing: 1px; }

.book-info[b-ihqhtpllf1] { text-align: center; margin-top: 1rem; opacity: 0; transition: opacity 0.3s; transform: translateY(10px); }
.book-card:hover .book-info[b-ihqhtpllf1] { opacity: 1; transform: translateY(0); }
.book-info h6[b-ihqhtpllf1] { font-weight: 700; font-size: 0.9rem; margin-bottom: 0; }
.book-info small[b-ihqhtpllf1] { color: #888; }

/* Flechas Carrusel */
.custom-arrow[b-ihqhtpllf1] { width: 5%; opacity: 1; }
.carousel-control-prev-icon[b-ihqhtpllf1], .carousel-control-next-icon[b-ihqhtpllf1] { filter: invert(1); }
.carousel-control-prev[b-ihqhtpllf1] { left: -50px; }
.carousel-control-next[b-ihqhtpllf1] { right: -50px; }

/* Responsive */
@media (max-width: 768px) {
    .article-row[b-ihqhtpllf1], .article-row.row-reverse[b-ihqhtpllf1] { flex-direction: column; text-align: center; }
    .carousel-control-prev[b-ihqhtpllf1] { left: 0; } .carousel-control-next[b-ihqhtpllf1] { right: 0; }
}



.ls-1[b-ihqhtpllf1] { letter-spacing: 2px; font-size: 0.75rem; font-weight: 700; }

.divider-pill[b-ihqhtpllf1] {
    width: 60px;
    height: 6px;
    background-color: #0a2342; /* Azul corporativo */
    border-radius: 10px;
    margin-top: 1rem;
    opacity: 0.8;
}
/* _content/ProyectEC/Shared/NotificationBell.razor.rz.scp.css */
/* El contenedor del botón */
.notification-wrapper[b-4h16so98sl] {
    position: relative;
    display: inline-block;
}

/* El botón de la campana */
.btn-bell[b-4h16so98sl] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f8f9fa;
    border: none;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    position: relative;
    transition: background-color 0.2s;
}

.btn-bell:hover[b-4h16so98sl] {
    background-color: #e2e6ea;
}

/* El menú desplegable */
.custom-dropdown[b-4h16so98sl] {
    position: absolute;
    top: 115%; /* Un poco separado del botón */
    right: 0;
    width: 320px;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0,0,0,.1);
    z-index: 2000; /* Alto para flotar sobre todo */
    overflow: hidden;
    animation: fadeIn-b-4h16so98sl 0.2s ease-out;
}

/* Animación suave */
@keyframes fadeIn-b-4h16so98sl {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* El fondo transparente para cerrar (Overlay) */
.overlay-backdrop[b-4h16so98sl] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1050; /* Debe ser menor que el dropdown pero mayor que el resto */
    cursor: default;
}

/* Ajuste para que el dropdown quede ENCIMA del backdrop */
.dropdown-on-top[b-4h16so98sl] {
    z-index: 1051 !important;
}

/* Scroll interno de notificaciones */
.notif-scroll-area[b-4h16so98sl] {
    max-height: 350px;
    overflow-y: auto;
}

.notif-item[b-4h16so98sl] {
    cursor: pointer;
    transition: background-color 0.2s;
}

.notif-item:hover[b-4h16so98sl] {
    background-color: #f8f9fa;
}
/* _content/ProyectEC/Shared/StatusOverlay.razor.rz.scp.css */
.overlay[b-rck179axa9] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* --- ESTOS SON LOS CAMBIOS CLAVE --- */
    background-color: rgba(255, 255, 255, 0.1); /* Un fondo casi transparente */
    backdrop-filter: blur(5px); /* El efecto de desenfoque */
    -webkit-backdrop-filter: blur(5px); /* Para compatibilidad con Safari */

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.status-box[b-rck179axa9] {
    background-color: white;
    padding: 2rem 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.status-icon[b-rck179axa9] {
    font-size: 3rem;
}

.icon-success[b-rck179axa9] {
    color: #198754;
}

.icon-error[b-rck179axa9] {
    color: #dc3545;
}
/* _content/ProyectEC/Shared/UserProfileDisplay.razor.rz.scp.css */
/* =============================================
   1. ESTILOS DEL ICONO DE PERFIL (BARRA)
   ============================================= */
.profile-img-small[b-bxctx4cgdu] {
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: transform 0.2s;
}

.profile-img-small:hover[b-bxctx4cgdu] {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.8);
}

/* Ocultar la flecha del dropdown de Bootstrap */
.dropdown-toggle[b-bxctx4cgdu]::after {
    display: none;
}

/* =============================================
   2. ESTILO CORPORATIVO (PARA LOS MENÚS NORMALES)
   ============================================= */
/* Regla general para todos los menús */
.dropdown-menu[b-bxctx4cgdu] {
    background-color: var(--saru-blue) !important; /* Azul por defecto */
    border: none;
    border-radius: 0 0 8px 8px;
    margin-top: 0;
    padding: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* =============================================
   3. ESTILO "GOOGLE" (SOLO PARA EL PERFIL)
   ============================================= */
/* ¡AQUÍ ESTÁ LA CORRECCIÓN! Hacemos el selector más específico */
.dropdown-menu.google-style-card[b-bxctx4cgdu] {
    width: 320px;
    border-radius: 28px !important;
    margin-top: 12px !important;
    padding: 2rem !important; /* Restauramos el padding */
    
    /* Forzamos el BLANCO. Esta regla ahora es más fuerte y ganará. */
    background-color: #ffffff !important; 
    color: #3c4043 !important;
    
    box-shadow: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Aseguramos que los textos dentro de la tarjeta blanca sean oscuros */
.dropdown-menu.google-style-card h5[b-bxctx4cgdu], 
.dropdown-menu.google-style-card span[b-bxctx4cgdu] {
    color: #3c4043;
}
.dropdown-menu.google-style-card .text-muted[b-bxctx4cgdu] {
    color: #5f6368 !important;
}
.dropdown-menu.google-style-card .text-dark[b-bxctx4cgdu] {
    color: #202124 !important;
}

/* Foto Grande Interna */
.profile-img-large[b-bxctx4cgdu] {
    object-fit: cover;
    border: 1px solid #e0e0e0;
    padding: 2px;
}

/* Botones dentro de la tarjeta Google */
.btn-outline-secondary[b-bxctx4cgdu] {
    border-color: #dadce0;
    color: #3c4043;
}
.btn-outline-secondary:hover[b-bxctx4cgdu] {
    background-color: #f8f9fa;
    border-color: #dadce0;
    color: #202124;
}

.btn-light[b-bxctx4cgdu] {
    background-color: #fff;
    border-color: #dadce0 !important;
    color: #3c4043;
}
.btn-light:hover[b-bxctx4cgdu] {
    background-color: #f1f3f4;
    border-color: #dadce0 !important;
}


/* =============================================
   4. ESTILOS PARA ITEMS DE MENÚS AZULES
   ============================================= */
/* Usamos :not() para que no afecte a la tarjeta de perfil */
.dropdown-menu:not(.google-style-card) .dropdown-item[b-bxctx4cgdu] {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 12px 20px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dropdown-menu:not(.google-style-card) .dropdown-item:hover[b-bxctx4cgdu], 
.dropdown-menu:not(.google-style-card) .dropdown-item:focus[b-bxctx4cgdu] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.dropdown-menu:not(.google-style-card) .dropdown-divider[b-bxctx4cgdu] {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0;
}