/* ==========================================================================
   Tema de Partes de la brigada, sobre Bootstrap 5.3 (sustituye a Metronic).

   - Colores con contraste AA (WCAG 2.1) sobre blanco: texto 15:1, texto suave
     6,4:1, botones con texto blanco por encima de 5,5:1.
   - Letra del sistema: sin Google Fonts, el navegador no pide nada a terceros.
   - Foco de teclado amarillo y grueso: se ve sobre cualquier fondo.
   ========================================================================== */

:root {
	--tema-fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tema-fondo: #f3f5f7;
	--tema-superficie: #ffffff;
	--tema-borde: #d9dee4;
	--tema-texto: #1c2733;
	--tema-texto-suave: #55606d;
	--tema-primario: #1d5c8c;
	--tema-primario-hover: #164a71;
	--tema-primario-suave: #e6eff6;
	--tema-exito: #1d7446;
	--tema-exito-hover: #165a36;
	--tema-exito-suave: #e5f3eb;
	--tema-peligro: #b3261e;
	--tema-peligro-hover: #8f1e18;
	--tema-peligro-suave: #fbeaea;
	--tema-aviso-texto: #6b4600;
	--tema-aviso-suave: #fff4d6;
	--tema-foco: #f2b705;
	--tema-radio: .5rem;
	--tema-radio-grande: .875rem;
	--tema-sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
	--tema-ancho-lateral: 15rem;
	--tema-alto-cabecera: 3.75rem;

	/* Bootstrap lee estas variables: asi botones, enlaces y formularios salen con
	   los colores del tema sin reescribir cada componente. */
	--bs-body-font-family: var(--tema-fuente);
	--bs-body-color: var(--tema-texto);
	--bs-body-bg: var(--tema-fondo);
	--bs-secondary-color: var(--tema-texto-suave);
	--bs-border-color: var(--tema-borde);
	--bs-border-radius: var(--tema-radio);
	--bs-border-radius-lg: var(--tema-radio-grande);
	--bs-primary: #1d5c8c;
	--bs-primary-rgb: 29, 92, 140;
	--bs-success: #1d7446;
	--bs-success-rgb: 29, 116, 70;
	--bs-danger: #b3261e;
	--bs-danger-rgb: 179, 38, 30;
	--bs-link-color: #1d5c8c;
	--bs-link-color-rgb: 29, 92, 140;
	--bs-link-hover-color: #164a71;
	--bs-link-hover-color-rgb: 22, 74, 113;
	--bs-focus-ring-color: rgba(242, 183, 5, .6);
}

/* --------------------------------------------------------------------------
   Tema oscuro (19-10-2026). Lo pone partials/tema-color.html.twig en <html
   data-bs-theme="dark">: por defecto sigue al aparato, y cada uno lo puede fijar en
   su menu. Bootstrap ya cambia sus componentes con ese atributo; aqui se cambian
   las variables del tema, y todo lo que las usa (las dos hojas) se adapta solo.

   Contraste AA tambien aqui: en oscuro, un mismo azul no puede servir de fondo de
   boton con letra blanca Y de color de texto sobre fondo oscuro. Asi que los
   colores son claros (texto, iconos, bordes) y los botones llevan letra oscura.
   -------------------------------------------------------------------------- */
:root[data-bs-theme="dark"] {
	--tema-fondo: #11161c;
	--tema-superficie: #1a2129;
	--tema-borde: #344150;
	--tema-texto: #e7ecf1;
	--tema-texto-suave: #aab4bf;
	--tema-primario: #74b3e8;
	--tema-primario-hover: #9ccaf0;
	--tema-primario-suave: #1b3346;
	--tema-exito: #6ccf98;
	--tema-exito-hover: #94dfb6;
	--tema-exito-suave: #153625;
	--tema-peligro: #ff8f86;
	--tema-peligro-hover: #ffb2ab;
	--tema-peligro-suave: #3e1c1a;
	--tema-aviso-texto: #ffd27a;
	--tema-aviso-suave: #3b3016;
	--tema-sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .55);
	--tema-texto-sobre-color: #0d1720;

	--bs-link-color: #8cc2ee;
	--bs-link-color-rgb: 140, 194, 238;
	--bs-link-hover-color: #b5d8f5;
	--bs-link-hover-color-rgb: 181, 216, 245;
}

:root[data-bs-theme="dark"] .btn-primary,
:root[data-bs-theme="dark"] .btn-success,
:root[data-bs-theme="dark"] .btn-danger {
	--bs-btn-color: var(--tema-texto-sobre-color);
	--bs-btn-hover-color: var(--tema-texto-sobre-color);
	--bs-btn-active-color: var(--tema-texto-sobre-color);
	--bs-btn-disabled-color: var(--tema-texto-sobre-color);
}

:root[data-bs-theme="dark"] .btn-outline-primary,
:root[data-bs-theme="dark"] .btn-outline-success,
:root[data-bs-theme="dark"] .btn-outline-danger {
	--bs-btn-hover-color: var(--tema-texto-sobre-color);
	--bs-btn-active-color: var(--tema-texto-sobre-color);
}

/* Los contornos verde y rojo de Bootstrap son oscuros: sobre fondo oscuro no llegan
   al contraste. Se pasan a los del tema. */
:root[data-bs-theme="dark"] .btn-outline-success {
	--bs-btn-color: var(--tema-exito);
	--bs-btn-border-color: var(--tema-exito);
	--bs-btn-hover-bg: var(--tema-exito);
	--bs-btn-hover-border-color: var(--tema-exito);
	--bs-btn-active-bg: var(--tema-exito-hover);
	--bs-btn-active-border-color: var(--tema-exito-hover);
}

:root[data-bs-theme="dark"] .btn-outline-danger {
	--bs-btn-color: var(--tema-peligro);
	--bs-btn-border-color: var(--tema-peligro);
	--bs-btn-hover-bg: var(--tema-peligro);
	--bs-btn-hover-border-color: var(--tema-peligro);
	--bs-btn-active-bg: var(--tema-peligro-hover);
	--bs-btn-active-border-color: var(--tema-peligro-hover);
}

:root[data-bs-theme="dark"] .text-primary {
	color: var(--tema-primario) !important;
}

/* Las tablas con el color de texto del tema y no con el "enfasis" de Bootstrap, que
   cambia segun data-bs-theme. Asi, si alguna vez el modo del navegador y los colores
   del tema no van a la par (paso con una hoja de estilos vieja en la cache), el texto
   no puede quedar blanco sobre fondo claro. */
.table {
	--bs-table-color: var(--tema-texto);
	--bs-table-striped-color: var(--tema-texto);
	--bs-table-active-color: var(--tema-texto);
	--bs-table-hover-color: var(--tema-texto);
}

/* Opcion marcada de un menu (el tema elegido, el idioma): con los colores del tema y
   no con el azul de Bootstrap, que en oscuro deslumbraba. */
.dropdown-menu {
	--bs-dropdown-link-active-bg: var(--tema-primario-suave);
	--bs-dropdown-link-active-color: var(--tema-texto);
}

.dropdown-item.active {
	font-weight: 600;
}

/* Selector del tema dentro del menu (partials/tema-selector): la flecha gira al
   desplegar, y las opciones van sangradas bajo "Tema: ...". */
[data-tema-abrir] .tema-flecha {
	transition: transform .15s ease;
}

[data-tema-abrir][aria-expanded="true"] .tema-flecha {
	transform: rotate(180deg);
}

.tema-opciones .dropdown-item {
	padding-left: 2.25rem;
}

@media (prefers-reduced-motion: reduce) {
	[data-tema-abrir] .tema-flecha {
		transition: none;
	}
}

:focus-visible {
	outline: 3px solid var(--tema-foco);
	outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
	box-shadow: 0 0 0 .25rem rgba(242, 183, 5, .6);
	border-color: var(--tema-texto);
}

.btn-primary {
	--bs-btn-bg: var(--tema-primario);
	--bs-btn-border-color: var(--tema-primario);
	--bs-btn-hover-bg: var(--tema-primario-hover);
	--bs-btn-hover-border-color: var(--tema-primario-hover);
	--bs-btn-active-bg: var(--tema-primario-hover);
	--bs-btn-active-border-color: var(--tema-primario-hover);
	--bs-btn-disabled-bg: var(--tema-primario);
	--bs-btn-disabled-border-color: var(--tema-primario);
}

.btn-success {
	--bs-btn-bg: var(--tema-exito);
	--bs-btn-border-color: var(--tema-exito);
	--bs-btn-hover-bg: var(--tema-exito-hover);
	--bs-btn-hover-border-color: var(--tema-exito-hover);
	--bs-btn-active-bg: var(--tema-exito-hover);
	--bs-btn-active-border-color: var(--tema-exito-hover);
}

.btn-danger {
	--bs-btn-bg: var(--tema-peligro);
	--bs-btn-border-color: var(--tema-peligro);
	--bs-btn-hover-bg: var(--tema-peligro-hover);
	--bs-btn-hover-border-color: var(--tema-peligro-hover);
	--bs-btn-active-bg: var(--tema-peligro-hover);
	--bs-btn-active-border-color: var(--tema-peligro-hover);
}

.btn-outline-primary {
	--bs-btn-color: var(--tema-primario);
	--bs-btn-border-color: var(--tema-primario);
	--bs-btn-hover-bg: var(--tema-primario);
	--bs-btn-hover-border-color: var(--tema-primario);
	--bs-btn-active-bg: var(--tema-primario-hover);
}

/* --------------------------------------------------------------- estructura */

.tema-cabecera {
	position: sticky;
	top: 0;
	z-index: 1030;
	height: var(--tema-alto-cabecera);
	background: var(--tema-superficie);
	border-bottom: 1px solid var(--tema-borde);
}

.tema-marca {
	color: var(--tema-texto);
	font-weight: 700;
	font-size: 1.0625rem;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tema-marca:hover {
	color: var(--tema-primario);
}

.tema-marca .bi {
	color: var(--tema-primario);
}

/* Simbolo de la aplicacion (partials/logo-simbolo.html.twig, 20-10-2026): toma el
   color del texto, asi que aqui se le da el azul del tema (claro u oscuro). */
.tema-logo {
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	vertical-align: -.45em;
	flex-shrink: 0;
}

.tema-marca .tema-logo {
	margin-right: .4rem;
	color: var(--tema-primario);
}

/* Icono de la app en la tarjeta de /login, con las esquinas del movil. */
.tema-logo-app {
	border-radius: 22%;
	box-shadow: var(--tema-sombra);
}

.tema-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--tema-primario-suave);
	color: var(--tema-primario);
	font-weight: 700;
	font-size: .875rem;
}

.tema-cuerpo {
	display: flex;
	min-height: calc(100vh - var(--tema-alto-cabecera));
}

/* En pantalla grande el menu lateral esta siempre a la vista; en el movil es un
   panel que se abre con el boton de la cabecera (offcanvas-lg de Bootstrap). */
.tema-lateral {
	--bs-offcanvas-width: var(--tema-ancho-lateral);
	background: var(--tema-superficie);
}

@media (min-width: 992px) {
	.tema-lateral {
		width: var(--tema-ancho-lateral);
		flex-shrink: 0;
		border-right: 1px solid var(--tema-borde);
		position: sticky;
		top: var(--tema-alto-cabecera);
		height: calc(100vh - var(--tema-alto-cabecera));
		overflow-y: auto;
	}
}

.tema-menu .nav-link {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .625rem 1rem;
	margin: .125rem .5rem;
	border-radius: var(--tema-radio);
	color: var(--tema-texto);
	font-weight: 500;
}

.tema-menu .nav-link .bi {
	font-size: 1.125rem;
	color: var(--tema-texto-suave);
}

.tema-menu .nav-link:hover {
	background: var(--tema-fondo);
}

.tema-menu .nav-link.active {
	background: var(--tema-primario-suave);
	color: var(--tema-primario);
	font-weight: 600;
}

.tema-menu .nav-link.active .bi {
	color: var(--tema-primario);
}

.tema-menu-titulo {
	padding: 1rem 1.5rem .25rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tema-texto-suave);
}

.tema-principal {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.tema-contenido {
	flex: 1;
	padding: 1.5rem 1rem;
}

@media (min-width: 992px) {
	.tema-contenido {
		padding: 2rem;
	}
}

.tema-titulo {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
}

.tema-pie {
	padding: 1rem;
	font-size: .875rem;
	color: var(--tema-texto-suave);
	border-top: 1px solid var(--tema-borde);
	background: var(--tema-superficie);
}

.tema-pie a {
	color: var(--tema-texto-suave);
}

/* ------------------------------------------------------------- componentes */

.card {
	--bs-card-border-color: var(--tema-borde);
	--bs-card-border-radius: var(--tema-radio-grande);
	--bs-card-cap-bg: var(--tema-superficie);
	box-shadow: var(--tema-sombra);
}

.table > thead th {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--tema-texto-suave);
	white-space: nowrap;
}

.form-label {
	font-weight: 600;
}

/* Pantalla de carga (partials/carga.html.twig). */
.tema-carga {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: rgba(243, 245, 247, .75);
	/* El fondo de la pagina con transparencia, en claro y en oscuro. */
	background: color-mix(in srgb, var(--tema-fondo) 75%, transparent);
	font-weight: 600;
}

/* Aviso de la politica de privacidad: barra fija abajo hasta que se acepta. */
.tema-aviso-privacidad {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1080;
	/* Invertida respecto a la pagina: oscura en el tema claro y clara en el oscuro. */
	background: var(--tema-texto);
	color: var(--tema-superficie);
	padding: 1rem;
}

.tema-aviso-privacidad a {
	color: inherit;
	text-decoration: underline;
}

/* Avisos que se cierran solos (lo que ha ido bien). */
.tema-toasts {
	position: fixed;
	top: calc(var(--tema-alto-cabecera) + .75rem);
	right: .75rem;
	z-index: 2100;
}

/* Pantalla de acceso. */
.tema-acceso {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 1rem;
}

.tema-acceso .card {
	width: 100%;
	max-width: 26rem;
}

/* ------------------------------------------------------------------------
   Compatibilidad con las pantallas que vienen de la base (Metronic). Solo las
   clases de Metronic que esas pantallas usan y Bootstrap no tiene, para que se
   lean bien mientras se pasan al tema. Al rehacer cada pantalla se dejan de usar.
   ------------------------------------------------------------------------ */

.btn-light-primary { background: var(--tema-primario-suave); color: var(--tema-primario); border-color: transparent; }
.btn-light-danger { background: var(--tema-peligro-suave); color: var(--tema-peligro); border-color: transparent; }
.btn-light-success { background: var(--tema-exito-suave); color: var(--tema-exito); border-color: transparent; }
/* Dar de baja (se deshace): amarillo, para no confundirlo con el rojo de borrar. */
.btn-light-warning { background: var(--tema-aviso-suave); color: var(--tema-aviso-texto); border-color: transparent; }
.badge-light-primary { background: var(--tema-primario-suave); color: var(--tema-primario); }
.badge-light-success { background: var(--tema-exito-suave); color: var(--tema-exito); }
.badge-light-danger { background: var(--tema-peligro-suave); color: var(--tema-peligro); }
.badge-light-warning { background: var(--tema-aviso-suave); color: var(--tema-aviso-texto); }

/* QR del alta de una tablet: negro sobre blanco tambien con el tema oscuro (si no,
   la camara no lo lee bien). */
.tablet-qr {
	background: #fff;
	border-radius: var(--tema-radio);
	padding: .25rem;
}

/* Horas: el desplegable "Agrupar por" no debe cortar "Area y subarea (formato de
   Intervencion)". En pantalla grande se queda al menos este ancho y, si no caben,
   los botones bajan a la linea siguiente (20-10-2026). */
@media (min-width: 992px) {
	.horas-agrupar {
		min-width: 26rem;
	}
}

/* --- Analisis (admin/analisis.html.twig, 20-10-2026) ------------------------ */
.analisis-cifra__titulo {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	font-size: .875rem;
	font-weight: 600;
	color: var(--tema-texto-suave);
}

.analisis-cifra__titulo .bi {
	color: var(--tema-primario);
}

.analisis-cifra__valor {
	margin: .35rem 0 .25rem;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.analisis-cifra__unidad {
	font-size: 1rem;
	font-weight: 600;
	color: var(--tema-texto-suave);
}

.analisis-cifra__cambio {
	margin: 0;
	font-size: .8125rem;
	color: var(--tema-texto-suave);
}

.analisis-cifra--aviso {
	border-color: var(--tema-foco);
	background: var(--tema-aviso-suave);
}

.analisis-cifra--aviso .analisis-cifra__titulo,
.analisis-cifra--aviso .analisis-cifra__titulo .bi {
	color: var(--tema-aviso-texto);
}

@media (max-width: 575.98px) {
	.analisis-cifra__valor {
		font-size: 1.5rem;
	}
}

/* Chart.js necesita un contenedor con alto y posicion relativa. */
.analisis-grafica {
	position: relative;
	height: 260px;
}

.analisis-grafica--alta {
	height: 320px;
}

.analisis-datos {
	margin-top: .75rem;
	font-size: .875rem;
}

.analisis-datos summary {
	color: var(--tema-primario);
	cursor: pointer;
}

.analisis-datos__tabla {
	max-height: 18rem;
	margin-top: .5rem;
	overflow-y: auto;
}

/* Mapa de calor: tabla de verdad, con el fondo de cada celda segun las horas
   (--nivel de 0 a 1). Las celdas muy llenas llevan el texto en contraste. */
.analisis-calor th,
.analisis-calor td {
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.analisis-calor tbody th {
	text-align: left;
	font-weight: 600;
}

.analisis-calor td {
	--bs-table-bg: color-mix(in srgb, var(--tema-primario) calc(var(--nivel, 0) * 100%), transparent);
	min-width: 2.75rem;
	font-size: .8125rem;
	border: 2px solid var(--tema-superficie);
}

.analisis-calor td.fuerte {
	--bs-table-color: #fff;
	font-weight: 600;
}

:root[data-bs-theme="dark"] .analisis-calor td.fuerte {
	--bs-table-color: #11161c;
}

.analisis-leyenda {
	display: flex;
	align-items: center;
	gap: .25rem;
}

.analisis-leyenda span {
	display: inline-block;
	width: 1.25rem;
	height: .75rem;
	border-radius: 2px;
	background: color-mix(in srgb, var(--tema-primario) calc(var(--nivel, 0) * 100%), transparent);
}

/* Matriz operario x area del Analisis: cabeceras de area en dos lineas como mucho,
   nombres de operario a la izquierda y fila de totales. */
.analisis-matriz .analisis-calor thead th {
	vertical-align: bottom;
	font-size: .75rem;
	font-weight: 600;
	white-space: normal;
	min-width: 4.5rem;
	max-width: 7rem;
	line-height: 1.2;
}

.analisis-matriz .analisis-calor tbody th,
.analisis-matriz .analisis-calor tfoot th {
	white-space: nowrap;
	text-align: left;
}

.analisis-matriz .analisis-calor tfoot td,
.analisis-matriz .analisis-calor tfoot th {
	border-top: 2px solid var(--tema-borde);
}

/* La columna de nombres se queda fija al desplazar la matriz a lo ancho. */
.analisis-matriz .analisis-calor th[scope="row"],
.analisis-matriz .analisis-calor thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--tema-superficie);
}

/* Opciones avanzadas del filtro del Analisis. */
.analisis-avanzadas summary {
	color: var(--tema-primario);
	font-size: .875rem;
	cursor: pointer;
}

/* Cabeceras de las tablas ordenables (tema/js/tablas-ordenables.js): el boton se
   ve como el texto de la cabecera, con una flecha suave que se marca al ordenar. */
.tabla-orden {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	cursor: pointer;
}

.tabla-orden:hover {
	color: var(--tema-primario);
}

.tabla-orden:focus-visible {
	outline: 3px solid var(--tema-foco);
	outline-offset: 2px;
	border-radius: 2px;
}

.tabla-orden__flecha {
	font-size: .75em;
	opacity: .45;
}

th[aria-sort] .tabla-orden__flecha {
	opacity: 1;
	color: var(--tema-primario);
}

/* --- Botones de acciones en tablas y cabeceras de tarjeta (20-10-2026) --------
   En fila, a la derecha y con el mismo hueco. La celda de botones lleva el mismo
   margen derecho que la cabecera de la tarjeta (1rem, el de Bootstrap), asi los
   botones de la cabecera y los de las filas quedan en columna. */
.tabla-botones {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: .375rem;
}

.tabla-botones form {
	margin: 0;
}

.table > :not(caption) > * > .tabla-acciones {
	padding-right: 1rem;
}

/* Activar y Desactivar con el mismo ancho: si no, los de al lado se mueven. */
.boton-alternar {
	min-width: 7.5rem;
}

/* Anchos fijos (los del colgroup) en pantalla grande: todas las tablas de la pagina
   con las columnas en el mismo sitio. En pantalla pequena, cada una a su contenido. */
@media (min-width: 992px) {
	.tabla-fija {
		table-layout: fixed;
	}

	/* Dos botones solo con icono (boton-texto-xxl) hasta 1400 px: en un portatil
	   dejan sitio a la columna de la tarea en Partes. */
	.col-botones-2 {
		width: 7rem;
	}

	.col-botones-3 {
		width: 20rem;
	}
}

@media (min-width: 1400px) {
	.col-botones-2 {
		width: 12.5rem;
	}
}

/* En pantalla pequena, la tabla con un ancho minimo y desplazable a lo ancho
   (table-responsive): apretada, la tarea se partia palabra a palabra. */
@media (max-width: 991.98px) {
	.tabla-fija {
		min-width: 44rem;
	}
}

@media (max-width: 1399.98px) {
	.boton-texto-xxl {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}
}

/* En el movil, los botones solo con su icono; el texto sigue para el lector de
   pantalla (como visually-hidden). */
@media (max-width: 767.98px) {
	.boton-texto {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	.boton-alternar {
		min-width: 0;
	}
}