@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('fonts/outfit-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('fonts/outfit-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--glass-bg: rgba(255, 255, 255, 0.85);
	--glass-border: rgba(255, 255, 255, 0.5);
	--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
}

body {
	font-family: 'Outfit', sans-serif !important;
	background-color: #f8fafc !important;
	background-image:
		url("../images/lab_corporate_waves.svg"),
		linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
	background-position: bottom center, center center !important;
	background-repeat: no-repeat, no-repeat !important;
	background-size: cover, cover !important;
	background-attachment: scroll, fixed !important;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
}

#wrap {
	flex: 1 0 auto !important;
	width: 100%;
	background: transparent !important;
}

.footer {
	flex-shrink: 0;
	position: relative !important;
	width: 100% !important;
	background: transparent !important;
	border: none !important;
	height: auto !important;
	min-height: unset !important;
	transition: all 0.4s ease 0s;
	padding-left: 225px !important;
	margin: 0 !important;
	box-shadow: none !important;
}

#wrap.active~.footer {
	padding-left: 0 !important;
}

@media (max-width: 1358px) {
	.footer {
		padding-left: 0 !important;
	}

	#wrap.active~.footer {
		padding-left: 250px !important;
	}
}

@media (max-width: 768px) {
	.footer {
		padding-left: 0 !important;
	}

	#wrap.active~.footer {
		padding-left: 0 !important;
	}
}

/* Modern Glass Navbar */
#navbar-principal {
	background: var(--glass-bg) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow) !important;
}

/* Modern Glass Sidebar */
#sidebar-wrap {
	background: var(--glass-bg) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-right: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow) !important;
	border-radius: 0 16px 16px 0;
	padding-top: 15px;
	overflow-x: hidden !important;
}

.side-header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Sidebar Links Styling */
.sidebar-nav li a {
	color: #475569 !important;
	font-weight: 500;
	border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
	transition: all 0.3s ease;
	margin: 0 8px;
	border-radius: 8px;
}

.sidebar-nav li a:hover,
.sidebar-nav li.active {
	background: rgba(14, 165, 233, 0.1) !important;
	color: #0284c7 !important;
}

/* Universal Glassmorphism for dynamic content cards */
.eemform,
div.eemform,
.panel,
.divtable-pac,
.eemform-alert,
.div-alert .card-body {
	background: var(--glass-bg) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: 16px !important;
	box-shadow: var(--glass-shadow) !important;
	overflow: visible !important;
}

/* Selectpicker & Bootstrap dropdown must escape card bounds */
.eemform .bootstrap-select .dropdown-menu,
.eemform .bootstrap-select.open .dropdown-menu,
.eemform .dropdown-menu {
	z-index: 9999 !important;
	position: absolute !important;
}

/* Ensure selectpicker button toggle renders inside card and looks like standard input */
.eemform .bootstrap-select {
	position: relative;
}

.eemform .bootstrap-select > .dropdown-toggle.btn {
	background-color: #fff !important;
	border: 1px solid #ced4da !important;
	color: #495057 !important;
	border-radius: 0.25rem !important;
	font-weight: 400 !important;
}

.eemform .bootstrap-select > .dropdown-toggle.btn:focus {
	outline: 0 !important;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
	border-color: #80bdff !important;
}


.btn-menu {
	color: #1e293b !important;
}

/* Content wrapper push to look better */
#page-content-wrap {
	padding-top: 90px !important;
}

/* Client Logo constraint in Navbar */
#navbar-logo-container img {
	max-width: 180px !important;
	max-height: 40px !important;
	height: auto !important;
	object-fit: contain;
	margin: 0;
}

/* Powered by Logo in Sidebar */
.powered-by-logo {
	width: 85px;
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.powered-by-logo:hover {
	opacity: 1;
}

/* --- Legacy Portal Extensions --- */
section {
	padding-top: 20px;
	padding-bottom: 50px;
}

.btn-secundarios {
	background: #0078ce;
	color: #fff !important;
	border-radius: 8px;
	padding: 10px 20px;
	transition: all 0.3s ease;
	border: none;
	box-shadow: 0 4px 6px rgba(0, 120, 206, 0.2);
}

.btn-secundarios:hover {
	background: #005fa3;
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0, 120, 206, 0.3);
}

/* Responsive Table Hacks */
@media only screen and (max-width:800px) {

	#no-more-tables table,
	#no-more-tables thead,
	#no-more-tables tbody,
	#no-more-tables th,
	#no-more-tables td,
	#no-more-tables tr {
		display: block;
	}

	#no-more-tables thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	#no-more-tables tr {
		border: 1px solid rgba(0, 0, 0, 0.1);
		margin-bottom: 15px;
		border-radius: 12px;
		overflow: hidden;
		background: var(--glass-bg);
	}

	#no-more-tables td {
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		position: relative;
		padding-left: 50% !important;
		text-align: left;
		min-height: 45px;
		display: flex;
		align-items: center;
	}

	#no-more-tables td:before {
		position: absolute;
		left: 15px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		text-align: left;
		font-weight: 700;
		content: attr(data-title);
		color: #64748b;
	}
}

/* Flip Cards */
.flip {
	margin: 0 auto;
}

.flip img {
	height: auto;
}

.flip .back .data {
	background: var(--glass-bg);
	backdrop-filter: blur(10px);
	text-align: left;
	padding: 20px;
	border: 1px solid var(--glass-border);
	border-radius: 16px !important;
	height: 190px;
}

/* Patient Card Header Refinement */

/* =============================================
   EEM GLASS ALERT CARD (portal empresas only)
   Replaces cardSuccess/cardWarning without
   creating a double white-card effect.
   ============================================= */
.eem-card-alert-wrap {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 20px 16px 32px;
}

.eem-card-alert {
	position: relative;
	text-align: center;
	padding: 48px 28px 28px;
	border-radius: 20px;
	background: rgba(255,255,255,0.55);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255,255,255,0.7);
	box-shadow: 0 8px 32px rgba(0,0,0,0.08);
	max-width: 420px;
	width: 100%;
}

/* Icon badge floating above */
.eem-card-alert .eem-alert-icon {
	position: absolute;
	top: -28px;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: #fff;
	box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.eem-card-alert.success .eem-alert-icon { background: linear-gradient(135deg, #22c55e, #16a34a); }
.eem-card-alert.warning .eem-alert-icon { background: linear-gradient(135deg, #f59e0b, #d97706); }
.eem-card-alert.danger  .eem-alert-icon { background: linear-gradient(135deg, #ef4444, #dc2626); }
.eem-card-alert.info    .eem-alert-icon { background: linear-gradient(135deg, #0ea5e9, #0284c7); }

.eem-card-alert h5 {
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 6px;
	font-size: 1.05rem;
}

.eem-card-alert p {
	color: #64748b;
	font-size: 0.88rem;
	margin-bottom: 18px;
}

.eem-card-alert .eem-alert-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

/* Patient Card Header Refinement (original selector below) */
.card-pac {
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 12px !important;
	background: #ffffff !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
	overflow: hidden;
	margin-bottom: 24px !important;
}

.card-pac .card-header {
	background: linear-gradient(to right, #f0f9ff 0%, #ffffff 100%) !important;
	border-left: 4px solid #0ea5e9 !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
	padding: 14px 20px !important;
	color: #0c4a6e !important;
	/* deeper blue for contrast */
	font-size: 1rem;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-pac .card-body {
	padding: 20px !important;
}

/* Patient Summary Section */
.patient-summary-col {
	border-right: 1px solid rgba(0, 0, 0, 0.05);
	padding-right: 25px !important;
}

/* =============================================
   MOBILE DROPDOWN MENU
   ============================================= */
/* Botón hamburguesa mobile */
.btn-navmobile {
	background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
	border: none !important;
	border-radius: 10px !important;
	color: #fff !important;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	box-shadow: 0 4px 10px rgba(14,165,233,0.3);
}

.btnnavmobile {
	font-size: 1rem;
}

/* Dropdown del menú mobile */
.dropdown-menu {
	min-width: 230px !important;
	border-radius: 14px !important;
	border: 1px solid rgba(255,255,255,0.5) !important;
	background: rgba(255,255,255,0.96) !important;
	backdrop-filter: blur(14px) !important;
	-webkit-backdrop-filter: blur(14px) !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
	padding: 8px 0 !important;
	max-height: 80vh;
	overflow-y: auto;
}

.div-menu-mobile .m-mobile {
	list-style: none;
	padding: 0;
	margin: 0;
}

.div-menu-mobile .m-mobile li a.dropdown-item {
	padding: 10px 18px !important;
	font-size: 0.88rem !important;
	font-weight: 500;
	color: #475569 !important;
	border-radius: 8px;
	margin: 2px 6px;
	transition: background 0.2s ease;
}

.div-menu-mobile .m-mobile li a.dropdown-item:hover {
	background: rgba(14,165,233,0.1) !important;
	color: #0284c7 !important;
}

@media (max-width: 991px) {
	.patient-summary-col {
		border-right: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		padding-right: 15px !important;
		padding-bottom: 20px !important;
		margin-bottom: 20px !important;
	}
}

.patient-avatar-box {
	position: relative;
	margin-bottom: 20px;
}

.patient-avatar-box img {
	border: 4px solid #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease;
}

.patient-avatar-box img:hover {
	transform: scale(1.02);
}

/* Metadata Tags */
.info-tags-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.info-tag {
	display: flex;
	align-items: center;
	padding: 8px 14px;
	background: rgba(14, 165, 233, 0.04);
	border-radius: 10px;
	font-size: 0.88rem;
	color: #475569;
	border: 1px solid rgba(14, 165, 233, 0.1);
	transition: background 0.2s ease;
}

.info-tag:hover {
	background: rgba(14, 165, 233, 0.08);
}

.info-tag i {
	width: 20px;
	margin-right: 10px;
	text-align: center;
}

.tag-blue i {
	color: #0ea5e9;
}

.tag-amber i {
	color: #f59e0b;
}

.tag-green i {
	color: #10b981;
}

.tag-slate i {
	color: #64748b;
}

/* =============================================
   QUICK-ACTION CARDS — Pantalla de inicio
   ============================================= */
.qa-cards-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	margin: 24px 0 16px;
}

.qa-card {
	flex: 1 1 180px;
	max-width: 220px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: 18px;
	box-shadow: var(--glass-shadow);
	padding: 28px 20px 22px;
	text-align: center;
	text-decoration: none !important;
	color: #1e293b !important;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.qa-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(14, 165, 233, 0.15);
	border-color: rgba(14, 165, 233, 0.35);
	text-decoration: none !important;
	color: #0284c7 !important;
}

.qa-card-icon {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	transition: transform 0.22s ease;
}

.qa-card:hover .qa-card-icon {
	transform: scale(1.1);
}

.qa-card-icon.blue   { background: rgba(14,165,233,0.12); color: #0284c7; }
.qa-card-icon.teal   { background: rgba(20,184,166,0.12); color: #0d9488; }
.qa-card-icon.violet { background: rgba(139,92,246,0.12); color: #7c3aed; }
.qa-card-icon.amber  { background: rgba(245,158,11,0.12); color: #d97706; }

.qa-card-label {
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.3;
}

/* Welcome hero */
.welcome-hero {
	background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
	border-radius: 18px;
	padding: 28px 32px;
	color: #fff;
	margin-bottom: 24px;
	box-shadow: 0 8px 24px rgba(14,165,233,0.25);
	position: relative;
	overflow: hidden;
}

.welcome-hero::before {
	content: '';
	position: absolute;
	top: -40px; right: -40px;
	width: 160px; height: 160px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
}

.welcome-hero::after {
	content: '';
	position: absolute;
	bottom: -20px; left: 40px;
	width: 100px; height: 100px;
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
}

.welcome-hero h4 {
	font-weight: 700;
	margin: 0 0 4px;
	font-size: 1.25rem;
}

.welcome-hero p {
	opacity: 0.88;
	margin: 0;
	font-size: 0.92rem;
}

.welcome-hero .hero-icon {
	font-size: 2.5rem;
	opacity: 0.25;
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
}

/* =============================================
   STATUS BADGE — Estado de resultado en cards
   ============================================= */
.result-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	vertical-align: middle;
	letter-spacing: 0.03em;
}

.result-badge.signed {
	background: rgba(16,185,129,0.12);
	color: #059669;
	border: 1px solid rgba(16,185,129,0.25);
}

.result-badge.pending {
	background: rgba(100,116,139,0.1);
	color: #475569;
	border: 1px solid rgba(100,116,139,0.2);
}

.card-pac .card-header {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.card-pac .card-header .pac-name {
	flex: 1;
	text-align: left;
}

/* =============================================
   MOBILE TOUCH TARGETS — Botones de acción
   ============================================= */
@media (max-width: 767px) {
	.btn.btn-xs {
		min-height: 40px !important;
		min-width: 40px !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}

	.btn.form-control {
		min-height: 40px !important;
	}

	table.table td .btn {
		padding: 8px 10px !important;
		font-size: 1rem !important;
	}
}

/* =============================================
   SHOW/HIDE PASSWORD TOGGLE
   ============================================= */
.input-pwd-group {
	position: relative;
}

.input-pwd-group input[type="password"],
.input-pwd-group input[type="text"] {
	padding-right: 44px;
}

.btn-show-pwd {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	background: transparent;
	border: none;
	padding: 0 12px;
	color: #94a3b8;
	cursor: pointer;
	z-index: 5;
	display: flex;
	align-items: center;
	transition: color 0.2s ease;
}

.btn-show-pwd:hover {
	color: #0284c7;
}

/* Password strength indicator */
.pwd-strength {
	display: flex;
	gap: 4px;
	margin-top: 6px;
}

.pwd-strength-bar {
	height: 3px;
	flex: 1;
	border-radius: 2px;
	background: #e2e8f0;
	transition: background 0.3s ease;
}

.pwd-strength.weak   .pwd-strength-bar:nth-child(1) { background: #ef4444; }
.pwd-strength.medium .pwd-strength-bar:nth-child(-n+2) { background: #f59e0b; }
.pwd-strength.strong .pwd-strength-bar { background: #10b981; }

.pwd-strength-label {
	font-size: 0.75rem;
	color: #94a3b8;
	margin-top: 2px;
}

/* =============================================
   ACTIVE MENU STATE — Sidebar nav
   ============================================= */
.sidebar-nav li a.active-nav,
.sidebar-nav li.active > a {
	background: linear-gradient(90deg, rgba(14,165,233,0.15) 0%, rgba(14,165,233,0.05) 100%) !important;
	color: #0284c7 !important;
	border-left: 3px solid #0284c7;
	border-radius: 0 8px 8px 0 !important;
	margin-left: 0 !important;
	font-weight: 600 !important;
}

/* =============================================
   RESULT INFO TAGS — Modal de resultado
   ============================================= */
.result-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 16px;
}

@media (max-width: 576px) {
	.result-info-grid {
		grid-template-columns: 1fr;
	}
}

.result-info-item {
	display: flex;
	flex-direction: column;
	padding: 10px 14px;
	background: rgba(14,165,233,0.04);
	border: 1px solid rgba(14,165,233,0.1);
	border-radius: 10px;
	font-size: 0.85rem;
}

.result-info-item .rii-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #94a3b8;
	margin-bottom: 3px;
}

.result-info-item .rii-value {
	font-weight: 600;
	color: #1e293b;
	word-break: break-word;
}

.result-in-process {
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(100,116,139,0.08);
	border: 1px solid rgba(100,116,139,0.15);
	border-radius: 14px;
	padding: 20px 24px;
	margin-top: 10px;
}

.result-in-process i {
	font-size: 2rem;
	color: #94a3b8;
	animation: spin-slow 3s linear infinite;
}

@keyframes spin-slow {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.result-in-process p {
	margin: 0;
	color: #64748b;
	font-size: 0.95rem;
	font-weight: 500;
}

/* =============================================
   DATE SHORTCUT BUTTONS
   ============================================= */
.date-shortcuts {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.date-shortcuts .btn-shortcut {
	font-size: 0.75rem;
	padding: 3px 10px;
	border-radius: 20px;
	border: 1px solid rgba(14,165,233,0.3);
	background: rgba(14,165,233,0.05);
	color: #0284c7;
	cursor: pointer;
	transition: all 0.2s ease;
	line-height: 1.5;
}

.date-shortcuts .btn-shortcut:hover {
	background: rgba(14,165,233,0.15);
	border-color: #0284c7;
}