/*!
 * GRecH - Gestion de Recursos Humanos
 * Estilos propios sobre Bootstrap 5.3.
 *
 * Reemplaza a bootstrap/css/estilos.css de la version anterior. Se apoya en
 * las variables CSS de Bootstrap, asi que el modo oscuro se resuelve solo:
 * al poner data-bs-theme="dark" en <html>, Bootstrap recalcula sus variables
 * y todo lo de aca las sigue.
 */

:root {
	/* Azul institucional heredado de la version anterior (#428bca), ajustado
	   para que cumpla contraste AA sobre blanco. */
	--grech-azul:        #2c6ca8;
	--grech-azul-claro:  #eaf2fa;
	--grech-azul-oscuro: #21527e;
	--grech-tinta:       #272727;

	/* La barra y el pie mantienen siempre un azul oscuro, con texto blanco. */
	--grech-barra: #2c6ca8;

	/* Los botones rellenos llevan texto blanco encima, asi que su azul no se
	   aclara en modo oscuro: sobre #6ea8dc el blanco solo da 2.5:1. */
	--grech-boton:        #2c6ca8;
	--grech-boton-activo: #21527e;

	/* Fondo de las tarjetas: tiene que despegarse del fondo de la pagina. */
	--grech-superficie: #ffffff;
	--grech-cabecera:   #f7f9fb;

	--bs-primary:        var(--grech-azul);
	--bs-primary-rgb:    44, 108, 168;
	--bs-link-color:     var(--grech-azul);
	--bs-link-hover-color: var(--grech-azul-oscuro);

	--bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--bs-body-font-size: 0.9375rem;
	--bs-body-bg: #f4f6f9;

	--grech-borde: #e3e7ec;
	--grech-tenue: #6c757d;
}

:root[data-bs-theme="dark"] {
	/* Sobre fondo oscuro el azul institucional no llega al contraste minimo,
	   asi que se usa una version aclarada para textos y bordes. */
	--grech-azul:        #6ea8dc;
	--grech-azul-claro:  #1c2a38;
	--grech-azul-oscuro: #9cc4e8;
	--grech-tinta:       #e9ecef;

	--grech-barra:       #163554;
	--grech-superficie:  #1b2129;
	--grech-cabecera:    #222a33;

	--bs-primary:        var(--grech-azul);
	--bs-primary-rgb:    110, 168, 220;
	--bs-link-color:     var(--grech-azul);
	--bs-link-hover-color: var(--grech-azul-oscuro);

	--bs-body-bg: #12161b;

	--grech-borde: #2b333d;
	--grech-tenue: #9aa4af;
}

/* Los botones y badges .bg-primary de Bootstrap toman su propio azul; se los
   alinea con el institucional. */
.btn-primary {
	--bs-btn-bg: var(--grech-boton);
	--bs-btn-border-color: var(--grech-boton);
	--bs-btn-hover-bg: var(--grech-boton-activo);
	--bs-btn-hover-border-color: var(--grech-boton-activo);
	--bs-btn-active-bg: var(--grech-boton-activo);
	--bs-btn-active-border-color: var(--grech-boton-activo);
	--bs-btn-disabled-bg: var(--grech-boton);
	--bs-btn-disabled-border-color: var(--grech-boton);
}

/* En el contorneado el azul si es el aclarado: aca hace de texto sobre el
   fondo de la pagina, no de fondo con texto blanco encima. */
.btn-outline-primary {
	--bs-btn-color: var(--grech-azul);
	--bs-btn-border-color: var(--grech-azul);
	--bs-btn-hover-bg: var(--grech-boton);
	--bs-btn-hover-border-color: var(--grech-boton);
	--bs-btn-active-bg: var(--grech-boton-activo);
	--bs-btn-active-border-color: var(--grech-boton-activo);
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main {
	flex: 1 0 auto;
}

/* ---------------------------------------------------------------- Navegacion */

.navbar-grech {
	background-color: var(--grech-barra);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.navbar-grech .navbar-brand img {
	max-height: 34px;
	width: auto;
}

.navbar-grech .nav-link,
.navbar-grech .navbar-brand {
	color: rgba(255, 255, 255, .88);
}

.navbar-grech .nav-link:hover,
.navbar-grech .nav-link:focus,
.navbar-grech .nav-link.show {
	color: #fff;
	background-color: rgba(255, 255, 255, .14);
	border-radius: .375rem;
}

.navbar-grech .nav-link.active {
	color: #fff;
	background-color: rgba(255, 255, 255, .2);
	border-radius: .375rem;
}

.navbar-grech .navbar-toggler {
	border-color: rgba(255, 255, 255, .4);
}

/* Buscador de empleados de la barra (php/navbar.php, assets/js/grech.js).
   Va entre el logo y el menu, en el hueco que la barra tiene vacio. */
.buscador-barra {
	position: relative;
	flex: 0 1 22rem;
	margin-left: 1.25rem;
	min-width: 0;
}

/* Entre 1200 y 1400 el menu ya esta desplegado pero entra justo: con el
   buscador a 22rem, los siete items quedaban sin un pixel de sobra y uno se
   caia al renglon de abajo. Ahi el campo va mas angosto; la lista de
   resultados conserva su ancho porque esta posicionada y no lo arrastra. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.buscador-barra {
		flex-basis: 13rem;
		margin-left: .75rem;
	}
}

.buscador-campo {
	position: relative;
	display: flex;
	align-items: center;
}

/* La lupa y la cruz van sobre el campo, no al lado: asi el ancho del input es
   el ancho de la caja y no hay que repartirlo. */
.buscador-campo > .bi-search {
	position: absolute;
	left: .75rem;
	font-size: .8125rem;
	color: var(--grech-azul);
	pointer-events: none;
}

.buscador-campo input {
	padding-left: 2.1rem;
	padding-right: 2.1rem;
	border-radius: 999px;
	border-color: rgba(255, 255, 255, .55);
	background-color: rgba(255, 255, 255, .92);
}

.buscador-campo input:focus {
	background-color: #fff;
	border-color: #fff;
	box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .3);
}

.buscador-limpiar {
	position: absolute;
	right: .3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--grech-tenue);
	font-size: .7rem;
	cursor: pointer;
}

.buscador-limpiar:hover {
	background: var(--grech-borde);
}

.buscador-lista {
	position: absolute;
	top: calc(100% + .4rem);
	left: 0;
	z-index: 1030;
	width: 26rem;
	max-width: calc(100vw - 2rem);
	max-height: 70vh;
	overflow-y: auto;
	background: var(--grech-superficie);
	border: 1px solid var(--grech-borde);
	border-radius: .625rem;
	box-shadow: 0 10px 28px rgba(22, 53, 84, .18);
}

.buscador-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .875rem;
	padding: .5rem .875rem;
	border-bottom: 1px solid var(--grech-borde);
	text-decoration: none;
}

.buscador-fila:last-of-type {
	border-bottom: 0;
}

/* El resaltado del teclado y el del mouse son el mismo, para que recorrer con
   las flechas se vea igual que pasar el mouse por encima. */
.buscador-fila:hover,
.buscador-fila.activa {
	background: var(--grech-azul-claro);
}

.buscador-datos {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.buscador-nombre {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--grech-tinta, inherit);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.buscador-cuil {
	font-size: .71875rem;
	color: var(--grech-tenue);
	font-variant-numeric: tabular-nums;
}

.buscador-lado {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .125rem;
}

.buscador-edad {
	font-size: .71875rem;
	font-weight: 600;
	color: var(--grech-azul);
	background: var(--grech-azul-claro);
	border-radius: 999px;
	padding: 0 .5rem;
	font-variant-numeric: tabular-nums;
}

.buscador-empresa {
	font-size: .6875rem;
	color: var(--grech-tenue);
	white-space: nowrap;
}

.buscador-aviso {
	padding: .5rem .875rem;
	font-size: .71875rem;
	color: var(--grech-tenue);
	background: var(--grech-cabecera);
}

.buscador-vacio {
	padding: 1rem .875rem;
	font-size: .8125rem;
	color: var(--grech-tenue);
}

/* Con el menu plegado (por debajo de 1200 px) el buscador queda a la vista,
   fuera del desplegable, y ocupa el ancho entero debajo del logo. La lista se
   alinea con el. */
@media (max-width: 1199.98px) {
	.buscador-barra {
		order: 3;
		flex: 1 0 100%;
		margin-left: 0;
		margin-top: .5rem;
	}

	.buscador-lista {
		width: 100%;
	}

	/* Con el ancho de un telefono no entran los dos bloques en la misma linea
	   sin cortar el nombre, asi que la fila pasa a tres renglones. */
	.buscador-fila {
		flex-direction: column;
		align-items: stretch;
		gap: .25rem;
	}

	.buscador-lado {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: .5rem;
	}
}

.navbar-grech .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ------------------------------------------------------------------- Tarjetas */

.card {
	--bs-card-bg: var(--grech-superficie);
	border-color: var(--grech-borde);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.card-header {
	background-color: var(--grech-cabecera);
	border-bottom-color: var(--grech-borde);
	font-weight: 600;
}

/* Cabecera con pestanias: Bootstrap le da a .card-header-tabs un margen
   inferior negativo igual al padding del header, para que las pestanias se
   apoyen justo sobre su borde. Por eso el header conserva su padding y su
   borde inferior: si se los quita, las pestanias quedan flotando. */
.card-header .nav-tabs {
	border-bottom: 0;
	/* Si no entran en una linea se acomodan en varias, sin pisarse.
	   No se usa overflow para esto: el navegador dibujaba una barra de
	   desplazamiento sobre la cabecera. */
	row-gap: .25rem;
}

.card-header .nav-tabs .nav-link {
	color: var(--bs-body-color);
	border-bottom-color: transparent;
}

.card-header .nav-tabs .nav-link:hover {
	border-color: var(--grech-borde) var(--grech-borde) transparent;
	background-color: var(--grech-superficie);
}

.card-header .nav-tabs .nav-link.active {
	color: var(--grech-azul);
	background-color: var(--grech-superficie);
	border-color: var(--grech-borde) var(--grech-borde) var(--grech-superficie);
	font-weight: 600;
}

/* En pantalla chica las pestanias no entran en una linea. En lugar de dejarlas
   cortadas a la mitad (donde solo la ultima fila empalmaria con el panel), se
   muestran como pastillas: asi el salto de linea se ve intencional. */
@media (max-width: 767.98px) {
	.card-header .nav-tabs .nav-link {
		border-radius: .375rem;
		border-color: transparent;
	}

	.card-header .nav-tabs .nav-link.active {
		color: var(--grech-azul);
		background-color: var(--grech-azul-claro);
		border-color: var(--grech-azul-claro);
	}
}

/* Los desplegables usan la misma superficie que las tarjetas para despegarse
   del fondo de la pagina. */
.dropdown-menu {
	--bs-dropdown-bg: var(--grech-superficie);
	--bs-dropdown-border-color: var(--grech-borde);
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
}

.modal-content {
	background-color: var(--grech-superficie);
}

/* Encabezado de pagina: titulo a la izquierda, acciones a la derecha. */
.page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.page-head h1 {
	font-size: 1.375rem;
	font-weight: 600;
	margin: 0;
}

.page-head .subtitle {
	margin: .125rem 0 0;
	color: var(--grech-tenue);
	font-size: .8125rem;
}

/* --------------------------------------------------------------- Indicadores */

.stat-card {
	background: var(--grech-superficie);
	border: 1px solid var(--grech-borde);
	border-left: 4px solid var(--grech-azul);
	border-radius: .5rem;
	padding: .75rem 1rem;
	height: 100%;
}

.stat-card .stat-num {
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.1;
}

.stat-card .stat-label {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--grech-tenue);
	margin-top: .25rem;
}

.stat-card.accent-green  { border-left-color: var(--bs-success); }
.stat-card.accent-orange { border-left-color: var(--bs-warning); }
.stat-card.accent-red    { border-left-color: var(--bs-danger); }
.stat-card.accent-gray   { border-left-color: var(--grech-tenue); }

/* ---------------------------------------------------------------- Formularios */

.form-label {
	font-weight: 500;
	margin-bottom: .25rem;
}

.form-section {
	border-top: 1px solid var(--grech-borde);
	margin-top: 1.5rem;
	padding-top: 1.25rem;
}

.form-section:first-of-type {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

textarea.form-control {
	resize: vertical;
}

/* Campos que la oficina carga siempre en mayusculas. */
.uppercase,
input.uppercase,
#nombre,
#domicilio {
	text-transform: uppercase;
}

.capitalize {
	text-transform: none;
}

/* -------------------------------------------------------------------- Tablas */

table.dataTable {
	font-size: .8125rem;
}

table.dataTable thead th {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--grech-tenue);
	white-space: nowrap;
}

table.dataTable tbody td {
	vertical-align: middle;
}

/* Licencia anulada: se sigue listando, para que no parezca que se perdio, pero
   tachada y en gris, y no suma al total del periodo.

   El estilo apunta a las celdas y no a la fila: text-decoration no atraviesa un
   <tr> hasta las <td>, y el color de la celda lo fija Bootstrap con su propia
   variable. Puesto en la fila no se veia nada, y lo que parecia el tachado era
   el borde punteado que .listado-sistema le pone a cada renglon. */
tr.licencia-anulada > td {
	color: var(--grech-tenue);
	text-decoration: line-through;
}

/* El primero de una serie de bloques repetidos no lleva el margen de arriba:
   ese margen esta para separarlo del anterior, y el primero no tiene ninguno. */
.first-mt-0:first-of-type {
	margin-top: 0 !important;
}

/* Columna de botones: siempre en una sola linea. */
.col-acciones {
	white-space: nowrap;
	width: 1%;
}

/* Tabla larga dentro de una tarjeta: alto acotado y encabezado pegado arriba.

   El fondo del encabezado tiene que ser opaco y propio: Bootstrap le pone el
   fondo a cada celda y no a la tabla, asi que un thead transparente deja ver
   las filas pasando por detras. */
.tabla-desplazable {
	max-height: 24rem;
	overflow-y: auto;
}

.tabla-desplazable thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--grech-superficie);
}

/* En el celular la tabla ya se desplaza de costado; sumarle un desplazamiento
   vertical propio obliga a manejar dos scrolls anidados con el pulgar. Alla la
   lista se muestra entera y se recorre con la pagina. */
@media (max-width: 767.98px) {
	.tabla-desplazable {
		max-height: none;
	}
}

/* Fila que pide atencion: contrato a prueba por vencer, en el tablero.

   El tinte se pone con --bs-table-bg-type, la variable propia de Bootstrap,
   para no pelearse con el resaltado del mouse: table-hover usa su propia
   variable, que tiene prioridad sobre esta, asi que la fila se sigue marcando
   al pasar por encima.

   El filo va con border-left y NO con box-shadow: Bootstrap dibuja el fondo de
   cada celda con un box-shadow enorme hacia adentro, de modo que declarar uno
   propio en la primera celda le borra el tinte a esa sola columna. Se veia
   justo asi, con la columna del alta en blanco y el resto rosado. */
tr.fila-por-vencer > * {
	--bs-table-bg-type: rgba(var(--bs-danger-rgb), .07);
}

tr.fila-por-vencer > :first-child {
	border-left: 3px solid var(--bs-danger);
}

/* Los botones de accion son enlaces, salvo el borrado de usuarios, que va
   dentro de un formulario POST. Los dos tienen que verse igual. */
.acciones a,
.acciones button,
.acciones span {
	border: 0;
	background: transparent;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: .375rem;
	text-decoration: none;
	font-size: 1rem;
	transition: background-color .12s ease-in-out;
}

.acciones a:hover,
.acciones button:hover {
	background-color: var(--grech-azul-claro);
}

.accion-ver      { color: var(--grech-azul); }
.accion-editar   { color: var(--bs-success); }
.accion-evento   { color: var(--bs-warning); }
.accion-eliminar { color: var(--bs-danger); }

/* Una accion con texto, no solo el icono: el Editar de la planilla de sueldos,
   que tiene que verse como un boton y no confundirse con el ojo de al lado. */
.acciones a.accion-boton {
	width: auto;
	gap: .25rem;
	padding: 0 .55rem;
	border: 1px solid var(--bs-primary);
	color: var(--bs-primary);
	font-size: .8rem;
	font-weight: 500;
}

.acciones a.accion-boton:hover {
	background-color: var(--bs-primary);
	color: #fff;
}

/* Controles de DataTables un poco mas compactos. */
.dataTables_wrapper .row:first-child,
.dataTables_wrapper .row:last-child {
	font-size: .8125rem;
	align-items: center;
}

.dataTables_wrapper .dataTables_filter input {
	min-width: 14rem;
}

/* ------------------------------------------------------------------ Etiquetas */

.badge-interes {
	display: inline-block;
	background: var(--grech-azul-claro);
	color: var(--grech-azul);
	border: 1px solid var(--grech-borde);
	border-radius: 12px;
	padding: .1rem .55rem;
	font-size: .6875rem;
	line-height: 1.6;
	margin: 1px 2px 1px 0;
	white-space: nowrap;
}

/* -------------------------------------------------------------------- Ingreso */

.pagina-login {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	/* La capa oscura garantiza que el logo blanco se lea, sea cual sea la foto
	   que se ponga de fondo. */
	background-image: linear-gradient(rgba(16, 27, 42, .66), rgba(16, 27, 42, .66)), url("../../img/bg.jpg");
	background-size: cover;
	background-position: center;
	padding: 1.5rem;
}

.caja-login {
	width: 100%;
	max-width: 24rem;
}

/* El logo es texto blanco con transparencia. Va sobre la foto oscurecida, no
   dentro de la tarjeta clara, donde no se veria. */
.logo-login {
	display: block;
	width: 100%;
	max-width: 210px;
	height: auto;
	margin: 0 auto 1.5rem;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6));
}

.pie-login {
	margin: 1.25rem 0 0;
	text-align: center;
	font-size: .75rem;
	color: rgba(255, 255, 255, .75);
	text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.tarjeta-login {
	background-color: rgba(255, 255, 255, .96);
	border-radius: .75rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
	padding: 2rem;
	color: var(--grech-tinta);
}

:root[data-bs-theme="dark"] .tarjeta-login {
	background-color: rgba(28, 34, 42, .96);
	color: var(--grech-tinta);
}


/* --------------------------------------------------------------- Ficha empleado */

.foto-empleado {
	width: 100%;
	max-width: 190px;
	border-radius: .5rem;
	border: 1px solid var(--grech-borde);
	background: var(--bs-body-bg);
	padding: .25rem;
}

/* Vista previa del modal de carga de foto (php/modal_foto.php).
   Las fotos llegan con proporciones muy distintas: sin una altura fija, elegir
   una apaisada y despues una vertical le cambia el alto al modal entero. */
.foto-vista {
	height: 190px;
	object-fit: cover;
}

.dato-lista {
	list-style: none;
	padding: 0;
	margin: 0;
}

.dato-lista li {
	padding: .4rem 0;
	border-bottom: 1px solid var(--grech-borde);
	display: flex;
	gap: .5rem;
	align-items: baseline;
}

.dato-lista li:last-child {
	border-bottom: 0;
}

.dato-lista .bi {
	color: var(--grech-tenue);
	flex: 0 0 1.1rem;
}

.dato-titulo {
	color: var(--grech-tenue);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* ---------------------------------------------------------------------- Pie */

.pie-grech {
	flex-shrink: 0;
	background-color: var(--grech-barra);
	color: rgba(255, 255, 255, .9);
	padding: 1.25rem 0;
	margin-top: 2.5rem;
	font-size: .8125rem;
}

.pie-grech a {
	color: #fff;
}

/* ------------------------------------------------------------------ Impresion */

@media print {
	.no-imprimir,
	.navbar,
	.pie-grech {
		display: none !important;
	}

	body {
		background: #fff;
	}
}

/* -------------------------------------------------------------------- Celular */

@media (max-width: 575.98px) {
	.page-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.page-head .page-actions {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
	}

	.page-head .page-actions .btn {
		flex: 1 1 auto;
	}

	/* En pantallas chicas las tablas se leen mejor un poco mas chicas. */
	table.dataTable {
		font-size: .75rem;
	}
}

/* --------------------------------------------------------------------- Graficos */

.grafico-caja {
	position: relative;
	width: 100%;
}

.grafico-caja canvas {
	max-width: 100%;
}

/* Tarjeta compacta de indicador, para las filas de metricas de los informes. */
.kpi {
	display: flex;
	align-items: center;
	gap: .75rem;
	background: var(--grech-superficie);
	border: 1px solid var(--grech-borde);
	border-radius: .5rem;
	padding: .75rem 1rem;
	height: 100%;
}

.kpi .kpi-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.5rem;
	height: 2.5rem;
	border-radius: .5rem;
	background: var(--grech-azul-claro);
	color: var(--grech-azul);
	font-size: 1.15rem;
}

.kpi .kpi-valor {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
}

.kpi .kpi-label {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--grech-tenue);
}

.kpi .kpi-nota {
	font-size: .7rem;
	color: var(--grech-tenue);
}

.kpi.kpi-verde  .kpi-icono { background: rgba(79, 143, 79, .14);  color: #4f8f4f; }
.kpi.kpi-rojo   .kpi-icono { background: rgba(192, 90, 90, .14);  color: #c05a5a; }
.kpi.kpi-ambar  .kpi-icono { background: rgba(224, 166, 63, .16); color: #b9832a; }
.kpi.kpi-gris   .kpi-icono { background: rgba(138, 143, 152, .16); color: var(--grech-tenue); }

:root[data-bs-theme="dark"] .kpi.kpi-ambar .kpi-icono { color: #e0a63f; }

/* Cuando el valor de la tarjeta es un nombre y no un numero: mas chico, y que
   un nombre largo pase a dos renglones en lugar de estirar la tarjeta. */
.kpi > div {
	min-width: 0;
}

.kpi .kpi-valor-nombre {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* El nombre del empleado dentro de una tabla no se pinta como enlace: se lee
   como el resto del texto y recien al pasar el mouse se muestra que es
   clickeable. Usa el color de texto del tema (blanco en modo oscuro) en lugar
   de un blanco fijo, que en modo claro seria invisible. */
.enlace-empleado {
	color: var(--bs-body-color);
	text-decoration: none;
}

.enlace-empleado:hover,
.enlace-empleado:focus-visible {
	color: var(--grech-azul);
	text-decoration: underline;
}

/* Filas que se pueden abrir, como las de la tabla de completitud en
   calidad_datos.php. El puntero y el realce avisan que hay algo detras; el
   foco visible hace falta porque tambien se abren con el teclado. */
.cursor-pointer {
	cursor: pointer;
}

tr.cursor-pointer:hover > * {
	background-color: var(--grech-cabecera);
}

tr.cursor-pointer:focus-visible {
	outline: 2px solid var(--grech-azul);
	outline-offset: -2px;
}

/* Detalle de fichajes: listado de sistema.
   Tipografia de ancho fijo y columnas alineadas, para leer las horas en
   vertical de un vistazo. Sin franjas ni etiquetas de color: en un control de
   asistencia lo que se busca es el renglon que no cierra, y para eso el ruido
   visual estorba mas de lo que ayuda. */
.listado-sistema {
	font-family: var(--bs-font-monospace);
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
}

.listado-sistema > thead > tr > th {
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--grech-tenue);
	border-bottom: 2px solid var(--grech-borde);
	padding-bottom: .2rem;
}

.listado-sistema > tbody > tr > td {
	padding-top: .15rem;
	padding-bottom: .15rem;
	border-bottom-style: dotted;
}

/* La fecha vacia de un dia con varios turnos no tiene que parecer un renglon
   nuevo: se le saca la linea de arriba. */
.listado-sistema > tbody > tr > td:empty {
	border-bottom-color: transparent;
}

/* Informes de fichaje: al imprimir, que salga la hoja y no la pantalla.
   Las tarjetas pierden el marco, el acordeon se abre entero y los turnos no
   se parten entre hojas. El pie con la fecha solo aparece al imprimir. */
#pie-impresion,
.solo-imprimir,
.separador-empleado {
	display: none;
}

@media print {
	.hoja-informe .card,
	.hoja-informe .accordion-item {
		border: none;
		box-shadow: none;
	}

	.hoja-informe .accordion-collapse {
		display: block !important;
	}

	/* La barra del acordeon es un control de pantalla. En papel la reemplaza la
	   cabecera con los datos del empleado, que es lo que hace falta si la hoja
	   termina archivada sola. */
	.hoja-informe .accordion-header {
		display: none;
	}

	/* Los empleados van uno abajo del otro, corridos, y solo se salta de hoja
	   cuando no queda lugar. Lo que no se puede partir es la ficha de un
	   empleado separada de su primera fila de detalle. */
	.empleado-hoja {
		break-inside: auto;
	}

	.ficha-fichaje {
		page-break-inside: avoid;
		page-break-after: avoid;
		margin-bottom: .5rem;
	}

	.hoja-informe .accordion-body {
		padding: 0;
	}

	.solo-imprimir,
	.separador-empleado {
		display: block;
	}

	.hoja-informe .table-responsive {
		overflow: visible;
		max-height: none;
	}

	.hoja-informe tr,
	.hoja-informe .accordion-item {
		page-break-inside: avoid;
	}

	.listado-sistema {
		font-size: 10.5pt;
	}

	/* Cuando la hoja trae su propio encabezado, el de la aplicacion sobra: son
	   dos titulos seguidos diciendo casi lo mismo. Se oculta solo en esas
	   pantallas, y por eso la condicion mira si existe el encabezado impreso.
	   Si el navegador no entendiera :has(), lo peor que pasa es que el titulo
	   salga dos veces; nada se rompe. */
	body:has(.encabezado-impreso) .page-head {
		display: none;
	}

	/* El encabezado de la hoja: titulo centrado y, debajo, los filtros con que
	   se armo el informe. Sale una sola vez, arriba de la primera hoja; en las
	   siguientes el lector se ubica por el pie, que si va en todas. */
	.encabezado-impreso {
		text-align: center;
		margin-bottom: 1rem;
		padding-bottom: .5rem;
		border-bottom: 1.5px solid #666;
	}

	.encabezado-impreso h1 {
		font-size: 15pt;
		font-weight: 700;
		letter-spacing: .04em;
		margin: 0;
	}

	/* Los filtros pueden ser largos: con los siete puestos el rotulo pasa de
	   los ciento cincuenta caracteres. Se deja que corte en varios renglones
	   en vez de salirse de la hoja. */
	.encabezado-impreso p {
		font-size: 9pt;
		color: #444;
		margin: .3rem auto 0;
		max-width: 85%;
		line-height: 1.35;
	}

	.encabezado-impreso p.detalle {
		font-weight: 600;
		color: #000;
	}

	/* La tabla del detalle ocupa la hoja entera: sin el marco de la tarjeta ni
	   su barra de titulo, que en papel no dicen nada que no diga el encabezado.

	   El !important no es capricho: esa barra lleva la utilidad d-flex de
	   Bootstrap, que ya viene con !important, y sin esto le gana a la regla. */
	.hoja-informe .card-header {
		display: none !important;
	}

	.hoja-informe .card-body {
		padding: 0;
	}

	/* Que el encabezado de columnas se repita en cada hoja. Sin esto, a partir
	   de la segunda hoja quedan cinco columnas de datos sin decir cual es cual. */
	.hoja-informe thead {
		display: table-header-group;
	}

	/* Una nomina larga se corta donde caiga; lo que no se puede partir es una
	   fila por la mitad. */
	.hoja-informe .listado-sistema {
		page-break-inside: auto;
	}

	/* En papel el nombre del empleado es texto, no un enlace: el subrayado y el
	   azul solo ensucian. */
	.hoja-informe .enlace-empleado {
		color: #000;
		text-decoration: none;
	}

	/* Cada renglon en una sola linea. Con el nombre mas largo de la nomina la
	   celda queda al limite, y si el navegador decide partirla la fila pasa a
	   ocupar dos y el listado deja de leerse en vertical. */
	.hoja-informe .listado-sistema td,
	.hoja-informe .listado-sistema th {
		white-space: nowrap;
		padding-left: .25rem;
		padding-right: .25rem;
	}

	/* Un listado con muchas columnas elegidas no entra a lo ancho ni con la hoja
	   apaisada. Antes que dejar que el navegador corte la tabla por la derecha
	   (cosa que no se nota hasta que sale el papel) se achica la tipografia y se
	   deja que los textos largos partan en dos renglones: se pierde la lectura
	   en vertical, pero sale entero, que es lo que se pidio al marcar tantas
	   columnas. La pone informe_apretado() en php/informe_empresa.php. */
	.hoja-informe .listado-sistema.listado-apretado {
		font-size: 7.5pt;
	}

	.hoja-informe .listado-sistema.listado-apretado td,
	.hoja-informe .listado-sistema.listado-apretado th {
		white-space: normal;
		word-break: break-word;
		padding-left: .15rem;
		padding-right: .15rem;
	}

	/* Las etiquetas de color se imprimen en gris: en blanco y negro, un fondo
	   verde y uno rojo salen del mismo tono y no se distinguen. */
	.hoja-informe .badge {
		background-color: transparent !important;
		border: 1px solid #999;
		color: #000 !important;
	}

	/* La linea entre un empleado y el siguiente. */
	.separador-empleado {
		border: 0;
		border-top: 1px solid #999;
		margin: 1.5rem 0 1rem;
		opacity: 1;
	}

	/* El pie de cada hoja lo pone @page (ver fichaje_estilo_pie). Este es el
	   respaldo en flujo, y solo aparece si el navegador no soporta las cajas de
	   margen: assets/js/grech.js marca el <html> en ese caso. */
	.sin-cajas-de-margen #pie-impresion {
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #ccc;
		margin-top: 1rem;
		padding-top: .35rem;
		font-size: 11px;
		color: #666;
	}
}

/* Al imprimir, que los graficos y las tarjetas no se corten entre hojas. */
@media print {
	.grafico-caja,
	.kpi,
	.card {
		page-break-inside: avoid;
	}
}

/* ---------------------------------------------------------------------------
   Listas de trabajo de calidad_datos.php en el telefono.

   La de "Sin foto" se usa caminando por la empresa, con el telefono en una mano
   y la persona enfrente, asi que ahi el tamanio de los controles no es un
   detalle: un boton de dieciseis pixeles de alto no se toca al primer intento.
   --------------------------------------------------------------------------- */

/* Los desplegables de la lista "Sin foto" comparten renglon en vez de ocupar uno
   cada uno: por omision form-select mide el 100 % y cuatro filtros empujarian la
   tabla fuera de la pantalla. Con base flexible entran de a tres o cuatro en la
   computadora y de a uno en el telefono, sin una consulta de medios por tamanio. */
.cd-filtro-foto {
	flex: 1 1 11rem;
	min-width: 0;
}

@media (max-width: 767.98px) {
	/* La tabla trae su propio scroll de 26rem. En una pantalla de telefono eso
	   es una cajita que se mueve adentro de una pagina que tambien se mueve, y
	   el dedo nunca sabe cual de las dos va a arrastrar. */
	.cd-tabla {
		max-height: none !important;
		overflow-y: visible !important;
	}

	/* El buscador queda a la vista mientras se recorre la lista: escribir tres
	   letras del apellido tiene que estar siempre a un toque. */
	.cd-buscador {
		position: sticky;
		top: 0;
		z-index: 3;
		padding-top: .5rem;
		background: var(--bs-body-bg);
	}

	/* Blanco suficiente alrededor del boton de cargar la foto. */
	.cd-tabla .btn-sm {
		padding-top: .35rem;
		padding-bottom: .35rem;
	}
}