/*
 * Bormax - hoja de estilos moderna sobre Bootstrap 5.
 * Sustituye a css/style*.css (plantilla "skel" antigua).
 */

:root {
	--bmx-primary: #f78506;
	--bmx-primary-dark: #d97205;
	--bmx-dark: #1c1c1c;
	--bmx-dark-2: #262626;
	--bmx-bg: #f4f5f7;
	--bmx-border: #e5e7eb;
	--bmx-sidebar-width: 260px;
	--bmx-sidebar-width-rail: 64px;
	--bs-primary: var(--bmx-primary);
	--bs-primary-rgb: 247, 133, 6;
	--bs-body-font-family: "Segoe UI", "Inter", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* display:flex en columna + .bmx-content flex:1 empuja el pie de pagina
   (copyright) al fondo real de la pantalla en paginas con poco contenido,
   en vez de dejarlo pegado justo debajo del contenido. */
body {
	background: var(--bmx-bg);
	color: #2b2f33;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a {
	color: var(--bmx-primary-dark);
}
a:hover {
	color: var(--bmx-primary);
}

/* Navbar (paginas publicas/kiosco sin sidebar, ver includes/header_public.php) */
.bmx-navbar {
	background: var(--bmx-dark);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.bmx-navbar .navbar-brand img {
	height: 34px;
	width: auto;
}
.bmx-user-btn {
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .15);
}
.bmx-user-btn:hover {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

/* Menu lateral (sidebar), ver includes/header.php.
   Cerrado queda como una franja angosta solo con los iconos (no
   desaparece del todo); abierto muestra el ancho completo con las
   etiquetas de texto. */
.bmx-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--bmx-sidebar-width-rail);
	background: var(--bmx-dark);
	box-shadow: 1px 0 3px rgba(0, 0, 0, .25);
	z-index: 1040;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	transition: width .25s ease;
}
html.bmx-sidebar-open .bmx-sidebar {
	width: var(--bmx-sidebar-width);
}
/* Logo compacto (cuadrado), visible solo con el menu angosto/colapsado. */
.bmx-sidebar-brand-rail {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .9rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	flex: 0 0 auto;
}
html.bmx-sidebar-open .bmx-sidebar-brand-rail {
	display: none;
}
.bmx-sidebar-brand-rail img {
	height: 32px;
	width: 32px;
	object-fit: contain;
}
.bmx-sidebar-brand {
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.1rem;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	flex: 0 0 auto;
}
html.bmx-sidebar-open .bmx-sidebar-brand {
	display: flex;
}
.bmx-sidebar-brand img {
	height: 34px;
	width: auto;
}
.bmx-sidebar-nav {
	padding: 1rem .6rem;
	flex: 1 1 auto;
}
.bmx-sidebar-nav .nav-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .65);
	font-weight: 500;
	font-size: .92rem;
	padding: .65rem;
	border-radius: .375rem;
	margin-bottom: .4rem;
	white-space: nowrap;
}
.bmx-sidebar-nav .nav-link i {
	font-size: 1.3rem;
}
.bmx-sidebar-nav .bmx-nav-label {
	display: none;
}
html.bmx-sidebar-open .bmx-sidebar-nav .nav-link {
	justify-content: flex-start;
	padding: .6rem .8rem;
	margin-bottom: .15rem;
}
html.bmx-sidebar-open .bmx-sidebar-nav .nav-link i {
	font-size: 1.15rem;
	margin-right: .6rem;
}
html.bmx-sidebar-open .bmx-sidebar-nav .bmx-nav-label {
	display: inline;
}
.bmx-sidebar-nav .nav-link:hover {
	color: #fff;
	background: rgba(255, 255, 255, .08);
}
/* Sidebar abierto: la opcion activa se ve como un bloque relleno.
   Sidebar angosto (solo iconos): se ve como una barra de color al
   costado, mas limpio que rellenar un cuadrado alrededor del icono. */
html.bmx-sidebar-open .bmx-sidebar-nav .nav-link.active {
	color: #fff;
	background: var(--bmx-primary);
}
html:not(.bmx-sidebar-open) .bmx-sidebar-nav .nav-link.active {
	color: #fff;
	background: rgba(247, 133, 6, .18);
}
html:not(.bmx-sidebar-open) .bmx-sidebar-nav .nav-link.active::before {
	content: '';
	position: absolute;
	left: -.6rem;
	top: .3rem;
	bottom: .3rem;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: var(--bmx-primary);
}
.bmx-sidebar-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .4);
	z-index: 1035;
}
html.bmx-sidebar-open .bmx-sidebar-backdrop {
	display: block;
}
.bmx-topbar {
	background: var(--bmx-dark);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	margin-left: var(--bmx-sidebar-width-rail);
	transition: margin-left .25s ease;
}
/* El ancho se fija explicitamente con calc() (no "auto") porque al
   combinar overflow-x con un ancho automatico, el navegador cambia el
   calculo del ancho para que se ajuste al contenido en vez de al
   espacio disponible, y el contenido ancho (ej. el calendario) volvia
   a desbordar la pagina en vez de scrollear dentro de su propio cuadro. */
body.bmx-has-sidebar .bmx-content {
	margin-left: var(--bmx-sidebar-width-rail);
	width: calc(100% - var(--bmx-sidebar-width-rail));
	max-width: calc(100% - var(--bmx-sidebar-width-rail));
	transition: margin-left .25s ease, width .25s ease, max-width .25s ease;
}
/* En pantallas grandes, al abrir el sidebar el contenido se corre para
   el lado (no queda tapado). En pantallas chicas el sidebar expandido
   se superpone sobre el contenido, con un fondo oscuro detras. */
@media (min-width: 992px) {
	html.bmx-sidebar-open .bmx-topbar,
	html.bmx-sidebar-open body.bmx-has-sidebar .bmx-content {
		margin-left: var(--bmx-sidebar-width);
	}
	html.bmx-sidebar-open body.bmx-has-sidebar .bmx-content {
		width: calc(100% - var(--bmx-sidebar-width));
		max-width: calc(100% - var(--bmx-sidebar-width));
	}
	html.bmx-sidebar-open .bmx-sidebar-backdrop {
		display: none;
	}
}

/* Page header */
.bmx-page-header {
	margin-bottom: 1.5rem;
}
.bmx-page-header h1 {
	font-size: 1.4rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 0;
	color: #23262b;
}

/* Cards */
.card {
	border: 1px solid var(--bmx-border);
	border-radius: .6rem;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.card-header {
	background: #fff;
	border-bottom: 1px solid var(--bmx-border);
	font-weight: 600;
}

/* Tables. El encabezado antes era un bloque solido naranja (como un boton
   gigante); ahora es texto oscuro con un subrayado de color, mismo acento
   pero mas simple. Y .table-responsive ya no dibuja su propio borde: casi
   siempre vive dentro de un .card, asi que ese borde solo duplicaba el de
   la tarjeta y hacia la tabla verse mas pesada/encajonada de lo necesario. */
.table {
	--bs-table-hover-bg: #fff6ea;
	font-size: .9rem;
	vertical-align: middle;
}
.table thead th {
	background: transparent;
	color: #23262b;
	text-transform: uppercase;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .03em;
	border-bottom: 2px solid var(--bmx-primary);
	text-align: center;
	vertical-align: middle;
}

/* Pestañas internas (administracion, equipos, actividades, persona.php).
   ".nav-link" trae su color de "--bs-link-color", una variable de Bootstrap
   separada de "--bs-primary" que no se remapeo mas arriba, asi que el
   texto/icono de estas pestañas quedaba con el azul de fabrica en vez del
   naranja del tema. */
.nav-tabs .nav-link {
	color: #6c757d;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
	color: var(--bmx-primary-dark);
	border-color: var(--bmx-border) var(--bmx-border) var(--bmx-border);
}
.nav-tabs .nav-link.active {
	color: var(--bmx-primary-dark);
	font-weight: 600;
}

/* Buttons */
.btn-primary {
	background: var(--bmx-primary);
	border-color: var(--bmx-primary);
}
.btn-primary:hover,
.btn-primary:focus {
	background: var(--bmx-primary-dark);
	border-color: var(--bmx-primary-dark);
}
.btn-outline-primary {
	color: var(--bmx-primary-dark);
	border-color: var(--bmx-primary);
}
.btn-outline-primary:hover {
	background: var(--bmx-primary);
	border-color: var(--bmx-primary);
}

/* Paginacion (detalle_trabajos, detalle_interferencias, detalle_personal,
   personal). Igual que .nav-link, ".page-link" trae su color de fabrica
   de "--bs-pagination-*", variables separadas de "--bs-primary" que no se
   remapearon mas arriba - sin esto los numeros de pagina y el activo se
   veian azules en medio del tema naranja. */
.page-link {
	color: var(--bmx-primary-dark);
}
.page-link:hover,
.page-link:focus {
	color: var(--bmx-primary-dark);
	background-color: var(--bmx-bg);
	box-shadow: none;
}
.page-item.active .page-link {
	background-color: var(--bmx-primary);
	border-color: var(--bmx-primary);
	color: #fff;
}
.page-item.disabled .page-link {
	color: #adb5bd;
}

/* Forms. Bootstrap trae el azul de fabrica hardcodeado en el checkbox/radio
   marcado (no sigue la variable --bs-primary que se remapeo a naranja mas
   arriba), asi que sin esto cualquier casilla tildada en cualquier pagina
   se veia azul en medio de una pantalla naranja. */
.form-control:focus,
.form-select:focus {
	border-color: var(--bmx-primary);
	box-shadow: 0 0 0 .2rem rgba(247, 133, 6, .18);
}
.form-check-input:checked {
	background-color: var(--bmx-primary);
	border-color: var(--bmx-primary);
}
.form-check-input:focus {
	border-color: var(--bmx-primary);
	box-shadow: 0 0 0 .2rem rgba(247, 133, 6, .18);
}

/* Login */
.bmx-login-wrap {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--bmx-dark) 0%, #33291d 100%);
	padding: 1.5rem;
}
.bmx-login-card {
	width: 100%;
	max-width: 380px;
	border: none;
	border-radius: .75rem;
	box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
}
.bmx-login-card .card-body {
	padding: 2.25rem 2rem;
}
.bmx-login-logo {
	height: 46px;
	margin-bottom: 1.5rem;
}

/* Footer */
.bmx-footer {
	color: #8a8f98;
	font-size: .8rem;
	padding: 1.5rem 0;
	text-align: center;
}

/* Utility: keep legacy inline-styled tables/forms from old pages readable */
.bmx-content {
	padding-top: 1.5rem;
	padding-bottom: 3rem;
	max-width: 100%;
	overflow-x: auto;
	flex: 1 1 auto;
}
/* Si alguna pagina tiene contenido mas ancho que la pantalla (ej. el
   calendario de inicio.php), que se desplace solo el contenido y no la
   pagina entera, para que la cabecera oscura nunca quede mas angosta
   que lo que se ve debajo. */
html {
	overflow-x: hidden;
}

/* Calendario de vencimientos (inicio.php). Las 7 columnas se reparten el
   ancho disponible de la tarjeta (table-layout: fixed), asi que el dia se
   angosta solo con la pantalla; el alto y el tamaño de letra bajan por
   pasos en las pantallas mas chicas (media queries) para que el contenido
   siga siendo legible. overflow-x sigue de respaldo por si en una pantalla
   muy angosta igual no entra. */
.calendar {
	overflow-x: auto;
}
.calendar table {
	border-collapse: separate;
	border-spacing: 6px;
	width: 100%;
	table-layout: fixed;
}
.calendar .day {
	background: #f4f5f7;
	border: 1px solid var(--bmx-border);
	border-radius: .4rem;
	position: relative;
	height: 120px;
	padding: 0;
}
.calendar .day.marked {
	background: var(--bmx-primary);
	border-color: var(--bmx-primary-dark);
}
.calendar .day.feriado {
	background: #e74c3c;
	border-color: #c0392b;
}
/* Dia de hoy: un borde por fuera del cuadro (outline no ocupa espacio en el
   layout de la tabla, a diferencia de un border), independiente del color
   de fondo que tenga ese dia por vencimiento/feriado/cumpleaños. */
.calendar .day.hoy {
	outline: 3px solid #2d3436;
	outline-offset: 2px;
}
.calendar .day .day-number {
	color: #7f8c8d;
	left: 6px;
	position: absolute;
	top: 4px;
	font-size: .78rem;
}
.calendar .day.marked .day-number,
.calendar .day.feriado .day-number {
	color: #fff;
}
.calendar .day .events {
	color: #fff;
	margin: 20px 4px 1px;
	height: 90px;
	overflow: hidden;
}
.calendar .day .events ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.calendar .day .events strong,
.calendar .day .events span {
	display: block;
	font-size: .68rem;
	line-height: normal;
}
@media (max-width: 991.98px) {
	.calendar .day { height: 100px; }
	.calendar .day .events { height: 72px; margin-top: 18px; }
}
@media (max-width: 767.98px) {
	.calendar table { border-spacing: 3px; }
	.calendar .day { height: 85px; }
	.calendar .day .day-number { font-size: .68rem; top: 3px; left: 4px; }
	.calendar .day .events { height: 58px; margin: 16px 3px 1px; }
	.calendar .day .events strong,
	.calendar .day .events span { font-size: .6rem; }
}
@media (max-width: 575.98px) {
	.calendar .day { height: 68px; }
	.calendar .day .day-number { font-size: .6rem; }
	.calendar .day .events { height: 42px; margin-top: 15px; }
	.calendar .day .events strong,
	.calendar .day .events span { font-size: .52rem; }
}

/* Dia con cumpleaños: fondo festivo con brillo pulsante y un globo que
   rebota en la esquina, para que salte a la vista dentro del calendario. */
.calendar .day.cumple {
	background: linear-gradient(135deg, #ff6fa5, #ffb86c);
	border-color: #ff4f91;
	animation: bmxCumpleGlow 1.8s ease-in-out infinite;
}
.calendar .day.cumple .day-number {
	color: #fff;
}
.calendar .day.cumple::after {
	content: "🎉";
	position: absolute;
	top: 2px;
	right: 6px;
	font-size: 1rem;
	animation: bmxCumpleBounce 1s ease-in-out infinite;
}
@keyframes bmxCumpleGlow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 79, 145, .55); }
	50% { box-shadow: 0 0 0 7px rgba(255, 79, 145, 0); }
}
@keyframes bmxCumpleBounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}

/* Tablas largas con encabezado fijo (detalle_personal, etc.) */
.bmx-sticky-table {
	max-height: 75vh;
	overflow: auto;
}
.bmx-sticky-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
}