/**
 * Grinclic CSE — sistema visual unificado (Bootstrap 5 CDN + DataTables + plugins).
 * Cargar al final del bundle CSS para aplicar tokens y componentes comunes.
 */

:root {
	--cse-brand: #186800;
	--cse-brand-dark: #125000;
	--cse-brand-light: #1d7e4d;
	--cse-brand-muted: #e8f3e8;
	--cse-page-bg: #f4f6f4;
	--cse-surface: #ffffff;
	--cse-border: #dde3dd;
	--cse-text: #2c332c;
	--cse-text-muted: #6b736b;
	--cse-radius: 4px;
	--cse-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	--cse-navbar-h: 56px;
	--cse-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Layout shell --- */
body.cse-admon {
	font-family: var(--cse-font);
	color: var(--cse-text);
	background-color: var(--cse-page-bg);
	padding-top: var(--cse-navbar-h);
}

body.cse-login-page {
	font-family: var(--cse-font);
	background:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(76, 140, 74, 0.18), transparent 55%),
		linear-gradient(165deg, #eef3ea 0%, #f8faf8 45%, #e5efe5 100%);
	min-height: 100vh;
	padding-top: 0;
	margin: 0;
}

.cse-login-main {
	padding: 2rem 0 3rem;
}

.cse-main {
	padding: 1.5rem 0 2.5rem;
}

.cse-main .container {
	max-width: 1200px;
}

/* --- Navbar (Bootstrap 5) --- */
.navbar.cse-top-nav.navbar-dark {
	background-color: var(--cse-brand);
	box-shadow: var(--cse-shadow);
}

.navbar.cse-top-nav .navbar-brand,
.navbar.cse-top-nav .nav-link {
	color: rgba(255, 255, 255, 0.92) !important;
}

.navbar.cse-top-nav .nav-link:hover,
.navbar.cse-top-nav .nav-link:focus {
	color: #fff !important;
}

.navbar.cse-top-nav .dropdown-menu .dropdown-item {
	color: var(--cse-text);
}

.navbar.cse-top-nav .navbar-toggler {
	border-color: rgba(255, 255, 255, 0.45);
}

.navbar.cse-top-nav .navbar-toggler-icon {
	filter: invert(1);
}

/* --- Encabezados de página --- */
.cse-page-header,
.page-header {
	margin: 0 0 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--cse-brand);
	color: var(--cse-text);
	font-size: 1.75rem;
	font-weight: 600;
}

.cse-page-header .text-muted,
.page-header .text-muted {
	font-size: 0.95rem;
	font-weight: 400;
}

/* --- Paneles y callouts --- */
.panel.cse-panel,
.panel-default {
	border-color: var(--cse-border);
	border-radius: var(--cse-radius);
	box-shadow: var(--cse-shadow);
}

.panel-default > .panel-heading {
	background-color: var(--cse-brand-muted);
	border-color: var(--cse-border);
	color: var(--cse-brand-dark);
	font-weight: 600;
}

.panel-primary > .panel-heading {
	background-color: var(--cse-brand);
	border-color: var(--cse-brand-dark);
}

.bs-callout {
	background: var(--cse-surface);
	border-radius: var(--cse-radius);
	box-shadow: var(--cse-shadow);
}

.bs-callout-info {
	border-left-color: var(--cse-brand-light);
}

.bs-callout-info h4 {
	color: var(--cse-brand);
}

.bs-callout-success {
	border-left-color: var(--cse-brand);
}

/* --- Botones --- */
.btn-primary {
	background-color: var(--cse-brand);
	border-color: var(--cse-brand-dark);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--cse-brand-dark);
	border-color: var(--cse-brand-dark);
}

.btn-success {
	background-color: var(--cse-brand-light);
	border-color: var(--cse-brand);
}

.btn-success:hover,
.btn-success:focus {
	background-color: var(--cse-brand);
	border-color: var(--cse-brand-dark);
}

.cse-btn-login {
	background-color: var(--cse-brand);
	border-color: var(--cse-brand-dark);
	color: #fff;
	font-weight: 600;
}

.cse-btn-login:hover,
.cse-btn-login:focus {
	background-color: var(--cse-brand-dark);
	color: #fff;
}

/* --- Formularios --- */
.form-control:focus {
	border-color: var(--cse-brand-light);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(24, 104, 0, 0.25);
}

.input-group-addon {
	background-color: var(--cse-brand-muted);
	border-color: var(--cse-border);
	color: var(--cse-brand);
}

label {
	font-weight: 600;
	color: var(--cse-text);
}

/* --- Tablas + DataTables (Bootstrap integration) --- */
.table > thead > tr > th {
	background-color: var(--cse-brand);
	color: #fff;
	border-color: var(--cse-brand-dark) !important;
	font-weight: 600;
	vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: #f9fbf9;
}

.table-hover > tbody > tr:hover {
	background-color: var(--cse-brand-muted);
}

table.dataTable thead th,
table.dataTable thead td {
	border-bottom: 2px solid var(--cse-brand-dark) !important;
}

table.dataTable.no-footer {
	border-bottom: 1px solid var(--cse-border);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: var(--cse-brand) !important;
	border-color: var(--cse-brand-dark) !important;
	color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: var(--cse-brand-muted) !important;
	border-color: var(--cse-border) !important;
	color: var(--cse-text) !important;
}

div.dt-buttons .dt-button {
	background: var(--cse-surface);
	border: 1px solid var(--cse-border);
	border-radius: var(--cse-radius);
	color: var(--cse-brand);
}

div.dt-buttons .dt-button:hover {
	background: var(--cse-brand-muted);
	border-color: var(--cse-brand-light);
	color: var(--cse-brand-dark);
}

.panel-body .note-editor {
	box-sizing: border-box;
	max-width: 100%;
	overflow: visible;
}

.cse-datatable-panel {
	margin-top: 1rem;
}

.cse-datatable-panel .panel-body {
	padding: 15px;
}

.cse-datatable-panel .table-responsive {
	margin-bottom: 0;
	border: none;
}

.cse-datatable-panel .dataTables_wrapper {
	width: 100%;
}

/* --- Listas tipo hub (administrador.php) --- */
.list-group.cse-nav-list .list-group-item {
	border-color: var(--cse-border);
	margin-bottom: 0.5rem;
	border-radius: var(--cse-radius);
}

.list-group.cse-nav-list .list-group-item h4 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
}

/* --- Alertas flotantes (includes/alerta.php) --- */
.notification {
	background-color: var(--cse-brand-light);
	border-radius: var(--cse-radius);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- Chosen / pickers --- */
.chosen-container-single .chosen-single {
	border-color: var(--cse-border);
	border-radius: var(--cse-radius);
	height: 34px;
	line-height: 32px;
}

.chosen-container-active.chosen-with-drop .chosen-single {
	border-color: var(--cse-brand-light);
}

/* --- Login (patrón Emlaze login-admin-*) --- */
.cse-login-logo-wrap {
	margin-bottom: 1.25rem;
}

.cse-login-logo-link {
	display: inline-block;
	text-decoration: none;
}

.cse-login-logo {
	max-height: 100px;
	max-width: min(320px, 85vw);
	width: auto;
	height: auto;
}

.cse-login-kicker {
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cse-text-muted, #5a6b5a);
}

.cse-login-label {
	font-weight: 600;
	color: var(--cse-text);
	margin-bottom: 0.35rem;
}

.cse-login-card {
	border-radius: 0.5rem;
	overflow: hidden;
	margin-bottom: 0;
}

.cse-login-card .cse-login-card-header,
.cse-login-card-header {
	background-color: var(--cse-brand-dark) !important;
	border-bottom: none !important;
	color: #fff;
}

.cse-login-title {
	font-weight: 600;
	color: #fff;
}

.cse-login-subtitle {
	color: rgba(255, 255, 255, 0.9);
}

.cse-login-card-footer {
	background-color: #f8faf8;
}

.cse-login-card .input-group-lg > .form-control,
.cse-login-card .input-group-lg > .input-group-text {
	min-height: 46px;
	padding: 10px 14px;
	font-size: 16px;
}

.cse-login-input-group.input-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
}

.cse-login-input-group .input-group-text {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f4f7f4;
	border-color: var(--cse-border);
	color: var(--cse-brand-dark);
}

.cse-login-input-group > .form-control {
	display: block;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
	float: none;
}

.cse-login-card .form-control:focus {
	border-color: var(--cse-brand-light);
	box-shadow: 0 0 0 0.2rem rgba(24, 104, 0, 0.2);
}

.cse-login-field-last {
	margin-bottom: 1.5rem !important;
}

/* --- Inicio (bienvenida) --- */
.cse-inicio-main {
	display: flex;
	align-items: center;
	min-height: calc(100vh - var(--cse-navbar-h) - 2rem);
}

.cse-inicio-main > .container {
	width: 100%;
}

/* --- Tarjeta bienvenida (inicio) --- */
.cse-welcome-card {
	background: var(--cse-surface);
	border: 1px solid var(--cse-border);
	border-radius: var(--cse-radius);
	box-shadow: var(--cse-shadow);
	padding: 2rem;
}

.cse-welcome-card .cse-welcome-kicker {
	color: var(--cse-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cse-welcome-card .page-header {
	border-bottom: none;
	margin-bottom: 0.5rem;
	padding-bottom: 0;
}

.text-secondary {
	color: var(--cse-text-muted);
}

/* --- Usuarios (administradorEmpleados) --- */
#tablaEmpleadosListado .cse-col-estado {
	background-color: rgba(46, 125, 50, 0.08);
}