/* ====================================================================
   JASC Sistema de Reportes — SeguraEP
   Paleta: #1061CC (primario) #1889C1 (secundario) #333333 (texto)
           #F9F9F9 (fondo claro)
   ==================================================================== */

:root {
	--jasc-primario: #1061CC;
	--jasc-secundario: #1889C1;
	--jasc-texto: #333333;
	--jasc-fondo: #F9F9F9;
	--jasc-superficie: #FFFFFF;
	--jasc-borde: #D8DEE8;
	--jasc-texto-invertido: #FFFFFF;
	--jasc-menu-fondo: var(--jasc-primario);
	--jasc-menu-texto: #FFFFFF;
	--jasc-error: #C0392B;
	--jasc-exito: #1E8449;
	--jasc-sombra: 0 2px 12px rgba(16, 97, 204, 0.15);
	--jasc-alto-cabecera: 64px;
	--jasc-ancho-menu: 248px;
	--jasc-ancho-menu-colapsado: 64px;
}

/* Modo nocturno: alto contraste, sin grises sobre oscuros. */
[data-tema="oscuro"] {
	--jasc-texto: #F2F5FA;
	--jasc-fondo: #10151D;
	--jasc-superficie: #1A2230;
	--jasc-borde: #2E3B50;
	--jasc-menu-fondo: #0B3D80;
	--jasc-menu-texto: #FFFFFF;
	--jasc-sombra: 0 2px 12px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

/* Los elementos con el atributo hidden nunca deben mostrarse, aunque su
   clase defina display (corrige círculos/controles "fantasma"). */
[hidden] { display: none !important; }

html, body {
	margin: 0;
	padding: 0;
	font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	color: var(--jasc-texto);
	background: var(--jasc-fondo);
	font-size: 16px;
}

button { font-family: inherit; cursor: pointer; }
a { color: var(--jasc-primario); }
[data-tema="oscuro"] a { color: #6FB3FF; }

/* ====================== Acceso (login / verificación) ============== */

.jasc-acceso {
	min-height: 100vh;
	background: linear-gradient(160deg, var(--jasc-primario), var(--jasc-secundario));
}

.jasc-acceso-contenedor {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.jasc-tarjeta-acceso {
	background: var(--jasc-superficie);
	border-radius: 12px;
	box-shadow: var(--jasc-sombra);
	padding: 36px 32px;
	width: 100%;
	max-width: 420px;
	display: flex;
	flex-direction: column;
}

.jasc-logo-acceso {
	max-width: 180px;
	margin: 0 auto 16px;
	display: block;
}

.jasc-tarjeta-acceso h1 {
	font-size: 1.15rem;
	text-align: center;
	margin: 0 0 4px;
	color: var(--jasc-primario);
}

.jasc-tarjeta-acceso h2 {
	font-size: 0.95rem;
	font-weight: 500;
	text-align: center;
	margin: 0 0 24px;
	color: var(--jasc-texto);
}

.jasc-tarjeta-acceso label {
	font-size: 0.85rem;
	font-weight: 600;
	margin: 10px 0 4px;
}

.jasc-tarjeta-acceso input[type="email"],
.jasc-tarjeta-acceso input[type="password"],
.jasc-tarjeta-acceso input[type="text"] {
	padding: 10px 12px;
	border: 1px solid var(--jasc-borde);
	border-radius: 8px;
	font-size: 1rem;
	background: var(--jasc-fondo);
	color: var(--jasc-texto);
}

.jasc-tarjeta-acceso input:focus {
	outline: 2px solid var(--jasc-secundario);
	outline-offset: 1px;
}

.jasc-boton-primario {
	margin-top: 20px;
	padding: 12px;
	border: none;
	border-radius: 8px;
	background: var(--jasc-primario);
	color: var(--jasc-texto-invertido);
	font-size: 1rem;
	font-weight: 600;
	transition: background 0.15s ease;
}

.jasc-boton-primario:hover { background: var(--jasc-secundario); }
.jasc-boton-primario[disabled] { opacity: 0.6; cursor: wait; }

.jasc-boton-secundario {
	margin-top: 10px;
	padding: 10px;
	border: 1px solid var(--jasc-primario);
	border-radius: 8px;
	background: transparent;
	color: var(--jasc-primario);
	font-weight: 600;
}

.jasc-enlace-olvido {
	margin-top: 16px;
	text-align: center;
	font-size: 0.9rem;
}

.jasc-mensaje { text-align: center; font-size: 0.95rem; }

.jasc-error {
	color: var(--jasc-error);
	font-size: 0.9rem;
	text-align: center;
	margin: 10px 0 0;
}

/* Celdas del código 2FA */
.jasc-celdas-codigo {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin: 18px 0 6px;
}

.jasc-celdas-codigo input {
	width: 46px;
	height: 56px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
}

/* Contador pequeño y discreto debajo de las celdas */
.jasc-contador {
	text-align: center;
	font-size: 0.8rem;
	color: var(--jasc-secundario);
	margin: 4px 0 0;
}

/* =========================== Aplicación ============================ */

.jasc-app {
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Menú horizontal estático superior */
.jasc-cabecera {
	height: var(--jasc-alto-cabecera);
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	background: var(--jasc-superficie);
	border-bottom: 2px solid var(--jasc-primario);
	position: relative;
	z-index: 30;
}

.jasc-cabecera-logo { height: 42px; }

/* En modo nocturno el logotipo de SeguraEP se muestra en blanco. */
[data-tema="oscuro"] .jasc-cabecera-logo { filter: brightness(0) invert(1); }

.jasc-cabecera-perfil {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 8px;
}

.jasc-cabecera-perfil:hover { background: var(--jasc-fondo); }

.jasc-perfil-foto {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--jasc-secundario);
	display: inline-block;
}

.jasc-perfil-datos { display: flex; flex-direction: column; line-height: 1.2; }
.jasc-perfil-datos small { color: var(--jasc-secundario); }

.jasc-perfil-menu {
	position: absolute;
	top: var(--jasc-alto-cabecera);
	right: 12px;
	background: var(--jasc-superficie);
	border: 1px solid var(--jasc-borde);
	border-radius: 10px;
	box-shadow: var(--jasc-sombra);
	display: flex;
	flex-direction: column;
	min-width: 200px;
	overflow: hidden;
	/* Animación: se despliega hacia abajo y se esconde hacia arriba. */
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.jasc-perfil-menu.abierto {
	opacity: 1;
	transform: translateY(0);
}

.jasc-perfil-menu a,
.jasc-perfil-menu button {
	padding: 12px 16px;
	text-decoration: none;
	color: var(--jasc-texto);
	background: none;
	border: none;
	text-align: left;
	font-size: 0.95rem;
}

.jasc-perfil-menu a:hover,
.jasc-perfil-menu button:hover { background: var(--jasc-fondo); }

/* Cuerpo: menú lateral + contenido */
.jasc-cuerpo {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}

/* Menú vertical flotante colapsable */
.jasc-menu-lateral {
	width: var(--jasc-ancho-menu);
	flex: 0 0 auto;
	background: var(--jasc-menu-fondo);
	color: var(--jasc-menu-texto);
	position: relative;
	transition: width 0.2s ease;
	overflow: visible;
	display: flex;
	flex-direction: column;
}

.jasc-menu-lateral.colapsado { width: var(--jasc-ancho-menu-colapsado); }

.jasc-menu-alternar {
	position: absolute;
	top: 14px;
	right: -14px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--jasc-menu-fondo);
	background: var(--jasc-superficie);
	color: var(--jasc-primario);
	font-size: 0.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
}

.jasc-menu-lateral.colapsado .jasc-menu-alternar-icono {
	transform: rotate(180deg);
}

.jasc-menu-lateral nav { margin-top: 52px; flex: 1 1 auto; overflow-y: auto; }
.jasc-menu-lateral ul { list-style: none; margin: 0; padding: 0; }

/* Pie del menú principal: autor y versión del plugin. */
.jasc-menu-pie {
	flex: 0 0 auto;
	padding: 12px 10px;
	font-size: 0.72rem;
	line-height: 1.6;
	text-align: center;
	color: rgba(255, 255, 255, 0.85);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.jasc-menu-lateral.colapsado .jasc-menu-pie { display: none; }

.jasc-menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 18px;
	color: var(--jasc-menu-texto);
	text-decoration: none;
	font-size: 0.95rem;
	white-space: nowrap;
}

.jasc-menu-item:hover,
.jasc-menu-item.activo { background: rgba(255, 255, 255, 0.16); }

.jasc-menu-lateral.colapsado .jasc-menu-titulo { display: none; }
.jasc-menu-lateral.colapsado .jasc-menu-item { justify-content: center; padding: 13px 0; }

.jasc-menu-icono {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	display: inline-block;
	background: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Íconos en SVG inline (data URI) */
.jasc-icono-inicio        { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l9 8h-3v9h-4v-6H10v6H6v-9H3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l9 8h-3v9h-4v-6H10v6H6v-9H3z'/%3E%3C/svg%3E"); }
.jasc-icono-turno         { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1.7-4-2.3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1.7-4-2.3z'/%3E%3C/svg%3E"); }
.jasc-icono-dashboard     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h8V3H3zm0 8h8v-6H3zm10 0h8V11h-8zm0-18v6h8V3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h8V3H3zm0 8h8v-6H3zm10 0h8V11h-8zm0-18v6h8V3z'/%3E%3C/svg%3E"); }
.jasc-icono-mantenimiento { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 19l-7.4-7.4a6 6 0 00-7.8-7.8L10 7 7 10 3.8 6.8a6 6 0 007.8 7.8L19 22z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 19l-7.4-7.4a6 6 0 00-7.8-7.8L10 7 7 10 3.8 6.8a6 6 0 007.8 7.8L19 22z'/%3E%3C/svg%3E"); }
.jasc-icono-informe       { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6zM14 3.5V8h4.5zM8 12h8v2H8zm0 4h8v2H8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6zM14 3.5V8h4.5zM8 12h8v2H8zm0 4h8v2H8z'/%3E%3C/svg%3E"); }
.jasc-icono-jefatura      { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16v2H4zm2-2h3v-7H6zm5 0h3V4h-3zm5 0h3v-10h-3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16v2H4zm2-2h3v-7H6zm5 0h3V4h-3zm5 0h3v-10h-3z'/%3E%3C/svg%3E"); }
.jasc-icono-configuracion { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.4 13a7.6 7.6 0 000-2l2.1-1.6-2-3.5-2.5 1a7.7 7.7 0 00-1.7-1L15 3h-4l-.3 2.7a7.7 7.7 0 00-1.7 1l-2.5-1-2 3.5L6.6 11a7.6 7.6 0 000 2l-2.1 1.6 2 3.5 2.5-1a7.7 7.7 0 001.7 1L11 21h4l.3-2.7a7.7 7.7 0 001.7-1l2.5 1 2-3.5zM13 15.5A3.5 3.5 0 1113 8a3.5 3.5 0 010 7.5z' transform='translate(-1 -0.2)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.4 13a7.6 7.6 0 000-2l2.1-1.6-2-3.5-2.5 1a7.7 7.7 0 00-1.7-1L15 3h-4l-.3 2.7a7.7 7.7 0 00-1.7 1l-2.5-1-2 3.5L6.6 11a7.6 7.6 0 000 2l-2.1 1.6 2 3.5 2.5-1a7.7 7.7 0 001.7 1L11 21h4l.3-2.7a7.7 7.7 0 001.7-1l2.5 1 2-3.5zM13 15.5A3.5 3.5 0 1113 8a3.5 3.5 0 010 7.5z' transform='translate(-1 -0.2)'/%3E%3C/svg%3E"); }

/* Área de contenido: siempre ocupa el 100% restante */
.jasc-contenido {
	flex: 1 1 auto;
	min-width: 0;
	overflow-y: auto;
	padding: 24px;
}

.jasc-titulo-seccion {
	color: var(--jasc-primario);
	margin: 0 0 16px;
	font-size: 1.4rem;
}

[data-tema="oscuro"] .jasc-titulo-seccion { color: #6FB3FF; }

.jasc-tarjeta {
	background: var(--jasc-superficie);
	border: 1px solid var(--jasc-borde);
	border-radius: 12px;
	padding: 20px;
	box-shadow: var(--jasc-sombra);
}

/* Inicio: la imagen de las camionetas ocupa todo el espacio a la derecha
   del menú principal; el texto va arriba a la izquierda en blanco. */
.jasc-inicio-hero {
	position: relative;
	margin: -24px; /* anula el padding del área de contenido */
	height: calc(100vh - var(--jasc-alto-cabecera));
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* Degradado oscuro para garantizar el contraste del texto blanco. */
.jasc-inicio-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.05) 100%);
}

.jasc-inicio-texto {
	position: relative;
	z-index: 1;
	color: #FFFFFF;
	padding: 30px 36px;
	max-width: 680px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.jasc-inicio-texto h1 {
	margin: 0 0 6px;
	font-size: 1.7rem;
}

.jasc-inicio-texto h2 {
	margin: 0 0 12px;
	font-size: 1.25rem;
	font-weight: 600;
}

.jasc-inicio-texto p {
	margin: 6px 0;
	font-size: 1rem;
	line-height: 1.6;
}

/* ================= Configuración: pestañas, tablas, formularios ==== */

.jasc-pestanas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.jasc-pestana {
	padding: 8px 14px;
	border: 1px solid var(--jasc-borde);
	border-radius: 8px;
	background: var(--jasc-superficie);
	color: var(--jasc-texto);
	font-size: 0.9rem;
}

.jasc-pestana.activa {
	background: var(--jasc-primario);
	border-color: var(--jasc-primario);
	color: var(--jasc-texto-invertido);
	font-weight: 600;
}

.jasc-catalogo-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.jasc-catalogo-cabecera h2 { margin: 0; font-size: 1.1rem; }

.jasc-contador-registros {
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--jasc-secundario);
	margin-left: 8px;
}

.jasc-buscador {
	padding: 8px 12px;
	border: 1px solid var(--jasc-borde);
	border-radius: 8px;
	background: var(--jasc-fondo);
	color: var(--jasc-texto);
	min-width: 220px;
}

.jasc-fila-agregar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin: 12px 0;
}

.jasc-campo {
	padding: 8px 10px;
	border: 1px solid var(--jasc-borde);
	border-radius: 6px;
	background: var(--jasc-fondo);
	color: var(--jasc-texto);
	font-size: 0.9rem;
	min-width: 140px;
}

.jasc-boton-compacto {
	margin-top: 0;
	padding: 8px 14px;
	font-size: 0.9rem;
}

.jasc-boton-peligro {
	padding: 8px 14px;
	border: 1px solid var(--jasc-error);
	border-radius: 8px;
	background: transparent;
	color: var(--jasc-error);
	font-size: 0.9rem;
	font-weight: 600;
}

.jasc-boton-peligro:hover { background: var(--jasc-error); color: #fff; }

.jasc-importar {
	margin: 10px 0;
	padding: 12px;
	border: 1px dashed var(--jasc-secundario);
	border-radius: 8px;
}

.jasc-importar-lineas,
.jasc-formulario textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--jasc-borde);
	border-radius: 8px;
	background: var(--jasc-fondo);
	color: var(--jasc-texto);
	font-family: inherit;
	font-size: 0.9rem;
	margin: 8px 0;
}

.jasc-tabla-contenedor { overflow-x: auto; margin: 12px 0; }

.jasc-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.jasc-tabla th {
	text-align: left;
	padding: 10px;
	background: var(--jasc-primario);
	color: var(--jasc-texto-invertido);
	white-space: nowrap;
}

.jasc-tabla td {
	padding: 6px 10px;
	border-bottom: 1px solid var(--jasc-borde);
}

.jasc-tabla tbody tr:hover { background: var(--jasc-fondo); }

.jasc-celda-centrada { text-align: center; }

.jasc-celda-acciones {
	display: flex;
	gap: 6px;
	white-space: nowrap;
}

.jasc-aviso {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 0.9rem;
	margin: 10px 0;
}

.jasc-aviso-exito {
	background: rgba(30, 132, 73, 0.12);
	color: var(--jasc-exito);
	border: 1px solid var(--jasc-exito);
}

.jasc-aviso-error {
	background: rgba(192, 57, 43, 0.12);
	color: var(--jasc-error);
	border: 1px solid var(--jasc-error);
}

.jasc-ayuda {
	font-size: 0.82rem;
	color: var(--jasc-secundario);
	display: block;
	margin-top: 4px;
}

.jasc-formulario { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }

.jasc-formulario label {
	display: flex;
	flex-direction: column;
	font-weight: 600;
	font-size: 0.9rem;
	gap: 4px;
}

.jasc-formulario input,
.jasc-formulario select {
	padding: 10px 12px;
	border: 1px solid var(--jasc-borde);
	border-radius: 8px;
	background: var(--jasc-fondo);
	color: var(--jasc-texto);
	font-size: 0.95rem;
	font-weight: 400;
}

.jasc-formulario .jasc-boton-compacto { align-self: flex-start; }

.jasc-lista-endpoints { font-size: 0.88rem; }
.jasc-lista-endpoints code,
.jasc-clave-generada code {
	background: var(--jasc-fondo);
	border: 1px solid var(--jasc-borde);
	border-radius: 6px;
	padding: 2px 8px;
	word-break: break-all;
}

.jasc-clave-generada {
	margin: 12px 0;
	padding: 14px;
	border: 1px solid var(--jasc-exito);
	border-radius: 8px;
	background: rgba(30, 132, 73, 0.08);
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

/* ================= Formularios de registro (turnos, etc.) ========== */

.jasc-form-grilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
	align-items: start;
}

#jasc-form-turno fieldset,
.jasc-tarjeta fieldset {
	border: 1px solid var(--jasc-borde);
	border-radius: 10px;
	padding: 14px 16px 18px;
	margin: 16px 0;
}

#jasc-form-turno legend,
.jasc-tarjeta legend {
	color: var(--jasc-primario);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0 8px;
}

[data-tema="oscuro"] #jasc-form-turno legend,
[data-tema="oscuro"] .jasc-tarjeta legend { color: #6FB3FF; }

.jasc-grupo-campo label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600;
	font-size: 0.85rem;
}

/* Título del campo con su signo de interrogación al lado derecho. */
.jasc-etiqueta-campo {
	display: inline-flex;
	align-items: center;
}

.jasc-grupo-campo .jasc-campo {
	width: 100%;
	min-width: 0;
	font-weight: 400;
}

.jasc-grupo-campo input[readonly] {
	background: var(--jasc-borde);
	cursor: not-allowed;
}

.jasc-grupo-campo textarea.jasc-campo {
	resize: vertical;
	font-family: inherit;
}

.jasc-form-botones {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 12px 0;
}

.jasc-filtro {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 600;
}

/* Ícono de ayuda "?" con globo al pasar el cursor */
.jasc-ayuda-icono {
	display: inline-flex;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--jasc-secundario);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	align-items: center;
	justify-content: center;
	cursor: help;
	position: relative;
	margin-left: 6px;
	flex: 0 0 17px;
}

.jasc-ayuda-icono:hover::after,
.jasc-ayuda-icono:focus::after {
	content: attr(data-ayuda);
	position: absolute;
	bottom: 135%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--jasc-texto);
	color: var(--jasc-superficie);
	white-space: pre-line;
	width: max-content;
	max-width: 260px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	z-index: 60;
	box-shadow: var(--jasc-sombra);
}

[data-tema="oscuro"] .jasc-ayuda-icono:hover::after,
[data-tema="oscuro"] .jasc-ayuda-icono:focus::after {
	background: #F2F5FA;
	color: #10151D;
}

/* Insignias de estado */
.jasc-insignia {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.jasc-insignia-ok {
	background: rgba(30, 132, 73, 0.15);
	color: var(--jasc-exito);
	border: 1px solid var(--jasc-exito);
}

.jasc-insignia-alerta {
	background: rgba(192, 57, 43, 0.12);
	color: var(--jasc-error);
	border: 1px solid var(--jasc-error);
}

/* Observaciones: novedades numeradas */
.jasc-observaciones { margin: 14px 0; }
.jasc-observaciones > label {
	display: flex;
	align-items: center;
	font-weight: 600;
	font-size: 0.85rem;
	margin-bottom: 8px;
}

.jasc-novedad-fila {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--jasc-borde);
}

.jasc-novedad-numero {
	font-weight: 700;
	color: var(--jasc-primario);
	min-width: 22px;
	text-align: right;
	align-self: center;
}

[data-tema="oscuro"] .jasc-novedad-numero { color: #6FB3FF; }

.jasc-novedad-fila .jasc-novedad-texto { flex: 1 1 auto; }

/* Cada novedad de las Observaciones tiene 4 campos: Hora, Tipo, Dirección y Descripción. */
.jasc-nov-campo { display: flex; flex-direction: column; gap: 2px; }
.jasc-nov-campo > span { font-size: 0.72rem; font-weight: 600; color: #6b7280; }
[data-tema="oscuro"] .jasc-nov-campo > span { color: #9aa4b2; }
.jasc-nov-campo .jasc-campo { width: 100%; }
.jasc-nov-hora-campo { flex: 0 0 116px; }
.jasc-nov-tipo-campo { flex: 1 1 150px; }
.jasc-nov-direccion-campo { flex: 2 1 200px; }
.jasc-nov-descripcion-campo { flex: 3 1 240px; }
.jasc-novedad-fila > [data-accion="quitar-novedad"] { align-self: center; }

/* ================= Informes: vista previa A4, firma, modal ========= */

/* Hoja A4: siempre fondo blanco y texto oscuro (es papel), incluso en modo nocturno. */
.jasc-a4 {
	background: #FFFFFF;
	color: #333333;
	max-width: 794px; /* ancho A4 a 96 dpi */
	margin: 16px auto;
	padding: 42px 48px;
	border: 1px solid var(--jasc-borde);
	border-radius: 4px;
	box-shadow: var(--jasc-sombra);
	font-family: Georgia, "Times New Roman", serif;
	line-height: 1.5;
}

.jasc-a4 h3 {
	color: #1061CC;
	border-bottom: 1px solid #D8DEE8;
	padding-bottom: 4px;
	margin: 22px 0 10px;
	font-size: 1.05rem;
}

.jasc-a4 h4 { margin: 14px 0 6px; }
.jasc-a4 p { margin: 8px 0; text-align: justify; }
.jasc-a4 ul { margin: 8px 0 8px 22px; }

.jasc-a4-encabezado {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	border-bottom: 3px solid #1061CC;
	padding-bottom: 12px;
	margin-bottom: 14px;
}

.jasc-a4-encabezado img { height: 58px; }

.jasc-a4-titulos {
	text-align: right;
	font-size: 0.92rem;
	line-height: 1.5;
}

.jasc-a4-titulos strong { color: #1061CC; }

.jasc-a4 .jasc-a4-texto {
	width: 100%;
	background: #FBFBFB;
	color: #333333;
	border: 1px dashed #B8C4D8;
	font-family: inherit;
	font-size: 0.95rem;
	resize: vertical;
}

.jasc-a4-desarrollo {
	border: 1px dashed #B8C4D8;
	border-radius: 6px;
	padding: 6px 14px;
	background: #FBFBFB;
	min-height: 60px;
}

/* Tabla de firma: 3 columnas x 2 filas */
.jasc-a4-firma {
	width: 100%;
	border-collapse: collapse;
	margin-top: 34px;
	font-size: 0.9rem;
}

.jasc-a4-firma td {
	border: 1px solid #333333;
	padding: 14px 10px;
	text-align: center;
	height: 44px;
}

.jasc-a4-firma-etiquetas td { font-weight: 700; height: auto; padding: 8px; }

/* Botón azul de las acciones de IA */
.jasc-boton-azul-ia {
	margin: 6px 0 4px;
	padding: 8px 14px;
	border: none;
	border-radius: 8px;
	background: var(--jasc-secundario);
	color: #FFFFFF;
	font-size: 0.85rem;
	font-weight: 600;
}

.jasc-boton-azul-ia:hover { background: var(--jasc-primario); }
.jasc-boton-azul-ia[disabled] { opacity: 0.6; cursor: wait; }

.jasc-insignia-neutra {
	background: rgba(16, 97, 204, 0.1);
	color: var(--jasc-primario);
	border: 1px solid var(--jasc-primario);
}

.jasc-celda-resumen { max-width: 340px; }

/* Imágenes de los informes (novedad / caso exitoso / colaboración) */
.jasc-imagen-fila {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0;
	flex-wrap: wrap;
}

.jasc-imagen-fila .jasc-img-desc { flex: 1 1 220px; }

/* #6: cada línea de móvil adicional en los informes (Novedad/Caso/Colaboración). */
.jasc-nv-fila-movil {
	border: 1px solid #d7dee8;
	border-radius: 8px;
	padding: 12px 14px;
	margin: 10px 0;
	background: #f7f9fc;
}

.jasc-nv-fila-movil .jasc-boton-peligro { margin-top: 6px; }

/* Adjuntos de consignas: enlaces compactos en la tarjeta del calendario. */
.jasc-cs-adjuntos-mini {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 6px 0 2px;
}

.jasc-cs-adjuntos-mini a {
	font-size: 0.82rem;
	color: var(--jasc-primario);
	text-decoration: none;
}

.jasc-cs-adjuntos-mini a:hover { text-decoration: underline; }

.jasc-imagen-miniatura {
	height: 56px;
	width: 80px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--jasc-borde);
}

.jasc-a4-imagen {
	max-width: 100%;
	max-height: 420px;
	border: 1px solid #D8DEE8;
	border-radius: 4px;
}

/* Perfil del usuario */
.jasc-pf-foto-bloque {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.jasc-pf-foto {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--jasc-primario);
	background: var(--jasc-secundario);
	display: inline-block;
	flex: 0 0 96px;
}

.jasc-pf-foto-bloque input[type="file"] { margin: 8px 0; }

.jasc-pf-telefono {
	display: flex;
	gap: 8px;
}

.jasc-pf-telefono select { flex: 0 0 170px; min-width: 0; }
.jasc-pf-telefono input { flex: 1 1 auto; min-width: 0; }

.jasc-fd-check {
	display: block !important;
	font-weight: 400 !important;
	line-height: 1.5;
}

.jasc-fd-check input { margin-right: 8px; }

/* Gráficos SVG del Informe Jefatura */
.jasc-grafico-caja {
	margin: 14px 0;
	padding: 10px;
	border: 1px solid #D8DEE8;
	border-radius: 8px;
	background: #FFFFFF;
}

.jasc-grafico {
	width: 100%;
	height: auto;
	display: block;
}

.jasc-grafico .jasc-g-titulo {
	font-size: 14px;
	font-weight: 700;
	fill: #1061CC;
	font-family: Georgia, "Times New Roman", serif;
}

.jasc-grafico .jasc-g-etiqueta {
	font-size: 12px;
	fill: #333333;
	font-family: "Segoe UI", system-ui, sans-serif;
}

/* Popup de firma (modal centrado) */
.jasc-modal-fondo {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
}

.jasc-modal {
	background: var(--jasc-superficie);
	color: var(--jasc-texto);
	border-radius: 12px;
	box-shadow: var(--jasc-sombra);
	padding: 28px 32px;
	max-width: 420px;
	width: calc(100% - 40px);
	text-align: center;
}

.jasc-modal p { font-size: 1rem; line-height: 1.6; }

.jasc-modal-clave {
	width: 100%;
	margin-top: 10px;
	text-align: center;
}

/* Desplegable dentro de un modal (p. ej. inasistencia Enfermedad/Calamidad #8). */
.jasc-modal-sel {
	width: 100%;
	margin-top: 12px;
}

.jasc-modal-botones {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 18px;
}

/* Impresión: solo se imprime la hoja A4 */
@media print {
	body.jasc-app * { visibility: hidden; }
	.jasc-a4-imprimible, .jasc-a4-imprimible * { visibility: visible; }
	.jasc-a4-imprimible {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		border: none;
		box-shadow: none;
	}
	.no-imprimir { display: none !important; }
}

/* Impresión del Dashboard Ejecutivo: A4 horizontal, una pantalla por página */
@media print {
	body.jasc-imprimiendo-dash .jasc-dash,
	body.jasc-imprimiendo-dash .jasc-dash * { visibility: visible; }

	body.jasc-imprimiendo-dash .jasc-dash {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		margin: 0;
		padding: 10px 14px;
		background: #FFFFFF;
	}

	body.jasc-imprimiendo-dash .jasc-dash-controles,
	body.jasc-imprimiendo-dash .jasc-dash-nav { display: none !important; }

	/* La cabecera y los KPI viajan con la primera pantalla. */
	body.jasc-imprimiendo-dash .jasc-dash-pantalla {
		page-break-after: always;
		break-after: page;
	}
	body.jasc-imprimiendo-dash .jasc-dash-pantalla:last-child {
		page-break-after: auto;
		break-after: auto;
	}

	/* Evita cortar un gráfico a la mitad entre páginas. */
	body.jasc-imprimiendo-dash .jasc-dash-bloque,
	body.jasc-imprimiendo-dash .jasc-dash-cuadrante,
	body.jasc-imprimiendo-dash .jasc-kpi {
		break-inside: avoid;
		page-break-inside: avoid;
		box-shadow: none;
	}
}

body.jasc-imprimiendo-dash { background: #FFFFFF; }

@page jasc-horizontal { size: A4 landscape; margin: 10mm; }
body.jasc-imprimiendo-dash .jasc-dash { page: jasc-horizontal; }

/* ============ Cabecera: botones Chat en vivo y Consignas =========== */

.jasc-cabecera-derecha {
	display: flex;
	align-items: center;
	gap: 10px;
}

.jasc-boton-cabecera {
	position: relative;
	padding: 8px 14px;
	border: 1px solid var(--jasc-primario);
	border-radius: 999px;
	background: transparent;
	color: var(--jasc-primario);
	font-size: 0.85rem;
	font-weight: 600;
}

.jasc-boton-cabecera:hover {
	background: var(--jasc-primario);
	color: #FFFFFF;
}

[data-tema="oscuro"] .jasc-boton-cabecera { color: #6FB3FF; border-color: #6FB3FF; }
[data-tema="oscuro"] .jasc-boton-cabecera:hover { background: #6FB3FF; color: #10151D; }

/* Círculo rojo con los mensajes sin leer */
.jasc-insignia-chat {
	position: absolute;
	top: -8px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: #E11D2E;
	color: #FFFFFF;
	font-size: 0.7rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Migas y panel de filtros */
.jasc-miga { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }

/* Vista de Mantenimiento agrupada por estado. */
.jasc-m-grupo { margin: 0 0 22px; }
.jasc-m-grupo-titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 8px;
	font-size: 1rem;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--jasc-borde, #E4E9F2);
}
.jasc-m-grupo-conteo { color: var(--jasc-texto-suave, #888); font-weight: 600; }

.jasc-filtros-panel {
	border: 1px dashed var(--jasc-secundario);
	border-radius: 10px;
	padding: 14px;
	margin: 10px 0;
}

/* Sello de la firma electrónica dentro del casillero */
.jasc-a4-firma-datos td {
	height: 96px;
	vertical-align: middle;
}

.jasc-sello-firma {
	display: inline-block;
	font-size: 0.8rem;
	color: #444444;
	line-height: 1.5;
}

.jasc-sello-firma strong { font-size: 0.95rem; color: #1061CC; }

/* Etiqueta de adjuntos no-imagen en las listas */
.jasc-adjunto-tipo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	width: 80px;
	border-radius: 6px;
	border: 1px solid var(--jasc-borde);
	background: var(--jasc-fondo);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--jasc-secundario);
}

/* ===================== Consignas: calendario ======================= */

.jasc-cs-disposicion {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	align-items: flex-start;
}

.jasc-cs-calendario { flex: 1 1 420px; max-width: 760px; }
.jasc-cs-detalle { flex: 1 1 300px; }

/* En pantallas grandes el calendario se ve más grande y la descripción de
   la consigna queda al costado derecho (fija mientras se navega). */
@media (min-width: 1200px) {
	.jasc-cs-calendario { flex: 2 1 660px; max-width: none; }
	.jasc-cs-detalle { flex: 1 1 320px; position: sticky; top: 12px; }
	.jasc-cal-dia { min-height: 96px; }
}

.jasc-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.jasc-cal-grilla {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.jasc-cal-cabecera {
	text-align: center;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--jasc-secundario);
	padding: 4px 0;
}

.jasc-cal-dia {
	position: relative;
	min-height: 64px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border: 1px solid var(--jasc-borde);
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.82rem;
	background: var(--jasc-superficie);
	padding: 3px 3px 4px;
	overflow: hidden;
}

.jasc-cal-dia > span { font-weight: 700; padding: 0 2px; }
.jasc-cal-dia:hover { border-color: var(--jasc-primario); }
.jasc-cal-vacio { border: none; background: transparent; cursor: default; min-height: 0; }

.jasc-cal-activo {
	background: rgba(16, 97, 204, 0.12);
	border-color: var(--jasc-primario);
}
[data-tema="oscuro"] .jasc-cal-activo { background: rgba(111, 179, 255, 0.18); }

.jasc-cal-punto {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #E67E22;
}

/* Líneas horizontales de cada consigna: una franja por día del rango, con la
   hora de inicio/fin; cada consigna tiene su propio color y su detalle al
   pasar el mouse. Se apilan en la parte baja del día. */
.jasc-cal-franjas {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
}

.jasc-cal-franja {
	display: block;
	width: 100%;
	min-height: 14px;
	line-height: 14px;
	border-radius: 3px;
	color: #FFFFFF;
	font-size: 0.62rem;
	font-style: normal;
	font-weight: 600;
	padding: 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: help;
}

/* Pendientes y vigentes: tarjetas horizontales a lo ancho de la pantalla */
.jasc-cs-vigentes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.jasc-cs-vigentes .jasc-cs-item {
	flex: 1 1 340px;
	margin: 0;
}

/* Número de Memorando bajo el título institucional */
.jasc-memorando {
	font-weight: 700;
	letter-spacing: 0.02em;
}

.jasc-cs-item {
	border: 1px solid var(--jasc-borde);
	border-radius: 8px;
	padding: 10px 12px;
	margin: 8px 0;
}

.jasc-cs-item p { margin: 0 0 4px; }

.jasc-modal-consigna h3 { color: var(--jasc-primario); margin-top: 0; }
.jasc-consigna-texto { font-size: 1.05rem; white-space: pre-line; }

/* ================== Chat en vivo (panel izquierdo) ================= */

#jasc-chat-panel {
	position: fixed;
	top: var(--jasc-alto-cabecera);
	right: 0;
	bottom: 0;
	width: 360px;
	max-width: 92vw;
	background: var(--jasc-superficie);
	border-left: 1px solid var(--jasc-borde);
	box-shadow: -8px 0 28px rgba(8, 30, 70, 0.25);
	display: flex;
	flex-direction: column;
	z-index: 90;
	transform: translateX(105%);
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

#jasc-chat-panel.abierto { transform: translateX(0); }

.jasc-chat-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: linear-gradient(120deg, var(--jasc-primario), var(--jasc-secundario));
	color: #FFFFFF;
}

.jasc-chat-boton-icono {
	border: none;
	background: rgba(255, 255, 255, 0.18);
	color: inherit;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 1rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 6px;
}

.jasc-chat-boton-icono:hover { background: rgba(255, 255, 255, 0.32); }
.jasc-chat-boton-icono.grabando { background: #E11D2E; animation: jasc-pulso 1s infinite; }

@keyframes jasc-pulso {
	0% { box-shadow: 0 0 0 0 rgba(225, 29, 46, 0.5); }
	100% { box-shadow: 0 0 0 12px rgba(225, 29, 46, 0); }
}

.jasc-chat-cuerpo { flex: 1 1 auto; overflow-y: auto; background: var(--jasc-fondo); }

.jasc-chat-usuario {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	cursor: pointer;
	border-bottom: 1px solid var(--jasc-borde);
}

.jasc-chat-usuario:hover { background: var(--jasc-superficie); }

.jasc-chat-avatar-caja { position: relative; flex: 0 0 auto; }

.jasc-chat-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.jasc-chat-avatar-vacio {
	background: var(--jasc-secundario);
	color: #FFFFFF;
	font-weight: 700;
}

.jasc-chat-avatar-mini { width: 28px; height: 28px; font-size: 0.8rem; align-self: flex-end; }

.jasc-chat-presencia {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #95A5A6;
	border: 2px solid var(--jasc-superficie);
}

.jasc-chat-presencia.en-linea { background: #22C55E; }

.jasc-chat-usuario-nombre { display: flex; flex-direction: column; flex: 1 1 auto; font-weight: 600; font-size: 0.92rem; }
.jasc-chat-usuario-nombre small { color: var(--jasc-secundario); font-weight: 400; }

.jasc-chat-no-leidos {
	background: #E11D2E;
	color: #FFFFFF;
	border-radius: 999px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	font-size: 0.75rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.jasc-chat-mensajes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
}

.jasc-chat-fila { display: flex; align-items: flex-end; gap: 8px; }
.jasc-chat-fila.mio { justify-content: flex-end; }

.jasc-chat-burbuja {
	max-width: 78%;
	padding: 8px 12px;
	border-radius: 14px 14px 14px 4px;
	background: var(--jasc-superficie);
	border: 1px solid var(--jasc-borde);
	font-size: 0.9rem;
}

.jasc-chat-fila.mio .jasc-chat-burbuja {
	background: linear-gradient(135deg, var(--jasc-primario), var(--jasc-secundario));
	color: #FFFFFF;
	border: none;
	border-radius: 14px 14px 4px 14px;
}

.jasc-chat-burbuja p { margin: 0; word-break: break-word; }
.jasc-chat-burbuja small { display: block; text-align: right; opacity: 0.7; font-size: 0.68rem; margin-top: 2px; }
.jasc-chat-burbuja audio { max-width: 100%; }

.jasc-chat-imagen { max-width: 100%; border-radius: 8px; display: block; margin-bottom: 4px; }
.jasc-chat-video { max-width: 100%; border-radius: 8px; }

.jasc-chat-composer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--jasc-borde);
	background: var(--jasc-superficie);
}

.jasc-chat-composer .jasc-chat-boton-icono {
	background: var(--jasc-fondo);
	color: var(--jasc-texto);
	margin: 0;
	cursor: pointer;
}

.jasc-chat-composer input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--jasc-borde);
	border-radius: 999px;
	background: var(--jasc-fondo);
	color: var(--jasc-texto);
}

.jasc-chat-enviar {
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--jasc-primario);
	color: #FFFFFF;
	font-size: 1rem;
	cursor: pointer;
}

.jasc-chat-enviar:hover { background: var(--jasc-secundario); }

/* ============ Informe General (NJS): selección de memorandos ======= */

.jasc-njs-memos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
}

.jasc-njs-memo-bloque {
	border: 1px solid var(--jasc-borde);
	border-radius: 10px;
	padding: 10px 12px;
}

.jasc-njs-memo-bloque h4 { margin: 0 0 8px; color: var(--jasc-primario); font-size: 0.9rem; }
[data-tema="oscuro"] .jasc-njs-memo-bloque h4 { color: #6FB3FF; }
.jasc-njs-memo-acc { display: flex; gap: 6px; margin-bottom: 8px; }

.jasc-njs-memo-lista {
	max-height: 200px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.jasc-njs-memo-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	font-weight: 400;
}

/* ============ Mantenimiento: estados, descripción, TOTAL =========== */

/* Estados del registro de mantenimiento (insignias de color) */
.jasc-est-rojo { background: rgba(192, 57, 43, 0.15); color: #C0392B; border: 1px solid #C0392B; }
.jasc-est-naranja { background: rgba(230, 126, 34, 0.15); color: #B9650F; border: 1px solid #E67E22; }
.jasc-est-amarillo { background: rgba(212, 172, 13, 0.18); color: #8A6D00; border: 1px solid #D4AC0D; }
.jasc-est-verde { background: rgba(30, 132, 73, 0.15); color: #1E8449; border: 1px solid #1E8449; }
.jasc-est-morado { background: rgba(125, 60, 152, 0.15); color: #7D3C98; border: 1px solid #7D3C98; }
.jasc-est-azul { background: rgba(16, 97, 204, 0.12); color: #1061CC; border: 1px solid #1061CC; }
.jasc-celda-traza { font-size: 0.8rem; color: #6B7280; white-space: nowrap; }
[data-tema="oscuro"] .jasc-celda-traza { color: #9AA4B2; }
[data-tema="oscuro"] .jasc-est-amarillo { color: #F4D03F; }
[data-tema="oscuro"] .jasc-est-naranja { color: #F5A35C; }
[data-tema="oscuro"] .jasc-est-morado { color: #C39BD3; }
[data-tema="oscuro"] .jasc-est-azul { color: #6FB3FF; }

/* Columna Descripción: dos líneas + … con tooltip nativo */
.jasc-celda-desc { max-width: 220px; }
.jasc-desc-corta {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	cursor: help;
}

/* Resumen alineado al centro y fila TOTAL */
.jasc-tabla-centrada th, .jasc-tabla-centrada td { text-align: center; }
.jasc-tabla-centrada th:first-child, .jasc-tabla-centrada td:first-child { text-align: left; }
.jasc-fila-total td {
	border-top: 2px solid var(--jasc-primario);
	background: var(--jasc-fondo);
}

/* Asistencia: filas de inasistencia resaltadas en rojo tenue. */
.jasc-tabla tbody tr.jasc-af-aus { background: rgba(192, 57, 43, 0.08); }
.jasc-tabla tbody tr.jasc-af-aus:hover { background: rgba(192, 57, 43, 0.16); }
[data-tema="oscuro"] .jasc-tabla tbody tr.jasc-af-aus { background: rgba(224, 90, 80, 0.16); }

/* Filtro tipo checklist desplegable (Motivo, Grupo/Comp.) */
.jasc-multi { position: relative; }
.jasc-multi-btn {
	text-align: left; width: 100%; cursor: pointer;
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.jasc-multi-btn::after { content: '▾'; opacity: 0.6; }
.jasc-multi-panel {
	position: absolute; z-index: 60; top: calc(100% + 2px); left: 0; right: 0;
	background: var(--jasc-superficie); border: 1px solid var(--jasc-borde);
	border-radius: 8px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
	max-height: 260px; overflow-y: auto; padding: 6px;
}
.jasc-multi-op {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 8px; border-radius: 5px; cursor: pointer; font-weight: normal;
}
.jasc-multi-op:hover { background: var(--jasc-fondo); }
.jasc-multi-op input { margin: 0; flex: none; }
.jasc-multi-op-todos { border-bottom: 1px solid var(--jasc-borde); border-radius: 0; margin-bottom: 4px; }

/* Panel desplegable de Avisos */
#jasc-avisos-panel {
	position: fixed;
	width: 360px;
	max-width: 92vw;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--jasc-superficie);
	border: 1px solid var(--jasc-borde);
	border-radius: 12px;
	box-shadow: var(--jasc-sombra);
	z-index: 95;
}

.jasc-avisos-cabecera {
	padding: 12px 16px;
	font-weight: 700;
	color: #FFFFFF;
	background: linear-gradient(120deg, var(--jasc-primario), var(--jasc-secundario));
	border-radius: 12px 12px 0 0;
}

.jasc-aviso-item {
	padding: 12px 16px;
	border-bottom: 1px solid var(--jasc-borde);
	cursor: pointer;
}

.jasc-aviso-item:hover { background: var(--jasc-fondo); }
.jasc-aviso-item p { margin: 0 0 4px; font-size: 0.9rem; }

/* Visto verde en Acciones del Registro del Turno (Tripulación con Jefe de Patrulla) */
.jasc-visto-verde {
	color: #1E8449;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1;
	margin-right: 8px;
	cursor: help;
	vertical-align: middle;
	display: inline-block;
}

/* Revisión Vehicular: agendamiento y estados */
.jasc-rv-tablalista td { vertical-align: middle; }
.jasc-rv-tablalista .jasc-celda-acciones { text-align: left; white-space: nowrap; }
.jasc-rv-agendar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.jasc-rv-quitar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 4px;
	padding: 0;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: #C0392B;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	vertical-align: middle;
}
.jasc-rv-quitar:hover { background: #A93226; }
.jasc-rv-agendar input[type="datetime-local"] { min-width: 190px; }
.jasc-rv-estado { display: inline-flex; gap: 6px; margin-top: 6px; }
.jasc-rv-aprobar {
	background: #1E8449; color: #fff; border: none; border-radius: 8px;
}
.jasc-rv-aprobar:hover { background: #196F3D; }
.jasc-rv-rechazar {
	background: #C0392B; color: #fff; border: none; border-radius: 8px;
}
.jasc-rv-rechazar:hover { background: #A93226; }

/* Guía gris para la Descripción de un siniestro (Memorando GAF-2026-0723-M) */
.jasc-guia-siniestro {
	margin-top: 8px;
	padding: 10px 12px;
	border-left: 3px solid #9aa4b2;
	background: rgba(154, 164, 178, 0.10);
	color: #6b7280;
	font-size: 0.8rem;
	border-radius: 0 8px 8px 0;
}
.jasc-guia-siniestro strong { color: #6b7280; }
.jasc-guia-siniestro p { margin: 4px 0; }
.jasc-guia-siniestro ul { margin: 4px 0 0; padding-left: 18px; }
.jasc-guia-siniestro li { margin-bottom: 2px; }
[data-tema="oscuro"] .jasc-guia-siniestro,
[data-tema="oscuro"] .jasc-guia-siniestro strong { color: #9aa4b2; }

/* ===================== Dashboard Ejecutivo ========================= */

.jasc-dash {
	margin: -24px;              /* ocupa todo el ancho/alto del área de contenido */
	padding: 18px 22px 28px;
	min-height: calc(100vh - var(--jasc-alto-cabecera));
	background: var(--jasc-fondo);
}

.jasc-dash-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.jasc-dash-membrete {
	display: flex;
	align-items: center;
	gap: 12px;
}

.jasc-dash-membrete img { height: 42px; }
[data-tema="oscuro"] .jasc-dash-membrete img { filter: brightness(0) invert(1); }
.jasc-dash-membrete strong { display: block; color: var(--jasc-primario); font-size: 1rem; }
[data-tema="oscuro"] .jasc-dash-membrete strong { color: #6FB3FF; }
.jasc-dash-membrete small { color: var(--jasc-secundario); }

.jasc-dash-controles {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.jasc-dash-controles .jasc-campo { min-width: 0; padding: 8px 10px; }
.jasc-dash-rango { margin: 4px 0 14px; color: var(--jasc-texto); font-size: 0.9rem; }

/* KPI rápidos: fila fluida que se adapta a la resolución */
.jasc-dash-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
	margin-bottom: 18px;
}

.jasc-kpi {
	position: relative;
	background: var(--jasc-superficie);
	border: 1px solid var(--jasc-borde);
	border-radius: 14px;
	padding: 18px 20px;
	box-shadow: var(--jasc-sombra);
	overflow: hidden;
}

.jasc-kpi::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 5px;
}

.jasc-kpi-activos::before { background: linear-gradient(180deg, #1061CC, #1889C1); }
.jasc-kpi-km::before { background: linear-gradient(180deg, #7C3AED, #A855F7); }
.jasc-kpi-casos::before { background: linear-gradient(180deg, #16A085, #27AE60); }
.jasc-kpi-taller::before { background: linear-gradient(180deg, #E67E22, #C0392B); }

[data-tema="oscuro"] .jasc-kpi-activos::before { background: linear-gradient(180deg, #22D3EE, #60A5FA); }
[data-tema="oscuro"] .jasc-kpi-km::before { background: linear-gradient(180deg, #A855F7, #C084FC); }
[data-tema="oscuro"] .jasc-kpi-casos::before { background: linear-gradient(180deg, #34D399, #2DD4BF); }
[data-tema="oscuro"] .jasc-kpi-taller::before { background: linear-gradient(180deg, #FBBF24, #FB7185); }

.jasc-kpi-titulo { display: block; font-size: 0.8rem; color: var(--jasc-secundario); text-transform: uppercase; letter-spacing: 0.03em; }
.jasc-kpi-valor { display: block; font-size: 2rem; font-weight: 800; color: var(--jasc-texto); line-height: 1.2; margin: 6px 0 2px; }
.jasc-kpi-detalle { display: block; font-size: 0.82rem; color: var(--jasc-secundario); }

/* Mini-tendencia (sparkline) de 14 días dentro de la tarjeta KPI. */
.jasc-kpi-spark { display: block; margin-top: 10px; }
.jasc-kpi-spark svg { width: 100%; height: 38px; display: block; }

/* Tarjeta KPI destacada: degradado azul con texto blanco (estilo Power BI). */
.jasc-kpi-destacada {
	background: linear-gradient(135deg, #1061CC 0%, #1889C1 100%);
	border-color: transparent;
}
.jasc-kpi-destacada::before { display: none; }
.jasc-kpi-destacada .jasc-kpi-titulo,
.jasc-kpi-destacada .jasc-kpi-detalle { color: rgba(255, 255, 255, 0.85); }
.jasc-kpi-destacada .jasc-kpi-valor { color: #FFFFFF; }
[data-tema="oscuro"] .jasc-kpi-destacada { background: linear-gradient(135deg, #312E81 0%, #1D4ED8 100%); }

/* Pantalla 1 en 4 cuadrantes (Flota / Despliegue / Taller / Resultados). */
.jasc-dash-cuadrantes {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
@media (max-width: 980px) { .jasc-dash-cuadrantes { grid-template-columns: 1fr; } }

.jasc-dash-cuadrante {
	background: var(--jasc-superficie);
	border: 1px solid var(--jasc-borde);
	border-radius: 14px;
	padding: 16px 18px;
	box-shadow: var(--jasc-sombra);
}

.jasc-cuad-cab {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--jasc-borde);
}
.jasc-cuad-cab h4 { margin: 0; font-size: 1rem; color: var(--jasc-texto); }

.jasc-cuad-icono {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(16, 97, 204, 0.10);
	font-size: 1.05rem;
	flex: 0 0 34px;
}
[data-tema="oscuro"] .jasc-cuad-icono { background: rgba(96, 165, 250, 0.14); }

.jasc-cuad-sub {
	margin: 12px 0 6px;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--jasc-secundario);
}
.jasc-cuad-sub:first-child { margin-top: 0; }

/* Pantallas de navegación y gráficos */
.jasc-dash-titulo-pantalla { color: var(--jasc-primario); margin: 4px 0 14px; font-size: 1.05rem; }
[data-tema="oscuro"] .jasc-dash-titulo-pantalla { color: #6FB3FF; }

.jasc-dash-grilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	gap: 18px;
}

.jasc-dash-bloque {
	background: var(--jasc-superficie);
	border: 1px solid var(--jasc-borde);
	border-radius: 14px;
	padding: 16px 18px;
	box-shadow: var(--jasc-sombra);
}

.jasc-dash-bloque.ancho { grid-column: 1 / -1; }
.jasc-dash-bloque h4 { margin: 0 0 12px; color: var(--jasc-texto); font-size: 1rem; }
.jasc-dash-bloque h4 .jasc-d-dim-sel {
	display: inline-block;
	width: auto;
	min-width: 160px;
	margin-left: 6px;
	padding: 4px 8px;
	vertical-align: middle;
	font-size: 0.9rem;
}
.jasc-dash-grafico .jasc-svg { width: 100%; height: auto; display: block; }

/* Interacción de los gráficos (estilo Power BI): resaltado y tooltip nativo al
   pasar el mouse, y separación clara entre segmentos del donut. */
.jasc-svg .jasc-marca { transition: opacity .15s ease, filter .15s ease; cursor: default; }
.jasc-svg .jasc-marca:hover { opacity: 0.9; filter: brightness(1.07); }
.jasc-svg .jasc-seg { stroke: var(--jasc-superficie); stroke-width: 2; }

.jasc-dash-vacio { text-align: center; padding: 30px 10px; font-style: italic; }

.jasc-leyenda {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 8px;
	font-size: 0.85rem;
	color: var(--jasc-texto);
}

.jasc-leyenda i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

.jasc-dash-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 20px;
	font-weight: 600;
	color: var(--jasc-texto);
}

/* =========================== Responsive ============================ */

/* Tablet */
@media (max-width: 1024px) {
	.jasc-menu-lateral { width: var(--jasc-ancho-menu-colapsado); }
	.jasc-menu-lateral .jasc-menu-titulo { display: none; }
	.jasc-menu-lateral .jasc-menu-item { justify-content: center; padding: 13px 0; }
	.jasc-menu-lateral.expandido { width: var(--jasc-ancho-menu); position: absolute; top: var(--jasc-alto-cabecera); bottom: 0; z-index: 25; }
	.jasc-menu-lateral.expandido .jasc-menu-titulo { display: inline; }
	.jasc-menu-lateral.expandido .jasc-menu-item { justify-content: flex-start; padding: 13px 18px; }
	.jasc-menu-lateral .jasc-menu-pie { display: none; }
	.jasc-menu-lateral.expandido .jasc-menu-pie { display: block; }
}

/* Móvil (aspecto 9:16): evitar solapamientos */
@media (max-width: 640px) {
	.jasc-perfil-datos { display: none; }
	.jasc-cabecera-logo { height: 34px; }
	.jasc-contenido { padding: 14px; }
	.jasc-celdas-codigo input { width: 40px; height: 50px; font-size: 1.3rem; }
	.jasc-tarjeta-acceso { padding: 26px 18px; }
	.jasc-inicio-hero { margin: -14px; }
	.jasc-inicio-texto { padding: 20px 18px; }
}