/*
 * Portal de Seguridad Industrial — hoja de estilos (v1.2.0).
 *
 * Estilo visual HSE v1.0 (`DEV/# Quantikas — Estilo visual HSE v1.0.md`),
 * familia de Quantikas Contractors (estilo_contractors_v1.1.md) con marca
 * propia: Azul Quantikas, menú lateral blanco (v1.2: sin degradados en la
 * cabecera) y el naranja de Seguridad Industrial solo en el ícono del módulo. SOLO imagen: ningún selector de
 * esta hoja cambia qué hace una pantalla.
 *
 * Orden: 1) fuentes y tokens · 2) base · 3) menú lateral, barra superior
 * y título · 5) tarjetas y KPI · 6) botones · 7) formularios · 8) chips · 9) tablas ·
 * 10) fichas · 11) avisos · 12) gráficas · 13) pantallas v1.1 · 14) móvil e
 * impresión.
 */

/* -------------------------------------------------------------------------
 * 1) Fuentes (alojadas en el addon, licencia OFL) y tokens
 * ---------------------------------------------------------------------- */
@font-face {
	font-family: "Inter";
	font-weight: 100 900;
	font-display: swap;
	src: url("../vendor/fonts/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Plus Jakarta Sans";
	font-weight: 200 800;
	font-display: swap;
	src: url("../vendor/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
}

/* Tokens comunes de Quantikas HSE: idénticos en todos los addons, así que no
 * chocan si dos portales comparten página. */
:root {
	--qk-bg: #F6F7FB;
	--qk-surface: #FFFFFF;
	--qk-surface-2: #F1F3F8;
	--qk-surface-3: #E8EBF2;
	--qk-border: rgba(23, 27, 46, .07);
	--qk-border-strong: rgba(23, 27, 46, .14);
	--qk-text: #1B1F2E;
	--qk-text-2: #585E72;
	--qk-text-3: #8A90A3;
	--qk-on-accent: #FFFFFF;

	--qk-azul-50: #F0F4FC;
	--qk-azul-100: #E2E8FA;
	--qk-azul-300: #ABBDEF;
	--qk-azul-500: #4A74E0;
	--qk-azul-600: #2E5BD8;
	--qk-azul-700: #2347B4;
	--qk-azul-900: #011B4A;
	--qk-focus-ring: rgba(46, 91, 216, .16);

	--qk-ok-bg: #ECFAF2;    --qk-ok: #22B573;    --qk-ok-text: #137A4B;
	--qk-warn-bg: #FFF6E5;  --qk-warn: #F2A30F;  --qk-warn-text: #9A5B00;
	--qk-bad-bg: #FEF0F0;   --qk-bad: #EF4D4D;   --qk-bad-text: #B42323;
	--qk-block-bg: #F4F0FA; --qk-block: #7A3FC4; --qk-block-text: #56288F;
	--qk-info-bg: #EEF6FD;  --qk-info: #3B8EDB;  --qk-info-text: #1E5E9C;
	--qk-bad-ring: rgba(239, 77, 77, .16);

	--qk-grad-aurora: linear-gradient(135deg, #EDF3FF 0%, #EEF6FB 50%, #ECF9F4 100%);
	--qk-grad-bruma: radial-gradient(1200px 600px at 100% 0%, #EDF3FF 0%, rgba(237, 243, 255, 0) 60%), #F6F7FB;

	--qk-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
	--qk-font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--qk-fs-display: 40px;
	--qk-fs-h1: 28px;
	--qk-fs-h2: 20px;
	--qk-fs-h3: 16px;
	--qk-fs-body: 15px;
	--qk-fs-ui: 14px;
	--qk-fs-sm: 13px;
	--qk-fs-xs: 12px;

	--qk-r-xs: 6px;
	--qk-r-sm: 12px;
	--qk-r-md: 16px;
	--qk-r-lg: 20px;
	--qk-r-xl: 28px;
	--qk-r-pill: 999px;

	--qk-sh-1: 0 1px 2px rgba(23, 27, 46, .04), 0 2px 6px rgba(23, 27, 46, .04);
	--qk-sh-2: 0 6px 16px -4px rgba(23, 27, 46, .08), 0 2px 4px rgba(23, 27, 46, .04);
	--qk-sh-3: 0 20px 48px -12px rgba(23, 27, 46, .18);
	--qk-sh-azul: 0 8px 24px -8px rgba(46, 91, 216, .40);

	--qk-ease: cubic-bezier(.2, .8, .2, 1);
	--qk-t-fast: 160ms;
	--qk-t-med: 220ms;
}

@media (max-width: 639px) {
	:root { --qk-fs-display: 32px; --qk-fs-h1: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	:root { --qk-t-fast: 0ms; --qk-t-med: 0ms; }
}

/* -------------------------------------------------------------------------
 * 2) Base del Portal
 * ---------------------------------------------------------------------- */
.qksi-portal {
	margin-top: 0;
	/* Acento del módulo (Seguridad Industrial): solo el ícono del módulo y el
	 * de la pestaña activa. Nunca botones, enlaces ni estados. */
	--qk-acento: #C2410C;
	--qk-acento-50: #FBF2EE;
	--qk-acento-100: #F6E4DD;

	/* Alias de las variables de la v1.1 (las usa algún estilo en línea). */
	--qk-navy: var(--qk-azul-900);
	--qk-texto: var(--qk-text);
	--qk-texto-secundario: var(--qk-text-2);
	--qk-borde: var(--qk-border);
	--qk-borde-input: transparent;
	--qk-exito: var(--qk-ok-text);
	--qk-advertencia: var(--qk-warn-text);
	--qk-peligro: var(--qk-bad-text);
	--qk-naranja: var(--qk-acento);

	font-family: var(--qk-font-text);
	font-size: var(--qk-fs-body);
	line-height: 1.6;
	color: var(--qk-text);
	background: var(--qk-bg);
	border-radius: var(--qk-r-xl);
	padding: 24px;
	max-width: 100%;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant-numeric: tabular-nums;
}
.qksi-portal * {
	box-sizing: border-box;
}
.qksi-portal h2,
.qksi-portal h3,
.qksi-portal h4 {
	font-family: var(--qk-font-display);
	color: var(--qk-azul-900);
	letter-spacing: -0.005em;
}
.qksi-portal h2 {
	font-size: var(--qk-fs-h2);
	font-weight: 700;
	line-height: 1.4;
	margin: 32px 0 14px;
}
.qksi-portal h3 {
	font-size: var(--qk-fs-h3);
	font-weight: 600;
	margin: 20px 0 10px;
}
.qksi-portal h4 {
	font-size: 15px;
	font-weight: 600;
	margin: 16px 0 6px;
}
.qksi-portal a {
	color: var(--qk-azul-600);
	text-decoration: none;
	transition: color var(--qk-t-fast) var(--qk-ease);
}
.qksi-portal a:hover {
	color: var(--qk-azul-700);
}
.qksi-portal :focus-visible {
	outline: 2px solid var(--qk-azul-500);
	outline-offset: 2px;
	border-radius: var(--qk-r-xs);
}
.qksi-portal code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
}

/* -------------------------------------------------------------------------
 * 3) Estructura: menú lateral + contenido (como Quantikas Contractors)
 * ---------------------------------------------------------------------- */
.qksi-app {
	display: grid;
	grid-template-columns: 252px minmax(0, 1fr);
	gap: 28px;
	align-items: stretch;
}
.qksi-main {
	min-width: 0;
}

/* Menú lateral: tarjeta blanca, redonda y con sombra suave que cubre toda
 * la columna (v1.2.2). Su interior va pegado arriba (sticky) dentro de la
 * página del tema, así que el menú sigue a la vista al bajar. */
.qksi-sidebar {
	background: var(--qk-surface);
	border: 1px solid var(--qk-border);
	border-radius: var(--qk-r-xl);
	box-shadow: var(--qk-sh-2);
	padding: 14px 14px 16px;
	min-width: 0;
}
.qksi-sidebar-interior {
	position: sticky;
	/* La barra de WordPress (sesión iniciada) define esta variable. */
	top: calc(24px + var(--wp-admin--admin-bar--height, 0px));
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 48px - var(--wp-admin--admin-bar--height, 0px));
	overflow-y: auto;
	scrollbar-width: thin;
}
.qksi-sidebar-logo {
	display: flex;
	align-items: center;
	padding: 0 8px 14px;
}
/* Logo blanco (hecho para fondo azul): el JS le pone esta clase y se pinta
 * oscuro para que se vea sobre el menú blanco. */
.qksi-header-logo.qksi-logo-claro,
.qksi-header-sello-logo.qksi-logo-claro {
	filter: brightness(0) opacity(.82);
}
.qksi-header-logo {
	display: block;
	max-height: 40px;
	max-width: 180px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.qksi-sidebar-modulo {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	margin-bottom: 8px;
	border-radius: var(--qk-r-md);
	background: var(--qk-surface-2);
}
.qksi-header-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 10px;
	border-radius: 50%;
	background: var(--qk-surface);
	color: var(--qk-acento);
	box-shadow: var(--qk-sh-1);
	flex: none;
}
.qksi-header-icono svg {
	width: 100%;
	height: 100%;
}
.qksi-header-textos {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.qksi-header-modulo {
	font-family: var(--qk-font-display);
	color: var(--qk-azul-900);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}
.qksi-header-sitio {
	font-size: var(--qk-fs-xs);
	color: var(--qk-text-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Menú: el mismo <nav class="qksi-tabs">, ahora vertical. */
.qksi-tabs {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.qksi-nav-grupo {
	display: block;
	font-size: var(--qk-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--qk-text-3);
	padding: 16px 12px 6px;
}
.qksi-portal .qksi-tab {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 42px;
	padding: 0 14px;
	border-radius: var(--qk-r-pill);
	color: var(--qk-text-2);
	font-size: var(--qk-fs-ui);
	font-weight: 500;
	white-space: nowrap;
	transition: background var(--qk-t-fast) var(--qk-ease), color var(--qk-t-fast) var(--qk-ease);
}
.qksi-portal .qksi-tab:hover {
	background: var(--qk-surface-2);
	color: var(--qk-text);
}
.qksi-portal .qksi-tab-activo,
.qksi-portal .qksi-tab-activo:hover {
	background: var(--qk-azul-50);
	color: var(--qk-azul-600);
	font-weight: 600;
}
.qksi-tab svg {
	display: block;
	width: 18px;
	height: 18px;
	color: var(--qk-text-3);
	flex: none;
}
.qksi-tab-activo svg {
	color: var(--qk-azul-600);
}
.qksi-sidebar-pie {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 16px 12px 0;
	border-top: 1px solid var(--qk-border);
}
.qksi-header-sello-texto {
	color: var(--qk-text-3);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.qksi-header-sello-logo {
	display: block;
	max-height: 18px;
	max-width: 100px;
	width: auto;
}
.qksi-marca {
	font-family: var(--qk-font-display);
	font-size: 13px;
	font-weight: 500;
	color: var(--qk-text-2);
}
.qksi-marca strong {
	font-weight: 700;
	color: var(--qk-azul-600);
}

/* Barra superior del contenido: saludo, título de la pestaña y planta. */
.qksi-topbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 20px;
}
.qksi-topbar-textos {
	min-width: 0;
}
.qksi-topbar-saludo {
	display: block;
	font-size: var(--qk-fs-sm);
	color: var(--qk-text-2);
	margin-bottom: 2px;
}
.qksi-topbar-titulo {
	display: block;
	font-family: var(--qk-font-display);
	font-size: var(--qk-fs-h1);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--qk-azul-900);
}
.qksi-topbar-planta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 16px;
	border-radius: var(--qk-r-pill);
	background: var(--qk-surface);
	box-shadow: var(--qk-sh-1);
	border: 1px solid var(--qk-border);
	font-size: var(--qk-fs-sm);
	font-weight: 600;
	color: var(--qk-text-2);
	white-space: nowrap;
}
.qksi-topbar-planta svg {
	width: 16px;
	height: 16px;
	color: var(--qk-acento);
}

/* v1.2.3: menos aire entre el encabezado del tema y el Portal. Esta hoja
 * solo se carga en páginas con el shortcode, así que no toca otras páginas.
 * Se recortan los márgenes que ponen los temas de bloques (Twenty
 * Twenty-Five y similares) alrededor del contenido de la página. */
main:has(.qksi-portal) {
	margin-top: 16px !important;
}
main:has(.qksi-portal) .wp-block-group:has(.qksi-portal) {
	padding-top: 0 !important;
}
.wp-block-post-content:has(> .qksi-portal),
.entry-content:has(> .qksi-portal) {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* El título de la página lo pinta el tema. Con el menú lateral el módulo ya
 * se identifica dentro del Portal, así que el título del tema se oculta para
 * que la pantalla se lea como una aplicación (el JS lo sigue marcando). */
.qksi-titulo-pagina {
	display: none !important;
}
.qksi-titulo-icono,
.qksi-plantilla-icono {
	display: none;
}

/* -------------------------------------------------------------------------
 * 5) Tarjetas y KPI
 * ---------------------------------------------------------------------- */
.qksi-tarjeta {
	background: var(--qk-surface);
	border: 1px solid var(--qk-border);
	border-radius: var(--qk-r-lg);
	box-shadow: var(--qk-sh-1);
	padding: 24px;
	margin-bottom: 20px;
}
.qksi-portal .qksi-tarjeta > h2:first-child,
.qksi-portal .qksi-tarjeta > h3:first-child {
	margin-top: 0;
}
.qksi-grid-tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

/* KPI como en Contractors: etiqueta arriba, número grande, nota abajo y el
 * ícono en un círculo tenue a la derecha. El marcado (ícono, valor,
 * etiqueta) no cambia: se reordena con `order`. */
.qksi-tarjeta-kpi {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	padding: 20px 22px;
	margin-bottom: 0;
	min-height: 120px;
}
.qksi-tarjeta-kpi .qksi-tarjeta-icono {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 38px;
	height: 38px;
	padding: 9px;
	border-radius: 50%;
	margin: 0;
}
/* El espacio del ícono lo ocupa solo la etiqueta; el número usa todo el
 * ancho y nunca se parte. */
.qksi-tarjeta-kpi:has(.qksi-tarjeta-icono) .qksi-tarjeta-valor + .qksi-tarjeta-etiqueta,
.qksi-tarjeta-kpi:has(.qksi-tarjeta-icono) > .qksi-tarjeta-etiqueta:first-child {
	padding-right: 46px;
}
.qksi-icono {
	display: block;
}
.qksi-tarjeta-valor {
	order: 2;
	display: block;
	font-family: var(--qk-font-display);
	font-size: clamp(26px, 2.3vw, 34px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--qk-azul-900);
	margin-top: 6px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.qksi-tarjeta-etiqueta {
	order: 1;
	display: block;
	font-size: var(--qk-fs-sm);
	font-weight: 500;
	color: var(--qk-text-2);
	line-height: 1.4;
}
.qksi-tarjeta-etiqueta + .qksi-tarjeta-etiqueta {
	order: 3;
	margin-top: 6px;
	font-weight: 400;
	color: var(--qk-text-3);
}
.qksi-tarjeta-candado h2::before {
	content: "";
}

/* -------------------------------------------------------------------------
 * 6) Botones: píldora; un primario por tarjeta
 * ---------------------------------------------------------------------- */
.qksi-boton,
.qksi-formulario button[type="submit"],
.qksi-inline-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: var(--qk-r-pill);
	font-family: var(--qk-font-text);
	font-size: var(--qk-fs-ui);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background var(--qk-t-fast) var(--qk-ease), box-shadow var(--qk-t-fast) var(--qk-ease), color var(--qk-t-fast) var(--qk-ease);
}
.qksi-portal .qksi-boton-primario,
.qksi-portal button.qksi-boton-primario,
.qksi-formulario button[type="submit"],
.qksi-inline-form button[type="submit"] {
	background: var(--qk-azul-600);
	color: var(--qk-on-accent);
}
.qksi-portal .qksi-boton-primario:hover,
.qksi-formulario button[type="submit"]:hover,
.qksi-inline-form button[type="submit"]:hover {
	background: var(--qk-azul-700);
	color: var(--qk-on-accent);
	box-shadow: var(--qk-sh-azul);
}
.qksi-portal .qksi-boton-secundario {
	background: var(--qk-azul-50);
	color: var(--qk-azul-600);
}
.qksi-portal .qksi-boton-secundario:hover {
	background: var(--qk-azul-100);
	color: var(--qk-azul-700);
}
.qksi-portal .qksi-boton-peligro,
.qksi-portal button.qksi-boton-peligro {
	background: var(--qk-bad-bg);
	color: var(--qk-bad-text);
}
.qksi-portal .qksi-boton-peligro:hover {
	box-shadow: inset 0 0 0 1px var(--qk-bad);
}

/* -------------------------------------------------------------------------
 * 7) Formularios
 * ---------------------------------------------------------------------- */
.qksi-formulario {
	margin-bottom: 20px;
}
.qksi-formulario summary {
	list-style: none;
	cursor: pointer;
}
.qksi-formulario summary::-webkit-details-marker {
	display: none;
}
.qksi-formulario[open] {
	padding-bottom: 24px;
}
.qksi-formulario form {
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 16px 20px;
}
.qksi-formulario form label,
.qksi-inline-form label,
.qksi-form-carga label,
.qksi-selector-periodo label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--qk-fs-sm);
	color: var(--qk-text-2);
	font-weight: 500;
}
.qksi-portal input[type="text"],
.qksi-portal input[type="number"],
.qksi-portal input[type="date"],
.qksi-portal input[type="datetime-local"],
.qksi-portal input[type="month"],
.qksi-portal input[type="email"],
.qksi-portal select,
.qksi-portal textarea {
	width: 100%;
	min-height: 44px;
	border: 1px solid transparent;
	border-radius: var(--qk-r-sm);
	padding: 10px 14px;
	font-family: var(--qk-font-text);
	font-size: var(--qk-fs-body);
	color: var(--qk-text);
	background-color: var(--qk-surface-2);
	box-shadow: none;
	transition: background var(--qk-t-fast) var(--qk-ease), border-color var(--qk-t-fast) var(--qk-ease), box-shadow var(--qk-t-fast) var(--qk-ease);
}
.qksi-portal select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23585E72' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
.qksi-portal textarea {
	min-height: 96px;
	resize: vertical;
}
.qksi-portal input[type="file"] {
	font-size: var(--qk-fs-sm);
	color: var(--qk-text-2);
	padding: 10px 0;
}
.qksi-portal input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 16px;
	border: none;
	border-radius: var(--qk-r-pill);
	background: var(--qk-azul-50);
	color: var(--qk-azul-600);
	font-family: var(--qk-font-text);
	font-weight: 600;
	cursor: pointer;
}
.qksi-portal input:focus,
.qksi-portal select:focus,
.qksi-portal textarea:focus {
	outline: none;
	background-color: var(--qk-surface);
	border-color: var(--qk-azul-300);
	box-shadow: 0 0 0 4px var(--qk-focus-ring);
}
.qksi-portal input[disabled] {
	opacity: .5;
	cursor: not-allowed;
}
.qksi-formulario button,
.qksi-inline-form button {
	grid-column: 1 / -1;
	justify-self: start;
}
.qksi-portal .qksi-check {
	flex-direction: row !important;
	align-items: center;
	justify-content: flex-start;
	gap: 10px !important;
	font-size: var(--qk-fs-ui);
	font-weight: 500;
	color: var(--qk-text);
}
.qksi-portal input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	flex: none;
	accent-color: var(--qk-azul-600);
	cursor: pointer;
}
.qksi-portal fieldset {
	border: none;
	background: var(--qk-surface-2);
	border-radius: var(--qk-r-md);
	padding: 12px 16px;
	margin: 8px 0;
}
.qksi-portal legend {
	font-size: var(--qk-fs-sm);
	color: var(--qk-text-2);
	padding: 0;
}

/* Formulario de campos en caja (Carga de Datos, Configuración). */
.qksi-form-carga {
	margin-top: 8px;
}
.qksi-portal .qksi-form-carga .qksi-form-seccion {
	margin: 28px 0 10px;
	padding-top: 24px;
	border-top: 1px solid var(--qk-border);
	font-size: var(--qk-fs-h3);
	font-weight: 600;
}
.qksi-portal .qksi-form-carga .qksi-form-seccion:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 8px;
}
.qksi-form-carga .qksi-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 16px;
	margin-bottom: 4px;
}
.qksi-form-carga .qksi-campo {
	display: flex;
	flex-direction: column;
	background: var(--qk-surface);
	border: 1px solid var(--qk-border);
	box-shadow: var(--qk-sh-1);
	border-radius: var(--qk-r-md);
	padding: 16px;
}
.qksi-form-carga .qksi-campo .qksi-texto-ayuda {
	margin: 8px 0 0;
}
.qksi-form-carga .qksi-campo-periodo {
	max-width: 320px;
}
.qksi-form-carga .qksi-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--qk-border);
}

/* -------------------------------------------------------------------------
 * 8) Chips de estado: fondo pastel + punto + palabra
 * ---------------------------------------------------------------------- */
.qksi-badge {
	--chip-bg: var(--qk-surface-2);
	--chip-punto: var(--qk-text-3);
	--chip-texto: var(--qk-text-2);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
	padding: 0 10px;
	border-radius: var(--qk-r-pill);
	font-size: var(--qk-fs-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
	white-space: nowrap;
	background: var(--chip-bg);
	color: var(--chip-texto);
}
.qksi-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--chip-punto);
	flex: none;
}
.qksi-badge-abierta,
.qksi-badge-abierto,
.qksi-badge-no_iniciada,
.qksi-badge-en_proceso,
.qksi-badge-en_atencion,
.qksi-badge-en_proceso_investigacion,
.qksi-badge-ambar {
	--chip-bg: var(--qk-warn-bg);
	--chip-punto: var(--qk-warn);
	--chip-texto: var(--qk-warn-text);
}
.qksi-badge-cerrada,
.qksi-badge-cerrado,
.qksi-badge-completada,
.qksi-badge-concluida,
.qksi-badge-verde {
	--chip-bg: var(--qk-ok-bg);
	--chip-punto: var(--qk-ok);
	--chip-texto: var(--qk-ok-text);
}
.qksi-badge-vencida,
.qksi-badge-no_iniciada_vencida,
.qksi-badge-rojo {
	--chip-bg: var(--qk-bad-bg);
	--chip-punto: var(--qk-bad);
	--chip-texto: var(--qk-bad-text);
}
.qksi-badge-gris {
	--chip-bg: var(--qk-surface-2);
	--chip-punto: var(--qk-text-3);
	--chip-texto: var(--qk-text-2);
}

/* -------------------------------------------------------------------------
 * 9) Tablas: aire, sin líneas verticales; se deslizan dentro de su caja
 * ---------------------------------------------------------------------- */
.qksi-tabla {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--qk-surface);
	border: 1px solid var(--qk-border);
	border-radius: var(--qk-r-lg);
	box-shadow: var(--qk-sh-1);
	font-size: var(--qk-fs-ui);
	overflow: hidden;
}
.qksi-tabla th {
	text-align: left;
	background: transparent;
	color: var(--qk-text-3);
	font-size: var(--qk-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 14px 14px 10px;
	border-bottom: 1px solid var(--qk-border);
	white-space: nowrap;
}
.qksi-tabla td {
	padding: 14px;
	border-bottom: 1px solid var(--qk-border);
	vertical-align: middle;
	color: var(--qk-text);
}
.qksi-tabla td:first-child {
	white-space: nowrap;
	font-weight: 600;
}
.qksi-tabla tbody tr {
	transition: background var(--qk-t-fast) var(--qk-ease);
}
.qksi-tabla tbody tr:hover {
	background: var(--qk-surface-2);
}
.qksi-tabla tr:last-child td {
	border-bottom: none;
}
.qksi-tabla .qksi-boton {
	min-height: 36px;
	padding: 0 14px;
	font-size: var(--qk-fs-sm);
	white-space: nowrap;
}
.qksi-tabla-scroll {
	overflow-x: auto;
	margin-bottom: 20px;
	border-radius: var(--qk-r-lg);
}
.qksi-miniatura {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--qk-r-sm);
	box-shadow: var(--qk-sh-1);
}

/* -------------------------------------------------------------------------
 * 10) Fichas de reporte y galería
 * ---------------------------------------------------------------------- */
.qksi-reporte-volver {
	margin-bottom: 16px;
}
.qksi-reporte {
	padding: 32px;
}
.qksi-portal .qksi-reporte h2 {
	margin: 0 0 4px;
	padding: 0;
	font-size: 24px;
	font-weight: 700;
}
.qksi-reporte h2 + .qksi-detalle {
	margin-top: 20px;
}
.qksi-detalle {
	display: grid;
	grid-template-columns: minmax(160px, 230px) 1fr;
	gap: 0;
	margin: 0;
}
.qksi-detalle dt,
.qksi-detalle dd {
	padding: 14px 0;
	border-top: 1px solid var(--qk-border);
	min-width: 0;
}
.qksi-detalle dt {
	padding-right: 28px;
	font-size: var(--qk-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--qk-text-3);
}
.qksi-detalle dd {
	margin: 0;
	font-size: var(--qk-fs-body);
	font-weight: 500;
	line-height: 1.55;
	color: var(--qk-text);
	overflow-wrap: anywhere;
}
.qksi-reporte .qksi-inline-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 16px 20px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--qk-border);
}
.qksi-reporte .qksi-inline-form label {
	margin: 0;
}
.qksi-reporte .qksi-inline-form button {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: 4px;
}
.qksi-reporte .qksi-galeria {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--qk-border);
}
.qksi-galeria {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}
.qksi-galeria-item {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: var(--qk-r-md);
	box-shadow: var(--qk-sh-1);
}
.qksi-galeria-doc {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--qk-azul-50);
	color: var(--qk-azul-600);
	font-size: var(--qk-fs-sm);
	font-weight: 600;
}
.qksi-texto-ayuda {
	font-size: var(--qk-fs-sm);
	line-height: 1.5;
	color: var(--qk-text-3);
	margin: 4px 0 8px;
}

/* -------------------------------------------------------------------------
 * 11) Avisos en línea
 * ---------------------------------------------------------------------- */
.qksi-alerta,
.qksi-demo-aviso {
	display: block;
	padding: 14px 20px;
	border-radius: var(--qk-r-lg);
	margin: 0 0 16px;
	font-size: var(--qk-fs-ui);
	line-height: 1.5;
	border: none;
}
.qksi-alerta-exito {
	background: var(--qk-ok-bg);
	color: var(--qk-ok-text);
}
.qksi-alerta-error {
	background: var(--qk-bad-bg);
	color: var(--qk-bad-text);
}
.qksi-demo-aviso {
	background: var(--qk-warn-bg);
	color: var(--qk-warn-text);
}
.qksi-alerta a,
.qksi-demo-aviso a {
	color: inherit;
	text-decoration: underline;
}
.qksi-aviso {
	background: var(--qk-surface);
	border: 1px solid var(--qk-border);
	border-radius: var(--qk-r-lg);
	box-shadow: var(--qk-sh-1);
	padding: 24px;
}
/* Datos de ejemplo (solo Superadmin): tarjeta plana informativa, sin
 * competir con la cabecera. */
.qksi-portal .qksi-demo-datos {
	background: var(--qk-info-bg);
	border: none;
	box-shadow: none;
	padding: 16px 20px;
}
.qksi-demo-datos .qksi-texto-ayuda {
	color: var(--qk-info-text);
	margin-top: 0;
}
.qksi-demo-resumen {
	margin: 0 0 12px;
	font-size: var(--qk-fs-sm);
	font-weight: 600;
	color: var(--qk-info-text);
}

/* -------------------------------------------------------------------------
 * 12) Gráficas
 * ---------------------------------------------------------------------- */
.qksi-grafica {
	width: 100%;
	min-height: 320px;
	margin-bottom: 20px;
	padding: 16px;
	background: var(--qk-surface);
	border: 1px solid var(--qk-border);
	border-radius: var(--qk-r-lg);
	box-shadow: var(--qk-sh-1);
	overflow: hidden;
}
.qksi-grid-graficas {
	display: grid;
	/* `min(380px, 100%)`: con un mínimo fijo, en 390 px la página se desliza. */
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
	gap: 20px;
	margin-bottom: 20px;
}
.qksi-panel-grafica {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--qk-surface);
	border: 1px solid var(--qk-border);
	border-radius: var(--qk-r-lg);
	box-shadow: var(--qk-sh-1);
	padding: 20px 20px 12px;
}
.qksi-portal .qksi-panel-grafica-titulo {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
}
.qksi-panel-grafica .qksi-grafica {
	flex: 1;
	margin-bottom: 0;
	min-height: 280px;
	padding: 0;
	border: none;
	box-shadow: none;
	border-radius: 0;
}
.qksi-grafica-vacia {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 260px;
	margin: 0;
	color: var(--qk-text-3);
	font-size: var(--qk-fs-sm);
}

/* -------------------------------------------------------------------------
 * 13) Pantallas de la v1.1 (Prima IMSS, Configuración, seguimiento legal)
 * ---------------------------------------------------------------------- */
.qksi-formula code {
	display: inline-block;
	white-space: normal;
	padding: 10px 16px;
	border-radius: var(--qk-r-sm);
	background: var(--qk-azul-50);
	color: var(--qk-azul-900);
}
.qksi-ajustado {
	color: var(--qk-warn-text) !important;
	font-weight: 600;
}
.qksi-campo-legal {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.qksi-campo-legal .qksi-texto-ayuda {
	margin: 0;
}
.qksi-config-intro {
	font-size: var(--qk-fs-ui) !important;
	line-height: 1.6;
	color: var(--qk-text-2);
	max-width: 760px;
}
.qksi-portal .qksi-paso {
	margin: 24px 0 10px;
	font-size: 15px;
}
.qksi-campo-titulo {
	font-size: var(--qk-fs-sm);
	font-weight: 500;
	color: var(--qk-text-2);
	margin-bottom: 8px;
}
.qksi-form-carga .qksi-campo-ancho {
	margin: 16px 0 4px;
}
.qksi-form-carga .qksi-campo-ancho .qksi-check {
	margin: 4px 0;
}
.qksi-config-nuevo {
	margin-top: 24px;
}
.qksi-config-nuevo summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
}
.qksi-config-nuevo summary::-webkit-details-marker {
	display: none;
}
.qksi-form-config {
	margin-top: 16px;
}

/* -------------------------------------------------------------------------
 * 14) Tableta, móvil e impresión
 * ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.qksi-tabla {
		display: block;
		overflow-x: auto;
	}
}
/* Tableta y móvil: el menú lateral pasa arriba. Logo y módulo en una fila y
 * el menú como píldoras que se deslizan de lado (la página nunca). */
@media (max-width: 1023px) {
	.qksi-app {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.qksi-sidebar {
		padding: 14px;
		border-radius: var(--qk-r-lg);
	}
	.qksi-sidebar-interior {
		position: static;
		max-height: none;
		overflow: visible;
	}
	.qksi-sidebar-logo {
		padding: 0 4px 12px;
	}
	.qksi-sidebar-modulo {
		margin-bottom: 10px;
	}
	.qksi-tabs {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 4px;
	}
	.qksi-tabs::-webkit-scrollbar {
		display: none;
	}
	.qksi-nav-grupo,
	.qksi-sidebar-pie {
		display: none;
	}
	.qksi-portal .qksi-tab {
		flex: none;
		min-height: 40px;
		gap: 8px;
	}
	.qksi-topbar {
		margin-bottom: 16px;
	}
}

@media (max-width: 640px) {
	.qksi-portal {
		padding: 12px;
		border-radius: var(--qk-r-lg);
	}
	.qksi-header {
		padding: 16px;
		border-radius: var(--qk-r-lg);
	}
	.qksi-header-modulo {
		font-size: 19px;
	}
	.qksi-tarjeta {
		padding: 20px;
	}
	.qksi-grid-tarjetas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.qksi-tarjeta-kpi {
		padding: 16px;
		min-height: 108px;
	}
	.qksi-tarjeta-kpi:has(.qksi-tarjeta-icono) .qksi-tarjeta-valor + .qksi-tarjeta-etiqueta {
		padding-right: 0;
	}
	.qksi-tarjeta-kpi .qksi-tarjeta-icono {
		position: static;
		order: 0;
		width: 32px;
		height: 32px;
		padding: 7px;
		margin-bottom: 8px;
	}
	.qksi-tarjeta-valor {
		font-size: 28px;
	}
	.qksi-detalle {
		grid-template-columns: 1fr;
	}
	.qksi-detalle dt {
		padding: 16px 0 2px;
	}
	.qksi-detalle dd {
		padding: 0 0 4px;
		border-top: none;
	}
	.qksi-reporte {
		padding: 22px 20px;
	}
	.qksi-form-carga .qksi-acciones .qksi-boton {
		flex: 1;
	}
}
@media print {
	.qksi-sidebar,
	.qksi-tabs,
	.qksi-no-imprimir,
	.qksi-reporte-volver,
	.qksi-demo-datos {
		display: none !important;
	}
	.qksi-portal {
		background: #fff;
		padding: 0;
	}
	.qksi-app {
		display: block;
	}
	.qksi-tarjeta,
	.qksi-tabla,
	.qksi-panel-grafica {
		box-shadow: none;
		break-inside: avoid;
	}
}