/**
 * Sistema de UI compartido para vistas tipo "dashboard" — usado por la
 * nueva plataforma de staff (ver includes/staff-shell.php / staff-dashboard-
 * shell.php / templates/pagina-staff.php) y pensado para que el portal de
 * cliente también pueda sumarse (fases siguientes del rediseño). Se apoya
 * en los mismos tokens/clases de assets/portal.css (.ifc-card, .ifc-btn,
 * .ifc-estado-label, .ifc-badge-cancelado, .ifc-progress*) — este archivo
 * solo agrega lo que portal.css no tenía: tiles de KPI, anillo radial,
 * sidebar de navegación y filas de caso compactas para vistas de alta
 * densidad de datos.
 */

/* ==========================================================================
   Shell de página completa para staff (sidebar + topbar), paralelo a
   body.ifc-cliente-shell en portal.css pero con layout en fila (sidebar +
   contenido) en vez de header superior + columna centrada angosta —
   un dashboard necesita ancho completo, no 760px de lectura.
   ========================================================================== */

/*
 * Sistema «Placa iluminada» (2026-08-26, ver docs/design/MASTER.md).
 *
 * Los dos glows ambientales que había acá —uno ámbar anclado al 15% -10% y
 * uno azul al 90% 0%— se retiran del shell. No los emitía nada: estaban
 * anclados a las esquinas de la ventana, así que se movían con el viewport y
 * no con el contenido. Un resplandor sin origen es decoración; con origen es
 * iluminación. Ahora la luz la emite el elemento que la justifica: el bloque
 * "Hoy" (.ifc-hero-band, más abajo), mediante su propia sombra ámbar.
 *
 * El grid de circuito sí se queda —ya estaba confirmado como intencional— y
 * pasa a usar --ifc-pcb, el mismo token con el que las tarjetas dibujan su
 * retícula interna, para que lean como el mismo material.
 */
body.ifc-staff-shell {
	margin: 0;
	min-height: 100vh;
	display: flex;
	background-color: var(--ifc-ground);
	background-image:
		linear-gradient(var(--ifc-pcb) 1px, transparent 1px),
		linear-gradient(90deg, var(--ifc-pcb) 1px, transparent 1px);
	background-size: 32px 32px;
	color: var(--ifc-ink);
	font-family: var(--ifc-font-body);
}

/* Foco de teclado — antes casi no existía fuera de un puñado de <input>
   (ver .ifc-staff-search-form input, .ifc-datatable-badge-select), así que
   navegar con Tab por links/botones no mostraba ningún indicador visible.
   Un solo anillo consistente, en vez de que cada componente lo resuelva
   distinto. */
body.ifc-staff-shell a:focus-visible,
body.ifc-staff-shell button:focus-visible,
body.ifc-staff-shell input:focus-visible,
body.ifc-staff-shell select:focus-visible,
body.ifc-staff-shell textarea:focus-visible,
body.ifc-staff-shell summary:focus-visible,
body.ifc-staff-shell [tabindex]:focus-visible {
	/* Ámbar, no azul: el azul es el color de la acción y aparece como relleno
	   de botón, así que un anillo azul sobre un botón azul casi no se ve. El
	   ámbar contrasta 11.3:1 contra el fondo y no se usa para ningún otro
	   estado de control, así que el foco nunca se confunde con otra cosa. */
	outline: 2px solid var(--ifc-yellow);
	outline-offset: 2px;
	border-radius: 4px;
}

/*
 * Los tokens (espaciado, hairline, elevación, rampa neutra, radio, movimiento)
 * ya NO se declaran acá: viven en el bloque .ifc-portal de portal.css, que es
 * dependencia declarada de este archivo en los dos shells
 * (staff-shell.php:55 y portal-cliente.php:47) y por lo tanto siempre carga
 * primero. Se consolidaron ahí para que certificado-template.php, que encola
 * únicamente portal.css, también los tenga.
 *
 * Siguen siendo .ifc-portal y no body.ifc-staff-shell por el mismo motivo de
 * antes: .ifc-kpi-row / .ifc-stat-tile / .ifc-datatable-row también se usan en
 * el portal de cliente (body.ifc-cliente-shell), que comparte este archivo pero
 * no lleva la clase de shell de staff.
 *
 * Ver docs/design/MASTER.md.
 */

.ifc-staff-sidebar {
	width: 230px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1rem;
	background: color-mix(in srgb, var(--ifc-tech-blue) 55%, transparent);
	/* Antes era semi-transparente sin blur — el contenido de atrás se veía
	   "a través" en vez de esmerilado, no leía como vidrio real. La topbar
	   (más abajo, .ifc-staff-topbar) ya tenía este mismo tratamiento. */
	/* Sin backdrop-filter desde 1.6.7. La sidebar ocupa x:0–230 y el contenido
	   arranca en x:262: detrás de ella no hay más que el fondo plano de la
	   página, comprobado con elementsFromPoint. Esmerilar un fondo plano no
	   produce ninguna diferencia visible y obliga al compositor a rehacer una
	   región de ~200.000 px² en cada frame de scroll, porque además es sticky.
	   El blur se conserva solo en .ifc-staff-topbar, que sí tiene contenido
	   pasando por debajo. */
	border-right: 1px solid var(--ifc-velo-2);
	position: sticky;
	top: 0;
	height: 100vh;
	box-sizing: border-box;
}

.ifc-staff-sidebar-logo {
	display: flex;
	align-items: center;
	padding: 0 0.5rem;
	margin-bottom: 2.25rem;
}
.ifc-staff-sidebar-logo img {
	display: block;
	height: 22px;
	width: auto;
}

.ifc-staff-nav {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1;
}

.ifc-staff-nav a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.85rem;
	border-radius: 4px;
	color: var(--ifc-ink-dim);
	text-decoration: none;
	font-family: 'IFC Helvetica', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}
.ifc-staff-nav a svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.ifc-staff-nav a:hover {
	background: var(--ifc-velo-1);
	color: var(--ifc-ink);
}
.ifc-staff-nav a.active {
	background: color-mix(in srgb, var(--ifc-yellow) 12%, transparent);
	color: var(--ifc-yellow);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--ifc-yellow) 25%, transparent) inset, 0 0 16px color-mix(in srgb, var(--ifc-yellow) 12%, transparent);
}
/* Checkbox con título y explicación al lado, para decisiones que el
   técnico toma al dar de alta (avisar o no al cliente). El texto largo
   va abajo del título y no en un tooltip: es una decisión que afecta a
   otra persona, así que tiene que leerse sin buscarla. */
.ifc-check-row {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	cursor: pointer;
}
.ifc-check-row input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0.15rem 0 0;
	flex-shrink: 0;
	accent-color: var(--ifc-yellow);
}
.ifc-check-row > span {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.ifc-check-row strong {
	font-size: 0.86rem;
	color: var(--ifc-ink);
}
.ifc-check-row .ifc-field-note {
	margin: 0;
}

/* Contador de pendientes al final de un ítem de la sidebar (hoy solo
   Solicitudes, que es el único destino sin ningún otro rastro visible).
   Misma lámpara que .ifc-notif-badge de la campana: es la misma señal. */
.ifc-staff-nav-count {
	margin-left: auto;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--ifc-r-chip);
	background: var(--ifc-yellow);
	color: var(--ifc-ground);
	font-size: 0.65rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.ifc-staff-nav-footer {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--ifc-velo-2);
}

/* Etiquetas de grupo del sidebar (Principal/Operaciones/Equipo/Otros) —
   reemplazan las líneas divisorias planas que había antes (rediseño bento
   2026-08-04, referencia visual del usuario: secciones nombradas en vez de
   solo separadores). */
.ifc-staff-nav-group-label {
	display: block;
	font-family: 'IFC Helvetica', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ifc-ink-faint);
	padding: 0.9rem 0.85rem 0.35rem;
}
.ifc-staff-nav-group-label:first-child {
	padding-top: 0.2rem;
}

.ifc-staff-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.ifc-staff-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	/* El fondo de la topbar tiene que llegar de punta a punta, pero su contenido
	   se alinea con la misma columna de 1280 px que centra .ifc-staff-main: si no,
	   al centrar el contenido el buscador quedaba 138 px a la izquierda del hero y
	   la desalineación se leía como un error de maquetación. El `max()` deja el
	   padding normal cuando la ventana es más angosta que la columna. */
	padding-block: 1rem;
	padding-inline: max(2rem, calc((100% - 1280px) / 2 + 2rem));
	background: color-mix(in srgb, var(--ifc-dark-base) 85%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--ifc-velo-2);
}

.ifc-staff-search {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--ifc-velo-1);
	border: 1px solid var(--ifc-velo-2);
	border-radius: var(--ifc-r-chip);
	padding: 0.55rem 1.1rem;
	color: var(--ifc-ink-faint);
	font-size: 0.85rem;
	max-width: 320px;
	width: 100%;
}
.ifc-staff-search svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--ifc-ink-faint);
}
.ifc-staff-search input {
	background: transparent;
	border: none;
	outline: none;
	color: var(--ifc-ink);
	font-family: 'IFC Helvetica', sans-serif;
	font-size: 0.85rem;
	width: 100%;
}
.ifc-staff-search input::placeholder {
	color: var(--ifc-ink-faint);
}

.ifc-staff-user {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	white-space: nowrap;
}
.ifc-staff-avatar {
	width: 32px;
	height: 32px;
	border-radius: var(--ifc-r-chip);
	background: var(--ifc-action-blue, var(--ifc-action-blue));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 700;
	flex-shrink: 0;
}
.ifc-staff-avatar.mini {
	width: 26px;
	height: 26px;
	font-size: 0.68rem;
	background: var(--ifc-action-blue-light, var(--ifc-action-blue-light));
	color: var(--ifc-dark-base);
}
.ifc-staff-user-name {
	font-size: 0.85rem;
	color: var(--ifc-ink);
	font-weight: 700;
}
.ifc-staff-user-logout {
	font-size: 0.75rem;
	color: var(--ifc-ink-dim);
	text-decoration: underline;
}
.ifc-staff-user-logout:hover {
	color: var(--ifc-yellow);
}

.ifc-staff-topbar-right {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

/* --- Campana de notificaciones (atrasos) — visible en toda la shell de
   staff porque vive en la topbar de templates/pagina-staff.php, no en el
   contenido de una pantalla puntual. Usa <details>/<summary> (mismo
   patrón sin JS que .ifc-timeline-toggle en portal.css) en vez de un
   dropdown armado con JavaScript. --- */

.ifc-notif-bell {
	position: relative;
}
.ifc-notif-bell summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--ifc-r-chip);
	color: var(--ifc-ink-dim);
	background: var(--ifc-velo-1);
	border: 1px solid var(--ifc-velo-2);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.ifc-notif-bell summary::-webkit-details-marker {
	display: none;
}
.ifc-notif-bell summary:hover {
	color: var(--ifc-ink);
	border-color: var(--ifc-velo-4);
}
.ifc-notif-bell summary svg {
	width: 17px;
	height: 17px;
}
.ifc-notif-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--ifc-r-chip);
	background: var(--ifc-yellow);
	color: var(--ifc-ground);
	font-size: 0.62rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 8px color-mix(in srgb, var(--ifc-yellow) 60%, transparent);
}
.ifc-notif-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 320px;
	max-height: 420px;
	overflow-y: auto;
	background: var(--ifc-dark-base);
	border: 1px solid var(--ifc-velo-2);
	border-radius: 4px;
	padding: 1rem;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
	z-index: 200;
}
.ifc-notif-dropdown h4 {
	margin: 0 0 0.75rem;
	font-family: 'IFC Helvetica', sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	color: #fff;
}
/* La campana pasó de una sola sección ("Casos atrasados") a cuatro: las
   siguientes necesitan aire arriba, la primera no. */
.ifc-notif-dropdown h4:not(:first-child) {
	margin-top: 1.25rem;
}
.ifc-notif-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0.25rem;
	border-bottom: 1px solid var(--ifc-velo-1);
	color: var(--ifc-ink-2);
	text-decoration: none;
	font-size: 0.8rem;
}
.ifc-notif-item:last-child {
	border-bottom: none;
}
.ifc-notif-item:hover {
	color: var(--ifc-yellow);
}
.ifc-notif-item-dias {
	color: var(--ifc-yellow);
	font-weight: 700;
	font-size: 0.72rem;
	white-space: nowrap;
}
/* "hace 2 horas" en una novedad no es una alarma — el rojo queda solo
   para los días de atraso. */
.ifc-notif-item-cuando {
	color: var(--ifc-ink-faint);
	font-weight: 400;
}

.ifc-staff-main {
	flex: 1;
	width: 100%;
	/* 1280 y no 1400: con 1400 el centrado solo se notaba en monitores muy
	   anchos — a 1500 px de ventana el área de contenido mide menos que eso y la
	   columna volvía a ocupar todo, que es por qué seguía viéndose pegada a la
	   izquierda. A 1280 la columna se centra en pantallas normales y sigue siendo
	   ancha para las tablas densas. Por debajo de ~1510 px de ventana llena, a
	   propósito: angostarla más perjudica las tablas. */
	max-width: 1280px;
	margin-inline: auto;
	padding: 2rem 2rem 3rem;
	box-sizing: border-box;
}

@media (max-width: 900px) {
	body.ifc-staff-shell {
		flex-direction: column;
	}
	.ifc-staff-sidebar {
		width: 100%;
		height: auto;
		position: relative;
		flex-direction: row;
		align-items: center;
		overflow-x: auto;
		padding: 0.75rem 1rem;
	}
	.ifc-staff-sidebar-logo {
		display: none;
	}
	.ifc-staff-nav {
		flex-direction: row;
		flex: none;
	}
	.ifc-staff-nav a {
		flex-direction: column;
		gap: 0.3rem;
		padding: 0.5rem 0.75rem;
		font-size: 0.65rem;
	}
	.ifc-staff-nav-footer {
		margin: 0 0 0 0.5rem;
		padding: 0;
		border-top: none;
	}
	.ifc-staff-topbar {
		padding: 0.85rem 1.25rem;
	}
	.ifc-staff-main {
		padding: 1.5rem 1.25rem 2.5rem;
	}
}

/* Deja lugar a la admin bar de WP (el staff sí la ve, a diferencia del
   cliente) para que no tape la topbar sticky. */
body.admin-bar .ifc-staff-topbar {
	top: 32px;
}
@media (min-width: 901px) {
	body.admin-bar .ifc-staff-sidebar {
		height: calc(100vh - 32px);
	}
}
@media (max-width: 782px) {
	body.admin-bar .ifc-staff-topbar {
		top: 46px;
	}
}

/* ==========================================================================
   .ifc-staff — modificador sobre .ifc-portal (mismo bloque de variables/
   tokens de marca, ver portal.css) para el contenido del dashboard: anula
   el "boxed card" que .ifc-portal aplica por defecto (fondo/padding/
   min-height) porque ese tratamiento ya lo da el shell (sidebar+topbar);
   el contenido del dashboard necesita respirar a ancho completo, no vivir
   dentro de una tarjeta angosta como el portal de cliente.
   ========================================================================== */

.ifc-portal.ifc-staff {
	padding: 0;
	background: transparent;
	min-height: 0;
	border-radius: 0;
}

/* Akira queda restringida en el shell de staff a `.ifc-hero-band-value` y
   `.ifc-ring-value`, que es la lista que §4.1 autoriza. El `<h1>` la heredaba de
   `.ifc-portal h1` — pensado para el portal de cliente, que §4.1 deja explícitamente
   como está por ser de baja densidad — y sumaba un tercer uso que competía con la
   cifra del hero en la misma pantalla. Acá baja al paso `title` de §4.2 en
   Helvetica: el nombre de la vista es una etiqueta, el dato es el titular. Se le
   quita también el `text-shadow` ámbar, que era un glow sin fuente que lo emitiera
   (§5.4). El portal de cliente no se toca. */
/* El título vuelve a Akira, en tamaño chico. Decisión del usuario el 2026-08-28:
   en Helvetica Oblique, mayúsculas y 20 px se leía apretado y barato. El tamaño
   se mantiene bajo para que no compita con la cifra del hero — §4.1 pide un solo
   momento de display por vista y acá vuelven a ser dos, con el título en el papel
   claramente menor. El `text-shadow` ámbar no vuelve: era un glow sin fuente que
   lo emitiera (§5.4), y lo que estaba feo era la tipografía, no su ausencia. */
.ifc-staff h1 {
	font-family: 'IFC Akira', 'IFC Helvetica', sans-serif;
	font-size: 1.25rem;
	letter-spacing: 0;
	text-shadow: none;
}

.ifc-staff h2,
.ifc-staff h3 {
	font-family: 'IFC Helvetica', sans-serif;
	font-weight: 700;
	letter-spacing: 0;
	color: #fff;
	font-size: 0.95rem;
	margin: 0 0 var(--ifc-space-3);
}

/* El h2 de una cabecera de columna va pegado a su contador: sin margen abajo.
   Antes cada uso lo corregía con un style="margin:0" inline.
   No hay regla de margin-top acá a propósito: `.ifc-portal h2` ya trae
   `margin: 0 0 …`, así que los `style="margin-top:0"` que había en el marcado
   eran redundantes desde siempre. Verificado con getComputedStyle sobre la
   página en vivo el 2026-08-28: una regla de margin-top no cambiaba nada. */
.ifc-pipeline-col-header h2 {
	margin-bottom: 0;
}

/* Botón que cierra un formulario apilado, y metadato que separa del cuerpo
   de la tarjeta: dos separaciones que antes se escribían inline en cada uso. */
.ifc-btn.ifc-btn-stack {
	margin-top: var(--ifc-space-4);
}
.ifc-card-meta.ifc-card-meta-stack {
	margin-bottom: var(--ifc-space-3);
}

/* Un deep-link que en realidad envía un formulario (reenviar link de
   activación) tiene que ser un <button> por accesibilidad, pero no debe
   verse como botón. Antes cada uno cargaba el reset inline. */
button.ifc-staff-deep-link {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
}

/* Formulario que vive dentro de una celda, en línea con el texto. */
.ifc-inline-form {
	display: inline;
}

/* Modificadores de .ifc-form-card (la base vive en portal.css y la comparte
   el portal de cliente: no se toca ahí). `ancha` es la tarjeta de formulario
   de una pantalla completa, no la de una lista; `acentuada` le da el borde de
   color que antes se escribía como border-color hexadecimal inline. */
.ifc-form-card.ancha {
	max-width: 640px;
}
.ifc-form-card.acentuada {
	border-color: color-mix(in srgb, var(--card-accent, var(--ifc-action-blue-light)) 45%, transparent);
}

/* Nota de campo pegada al título que la introduce. */
.ifc-field-note-tight {
	margin-top: 0;
}

/* h2 que abre una sección nueva dentro de un formulario largo.
   Va calificado con .ifc-staff y con el elemento porque `.ifc-staff h2` ya fija
   `margin: 0 0 …` con especificidad (0,1,1): un `.ifc-form-seccion` pelado
   (0,1,0) pierde y la sección se queda sin separación. */
.ifc-staff h2.ifc-form-seccion {
	margin-top: var(--ifc-space-6);
}

/* Checkbox que cierra un bloque de campos. */
.ifc-check-row.ifc-check-row-stack {
	margin-top: var(--ifc-space-5);
}

/* --- Botón primario del shell de staff -------------------------------
   `.ifc-btn` (portal.css) es el CTA de marca del sitio público: relleno ámbar
   sólido más un `box-shadow` ámbar de 25 px. Dentro del panel eso rompe dos
   reglas a la vez. El relleno ámbar sólido es el tratamiento de lámpara, que
   §6 reserva para `alarma` — un botón «+ Nuevo caso» gritaba con la misma
   señal que un caso que necesita una decisión ahora. Y el glow es una fuente
   de luz sin nada que la justifique: la ficha de caso llega a tener tres
   botones, o sea tres fuentes, cuando §5.4 permite dos por vista.

   Acá se aplica la variante `amber` que §8.1 ya especifica: borde y texto
   ámbar en reposo, relleno ámbar con texto `--ifc-ground` en hover. Sigue
   siendo inequívocamente el botón primario, deja de emitir luz en reposo y
   devuelve el ámbar sólido a la lámpara.

   Escopado a `.ifc-staff`: el portal de cliente conserva el CTA de marca tal
   cual, es superficie de cara al cliente y no está en discusión acá. Por eso
   tampoco se toca `.ifc-btn-danger`, que solo se usa en portal-cliente.php.
   -------------------------------------------------------------------- */

.ifc-staff .ifc-btn {
	background: transparent;
	color: var(--ifc-yellow) !important;
	/* El contorno lo dibuja la capa con `clip-contorno-boton-fino`, que ya es el
	   anillo achaflanado. Un `border` de CSS seguiría la caja rectangular y
	   dejaría las esquinas cortadas por fuera del trazo. */
	border: none;
	box-shadow: none;
	transition: color var(--ifc-t-fast) var(--ifc-ease);
}
.ifc-staff .ifc-btn::before {
	clip-path: url(#clip-contorno-boton-fino);
	/* El trazo del path mide 2 unidades sobre un dibujo de 287 de alto, así que a
	   44 px de botón resuelve a ~0,3 px: una línea de sub-píxel que se apaga en
	   pantallas sin densidad extra.

	   Se engrosa apilando `drop-shadow` sin desenfoque sobre el alfa ya recortado:
	   cada uno reimprime la silueta desplazada un píxel, y las cuatro juntas dan un
	   anillo de ~1 px que sigue el chaflán exacto. Es la única forma que no obliga
	   a pintar el interior: un segundo relleno tendría que igualar el fondo, y
	   estos botones viven a veces sobre el ground y a veces sobre una tarjeta.

	   Sin glow: §5.4, la luz necesita una fuente que la justifique y un botón no
	   lo es. Estos drop-shadow no son luz — no tienen radio de desenfoque. */
	filter:
		drop-shadow(1px 0 0 var(--ifc-yellow))
		drop-shadow(-1px 0 0 var(--ifc-yellow))
		drop-shadow(0 1px 0 var(--ifc-yellow))
		drop-shadow(0 -1px 0 var(--ifc-yellow));
}
.ifc-staff .ifc-btn:hover {
	color: var(--ifc-ground) !important;
}
.ifc-staff .ifc-btn:hover::before {
	/* En hover el contorno se rellena: misma silueta, la forma no salta. */
	clip-path: url(#clip-boton-fino);
	filter: none;
}
/* El anillo de foco global del shell es ámbar, que sobre un botón de borde
   ámbar casi no se distingue. Solo para este botón pasa a tinta. */
body.ifc-staff-shell .ifc-btn:focus-visible {
	outline-color: var(--ifc-ink);
}

/* El bloque que enderezaba `.ifc-btn` solo para el staff se fue en 1.9.3: el
   skew se quitó en la fuente (portal.css), así que el botón ya nace recto en los
   dos shells y el override había quedado como código muerto. Lo que sí sigue
   siendo propio del staff es el tratamiento ámbar de contorno, más arriba. */

/* --- Escala de área táctil ---------------------------------------------
   §8.1 pide 44 px de alto mínimo y ningún control llegaba: nav 39, select 37,
   botón 35.6, pill 34. Los controles con espacio propio suben a 44 de verdad.
   Los enlaces que viven dentro de una fila densa no pueden crecer sin inflar
   la fila, así que reciben el área por un ::after que se extiende más allá de
   la caja visible: el objetivo táctil llega a 44 y la maquetación no se mueve.
   -------------------------------------------------------------------- */

.ifc-staff .ifc-btn,
.ifc-staff-nav a,
.ifc-filtro-pill,
.ifc-datatable-badge-select,
.ifc-staff-search,
.ifc-staff-sidebar-logo,
.ifc-skip-link,
.ifc-notif-bell summary,
.ifc-notif-item,
.ifc-activity-item {
	min-height: 44px;
}
.ifc-notif-bell summary {
	min-width: 44px;
}
.ifc-notif-item,
.ifc-activity-item {
	display: flex;
	align-items: center;
}
.ifc-staff .ifc-btn,
.ifc-filtro-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ifc-datatable-badge-select {
	/* El <select> no centra su texto con align-items; el padding vertical es lo
	   que le da la altura sin desalinear la fila. */
	padding-block: 0.6rem;
}

/* Enlaces que no pueden crecer sin mover lo que tienen al lado: el área se
   extiende con un ::after que sale de la caja. "Salir" vive pegado al nombre
   de usuario en la topbar y medía 24 × 23.5 px, corto también a lo ancho. */
.ifc-staff-deep-link,
.ifc-staff-user-logout {
	position: relative;
}
.ifc-staff-deep-link::after,
.ifc-staff-user-logout::after {
	content: '';
	position: absolute;
	inset: -10px -8px;
}
.ifc-staff-user-logout::after {
	/* El enlace mide 16.8 px de alto: hacen falta 13.6 por lado para llegar a 44. */
	inset: -14px;
}

/* "Ver" en la fila de Emisiones (includes/staff/staff-cronometro.php): hereda
   0.8rem de .ifc-sesion-row y 1.6 de line-height de .ifc-portal, ~20.5 px de
   alto — y a la derecha lo sigue, en la misma celda, el badge o el "Anular"
   de esa emisión, así que tampoco puede ganar ancho propio. Mismo ::after que
   arriba. */
.ifc-emision-ver {
	position: relative;
}
.ifc-emision-ver::after {
	/* Geometria explicita y no `inset: -14px`: la caja de linea de estos
	   enlaces mide 15 px, no 16, asi que el inset simetrico daba 43 px y se
	   quedaba a un pixel de la regla. Medido con getComputedStyle sobre
	   /staff/ en vivo, no calculado. `min-width` cubre el caso del enlace
	   angosto ("Ver" mide 19 px de ancho). */
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	min-width: 44px;
	height: 44px;
}

/* Número de caso en las filas de includes/staff/vista-tiempo.php (Sesiones
   abiertas, Correcciones pendientes, Cerradas del período): mismo problema
   que "Ver" arriba — hereda el alto de línea de .ifc-sesion-row y no puede
   crecer sin mover el resto de la celda. Mismo ::after que .ifc-emision-ver. */
.ifc-sesion-caso-link {
	position: relative;
}
.ifc-sesion-caso-link::after {
	/* Mismo criterio que .ifc-emision-ver::after: geometria explicita para
	   llegar a 44 px sin depender de la altura de la caja de linea. */
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	min-width: 44px;
	height: 44px;
}

/* --- Buscador global en pantallas angostas ---------------------------
   Medido a 375 px: el campo quedaba en 4 px de ancho. La píldora pide
   `width: 100%` pero la campana, el avatar, el nombre y "Salir" se comen la
   fila entera. Debajo de 640 la topbar envuelve y el buscador toma su propia
   línea a ancho completo, que es la única forma de que siga siendo usable sin
   esconderlo: es el único buscador que cruza vistas.
   -------------------------------------------------------------------- */

@media (max-width: 640px) {
	.ifc-staff-topbar {
		flex-wrap: wrap;
		gap: 0.75rem;
	}
	.ifc-staff-search {
		order: 2;
		max-width: none;
		flex-basis: 100%;
	}
	.ifc-staff-topbar-right {
		order: 1;
		margin-left: auto;
	}
	/* El nombre completo no cabe y no aporta: el avatar ya identifica la sesión. */
	.ifc-staff-user-name {
		display: none;
	}
}

/* --- Señal de scroll en la nav móvil ---------------------------------
   A 375 px la sidebar es una barra horizontal con 9 ítems de los que se ven
   dos, y `overflow-x: auto` no dibuja nada: no había forma de saber que había
   más. El degradado de máscara desvanece el borde derecho, que es la
   convención que dice "esto sigue". Se apaga al llegar al final vía
   `animation-timeline: scroll()` donde exista; donde no, queda fijo, que sigue
   siendo mejor que ninguna señal.
   -------------------------------------------------------------------- */

@media (max-width: 900px) {
	.ifc-staff-sidebar {
		-webkit-mask-image: var(--ifc-mask-scroll-derecha);
		mask-image: var(--ifc-mask-scroll-derecha);
	}
}

/* El kanban desplaza en horizontal por diseño: seis etapas de 220 px no entran
   en ningún ancho razonable. A 375 px se ven una de seis, y aunque la grilla
   tiene su propio `overflow-x: auto` y llegar a las demás es un gesto conocido
   en un kanban, la misma señal que lleva la nav cuesta nada acá. */
.ifc-kanban-grid {
	-webkit-mask-image: var(--ifc-mask-scroll-derecha);
	mask-image: var(--ifc-mask-scroll-derecha);
}

/* --- Compactos y separaciones que estaban inline ---------------------- */

.ifc-cronometro-activo.compacto {
	font-size: 0.95rem;
}
.ifc-deep-link-stack {
	margin-top: var(--ifc-space-3);
}
.ifc-staff-main-invitado {
	max-width: 520px;
	margin: 0 auto;
	padding-top: var(--ifc-space-8);
}

/* --- Área táctil de los tres controles que quedaban cortos ------------
   Medidos en vivo: el enlace "Salir" de la topbar a 16.8 px, el logo de la
   sidebar a 22, y el campo del buscador global a 18 — este último porque
   `.ifc-staff-search` dibuja la píldora con su propio padding mientras el
   <input> transparente de adentro conserva su alto de contenido, así que
   la mitad de lo que parece campo no era clicable. Los tres quedan en 24 px,
   el mínimo de WCAG 2.5.8 en AA. No llegan a los 44 de §8.1: eso es un
   cambio de layout aparte, anotado como pendiente.
   -------------------------------------------------------------------- */

.ifc-staff-user-logout {
	display: inline-flex;
	align-items: center;
}
/* `align-self` gana sobre el `align-items: center` del contenedor: el campo
   se estira a la caja de contenido de la píldora, así que hacer clic en
   cualquier parte de la píldora cae dentro del input. */
.ifc-staff-search input {
	align-self: stretch;
	min-height: 24px;
}

/* Etiqueta solo para lectores de pantalla. Los buscadores tenían nada más que
   `placeholder`, que no es una etiqueta: desaparece apenas se escribe y varios
   lectores no lo anuncian como nombre del campo. Recorte de 1px en vez de
   `display:none`, que sacaría el texto del árbol de accesibilidad junto con el
   render. */
.ifc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Enlace de vuelta dentro del encabezado de una ficha. */
.ifc-link-arrow-volver {
	margin-bottom: var(--ifc-space-3);
}

/* h3 que abre una sub-sección dentro de una tarjeta de formulario. Mismo
   problema de especificidad que .ifc-form-seccion: `.ifc-staff h3` ya fija
   margin y font-size. */
.ifc-staff h3.ifc-form-subseccion {
	margin-top: var(--ifc-space-6);
	font-size: 0.85rem;
}

/* Ritmo vertical de la ficha de una cuenta B2B (?cuenta=ID). */
.ifc-b2b-detalle-header {
	margin-top: var(--ifc-space-4);
}
.ifc-b2b-detalle-ajustes {
	margin: var(--ifc-space-4) 0 var(--ifc-space-5);
}
.ifc-b2b-detalle-facturas {
	margin-top: var(--ifc-space-2);
}

/* --- Encabezado de vista ---------------------------------------------
   .ifc-staff-page-header existía como clase sin ninguna regla: todas las
   vistas la acompañaban de un style="display:flex;…" inline repetido, así
   que el encabezado no era un componente sino una coincidencia. Acá pasa a
   ser el componente único que usan las diez vistas, con un slot de acciones
   a la derecha (pills de sub-vista + botón primario). El título no lleva
   Akira: la vista ya gasta su único momento de display en el valor del
   hero band (§4.1 de docs/design/MASTER.md, "Akira una sola vez por vista").
   -------------------------------------------------------------------- */

.ifc-staff-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ifc-space-4);
	margin-bottom: var(--ifc-space-5);
}
.ifc-staff-page-header h1 {
	margin: 0;
}
.ifc-staff-page-header .ifc-subtitle {
	margin: var(--ifc-space-1) 0 0;
}
.ifc-staff-page-header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ifc-space-3);
}
/* Dentro del encabezado las pills no separan del bloque siguiente: de eso
   se encarga el margin del propio encabezado. */
.ifc-staff-page-header-actions .ifc-filtro-pills {
	margin: 0;
}

/* --- Aviso en línea --------------------------------------------------
   Las confirmaciones ("Cuenta B2B creada", "Cambios guardados") venían
   pintadas como .ifc-form-card con un border-color hexadecimal inline —
   una tarjeta de formulario que no contiene ningún formulario, y el único
   color crudo que quedaba en el marcado de estas vistas. El acento entra
   por --aviso-accent, misma API que --badge-accent y --ifc-hero-accent.
   La variante .error conserva el rojo: es la excepción de usabilidad ya
   acordada (§10), no lectura de estado.
   -------------------------------------------------------------------- */

.ifc-aviso {
	--aviso-accent: var(--ifc-action-blue-light);
	border: 1px solid color-mix(in srgb, var(--aviso-accent) 40%, transparent);
	background: color-mix(in srgb, var(--aviso-accent) 10%, transparent);
	border-radius: var(--ifc-r-control);
	padding: var(--ifc-space-3) var(--ifc-space-4);
	margin-bottom: var(--ifc-space-4);
	color: var(--ifc-ink);
	font-size: 0.9rem;
	max-width: 640px;
}
.ifc-aviso p {
	margin: 0;
}
.ifc-aviso.alarma {
	--aviso-accent: var(--ifc-yellow);
}
.ifc-aviso.error {
	--aviso-accent: #f87171;
}

/* Celda de dato con lectura de estado (margen negativo, saldo excedido).
   Antes iba en rojo inline; el rojo acá no es una convención de usabilidad
   sino estado, y el estado en este sistema se lee en ámbar (§6). */
.ifc-valor-negativo {
	color: var(--ifc-yellow);
	font-weight: 700;
}

/* Enlace que ocupa una celda o una tarjeta entera y no debe leerse como
   enlace: hereda color y no subraya. Reemplaza el
   style="text-decoration:none;color:inherit" repetido en el marcado. */
.ifc-cell-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* --- Franja "Hoy" (hero band) --- */

/* Tarjeta "hero" con relleno degradado — antes era vidrio plano + una
   línea fina arriba; ahora lleva un degradado radial real del color de
   acento (mismo tratamiento que la tarjeta destacada de las referencias
   del usuario, con los colores de marca IFC en vez de rojo/naranja). El
   color lo sigue eligiendo la lógica de negocio de más arriba
   (--ifc-hero-accent: rojo si hay atrasados, azul si no). */
.ifc-hero-band {
	position: relative;
	background:
		radial-gradient(ellipse 480px 260px at 15% 0%, color-mix(in srgb, var(--ifc-hero-accent, var(--ifc-yellow)) 35%, transparent), transparent 70%),
		var(--ifc-velo-1);
	border: 1px solid color-mix(in srgb, var(--ifc-hero-accent, var(--ifc-yellow)) 30%, var(--ifc-velo-2));
	/* Sin backdrop-filter: el hero está en flujo normal y todo lo que tiene
	   detrás (.ifc-portal, .ifc-staff-main, .ifc-staff-body) es transparente
	   hasta el fondo plano de la página. El blur no cambiaba un píxel. */
	border-radius: 4px;
	padding: var(--ifc-space-6) var(--ifc-space-7);
	margin-bottom: var(--ifc-space-5);
	overflow: hidden;
	/* La fuente de luz de la vista. El shell ya no lleva glow ambiental: lo
	   emite este bloque, que es el que lo justifica. La sombra ámbar de radio
	   grande es literalmente "esta tarjeta ilumina lo que tiene alrededor", y
	   no la clipea el overflow: hidden de arriba porque es sombra exterior,
	   no un hijo posicionado. Máximo dos fuentes por vista. */
	box-shadow:
		var(--ifc-elevation-3),
		0 0 90px -20px color-mix(in srgb, var(--ifc-hero-accent, var(--ifc-yellow)) 55%, transparent);
}
.ifc-hero-band-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ifc-ink-dim);
	margin-bottom: 0.5rem;
}
.ifc-hero-band-value {
	font-family: 'IFC Akira', 'IFC Helvetica', sans-serif;
	font-style: italic;
	font-size: clamp(2.4rem, 4vw, 3.2rem);
	color: #fff;
	line-height: 1;
	margin-bottom: 0.6rem;
}
.ifc-hero-band-context {
	color: var(--ifc-ink-2);
	font-size: 0.9rem;
}

/* --- KPI stat tiles --- */

.ifc-kpi-row {
	display: flex;
	gap: var(--ifc-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--ifc-space-3);
}
.ifc-kpi-row.secondary {
	margin-bottom: var(--ifc-space-6);
}
.ifc-kpi-row.secondary .ifc-stat-tile {
	flex: 1 1 160px;
	padding: var(--ifc-space-3) var(--ifc-space-4);
}
.ifc-kpi-row.secondary .ifc-stat-tile-value {
	font-size: 1.4rem;
}

.ifc-stat-tile {
	position: relative;
	display: block;
	flex: 1 1 210px;
	/* Cada tarjeta es un trozo de placa: la retícula de 32 px vive adentro,
	   con su propio origen, en vez de asomar por detrás como papel tapiz. */
	background-color: var(--ifc-surface);
	background-image:
		linear-gradient(var(--ifc-pcb) 1px, transparent 1px),
		linear-gradient(90deg, var(--ifc-pcb) 1px, transparent 1px);
	background-size: 32px 32px;
	border: var(--ifc-hairline);
	border-radius: var(--ifc-r-container);
	padding: var(--ifc-space-4) var(--ifc-space-5);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	box-shadow: var(--ifc-elevation-1);
	transition:
		box-shadow var(--ifc-t-fast) var(--ifc-ease),
		border-color var(--ifc-t-fast) var(--ifc-ease),
		background-color var(--ifc-t-fast) var(--ifc-ease);
}
/* El hover sube de elevación y enciende el borde. No desplaza ni escala:
   mover una fila bajo el cursor obliga a reencontrarla. */
.ifc-stat-tile:hover {
	background-color: var(--ifc-surface-3);
	box-shadow: var(--ifc-elevation-2);
	border-color: var(--ifc-yellow-line);
}

/* Hover glow para las tarjetas del dashboard de staff (ring/pipeline) —
   escopado bajo .ifc-staff para no tocar .ifc-card del portal de cliente,
   que todavía no tiene este tratamiento (fase 2 del rediseño). */
.ifc-staff .ifc-card {
	transition:
		box-shadow var(--ifc-t-fast) var(--ifc-ease),
		border-color var(--ifc-t-fast) var(--ifc-ease);
}
.ifc-staff .ifc-card:hover {
	box-shadow: var(--ifc-elevation-2);
	border-color: var(--ifc-yellow-line);
}
.ifc-staff .ifc-caso-row {
	transition: background var(--ifc-t-fast) var(--ifc-ease);
}
.ifc-staff .ifc-caso-row:hover {
	background: var(--ifc-surface-3);
}

#ifc-pipeline,
#ifc-atrasados,
#ifc-listos {
	scroll-margin-top: 100px;
}
/* La barra de acento de 2 px que iba arriba de cada tile se retiró: eran ocho
   por vista, en cinco colores distintos, y ninguna codificaba nada que el
   número y su etiqueta no dijeran ya. El acento queda solo en el chip del
   ícono, que sí distingue el tono del estado. */

/*
 * Lámpara de aviso — reemplaza el pulso que este tile tenía desde el pase de
 * 2026-07-30 (retirada aprobada el 2026-08-26, ver docs/design/MASTER.md §7.2).
 *
 * El pulso era movimiento sin información: se repetía idéntico con el contador
 * en 1 que en 30, y competía por atención de forma permanente en una pantalla
 * que el staff mira ocho horas seguidas. La lámpara encendida dice lo mismo sin
 * moverse, y al ser el único elemento de ámbar sólido de la vista sigue siendo
 * lo primero que se ve. La clase conserva el nombre para no tocar los
 * llamadores; ya no anima nada, así que tampoco necesita bloque de
 * prefers-reduced-motion.
 */
.ifc-stat-tile.atrasado-pulse {
	background-color: var(--ifc-yellow);
	border-color: var(--ifc-yellow);
	color: var(--ifc-ground);
	--ifc-stat-accent: var(--ifc-ground);
}
.ifc-stat-tile.atrasado-pulse .ifc-stat-tile-value,
.ifc-stat-tile.atrasado-pulse .ifc-stat-tile-label,
.ifc-stat-tile.atrasado-pulse .ifc-stat-tile-sub {
	color: var(--ifc-ground);
}

.ifc-stat-tile-icon {
	width: 38px;
	height: 38px;
	border-radius: var(--ifc-r-chip);
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--ifc-stat-accent, var(--ifc-yellow)) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--ifc-stat-accent, var(--ifc-yellow)) 35%, transparent);
	color: var(--ifc-stat-accent, var(--ifc-yellow));
	margin-bottom: 0.85rem;
}
.ifc-stat-tile-icon svg {
	width: 18px;
	height: 18px;
}

.ifc-stat-tile-value {
	font-family: 'IFC Helvetica', sans-serif;
	font-weight: 700;
	font-size: 1.7rem;
	color: #fff;
	line-height: 1;
	margin-bottom: 0.35rem;
}

.ifc-stat-tile-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ifc-ink-dim);
}

/* --- Anillo radial (conic-gradient, sin librería de gráficos) ---
   @property registra --pct como <number> para que sea animable: sin esto
   una custom property es opaca para el motor de transiciones (no sabe
   interpolar el valor) y el conic-gradient saltaría directo al valor
   final sin transición. El JS de staff-dashboard-shell.php arranca el
   elemento en --pct:0 (vía data-pct) y lo sube al valor real un frame
   después para que la transición de abajo sí se dispare. */
@property --pct {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

/* Layout horizontal (anillo + columna de info) en vez de todo apilado y
   centrado — así la tarjeta usa el ancho disponible en vez de dejarlo
   vacío a los lados cuando la fila la estira para igualar la tarjeta
   vecina. .ifc-ring-info acepta tanto un texto simple (Dashboard) como
   una lista de sub-datos (.ifc-ring-stat-row, ej. límite/usado/
   disponible en el detalle de cuenta B2B). */
.ifc-ring-card {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.ifc-ring-info {
	flex: 1;
	min-width: 0;
	text-align: left;
}
.ifc-ring-info h2 {
	margin-bottom: 0.5rem;
}

.ifc-ring-stat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--ifc-velo-1);
	font-size: 0.82rem;
	color: var(--ifc-ink-2);
}
.ifc-ring-stat-row:last-child {
	border-bottom: none;
}
.ifc-ring-stat-row-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.ifc-ring-stat-dot {
	width: 8px;
	height: 8px;
	/* 2px y no el token de 4: el navegador recorta el radio a la mitad de la caja,
	   así que en un punto de 8px los 4px vuelven a dar un círculo perfecto. 2 sobre
	   8 guarda la misma proporción de esquina que 4 sobre 16. */
	border-radius: 2px;
	flex-shrink: 0;
	/* El color entra por --dot-accent, no por un background inline: misma
	   API que --badge-accent y --ifc-hero-accent. */
	background: var(--dot-accent, var(--ifc-ink-dim));
}
.ifc-ring-stat-row-value {
	/* Igual que --dot-accent: el estado (saldo excedido) entra por custom
	   property, no por un color escrito en el marcado. */
	color: var(--valor-accent, #fff);
	font-weight: 700;
	white-space: nowrap;
}

.ifc-ring {
	--pct: 0;
	position: relative;
	width: 130px;
	height: 130px;
	flex-shrink: 0;
	border-radius: 50%;
	background: conic-gradient(
		var(--ifc-yellow, var(--ifc-yellow)) calc(var(--pct) * 1%),
		var(--ifc-velo-2) 0
	);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: --pct 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 560px) {
	.ifc-ring-card {
		flex-direction: column;
		text-align: center;
	}
	.ifc-ring-info {
		text-align: center;
	}
	.ifc-ring-stat-row {
		justify-content: center;
		gap: 0.5rem;
	}
}
.ifc-ring::before {
	content: '';
	position: absolute;
	inset: 12px;
	border-radius: 50%;
	background: var(--ifc-dark-base);
}
.ifc-ring-value {
	position: relative;
	font-family: 'IFC Akira', 'IFC Helvetica', sans-serif;
	font-style: italic;
	font-size: 1.6rem;
	color: #fff;
}

/* --- Columnas de pipeline (En curso / Listos para despachar) --- */

/* `minmax(min(360px, 100%), 1fr)` y no `minmax(360px, 1fr)`: con el mínimo fijo,
   una columna de 360 px dentro de un contenedor de 320 desbordaba la página a
   375 px de viewport. El `min()` deja que la pista baje al ancho disponible.
   Detectado midiendo el Dashboard a 375; el audit anterior había medido
   Solicitudes, que no tiene esta grilla. */
.ifc-pipeline-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.ifc-pipeline-col-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.9rem;
}
.ifc-pipeline-col-count {
	font-size: 0.72rem;
	color: var(--ifc-ink-dim);
	background: var(--ifc-velo-1);
	border-radius: var(--ifc-r-chip);
	padding: 0.15rem 0.6rem;
}

.ifc-caso-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0.6rem;
	border-bottom: 1px solid var(--ifc-velo-1);
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
}
.ifc-caso-row:last-child {
	border-bottom: none;
}
.ifc-caso-row:hover {
	background: var(--ifc-velo-1);
}
.ifc-caso-row.atrasado {
	background: color-mix(in srgb, var(--ifc-yellow) 7%, transparent);
}
.ifc-caso-row.atrasado:hover {
	background: rgba(239, 68, 68, 0.1);
}

.ifc-caso-row-main {
	min-width: 0;
	flex: 1 1 auto;
}
.ifc-caso-row-main.with-avatar {
	display: flex;
	align-items: center;
	gap: var(--ifc-space-2);
}
.ifc-caso-row-main.with-avatar > div {
	min-width: 0;
}
.ifc-caso-row-numero {
	font-family: 'IFC Helvetica', sans-serif;
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--ifc-action-blue-light, var(--ifc-action-blue-light));
	margin-bottom: 0.15rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ifc-caso-row-meta {
	font-size: 0.78rem;
	color: var(--ifc-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ifc-caso-row-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.3rem;
	flex-shrink: 0;
	max-width: 44%;
	text-align: right;
}
.ifc-caso-row-side .ifc-estado-label {
	white-space: normal;
	line-height: 1.3;
}
.ifc-caso-row-dias {
	font-size: 0.72rem;
	color: var(--ifc-ink-dim);
	white-space: nowrap;
}
.ifc-caso-row-dias.atrasado {
	color: var(--ifc-yellow);
	font-weight: 700;
}

.ifc-empty-mini {
	color: var(--ifc-ink-faint);
	font-size: 0.82rem;
	font-style: italic;
	padding: 0.5rem 0.6rem;
}

/* --- Datatable (Casos / Cuentas B2B / Reportes) — tabla real con
   columnas alineadas, no las mini-filas de .ifc-caso-row del dashboard
   (esas son para listas cortas dentro de una tarjeta; esto es para vistas
   completas con más columnas). El wrapper con overflow-x es la salida
   simple para mobile: scroll horizontal en vez de colapsar columnas. --- */

/*
 * Superficie de dato: plana y de esquina recta. La elevación codifica
 * interactividad, y una tabla no se toca — se lee. El radio hace lo propio: si
 * es dato denso, esquina recta, así la forma dice qué tipo de cosa es antes de
 * que se lea el contenido (docs/design/MASTER.md §5.2 y §5.3).
 */
.ifc-datatable-wrap {
	overflow-x: auto;
	background: var(--ifc-surface-2);
	border: var(--ifc-hairline);
	border-radius: var(--ifc-r-data);
	box-shadow: var(--ifc-elevation-0);
}
.ifc-datatable-row {
	display: grid;
	grid-template-columns: var(--ifc-datatable-cols, 110px 1.3fr 1.3fr 160px 90px 90px);
	gap: var(--ifc-space-4);
	align-items: center;
	padding: var(--ifc-space-3) var(--ifc-space-5);
	border-bottom: var(--ifc-hairline);
	text-decoration: none;
	color: inherit;
	font-size: 0.8rem;
	min-width: 640px;
	transition: background var(--ifc-t-fast) var(--ifc-ease);
}
.ifc-datatable-row:last-child {
	border-bottom: none;
}
a.ifc-datatable-row:hover {
	background: var(--ifc-velo-1);
}
.ifc-datatable-row.atrasado {
	background: color-mix(in srgb, var(--ifc-yellow) 7%, transparent);
}
.ifc-datatable-header {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ifc-ink-dim);
	font-weight: 700;
	background: var(--ifc-velo-1);
}
.ifc-datatable-numero {
	color: var(--ifc-action-blue-light, var(--ifc-action-blue-light));
	font-weight: 700;
}
/* Punto + chip tenue en vez de relleno sólido saturado (rediseño bento
   2026-08-04 — feedback directo del usuario: el relleno plano blanco-
   sobre-color se veía feo). Mismo patrón que .ifc-estado-label/
   .ifc-badge-cancelado, que ya usaban fondo tenue + borde + texto del
   color en vez de relleno sólido. El color lo sigue eligiendo la misma
   lógica de negocio de siempre (ifc_backoffice_color_estado_caso() etc.),
   solo cambia cómo se aplica: --badge-accent en vez de background directo. */
.ifc-datatable-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	justify-self: start;
	align-self: center;
	font-size: 0.68rem;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.25rem 0.7rem;
	border-radius: var(--ifc-r-chip);
	/* Tres variables en vez de una, con los valores por defecto de siempre:
	   un badge que solo setea --badge-accent se ve exactamente como antes.
	   --badge-fill y --badge-ink existen para el tratamiento de "lámpara de
	   aviso" (relleno sólido, tinta oscura), que no es un color nuevo sino el
	   mismo ámbar invertido — ver docs/design/MASTER.md §6. */
	background: color-mix(in srgb, var(--badge-accent, var(--ifc-ink-dim)) var(--badge-fill, 15%), transparent);
	border: 1px solid color-mix(in srgb, var(--badge-accent, var(--ifc-ink-dim)) var(--badge-edge, 35%), transparent);
	color: var(--badge-ink, color-mix(in srgb, var(--badge-accent, var(--ifc-ink-dim)) 80%, white));
	white-space: normal;
	line-height: 1.3;
	max-width: fit-content;
}
.ifc-datatable-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	/* 2px y no el token de 4: el navegador recorta el radio a la mitad de la caja,
	   así que en un punto de 8px los 4px vuelven a dar un círculo perfecto. 2 sobre
	   8 guarda la misma proporción de esquina que 4 sobre 16. */
	border-radius: 2px;
	/* En la lámpara el punto se invierte junto con la tinta, así el chip se
	   distingue del tono "en curso" por forma y no solo por color. */
	background: var(--badge-ink, var(--badge-accent, var(--ifc-ink-dim)));
	flex-shrink: 0;
}

/* Días de un caso atrasado. Antes era rojo de Tailwind (#f87171); ahora es
   ámbar de marca, que además da 11.3:1 sobre el fondo contra los 5.0:1 que
   daba el rojo. La señal de "atrasado" la refuerza el chip de lámpara de la
   misma fila, no el color de esta cifra sola. */
.ifc-datatable-dias.atrasado {
	color: var(--ifc-yellow);
	font-weight: 700;
}

/* Selector rápido de estado (columna "Estado" de /staff → Casos) — mismo
   aspecto visual que la insignia de solo-lectura que reemplazó
   (.ifc-datatable-badge), pero interactivo. El <form> que lo envuelve no
   debe alterar el layout de grilla de la fila. */
.ifc-datatable-estado-form {
	display: contents;
}
/* Mismo patrón punto+chip tenue que .ifc-datatable-badge de arriba — un
   <select> no admite ::before para el punto, así que se resuelve solo con
   fondo/borde/texto tenues (sin el punto), sigue siendo consistente. */
.ifc-datatable-badge-select {
	justify-self: start;
	align-self: center;
	font-size: 0.68rem;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.25rem 1.6rem 0.25rem 0.7rem;
	border-radius: var(--ifc-r-chip);
	/* Mismas tres variables que .ifc-datatable-badge, para que el select de
	   estado pueda encender la lámpara igual que la insignia de solo lectura. */
	border: 1px solid color-mix(in srgb, var(--badge-accent, var(--ifc-ink-dim)) var(--badge-edge, 35%), transparent);
	background-color: color-mix(in srgb, var(--badge-accent, var(--ifc-ink-dim)) var(--badge-fill, 15%), transparent);
	color: var(--badge-ink, color-mix(in srgb, var(--badge-accent, var(--ifc-ink-dim)) 80%, white));
	max-width: fit-content;
	cursor: pointer;
	font-family: var(--ifc-font-body);
	appearance: none;
	/* El chevron es un data-URI, así que su color va URL-encodeado (%23 = #) y
	   no lo alcanza ninguna variable CSS: es el único hex que queda escrito a
	   mano en el archivo, y es --ifc-ink-dim. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a8' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: 0.6rem;
}
/* El foco es ámbar en todo el sistema, no blanco: un anillo por componente
   distinto era justamente lo que hacía que la navegación por teclado se
   sintiera improvisada. */
.ifc-datatable-badge-select:focus-visible {
	outline: 2px solid var(--ifc-yellow);
	outline-offset: 2px;
}
.ifc-datatable-badge-select option {
	background: var(--ifc-dark-base);
	color: var(--ifc-ink);
}
.ifc-datatable-row-clickable {
	cursor: pointer;
}
.ifc-datatable-row-clickable:hover {
	background: var(--ifc-velo-1);
}

/* Tag neutro para metadatos de fila (país, quién lo ingresó/creó) — mismo
   tamaño de píldora que .ifc-estado-label/.ifc-badge-cancelado en
   portal.css pero sin color de estado, para no competir visualmente con
   los badges de estado que sí necesitan llamar la atención. */
.ifc-tag-mini {
	/* El acento entra por --tag-accent, como en el resto del sistema; sin él
	   la etiqueta es neutra. El gris de fondo y borde salía de rgba(148,163,184)
	   — un slate de Tailwind, que la regla 2 prohíbe: ahora se deriva de
	   --ifc-ink-dim, que sí viene del tech-blue de marca. */
	display: inline-block;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tag-accent, var(--ifc-ink-dim));
	background: color-mix(in srgb, var(--tag-accent, var(--ifc-ink-dim)) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--tag-accent, var(--ifc-ink-dim)) 32%, transparent);
	border-radius: var(--ifc-r-chip);
	padding: 0.15rem 0.6rem;
}

.ifc-staff-search-form {
	display: flex;
	margin-bottom: 1.25rem;
}
.ifc-staff-search-form input[type="text"] {
	width: 100%;
	max-width: 420px;
	border-radius: 4px;
	border: 1px solid var(--ifc-velo-2);
	background: var(--ifc-velo-1);
	padding: 0.6rem 1rem;
	color: #fff;
	font-family: 'IFC Helvetica', sans-serif;
	font-size: 0.85rem;
}
.ifc-staff-search-form input[type="text"]:focus {
	outline: none;
	border-color: var(--ifc-action-blue, var(--ifc-action-blue));
}

/* --- Kanban (Prospectos B2B) — de solo lectura: cada tarjeta enlaza al
   panel completo para cambiar de etapa/editar, ver "Scope boundary" del
   plan de rediseño (esto es monitoreo, no reemplazo del editor). --- */

.ifc-kanban-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(220px, 1fr));
	gap: var(--ifc-space-4);
	overflow-x: auto;
	padding-bottom: var(--ifc-space-2);
}
.ifc-kanban-col {
	position: relative;
	background: var(--ifc-velo-1);
	border: 1px solid var(--ifc-velo-2);
	border-radius: 4px;
	padding: var(--ifc-space-3);
	min-width: 220px;
}
.ifc-kanban-col::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0.875rem;
	right: 0.875rem;
	height: 2px;
	background: var(--ifc-etapa-accent, var(--ifc-ink-dim));
	opacity: 0.7;
	border-radius: 4px;
}
.ifc-kanban-card-ghost {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--ifc-velo-3);
	border-radius: 4px;
	padding: 0.85rem 0.95rem;
	color: var(--ifc-ink-faint);
	font-size: 0.78rem;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.ifc-kanban-card-ghost:hover {
	border-color: color-mix(in srgb, var(--ifc-yellow) 50%, transparent);
	color: var(--ifc-yellow, var(--ifc-yellow));
}
.ifc-kanban-card-etapa-chip {
	display: inline-block;
	margin-top: 0.35rem;
	font-size: 0.68rem;
	color: var(--ifc-ink-dim);
}
.ifc-kanban-card {
	display: block;
	background: var(--ifc-velo-1);
	border: 1px solid var(--ifc-velo-2);
	border-radius: 4px;
	padding: var(--ifc-space-3);
	margin-bottom: var(--ifc-space-2);
	text-decoration: none;
	color: inherit;
	box-shadow: var(--ifc-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.18));
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ifc-kanban-card:hover {
	transform: translateY(-2px);
	border-color: var(--ifc-velo-4);
	box-shadow: var(--ifc-elevation-2, 0 8px 20px rgba(0, 0, 0, 0.28));
}
.ifc-kanban-card:last-child {
	margin-bottom: 0;
}
.ifc-kanban-card-empresa {
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: 0.2rem;
}
.ifc-kanban-card-contacto {
	color: var(--ifc-ink-dim);
	font-size: 0.75rem;
	margin-bottom: 0.5rem;
}
.ifc-kanban-card-valor {
	color: var(--ifc-yellow, var(--ifc-yellow));
	font-size: 0.8rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
}
.ifc-kanban-card-accion {
	color: var(--ifc-ink-2);
	font-size: 0.72rem;
	border-top: 1px solid var(--ifc-velo-2);
	padding-top: 0.45rem;
	margin-top: 0.3rem;
}
.ifc-kanban-card-accion.vencida {
	color: var(--ifc-yellow);
	font-weight: 700;
}
.ifc-kanban-card > form,
.ifc-kanban-card > a.ifc-btn-mini {
	margin-top: 0.6rem;
	display: block;
}
.ifc-kanban-card > form button.ifc-btn-mini {
	width: 100%;
	cursor: pointer;
}

/* Kanban de Casos (Fase 2 gestión de taller) — drag-and-drop de mouse en
   escritorio, capa extra sobre el <select> de estado que ya trae la
   tarjeta (ver ifc_backoffice_render_script_kanban_drag(), staff-shell.php).
   Mismos componentes .ifc-kanban-* de arriba, sin duplicar CSS. */
.ifc-kanban-card[draggable] {
	cursor: grab;
}
.ifc-kanban-card.arrastrando {
	opacity: 0.4;
}
.ifc-kanban-card.atrasado {
	border-left: 2px solid var(--ifc-yellow);
}
.ifc-kanban-col.drop-activo {
	border-color: var(--ifc-action-blue, var(--ifc-action-blue));
	background: color-mix(in srgb, var(--ifc-action-blue) 8%, transparent);
}

.ifc-section-gap {
	margin-bottom: var(--ifc-space-6);
	padding-top: var(--ifc-space-6);
	border-top: var(--ifc-hairline);
}
/* .ifc-card ya trae su propio border de 1px en los 4 lados; sin esto el
   border-top del hairline (más tenue) pisa solo el borde superior de la
   tarjeta y ese lado queda visualmente más apagado que los otros tres. */
.ifc-card.ifc-section-gap {
	border-top: 1px solid var(--ifc-velo-2);
}

.ifc-ajustes-b2b-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
	gap: 1rem;
}
.ifc-ajustes-b2b-grid label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ifc-ink-dim);
	margin-bottom: 0.3rem;
}
.ifc-ajustes-b2b-grid select,
.ifc-ajustes-b2b-grid input {
	width: 100%;
	border-radius: 4px;
	border: 1px solid var(--ifc-velo-2);
	background: var(--ifc-velo-1);
	padding: 0.5rem 0.7rem;
	color: #fff;
	font-family: 'IFC Helvetica', sans-serif;
	font-size: 0.85rem;
}

/* --- Gráfico de línea (casos ingresados por semana) — hand-rolled SVG,
   sin librería de gráficos (mismo criterio ya establecido: "No new JS
   dependency"). Reemplaza el gráfico de barras anterior (rediseño bento
   2026-08-04, referencia visual del usuario). Ver
   ifc_backoffice_render_grafico_semanal() en staff-dashboard-shell.php y
   ifc_backoffice_render_script_linechart() en staff-shell.php. --- */

.ifc-linechart-wrap {
	position: relative;
	margin: 0.5rem 0 0.25rem;
}
.ifc-linechart {
	display: block;
	width: 100%;
	height: 160px;
	overflow: visible;
}
.ifc-linechart-line {
	stroke: var(--ifc-yellow, var(--ifc-yellow));
	stroke-width: 2.5;
}
.ifc-linechart-point {
	fill: var(--ifc-ground);
	stroke: var(--ifc-yellow, var(--ifc-yellow));
	stroke-width: 2;
	transition: r 0.15s ease;
}
.ifc-linechart-point.activo {
	r: 6;
}
.ifc-linechart-hit {
	fill: transparent;
	cursor: pointer;
}
.ifc-linechart-tooltip {
	position: absolute;
	transform: translate(-50%, calc(-100% - 10px));
	background: var(--ifc-surface);
	border: 1px solid var(--ifc-hairline-lit-color);
	border-radius: var(--ifc-r-control);
	padding: 0.4rem 0.7rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: var(--ifc-elevation-2, 0 8px 20px rgba(0, 0, 0, 0.28));
	z-index: 5;
}
/*
 * Instrumentación del gráfico (2026-08-26) — retícula de divisiones, línea de
 * media y cursor. Se toma la forma del instrumento, no su disfraz: no hay
 * scanlines, ni curvatura, ni glow de fósforo (ver docs/design/MASTER.md §8.8).
 */
.ifc-linechart-grat line {
	stroke: var(--ifc-hairline-color);
	stroke-width: 1;
}

/* Referencia = media del período, no una "capacidad" inventada. */
.ifc-linechart-media {
	stroke: var(--ifc-yellow);
	stroke-width: 1;
	stroke-dasharray: 5 4;
	opacity: 0.45;
}

/*
 * El cursor sigue al puntero SIN transición, a propósito: un cursor de
 * instrumento no tiene inercia. Es la única parte de la interfaz donde 0 ms es
 * la respuesta correcta y no un descuido.
 */
.ifc-linechart-cursor {
	stroke: var(--ifc-action-blue-light);
	stroke-width: 1;
	opacity: 0.8;
	transition: none;
	pointer-events: none;
}
.ifc-linechart-cursor[hidden] {
	display: none;
}

.ifc-linechart-readout {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ifc-space-4);
	margin-top: var(--ifc-space-3);
	padding-top: var(--ifc-space-2);
	border-top: var(--ifc-hairline);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ifc-ink-faint);
}
.ifc-linechart-readout b {
	color: var(--ifc-yellow);
	font-weight: 700;
}

.ifc-linechart-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 0.35rem;
}
.ifc-linechart-labels span {
	font-size: 0.65rem;
	color: var(--ifc-ink-dim);
}

/* --- Feed de actividad reciente --- */

.ifc-activity-item {
	display: flex;
	gap: 0.75rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--ifc-velo-1);
	font-size: 0.8rem;
}
.ifc-activity-item:last-child {
	border-bottom: none;
}
.ifc-activity-dot {
	width: 8px;
	height: 8px;
	/* 2px y no el token de 4: el navegador recorta el radio a la mitad de la caja,
	   así que en un punto de 8px los 4px vuelven a dar un círculo perfecto. 2 sobre
	   8 guarda la misma proporción de esquina que 4 sobre 16. */
	border-radius: 2px;
	background: var(--ifc-action-blue, var(--ifc-action-blue));
	flex-shrink: 0;
	margin-top: 0.4rem;
}
.ifc-activity-text {
	color: var(--ifc-ink-2);
}
.ifc-activity-text strong {
	color: #fff;
}
.ifc-activity-time {
	color: var(--ifc-ink-faint);
	font-size: 0.72rem;
	white-space: nowrap;
	margin-left: auto;
	padding-left: 0.5rem;
}

/* --- Novedades de la empresa (anuncio_empresa) --- */

.ifc-anuncios-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 1.5rem;
}
.ifc-anuncio-card.fijado {
	border-color: color-mix(in srgb, var(--ifc-yellow) 40%, transparent);
}
/* Novedades no tiene hero band: su fuente de luz es la novedad fijada, que es
   literalmente lo que la empresa quiere que se lea ahora. El glow va solo en la
   primera — las fijadas se ordenan primero en
   ifc_backoffice_render_staff_vista_novedades() — para no pasar del máximo de
   dos fuentes por vista (§5.4). Las demás fijadas conservan el borde ámbar: un
   borde no es una fuente. */
.ifc-anuncio-card.fijado:first-child {
	box-shadow:
		var(--ifc-elevation-2),
		0 0 60px -22px color-mix(in srgb, var(--ifc-yellow) 55%, transparent);
}
/* Sin esta regla el hover de la tarjeta se pierde: .ifc-anuncio-card.fijado
   :first-child tiene más especificidad que .ifc-staff .ifc-card:hover y le
   ganaría también en hover, dejando la única tarjeta iluminada como la única
   que no responde al puntero. La elevación sube, el glow no cambia: la fuente
   de luz no se mueve porque pases el mouse por encima. */
.ifc-staff .ifc-anuncio-card.fijado:first-child:hover {
	box-shadow:
		var(--ifc-elevation-3),
		0 0 60px -22px color-mix(in srgb, var(--ifc-yellow) 55%, transparent);
}
.ifc-anuncio-card .ifc-card-header {
	justify-content: space-between;
}
.ifc-anuncio-contenido {
	color: var(--ifc-ink-2);
	font-size: 0.85rem;
	line-height: 1.6;
}
.ifc-anuncio-contenido p {
	margin: 0 0 0.75rem;
}
.ifc-anuncio-contenido p:last-child {
	margin-bottom: 0;
}
.ifc-anuncio-contenido ul,
.ifc-anuncio-contenido ol {
	margin: 0 0 0.75rem;
	padding-left: 1.25rem;
}
.ifc-anuncio-contenido a {
	color: var(--ifc-action-blue-light, var(--ifc-action-blue-light));
}

/* --- Enlace "editar en el panel completo" (deep-link a wp-admin) --- */

.ifc-staff-deep-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.72rem;
	/* Medido en vivo: 16-18 px de alto. Debajo de los 24 px que pide WCAG 2.5.8
	   en AA, y "Convertir en caso" es una acción de trabajo real que se toca en
	   tablet. El padding va negativo en el eje horizontal para que el área crezca
	   sin correr el texto de su columna. */
	min-height: 24px;
	padding-block: 4px;
	/* --ifc-ink-faint da 4.6:1 sobre --ifc-ground, pero este enlace casi nunca
	   vive sobre el fondo pelado: dentro de una fila de datatable o de una
	   tarjeta el fondo sube y el contraste cae a 3.95–4.15:1, por debajo de AA,
	   y a 11.5 px no aplica la excepción de texto grande. Medido en vivo el
	   2026-08-28 sobre /staff/?ifc_staff_view=solicitudes. Con --ifc-ink-dim
	   queda en 5.9–6.5:1 en los mismos sitios. */
	color: var(--ifc-ink-dim);
	text-decoration: none;
}
.ifc-staff-deep-link:hover {
	color: var(--ifc-action-blue-light, var(--ifc-action-blue-light));
}
.ifc-staff-deep-link svg {
	width: 12px;
	height: 12px;
}

/* --- Cronómetro (includes/staff-cronometro.php) --- */

.ifc-btn-outline {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid var(--ifc-velo-4);
	box-shadow: none !important;
}
.ifc-btn-mini {
	display: inline-block;
	background: var(--ifc-velo-1);
	border: 1px solid var(--ifc-velo-3);
	color: var(--ifc-ink);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0.3rem 0.6rem;
	border-radius: 4px;
	cursor: pointer;
	margin-right: 0.35rem;
}
.ifc-btn-mini:hover {
	border-color: var(--ifc-action-blue, var(--ifc-action-blue));
}

/* Cronómetro corriendo — la fuente de luz de la ficha de caso, y la única
   que tiene: es lo único que está pasando en vivo en la pantalla, aparece
   como mucho una vez, y solo mientras alguien trabaja. Pasa de azul a ámbar
   porque un técnico trabajando es trabajo NUESTRO (§6): el azul es lo que
   depende del cliente. El punto es un elemento, no el emoji 🟢 que estaba en
   el marcado — que además metía un verde real en una interfaz sin verde. Sin
   pulso: §7.1 prohíbe el glow pulsante. */
.ifc-cronometro-activo {
	display: inline-flex;
	align-items: center;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ifc-yellow);
	padding: 0.35rem 0.75rem;
	border-radius: var(--ifc-r-chip);
	background: var(--ifc-yellow-soft);
	box-shadow:
		0 0 0 1px var(--ifc-yellow-line) inset,
		0 0 28px -6px color-mix(in srgb, var(--ifc-yellow) 45%, transparent);
}
.ifc-cronometro-punto {
	width: 8px;
	height: 8px;
	/* 2px y no el token de 4: el navegador recorta el radio a la mitad de la caja,
	   así que en un punto de 8px los 4px vuelven a dar un círculo perfecto. 2 sobre
	   8 guarda la misma proporción de esquina que 4 sobre 16. */
	border-radius: 2px;
	background: var(--ifc-yellow);
	margin-right: var(--ifc-space-2);
	flex-shrink: 0;
}
.ifc-cronometro-vivo {
	font-variant-numeric: tabular-nums;
}

.ifc-sesiones-lista {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.ifc-sesion-row {
	display: grid;
	grid-template-columns: 1.2fr 1.4fr 0.9fr 1.6fr;
	gap: 0.75rem;
	align-items: start;
	font-size: 0.8rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--ifc-velo-1);
}
.ifc-sesion-row:last-child {
	border-bottom: none;
}

/* Modal de alerta "¿seguís trabajando?" — vive fuera del flujo normal,
   se muestra/oculta entero vía [hidden] (ver el script en
   ifc_backoffice_render_alerta_cronometro_script()). */
.ifc-cronometro-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
}
/* El atributo HTML [hidden] pierde contra display:flex de arriba porque
   un estilo de autor (esta hoja) siempre le gana a la hoja del user-agent
   sin importar especificidad — hay que declarar el override a mano. Este
   fue un bug real encontrado probando el modal (aparecía siempre, sin
   importar el estado). */
.ifc-cronometro-modal[hidden] {
	display: none;
}
.ifc-cronometro-modal-card {
	background: var(--ifc-dark-base);
	border: 1px solid var(--ifc-velo-2);
	border-radius: 4px;
	padding: 2rem;
	max-width: 400px;
	width: calc(100% - 2rem);
	text-align: center;
}
.ifc-cronometro-modal-card h2 {
	margin-top: 0;
}
.ifc-cronometro-modal-botones {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}

@media (max-width: 640px) {
	.ifc-staff-main {
		padding: 1.5rem 1rem 2rem;
	}
	.ifc-kpi-row {
		gap: 0.85rem;
	}
	.ifc-stat-tile {
		flex: 1 1 100%;
	}
	/* Cronómetro mobile-first (Fase 1 gestión de taller, 2026-08-03) — el
	   técnico usa esto parado en el taller con el celular, no una compu de
	   oficina. Botón de Iniciar/Pausar con touch-target real (~44px), y la
	   fila de sesión (nombre/fecha/duración/acciones) pasa de 4 columnas
	   fijas a apilada para no apretar o desbordar en una pantalla angosta. */
	.ifc-form-card .ifc-btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.ifc-sesion-row {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

/*
 * Skip link. El sidebar tiene nueve destinos, así que sin esto son nueve
 * tabulaciones antes de llegar al primer dato de la vista. Invisible hasta que
 * recibe foco, y entonces se comporta como cualquier otro control del sistema.
 */
.ifc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--ifc-space-3) var(--ifc-space-5);
	background: var(--ifc-yellow);
	color: var(--ifc-ground);
	font-family: var(--ifc-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--ifc-r-control);
}
.ifc-skip-link:focus,
.ifc-skip-link:focus-visible {
	left: var(--ifc-space-3);
	top: var(--ifc-space-3);
}

/* ==========================================================================
   Movimiento reducido — AL FINAL DE LA HOJA A PROPÓSITO.
   Una @media no agrega especificidad: `.ifc-ring` dentro del bloque y
   `.ifc-ring` fuera empatan en (0,1,0) y gana la que aparece después. Con el
   bloque más arriba, la regla base del anillo lo pisaba y la transición seguía
   viva con la preferencia activa. Comprobado en vivo el 2026-08-28.
   ========================================================================== */

/* --- Movimiento reducido ---------------------------------------------
   §7.3 lo especificaba y §11 lo pedía en la checklist, pero no existía ni una
   sola `@media (prefers-reduced-motion)` en las dos hojas: el contador subía,
   el anillo barría y la línea se dibujaba igual con la preferencia activa.

   No es un apagón global de transiciones. En este sistema el hover cambia
   superficie, borde y elevación y nunca posición ni escala (tesis de
   interacción, §1), así que esas transiciones no son movimiento y matarlas
   solo quitaría respuesta útil. Lo que se apaga es exactamente lo que recorre
   una distancia o se repite: el barrido del anillo y el trazado de la línea.
   El estado final se mantiene — el anillo llega a su porcentaje y la línea
   queda dibujada, sin recorrido.
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ifc-ring {
		transition: none;
	}
	.ifc-linechart-line,
	.ifc-linechart-area {
		transition: none !important;
	}
}

/* --- Informe técnico --------------------------------------------------
   Documento interno, legible en pantalla y en papel. En pantalla vive en el
   shell oscuro; al imprimir, el bloque @media print de más abajo invierte los
   tokens.
   -------------------------------------------------------------------- */

.ifc-informe {
	max-width: 900px;
	margin: 0 auto;
}

.ifc-informe-acciones {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.ifc-informe-marca {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ifc-yellow);
	margin: 0 0 0.25rem;
}

.ifc-informe-bloque {
	border-top: 1px solid var(--ifc-hairline-color);
	padding-top: 1rem;
	margin-top: 1.5rem;
}

/* (0,2,1): .ifc-staff h2 es (0,1,1) y le ganaría a una clase suelta. */
.ifc-staff h2.ifc-informe-titulo {
	font-size: 0.95rem;
	margin: 0 0 0.5rem;
	color: var(--ifc-ink-dim);
}

.ifc-informe-datos {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: 0.35rem 1rem;
	margin: 0;
}

.ifc-informe-datos dt {
	color: var(--ifc-ink-faint);
}

.ifc-informe-datos dd {
	margin: 0;
	color: var(--ifc-ink);
}

.ifc-informe-vacio {
	color: var(--ifc-ink-faint);
	font-style: italic;
}

.ifc-informe-tabla {
	width: 100%;
	border-collapse: collapse;
}

.ifc-informe-tabla th,
.ifc-informe-tabla td {
	text-align: left;
	padding: 0.4rem 0.6rem;
	border-bottom: 1px solid var(--ifc-hairline-color);
}

.ifc-informe-linea {
	margin: 0;
	padding-left: 1.1rem;
}

.ifc-informe-linea li {
	margin-bottom: 0.6rem;
}

.ifc-informe-fotos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.ifc-informe-fotos img {
	max-width: 220px;
	height: auto;
}

.ifc-informe-pie {
	border-top: 1px solid var(--ifc-hairline-color);
	margin-top: 2rem;
	padding-top: 0.8rem;
	color: var(--ifc-ink-faint);
	font-size: 0.85rem;
}

.ifc-informe-emitir {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
}

.ifc-emision-anulada {
	opacity: 0.55;
	text-decoration: line-through;
}

/* ==========================================================================
   Impresión — AL FINAL DE LA HOJA A PROPÓSITO.
   Una @media no agrega especificidad: si este bloque va más arriba, las reglas
   base que repite lo pisan. Misma razón por la que el bloque de movimiento
   reducido está al final.

   Los tokens se redeclaran sobre :root y NO sobre .ifc-portal. body.ifc-staff-shell
   es ancestro de .ifc-portal: declararlos ahí dejó var(--ifc-ground) sin resolver
   y los dos shells en blanco en producción (MASTER.md §2). Esa parte queda sin
   acotar a propósito: papel blanco con tinta negra es lo correcto para cualquier
   pantalla de este plugin, staff o portal.

   Lo que sí va acotado a body.ifc-staff-shell es lo que ESCONDE. Esta hoja la
   encola también el portal del cliente (portal-cliente.php), así que un
   `display: none` suelto sobre form y .ifc-btn le arrancaba los formularios a
   toda cuenta de cliente al imprimir — una superficie que nadie diseñó para
   imprimirse ni miró impresa, y que ya se llevó una regresión de CSS en vivo una
   vez. body.ifc-staff-shell solo lo pone templates/pagina-staff.php.
   ========================================================================== */

@media print {
	:root {
		--ifc-ground: #ffffff;
		--ifc-surface: #ffffff;
		--ifc-surface-2: #ffffff;
		--ifc-surface-3: #ffffff;
		--ifc-ink: #111111;
		--ifc-ink-2: #222222;
		--ifc-ink-dim: #444444;
		--ifc-ink-faint: #666666;
		--ifc-hairline-color: #cccccc;
		--ifc-hairline-lit-color: #999999;
		--ifc-yellow: #8a6300;
	}

	body.ifc-staff-shell {
		background: #ffffff;
		color: #111111;
	}

	body.ifc-staff-shell .ifc-staff-sidebar,
	body.ifc-staff-shell .ifc-staff-topbar,
	body.ifc-staff-shell .ifc-staff-nav,
	body.ifc-staff-shell .ifc-staff-nav-footer,
	body.ifc-staff-shell .ifc-no-print,
	body.ifc-staff-shell .ifc-informe-acciones,
	body.ifc-staff-shell .ifc-informe-emitir,
	body.ifc-staff-shell .ifc-btn,
	body.ifc-staff-shell form {
		display: none !important;
	}

	.ifc-informe {
		max-width: none;
	}

	.ifc-informe-bloque {
		break-inside: avoid;
	}

	.ifc-informe-fotos img {
		max-width: 45%;
	}

	a[href]::after {
		content: "";
	}
}