/*
 * Identidad visual de Alto Impacto Visual & PLV para el desk y para el portal (login incluido).
 *
 * Se carga desde `app_include_css` y `web_include_css` con ruta directa y sufijo `?v=N`:
 * `bundled_asset()` solo consulta `assets.json` cuando la ruta contiene ".bundle.", así que este
 * fichero no necesita `bench build`. A cambio, /assets se sirve con caché muy larga:
 * SUBIR `?v=N` EN hooks.py CADA VEZ QUE SE EDITE ESTE FICHERO.
 *
 * Especificidad escalada `:root:root` (0,2,0) y `:root:root[data-theme="dark"]` (0,3,0):
 * en la página de login `login.bundle.css` se inyecta DESPUÉS de `web_include_css` y redefine
 * `--btn-primary` en `:root` (0,1,0); con la escalada ganamos en el desk y en el login.
 *
 * CONSECUENCIA OBLIGATORIA: como `:root:root` también gana al `[data-theme="dark"]` del core,
 * TODO token del bloque claro debe repetirse en el bloque oscuro. Si se añade uno solo en claro,
 * el modo oscuro heredará el valor claro sin avisar.
 *
 * La paleta clara vive en `:root:root` y nunca en `[data-theme="light"]`: el desk sirve
 * `data-theme="automatic"` hasta que `frappe.ui.set_theme()` lo resuelve en cliente, y las páginas
 * del portal no emiten `data-theme` en absoluto.
 *
 * NO HAY NAVBAR QUE MARCAR (comprobado en el bench, 18-09-2026): `--navbar-bg` y `.navbar` existen en
 * el SCSS fuente (`apps/frappe/frappe/public/scss/common/css_variables.scss` y
 * `.../desk/navbar.scss`), pero el `<header>` real del Desk se rellena con
 * `apps/frappe/frappe/public/js/frappe/ui/toolbar/navbar.html`, que en esta versión SOLO pinta el
 * aviso de anuncios: no hay ningún elemento `.navbar` en el DOM ni en escritorio ni en móvil ni con
 * `read_only`. Búsqueda/notificaciones/usuario viven dentro de `.body-sidebar`. Por eso esta capa NO
 * define `--navbar-bg`: sería un token sin efecto verificable. Si una futura versión de Frappe
 * reintroduce la navbar clásica, revisar este comentario antes de añadirlo.
 */

:root:root {
	/* Paleta corporativa extraída del logo oficial. */
	--ai-brand: #009ed3; /* cian dominante de la marca */
	--ai-brand-light: #00a9e0; /* acento claro del logo; variante para fondos oscuros */
	--ai-brand-ink: #007aa3; /* mismo tono, oscurecido: 4.87:1 sobre blanco (AA texto) */
	--ai-brand-deep: #005f80; /* para fondos grises claros: 5.55:1 sobre #e2e2e2 */
	--ai-brand-hover-dark: #4dc3ec; /* hover del botón primario en oscuro: 10.3:1 con texto negro */
	--ai-navy: #002784; /* marino corporativo: 13.0:1 sobre blanco */
	--ai-brand-tint: #e6f4fa; /* selección de lista en claro */
	--ai-brand-tint-dark: #0d3444; /* selección de lista en oscuro */
	--ai-brand-wash: #eef7fb; /* hover de la barra lateral en claro */
	--ai-brand-wash-dark: #12303b; /* hover de la barra lateral en oscuro */
	--ai-on-brand-light: #0f0f0f; /* texto sobre --ai-brand-light: 7.09:1 */

	/*
	 * El cian puro #009ed3 solo llega a 3.07:1 sobre blanco y suspendería AA como color de texto.
	 * `--primary` se usa como TEXTO (filtros, informes, grid, sidebar de lista) además de como fondo
	 * de checkbox/radio y barra de progreso, así que en claro se usa la variante oscurecida.
	 */
	--primary: var(--ai-brand-ink);
	--primary-color: var(--ai-brand-ink);
	--btn-primary: var(--ai-brand-ink);
	--focus-default: 0 0 0 2px var(--ai-brand-ink);
	--sidebar-select-color: var(--ai-brand-tint);
	--sidebar-hover-color: var(--ai-brand-wash);
	--date-active-bg: var(--ai-brand-ink);
	--date-active-text: #ffffff;
}

:root:root[data-theme="dark"] {
	--primary: var(--ai-brand-light);
	--primary-color: var(--ai-brand-light);
	--btn-primary: var(--ai-brand-light);
	--focus-default: 0 0 0 2px var(--ai-brand-light);
	--sidebar-select-color: var(--ai-brand-tint-dark);
	--sidebar-hover-color: var(--ai-brand-wash-dark);
	--date-active-bg: var(--ai-brand-light);
	--date-active-text: var(--ai-on-brand-light);

	/* En oscuro el core deja la barra de progreso en gris claro (`--light`), ajeno a la marca. */
	--progress-bar-bg: var(--ai-brand-light);

	/*
	 * El degradado del checkbox es opaco y tapa `background-color: var(--primary)`, así que en oscuro
	 * hay que redefinirlo o el checkbox marcado seguiría siendo blanco. El check es negro en oscuro
	 * ($check-icon-dark): negro sobre #00a9e0 da 7.77:1.
	 */
	--checkbox-gradient: linear-gradient(180deg, var(--ai-brand-light) -124.51%, var(--ai-brand-light) 100%);
}

/*
 * Bootstrap define `.btn-primary:hover` (0,2,0) pero `.btn.btn-primary` (0,2,0) aparece después en la
 * hoja y gana también al pasar el ratón: hoy el botón primario no tiene ninguna respuesta de hover.
 * Esta regla (0,3,0) la añade con el marino corporativo en claro y un cian más claro en oscuro.
 */
.btn.btn-primary:hover {
	background-color: var(--ai-navy);
	color: #ffffff;
}

:root:root[data-theme="dark"] .btn.btn-primary:hover {
	background-color: var(--ai-brand-hover-dark);
	color: #000000;
}

/*
 * `.btn-primary-light` (filtros aplicados, group-by, salto de página) pinta `var(--primary)` sobre
 * gris. Con el cian oscurecido caería a 3.76:1 sobre #e2e2e2 y, en oscuro, a 1.05:1 sobre #999999.
 */
:root:root .btn-primary-light,
:root:root .btn-primary-light:hover,
:root:root .btn-primary-light:active {
	color: var(--ai-brand-deep);
}

:root:root[data-theme="dark"] .btn-primary-light,
:root:root[data-theme="dark"] .btn-primary-light:hover,
:root:root[data-theme="dark"] .btn-primary-light:active {
	color: var(--gray-900);
}

/* Login corporativo sobre las vistas y la autenticación estándar de Frappe. */
body[data-path="login"] {
	min-height: 100svh;
	overflow-x: hidden;
	background:
		radial-gradient(circle at 14% 18%, rgba(0, 169, 224, 0.34), transparent 36%),
		radial-gradient(circle at 88% 82%, rgba(0, 158, 211, 0.24), transparent 34%),
		linear-gradient(135deg, var(--ai-navy) 0%, var(--ai-brand-deep) 68%, var(--ai-brand-ink) 100%);
}

body[data-path="login"] .page-content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
	padding: clamp(28px, 6vh, 64px) 24px;
	overflow-y: auto;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.login-content.page-card {
	width: 100%;
	max-width: 430px;
	min-height: auto;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 40px);
	gap: 24px;
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 20px;
	background: var(--surface-white);
	box-shadow: 0 24px 64px rgba(0, 39, 132, 0.28);
	color: var(--ai-navy);
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card-head {
	align-items: center;
	gap: 18px;
	text-align: center;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card-head
	img.app-logo {
	max-width: min(100%, 280px);
	max-height: 58px;
	object-fit: contain;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card-head
	h4 {
	color: var(--ai-navy);
	font-size: clamp(1.45rem, 3vw, 1.75rem);
	letter-spacing: -0.015em;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card-head
	.page-card-subtitle {
	color: var(--ink-gray-6);
	line-height: 1.5;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card
	.page-card-body
	.form-label {
	color: var(--ai-navy);
	font-weight: 600;
}

body[data-path="login"] .page-card
	.page-card-body
	:is(input[type="text"], input[type="email"], input[type="password"]) {
	min-height: 46px;
	/* Neutral mínimo del core que supera 3:1 sobre blanco. */
	border: 1px solid var(--gray-600);
	border-radius: 10px;
	background: var(--surface-white);
	color: var(--gray-900);
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card
	.page-card-body
	:is(input[type="text"], input[type="email"], input[type="password"])::placeholder {
	color: var(--ink-gray-6);
	opacity: 1;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card
	.page-card-body
	.password-field
	input {
	padding-right: 48px;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card
	.page-card-body
	.password-field
	.toggle-password {
	right: 0;
	width: 44px;
	height: 44px;
	padding: 14px;
	border-radius: 8px;
	box-sizing: border-box;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card
	.page-card-body
	.password-field
	.toggle-password:is(:hover, :focus) {
	background: var(--ai-brand-tint);
	fill: var(--ai-brand-ink);
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card
	.page-card-actions
	.btn,
body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.signup-disabled-message
	.btn {
	min-height: 44px;
	padding: 10px 14px;
	border-radius: 10px;
	font-weight: 600;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card
	.page-card-actions
	:is(.btn-login, .btn-ldap-login, .btn-signup:not(:disabled)) {
	border-color: var(--ai-brand-ink);
	background: var(--ai-brand-ink);
	color: #ffffff;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card
	.page-card-actions
	:is(.btn-login, .btn-ldap-login, .btn-signup:not(:disabled)):is(:hover, :focus, :active) {
	border-color: var(--ai-navy);
	background: var(--ai-navy);
	color: #ffffff;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card
	.page-card-actions
	.btn-login-option {
	border: 1px solid var(--gray-600);
	background: var(--ai-brand-tint);
	color: var(--ai-navy);
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.login-content.page-card
	:is(.forgot-password-message, .sign-up-message, .resend-link)
	a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ai-brand-ink);
	font-weight: 600;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card
	.page-card-body
	:is(.login-error-banner, .login-success-banner) {
	min-height: 44px;
	padding: 10px 12px;
	border-radius: 10px;
	line-height: 1.4;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card
	.page-card-body
	.login-success-banner {
	color: var(--ai-brand-deep);
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.page-card
	.page-card-body
	.login-success-banner
	svg {
	fill: currentcolor;
}

body[data-path="login"]
	:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
	.login-content.page-card
	:is(input, button, a, .toggle-password):focus-visible {
	outline: 3px solid var(--ai-brand-ink) !important;
	outline-offset: 2px;
	box-shadow: none !important;
}

@media (max-width: 575.98px) {
	body[data-path="login"] .page-content-wrapper {
		justify-content: flex-start;
		padding: 16px;
	}

	body[data-path="login"]
		:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
		.login-content.page-card {
		padding: 24px 20px;
		border-radius: 16px;
	}

	body[data-path="login"]
		:is(.for-login, .for-forgot, .for-login-with-email-link, .for-email-login, .for-signup)
		.page-card-head
		img.app-logo {
		max-height: 50px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body[data-path="login"],
	body[data-path="login"] * {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/*
 * Sidebar operativa: jerarquía tranquila, estado activo inequívoco y controles táctiles conservados.
 * Sin ámbito por `data-title`: se aplica a `.body-sidebar` en todo el Desk (decisión del propietario,
 * 18-09-2026) porque limitarla al workspace propio hacía que la marca apareciera y desapareciera al
 * navegar a Manufacturing, Stock, etc.
 *
 * Iteración del 18-09-2026 (segunda pasada, a petición del propietario: "hay que mejorarla bastante"):
 * fondo con tinte de marca, ítem activo con barra cian + texto marino, hover neutro con texto marino,
 * títulos de sección más marcados y cabecera (nombre de la app) en marino. Contrastes medidos abajo.
 * Colores AAA/AA: texto marino #002784 sobre el fondo de la barra (#f4f9fc) 12.2:1, sobre el activo
 * (#e3f4fb) 11.46:1 y sobre el hover (#eef1f3) 11.4:1 — todos muy por encima de 4.5:1.
 */
.body-sidebar {
	--ai-sidebar-bg: #f4f9fc;
	--ai-sidebar-border: #d9e6ed;
	--ai-sidebar-active: #e3f4fb;
	--ai-sidebar-hover: #eef1f3;
	--ai-sidebar-section: #163a6e;
	background-color: var(--ai-sidebar-bg);
	border-right-color: var(--ai-sidebar-border);
	/* El core solo pinta `--sidebar-hover-color` en el hover; aquí queda neutro y no el lavado cian. */
	--sidebar-hover-color: var(--ai-sidebar-hover);
}

:root:root[data-theme="dark"] .body-sidebar {
	/* "Mantén el actual o un azul-gris profundo" (decisión del propietario): azul-gris profundo. */
	--ai-sidebar-bg: #0f2733;
	--ai-sidebar-border: #29434f;
	--ai-sidebar-active: #113645;
	--ai-sidebar-hover: #17303b;
	--ai-sidebar-section: #b8d4df;
	background-color: var(--ai-sidebar-bg);
	--sidebar-hover-color: var(--ai-sidebar-hover);
}

/* Neutrales del core que axe detectó por debajo de 4.5:1 dentro de la barra de esta app. */
.body-sidebar :is(.keyboard-shortcut, .text-secondary) {
	color: var(--ai-brand-deep) !important;
}

:root:root[data-theme="dark"]
	.body-sidebar
	:is(.keyboard-shortcut, .text-secondary) {
	color: var(--ai-brand-light) !important;
}

.body-sidebar .standard-sidebar-item {
	border-radius: 9px;
	transition: background-color 150ms ease, box-shadow 150ms ease;
}

/* Hover (no activo): fondo neutro + texto marino. El fondo ya lo da `--sidebar-hover-color` de arriba. */
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .item-anchor {
	color: var(--ai-navy);
}

:root:root[data-theme="dark"] .body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .item-anchor {
	color: var(--ai-brand-light);
}

.body-sidebar .standard-sidebar-item.active-sidebar {
	background: var(--ai-sidebar-active);
	/* Barra de 3px con el cian puro de marca; `inset` sigue el `border-radius` del ítem en vez de un
	   `border-left` cuadrado, que rompería la esquina redondeada. */
	box-shadow: inset 3px 0 0 var(--ai-brand);
}

:root:root[data-theme="dark"] .body-sidebar .standard-sidebar-item.active-sidebar {
	box-shadow: inset 3px 0 0 var(--ai-brand-light);
}

.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor {
	color: var(--ai-navy);
	font-weight: 600;
}

:root:root[data-theme="dark"] .body-sidebar .standard-sidebar-item.active-sidebar .item-anchor {
	color: var(--ai-brand-light);
}

.body-sidebar .section-break .item-anchor {
	min-height: 34px;
	color: var(--ai-sidebar-section);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.body-sidebar .nested-container {
	margin-bottom: 6px;
}

/* Cabecera de la app (icono + nombre arriba de la barra): nombre en marino semibold. */
.body-sidebar .sidebar-header .header-title {
	color: var(--ai-navy);
	font-weight: 600;
}

:root:root[data-theme="dark"] .body-sidebar .sidebar-header .header-title {
	color: var(--ai-brand-light);
}

.body-sidebar .item-anchor:focus-visible,
.body-sidebar .drop-icon:focus-visible {
	outline: 2px solid var(--ai-brand-ink) !important;
	outline-offset: 2px;
	text-decoration: none;
}

:root:root[data-theme="dark"] .body-sidebar .item-anchor:focus-visible,
:root:root[data-theme="dark"] .body-sidebar .drop-icon:focus-visible {
	outline-color: var(--ai-brand-light) !important;
}

@media (prefers-reduced-motion: reduce) {
	.body-sidebar,
	.body-sidebar * {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/*
 * Tarjetas de workspace (`.widget`/`.links-widget-box`, `frappe/public/js/frappe/widgets/`): título en
 * marino y enlaces en cian al pasar el ratón, con el mismo par ya medido arriba (--ai-brand-ink,
 * 4.87:1 sobre blanco/--card-bg). No se toca `--card-bg`, `--control-bg` ni `--border-color`.
 *
 * Especificidad: el core define el título en `.widget .widget-head .widget-label .widget-title`
 * (0,4,0, `desktop.scss:119`) y el hover del enlace en
 * `.widget.links-widget-box .link-item .link-content:hover` (0,5,0, `desktop.scss:596`). Hay que
 * igualar o superar esas cadenas exactas o el color del core gana pese a cargar este fichero después.
 */
.widget.links-widget-box .widget-head .widget-label .widget-title {
	color: var(--ai-navy);
}

:root:root[data-theme="dark"] .widget.links-widget-box .widget-head .widget-label .widget-title {
	color: var(--ai-brand-light);
}

.widget.links-widget-box .link-item .link-content:hover,
.widget.links-widget-box .link-item .link-content:focus-visible {
	color: var(--ai-brand-ink);
}

:root:root[data-theme="dark"] .widget.links-widget-box .link-item .link-content:hover,
:root:root[data-theme="dark"] .widget.links-widget-box .link-item .link-content:focus-visible {
	color: var(--ai-brand-light);
}

/*
 * Tarjeta de credencial de terminal en la ficha de `Employee` (`public/js/employee.js`, campo HTML
 * `ai_terminal_panel`, tercera columna de la sección «Terminal de planta»). Solo usa tokens del core
 * (`--card-bg`, `--border-color`, `--text-muted`, `--padding-*`) y los de marca ya definidos, así que
 * el modo oscuro sale del propio core sin duplicar valores. El QR del diálogo se dimensiona aquí para
 * que el SVG en línea (sin width/height, ver `etiquetas.qr_svg`) no se quede a tamaño cero.
 */
.ai-credencial {
	border: 1px solid var(--border-color);
	border-left: 4px solid var(--ai-brand-ink);
	border-radius: var(--border-radius-md);
	background: var(--card-bg);
	padding: var(--padding-sm) var(--padding-md);
	display: flex;
	flex-direction: column;
	gap: var(--padding-xs);
	font-size: var(--text-sm);
}

:root:root[data-theme="dark"] .ai-credencial {
	border-left-color: var(--ai-brand-light);
}

.ai-credencial__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--padding-xs);
	flex-wrap: wrap;
}

.ai-credencial__titulo {
	font-weight: 600;
	color: var(--ai-navy);
}

:root:root[data-theme="dark"] .ai-credencial__titulo {
	color: var(--ai-brand-light);
}

.ai-credencial__datos {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--padding-sm);
	row-gap: 2px;
	margin: 0;
}

.ai-credencial__datos dt {
	color: var(--text-muted);
	font-weight: 400;
	white-space: nowrap;
}

.ai-credencial__datos dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.ai-credencial__codigo {
	font-family: var(--font-stack-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.ai-credencial__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--padding-xs);
	margin-top: var(--padding-xs);
}

.ai-credencial__aviso {
	color: var(--text-muted);
	margin: 0;
}

.ai-tarjeta-qr-dialogo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--padding-sm);
	text-align: center;
}

.ai-tarjeta-qr-dialogo .ai-qr {
	width: 220px;
	height: 220px;
	background: #fff;
	padding: 8px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
}

.ai-tarjeta-qr-dialogo__codigo {
	font-family: var(--font-stack-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: var(--text-xl);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ai-brand-ink);
}

:root:root[data-theme="dark"] .ai-tarjeta-qr-dialogo__codigo {
	color: var(--ai-brand-light);
}

.ai-credencial__enlaces {
	margin: 0;
	font-size: var(--text-xs);
}

/*
 * Pestaña «Actividad en planta» de la ficha de `Employee` (campo HTML `ai_actividad_panel`). Sin cajas: una
 * franja de cifras separadas por filetes, una gráfica de barras en SVG, una línea de detalle y dos tablas de
 * líneas finas. Los accesos a la información completa son enlaces discretos, no botones. Tokens del core;
 * la tinta de marca solo en cifras y barras.
 */
.ai-actividad {
	display: flex;
	flex-direction: column;
	gap: var(--padding-lg);
	padding-top: var(--padding-xs);
}

.ai-actividad__cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--padding-md);
	flex-wrap: wrap;
}

.ai-actividad__rango {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.ai-actividad__hoy {
	margin-top: 2px;
	font-size: var(--text-md);
	font-weight: 600;
	color: var(--text-color);
}

.ai-actividad__hoy--dentro {
	color: var(--green-600, #22863a);
}

.ai-actividad__accesos {
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--padding-md);
	font-size: var(--text-sm);
}

.ai-actividad__acceso {
	color: var(--text-muted);
	text-decoration: none;
	white-space: nowrap;
}

.ai-actividad__acceso .icon {
	margin-right: 3px;
	vertical-align: -2px;
	opacity: 0.8;
}

.ai-actividad__acceso:hover,
.ai-actividad__acceso:focus-visible {
	color: var(--ai-brand-ink);
	text-decoration: none;
}

:root:root[data-theme="dark"] .ai-actividad__acceso:hover,
:root:root[data-theme="dark"] .ai-actividad__acceso:focus-visible {
	color: var(--ai-brand-light);
}

.ai-actividad__resumen {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--padding-lg);
	flex-wrap: wrap;
}

.ai-cifras {
	display: flex;
	flex-wrap: wrap;
}

.ai-cifra {
	padding: 0 var(--padding-lg) 0 0;
	margin-right: var(--padding-lg);
	border-right: 1px solid var(--border-color);
}

.ai-cifra:last-child {
	border-right: 0;
	margin-right: 0;
	padding-right: 0;
}

.ai-cifra__valor {
	font-size: var(--text-3xl);
	font-weight: 700;
	line-height: 1;
	color: var(--ai-navy);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.ai-cifra__valor small {
	margin-left: 2px;
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0;
}

:root:root[data-theme="dark"] .ai-cifra__valor {
	color: var(--ai-brand-light);
}

.ai-cifra__etiqueta {
	margin-top: 6px;
	font-size: var(--text-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ai-actividad__grafica {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.ai-barras {
	display: block;
	max-width: 100%;
	height: auto;
}

.ai-barra__planta {
	fill: var(--ai-brand-tint);
}

.ai-barra__planta--incidencia {
	fill: var(--orange-100, #fde8d3);
}

.ai-barra__taller {
	fill: var(--ai-brand-ink);
}

:root:root[data-theme="dark"] .ai-barra__planta {
	fill: var(--ai-brand-tint-dark);
}

:root:root[data-theme="dark"] .ai-barra__taller {
	fill: var(--ai-brand-light);
}

.ai-actividad__leyenda {
	font-size: var(--text-xs);
	color: var(--text-muted);
}

.ai-leyenda {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	margin: 0 3px 0 6px;
	vertical-align: -1px;
}

.ai-leyenda--planta {
	background: var(--ai-brand-tint);
	border: 1px solid var(--border-color);
}

.ai-leyenda--taller {
	background: var(--ai-brand-ink);
}

.ai-actividad__detalle {
	margin: calc(-1 * var(--padding-sm)) 0 0;
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.ai-actividad__bloque {
	border-top: 1px solid var(--border-color);
	padding-top: var(--padding-md);
}

.ai-actividad__titulo {
	margin: 0 0 var(--padding-sm);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ai-actividad__tabla-envoltorio {
	overflow-x: auto;
}

.ai-actividad__tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.ai-actividad__tabla th,
.ai-actividad__tabla td {
	padding: 7px var(--padding-sm) 7px 0;
	border-bottom: 1px solid var(--border-color);
	vertical-align: middle;
	text-align: left;
}

.ai-actividad__tabla th {
	color: var(--text-muted);
	font-weight: 500;
	white-space: nowrap;
	font-size: var(--text-xs);
}

.ai-actividad__tabla tbody tr:last-child td {
	border-bottom: 0;
}

.ai-actividad__tabla td.text-right,
.ai-actividad__tabla th.text-right {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ai-actividad__fecha,
.ai-actividad__hora {
	white-space: nowrap;
}

.ai-actividad__nota {
	margin-left: 4px;
	color: var(--text-muted);
	font-size: var(--text-xs);
}

.ai-actividad__estado {
	white-space: nowrap;
}

.ai-punto {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: 0;
}

.ai-punto--bien {
	background: var(--green-500, #2e9b5a);
}

.ai-punto--aviso {
	background: var(--orange-500, #e8833a);
}

.ai-punto--curso {
	background: var(--ai-brand-ink);
}

.ai-actividad__area {
	display: inline-block;
	min-width: 92px;
	color: var(--text-muted);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ai-actividad__enlaces {
	margin: 0;
	font-size: var(--text-sm);
}