/*
	==========================================================================
	SINOPTICO (prefijo de modulo: sin-)
	Plano de la instalacion con las sondas colocadas encima como pastillas.
	Todo color sale de los tokens --sxr-* de io_tema.css: cero hex sueltos.
	Filosofia: estado sano silencioso (gris), problema grita (critico).
	==========================================================================
*/

/* El display de estos contenedores (flex) pisaría el display:none del atributo
   hidden con el que la plantilla los oculta; se restaura su prioridad. */
.sin-barra[hidden],
.sin-bandeja[hidden],
.sin-form-imagen[hidden],
.sin-popover[hidden] {
	display: none;
}

/* ===== Barra de filtro (complementos sobre .io_panel--filtro) ===== */

.sin-filtro .io_filtro_fila {
	align-items: flex-end;
}

/* "Actualizado hace Xs" / indicador de conexion, alineado a la derecha */
.sin-actualizado {
	margin-left: auto;
	font-size: 12px;
	color: var(--sxr-ink-400);
	white-space: nowrap;
}
.sin-actualizado--error {
	color: var(--sxr-warning);
}

/* ===== Lienzo: imagen del plano + pastillas posicionadas en % ===== */

.sin-panel {
	margin-top: 12px;
	padding: 10px;
}

.sin-lienzo {
	position: relative;
}

.sin-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sxr-radius);
	user-select: none;
	-webkit-user-drag: none;
}

/* ===== Pastilla de sonda ===== */

.sin-pill {
	position: absolute;
	transform: translate(-50%, -50%);	/* left/top en % apuntan al CENTRO de la pastilla */
	padding: 2px 9px;
	background: var(--sxr-surface);
	border: 1px solid var(--sxr-line-strong);
	border-radius: 100px;
	color: var(--sxr-ok-quiet);
	font-size: 12px;
	line-height: 1.5;
	box-shadow: var(--sxr-shadow);
	cursor: default;
	user-select: none;
	white-space: nowrap;
	touch-action: none;	/* el drag lo gestiona sinoptico.js con Pointer Events */
}
.sin-pill:focus {
	outline: 2px solid var(--sxr-focus);
	outline-offset: 1px;
}
.sin-pill-valor {
	font-weight: 600;
}
/* El nombre solo se muestra en la bandeja; sobre el plano va en tooltip */
.sin-pill-nombre {
	display: none;
	color: var(--sxr-ink-500);
	margin-left: 6px;
}

/* Alarma activa: problema grita (unico rojo de la pantalla) */
.sin-pill--alarma {
	background: var(--sxr-critical-bg);
	border-color: var(--sxr-critical);
	color: var(--sxr-critical);
	cursor: pointer;	/* clic abre el detalle de la alarma */
	animation: sin-parpadeo 1.2s ease-in-out infinite;
}
@keyframes sin-parpadeo {
	50% { box-shadow: 0 0 0 5px rgba(var(--sxr-critical-rgb), 0.25); }
}
@media (prefers-reduced-motion: reduce) {
	.sin-pill--alarma { animation: none; }
}

/* Sin lectura, o lectura demasiado antigua */
.sin-pill--sindato {
	border-style: dashed;
	color: var(--sxr-ink-400);
}

/* Tooltip CSS puro con el nombre (solo sobre el plano, no en la bandeja) */
.sin-lienzo .sin-pill:hover::after,
.sin-lienzo .sin-pill:focus::after {
	content: attr(data-nombre);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	padding: 4px 9px;
	background: var(--sxr-ink-900);
	color: var(--sxr-surface);
	border-radius: var(--sxr-radius-sm);
	font-size: 11px;
	font-family: var(--sxr-font-ui, 'Space Grotesk', Calibri, Arial, sans-serif);
	font-weight: 400;
	z-index: 30;
	pointer-events: none;
}

/* ===== Cartel al clicar una pastilla (nombre + enlaces) ===== */

.sin-popover {
	position: absolute;
	transform: translate(-50%, calc(-100% - 6px));	/* encima de la pastilla, centrado */
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	background: var(--sxr-ink-900);
	color: var(--sxr-surface);
	border-radius: var(--sxr-radius-sm);
	font-size: 11px;
	white-space: nowrap;
	z-index: 50;
	box-shadow: var(--sxr-shadow);
}
.sin-popover-icono {
	display: inline-flex;
	align-items: center;
	color: var(--sxr-surface);
}
/* El display de arriba pisaría el display:none del atributo hidden con el que
   JS oculta la campana en sondas sin alarma; se restaura su prioridad. */
.sin-popover-icono[hidden] {
	display: none;
}
.sin-popover-icono:visited { color: var(--sxr-surface); }
.sin-popover-icono:hover { color: var(--sxr-nav-accent); }
.sin-popover-icono svg { width: 16px; height: 16px; }
.sin-popover-icono--alarma,
.sin-popover-icono--alarma:visited { color: var(--sxr-critical-line); }
.sin-popover-icono--alarma:hover { color: var(--sxr-critical); }

/* Mientras el cartel esta abierto sobre una pastilla, su tooltip de hover sobra
   (selector mas especifico que el del tooltip: gana sin !important) */
.sin-lienzo .sin-pill.sin-pill--popover:hover::after,
.sin-lienzo .sin-pill.sin-pill--popover:focus::after {
	content: none;
}

/* ===== Modo edicion (clase sin--editando en #sin_app) ===== */

.sin--editando .sin-lienzo .sin-img {
	outline: 2px dashed var(--sxr-action);
	outline-offset: -2px;
}
.sin--editando .sin-pill {
	cursor: grab;
	animation: none;	/* en edicion no parpadea: se esta trabajando */
}
.sin--editando .sin-pill.sin-arrastrando {
	cursor: grabbing;
	z-index: 40;
	opacity: 0.85;
	box-shadow: 0 0 0 3px rgba(var(--sxr-action-rgb), 0.3);
}

/* Barra de acciones de edicion */
.sin-barra {
	margin-top: 12px;
	padding: 10px 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.sin-barra-sep {
	margin-left: auto;
}
.sin-barra input[type="text"] {
	border: 1px solid var(--sxr-line-strong);
	border-radius: var(--sxr-radius-sm);
	padding: 4px 8px;
}
.sin-barra input[type="text"]:focus {
	outline: none;
	border-color: var(--sxr-focus);
	box-shadow: 0 0 0 2px rgba(var(--sxr-action-rgb), 0.18);
}

/* Confirmacion breve tras guardar */
.sin-guardado {
	font-size: 12px;
	color: var(--sxr-ok-conf);
	transition: opacity 0.6s ease;
}
.sin-guardado--oculto {
	opacity: 0;
}

/* Bandeja de sondas sin colocar (solo visible en edicion) */
.sin-bandeja {
	margin-top: 12px;
	padding: 10px 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	border: 1px dashed var(--sxr-line-strong);
	box-shadow: none;
}
.sin-bandeja-titulo {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sxr-ink-400);
	margin-right: 6px;
}
.sin-bandeja .sin-pill {
	position: static;
	transform: none;
}
.sin-bandeja .sin-pill .sin-pill-nombre {
	display: inline;
}
.sin-bandeja-vacia {
	font-size: 12px;
	color: var(--sxr-ink-400);
}

/* Formulario de subir/cambiar imagen (plegable) */
.sin-form-imagen {
	margin-top: 12px;
	padding: 10px 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	border-left: 4px solid var(--sxr-action);
}
.sin-form-imagen input[type="text"] {
	border: 1px solid var(--sxr-line-strong);
	border-radius: var(--sxr-radius-sm);
	padding: 4px 8px;
}

/* Estado vacio: instalacion sin sinopticos */
.sin-vacio {
	margin-top: 12px;
	padding: 40px 20px;
	text-align: center;
	color: var(--sxr-ink-500);
}