/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

:root {
	/* ===== Colors ===== */
	--body-color: #e4e9f7;
	--sidebar-color: #fff;
	--primary-color: #695cfe;
	--primary-card-header-color: #695cfe;
	--primary-color-light: #f6f5ff;
	--toggle-color: #ddd;
	--text-color: #707070;
	--card-header-toggle-color: #6c757d;

	/* ====== Transition ====== */
	--tran-03: all 0.2s ease;
	--tran-03: all 0.3s ease;
	--tran-04: all 0.3s ease;
	--tran-05: all 0.3s ease;
}

body {
	min-height: 100vh;
	background-color: var(--body-color);
	transition: var(--tran-05);
}

::selection {
	background-color: var(--primary-color);
	color: #fff;
}

body.dark {
	--body-color: #18191a;
	--sidebar-color: #242526;
	--primary-color: #3a3b3c;
	--primary-color-light: #3a3b3c;
	--toggle-color: #fff;
	--text-color: #ccc;
}

/* ===== Sidebar ===== */
.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 250px;
	padding: 10px 14px;
	background: var(--sidebar-color);
	transition: var(--tran-05);
	z-index: 100;
	flex-direction: row;
	align-items: center;
}
.sidebar.close {
	width: 88px;
	flex-direction: column;
	align-items: flex-start;
}

/* ===== Reusable code - Here ===== */
.sidebar li {
	height: 50px;
	list-style: none;
	display: flex;
	align-items: center;
	margin-top: 10px;
}

.sidebar header .image,
.sidebar .icon {
	min-width: 60px;
	border-radius: 6px;
}

.sidebar .icon {
	min-width: 60px;
	border-radius: 6px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.sidebar .text,
.sidebar .icon {
	color: var(--text-color);
	transition: var(--tran-03);
}

.sidebar .text {
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	opacity: 1;
}
.sidebar.close .text {
	opacity: 0;
}
/* =========================== */

.sidebar header {
	position: relative;
}

.sidebar header .image-text {
	display: flex;
	align-items: center;
}
.sidebar header .logo-text {
	display: flex;
	flex-direction: column;
}
header .image-text .name {
	margin-top: 2px;
	font-size: 18px;
	font-weight: 600;
}

header .image-text .profession {
	font-size: 16px;
	margin-top: -2px;
	display: block;
}

.sidebar header .image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar header .image img {
	width: 40px;
	border-radius: 6px;
}

.sidebar header .toggle {
	position: absolute;
	top: 50%;
	right: -25px;
	transform: translateY(-50%) rotate(180deg);
	height: 25px;
	width: 25px;
	background-color: var(--primary-color);
	color: var(--sidebar-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	cursor: pointer;
	transition: var(--tran-05);
}

body.dark .sidebar header .toggle {
	color: var(--text-color);
}

.sidebar.close .toggle {
	transform: translateY(-50%) rotate(0deg);
}

.sidebar .menu {
	margin-top: 40px;
}

.sidebar li.search-box {
	border-radius: 6px;
	background-color: var(--primary-color-light);
	cursor: pointer;
	transition: var(--tran-05);
}

.sidebar li.search-box input {
	height: 100%;
	width: 100%;
	outline: none;
	border: none;
	background-color: var(--primary-color-light);
	color: var(--text-color);
	border-radius: 6px;
	font-size: 17px;
	font-weight: 500;
	transition: var(--tran-05);
}
.sidebar li a {
	list-style: none;
	height: 100%;
	background-color: transparent;
	display: flex;
	align-items: center;
	height: 100%;
	width: 100%;
	border-radius: 6px;
	text-decoration: none;
	transition: var(--tran-03);
}

.sidebar li a:hover {
	background-color: var(--primary-color);
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text {
	color: var(--sidebar-color);
}
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text {
	color: var(--text-color);
}

.sidebar .menu-bar {
	height: calc(100% - 55px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-y: scroll;
}
.menu-bar::-webkit-scrollbar {
	display: none;
}
.sidebar .menu-bar .mode {
	border-radius: 6px;
	background-color: var(--primary-color-light);
	position: relative;
	transition: var(--tran-05);
}

.menu-bar .mode .sun-moon {
	height: 50px;
	width: 60px;
}

.mode .sun-moon i {
	position: absolute;
}
.mode .sun-moon i.sun {
	opacity: 0;
}
body.dark .mode .sun-moon i.sun {
	opacity: 1;
}
body.dark .mode .sun-moon i.moon {
	opacity: 0;
}

.menu-bar .bottom-content .toggle-switch {
	position: absolute;
	right: 0;
	height: 100%;
	min-width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	cursor: pointer;
}
.toggle-switch .switch {
	position: relative;
	height: 22px;
	width: 40px;
	border-radius: 25px;
	background-color: var(--toggle-color);
	transition: var(--tran-05);
}

.switch::before {
	content: '';
	position: absolute;
	height: 15px;
	width: 15px;
	border-radius: 50%;
	top: 50%;
	left: 5px;
	transform: translateY(-50%);
	background-color: var(--sidebar-color);
	transition: var(--tran-04);
}

body.dark .switch::before {
	left: 20px;
}

.home {
	position: absolute;
	top: 0;
	top: 0;
	left: 250px;
	height: 100vh;
	width: calc(100% - 250px);
	background-color: var(--body-color);
	transition: var(--tran-05);
}
.home .text {
	font-size: 30px;
	font-weight: 500;
	color: var(--text-color);
	padding: 12px 60px;
}

.sidebar.close ~ .home {
	left: 78px;
	height: 100vh;
	width: calc(100% - 78px);
}

body.dark .home .text,
body.dark div.text,
body.dark h1.text,
body.dark h2.text,
body.dark h3.text,
body.dark h4.text,
body.dark h5.text,
body.dark h6.text,
body.dark p.text,
body.dark table.text,
body.dark thead.text,
body.dark tbody.text,
body.dark th.text,
body.dark td.text,
body.dark div.card-header,
body.dark span.badge-secondary,
body.dark div.progress-bar {
	color: var(--toggle-color) !important;
}

body.dark button.btn-success,
body.dark button.btn-success:hover,
body.dark button.btn-success:focus,
body.dark button.btn-success:focus-visible,
body.dark button.btn-success:active {
	background-color: var(--primary-color-light) !important;
	border-color: var(--primary-color-light) !important;
}

body.dark button.btn-primary {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color-light) !important;
}

body.dark button.btn-primary:hover,
body.dark button.btn-primary:focus,
body.dark button.btn-primary:active {
	background-color: var(--primary-color-light);
	border-color: var(--primary-color-light);
}

body.dark div.card-header {
	background-color: var(--card-header-toggle-color) !important;
}

body.dark .badge-secondary {
	background-color: var(--primary-color-light) !important;
}

body.dark .progress-bar {
	background-color: var(--primary-color-light) !important;
}

/* Estilos de las secciones */
section.home {
	display: none;
}

section.home.show {
	display: block;
}

.btn-primary,
.btn-primary {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
}

[type='button'].disabled,
[type='reset'].disabled,
[type='submit'].disabled,
.btn.disabled {
	cursor: auto;
	text-decoration: none;
	text-decoration-line: none;
	text-decoration-style: solid;
	text-decoration-color: currentcolor;
	text-decoration-thickness: auto;
}

.bg-primary {
	background-color: var(--primary-card-header-color) !important;
}

/* Resto de los estilos */

/* Estilos para la sección del Dashboard principal */
.dashboard {
	/* padding: 20px; */
	/* background-color: #f8f8f8; */
	text-align: center;
}

.dashboard h1 {
	font-size: 2.5rem;
	margin-bottom: 20px;
}

.dashboard p {
	font-size: 1.2rem;
}

/* Estilos para la sección del Panel de Control */
#section-panel-de-control {
	background-color: #f8f8f8;
}

#section-panel-de-control h2 {
	font-size: 1.8rem;
	margin-bottom: 20px;
}

#section-panel-de-control .card {
	margin-bottom: 20px;
}

#section-panel-de-control .card-header {
	background-color: var(--primary-color);
	color: #fff;
}

#section-panel-de-control .card-header h4 {
	margin: 0;
}

#section-panel-de-control .card-body {
	padding: 20px;
}

#section-panel-de-control p {
	margin-bottom: 10px;
}

#section-panel-de-control .btn-success {
	border-color: var(--success-color);
	color: #fff;
}

#section-panel-de-control .btn-primary {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

/* Sección de Reporte de Personas Censadas por Departamento */

#section-reporte-censados .card-header {
	background-color: var(--primary-color);
	color: #fff;
}

#section-reporte-censados .card-header h4 {
	margin: 0;
}

#section-reporte-censados .card-body {
	padding: 20px;
}

#section-reporte-censados .form-group {
	margin-bottom: 20px;
}

#section-reporte-censados .form-control {
	width: 100%;
}

#section-reporte-censados .btn-success {
	border-color: var(--success-color);
	color: #fff;
}

#section-reporte-censados .btn-primary {
	border-color: var(--primary-color);
	color: #fff;
}

#section-reporte-censados .btn-primary:hover,
#section-reporte-censados .btn-primary:active {
	background-color: #5349c7;
}

#section-reporte-censados .table {
	margin-top: 20px;
	width: 100%;
}

#section-reporte-censados .table th,
#section-reporte-censados .table td {
	padding: 8px;
	text-align: center;
}

#section-reporte-censados .table td button {
	margin-right: 5px;
}

/* Sección de Estadísticas */
#estadisticas h2 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 30px;
	color: var(--primary-color);
}

#estadisticas .card {
	margin-bottom: 30px;
	border: none;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#estadisticas .card-header {
	border-radius: 10px 10px 0 0;
	padding: 10px 15px;
}

#estadisticas .card-header h4 {
	font-size: 18px;
	font-weight: 600;
}

#estadisticas .card-body {
	padding: 20px;
}

#estadisticas h5 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 15px;
	color: var(--primary-color);
}

#estadisticas .statistic {
	display: flex;
	align-items: center;
	font-size: 24px;
	font-weight: 600;
	color: var(--primary-color);
}

#estadisticas .statistic .number {
	margin-right: 10px;
}

#estadisticas .statistic .label {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
}

#estadisticas .list-group-item {
	border: none;
	padding: 10px 15px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
}

#estadisticas .list-group-item:not(:last-child) {
	border-bottom: 1px solid #ddd;
}

#estadisticas .list-group-item .badge {
	font-size: 14px;
	font-weight: 600;
	background-color: var(--primary-color);
}

#estadisticas .form-group label {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
}

#estadisticas .form-control {
	height: 40px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
}

#estadisticas #edad-chart {
	height: 300px;
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid #ddd;
}

/* Sección de Consultar Censos Pre Completados por Validar */
#censos-validar h2 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 30px;
	color: var(--primary-color);
}

#censos-validar .table {
	font-size: 14px;
}

#censos-validar .table thead th {
	font-weight: 600;
	color: var(--text-color);
	background-color: var(--primary-color-light);
}

#censos-validar .table tbody tr td {
	vertical-align: middle;
}

#censos-validar .table .badge {
	font-size: 12px;
	font-weight: 600;
}

/* Sección de Reasignar Persona para Validar */
#reasignar-persona h2 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 30px;
	color: var(--primary-color);
}

#reasignar-persona .form-group label {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
}

#reasignar-persona .form-control {
	height: 40px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
}

#reasignar-persona .btn {
	font-size: 14px;
	font-weight: 500;
}

/* Sección de Visualizar Información Estadística */
#info-estadistica h2 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 30px;
	color: var(--primary-color);
}

#info-estadistica .card {
	border: none;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#info-estadistica .card-header {
	border-radius: 10px 10px 0 0;
	padding: 10px 15px;
	background-color: var(--primary-color-light);
}

#info-estadistica .card-header h4 {
	font-size: 18px;
	font-weight: 600;
	color: var(--primary-color);
}

#info-estadistica .card-body {
	padding: 20px;
}

#info-estadistica h5 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 15px;
	color: var(--primary-color);
}

#info-estadistica .chart-container {
	height: 400px;
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid #ddd;
}

#info-estadistica .list-group-item {
	border: none;
	padding: 10px 15px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
}

#info-estadistica .list-group-item:not(:last-child) {
	border-bottom: 1px solid #ddd;
}

#info-estadistica .list-group-item .badge {
	font-size: 14px;
	font-weight: 600;
	background-color: var(--primary-color);
}

/* Sección de Censos pre completados */

#section-censos-pre-completados .card-header {
	background-color: var(--primary-color);
	color: #fff;
}

#section-censos-pre-completados .card-header h4 {
	margin: 0;
}

#section-censos-pre-completados .card-body {
	padding: 20px;
}

#section-censos-pre-completados .form-group {
	margin-bottom: 20px;
}

#section-censos-pre-completados .form-control {
	width: 100%;
}

#section-censos-pre-completados .btn-success {
	border-color: var(--success-color);
	color: #fff;
}

#section-censos-pre-completados .btn-primary {
	border-color: var(--primary-color);
	color: #fff;
}

#section-censos-pre-completados .btn-primary:hover,
#section-censos-pre-completados .btn-primary:active {
	background-color: #5349c7;
}

#section-censos-pre-completados .table {
	margin-top: 20px;
	width: 100%;
}

#section-censos-pre-completados .table th,
#section-censos-pre-completados .table td {
	padding: 8px;
	text-align: center;
}

#section-censos-pre-completados .table td button {
	margin-right: 5px;
}