/****************************** VICKY FITNESS **************************************/
/* Paleta tomada de app/images/logo3.jpeg: negro, dorado champán y blanco.          */

:root {
    --ad-menu-size: 370px;

    --vf-black: #000000;
    --vf-ink: #141414;
    --vf-ink-soft: #2a2927;
    --vf-gold: #d3b889;
    --vf-gold-rgb: 211, 184, 137;
    --vf-gold-deep: #a8884f;
    --vf-gold-text: #8c6d3a;
    --vf-ivory: #f7f5f0;
    --vf-line: #e7e2d8;
    --vf-muted: #6f6a60;
    --vf-success: #3f7d5a;
    --vf-danger: #a8443a;
    --vf-warning: #b9772c;

    --ad-menu-item-color: var(--vf-gold);
    --bs-dark: #0a0a0a;
}

/****************************** VARIABLES BOOTSTRAP *******************************/
[data-bs-theme=light] {
    --bs-primary: #141414;
    --bs-primary-rgb: 20, 20, 20;
    --bs-primary-text-emphasis: #141414;
    --bs-primary-bg-subtle: #f5eedf;
    --bs-primary-border-subtle: #e3d3b1;
    --bs-success: #3f7d5a;
    --bs-success-rgb: 63, 125, 90;
    --bs-danger: #a8443a;
    --bs-danger-rgb: 168, 68, 58;
    --bs-body-color: #1f1e1c;
    --bs-body-color-rgb: 31, 30, 28;
    --bs-secondary-color: rgba(31, 30, 28, 0.7);
    --bs-link-color: #8c6d3a;
    --bs-link-color-rgb: 140, 109, 58;
    --bs-link-hover-color: #6f5527;
    --bs-link-hover-color-rgb: 111, 85, 39;
    --bs-border-color: #e7e2d8;
    --bs-border-color-translucent: rgba(60, 45, 15, 0.12);
    --bs-dark-bg-subtle: #f7f5f0;
    --bs-light-bg-subtle: #fbfaf7;
    --bs-tertiary-bg: #faf8f4;
    --bs-secondary-bg: #efebe3;
    --bs-focus-ring-color: rgba(211, 184, 137, 0.35);
}

[data-bs-theme=dark] {
    --bs-primary: #d3b889;
    --bs-primary-rgb: 211, 184, 137;
    --bs-primary-text-emphasis: #e3cfa9;
    --bs-primary-bg-subtle: #2a2416;
    --bs-primary-border-subtle: #6b5a38;
    --bs-body-bg: #121212;
    --bs-body-bg-rgb: 18, 18, 18;
    --bs-dark-bg-subtle: #0a0a0a;
    --bs-link-color: #d3b889;
    --bs-link-color-rgb: 211, 184, 137;
    --bs-link-hover-color: #e3cfa9;
    --bs-link-hover-color-rgb: 227, 207, 169;
    --bs-focus-ring-color: rgba(211, 184, 137, 0.35);
}

::selection {
    background: rgba(var(--vf-gold-rgb), 0.45);
}

/****************************** SIDEBAR **************************************/
[data-menu-theme=dark] #sidebar {
    background: #0a0a0a;
}

[data-menu-theme=dark] #module-menu {
    background: var(--vf-black);
    border-right: 1px solid rgba(var(--vf-gold-rgb), 0.22) !important;
}

/* el logo se recorta para mostrar solo el diamante */
.sidebar-logo {
    width: 40px;
    height: 40px;
    line-height: 0;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    background: var(--vf-black);
}

.sidebar-logo img {
    position: absolute;
    clip-path: inset(2%);
    width: 222%;
    max-width: none;
    left: -58.5%;
    top: -26%;
}

.sidebar-system-name {
    height: 72px;
    padding-top: 16px;
}

[data-menu-theme=dark] .sidebar-system-name {
    background: var(--vf-black);
}

#sidebar .sidebar-system-name .name,
#sidebar .sidebar-menu-title .name {
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.sidebar-menu-title {
    margin: 0 0 8px 0;
    padding: 26px 10px 22px 10px;
    border-radius: 0;
    border-bottom: 1px solid rgba(var(--vf-gold-rgb), 0.22);
}

[data-menu-theme=dark] .sidebar-menu-title,
[data-menu-theme=dark] .sidebar-system-name {
    color: var(--vf-gold);
}

[data-menu-theme=dark] #sidebar .border-bottom {
    border-bottom: 1px solid rgba(var(--vf-gold-rgb), 0.22) !important;
}

a.sidebar-link {
    border-radius: 4px;
    padding: 9px 12px;
    letter-spacing: 0.01em;
    transition: background-color .15s ease, color .15s ease;
}

a.sidebar-link i {
    margin-right: 6px;
    opacity: 0.75;
}

[data-menu-theme=dark] a.sidebar-link {
    color: #b9b4aa;
}

[data-menu-theme=dark] a.sidebar-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

[data-menu-theme=dark] a.sidebar-link[aria-expanded=true] {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

[data-menu-theme=dark] a.sidebar-link.active,
[data-menu-theme=dark] a.sidebar-link.active:hover {
    background: rgba(var(--vf-gold-rgb), 0.13) !important;
    color: var(--vf-gold) !important;
    box-shadow: inset 2px 0 0 var(--vf-gold);
}

[data-menu-theme=light] a.sidebar-link.active,
[data-menu-theme=light] a.sidebar-link.active:hover {
    background: var(--vf-ink) !important;
    color: var(--vf-gold) !important;
}

[data-menu-theme=light] a.sidebar-link[aria-expanded=true] {
    background: rgba(0, 0, 0, 0.05);
}

a.sidebar-link.active i {
    opacity: 1;
}

.master-menu-item {
    border-radius: 4px;
    transition: color .15s ease, border-color .15s ease;
}

[data-menu-theme=dark] .master-menu-item {
    color: #8f8a80;
}

[data-menu-theme=dark] .master-menu-item.active {
    background: rgba(var(--vf-gold-rgb), 0.13) !important;
    color: var(--vf-gold);
}

[data-menu-theme=dark] .master-menu-item:not(.active):hover {
    border-color: rgba(var(--vf-gold-rgb), 0.4);
    color: #fff;
}

[data-menu-theme=light] .master-menu-item.active {
    background: var(--vf-ink) !important;
    color: var(--vf-gold);
}

@media (min-width:767.98px) {
    [data-menu-theme=dark] #sidebar:not(.collapsed) {
        box-shadow: none !important;
    }
}

/****************************** NAVBAR / FOOTER **************************************/
.navbar {
    min-height: 56px;
}

[data-bs-theme=light] .navbar,
[data-bs-theme=light] footer {
    background: #fff;
}

footer {
    color: var(--vf-muted);
}

.navbar .username {
    letter-spacing: 0.02em;
}

/****************************** TARJETAS / PANELES **************************************/
.card {
    --bs-card-box-shadow: 0 1px 2px rgba(30, 22, 5, 0.04), 0 10px 28px rgba(30, 22, 5, 0.05);
    --bs-card-border-radius: 8px;
    --bs-card-inner-border-radius: 7px;
}

[data-bs-theme=light] .card,
[data-menu-theme=light][data-bs-theme=light] .card {
    --bs-border-color-translucent: var(--vf-line);
}

.card-header, .panel-heading {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.card-header .card-title, .panel-heading .panel-title {
    font-weight: 600;
}

[data-bs-theme=light] .card-footer {
    background: #fbfaf7;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0.01em;
}

/****************************** BOTONES **************************************/
.btn {
    --bs-btn-border-radius: 4px;
    letter-spacing: 0.02em;
}

.btn-sm {
    --bs-btn-border-radius: 4px;
}

.btn-lg {
    --bs-btn-border-radius: 4px;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #141414;
    --bs-btn-border-color: #141414;
    --bs-btn-hover-color: var(--vf-gold);
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-focus-shadow-rgb: var(--vf-gold-rgb);
    --bs-btn-active-color: var(--vf-gold);
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #5c5a55;
    --bs-btn-disabled-border-color: #5c5a55;
}

.btn-outline-primary {
    --bs-btn-color: #141414;
    --bs-btn-border-color: #141414;
    --bs-btn-hover-color: var(--vf-gold);
    --bs-btn-hover-bg: #141414;
    --bs-btn-hover-border-color: #141414;
    --bs-btn-focus-shadow-rgb: var(--vf-gold-rgb);
    --bs-btn-active-color: var(--vf-gold);
    --bs-btn-active-bg: #141414;
    --bs-btn-active-border-color: #141414;
    --bs-btn-disabled-color: #5c5a55;
    --bs-btn-disabled-border-color: #5c5a55;
}

[data-bs-theme=dark] .btn-primary {
    --bs-btn-color: #141414;
    --bs-btn-bg: var(--vf-gold);
    --bs-btn-border-color: var(--vf-gold);
    --bs-btn-hover-color: #141414;
    --bs-btn-hover-bg: #e3cfa9;
    --bs-btn-hover-border-color: #e3cfa9;
    --bs-btn-active-color: #141414;
    --bs-btn-active-bg: #e3cfa9;
    --bs-btn-active-border-color: #e3cfa9;
}

[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: var(--vf-gold);
    --bs-btn-border-color: var(--vf-gold);
    --bs-btn-hover-color: #141414;
    --bs-btn-hover-bg: var(--vf-gold);
    --bs-btn-hover-border-color: var(--vf-gold);
    --bs-btn-active-color: #141414;
    --bs-btn-active-bg: var(--vf-gold);
    --bs-btn-active-border-color: var(--vf-gold);
}

[data-bs-theme=light] .btn-default {
    color: #2a2927;
}

[data-bs-theme=light] .btn-default:hover,
[data-bs-theme=light] .btn-default:active,
[data-bs-theme=light] .btn-default.hover {
    background-color: #f5eedf;
    border-color: #d9c7a2;
    color: #141414;
}

.btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--vf-gold-rgb), 0.4);
}

/* colores de los iconos de acción ('fa:save green', 'fa:trash red', ...) */
.green  { color: var(--vf-success); }
.red    { color: var(--vf-danger); }
.orange { color: var(--vf-warning); }
.blue   { color: var(--vf-gold-text); }

[data-bs-theme=dark] .blue { color: var(--vf-gold); }

.nav-pills {
    --bs-nav-pills-link-active-bg: #141414;
    --bs-nav-pills-link-active-color: var(--vf-gold);
    --bs-nav-pills-border-radius: 4px;
}

.nav-tabs .nav-link.active {
    box-shadow: inset 0 2px 0 var(--vf-gold);
}

[data-bs-theme=light] .nav-link {
    --bs-nav-link-color: #4a4841;
    --bs-nav-link-hover-color: #141414;
}

/****************************** FORMULARIOS **************************************/
.form-control, .form-select, .tfield {
    border-radius: 4px;
}

.form-control:focus,
.form-select:focus,
.tfield:focus,
.form-check-input:focus {
    border-color: var(--vf-gold-deep);
    box-shadow: 0 0 0 0.2rem rgba(var(--vf-gold-rgb), 0.3);
}

.form-check-input:checked {
    background-color: #141414;
    border-color: #141414;
}

[data-bs-theme=dark] .form-check-input:checked {
    background-color: var(--vf-gold-deep);
    border-color: var(--vf-gold-deep);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 4px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--vf-gold-deep);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #141414;
    color: var(--vf-gold);
}

[data-bs-theme=light] .select2-container--default .select2-results__option[aria-selected=true],
[data-bs-theme=light] .select2-container--default .select2-results__option--selected {
    background-color: #f5eedf;
    color: #141414;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datetimepicker table tr td.active,
.datetimepicker table tr td.active:hover,
.datetimepicker table tr td span.active,
.datetimepicker table tr td span.active:hover {
    background: #141414 !important;
    border-color: #141414 !important;
    color: var(--vf-gold) !important;
    text-shadow: none !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background: #f5eedf !important;
    border-color: #e3d3b1 !important;
    color: #141414 !important;
}

.dropdown-menu {
    --bs-dropdown-border-radius: 6px;
    --bs-dropdown-link-active-bg: #141414;
    --bs-dropdown-link-active-color: var(--vf-gold);
    --bs-dropdown-link-hover-bg: #f5eedf;
    box-shadow: 0 10px 28px rgba(30, 22, 5, 0.08);
}

[data-bs-theme=dark] .dropdown-menu {
    --bs-dropdown-link-hover-bg: rgba(var(--vf-gold-rgb), 0.12);
}

.list-group {
    --bs-list-group-active-bg: #141414;
    --bs-list-group-active-border-color: #141414;
    --bs-list-group-active-color: var(--vf-gold);
}

.progress {
    --bs-progress-bar-bg: var(--vf-gold-deep);
}

/****************************** DATAGRIDS **************************************/
.table thead th {
    font-size: var(--ad-font-size-less);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

[data-bs-theme=light] .table thead th {
    color: var(--vf-muted);
    border-bottom: 1px solid #d9c7a2 !important;
}

[data-bs-theme=light] .table thead th a {
    color: inherit;
}

[data-bs-theme=light] .table {
    --bs-table-striped-bg: rgba(247, 245, 240, 0.7);
    --bs-table-hover-bg: #f5eedf;
    --bs-table-active-bg: #f5eedf;
    --bs-table-border-color: #eeeae2;
}

.table-dark {
    --bs-table-bg: #141414;
    --bs-table-border-color: #2a2927;
}

[data-bs-theme=light] .table thead.table-dark th {
    color: var(--vf-gold);
    border-bottom: 0 !important;
}

.pagination {
    --bs-pagination-border-radius: 4px;
    --bs-pagination-color: #2a2927;
    --bs-pagination-hover-color: #141414;
    --bs-pagination-hover-bg: #f5eedf;
    --bs-pagination-focus-color: #141414;
    --bs-pagination-focus-bg: #f5eedf;
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--vf-gold-rgb), 0.3);
    --bs-pagination-active-color: var(--vf-gold);
    --bs-pagination-active-bg: #141414;
    --bs-pagination-active-border-color: #141414;
}

[data-bs-theme=dark] .pagination {
    --bs-pagination-color: #dee2e6;
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: rgba(var(--vf-gold-rgb), 0.12);
    --bs-pagination-focus-color: #fff;
    --bs-pagination-focus-bg: rgba(var(--vf-gold-rgb), 0.12);
    --bs-pagination-active-color: #141414;
    --bs-pagination-active-bg: var(--vf-gold);
    --bs-pagination-active-border-color: var(--vf-gold);
}

/****************************** DIÁLOGOS **************************************/
.swal2-popup {
    border-radius: 8px !important;
}

.swal2-styled.swal2-confirm {
    background-color: #141414 !important;
    border-radius: 4px !important;
    letter-spacing: 0.04em;
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--vf-gold-rgb), 0.5) !important;
}

.swal2-styled.swal2-cancel {
    border-radius: 4px !important;
}

.modal-content {
    --bs-modal-border-radius: 8px;
}

/****************************** CALENDARIO **************************************/
.fc {
    --fc-button-bg-color: #141414;
    --fc-button-border-color: #141414;
    --fc-button-hover-bg-color: #000;
    --fc-button-hover-border-color: #000;
    --fc-button-active-bg-color: #000;
    --fc-button-active-border-color: #000;
    --fc-today-bg-color: rgba(var(--vf-gold-rgb), 0.16);
    --fc-border-color: var(--bs-border-color);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:hover {
    color: var(--vf-gold);
}

.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--vf-gold-rgb), 0.4);
}

.fc .fc-toolbar-title {
    font-weight: 400;
    letter-spacing: 0.04em;
}

.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number {
    color: var(--bs-body-color);
}

/****************************** LOGIN **************************************/
html[data-bs-theme] .main.vf-login {
    min-height: 100vh;
    display: flex;
    background: radial-gradient(ellipse at 50% 0%, #1c1810 0%, #0a0a0a 55%, #000 100%);
}

.vf-login .content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vf-login .modal-dialog {
    max-width: 440px;
}

.vf-login .modal-content {
    background: var(--vf-black);
    border: 1px solid rgba(var(--vf-gold-rgb), 0.35);
    border-radius: 6px !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}

.vf-login .modal-header {
    padding: 2rem 3rem 1rem 3rem !important;
}

.vf-login .modal-header img {
    width: 250px;
    clip-path: inset(2%);
}

.vf-login .modal-body {
    padding: 0 3rem 3rem 3rem !important;
}

.vf-login .form-floating > .form-control {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px !important;
    color: #fff;
}

.vf-login .form-floating > .form-control:focus {
    border-color: var(--vf-gold);
    box-shadow: 0 0 0 0.2rem rgba(var(--vf-gold-rgb), 0.2);
}

.vf-login .form-floating > label,
.vf-login .form-floating > .form-control:focus ~ label,
.vf-login .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #a9a397;
    letter-spacing: 0.04em;
}

.vf-login .form-floating > .form-control:focus ~ label::after,
.vf-login .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: transparent;
}

.vf-login .form-floating > .form-control:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 1000px #000 inset;
    caret-color: #fff;
}

.vf-login .btn-primary {
    --bs-btn-color: #141414;
    --bs-btn-bg: var(--vf-gold);
    --bs-btn-border-color: var(--vf-gold);
    --bs-btn-hover-color: #141414;
    --bs-btn-hover-bg: #e3cfa9;
    --bs-btn-hover-border-color: #e3cfa9;
    --bs-btn-active-color: #141414;
    --bs-btn-active-bg: #e3cfa9;
    --bs-btn-active-border-color: #e3cfa9;
    --bs-btn-font-size: 0.9rem;
    --bs-btn-padding-y: 0.85rem;
    border-radius: 4px !important;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.vf-login .modal-footer {
    border-top-color: rgba(var(--vf-gold-rgb), 0.2);
}

.vf-login .modal-footer a,
.vf-login .modal-footer .btn {
    color: var(--vf-gold);
}

@media (max-width: 575.98px) {
    .vf-login .modal-header {
        padding: 1.5rem 1.5rem 0.5rem 1.5rem !important;
    }
    .vf-login .modal-body {
        padding: 0 1.5rem 2rem 1.5rem !important;
    }
}

/****************************** MÓVIL **************************************/
@media (max-width: 767.98px) {
    :root {
        --ad-menu-size: 300px;
    }
}