@charset "utf-8";
/* CSS Document */

/* Define la fuente Roboto Regular */
@font-face {
    font-family: 'Roboto';
    font-weight: normal;
    src: url('/public/custom-css/Roboto-Regular.ttf') format('truetype');
}

/* Define la fuente Roboto Bold */
@font-face {
    font-family: 'Roboto';
    font-weight: bold;
    src: url('/public/custom-css/Roboto-Bold.ttf') format('truetype');
}

body, html, .app {
    min-height: 100vh;
    margin: 0;
	font-family: 'Roboto', sans-serif;
	font-size:1rem;
}


.app {
    background: linear-gradient(to bottom, #6fb6b3, #e7f0f0);
    position: relative; /* Necesario para el pseudo-elemento */
}

.app::before {
    content: '';
    position: absolute;
    top: 12rem;
    left: 20px;
    width: calc(100% - 40px);
    min-height: calc(100% - 14rem);
    background: url('/public/custom-img/MediaCupula.svg') no-repeat left;
    background-size: contain;
    z-index: 0;
    pointer-events: none; /* Asegura que el pseudo-elemento no interfiera con la interacción */
	padding-top: 10.5rem !important;
}

.container {
    position: relative;
    z-index: 1;
    padding: 20px;
    color: #333;
}

/* MODIFICAR BOTTONES DE BOOTRSTRAP */
:root {
	/* Danger */
	--bs-danger: #CB2C30;
	--bs-danger-bg-subtle: #F8C7CA;
	--bs-danger-border-subtle: #F09095;
	--bs-danger-text-emphasis: #EA4C50;
	
	/* Primary */
	--bs-primary: #6182AA;
	--bs-primary-bg-subtle: #D0DAE6;
	--bs-primary-border-subtle: #A3B4CC;
	--bs-primary-text-emphasis: #4E6A8A;

	/* Secondary */
	--bs-secondary: #656667;
	--bs-secondary-bg-subtle: #E1E1E1;
	--bs-secondary-border-subtle: #B8B8B8;
	--bs-secondary-text-emphasis: #4B4B4C;

	/* Success */
	--bs-success: #01A19A;
	--bs-success-bg-subtle: #C0EBE9;
	--bs-success-border-subtle: #7BD2CF;
	--bs-success-text-emphasis: #02867F;

	/* Warning */
	--bs-warning: #FF8200;
	--bs-warning-bg-subtle: #FFE1C2;
	--bs-warning-border-subtle: #FFB680;
	--bs-warning-text-emphasis: #CC6800;
}

.danger{color: var(--bs-danger);}
.primary{color: var(--bs-primary);}
.success{color: var(--bs-success);}

.receta_status_danger {border-left: 5px solid var(--bs-danger);}
.receta_status_success {border-left: 5px solid var(--bs-success);}
.receta_status_primary {border-left: 5px solid var(--bs-primary);}

.btn-outline-danger{
	--bs-btn-color:var(--bs-danger);
	--bs-btn-border-color:var(--bs-danger);
	--bs-btn-hover-color:#fff;
	--bs-btn-hover-bg:var(--bs-danger);
	--bs-btn-hover-border-color:var(--bs-danger);
	--bs-btn-focus-shadow-rgb:220,53,69;
	--bs-btn-active-color:#fff;
	--bs-btn-active-bg:var(--bs-danger);
	--bs-btn-active-border-color:var(--bs-danger);
	--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color:var(--bs-danger);
	--bs-btn-disabled-bg:transparent;
	--bs-btn-disabled-border-color:var(--bs-danger);
	--bs-gradient:none
}
.btn-outline-primary{
	--bs-btn-color:var(--bs-primary);
	--bs-btn-border-color:var(--bs-primary);
	--bs-btn-hover-color:#fff;
	--bs-btn-hover-bg:var(--bs-primary);
	--bs-btn-hover-border-color:var(--bs-primary);
	--bs-btn-focus-shadow-rgb:13,110,253;
	--bs-btn-active-color:#fff;
	--bs-btn-active-bg:var(--bs-primary);
	--bs-btn-active-border-color:var(--bs-primary);
	--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color:var(--bs-primary);
	--bs-btn-disabled-bg:transparent;
	--bs-btn-disabled-border-color:var(--bs-primary);
	--bs-gradient:none
}
.btn-outline-secondary{
	--bs-btn-color:var(--bs-secondary);
	--bs-btn-border-color:var(--bs-secondary);
	--bs-btn-hover-color:#fff;
	--bs-btn-hover-bg:var(--bs-secondary);
	--bs-btn-hover-border-color:var(--bs-secondary);
	--bs-btn-focus-shadow-rgb:33,37,41;
	--bs-btn-active-color:#fff;
	--bs-btn-active-bg:var(--bs-secondary);
	--bs-btn-active-border-color:var(--bs-secondary);
	--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color:var(--bs-secondary);
	--bs-btn-disabled-bg:transparent;
	--bs-btn-disabled-border-color:var(--bs-secondary);
	--bs-gradient:none
}
.btn-outline-success{
	--bs-btn-color:var(--bs-success);
	--bs-btn-border-color:var(--bs-success);
	--bs-btn-hover-color:#fff;
	--bs-btn-hover-bg:var(--bs-success);
	--bs-btn-hover-border-color:var(--bs-success);
	--bs-btn-focus-shadow-rgb:25,135,84;
	--bs-btn-active-color:#fff;
	--bs-btn-active-bg:var(--bs-success);
	--bs-btn-active-border-color:var(--bs-success);
	--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color:var(--bs-success);
	--bs-btn-disabled-bg:transparent;
	--bs-btn-disabled-border-color:var(--bs-success);
	--bs-gradient:none
}
.btn-outline-warning{
	--bs-btn-color:var(--bs-warning);
	--bs-btn-border-color:var(--bs-warning);
	--bs-btn-hover-color:#000;
	--bs-btn-hover-bg:var(--bs-warning);
	--bs-btn-hover-border-color:var(--bs-warning);
	--bs-btn-focus-shadow-rgb:255,193,7;
	--bs-btn-active-color:#000;
	--bs-btn-active-bg:var(--bs-warning);
	--bs-btn-active-border-color:var(--bs-warning);
	--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color:var(--bs-warning);
	--bs-btn-disabled-bg:transparent;
	--bs-btn-disabled-border-color:var(--bs-warning);
	--bs-gradient:none
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-danger-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-danger-text-emphasis);
    --bs-btn-focus-shadow-rgb: 203, 44, 48;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-danger-text-emphasis);
    --bs-btn-active-border-color: var(--bs-danger-text-emphasis);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
    --bs-gradient: none;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-primary-text-emphasis);
    --bs-btn-focus-shadow-rgb: 97, 130, 170;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-text-emphasis);
    --bs-btn-active-border-color: var(--bs-primary-text-emphasis);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-gradient: none;
}
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-secondary-text-emphasis);
    --bs-btn-focus-shadow-rgb: 101, 102, 103;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary-text-emphasis);
    --bs-btn-active-border-color: var(--bs-secondary-text-emphasis);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
    --bs-gradient: none;
}
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-success-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-success-text-emphasis);
    --bs-btn-focus-shadow-rgb: 1, 161, 154;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-success-text-emphasis);
    --bs-btn-active-border-color: var(--bs-success-text-emphasis);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-success);
    --bs-btn-disabled-border-color: var(--bs-success);
    --bs-gradient: none;
}
.btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-warning-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-warning-text-emphasis);
    --bs-btn-focus-shadow-rgb: 255, 130, 0;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-warning-text-emphasis);
    --bs-btn-active-border-color: var(--bs-warning-text-emphasis);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
    --bs-gradient: none;
}

.tooltip {
  --bs-tooltip-bg: var(--bs-success);
  --bs-tooltip-color: var(--bs-white);
}
.tooltip-inner {
	white-space: nowrap;
	max-width: none;
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Firefox */
input[type=number] {-moz-appearance: textfield;}

/*Modal*/
.modal-header {
	color: white;
	background-color: #4158D0;
	background-image: linear-gradient(45deg,  #008a83 0%, var(--bs-success) 46%,  #00dacf 100%);
	border: none;
}
.modal-header .modal-title {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra negra al texto */
}
.modal-footer .btn {
    width: 140px;
}

/* LoadingSpinner */
#spinner-container{z-index: 9999999 !important;}
#overlay{z-index: 9999998 !important;}
.LoadingSpinner {
	width: 56px;
	height: 56px;
	display: grid;
	animation: LoadingSpinner-plncf9 4s infinite;
}
.LoadingSpinner::before,
.LoadingSpinner::after {
	content: "";
	grid-area: 1/1;
	border: 9px solid;
	border-radius: 50%;
	border-color: #474bff #474bff #0000 #0000;
	mix-blend-mode: darken;
	animation: LoadingSpinner-plncf9 1s infinite linear;
}
.LoadingSpinner::after {
	border-color: #0000 #0000 #dbdcef #dbdcef;
	animation-direction: reverse;
}
@keyframes LoadingSpinner-plncf9 {100% {transform: rotate(1turn);}}

/* CALENDARIO TABLE	*/
#TableCalendario thead tr th{
	color: var(--bs-success-bg-subtle);
	background-color: var(--bs-success);
}

/*Nav-bar*/

.navbar{									   
	background: var(--bs-success);
	background: linear-gradient(90deg, #01a19934 0%, #affffba4 100%);
	height: 5rem;
	border: none;
	backdrop-filter: blur(5px);
	--webkit-backdrop-filter: blur(5px);
}

.navbar-brand{
	padding: 0 1.5rem;
}

.navbar-brand img{
	height: 3rem;
}

.navbar-text span{
	background-color: var(--bs-success);
	border: none;
	margin-right: 1.5rem;
}

.navbar_breadcrumb{		
	background-color: var(--bs-success);							   
	padding: 0.5rem 0.5rem 0.5rem 2rem;
	backdrop-filter: blur(5px);
	--webkit-backdrop-filter: blur(5px);
	margin-top: 5rem;
}

.navbar_breadcrumb  a{
	color: white;
	text-decoration: none;
	cursor: pointer;
}

.main-menu{
	padding-top:10rem !important;
}

/* Media query para ajustar el margen según el tamaño de la pantalla */
@media (min-width: 768px) {
	.navbar{									   
		background: var(--bs-success);
		background: linear-gradient(90deg, #01a19934 0%, #affffba4 100%);
		height: 8rem;
		border: none;
		backdrop-filter: blur(5px);
		--webkit-backdrop-filter: blur(5px);
	}
	.navbar-brand img{
		height: 5rem;
	}
	.navbar_breadcrumb{		
		background-color: #008a83be;							   
		padding: 0.5rem 0.5rem 0.5rem 2rem;
		backdrop-filter: blur(5px);
		--webkit-backdrop-filter: blur(5px);
		margin-top: 8rem;
	}
	.main-menu{
		padding-top:14rem !important;
	}
}

.main-menu .card-principal{
	min-height:50vh;
}

.main-menu .card-menu {
	margin: 1.8rem;
	background-color:white;
	color:var(--bs-success-bg-secondary);
	border-color:var(--bs-success-border-secondary);
}

.main-menu .card-menu:hover {
	transform: scale(1.03);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	border-color:var(--bs-success-border-secondary);
}

.card_main {
    border-radius: 3px;
    padding: 1rem 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -2rem;
    border: 0;
}

.card_header_btn {
	min-width: 150px;
    max-width: 150px;
}

.card_header_gradient{
	color: white;
	background-color: #019F98;
	border: none;
	/*background-image: linear-gradient(45deg,  #008a83 0%, var(--bs-success) 46%,  #00dacf 100%);*/
}
.nav-pills {
	--bs-nav-pills-link-active-bg:var(--bs-success-text-emphasis) !important;
}

.dropdown-menu{
	--bs-dropdown-link-active-color: var(--bs-success) !important; /*#{$dropdown-link-active-color};*/
	--bs-dropdown-link-active-bg: var(--bs-success-bg-subtle) !important; /* #{$dropdown-link-active-bg};*/
}

.table-responsive {
    overflow-y: auto; /* Habilita el scroll vertical */
    max-height: 45vh; /* Asegura que la tabla no exceda la altura del contenedor */
}

.table-responsive thead{ 
	position: sticky !important; 
	top: 0 !important; 
	z-index: 1 !important; 
}
/* Media query para ajustar el margen según el tamaño de la pantalla */
@media (min-width: 768px) {
	.table-responsive {
		overflow-y: auto; /* Habilita el scroll vertical */
		max-height: 40vh; /* Asegura que la tabla no exceda la altura del contenedor */
	}
}

.recetas_tools {cursor: pointer;width: 35px !important; text-align:center;display: inline-block}

#TurneraCalendarBody td:hover {
    filter: brightness(85%) !Important;
    cursor: pointer;
}