/* ==============================
   general.css
   ==============================
   Solo lo que Bootstrap NO cubre con clases. Reglas:
   - Antes de añadir nada, buscar la utilidad o el componente de Bootstrap
     (espaciado, w-*, col-*, flex, text-*, bg-*, table-*...).
   - Los colores, siempre con las variables de Bootstrap (var(--bs-primary),
     var(--bs-body-bg)...), nunca a medida: así respetan el tema claro/oscuro.
   - Una clase por necesidad, con nombre en español y un comentario de para qué sirve.
   - style="..." en una página solo de emergencia (un apaño puntual o un valor calculado):
     lo normal es que el estilo vaya aquí como clase.
*/

/* Listados (ver "Listados: fila seleccionada" en js/funciones.js) ------------------- */

/* Logo según el tema (navbar de index.php y portada de zonas/verinicio.php): dos imágenes seguidas,
   imagenes/orangest-free.svg (.logo-claro, texto negro) e imagenes/orangest-free-oscuro.svg
   (.logo-oscuro, texto blanco), y solo se ve la del tema actual (data-bs-theme, que pone
   js/funciones.js). No se invierten con filter, como el logo negro de antes: cambiaría también los
   colores de la naranja. Bootstrap no trae utilidades de mostrar u ocultar según el tema. */
.logo-oscuro,
[data-bs-theme="dark"] .logo-claro {
	display: none;
}
[data-bs-theme="dark"] .logo-oscuro {
	display: inline;
}

/* Ficha-enlace de Inicio (zonas/verinicio.php: ir a la web de la empresa), como las fichas de la
   portada de orangest.es: al pasar el ratón, el borde toma el color principal y sube un poco.
   Bootstrap no trae ese efecto. */
.ficha-enlace {
	transition: border-color .15s, transform .15s;
}
.ficha-enlace:hover,
.ficha-enlace:focus-visible {
	border-color: var(--bs-primary) !important;
	transform: translateY(-2px);
}

/* Cabecera flotante de una tarjeta (estado en zonas/verfichar.php; mes del calendario de "Mis
   fichajes" y del registro, en verjornadas.php), como las de MDB: sube por encima del borde de la
   tarjeta. Bootstrap 5 trae los márgenes negativos desactivados ($enable-negative-margins), así que no
   hay clase mt-n*. La tarjeta necesita hueco arriba (mt-4) si está dentro de algo con scroll. */
.cabecera-flotante {
	margin-top: -1.5rem;
}

/* Logo grande de la pantalla de bienvenida (zonas/verinicio.php, visitante sin sesión): Bootstrap
   no trae un tamaño así hecho; en pantalla estrecha no pasa del ancho disponible. */
.logo-bienvenida {
	width: 220px;
	max-width: 70vw;
}

/* Tooltips de Bootstrap (ver iniciaTooltips() en js/funciones.js): azul suave en vez del gris
   oscuro por defecto, a juego con el azul del menú seleccionado (--bs-navbar-active-color, más
   abajo). Variables propias del componente: cambia también la flecha, sin tocar el texto porque
   -emphasis ya da buen contraste sobre -subtle en los dos temas. */
.tooltip {
	--bs-tooltip-bg: var(--bs-primary-bg-subtle);
	--bs-tooltip-color: var(--bs-primary-text-emphasis);
}

/* Menú seleccionado del navbar (.nav-link.active, que ponen index.php y marcaMenu() en funciones.js):
   con color en lugar del gris apenas distinto de los demás. Es la variable propia de Bootstrap para
   eso; --bs-link-color es #0d6efd en claro y #6ea8fe en oscuro, así que se lee bien en los dos temas. */
.navbar {
	--bs-navbar-active-color: var(--bs-link-color);
}

/* Cabecera de un listado con búsqueda: anchos fijos en rem del select de columna (Tom Select) y del
   campo de texto, que Bootstrap no cubre con clases. En pantalla estrecha el texto no pasa del ancho. */
.filtro-columna {
	width: 9rem;
}
.filtro-texto {
	width: 16rem;
	max-width: 100%;
}
/* Selector de trabajador del registro de jornada: nombre, usuario y empresa no caben en menos. */
.filtro-trabajador {
	width: 20rem;
	max-width: 100%;
}
/* Filtro de empresa del listado de usuarios (solo nivel 0): nombres de empresa más largos que una columna. */
.filtro-empresa {
	width: 14rem;
	max-width: 100%;
}

/* Desplegable de Tom Select: por encima de las cabeceras pegadas de las tablas (.sticky-top de
   Bootstrap, z-index 1020) y por debajo de los modales (1055). Tom Select trae 10 y la cabecera
   de la tabla lo tapaba. */
.ts-dropdown {
	z-index: 1030;
}

/* Filas de un listado seleccionable: se pueden pulsar. */
.tabla-seleccionable > tbody > tr[data-id] {
	cursor: pointer;
}

/* (El color de la fila seleccionada no está aquí: es la clase table-warning de Bootstrap,
   que funciones.js añade a la fila.) */

/* Registro de jornada (zonas/verregistro.php + verjornadas.php): en pantalla grande, calendario y lista
   ocupan el alto que deja la cabecera y cada columna hace scroll por su cuenta; en el móvil van una
   debajo de otra y scrollea todo el bloque. Bootstrap no trae min-height:0 (necesario para que un hijo
   flex pueda encoger y hacer scroll) ni overflow por punto de ruptura. */
/* overflow-x: hidden: la .row g-3 de dentro tiene margen negativo a los lados (1rem más ancha que
   esto) y, con overflow-y distinto de visible, salía una barra de scroll horizontal en todo el
   bloque. No recorta nada: el relleno de las columnas compensa ese margen. */
.registro-datos {
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
}
@media (min-width: 992px) {
	.registro-datos {
		overflow-y: hidden;
	}
	.registro-datos > .row {
		height: 100%;
	}
	.registro-columna {
		height: 100%;
		overflow-y: auto;
		padding-bottom: .5rem;
	}
	/* Columna de la lista (verjornadas.php): la barra de arriba (estado y botones de fichar, o
	   "Añadir fichaje") se queda quieta y solo las jornadas (.registro-lista) hacen scroll. El hueco
	   de abajo es un margen, fuera del scroll: así no llega a cuchillo al borde de la pantalla. */
	/* overflow-x: hidden en las dos: con overflow-y distinto de visible, el navegador pone también el
	   horizontal en auto y salía una barra de scroll horizontal que no servía de nada. */
	.registro-columna-lista {
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: hidden;
		padding-bottom: 0;
	}
	.registro-lista {
		flex-grow: 1;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		margin-bottom: .75rem;
	}
	.registro-lista .registro-dia {
		scroll-margin-top: 0;   /* la barra ya no está encima de la lista */
	}
}

/* Día de la lista del registro: al saltar a él (scrollIntoView), que no quede debajo de la barra
   pegada de "Añadir fichaje". */
.registro-dia {
	scroll-margin-top: 3rem;
}

/* Calendario del registro: 7 columnas iguales y días con alto fijo, aunque no tengan nada. */
.calendario {
	table-layout: fixed;
}
.calendario-dia {
	height: 3.75rem;
	vertical-align: top;
	cursor: pointer;
}
/* Día elegido: borde del color principal por dentro (no mueve el resto de celdas). */
.calendario-dia.calendario-activo {
	box-shadow: inset 0 0 0 2px var(--bs-primary);
}
/* Cuadradito de color de la leyenda. */
.calendario-muestra {
	display: inline-block;
	width: .9rem;
	height: .9rem;
	vertical-align: -.1rem;
	border-radius: .2rem;
}

/* Páginas para imprimir (informe mensual, informe de un periodo, verificación de la cadena y acceso
   de la Inspección; el resto de la aplicación no se imprime): compactas, para que un mes quepa en un
   A4 en vertical (sin forzar la orientación: quien imprime puede elegir la que quiera y tiene que
   verse bien igual). Letra más pequeña, todo el ancho del papel y celdas más apretadas que las de
   .table-sm; Bootstrap no trae estilos de impresión. */
@page {
	margin: 10mm;
}
@media print {
	body {
		font-size: 9pt;
	}
	.container {
		max-width: none;
		padding: 0;
	}
	.h4 {
		font-size: 13pt;
	}
	.table {
		margin-bottom: .5rem;
	}
	.table > :not(caption) > * > * {
		padding: .1rem .3rem;
	}
	/* Una fila de tabla no se parte entre dos hojas. */
	tr {
		break-inside: avoid;
	}
	/* Informe de un periodo (pintaPaginaPeriodo() en php/informe.php): cada trabajador y mes empieza
	   en hoja nueva. */
	.salto-pagina {
		break-before: page;
		margin-top: 0 !important;
	}
}

/* Nombre de la empresa en el navbar (index.php, en lugar del logo para el usuario de una empresa):
   un nombre largo se corta con puntos suspensivos (text-truncate) en vez de empujar el botón del menú
   del móvil a otra línea. Bootstrap no trae un ancho máximo así. */
.navbar-empresa {
	max-width: calc(100vw - 6rem);
}
@media (min-width: 992px) {
	.navbar-empresa {
		max-width: 22rem;
	}
}