/* static/css/style.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #eef1f5; /* Slightly richer off-white */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #2c3e50; /* Darker, slightly desaturated blue for text */
    padding-bottom: 70px; /* Add padding to the bottom of the body to prevent content from being hidden by the fixed navbar */
}

.container-fluid.main-content { /* Renamed to avoid conflict if you have other .container-fluid elements */
    background-color: #ffffff;
    padding: 25px; /* Increased padding */
    border-radius: 10px; /* Slightly less rounded corners for a cleaner look */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* More pronounced shadow */
    flex-grow: 1;
    margin-top: 25px; /* Add some margin at the top */
    /* flex-grow: 1; Remove or adjust if causing issues with padding-bottom */
}

.navbar-brand {
    font-weight: bold;
    color: #3498db; /* Primary color for brand */
}

.table {
    margin-bottom: 0; /* Remove default bottom margin if inside a card-like container */
}

.table thead th {
    background-color: #3498db; /* A modern blue - primary color */
    color: #ffffff;
    border-bottom-width: 0; /* Remove bottom border from header */
}

.table tbody tr:hover {
    background-color: #f8f9fa; /* Standard light hover */
}

.table td, .table th {
    vertical-align: middle; /* Align content vertically */
    padding: 1rem; /* Adjust padding for cells */
}

.btn {
    border-radius: 0.25rem; /* Standard Bootstrap button radius */
    font-weight: 500;
    padding: 0.5rem 1rem; /* Standard button padding */
}

.btn-primary {
    background-color: #3498db; /* Primary color */
    border-color: #3498db;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary:hover {
    background-color: #2980b9; /* Darker shade of primary */
    border-color: #2980b9;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.btn-outline-primary {
    color: #3498db;
    border-color: #3498db;
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #3498db;
    border-color: #3498db;
}

.btn-danger {
    background-color: #e74c3c; /* A modern red */
    border-color: #e74c3c;
}

.btn-danger:hover {
    background-color: #c0392b; /* Darker shade of red */
    border-color: #c0392b;
}

.btn-outline-danger {
    color: #e74c3c;
    border-color: #e74c3c;
}
.btn-outline-danger:hover {
    color: #fff;
    background-color: #e74c3c;
    border-color: #e74c3c;
}

.btn-secondary {
    background-color: #95a5a6; /* A neutral grey */
    border-color: #95a5a6;
    color: #ffffff;
}

.btn-secondary:hover {
    background-color: #7f8c8d; /* Darker grey */
    border-color: #7f8c8d;
}


.select2-container .select2-selection--single {
    height: calc(1.5em + 1rem + 2px); /* Adjusted height to match Bootstrap inputs better */
    border: 1px solid #ced4da; /* Standard Bootstrap border */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + 1rem); /* Adjusted line height */
    padding-left: .75rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 1rem);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3498db; /* Primary color for select2 highlight */
}

/* Responsive table adjustments */
@media (max-width: 768px) {
    .table thead {
        display: none;
    }
    .table, .table tbody, .table tr, .table td {
        display: block;
        width: 100%;
    }
    .table tr {
        margin-bottom: 1.25rem;
        border: 1px solid #d1d9e6;
        border-radius: .5rem;
        box-shadow: 0 6px 18px rgba(0,0,0,0.1); /* Enhanced shadow */
        background-color: #ffffff;
        padding: 0.75rem; /* Increased internal padding */
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Added transition for hover */
    }

    .table tr:hover {
        transform: translateY(-3px); /* Slight lift on hover */
        box-shadow: 0 8px 24px rgba(0,0,0,0.15); /* Enhanced shadow on hover */
    }

    .table td {
        text-align: right;
        padding-left: 45%; /* Adjusted for new label styling */
        position: relative;
        border-top: 1px solid #f1f3f5; /* Even lighter separator line */
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }
    .table tr td:first-child {
        border-top: none;
        padding-top: 1rem; /* More padding for the first item */
    }
    .table tr td:last-child {
        padding-bottom: 1rem; /* More padding for the last item */
    }
    .table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0; /* Align to the very left of the td */
        top: 0; /* Align to the top of the td */
        bottom: 0; /* Stretch to the bottom of the td */
        width: 40%; /* Define a fixed width for the label area */
        padding: 0.85rem 0.75rem; /* Match td padding */
        font-weight: 600;
        text-align: left;
        white-space: normal;
        color: #343a40; /* Darker label color */
        font-size: 0.85em;
        background-color: #f8f9fa; /* Light background for label area */
        border-right: 1px solid #e9ecef; /* Separator line for label area */
        border-top-left-radius: .45rem; /* Match card radius if first-child */
        border-bottom-left-radius: .45rem; /* Match card radius if first-child */
    }

    .table tr td:first-child::before {
        border-top-left-radius: .45rem;
    }
    .table tr td:last-of-type:not(:first-child)::before { /* if it's the last, but not also the first */
         border-bottom-left-radius: .45rem;
    }
    /* Special handling for action buttons container if it's the last td */
    .table td[data-label="Acciones"] {
        padding-left: 1rem; /* Override padding-left for actions */
        background-color: #fff; /* Ensure actions area doesn't get label background */
    }
    .table td[data-label="Acciones"]::before {
        display: none; /* Hide the 'Acciones:' label text if not desired */
    }

    .table td .d-grid {
        padding-top: 0.25rem; /* Add some space above buttons */
    }

    .btn-group-sm > .btn, .btn-sm {
        padding: .3rem .6rem;
        font-size: .8rem;
    }
    h1 {
        font-size: 1.6rem;
    }
    .d-grid.gap-2.d-md-block .btn {
        margin-bottom: .5rem !important; /* Ensure spacing for stacked buttons */
    }
    .d-grid.gap-2.d-md-block .btn:last-child {
        margin-bottom: 0 !important;
    }
}

.footer {
    background-color: #f8f9fa; /* Lighter footer background */
    padding: 1.5rem 0;
    color: #6c757d; /* Standard muted text color */
    font-size: 0.9em;
    border-top: 1px solid #dee2e6; /* Subtle top border */
}

/* Navbar specific styles to ensure visibility */
/* Remove or comment out the old navbar styles if they are no longer needed or conflict */
/* nav.navbar.bg-primary {
    background-color: #007bff !important;
}

nav.navbar-dark .navbar-brand,
nav.navbar-dark .navbar-brand:hover,
nav.navbar-dark .navbar-brand:focus {
    color: #ffffff !important;
}

nav.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

nav.navbar-dark .navbar-nav .nav-link.active,
nav.navbar-dark .navbar-nav .nav-link:hover,
nav.navbar-dark .navbar-nav .nav-link:focus {
    color: #ffffff !important;
}

nav.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

nav.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
} */

/* Styles for the new bottom fixed navbar */
.navbar.fixed-bottom {
    background-color: #ffffff; /* Light background for the navbar */
    border-top: 1px solid #e0e0e0; /* Slightly softer border */
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08); /* Softer shadow */
}

.navbar.fixed-bottom .nav-link {
    padding-top: 0.5rem;
    padding-bottom: 0.3rem;
    font-size: 0.75rem; /* Smaller text for bottom nav items */
    color: #7f8c8d; /* Muted grey for inactive icons/text */
    transition: color 0.15s ease-in-out;
}

.navbar.fixed-bottom .nav-link .bi {
    display: block; /* Make icon stack on top of text if needed, or ensure it's properly sized */
    margin-bottom: 0.1rem; /* Space between icon and text */
    font-size: 1.2rem; /* Slightly larger icons */
}

.navbar.fixed-bottom .nav-link:hover {
    color: #3498db; /* Primary color on hover */
}

.navbar.fixed-bottom .nav-link.active {
    color: #3498db; /* Primary color for active link */
    font-weight: bold;
}

.bottom-nav-text {
    display: block; /* Ensure text is on its own line if icons are large */
    font-size: 0.7rem; /* Even smaller text for clarity */
}

/* Form control styling */
.form-control, .form-select {
    border-radius: 0.25rem;
    border-color: #ced4da;
    padding: 0.5rem 0.75rem; /* Standard padding */
}
.form-control:focus, .form-select:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25); /* Focus ring with primary color */
}

/* Card styling (if you use cards elsewhere or for the main content area) */
.card {
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

h1, h2, h3, h4, h5, h6 {
    color: #2c3e50; /* Consistent heading color */
}

h1 {
    font-size: 2rem; /* Adjusted h1 size */
    margin-bottom: 1rem;
}

/* Alert styling */
.alert-primary {
    background-color: #d6eaf8; /* Lighter primary for alerts */
    border-color: #b3d7f3;
    color: #1a5276;
}

.alert-success {
    background-color: #d4efdf;
    border-color: #a9dfbf;
    color: #196f3d;
}

.alert-danger {
    background-color: #f5b7b1;
    border-color: #eca097;
    color: #78281f;
}

.alert-warning {
    background-color: #fdebd0;
    border-color: #f9d7a5;
    color: #7e5109;
}

.alert-info {
    background-color: #d6e4f0;
    border-color: #a6c5e0;
    color: #2e86c1;
}