/* =========================================
Variables
========================================= */
:root {
	--pc-blue:        #2644f9;
	--pc-blue-dark:   #1736e8;
	--pc-green:       #43d87e;
	--pc-dark-green:  #144126;
	--pc-light-green: #C7F4D9;
	--pc-yellow:      #e2ff3c;
	--pc-yellow-soft: #d7f500;
	--pc-gray:   			#42474A;
	--pc-dark-gray:   #212425;
	--pc-black:       #000000;
	--pc-black-gray:  #323638;
	--pc-light:       #f3f4f6;
	--page-bg:        #eef1f5;
	--card-radius:    1.3rem;
	--shadow-soft:    0 16px 40px rgba(20, 28, 45, 0.08);
}


/* =========================================
Base
========================================= */
html {
	scroll-behavior: smooth;
}

body {
	background: #eef1f5;
	color: #171717;
}

mark {
	background-color: rgba(226, 255, 60, 0.55);
	padding: 0 0.15rem;
	border-radius: 0.25rem;
}


/* =========================================
Dark mode — base
========================================= */
[data-bs-theme="dark"] {
	--bs-body-bg:      #1f2430;
	--bs-body-color:   #f5f7fb;
	--bs-secondary-bg: #2a3140;
	--bs-tertiary-bg:  #313949;
	--bs-border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] body {
	background: #1f2430;
	color: #f5f7fb;
}

[data-bs-theme="dark"] mark {
	background-color: rgba(226, 255, 60, 0.35);
	color: inherit;
}

[data-bs-theme="dark"] .text-body-secondary,
[data-bs-theme="dark"] .small,
[data-bs-theme="dark"] .card-text {
	color: rgba(245, 247, 251, 0.75) !important;
}


/* =========================================
Helpers — Color (texto)
========================================= */
.text-blue        { color: var(--pc-blue); }
.text-blue-dark   { color: var(--pc-blue-dark); }
.text-green       { color: var(--pc-green); }
.text-dark-green  { color: var(--pc-dark-green); }
.text-yellow      { color: var(--pc-yellow); }
.text-yellow-soft { color: var(--pc-yellow-soft); }
.text-dark-gray   { color: var(--pc-dark-gray); }
.text-black       { color: var(--pc-black); }
.text-light       { color: var(--pc-light); }
.text-gray        { color: var(--pc-gray); }
.text-black-gray  { color: var(--pc-black-gray); }

/* =========================================
Helpers — Color (fondo)
========================================= */
.bg-blue          { background-color: var(--pc-blue); }
.bg-blue-dark     { background-color: var(--pc-blue-dark); }
.bg-green         { background-color: var(--pc-green); }
.bg-light-green   { background-color: var(--pc-light-green); }
.bg-yellow        { background-color: var(--pc-yellow); }
.bg-yellow-soft   { background-color: var(--pc-yellow-soft); }
.bg-gray     			{ background-color: var(--pc-gray); }
.bg-dark-gray     { background-color: var(--pc-dark-gray); }
.bg-black         { background-color: var(--pc-black); }
.bg-light         { background-color: var(--pc-light); }
.bg-page          { background-color: var(--page-bg); }
.bg-black-gray    { background-color: var(--pc-black-gray); }
.bg-dark-green    { background-color: var(--pc-dark-green); }

/* =========================================
Helpers — Border
========================================= */
.border-top-green     { border-top:    solid 4px var(--pc-green); }
.border-bottom-green  { border-bottom: solid 4px var(--pc-green); }
.border-top-blue      { border-top:    solid 4px var(--pc-blue); }
.border-bottom-blue   { border-bottom: solid 4px var(--pc-blue); }
.border-top-yellow    { border-top:    solid 4px var(--pc-yellow); }
.border-bottom-yellow { border-bottom: solid 4px var(--pc-yellow); }
.border-top-dark      { border-top:    solid 4px var(--pc-dark-gray); }
.border-bottom-dark   { border-bottom: solid 4px var(--pc-dark-gray); }
.border-top-green-dark     { border-top:    solid 4px var(--pc-dark-green); }
.border-bottom-green-dark  { border-bottom: solid 4px var(--pc-dark-green); }
.border-top-gray           { border-top:    solid 4px var(--pc-gray); }
.border-bottom-gray        { border-bottom: solid 4px var(--pc-gray); }
.border-top-black-gray     { border-top:    solid 4px var(--pc-black-gray); }
.border-bottom-black-gray  { border-bottom: solid 4px var(--pc-black-gray); }

/* =========================================
Helpers — Buttons
========================================= */

.btn-outline-blue {
	border: 1px solid var(--pc-blue);
	background-color: transparent;
	padding: 0.5rem 1.2rem;
	font-size: 0.9rem;
	border-radius: 5px;
	transition: all 0.3s ease;
}
.btn-outline-blue:hover { background-color: rgba(38, 68, 249, 0.07); }

.btn-outline-yellow {
	border: 1px solid var(--pc-yellow);
	background-color: transparent;
	padding: 0.5rem 1.2rem;
	font-size: 0.9rem;
	border-radius: 5px;
	transition: all 0.3s ease;
}
.btn-outline-yellow:hover { background-color: rgba(226, 255, 60, 0.12); }

.btn-outline-dark {
	border: 1px solid var(--pc-dark-gray);
	background-color: transparent;
	padding: 0.5rem 1.2rem;
	font-size: 0.9rem;
	border-radius: 5px;
	transition: all 0.3s ease;
}
.btn-outline-dark:hover { background-color: rgba(33, 36, 37, 0.07); }


.btn-outline-green {
	border: 1px solid var(--pc-green);
	background-color: transparent;
	padding: 0.5rem 1.2rem;
	font-size: 0.9rem;
	border-radius: 5px;
	transition: all 0.3s ease;
}
.btn-outline-green:hover { background-color: rgba(67, 216, 126, 0.1); }

.btn-outline-gray {
	border: 1px solid var(--pc-gray);
	background-color: transparent;
	padding: 0.5rem 1.2rem;
	font-size: 0.9rem;
	border-radius: 5px;
	transition: all 0.3s ease;
}
.btn-outline-gray:hover { background-color: rgba(66, 71, 74, 0.07); }

.btn-filled-green-dark  { background-color: var(--pc-dark-green);  border: 1px solid var(--pc-dark-green);  color: var(--pc-light-green); padding: 0.5rem 1.2rem; font-size: 0.9rem; border-radius: 5px; transition: all 0.3s ease; }
.btn-filled-gray        { background-color: var(--pc-gray);        border: 1px solid var(--pc-gray);        color: #fff;                  padding: 0.5rem 1.2rem; font-size: 0.9rem; border-radius: 5px; transition: all 0.3s ease; }
.btn-filled-black-gray  { background-color: var(--pc-black-gray);  border: 1px solid var(--pc-black-gray);  color: var(--pc-light);       padding: 0.5rem 1.2rem; font-size: 0.9rem; border-radius: 5px; transition: all 0.3s ease; }
.btn-filled-light-green { background-color: var(--pc-light-green); border: 1px solid var(--pc-light-green); color: var(--pc-dark-green);  padding: 0.5rem 1.2rem; font-size: 0.9rem; border-radius: 5px; transition: all 0.3s ease; }
.btn-filled-green  { background-color: var(--pc-green);     border: 1px solid var(--pc-green);     color: #0d4a26; padding: 0.5rem 1.2rem; font-size: 0.9rem; border-radius: 5px; transition: all 0.3s ease; }
.btn-filled-blue   { background-color: var(--pc-blue);      border: 1px solid var(--pc-blue);      color: #fff;    padding: 0.5rem 1.2rem; font-size: 0.9rem; border-radius: 5px; transition: all 0.3s ease; }
.btn-filled-yellow { background-color: var(--pc-yellow);    border: 1px solid var(--pc-yellow);    color: #5a6600; padding: 0.5rem 1.2rem; font-size: 0.9rem; border-radius: 5px; transition: all 0.3s ease; }
.btn-filled-dark   { background-color: var(--pc-dark-gray); border: 1px solid var(--pc-dark-gray); color: var(--pc-light); padding: 0.5rem 1.2rem; font-size: 0.9rem; border-radius: 5px; transition: all 0.3s ease; }

/* =========================================
Helpers — Typography
========================================= */
.ls-0 { letter-spacing: 0px; }
.ls-1 { letter-spacing: 1px; }
.ls-2 { letter-spacing: 2px; }
.ls-3 { letter-spacing: 3px; }

/* =========================================
Helpers — Layout
========================================= */
.shrink-0    { flex-shrink: 0; } 
.shrink-1    { flex-shrink: 1; }
.mr-auto     { margin-right: auto; }
.ml-auto     { margin-left: auto; }
.link-nowrap { white-space: nowrap; } 
.text-nowrap { white-space: nowrap; }

@media (min-width: 1200px) {
	.border-start-xl { border-left:  1px solid var(--bs-border-color); }
	.border-end-xl   { border-right: 1px solid var(--bs-border-color); }
}


/* =========================================
Animations
========================================= */
@keyframes spin {
	to { transform: rotate(360deg); }
}


/* Notifications CSS */
.notifications_btn .notifications-badge {width: 12px;height: 12px;border-radius: 100%;position: absolute;right: 15px;top: 3px;padding: 0 !important;background: rgba(var(--bs-secondary-rgb), 1);border: var(--bs-btn-bg) 2px solid;transition:.15s;}
.notifications_btn:hover .notifications-badge {border: var(--bs-btn-hover-bg) 2px solid;transition:.15s;}
.avatar {height: 40px;width: 40px;background-size: cover;}
.dropdown_user {min-width: 300px;}
.avatar_big {font-size: 20px;width: 50px !important;height: 50px !important;background-size: cover;}
.notification *:last-child {margin-bottom: 0 !important;}
#notifications.modal.right .modal-dialog,
#menu_panel.modal.right .modal-dialog {max-width: 400px;}