/*
 * SGD CSS
 * ---------
 */

.logo-gris {
    float:left;
    width: 24px;
    margin: 0 6px 0 3px;
}

.card-header-no-border {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.card-footer .logo-gris {
    margin: 2px 6px 0 3px;
    width: 20px;
}

.card-title-center {
    float: none !important;
    text-align: center;
}

.text-gray-light {
    color: #ccc;
}

.bg-warning-disabled {
    background: #FCF3CF !important;
}

.bg-success-disabled {
    background: #C8E6C9 !important;
}

.bg-danger-disabled {
    background: #F2D7D5 !important;
}

.table-hover tbody tr:hover {
    background-color: #f7f7f7;
}

.table-hover-white tbody tr:hover {
    background-color: #ffffff;
}

.d-on-over-hidden {
  display: none; /* Oculta el elemento inicialmente */
}

.d-on-over:hover .d-on-over-hidden {
  display: inline-block; /* Muestra el elemento al pasar el cursor sobre el padre */
}

/* Badges */

.badge {
    font-weight: 500;
    font-size: 80%;
}

.badge-labeled {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0.2rem;
}

.badge-labeled i {
    padding: 0.25em  0.3rem;
    cursor: pointer;
    position: relative;
    display: inline-block;
    right: -0.2em;
    background-color: #000000;
    background-color: rgba(0,0,0,0.2);
    border-left: solid 1px rgba(255,255,255,.5);
    border-radius: 0 0.25rem 0.25rem 0;
}

.badge-double {
  display: inline-flex;
  border-radius: 0.25rem;
  overflow: hidden;
  padding: 0;
}

.badge-double .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.badge-double .badge:first-child {
  border-top-right-radius: 0; /* Esquina superior derecha */
  border-bottom-right-radius: 0; /* Esquina inferior derecha */
}

.badge-double .badge:last-child {
  border-top-left-radius: 0; /* Esquina superior izquierda */
  border-bottom-left-radius: 0; /* Esquina inferior izquierda */
}

.badge-double .badge:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 1); /* Separador entre insignias */
}

a .badge:hover, a .badge-double .badge:hover {
    filter: brightness(0.85);
}

.badge-lighter {
    opacity: 0.75;
}

.badge-success-light {
    background-color: #CBF1C5 !important;
    color: #296E1F !important;
}

.badge-danger-light {
    background-color: #F9DADA !important;
    color: rgb(176,61,80); !important;
}

.badge-warning-light {
    background-color: #feefcb; !important;
    color: #b28500 !important;
}

.badge-gray-light {
    background-color: rgb(230,230,230) !important;
    color: #616161 !important;
}

.badge-primary-light {
    background-color: #d9f5fd;
    color: #0063b8 !important;
}

.badge-primary-border {
    border: 1px solid #007bff;
    background-color: #fff !important;
    color: #007bff !important;
}

.badge-danger-border {
    border: 1px solid #9E191B;
    background-color: #fff !important;
    color: #9E191B !important;
}

.badge-warning-border {
    border: 1px solid #b28500;
    background-color: #fff !important;
    color: #b28500 !important;
}

.badge-success-border {
    border: 1px solid #296E1F;
    background-color: #fff !important;
    color: #296E1F !important;
}

.badge-info-border {
    border: 1px solid #17a2b8;
    background-color: #fff !important;
    color: #17a2b8 !important;
}

.badge-gray-border {
    border: 1px solid #D1D1D1;
    background-color: rgb(245,245,245) !important;
    color: #616161 !important;
}

/* bs-nav-pills all color hack */
.nav-treeview>.nav-item>.nav-link.active {
    background: rgba(255,255,255,.9) !important;
}

.td_span {
    visibility: hidden;
}

.tr_hide_span:hover .td_span {
    visibility: visible;
}

.fa-ul>li {
    position: relative;
    line-height: 2em;
}

.user-panel .image {
    padding-left: .4rem;
}

.user-panel img {
    height: auto;
    width: 2.8rem;
}

.user-panel .info {
    line-height: 1.4em;
    padding: 0px 5px 0px 10px;
}

.user-panel .info span {
    font-size: 0.9em;
    font-weight: 400;
}

.thumbnail {
    position: relative;
    padding: 0px;
}

.thumbnail img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.caption {
    padding: 1em;
}


.progress {
    height: 1.2rem;
    margin-top: 2px;
}

.rating-num {
    margin-top:0px;
    font-size: 3.0rem;
    font-weight: 400
}

.toast-message a {
    color: #ddd !important;
}

.toast-message a:hover {
    color: #fff !important;
    text-decoration: underline;
}

#toast-container .toast-success {
    background-color: #1d7a32;
}

.card-header .form-control.selectize-control {
    height: 2em !important
}

.card-header {
    background-color: rgba(0,0,0,.06)
}

.tab-pane .table {
    margin-bottom: 0;
}

.custom-file-input ~ .custom-file-label::after {
    content: "Examinar";
}

.alert-warning {
    background: #ffe4a9 !important;
    border-color: #edb100 !important;
}

.btn-app {
    height: auto;
    line-height: 1.1;
}
.btn-app i {
    margin-bottom: 6px;
}

.btn-app.active {
    background-color: #ddd;
}

.table-last-tr-hidden tr td:last-child {
    opacity: 0;
}
.table-last-tr-hidden tr:hover > td:last-child {
    animation: fade-in 0.5s forwards;
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-copy {
    cursor:copy;
}

.cursor-help {
    cursor: help;
}


/* Selectize */
.selectize-dropdown .title {
    padding: 0.3em 0.5em 0 0.5em;
}

.selectize-dropdown .description {
    padding: 0 1em 0.3em 1em;
    margin-top: -6px;
    color: gray;
}

/* LightGallery Caption On/Off toggle */
.lg-hide-items .lg-sub-html { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }

.lg-item {
    cursor: pointer;
}



/* Agenda - Calendar */
/* Dates */

table.cal-week, table.cal-day {
    padding: 0 !important;
    margin: 0 !important;
}
.cal-week tbody > tr > td:last-of-type {
    padding-right: 0.3em !important;
}

.cal-week tbody > tr > td.cal-findia:last-of-type {
    border-right: none !important;
}

.cal-findia {
    border-right: 1px solid #607D8B !Important;
}

.cal-fila td {
    border-right: 1px solid #ddd;
}
.cal-th {
    line-height: 1.1rem;
}
.cal-fraccion a {
    display: block;
    width: 100%;
    height: 100%;
}

.cal-turno-continua {
    border-right: none !important;
}

.cal-day td {
    border-top: 1px dotted rgb(221, 221, 221);
}

.cal-day td:last-of-type {
    color: #333;
}

.cal-day-entrehoras {
    color: #bbb;
}

.cal-day-hora-actual {
    background-color: #F2D7D5;
    color: #C0392B !important;
    font-weight: bolder;
}

.cal-day-turno-continua {
    border-top: none !important;
}



/* scroll snap takes care of restoring scroll position */
.swipe-container {
  display: flex;
  overflow: auto;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}
/* scrollbar should be hidden */
.swipe-container::-webkit-scrollbar {
  display: none;
}
/* main element should always snap into view */
.swipe-element {
  scroll-snap-align: start;
  font-family: sans-serif;
  padding: 0;
  background-color: whitesmoke;
}
/* actions and element should be 100% wide */
.swipe-action,
.swipe-element {
  min-width: 100%;
}
.swipe-action {
  display: flex;
  align-items: center;
}
/* icon should remain sticky */
.swipe-action i {
  color: white;
  position: sticky;
  left: 16px;
  right: 16px;
}

/* action background colors */
.swipe-left {
  background-color: red;
}
.swipe-right {
  justify-content: flex-end;
  background-color: cornflowerblue;
}


/* My Radio Button */
.mrb-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.mrb {
    
}

.mrb input[type="radio"]:empty,
.mrb input[type="checkbox"]:empty {
    display: none;
}

.mrb input[type="radio"] ~ label i,
.mrb input[type="checkbox"] ~ label i {
    margin: 0 .375rem;
}

.mrb input[type="radio"] ~ label,
.mrb input[type="checkbox"] ~ label {
    position: relative;
    cursor: pointer;
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 5px;
    background-color: #fff;
    margin-bottom: 0;
}

.mrb input[type="radio"] ~ label:focus,
.mrb input[type="radio"] ~ label:hover,
.mrb input[type="checkbox"] ~ label:focus,
.mrb input[type="checkbox"] ~ label:hover {
    border-color: #aaa;
    background-color: #e9ecef;
}

.mrb input[type="radio"]:checked ~ label,
.mrb input[type="checkbox"]:checked ~ label {
    border-color: #aaa;
    background-color: #e9ecef;
    color: #fafafa;
}

.mrb.mrb-default input[type="radio"]:checked ~ label span.mrb-description,
.mrb.mrb-default input[type="checkbox"]:checked ~ label span.mrb-description {
    color: #343a40 !important;
}

.mrb.mrb-primary input[type="radio"]:checked ~ label,
.mrb.mrb-primary input[type="checkbox"]:checked ~ label {
    background-color: #337ab7;
}

.mrb.mrb-success input[type="radio"]:checked ~ label,
.mrb.mrb-success input[type="checkbox"]:checked ~ label {
    border-color: #28a745;
}

.mrb.mrb-info input[type="radio"]:checked ~ label,
.mrb.mrb-info input[type="checkbox"]:checked ~ label {
    background-color: #5bc0de;
}

.mrb.mrb-warning input[type="radio"]:checked ~ label,
.mrb.mrb-warning input[type="checkbox"]:checked ~ label {
    background-color: #f0ad4e;
}

.mrb.mrb-danger input[type="radio"]:checked ~ label,
.mrb.mrb-danger input[type="checkbox"]:checked ~ label {
    border-color: #dc3545;
}

.mrb input[type="radio"]:empty ~ label span,
.mrb input[type="checkbox"]:empty ~ label span {
    display: block;
}

.mrb input[type="radio"]:empty ~ label span.mrb-title,
.mrb input[type="checkbox"]:empty ~ label span.mrb-title {
    font-size: 1rem;
    font-weight: 700;
    margin: .375rem .75rem;
}

.mrb input[type="radio"]:empty ~ label span.mrb-description,
.mrb input[type="checkbox"]:empty ~ label span.mrb-description {
    font-weight: normal;
    font-size: 1rem;
    color: #6c757d;
    margin: .375rem .75rem;
}

.mrb input[type="radio"]:empty:checked ~ label span.mrb-description,
.mrb input[type="checkbox"]:empty:checked ~ label span.mrb-description {
    color: #343a40;
}

.mrb.mrb-default input[type="radio"]:empty:checked ~ label span.mrb-description,
.mrb.mrb-default input[type="checkbox"]:empty:checked ~ label span.mrb-description {
    color: #999;
}


/* Drop Area */
#drop-area {
  background-color: #ffffff !important;
  border-color: #adb5bd !important;
  border-style: dashed !important;
  border-radius: 8px;
}
#drop-area.bg-light {
  transition: all 0.5s ease;
  background-color: #CBF1C5 !important;
  border-color: #000000 !important;
}

kbd {
  /* Estilos para el fondo y el borde */
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 3px;
  
  /* Sombra para crear el efecto de relieve */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
  
  /* Espaciado interno para dar forma de tecla */
  padding: 0.1em 0.5em;
  
  /* Fuentes y tipografía */
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  text-shadow: 0 1px 0 #fff;
  
  /* Asegura que no se rompa la línea */
  white-space: nowrap;
  
  /* Alineación del texto y comportamiento del elemento */
  display: inline-block;
  vertical-align: middle;
  line-height: 1.4;
  margin: 0 0.1em;
}

kbd.always-visible {
    display: inline !important;
}

.data-field {
    position: relative;
    overflow: visible;
}

.data-value {
    position: relative;
    display: inline;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.data-value:hover {
    overflow: visible;
}

/* Crear un área extendida para mantener el hover */
.data-value::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    padding-right: 20px;
    height: 100%;
    z-index: 999;
}

.data-actions {
    position: absolute;
    left: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%) translateX(-30px);;
    white-space: nowrap;
    z-index: 1000;
    display: flex;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    transition-delay: 0.2s;
}

.data-value:hover .data-actions,
.data-actions:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.data-actions .btn {
    padding: 2px 6px;
    margin: 0;
}