.modal input[type="text"]:not(.custom-search-input, .form-login),
.modal input[type="email"],
.modal input[type="number"],
.modal input[type="tel"],
.modal input[type="password"]:not(.form-login),
.modal select,
.modal textarea,
.card input[type="text"]:not(.custom-search-input, .form-login),
.card input[type="email"],
.card input[type="number"],
.card input[type="tel"],
.card input[type="password"]:not(.form-login),
.card select,
.card textarea,
.result-search {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5) !important;
    color: white !important;
    padding: 8px 8px !important;
    width: 100% !important;
    outline: none !important;
    font-size: 14px !important;
    transition: border-color 0.3s ease !important;
}

input:-webkit-autofill {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5) !important;
    color: white !important;
    padding: 8px 8px !important;
    width: 100% !important;
    outline: none !important;
    font-size: 14px !important;
    transition: border-color 0.3s ease !important;
}

.modal input[type="text"]::placeholder,
.modal input[type="email"]::placeholder,
.modal input[type="number"]::placeholder,
.modal input[type="tel"]::placeholder,
.modal input[type="password"]::placeholder,
.modal textarea::placeholder,
.card input::placeholder,
.card select::placeholder,
.card textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.modal input:focus,
.modal select:focus,
.modal textarea:focus,
.card input:focus,
.card select:focus,
.card textarea:focus {
    border-bottom-color: white;
}
.card label{
    color: white;
    font-weight: bold;
}

.modal select,
.card select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px;
}
.modal input[type="date"],
.card input[type="date"] {
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    padding: 8px 8px;
    width: 100%;
    outline: none;
    font-size: 14px;
    transition: border-color 0.3s ease;
    color-scheme: dark; /* hace que el calendario se vea oscuro */
}

.modal input[type="date"]:focus,
.card input[type="date"]:focus {
    border-bottom-color: white;
}

/* Estilo del ícono del calendario */
.modal input[type="date"]::-webkit-calendar-picker-indicator,
.card input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    opacity: 0.7;
}

.modal input[type="date"]::-webkit-calendar-picker-indicator:hover,
.card input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
.result-search{
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    padding: 8px 8px;
    width: 100%;
    outline: none;
    font-size: 14px;
    transition: border-color 0.3s ease;
}
.no-active-information{
    color: #dc3545;
    font-size: 18px;
    margin-top: 20px;
}
select:focus{
    background: #1c1b1a !important;
    color: white !important;
}
.search-container {
    position: relative;
    max-width: 40px;
    margin-left: auto;
    margin-right: 0;
    transition: max-width 0.4s ease;
    overflow: hidden;
}

.search-container.active {
    max-width: 300px;
}

.custom-search-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #dc3545 !important;
    color: #dc3545 !important;
    padding: 8px 8px 8px 35px !important;
    width: 100% !important;
    outline: none !important;
    font-size: 14px !important;
    transition: opacity 0.3s ease !important;
    opacity: 0 !important;
}

.search-container.active .custom-search-input {
    opacity: 1 !important;
}

.custom-search-input::placeholder {
    color: rgba(220, 53, 69, 0.6) !important;
}

.search-icon {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #dc3545 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    z-index: 10 !important;
}
/* Todas las tablas sin background */
.table,
.table-hover,
.dataTable {
    --bs-table-bg: transparent;
}
.table-hover, 
.dataTables_wrapper table {
    background: transparent !important;
}

.table-hover thead th,
.dataTables_wrapper table thead th,
table.dataTable thead th,
table.dataTable thead td,
.table thead th {
    background: transparent !important;
    background-color: transparent !important;
    color: white !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-top: none !important;
}

.table-hover tbody tr,
.dataTables_wrapper table tbody tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table-hover tbody tr:hover,
.dataTables_wrapper table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.table-hover tbody td,
.dataTables_wrapper table tbody td {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Iconos en rojo en todas las tablas */
.table-hover .fa,
.dataTables_wrapper .fa {
    color: #dc3545 !important;
}

.table-hover a:hover .fa,
.dataTables_wrapper a:hover .fa {
    color: #c82333 !important;
}

/* Paginación con fondo transparente */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

/* Info de la paginación */
.dataTables_wrapper .dataTables_info {
    color: white !important;
}
.modal-content{
    background-color: #080807;
    opacity: 0.9;
    color: white;
}
.page-h6{
    text-align:center; 
    color:white; 
    font-size: 25px;
}
.row{
    margin: 0;
}
.btnGeneral{
    cursor: pointer;
    padding: 3px 10px;
    transition: 0.3s;
}
a:hover{
    color: inherit;
}
.container{
    text-align: center !important;
}
.table-container{
    background-color: #2e2d2b99;
}
.btn-action{
    background-color: #9c2d2bc9;
    color: white;
    text-decoration: none;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}
.btn-action:hover{
    background-color: #9c2c2b;
    color: white;
    cursor: pointer;
}
.btn-action-secondary{
    background-color: #646464cc;
    color: white;
    text-decoration: none;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}
.btn-action-secondary:hover{
    background-color: #646464;
    cursor: pointer;
}
.btnGeneral:hover{
    background-color: gray;
    cursor: pointer;
}

main { 
    padding-bottom: 20px !important; 
}
.bodyBackground{
    background: url("/template/images/drb_background.jpg");
    background-repeat: no-repeat;
    align-content: center;
    background-size: cover;
}
.navPersonal{
    box-shadow: 0 8px 23px 2px #454545;
    padding: 0;
    text-align: center !important;
}

.navbar-nav-link{
    text-decoration: none;
    transition: all 0.3s ease;
}
.navbar-dark .navbar-nav-link:hover{
    color: #fff;
    background-color: #61616187;
}
.navbar-dark .navbar-nav-link:focus{
    color: #fff;
    background-color: #282f37;
}

.navbar-nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 0;
    height: 2px;              /* grosor de la línea */
    background: red;          /* color de la línea */
    transition: width 0.3s ease;
  }
  .navbar-dark .navbar-nav-link:hover::after {
    width: 100%;              /* se dibuja de izquierda a derecha */
  }
  .fondoNav{
    text-align: end;
    font-size: 13px;
    background-color: #000000d1 !important;
    backdrop-filter: blur(6px);
    padding: 13px 28px !important;
  }
  #navbar-navigation ul li{
    padding: 0;
  }

  /*LOGIN*/
.body-login{
    background: url("/template/images/drb_background.jpg");
    background-repeat: no-repeat;
    align-content: center;
    background-size: cover;
}
.form-group-feedback {
    position: relative;
}

.form-control-feedback {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.form-login, .form-login[type="password"] {
    padding-left: 40px !important;
}

.form-group-feedback .form-control {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5) !important;
    color: white !important;
}
.invalid-feedback{
    background: transparent !important;
    position: absolute !important;
}
/** NAVBAR*/
.navbar-nav .dropdown-user {
    position: relative;
    z-index: 1050;
}

.navbar-nav .dropdown-menu {
    position: absolute !important;
    z-index: 1060 !important;
    top: 100% !important;
    transform: none !important;
}

.navbar-dark {
    z-index: 1040 !important;
}

/* Si el navbar sticky está interfiriendo */
.navbar-sticky {
    z-index: 1040 !important;
}