:root {
    --btn-primary-color: @colorMenues;
    --text-primary-color: @colorMenues;
    --btn-secondary-color: #6c757d;
    --table-header-color: #343a40;
    --table-header-text: #ffffff;
}


/* Fondo general */
body, html {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: url('/images/fondo-login.jpg') no-repeat center center fixed;
    background-size: cover;
}

    body::before,
    .background-overlay {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: var(--btn-primary-color);
        opacity: 0.05;
        pointer-events: none;
        filter: blur(2px);
    }

/* Textos */
.text-primary-custom {
    color: var(--text-primary-color) !important;
}

/* Navbar e íconos */
.navbar {
    background-color: var(--btn-primary-color) !important;
}

    .navbar .bi, .btn .bi, .text-icon-white {
        color: white !important;
    }

/* Botones */
.btn-primary {
    background-color: var(--btn-primary-color) !important;
    border-color: var(--btn-primary-color) !important;
}

    .btn-primary:hover {
        filter: brightness(0.85);
    }

.btn-secondary {
    background: var(--btn-secondary-color);
    color: white;
}

    .btn-secondary:hover {
        background: #5a6268;
    }

/* Botones de día */
.day-button {
    border: 1px solid var(--btn-primary-color);
    color: var(--btn-primary-color);
    font-weight: bold;
}

    .day-button:hover,
    .day-button.active {
        background-color: var(--btn-primary-color);
        color: white;
    }

/* Cronómetro fijo */
.sticky-cronometro {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 15px;
    border-radius: 50px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    max-width: 400px;
    margin: 0 auto 10px auto;
    z-index: 10;
}

    .sticky-cronometro span,
    .sticky-cronometro button,
    .sticky-cronometro button i {
        color: black;
    }

/* Accordion */
.accordion-item {
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.accordion-button {
    font-weight: bold;
    transition: all 0.3s ease;
    background-color: white;
    color: #333;
}

    .accordion-button:hover {
        background-color: #f0f8ff;
    }

.accordion-header-semana {
    background-color: var(--btn-primary-color) !important;
    color: white !important;
}

.orden-container {
    background-color: var(--btn-primary-color) !important;
    color: white !important;
}

.accordion-header-dia {
    background-color: #222020 !important;
    color: white !important;
    text-align: center;
}

/* Cards */
.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    border-radius: 8px;
}

.card-body {
    padding: 20px;
    transition: all 0.3s ease;
}

.card:hover {
    background-color: #e6f7ff;
}

/* Cards por estado */
.card-success {
    background-color: #d4edda;
    color: #155724;
}

.card-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.card-secondary {
    background-color: #e2e3e5;
    color: #383d41;
}

/* Cards por tipo */
.card-activacion {
    background-color: #28a745;
    color: #fff;
}

.card-movilidad {
    background-color: #fff3cd;
    color: #212529;
}

.card-fuerza {
    background-color: #dc3545;
    color: #fff;
}

.card-cardio {
    background-color: #17a2b8;
    color: #fff;
}

.card-accesorios {
    background-color: #e2e3e5;
    color: #212529;
}

.card-activacion:hover {
    background-color: #218838;
}

.card-movilidad:hover {
    background-color: #ffe8a1;
}

/* Tablas */
.table th {
    background-color: var(--table-header-color) !important;
    color: var(--table-header-text) !important;
}

.table td {
    background-color: #ffffff;
    font-size: 14px;
}

/* Fila de ejercicios por estado */
.exercise-row[data-estado="Completo"] td {
    background-color: #ACF39D !important;
    color: black !important;
}

.exercise-row[data-estado="NoComenzado"] td {
    background-color: #FFF3CD !important;
    color: black !important;
}

.exercise-row[data-estado="Incompleto"] td {
    background-color: #FF6663 !important;
    color: white !important;
}

/* Lista de ejercicios */
#exerciseListContainer li {
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    transition: all 0.3s ease;
}

    #exerciseListContainer li.active {
        background-color: var(--btn-primary-color);
        color: white;
    }

/* Footer */
.footer {
    background-color: #343a40;
    color: white;
    padding: 10px;
    text-align: center;
}

/* Fondo de Login */
.login-background {
    position: relative;
    background-image: url('/images/fondo-login.png');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .login-background::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--btn-primary-color);
        opacity: 0.6;
        z-index: 0;
    }

.login-card-container {
    position: relative;
    z-index: 1;
}