/* ===== Acento de marca por inquilino (para navbar + sidebar) ===== */
body.brand-coes   { --brand: #f39c12; --brand-dark: #d9820b; --brand-soft: rgba(243,156,18,.16); }
body.brand-tusser { --brand: #3c8dbc; --brand-dark: #2a6f96; --brand-soft: rgba(60,141,188,.18); }

/* ===== Navbar superior ===== */
/* color de marca por inquilino (deriva de body.brand-* → --brand/--brand-dark).
   Navbar usa el tono profundo de marca para dar contraste al texto blanco
   (antes era un ámbar pálido #ffca5c que se leía mal). */
.skin-blue .main-header .navbar { background-color: var(--brand); }
.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover { background-color: var(--brand-dark); }

.main-header .navbar { box-shadow: 0 2px 8px rgba(0, 0, 0, .10); border: 0; min-height: 50px; }
.main-header .logo { box-shadow: 0 2px 8px rgba(0, 0, 0, .10); transition: filter .15s ease; font-weight: 600; }
.main-header .logo:hover { filter: brightness(1.06); }

/* texto del navbar: blanco con leve sombra para máxima legibilidad sobre el ámbar */
.main-header .navbar .navbar-text,
.main-header .navbar-right > li > a { text-shadow: 0 1px 1px rgba(0, 0, 0, .22); }

/* nombre del centro (con lápiz de editar) */
.main-header .navbar .navbar-text {
	float: left;
	margin: 0;
	padding: 0 16px;
	line-height: 50px;
	font-weight: 600;
	letter-spacing: .2px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	opacity: .95;
	transition: opacity .15s ease;
}
.main-header .navbar .navbar-text:hover { opacity: 1; text-decoration: none; }
.main-header .navbar .navbar-text .fa-pen { font-size: 11px; opacity: .8; }

/* enlaces de la derecha (Centros / Idiomas / Desconectar) */
.main-header .navbar-right > li > a {
	color: #fff;
	font-weight: 600;
	padding: 0 16px;
	line-height: 50px;
	transition: background .15s ease;
}
.main-header .navbar-right > li > a:hover,
.main-header .navbar-right > li.open > a {
	background: rgba(0, 0, 0, .10);
	color: #fff;
}
.main-header .navbar-right > li > a .caret { margin-left: 4px; opacity: .8; }

/* menús desplegables del navbar — look moderno */
.main-header .navbar-nav .dropdown-menu {
	border: 0;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(22, 34, 51, .16);
	padding: 6px;
	margin-top: 4px;
}
.main-header .navbar-nav .dropdown-menu > li > a {
	border-radius: 7px;
	padding: 9px 12px;
	color: #4a5560;
	font-size: 13.5px;
}
.main-header .navbar-nav .dropdown-menu > li > a:hover {
	background: var(--brand-soft);
	color: var(--brand-dark);
}

/* ===== Sidebar ===== */
.main-sidebar .sidebar-menu > li.header {
	padding: 16px 18px 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: #6b7a86;
}
.skin-blue .sidebar-menu > li > a {
	padding: 12px 16px;
	color: #b8c2cc;
	font-weight: 500;
	border-left: 3px solid transparent;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.skin-blue .sidebar-menu > li > a > .fa,
.skin-blue .sidebar-menu > li > a > .fa-stack { width: 22px; text-align: center; color: #8a98a4; transition: color .15s ease; }
.skin-blue .sidebar-menu > li > a:hover {
	background: rgba(255, 255, 255, .05);
	color: #fff;
	border-left-color: rgba(255, 255, 255, .25);
}
.skin-blue .sidebar-menu > li > a:hover > .fa,
.skin-blue .sidebar-menu > li > a:hover > .fa-stack { color: #fff; }

/* activo → acento de marca */
.skin-blue .sidebar-menu > li.active > a {
	background: var(--brand-soft);
	color: #fff;
	border-left-color: var(--brand);
	font-weight: 600;
}
.skin-blue .sidebar-menu > li.active > a > .fa,
.skin-blue .sidebar-menu > li.active > a > .fa-stack { color: var(--brand); }

/* ===== Crédito de pie de página (discreto, centrado) ===== */
.app-credit {
	text-align: center;
	padding: 16px 12px 18px;
	font-size: 11.5px;
	color: #aab2bd;
	letter-spacing: .2px;
}
.app-credit a {
	color: #97a0ab;
	text-decoration: none;
	font-weight: 600;
	transition: color .15s ease;
}
.app-credit a:hover { color: var(--brand-dark); text-decoration: underline; }

/* ===== Selector de centros (dropdown navbar) ===== */

.header-centers {
	width: 300px;
	min-width: 300px;
	max-height: 380px;
	overflow-y: auto;
	overflow-x: hidden;    /* nombres largos no provocan scroll horizontal */
	padding-top: 0;        /* la barra de búsqueda ocupa el borde superior */
}

/* nombres de centro largos: envolver en vez de desbordar.
   flex: el check queda centrado vertical aunque el nombre ocupe 2 líneas */
.header-centers .centro-item > a {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.35;
}
.header-centers .centro-item > a .fa-check {
	flex: 0 0 auto;
	margin-left: auto;     /* empuja el check a la derecha sin float */
}

/* Barra de búsqueda fija arriba — opaca y por encima de los items */
.header-centers-search {
	position: sticky;
	top: 0;
	z-index: 10;
	margin: 0;
	padding: 8px;
	background: #fff;
	border-bottom: 1px solid #e7e9ee;
	box-shadow: 0 3px 5px -2px rgba(0, 0, 0, .12);
}
.header-centers-search input {
	width: 100%;
	height: 32px;
	box-sizing: border-box;
}

/* Item activo (centro seleccionado) */
.header-centers .centro-item.active > a {
	font-weight: 700;
	background: #f5f7fa;
}
.header-centers .centro-item.active > a .fa-check {
	color: #00a65a;
}

/* Badge de entorno: visible solo cuando la app NO apunta a producción
   (ver net.tusser.caps.util.JSP.dbEnv()). Avisa visualmente dónde se ejecutan
   las acciones (BD local/Docker/dev). */
.main-header .navbar .env-badge {
	display: inline-block;
	margin: 16px 14px 0 4px;
	padding: 3px 12px;
	float: left;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1px;
	color: #fff;
	background: #c0392b;
	border-radius: 12px;
	box-shadow: 0 0 0 2px rgba(255,255,255,.25);
	text-transform: uppercase;
}
.main-header .navbar .env-badge .fa {
	margin-right: 5px;
}