/* styles.css */

/* ... (Existing styles keep them, just append/overwrite specific parts) ... */
:root {
    --sidebar-width: 250px;
    --sidebar-width-collapsed: 40px;
    /* Reduced further per request */
    --sidebar-bg: #333;
    --primary-green: #1ABB9C;
    --body-bg: #FFF;
    --text-color: #73879C;
    --header-bg: #EDEDED;
}

body {
    font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
    background-color: var(--body-bg);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.471;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    color: #34495E;
}

.vistatitulo {
    font-weight: 100;
    font-size: 16px;
    text-transform: uppercase;
    color: #34495E;
}

/* --- Sidebar --- */
.sidebar {
    background-color: var(--sidebar-bg);
    color: #ECF0F1;
    min-height: 100vh;
    width: var(--sidebar-width);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: width 0.3s;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0 !important;
}

/* Sidebar Headings */
.sidebar-heading {
    /* Flex properties handled inline by bootstrap classes d-flex etc */
    margin-top: 20px;
    margin-bottom: 10px;
}

.sidebar-heading a {
    color: #1ABB9C !important;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.sidebar-heading i.group-toggle {
    font-size: 10px;
    transition: transform 0.3s;
    color: #1ABB9C;
    /* Match title color */
    cursor: pointer;
}

/* Rotation Logic:
   Base icon is fa-chevron-down.
   Expanded (default): 0deg (points down).
   Collapsed: -90deg (points right).
*/
.group-toggle[aria-expanded="true"] {
    transform: rotate(0deg);
    pointer-events: none;
    /* Prevent collapsing the active group */
    cursor: default;
}

.group-toggle[aria-expanded="false"] {
    transform: rotate(-90deg);
    cursor: pointer;
}

/* Logo Area */
.brand-link {
    display: flex;
    align-items: center;
    height: 50px;
    /* Aligned with header height */
    padding: 0 0 0 15px;
    /* Adjusted padding */
    background-color: #333;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    font-size: 16px;
    /* Reduced font size */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    cursor: pointer;
    /* Clickable */
    width: 100%;
}

.brand-link:hover {
    color: #fff;
}

.brand-link i {
    font-size: 16px;
    /* Reduced icon size */
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 3px;
    /* Reduced padding */
    min-width: 26px;
    /* Reduced container width */
    text-align: center;
    margin-right: 12px;
    /* Adjusted spacing */
}

/* Links */
.sidebar .nav-link {
    color: #E7E7E7;
    font-size: 13px;
    padding: 0 15px;
    /* Adjusted for fixed height */
    height: 36px;
    /* Restricted height per request */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
}

.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-right: 5px solid var(--primary-green);
    color: #fff;
}

.sidebar .nav-link i.fas,
.sidebar .nav-link i.far {
    width: 25px;
    font-size: 16px;
    margin-right: 10px;
    text-align: center;
}

/* User Profile Sidebar */
.user-profile-sidebar {
    display: flex;
    align-items: center;
    padding: 20px;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
}

/* --- Content & Header Adjustments --- */
header.navbar {
    background-color: var(--header-bg) !important;
    border-bottom: 1px solid #D9DEE4;
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    transition: margin-left 0.3s, width 0.3s;
    height: 50px;
    /* Constrain header height to 40px */
    padding: 0 15px;
    /* Reduce horizontal padding */
    min-height: 40px;
}

/* Navbar Content Specific Restriction */
#navbarContent {
    max-height: 40px;
    height: 100%;
    align-items: center;
    display: flex !important;
    justify-content: flex-end !important;
    flex: 1;
}

#navbarContent .navbar-nav {
    flex-direction: row;
    align-items: center;
    height: 100%;
}

#navbarContent .nav-item {
    display: flex;
    align-items: center;
    height: 100%;
}

#navbarContent .nav-link {
    display: flex;
    align-items: center;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}


main {
    margin-left: var(--sidebar-width);
    padding-top: 60px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: var(--body-bg);
    min-height: 100vh;
    transition: margin-left 0.3s;
}

/* --- Collapsed State (.nav-sm) --- */
body.nav-sm .sidebar {
    width: var(--sidebar-width-collapsed);
}

body.nav-sm header.navbar {
    margin-left: var(--sidebar-width-collapsed);
    width: calc(100% - var(--sidebar-width-collapsed));
}

body.nav-sm main {
    margin-left: var(--sidebar-width-collapsed);
}

/* Hide Text in collapsed mode */
body.nav-sm .brand-link span,
body.nav-sm .sidebar-group,
/* Hide entire separate groups logic in collapsed mode */
body.nav-sm .user-profile-sidebar,
body.nav-sm .nav-link span.text-label,
body.nav-sm .nav-link::after {
    display: none !important;
}

/* BUT we need to show the icons. 
   Critically, the new structure wrapped li's in collapsed divs.
   In nav-sm mode, we likely want to bypass the group structure visuals or flatten them.
   Actually, the user asked for collapsible sidebar first. 
   If sidebar is collapsed (40px), grouped headings usually disappear (standard gentellela behavior).
   The icons inside the ul need to remain visible.
*/

body.nav-sm .sidebar-group {
    display: block !important;
}

body.nav-sm .sidebar-heading {
    display: none !important;
    /* Hide headings in collapsed mode */
}

body.nav-sm .collapse {
    display: block !important;
    /* Force lists to be visible/expanded in collapsed mode so icons show */
}

/* Center icons in collapsed mode */
body.nav-sm .brand-link {
    justify-content: center;
    padding: 0;
}

body.nav-sm .brand-link i {
    margin-right: 0;
    font-size: 20px;
    border: none;
    /* Remove border to save space */
    padding: 0;
    min-width: unset;
}

body.nav-sm .nav-link {
    justify-content: center;
    padding: 0;
    height: 36px;
    text-align: center;
}

body.nav-sm .nav-link i.fas,
body.nav-sm .nav-link i.far {
    margin-right: 0;
    font-size: 18px;
    width: 100%;
    /* Ensure full width clickable/centering */
}

body.nav-sm .sidebar .nav-item:hover .nav-link span.text-label {
    /* Show text as floating tooltip on hover */
    display: block !important;
    position: absolute;
    left: var(--sidebar-width-collapsed);
    top: 5px;
    background: #2A3F54;
    width: auto;
    min-width: 150px;
    padding: 10px 15px;
    border-radius: 0 5px 5px 0;
    z-index: 1001;
    color: #fff;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    font-weight: 500;
    white-space: nowrap;
}

/* --- DataTables Custom Footer --- */
/* Wrapper for our custom footer layout */
.dataTables_wrapper .custom-footer-wrapper {
    display: flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: #555;
}

/* Length Menu: "Filas por página: [Select]" */
.dataTables_wrapper .dataTables_length {
    float: none !important;
    margin: 0;
    margin-right: auto;
    padding-left: 20px;
}

.dataTables_wrapper .dataTables_length label {
    font-weight: normal;
    white-space: nowrap;
    margin: 0;
}

.dataTables_wrapper .dataTables_length select {
    border: none;
    font-size: 0.85rem;
    padding: 0 1.5rem 0 0.5rem;
    /* Space for arrow */
    margin: 0 0.25rem;
    outline: none;
    cursor: pointer;
    background: transparent url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat right center;
    background-size: 1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-weight: bold;
    color: #555;
    min-width: 45px;
    text-align: center;
}

/* Info: "1-20 de 100" */
.dataTables_wrapper .dataTables_info {
    float: none !important;
    padding: 0 !important;
    margin: 0;
    clear: none !important;
    color: #555;
}

/* Pagination: < > */
.dataTables_wrapper .dataTables_paginate {
    float: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
}

/* Hide standard page numbers if using simple type, assuming simple controls */
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    border: none;
    background: transparent;
    color: #999;
    font-size: 12px;
    padding: 0 5px;
    line-height: 1;
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    color: #e0e0e0;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    /* If page numbers were shown */
    background: transparent;
    color: #333;
    font-weight: bold;
}

.dataTables_wrapper .dataTables_paginate .page-item:not(.disabled) .page-link:hover {
    background: transparent;
    color: #333;
}

.dataTables_wrapper .dataTables_paginate .page-item:focus {
    box-shadow: none !important;
}

/* Nav Improvements */
.no-caret::after {
    display: none !important;
}

#alertsList .dropdown-item:hover {
    background-color: #f8f9fa;
}

.fw-500 {
    font-weight: 500;
}

.offcanvas-title {
    font-size: 16px;
    font-weight: 100;
}

/* Mark Highlight */
mark,
.mark {
    background-color: #FFFF00 !important;
    color: #000 !important;
}

/* Global Table Row Font Size */
.table tr td,
.table tr th,
.table tbody td,
.table thead th {
    font-size: 12px !important;
}

/* Icon Check Active State */
.btn-check:checked+.btn-icon-check {
    color: #1ABB9C !important;
    background-color: transparent !important;
    border: none !important;
}

/* --- Login Page Redesign --- */
.login-split-screen {
    min-height: 100vh;
    display: flex;
    width: 100%;
    overflow-x: hidden;
}

/* Left Panel (Form) */
.login-left-panel {
    flex: 0 0 40%;
    max-width: 40%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 4rem;
    position: relative;
    z-index: 10;
}

.login-logo {
    font-size: 2rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.login-logo img {
    height: 40px;
    margin-right: 10px;
}

.login-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
}

.login-sub {
    color: #1ABB9C;
    /* Teal/Green accent */
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.login-form-group label {
    font-weight: 500;
    color: #666;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.login-input {
    height: 45px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #f7f9fc;
    padding: 0 15px;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.login-input:focus {
    background-color: #fff;
    border-color: #1ABB9C;
    /* Match teal */
    box-shadow: 0 0 0 3px rgba(26, 187, 156, 0.1);
}

.login-btn-primary {
    background: linear-gradient(135deg, #1ABB9C, #16A085);
    /* Green Teal gradient */
    border: none;
    border-radius: 4px;
    height: 48px;
    line-height: 48px;
    /* Vertically center text if standard btn overrides */
    padding: 0;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(26, 187, 156, 0.4);
    transition: all 0.3s ease;
    width: 100%;
}

.login-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 187, 156, 0.6);
    color: white;
}

/* Right Panel (Visual) */
.login-right-panel {
    flex: 0 0 60%;
    max-width: 60%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Fallback */
    background: linear-gradient(135deg, #23074d 0%, #cc5333 100%);
    /* Deep Purple to Orange/Pink */
    background: linear-gradient(to bottom right, #3f2b96, #a8c0ff);
    /* Blueish */
    /* Trying to match image: Deep Purple, Pink, Blue circles */
    background: #1a1a2e;
    /* Dark base */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Gradient Circles Overlay */
.gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
    opacity: 0.8;
    z-index: 1;
    /* Create the complex gradient from image */
    background: radial-gradient(circle at 90% 10%, #ff5ac8 0%, transparent 40%),
        radial-gradient(circle at 10% 90%, #6838e0 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, #4facfe 0%, #00f2fe 100%);
    background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    /* Light background helper */
    background: #E0EAFC;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #CFDEF3, #E0EAFC);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #CFDEF3, #E0EAFC);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    /* Using specific image-like colors */
    background: #fff;
}

/* The actual colorful blobs */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    z-index: 1;
}

.blob-1 {
    width: 400px;
    height: 400px;
    background: #a18cd1;
    top: -100px;
    right: -50px;
    opacity: 0.7;
}

.blob-2 {
    width: 500px;
    height: 500px;
    background: #fbc2eb;
    bottom: -100px;
    left: -100px;
    opacity: 0.7;
}

.blob-3 {
    width: 300px;
    height: 300px;
    background: #8fd3f4;
    top: 30%;
    right: 20%;
    opacity: 0.5;
}

/* Glassmorphism content on right */
.glass-welcome {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #333;
    /* Dark text on light BG, or White on Dark BG? Image has dark vibrant background with white text. */
}

/* Re-doing Right Panel Background to match "Dark Mode Vibrant" look of image */
.login-right-panel-dark {
    flex: 0 0 60%;
    max-width: 60%;
    background-color: #333333;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.circle-shape {
    position: absolute;
    border-radius: 50%;
}

.c-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(to bottom, #444, #1ABB9C);
    top: -50px;
    left: -50px;
    opacity: 0.1;
}

.c-2 {
    width: 500px;
    height: 500px;
    background: linear-gradient(to top right, #555, #16A085);
    bottom: -150px;
    right: -100px;
    opacity: 0.1;
}

.c-3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(to bottom, #222, #aaa);
    top: 20%;
    right: 10%;
    opacity: 0.1;
    filter: blur(20px);
}

.welcome-text {
    z-index: 10;
    text-align: center;
}

.welcome-text h1 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 0px;
    color: #fff;
}

.welcome-text p {
    font-size: 1.5rem;
    font-weight: 300;
    color: #eee;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .login-split-screen {
        flex-direction: column;
    }

    .login-left-panel {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 2rem;
        order: 2;
        /* Form below visual if visual is kept, or visual hidden */
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        margin-top: -30px;
        min-height: 60vh;
    }

    .login-right-panel-dark {
        flex: 0 0 40vh;
        /* Fixed height for header */
        max-width: 100%;
        order: 1;
        align-items: flex-start;
        padding-top: 40px;
    }

    .circle-shape {
        filter: blur(10px);
        /* Soften on mobile */
    }

    .welcome-text h1 {
        font-size: 2.5rem;
    }

    .welcome-text p {
        font-size: 1rem;
    }
}

/* --- Select2 in Input Group Fix --- */
.input-group>.select2-container--bootstrap-5 {
    width: 1% !important;
    flex: 1 1 auto !important;
}

.input-group>.select2-container--bootstrap-5 .select2-selection {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group>.btn+.select2-container--bootstrap-5 .select2-selection {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* --- Select2 Tags (Badges) Styling --- */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: #1ABB9C !important;
    border: none !important;
    color: #fff !important;
    border-radius: 20px !important;
    padding: 2px 12px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.8) !important;
    border: none !important;
    margin-right: 5px !important;
    padding: 0 !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff !important;
    background: transparent !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    padding: 0 8px !important;
}