/* Asegura que el body y el HTML ocupen toda la altura de la pantalla */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

body {
    /* background: linear-gradient(to right, #007bff, #6610f2); */
    /* background: linear-gradient(to right, #8B5A2B, #D2B48C); */
    background: url(../img/background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Roboto', sans-serif;

    color: #333;
}

/* legend,label,h1,h2,h3,h4,h5,h6,p,a { */
*{
    color: white!important;
}
.btn-close {
    color: #fff;
    filter: invert(1) brightness(2); /* Blanco en la mayoría de fondos */
}
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(2);
    /* O usa opacity: 0 para ocultarlo y pon tu propio ícono */
}
input[type="datetime"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(2);
    /* O usa opacity: 0 para ocultarlo y pon tu propio ícono */
}
main {
    flex: 1;
}

input, select {
    background-color: #223322 !important;
    border: none;
    color: white !important;
}

select, 
.select2,
.select2-selection--single
{
    background-color: #223322;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 5px;
    padding: 8px;
}
.select2-results__option{
    background-color: #266729!important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background-color: #18431a !important;
    /* verde más oscuro */
    color: #fff;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: #266729 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{
    background-color: #18431a !important;
}
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single{
    background-color: #00000000 !important;
}
.select2, .select2-selection--single{
    padding: 4px!important;
}
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single{
    border: none!important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{
    color: white !important;
    opacity: 0.5 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 20px!important;
    color: white !important;
}
.select2-dropdown{
    background-color: #00000036!important;
}
.select2-container--default .select2-selection--single .select2-selection__clear{
    line-height: 9px!important;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
    background-color: black!important;
}
/* Estilo cuando está abierto */
select option {
    background-color: #223322;
    color: #ffffff;
}

select option:hover {
    background-color: #2e7d32 !important;
    /* verde más oscuro */
    color: #fff;
}

::placeholder {
    color: white !important;
    opacity: 0.4 !important;
}

table {
    margin-top: 20px;
}
.actions{
    min-width: 120px;
}
.actions a{
    padding: 3px 7px;
}

a {
    text-decoration: none !important;
    color: white !important;
    transition: all 0.3s ease-in-out;
}

a i,
.nav-item a {
    transition: all 0.3s ease-in-out;
}

a:hover i,
.nav-item a:hover {
    color: gray !important;
}

.textarea {
    margin-bottom: 20px;
}

.btn-primary {
    background: #454B1Ba3 !important;
    border: none !important;
}

.btn-primary:hover {
    background: #454B1B !important;
    border: none !important;
}

.table-dark {
    --bs-table-bg: rgba(0, 0, 0, 0.3) !important;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.2) !important;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.1) !important;
}

.navbar {
    background: rgba(0, 0, 0, 0.3) !important;
}

footer {
    background: rgba(0, 0, 0, 0.3) !important;
}

.navbar-toggler {
    background: rgba(0, 0, 0, 0.3) !important;
}

.content {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 15px;
}

.card {
    background: rgba(0, 0, 0, 0.3) !important;
}

.list-group-item {
    background: rgba(0, 0, 0, 0.3) !important;
    border: none;
    color: white !important;
}

.list-group-item div {
    width: 100px;
    display: flex;
    justify-content: space-between;
}

.pagination .page-item span {
    background: rgba(0, 0, 0, 0.3) !important;
    border: none;
    color: white !important;
}

.card {
    background: #fff;
    border: none;
}

/* La envoltura principal debe ocupar toda la altura disponible */
.wrapper {
    min-height: 100vh;
    /* Hace que la página ocupe al menos el alto de la pantalla */
    display: flex;
    flex-direction: column;
}

/* Contenido principal se expande y empuja el footer hacia abajo */
.content {
    flex: 1;
}

.input label,
.select label {
    margin: 10px;
}

fieldset {
    padding: 25px !important;
}

.row {
    position: relative;
}

.back-arrow {
    position: absolute;
    top: 20px;
    left: 20px;
    color: white;
    font-size: 20px;
    text-decoration: none;
    z-index: 1000;
    width: fit-content !important;
}

.content {
    position: relative;
}

.float-right {
    position: absolute;
    right: 15px;
    top: 15px;
}

.index.content a {
    transition: all 0.3s ease-in-out;
}

.index.content a:hover {
    opacity: .5;
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7.247 11.14l-4.796-5.481c-.566-.648.342-1.528.964-.884l4.07 4.661 4.07-4.66c.622-.645 1.53.236.964.884l-4.796 5.48a.5.5 0 0 1-.748 0z'/%3E%3C/svg%3E") !important;
    color: white !important;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

div:where(.swal2-container) div:where(.swal2-popup) {
    background-color:#2e693bfc !important;
    color: white !important;
}

div:where(.swal2-icon).swal2-error {
    border-color: red !important;
    color: red !important;
}

div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line]{
    background-color: red !important;
}

.modal-content {
    background-color: #355a38e5; /* Light background for better contrast */
}

.select2-dropdown {
  z-index: 9999 !important; /* también para el dropdown */
}

.form-control{
    background-color: #0e1c0dc7;    
}

textarea.form-control{
    background-color: #0e1c0dc7;
}

.form-control:focus {
    background-color: #0e1c0dc7!important;
}

.filter-bar{
    width: fit-content;
}