/* ----------------------------------------- MODO OSCURO ----------------------------------------- */
[data-bs-theme="dark"] {
    --bs-dark-bg: #0d1117;
    --bs-navbar-footer-dark-bg: #161b22;
    --text-color-navbar-footer-dark: #eee5e1;
    --color-text-success: #3CD4A0;
    --color-text-primary: #8c734b;
    --color-text-danger: #FF5C93;
    --color-text-warning: #FFC260;
    --color-text-info: #7c858c;
    --color-btn-success: #3CD4A0;
    --color-btn-primary: #8c734b;
    --color-btn-danger: #FF5C93;
    --color-btn-warning: #FFC260;
    --color-btn-info: #7c858c;
    --color-bg-thead: #161b22;
    --color-text-thead: #e1e8ee;
    --color-bg-tbody: #0d1117;
    --color-text-tbody: #e1e8ee;
    --color-bg-actions: #2a3441;
    --color-border-thead: #272d33;
    --color-bg-action-buttons: #eee5e1;
    --color-labels: #FFFFFF;
}

body[data-bs-theme="dark"] {
    background-color: var(--bs-dark-bg);
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .footer {
    background-color: var(--bs-navbar-footer-dark-bg);
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .navbar .navbar-brand,
[data-bs-theme="dark"] .navbar .navbar-nav .nav-link,
[data-bs-theme="dark"] #footer,
[data-bs-theme="dark"] #footer a {
    color: var(--text-color--navbar-footer-dark);
}

[data-bs-theme="dark"] thead tr th {
    background-color: var(--color-bg-thead);
    color: var(--color-text-thead);
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    vertical-align: middle;
}

[data-bs-theme="dark"] tbody tr td {
    background-color: var(--color-bg-tbody);
    color: var(--color-text-tbody);
    border: 2px solid var(--color-border-thead);
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    vertical-align: middle;
}

[data-bs-theme="dark"] .table-actions {
    background-color: var(--color-bg-actions);
}

[data-bs-theme="dark"] thead th {
    border: 2px solid var(--color-border-thead);
    border-bottom: 4px solid var(--color-border-thead);
}

[data-bs-theme="dark"] .text-success {
    color: var(--color-text-success) !important;
}

[data-bs-theme="dark"] .text-primary {
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .text-danger {
    color: var(--color-text-danger) !important;
}

[data-bs-theme="dark"] .text-warning {
    color: var(--color-text-warning) !important;
}

[data-bs-theme="dark"] .text-info {
    color: var(--color-text-info) !important;
}

[data-bs-theme="dark"] .btn-success {
    background-color: var(--color-bg-thead) !important;
    color: var(--color-btn-success) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: none;
    outline: none;
}

[data-bs-theme="dark"] .btn-success:hover {
    background-color: var(--color-bg-actions) !important;
    outline: 1px solid var(--color-btn-success) !important;
}

[data-bs-theme="dark"] .btn-primary {
    background-color: var(--color-bg-thead) !important;
    color: var(--color-btn-primary) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: none;
    outline: none;
}

[data-bs-theme="dark"] .btn-primary:hover {
    background-color: var(--color-bg-actions) !important;
    outline: 1px solid var(--color-btn-primary) !important;
}

[data-bs-theme="dark"] .btn-danger {
    background-color: var(--color-bg-thead) !important;
    color: var(--color-btn-danger) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: none;
    outline: none;
}

[data-bs-theme="dark"] .btn-danger:hover {
    background-color: var(--color-bg-actions) !important;
    outline: 1px solid var(--color-btn-danger) !important;
}

[data-bs-theme="dark"] .custom-tooltip-success {
    --bs-tooltip-color: var(--color-text-success);
    --bs-tooltip-border-radius: var(--color-text-success);
    --bs-tooltip-bg: var(--color-bg-actions);
}

[data-bs-theme="dark"] .custom-tooltip-warning {
    --bs-tooltip-color: var(--color-text-warning);
    --bs-tooltip-border-radius: var(--color-text-warning);
    --bs-tooltip-bg: var(--color-bg-actions);
}

[data-bs-theme="dark"] .custom-tooltip-danger {
    --bs-tooltip-color: var(--color-text-danger);
    --bs-tooltip-border-radius: var(--color-text-danger);
    --bs-tooltip-bg: var(--color-bg-actions);
}

[data-bs-theme="dark"] a .text-light {
    color: var(--color-bg-action-buttons) !important;
}

[data-bs-theme="dark"] .form-label {
    color: var(--color-labels);
}

/* ----------------------------------------- MODO CLARO ----------------------------------------- */

[data-bs-theme="light"] {
    --bs-light-bg: #f8f8f8;
    --bs-navbar-footer-light-bg: #ebebeb;
    --text-color-navbar-footer-light: #444444;
    --color-text-success: #5bb391;
    --color-text-primary: #9c8257;
    --color-text-danger: #e5738e;
    --color-text-warning: #ffc980;
    --color-text-info: #8b9399;
    --color-btn-success: #5bb391;
    --color-btn-primary: #9c8257;
    --color-btn-danger: #e5738e;
    --color-btn-warning: #ffc980;
    --color-btn-info: #8b9399;
    --color-bg-thead: #f2f2f2;
    --color-text-thead: #444444;
    --color-bg-tbody: #ffffff;
    --color-text-tbody: #444444;
    --color-bg-actions: #e0e0e0;
    --color-bg-tooltip: #2a3441;
    --color-border-thead: #d2d2d2;
    --color-bg-action-buttons: #2a3441;
    --color-labels: #2a3441;
}

body[data-bs-theme="light"] {
    background-color: var(--bs-light-bg);
}

[data-bs-theme="light"] .navbar,
[data-bs-theme="light"] .footer {
    background-color: var(--bs-navbar-footer-light-bg);
}

[data-bs-theme="light"] .navbar,
[data-bs-theme="light"] .navbar .navbar-brand,
[data-bs-theme="light"] .navbar .navbar-nav .nav-link,
[data-bs-theme="light"] #footer,
[data-bs-theme="light"] #footer a {
    color: var(--text-color-navbar-footer-light);
}

[data-bs-theme="light"] thead tr th {
    background-color: var(--color-bg-thead);
    color: var(--color-text-thead);
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    vertical-align: middle;
}

[data-bs-theme="light"] tbody tr td {
    background-color: var(--color-bg-tbody);
    color: var(--color-text-tbody);
    border: 2px solid var(--color-border-thead);
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    vertical-align: middle;
}

[data-bs-theme="light"] .table-actions {
    background-color: var(--color-bg-actions);
}

[data-bs-theme="light"] thead th {
    border: 2px solid var(--color-border-thead);
    border-bottom: 4px solid var(--color-border-thead);
}

[data-bs-theme="light"] .text-success {
    color: var(--color-text-success) !important;
}

[data-bs-theme="light"] .text-primary {
    color: var(--color-text-primary) !important;
}

[data-bs-theme="light"] .text-danger {
    color: var(--color-text-danger) !important;
}

[data-bs-theme="light"] .text-warning {
    color: var(--color-text-warning) !important;
}

[data-bs-theme="light"] .text-info {
    color: var(--color-text-info) !important;
}

[data-bs-theme="light"] .btn-success {
    background-color: var(--color-bg-thead) !important;
    color: var(--color-btn-success) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: none;
    outline: none;
}

[data-bs-theme="light"] .btn-success:hover {
    background-color: var(--color-bg-actions) !important;
    outline: 1px solid var(--color-btn-success) !important;
}

[data-bs-theme="light"] .btn-primary {
    background-color: var(--color-bg-thead) !important;
    color: var(--color-btn-primary) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: none;
    outline: none;
}

[data-bs-theme="light"] .btn-primary:hover {
    background-color: var(--color-bg-actions) !important;
    outline: 1px solid var(--color-btn-primary) !important;
}

[data-bs-theme="light"] .btn-danger {
    background-color: var(--color-bg-thead) !important;
    color: var(--color-btn-danger) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: none;
    outline: none;
}

[data-bs-theme="light"] .btn-danger:hover {
    background-color: var(--color-bg-actions) !important;
    outline: 1px solid var(--color-btn-danger) !important;
}

[data-bs-theme="light"] .custom-tooltip-success {
    --bs-tooltip-color: var(--color-text-success);
    --bs-tooltip-border-radius: var(--color-text-success);
    --bs-tooltip-bg: var(--color-bg-tooltip);
}

[data-bs-theme="light"] .custom-tooltip-warning {
    --bs-tooltip-color: var(--color-text-warning);
    --bs-tooltip-border-radius: var(--color-text-warning);
    --bs-tooltip-bg: var(--color-bg-tooltip);
}

[data-bs-theme="light"] .custom-tooltip-danger {
    --bs-tooltip-color: var(--color-text-danger);
    --bs-tooltip-border-radius: var(--color-text-danger);
    --bs-tooltip-bg: var(--color-bg-tooltip);
}

[data-bs-theme="light"] a .text-light,
[data-bs-theme="light"] div .text-light {
    color: var(--color-bg-action-buttons) !important;
}

[data-bs-theme="light"] .form-label {
    color: var(--color-labels);
}

[data-bs-theme="dark"] .link-primary {
    color: var(--color-btn-primary) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: none;
    outline: none;
}

[data-bs-theme="dark"] .link-primary:hover {
    border-bottom: 1px solid var(--color-btn-primary) !important;
}

[data-bs-theme="light"] .link-primary {
    color: var(--color-btn-primary) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: none;
    outline: none;
}

[data-bs-theme="light"] .link-primary:hover {
    border-bottom: 1px solid var(--color-btn-primary) !important;
}


html,
body {
    height: 100%;
    margin: 0px;
    max-width: 100%;
}

#read_container {
    max-width: 90%;
}

/* ----------------------------------------
# FOOTER
---------------------------------------- */
.wrapper {
    min-height: 100%;
    margin-bottom: -50px;
}

#footer {
    border-top: 1px solid grey;
    margin-top: 100px;
    color: #fff;
}

#footer,
.push {
    height: 50px;
}

/* ----------------------------------------
# OTHERS
---------------------------------------- */
/* Buttons in add/edit */
.btn-width {
    width: 80px;
}

/* Buttons in navbar */
#btn-nav {
    float: right;
    width: 110px;
    margin-right: 25px;
}

.navbar {
    border-bottom: 1px solid grey;
}

.f-size {
    font-size: 18px;
}

.badge{
    background-color: #fc3c3c;
    color: #fff;
}

/* Table */
div>table>thead>tr>th {
    vertical-align: middle;
}

.table-actions {
    vertical-align: middle;
}

#card-form {
    margin-bottom: 70px;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--bs-primary);
}

input:disabled,
textarea:disabled,
select:disabled,
form-select:disabled {
    background-color: #858589 !important;
    color: #495057 !important;
    cursor: not-allowed;
}

.custom-select option {
    max-width: 200px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.invalid-feedback {
    color: #f18b95 !important
}

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}