:root {
    --ocre: #c9b13b;
    --ocre2: #E1C968;
    --ocre3: #D2B22A;
    --azul: #323e48;
    --sombra_inputs: 0 0 0 0.25rem rgba(150, 150, 150, 0.5);
}

@font-face {
    font-family: "Affogato";
    src: url("../fonts/Affogato-Regular.otf");
}

body {
    font-family: Affogato;
    background-color: #f5f5f5;
    /*padding:10px;*/
}

.btn-primary {
    background-color: var(--ocre3);
    border-color: #fff;
}

    .btn-primary:hover {
        background-color: var(--ocre2);
        border-color: #fff;
    }

    .btn-check:focus + .btn-primary,
    .btn-primary:focus {
        color: #fff;
        background-color: var(--ocre2);
        border-color: #fff;
        box-shadow: var(--sombra_inputs);
    }

    .btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
        box-shadow: var(--sombra_inputs);
    }

.form-select:hover, .form-select:focus {
    box-shadow: var(--sombra_inputs);
    border-color: #fff;
}

.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: var(--ocre2);
    outline: 0;
    box-shadow: none;
}

.btn-info, btn-info:hover {
    color: #ffffff !important;
}

.loslabelserror {
    color: #842029;
}

.form-check-input:checked {
    background-color: var(--ocre);
    border-color: #fff;
}

.form-check-input:focus {
    border-color: var(--ocre);
    outline: 0;
    box-shadow: var(--sombra_inputs);
}

.dropdown-menu[data-bs-popper] {
    left: unset;
    right: 0px;
}

.dropdown-menu {
    font-size: 20px;
}

.ficha_persona {
    font-size: 14px;
    border-radius: 4px;
    background-color: #ddd;
    margin: 0px;
    margin-bottom: 0px;
    padding: 8px 0px;
    border: 1px solid #bbb;
    border-left-color: rgb(187, 187, 187);
    border-left-style: solid;
    border-left-width: 1px;
    /*border-left: 4px solid #323E48;*/
    box-shadow: 2px 2px 2px #ccc;
    margin-bottom: 8px;
    height: 76px;
}

    .ficha_persona .foto {
        padding-left: 5px;
        padding-right: 2px;
    }

    .ficha_persona .nombre {
        padding-left: 8px;
        padding-right: 2px;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

    .ficha_persona .botones {
        padding-left: 6px;
        padding-right: 5px;
        padding-top: 5px;
    }

.paginacion td {
    padding-top: 5px;
}

    .paginacion td table tr td {
        /*background-color: #efefef;
    border: 1px solid #666666;*/
        width: 42px;
        text-align: center;
    }

        .paginacion td table tr td a {
            text-decoration: none;
            font-weight: bold;
            background-color: #666;
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #666;
            color: #fff;
            font-size: 25px;
            margin: 2px;
            width: 100%;
            display: block;
        }

            .paginacion td table tr td a:hover {
                background-color: #efefef;
                color: #666;
            }

        .paginacion td table tr td span {
            text-decoration: none;
            font-weight: bold;
            background-color: #efefef;
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #666;
            color: #666;
        }

    .paginacion td table {
        margin: auto;
    }

.ficha_fichadas {
    font-size: 14px;
    border-radius: 4px;
    background-color: #efefef;
    margin: 0px;
    margin-bottom: 0px;
    padding: 0px 0px;
    border: 1px solid #666;
    border-left-color: #666;
    border-left-style: solid;
    border-left-width: 1px;
    /*border-left: 4px solid #323E48;*/
    box-shadow: 2px 2px 2px #ccc;
}

    .ficha_fichadas .cabo {
        background-color: #bbb;
        color: #333;
        border-bottom: 1px solid;
        padding: 5px;
    }

        .ficha_fichadas .cabo .botones {
            border-left: 1px solid #888;
            padding-left: 9px;
        }

    .ficha_fichadas .trabajadores {
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .ficha_fichadas .trabajador {
        width: 100%;
        border-bottom: 1px dashed;
        padding-bottom: 3px;
        padding-top: 1px;
    }

.accordion-button:not(.collapsed) {
    background-color: #6c757d;
    color: #fff;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.form-floating label {
    padding-right: 0px;
}
/* Calendario */
.bootstrap-datetimepicker-widget table {
    width: 100%;
    border-collapse: collapse;
    background-color: #dddddd;
    font-size: 12px;
    cursor: pointer;
}

.bootstrap-datetimepicker-widget tr:nth-of-type(odd) {
    background: #eee;
}

.bootstrap-datetimepicker-widget th {
    background: #4f4e4e;
    color: #fff !important;
    font-weight: bold;
}

    .bootstrap-datetimepicker-widget th:hover {
        background: #4f4e4e !important;
        /*color: #666 !important;*/
    }

.bootstrap-datetimepicker-widget {
    display: block !important;
}

    .bootstrap-datetimepicker-widget td, .bootstrap-datetimepicker-widget th {
        padding: 3px;
        border: 1px solid #ffffff;
        text-align: left;
    }

    .bootstrap-datetimepicker-widget tr:hover {
        background-color: #999999;
    }

    .bootstrap-datetimepicker-widget table td.active,
    .bootstrap-datetimepicker-widget table td.active:hover {
        background-color: var(--ocre) !important;
    }

    .bootstrap-datetimepicker-widget table td span.active {
        background-color: var(--ocre) !important;
    }

    .bootstrap-datetimepicker-widget table td.today:before {
        border-bottom-color: var(--ocre) !important;
    }
/* /Calendario */

.bg-secondary {
    background-color: var(--azul) !important;
}

.card-header {
    /*background-color: #6c757d !important;*/
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--azul);
}

.MsgModal {
    background-color: rgba(0,0,0, 0.5) !important;
}