:root {
	--color: #09090B;

	/* Nav */
	--bg-nav: #FFFFFF;
	--bg-profile: #F9F9F9;
	--btn-relieve-lg: rgba(0, 0, 0, 0.18);
	--btn-relieve-lg-r: rgba(255, 255, 255, 0.85);
	--btn-relieve-hover-lg: rgba(0, 0, 0, 0.22);
	--btn-relieve-hover-lg-r: rgba(255, 255, 255, 0.9);
	--text-color: #888;
	--primary-color: #111113;
	--text-nav-color: #888;

	/* Header */
	--bg-hdr: #FFFFFF;

	/* Bootstrap */
	--bs-body-bg: #F9F9F9;
	--bs-light-rgb: #09090B;
	--bs-secondary-color: #76767D;

	--bg-primary-xplora: #E5EDFF;
	--badge-primary-xplora: #003CC7;
	--bg-success-xplora: #D9F8D0;
	--badge-success-xplora: #1C6C09;
	--bg-secondary-xplora: #E3E6ED;
	--badge-secondary-xplora: #222834;
	--bg-warning-xplora: #FFEFCA;
	--badge-warning-xplora: #BC3803;
	--bg-danger-xplora: #FFE0DB;
	--badge-danger-xplora: #B81800;
	--bg-info-xplora: #C7EBFF;
	--badge-info-xplora: #005585;

	/* Home Calendar */
	--hc-bg-card: #FFFFFF;
	--hc-bg-date: #F5F6F8;
	--hc-text-main: #1A1B1E;
	--hc-text-secondary: #85858A;
	--hc-border-dotted: #E1E3E8;
	--hc-nav-border: #E1E3E8;
	--hc-accent-orange: #E87C34;
	--hc-accent-green: #37B663;
	--hc-accent-purple: #A851D6;
	--hc-line-neutral: #D1D5DB;
	--hc-date-active-bg: rgba(232, 124, 52, 0.1);

	/* Charts */
	--chart-gradient-start: rgba(59, 130, 246, 0.5);
	--chart-line: #3b82f6;

	/* Modules */
	--text-sm-gt: #EEE;
	--text-sm-gb: #F9F9F9;
	--text-sm-1: rgba(255, 255, 255, 0.9);
	--text-sm-2: rgba(0, 0, 0, 0.3);
	--text-sm-3: rgba(255, 255, 255, 0.1);
	--text-sm-transparent: #FFFFFF;

	/* WhatsApp */
	--bg-area: #FFFFFF;
	--bg-messages-container: url('../../assets/images/whp10b.png');

	---item-active: #EFEFEF;

	/* Setting */
	--bg-setting: #FFFFFF;

	/* Forms */
	--frm-color: #999999;
	--frm-bg-disable: #F1F1F1;
	--frm-border-imput: #EEEEEE;
	--frm-border-focus: #CCCCCC;
	--frm-border-shadow-focus: 0 0 8px 0.125rem rgba(0, 0, 0, 0.15) !important;

	/* Table */
	--bs-tbc: #E1E3E8 !important;
	--bs-emphasis-color: #333333 !important;

	/* Modules */
	--bg-module-icons: #FFFFFF;

	/* Borders */
	--border-end-xplora: #EEEEEE;
}

.dark-mode {
	--color: #F9F9F9;

	/* Nav */
	--bg-nav: #111113;
	--bg-profile: #09090B;
	--btn-relieve-lg: rgba(0, 0, 0, 0.75);
	--btn-relieve-lg-r: rgba(255, 255, 255, 0.06);
	--btn-relieve-hover-lg: rgba(0, 0, 0, 0.7);
	--btn-relieve-hover-lg-r: rgba(255, 255, 255, 0.05);
	--text-color: #F9F9F9;
	--primary-color: #FFF;
	--text-nav-color: #888;

	/* Header */
	--bg-hdr: #111113;

	/* Bootstrap */
	--bs-body-bg: #09090B;
	--bs-light-rgb: #F9F9F9;
	--bs-secondary-color: #76767D;

	--bg-primary-xplora: #1C2231;
	--badge-primary-xplora: #85A9FF;
	--bg-success-xplora: #102527;
	--badge-success-xplora: #90D67F;
	--bg-secondary-xplora: #252834;
	--badge-secondary-xplora: #CBD0DD;
	--bg-warning-xplora: #262527;
	--badge-warning-xplora: #FFCC85;
	--bg-warning-sub-xplora: #262527;
	--badge-warning-sub-xplora: #FFCC85;
	--bg-danger-xplora: #241F25;
	--badge-danger-xplora: #F48270;
	--bg-info-xplora: #1A2431;
	--badge-info-xplora: #60C6FF;

	/* Home Calendar */
	--hc-bg-card: #111113;
	--hc-bg-date: #1A1A1D;
	--hc-text-main: #FFFFFF;
	--hc-text-secondary: #8E8E98;
	--hc-border-dotted: #2A2A2E;
	--hc-nav-border: #33343E;
	--hc-line-neutral: rgba(255, 255, 255, 0.3);
	--hc-date-active-bg: rgba(232, 124, 52, 0.05);

	/* Charts */
	--chart-line: #5b8ff9;
	--chart-line-2: #37B663;

	/* Modules */
	--text-sm-gt: #222;
	--text-sm-gb: #333;
	--text-sm-1: rgba(255, 255, 255, 0.1);
	--text-sm-2: rgba(0, 0, 0, 0.7);
	--text-sm-3: rgba(0, 0, 0, 0.4);
	--text-sm-transparent: transparent;

	/* WhatsApp */
	--bg-area: #111113;
	--bg-messages-container: url('../../assets/images/whp10.png');

	---item-active: #111113;

	/* Setting */
	--bg-setting: #111113;

	/* Forms */
	--frm-color: #AAAAAA;
	--frm-bg-disable: #222222;
	--frm-border-imput: #313131;
	--frm-border-focus: #2E3135;
	--frm-border-shadow-focus: 0 0 8px 0.125rem rgba(250, 250, 250, 0.15) !important;

	/* Table */
	--bs-tbc: #313131 !important;
	--bs-emphasis-color: #AAAAAA !important;
	--table-danger-color: #AAA;
	--table-danger-bg: #261D1E;

	/* Modules */
	--bg-module-icons: #1F1F1F;

	/* Borders */
	--border-end-xplora: #313131;

	/* Modal */
	--md-color: #FFFFFF;
	--md-border-bottom: #313131;
	--md-close-icon-invert: 1;
}

body {font-family: "Outfit", sans-serif; color: var(--color);}
a {color: var(--color); text-decoration: none;}

/* Colors */
.bg-primary {background-color: var(--bg-primary-xplora) !important; color: var(--badge-primary-xplora) !important;}
.bg-success {background-color: var(--bg-success-xplora) !important; color: var(--badge-success-xplora) !important;}
.bg-secondary {background-color: var(--bg-secondary-xplora) !important; color: var(--badge-secondary-xplora) !important;}
.bg-warning {background-color: var(--bg-warning-xplora) !important; color: var(--badge-warning-xplora) !important;}
.bg-warning-subtle {background-color: var(--bg-warning-sub-xplora) !important; color: var(--badge-warning-sub-xplora) !important;}
.bg-danger {background-color: var(--bg-danger-xplora) !important; color: var(--badge-danger-xplora) !important;}
.bg-info {background-color: var(--bg-info-xplora) !important; color: var(--badge-info-xplora) !important;}
/* End Colors */

/* Nav */
.bg-nav {background: var(--bg-nav); color: var(--text-nav-color);}
.nav-body {
	width: 280px;
	margin: 14px 0 14px 14px;
	border-radius: 20px;
	height: calc(100vh - 28px);  /* ← clave */
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.nav-scroll {overflow-y: auto; overflow-x: hidden; flex: 1 1 0; min-height: 0; width: 100%;}
.nav-scroll.nav {flex-wrap: nowrap; flex-direction: column !important;}
.nav-scroll::-webkit-scrollbar {width: 4px;}
.nav-scroll::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.15); border-radius: 4px;}
.nav-scroll .nav-item {width: 100%; flex-shrink: 0;}
.nav-scroll .nav-link {width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {background-color: var(--bs-body-bg); color: var(--color);}
.nav-inbox-link.active {color: var(--color); border-left: 3px solid var(--color) !important; padding-left: 10px;}

.btn-relieve {background: var(--bg-nav); color: #FFF; padding: 3px 18px; border: none; border-radius: 50px; box-shadow: inset 6px 6px 12px var(--btn-relieve-lg), inset -6px -6px 12px var(--btn-relieve-lg-r); transition: 0.2s ease;}
.btn-relieve:hover {box-shadow:	inset 3px 3px 6px var(--btn-relieve-hover-lg), inset -3px -3px 6px var(--btn-relieve-hover-lg-r);}

.theme-btn {background: none; border: none; color: var(--text-color); transition: all 0.3s; border-radius: 50%; opacity: 0.5;}
.theme-btn:hover {transform: scale(1.1); opacity: 1;}
.theme-btn.active {opacity: 1; color: var(--primary-color); transform: scale(1.1);}

.profile-box {background: var(--bg-profile); padding: 10px;}
/* End Nav */

/* Grid */
.grid-item {overflow-y: auto; display: flex; flex-direction: column; margin-top: 14px; gap: 8px;}

.container-fluid {height: 100vh; overflow: hidden; display: flex; flex-direction: column;}
.container-fluid > .row {flex: 1 1 0; min-height: 0; overflow: hidden;}

.col-md-12.grid-item {height: calc(100vh - 28px);}

.grid-item.hz {flex-direction: column; overflow: hidden; padding: 0; height: 100%; max-height: 100%;}
.grid-item.vt {flex-direction: row; overflow: hidden; padding: 0; height: 100%; max-height: 100%;}

.hz {display: flex; flex-direction: column; overflow: hidden; gap: 8px;}
.vt {display: flex; flex-direction: row; overflow: hidden; gap: 8px;}

.panel-shrink {flex: 0 0 auto; min-height: 0; min-width: 0; overflow-y: auto;}
.panel-auto {flex: 1 1 0; min-height: 0; min-width: 0; overflow-y: auto;}
.panel-25 {flex: 0 0 25%; min-height: 0; min-width: 0; overflow-y: auto;}
.panel-30 {flex: 0 0 30%; min-height: 0; min-width: 0; overflow-y: auto;}
.panel-33 {flex: 0 0 33.333%; min-height: 0; min-width: 0; overflow-y: auto;}
.panel-40 {flex: 0 0 40%; min-height: 0; min-width: 0; overflow-y: auto;}
.panel-50 {flex: 0 0 50%; min-height: 0; min-width: 0; overflow-y: auto;}
.panel-60 {flex: 0 0 60%; min-height: 0; min-width: 0; overflow-y: auto;}
.panel-66 {flex: 0 0 66.666%; min-height: 0; min-width: 0; overflow-y: auto;}
.panel-70 {flex: 0 0 70%; min-height: 0; min-width: 0; overflow-y: auto;}
.panel-75 {flex: 0 0 75%; min-height: 0; min-width: 0; overflow-y: auto;}
/* End Grid */

/* Hearder */
.bg-hdr {background: var(--bg-hdr);}
.header-container {position: sticky; top: 0; z-index: 1000;}

.apps-grid {width: 260px; border-radius: 16px; background: var(--bg-nav); border: 1px solid var(--border-end-xplora); box-shadow: 0 8px 24px rgba(0,0,0,0.3);}
.apps-grid-items {display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px;}

.app-item {
	color: var(--color);
	font-size: 12px;
	padding: 12px 8px;
	border-radius: 14px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.app-item:hover {background: rgba(255, 255, 255, 0.08); color: var(--color);}
.app-icon {width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center;}
/* End Hearder */

/* Table */
.table {--bs-table-color: var(--bs-emphasis-color); --bs-table-border-color: var(--bs-tbc); border-color: var(--bs-table-border-color);}
.table-danger {--bs-table-color: var(--table-danger-color); --bs-table-bg: var(--table-danger-bg);}
/* End Table */

/* Forms */
.form-control {color: var(--frm-color) !important; border: var(--bs-border-width) solid var(--frm-border-imput) !important;}
.form-control::placeholder {color: var(--frm-color) !important;}
.form-control:disabled {background-color: var(--frm-bg-disable) !important;}
.form-control:focus {border-color: var(--frm-border-focus) !important; box-shadow: var(--frm-border-shadow-focus);}

.form-select {color: var(--frm-color) !important; border: var(--bs-border-width) solid var(--frm-border-imput) !important;}
.form-select:focus {border-color: var(--frm-border-focus) !important; box-shadow: var(--frm-border-shadow-focus);}
/* End Forms */

/* Home Calendar */
.hc-content {box-shadow: var(--hc-shadow);}
.hc-nav-buttons {display: flex; gap: 10px;}
.hc-nav-btn {background: transparent; border: 1px solid var(--hc-nav-border); color: var(--hc-text-secondary); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.hc-nav-btn:hover {border-color: var(--hc-text-main); color: var(--hc-text-main);}
.hc-date-strip {display: flex; justify-content: space-between; margin-bottom: 30px; gap: 10px;}
.hc-date-card {background-color: var(--hc-bg-date); border: 1px solid transparent; border-radius: 12px; padding: 12px 14px; text-align: center; cursor: pointer; flex: 1;}
.hc-date-card .day {font-size: 12px; color: var(--hc-text-secondary); margin-bottom: 4px;}
.hc-date-card .num {font-size: 16px; font-weight: 500; color: var(--hc-text-secondary);}
.hc-date-card.active {border-color: var(--hc-accent-orange); background-color: var(--hc-date-active-bg);}
.hc-date-card.active .day {color: var(--hc-text-main);}
.hc-date-card.active .num {color: var(--hc-text-main);}
.hc-tasks-list {display: flex; flex-direction: column;}
.hc-task-row {display: grid; grid-template-columns: 60px 4px 1fr 30px; align-items: flex-start; padding: 20px 0; border-bottom: 1px dashed var(--hc-border-dotted);}
.hc-task-row:last-child {border-bottom: none; padding-bottom: 0;}
.hc-task-time {font-size: 14px; color: var(--hc-text-secondary); padding-top: 2px;}
.hc-task-line {width: 3px; height: 40px; border-radius: 2px; margin-top: 4px;}
.hc-task-content {padding-left: 15px;}
.hc-task-title {font-weight: 500; color: var(--hc-text-main);}
.hc-task-desc {font-size: 14px; color: var(--hc-text-secondary);}
.hc-checkbox-wrapper {display: flex; justify-content: flex-end; padding-top: 2px;}
.hc-custom-checkbox {width: 16px; height: 16px; border: 1px solid var(--hc-text-secondary); border-radius: 50%; cursor: pointer; transition: 0.2s;}
.hc-custom-checkbox:hover {border-color: var(--hc-text-main);}
.hc-custom-checkbox.checked {background-color: var(--hc-accent-orange); border-color: var(--hc-accent-orange);}
.hc-line-green {background-color: var(--hc-accent-green);}
.hc-line-neutral {background-color: var(--hc-line-neutral);}
.hc-line-orange {background-color: var(--hc-accent-orange);}
.hc-line-purple {background-color: var(--hc-accent-purple);}
/* End Home Calendar */

/* WhatsApp */
.whatsapp-container {display: flex; height: 100vh; min-height: 500px; max-height: 100vh;}
.conversations-sidebar {width: 400px; display: flex; flex-direction: column; margin-right: 10px; border-radius: 20px; min-height: 0;}
.sidebar-header {padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;}
.sidebar-header h2 {font-size: 24px; font-weight: 600;}
.search-box {padding: 10px;}
.search-box input {width: 100%; padding: 10px 15px; border: none; border-radius: 8px; background: var(--bg-area); font-size: 14px; color: var(--color);}
.conversations-list {flex: 1; overflow-y: auto; min-height: 0;}
.conversation-item {padding: 15px 20px; cursor: pointer; display: flex; align-items: center; transition: background 0.2s; margin: 10px; border-radius: 12px;}
.conversation-item:hover {background: var(---item-active);}
.conversation-item.active {background: var(---item-active);}
.conversation-avatar {width: 50px; height: 50px; border-radius: 50%; background: #00a884; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; font-weight: 600; margin-right: 15px; flex-shrink: 0;}
.conversation-details {flex: 1; min-width: 0;}
.conversation-details h4 {font-size: 16px; margin-bottom: 5px; font-weight: 500;}
.conversation-details p {font-size: 14px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.conversation-meta {text-align: right; flex-shrink: 0;}
.conversation-time {font-size: 12px; color: #667781; margin-bottom: 5px;}
.chat-area {flex: 1; display: flex; flex-direction: column; background: var(--bg-area); border-radius: 20px; min-height: 0;}
.chat-header {padding: 10px 20px;}
.contact-info {display: flex; align-items: center;}

.contact-avatar {width: 40px; height: 40px; border-radius: 50%; background: url('assets/images/avatar.png'); background-repeat: no-repeat; background-position: center; background-size: 40px; margin-right: 15px;}
.contact-details h3 {font-size: 16px; font-weight: 500; margin-bottom: 2px;}
.contact-details span {font-size: 13px; color: #667781;}

.messages-container {flex: 1; overflow-y: auto; padding: 20px; background-image: var(--bg-messages-container); background-position: center; background-size: auto; min-height: 0;}
.message {margin-bottom: 12px; display: flex; flex-direction: column;}
.message.outbound {align-self: flex-end; align-items: flex-end;}
.message.inbound {align-self: flex-start; align-items: first baseline;}
.message-bubble {padding: 6px 7px 8px 9px; border-radius: 7.5px; position: relative; box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);}
.message.outbound .message-bubble {background: #103529; color: #FFF;}
.message.inbound .message-bubble {background: var(--bg-area);}
.message-text {font-size: 14.2px; line-height: 19px; word-wrap: break-word;}
.message-meta {display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 4px; font-size: 11px; color: #667781;}
.message-status {display: flex; align-items: center;}
.message-status.sent::after {content: '✓';}
.message-status.delivered::after {content: '✓✓';}
.message-status.read::after {content: '✓✓'; color: #53bdeb;}
.message-media {margin-bottom: 5px;}
.message-image {max-width: 300px; max-height: 300px; border-radius: 8px; cursor: pointer; display: block;}
.message-image:hover {opacity: 0.9;}

.message-audio,
.message-video {max-width: 300px;border-radius: 8px;}
.message-audio {width: 250px; height: 40px;}
.message-video {max-height: 300px;}
.message-document {padding: 10px; background: rgba(255,255,255,0.1); border-radius: 8px; display: flex; align-items: center; gap: 8px;}
.message-document a {color: #00a884; text-decoration: none;}
.message-document a:hover {text-decoration: underline;}
.message-sticker {width: 150px; height: 150px; object-fit: contain;}
.message-location {padding: 5px 0;}
.location-address {font-size: 12px; color: #667781; margin: 5px 0;}
.location-link {display: inline-block; margin-top: 5px; color: #00A884; text-decoration: none; font-size: 13px;}
.location-link:hover {text-decoration: underline;}
.message-media .message-text {margin-top: 8px;}
.message-input-area {padding: 10px 20px; display: flex; align-items: center; gap: 10px;}
.message-input-area input {flex: 1; padding: 10px 15px; border: none; border-radius: 8px; background: transparent; font-size: 15px; color: white;}

.btn-attach,
.btn-send {width: 40px; height: 40px; border: none; background: none; cursor: pointer; font-size: 20px; color: #54656f; transition: color 0.2s;}
.btn-attach:hover,
.btn-send:hover {color: #00a884;}
/* End WhatsApp */

/* Modules */
.display-text {
	background: linear-gradient(to bottom, var(--text-sm-gt) 0%, var(--text-sm-gb) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--text-sm-transparent);
	text-shadow: 0px 1px 0px var(--text-sm-1),
		0px -1px 0px var(--text-sm-2),
		2px 2px 3px var(--text-sm-3);
}
/* End Modules */

/* Chart */
.date-selector, .subtitle {color: var(--hc-text-secondary); font-size: 12px; background: rgba(255,255,255,0.05); padding: 4px 12px; border-radius: 6px; cursor: pointer;}
.chart-box {position: relative; height: 220px; width: 100%;}
.donut-box {height: 250px; display: flex; justify-content: center; align-items: center; position: relative;}
.donut-inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none;}
.donut-inner h5 {font-size: 1.8rem; margin: 0; color: var(--hc-text-main);}
/* End Chart */

/* SignIn */
.bg-login {
	background: url('../../assets/images/bg-gerbruder.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
/* End SignIn */

/* Setting */
.bg-setting {background: var(--bg-setting);}
/* End Setting */

/* History */
.history-feed {max-height: 600px; overflow-y: auto;}
.history-item {padding: 12px 0; border-bottom: 1px solid #eee; margin-bottom: 8px;}
.history-header {display: flex; justify-content: space-between; margin-bottom: 6px;}
.history-body {margin-bottom: 6px;}
.history-footer {font-size: 0.85rem;}
/* End History */

/* Badge */
.badge {font-weight: 500 !important;}
/* End Badge */

/* Modules */
.module-icons {
	background: var(--bg-module-icons);
	width: 58px;
	height: 58px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 1rem;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
/* End Modules */

/* Borders */
.border {border: 1px solid var(--border-end-xplora) !important;}
.border-end {border-right: 1px solid var(--border-end-xplora) !important;}
/* End Borders */

/* Tasks */
.priority-dot {width:10px; height:10px; border-radius:50%;}
.priority-dot[data-priority="urgent"] {background:#dc3545;}
.priority-dot[data-priority="high"] {background:#fd7e14;}
.priority-dot[data-priority="medium"] {background:#ffc107;}
.priority-dot[data-priority="low"] {background:#6c757d;}
.heatmap-cell {width:13px; height:13px; border-radius:2px; display:inline-block;}
.heatmap-cell[data-level="0"] {background:var(--bs-secondary-bg,#e9ecef); opacity:.4;}
.heatmap-cell[data-level="1"] {background:#9be9a8;}
.heatmap-cell[data-level="2"] {background:#40c463;}
.heatmap-cell[data-level="3"] {background:#30a14e;}
.heatmap-cell[data-level="4"] {background:#216e39;}
.heatmap-legend {width:13px; height:13px; border-radius:2px; display:inline-block;}
.heatmap-legend[data-level="0"] {background:var(--bs-secondary-bg,#e9ecef); opacity:.4;}
.heatmap-legend[data-level="1"] {background:#9be9a8;}
.heatmap-legend[data-level="2"] {background:#40c463;}
.heatmap-legend[data-level="3"] {background:#30a14e;}
.heatmap-legend[data-level="4"] {background:#216e39;}
.task-row.hidden { display:none !important; }
/* End Tasks */

/* Modal */
.modal-header {border-bottom: 1px solid var(--md-border-bottom);}
.modal {--bs-modal-color: var(--md-color);}
.modal-footer {border-top: 1px solid var(--md-border-bottom);}
.btn-close {filter: brightness(0) invert(var(--md-close-icon-invert, 0));}
/* End Modal */