:root{
    --color-primary:#0c7286;
    --color-bg:#EEF5F5;
    --color-dark:#16223A;
}

@font-face {
    font-family: 'Roboto';
    src: url('../css/fonts/roboto/Roboto-Light.woff2') format('woff2');
    font-weight: 300; 
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../css/fonts/roboto/Roboto-Regular.woff2') format('woff2');
    font-weight: 400; 
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../css/fonts/roboto/Roboto-Medium.woff2') format('woff2');
    font-weight: 500; 
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../css/fonts/roboto/Roboto-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../css/fonts/roboto/Roboto-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

body{
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    background:#EEF5F5;
    min-height:100vh;
}
.form-control {
    font-size: 15px;
    font-weight:400;
}
.btn {
    font-size:14px;
}
.font-15{
    font-size: 15px;
}
.font-14{
    font-size: 14px;
}
.font-13{
    font-size: 13px;
}
p {
    font-size: 15px;
}

table {
    font-size: 13px !important;
    vertical-align: middle !important;
}

table thead th{
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #dee2e6 !important;
}

table tbody tr td{
    border: none !important;
}

table tbody tr td{
    transition: background 0.2s ease;
}

table tbody tr:hover td{
    background: #EEF5F5;
}

div.dataTables_wrapper div.dataTables_info {
    font-size: 13px;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a{
    font-size: 13px !important;
}
.active>.page-link, .page-link.active {
    background-color: #0c7286 !important;
}

/*Estilo para el swal fire*/
.swal-small{
    width:350px !important;
    font-size:14px;
}

/* icono */
.swal-small .swal2-icon{
    margin:10px auto !important;
}

.swal-small .swal2-icon .swal2-icon-content{
    font-size:28px !important;
}

/* titulo */
.swal-small .swal2-title{
    padding-top: 0px;
    font-size:20px !important;
}

/* texto */
.swal-small .swal2-html-container{
    font-size:14px !important;
}
/* contenedor botones */
.swal-small .swal2-actions{
    margin-top:10px;
}

label {
    font-size: 14px !important;
}
.modal-title {
    font-size: 17px;
}

.bi::before {
    font-weight: 600 !important;
}

.card{
    border:none;
    border-radius:12px;
}
.card-body{
    border:none;
    border-radius:12px;
}

.btn-primary{
    background:#0c7286;
    border:none;
}

.btn-primary:hover{
    background:#095c6d;
}

.topbarlinks {
    background-color: #fff;
    border: none;
    border-radius: 5px;
    padding: 0px 10px;
    color: #0c7286;
    font-size: 22px;
}

.page-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #D5E8E8;
    padding: 10px 17px;
    border-radius: 10px;
    margin-bottom: 15px;
}

/* DARK MODE */

[data-bs-theme="dark"] body, 
[data-bs-theme="dark"] .sidebar{
    background:#12192D;
}
[data-bs-theme="dark"] .card-body{
    background-color: #16223a;
    border: 1px solid #2d394c;
}
[data-bs-theme="dark"] .sidebar a{
    color:#fff;
}

[data-bs-theme="dark"] .has-sub a.open{
    color: #fff;
}

[data-bs-theme="dark"] .submenu a{
    color: #fff;
}

[data-bs-theme="dark"] .submenu a:hover {
    background: #12192d;
    color: #fff;
}

[data-bs-theme="dark"] .submenu a:hover:before {
    border: 1px solid #fff;
}

[data-bs-theme="dark"] .submenu a:before {
    border: 1px solid #fff;
}

[data-bs-theme="dark"] .has-sub a.open {
    background-color: #16223A;
}
[data-bs-theme="dark"] .submenu {
    background: #16223A;
}
[data-bs-theme="dark"] .sidebar li.active > a {
   background-color: #16223A; 
}

[data-bs-theme="dark"] .page-header {
   background-color: #16223a; 
   border: 1px solid #2d394c;
}

[data-bs-theme="dark"] table{
    background:#16223A;
}

[data-bs-theme="dark"] table tbody tr td{
    background:#16223A;
    color:#e9ecef;
}
[data-bs-theme="dark"] table thead th{
    background:#16223A;
    color:#fff;
}

[data-bs-theme="dark"] table.dataTable tbody td{
    background:#16223A;
    color:#e9ecef;
}
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a {
    background:#16223A;
}
[data-bs-theme="dark"] table tbody tr:hover td{
    background: #12192D;
}
[data-bs-theme="dark"] .modal-content {
    background: #12192D;
}
[data-bs-theme="dark"] .form-control {
    background-color: #16223A;
}
[data-bs-theme="dark"] div:where(.swal2-container) div:where(.swal2-popup) {
    background-color: #16223A;
    color: #fff;
    border: 1px solid #2d394c;
}

[data-bs-theme="dark"] table tbody tr td{
    background:#16223A;
    color:#e9ecef;
}
[data-bs-theme="dark"] table tbody tr th {
    background: #16223A;
    color: #e9ecef;
}
[data-bs-theme="dark"] table thead th{
    background:#16223A;
    color:#fff;
}

[data-bs-theme="dark"] .submenu li.active a:before{
    border: 1px solid #fff;
}
[data-bs-theme="dark"] .submenu li.active a{
    background:#12192d;
    color: #fff;
}

[data-bs-theme="dark"]  div:where(.swal2-container) div:where(.swal2-validation-message) {
    background: #0d1423;
    margin: 10px;
    border: 1px solid #cecece;
    color: #fff;
}

[data-bs-theme="dark"] .dtp table.dtp-picker-days tr > th{
    color: #fff;
}

[data-bs-theme="dark"] .dtp table.dtp-picker-days tr > td > a{
    color: #fff;
}
[data-bs-theme="dark"] .dtp > .dtp-content > .dtp-date-view > header.dtp-header {
    background: #16223a;
}
[data-bs-theme="dark"] .dtp div.dtp-date, .dtp div.dtp-time {
    background: #12192d;
}
[data-bs-theme="dark"] .dtp div.dtp-picker {
    background: #12192d;
}
[data-bs-theme="dark"] .dtp div.dtp-picker-month {
    background: #16223a;
}
[data-bs-theme="dark"] .dtp .dtp-buttons {
    background: #12192d;
}

.dtp div.dtp-picker-month {
    padding-top: 10px;
}
.dtp .dtp-buttons {
    padding: 10px;
    
}
.dtp div.dtp-date, .dtp div.dtp-time {
    background-color: #095c6d;
}
.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
    background: #2f3d4a;
}
.dtp .dtp-buttons .dtp-btn-ok{
    background-color: #095c6d;
    border: none;
    font-size: 14px !important;
}
.dtp .dtp-buttons .dtp-btn-cancel{
    background-color: #2f3d4a;
    border: none;
    font-size: 14px !important;
    margin-right: 10px;
    color: #fff;
}
.dtp table.dtp-picker-days tr > td > a.selected {
    background-color: #095c6d;
}

/*css para el drag & drop de los temarios*/
#tablaTemarios tbody tr{
    cursor: move;
}

/* 🔹 Quitar flechita del dropdown */
.btnMenuAcciones::after {
    display: none !important;
}

/*Botón redondeado tipo icono */
[data-bs-theme="dark"] .btnMenuAcciones {
    border-radius: 50%;
    border-color: #0c7286;
    width: 35px;
    height: 35px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff00;
    color: #fff;
}

[data-bs-theme="dark"] .btnMenuAcciones:first-child:active {
    background-color: #12192d;
    color: #fff;
}
[data-bs-theme="dark"] .btnMenuAcciones.show {
    background-color: #0c7286;
    color: #fff;
}
[data-bs-theme="dark"] .btnMenuAcciones:hover {
    background-color: #12192d;
    color: #fff;
}
[data-bs-theme="dark"] .list-group {
    background-color: #16223a;
}
[data-bs-theme="dark"] .list-group-item {
    background-color: #16223a;
}
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #12192d;
}

[data-bs-theme="dark"] .dropdown-item:focus, .dropdown-item:hover {
    color: #fff;
    background-color: #16223a;
}

[data-bs-theme="dark"] .dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #0c7286;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #000;
    background-color: #D5E8E8;
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #0c7286;
}

.bootstrap-select.form-control {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btnMenuAcciones {
    border-radius: 50%;
    border-color: #0c7286;
    width: 35px;
    height: 35px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff00;
    color: #0c7286;
}
.btnMenuAcciones:first-child:active {
    background-color: #12192d;
    color: #fff;
}
.btnMenuAcciones.show {
    background-color: #0c7286;
    color: #fff;
    border:none;
}
.btnMenuAcciones:hover {
    background-color: #12192d;
    color: #fff;
}

.dropdown-item{
    font-size: 14px;
}

.bg-purple {
    background-color: #6f42c1 !important;
    color: #fff;
}

.logo-dark {
    display: none;
}

[data-bs-theme="dark"] .logo-light {
    display: none;
}

[data-bs-theme="dark"] .logo-dark {
    display: block;
}

.logo-sidebar{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-sidebar img{
    width: 120px;
    padding: 15px 0px;
}

@media(max-width:992px){
    .logo-sidebar img{
    width: 160px;
    }
}

#loaderGlobal{
    position:fixed;
    inset:0;
    background:rgb(0 0 0 / 84%);
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
}

.loader-box{
    background:#fff;
    padding:25px 35px;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.loader-box{
    animation:fadeIn .3s ease;
}

@keyframes fadeIn{
    from{opacity:0; transform:scale(0.9);}
    to{opacity:1; transform:scale(1);}
}

i[class^="fi-rr-"]:before, i[class*=" fi-rr-"]:before, span[class^="fi-rr-"]:before, span[class*="fi-rr-"]:before{
    vertical-align: middle !important;
}