/*
	================================================================
	TEMA VISUAL SXR (2027) - "estado sano silencioso, problema grita"
	================================================================
	Especificacion: doc/2027 cambios visuales/sistema_color.html y
	prototipos *_conservador.html. Plan: PLAN_implementacion_via_conservadora.md

	Este archivo se carga DESPUES de io.css (ver plantillas/comun/css.php):
	- Define los tokens nuevos del sistema (--sxr-*).
	- Remapea la paleta legacy --io-color-* a los tokens nuevos, de modo
	  que todo el CSS existente que ya usa var(--io-color-*) se re-pinta
	  en cascada sin tocarlo. Los valores de io.css quedan como fallback.
	- Tipografia auto-alojada (Space Grotesk para UI, JetBrains Mono para
	  datos numericos) y ajustes base de componentes transversales.

	Regla de color del sistema: rojo solo para critico real; ambar para
	atencion; estado sano en gris tranquilo; azul solo para interaccion;
	el verde de marca solo identifica (logo).
*/

/*
	===================================
	TIPOGRAFIA AUTO-ALOJADA (sin CDN)
	===================================
	Fuentes variables: un solo woff2 cubre todos los pesos.
*/
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('/comun_www/fonts/SpaceGrotesk-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('/comun_www/fonts/SpaceGrotesk-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url('/comun_www/fonts/JetBrainsMono-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url('/comun_www/fonts/JetBrainsMono-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/*
		TOKENS DEL SISTEMA (--sxr-*)
		Nombres semanticos: dicen para que sirve el color, no que color es.
	*/

	/* Neutros: escala fria ("frost"). Es el lienzo, casi todo vive aqui */
	--sxr-ink-900: #101820;          /* Texto principal */
	--sxr-ink-700: #2f3e4a;          /* Texto enfatizado secundario */
	--sxr-ink-500: #5a6b78;          /* Texto secundario */
	--sxr-ink-400: #7d8d99;          /* Texto atenuado / pistas */
	--sxr-line: #e3e9ee;             /* Reglas y bordes suaves */
	--sxr-line-strong: #c9d3da;      /* Bordes de controles */
	--sxr-surface: #ffffff;          /* Superficie de tarjetas/tablas */
	--sxr-surface-sunk: #f3f6f8;     /* Superficie hundida (pills, cabeceras suaves) */
	--sxr-surface-frost: #eef3f6;    /* Fondo de pagina */

	/* Marca: solo identidad, nunca estado ni accion */
	--sxr-brand-green: #6da80a;      /* Verde de marca (solo logo/identidad) */
	--sxr-brand-green-dark: #5c8f08; /* Verde de marca, variante oscura */
	--sxr-brand-navy: #0d3b66;       /* Navy de marca: cabeceras (web y tablas) */
	--sxr-nav-link: #bcd0e4;         /* Enlaces del menu sobre navy */
	--sxr-nav-accent: #9bd227;       /* Acento del menu (activo/hover) y X del logo */

	/* Estado: cada color un unico significado en toda la web */
	--sxr-critical: #d92d20;         /* Critico / alarma activa */
	--sxr-critical-rgb: 217, 45, 32; /* Para rgba() (halos, sombras criticas) */
	--sxr-critical-hover: #b42318;   /* Critico, hover de boton */
	--sxr-critical-bg: #fef3f2;      /* Fondo critico suave */
	--sxr-critical-line: #fda29b;    /* Borde critico suave */
	--sxr-warning: #dc6803;          /* Atencion / advertencia (texto) */
	--sxr-warning-bg: #fffaeb;       /* Fondo de atencion */
	--sxr-warning-line: #fec84b;     /* Borde de atencion */
	--sxr-ok-quiet: var(--sxr-ink-500); /* Sano / normal: gris silencioso (= ink-500; era #6a7783) */
	--sxr-ok-conf: #16a34a;          /* Confirmacion puntual (ej: "tipo actual") */
	--sxr-ok-conf-bg: #edfbf0;       /* Fondo de confirmacion */
	/* Frio: lectura por debajo del umbral "baja" en la tabla de lecturas.
	   Azul calmado, distinto del azul de accion (que solo es para interaccion). */
	--sxr-cold-bg: #e1ecfb;          /* Fondo de celda por debajo de baja */
	--sxr-cold-line: #9cc3ee;        /* Borde de celda por debajo de baja */
	--sxr-cold-ink: #1d4e89;         /* Texto de celda por debajo de baja */

	/* Accion: solo lo que se pulsa (enlaces, botones, foco) */
	--sxr-action: #1564bf;
	--sxr-action-hover: #0f4f99;
	--sxr-action-bg: #eef4fb;        /* Fondo de interaccion / hover suave */
	--sxr-action-rgb: 21, 100, 191;  /* Para rgba() (focos, sombras) */
	--sxr-focus: #4a90d9;            /* Anillo de foco de teclado */

	/* Tablas: heredan de los neutros del sistema (eran tonos propios casi identicos) */
	--sxr-table-zebra: var(--sxr-surface-sunk); /* era #eef3f8 */
	--sxr-table-hover: var(--sxr-action-bg);    /* era #e8f3f9 */

	/*
		Tipografia: dos familias, un unico sitio donde se declaran.
		--sxr-font-ui   texto de interfaz (rotulos, cabeceras, botones, prosa)
		--sxr-font-mono datos del sistema (temperaturas, fechas, duraciones, IPs):
		                monoespaciada para que las cifras alineen en columna.
		Se usan siempre como var(--sxr-font-*, <familia literal>): el fallback
		mantiene la fuente correcta en las paginas que cargan io.css sin este
		fichero (ver plantillas/comun/css_presentacion.php).
	*/
	--sxr-font-ui: 'Space Grotesk', Calibri, Arial, sans-serif;
	--sxr-font-mono: 'JetBrains Mono', Consolas, monospace;

	/* Forma */
	--sxr-radius: 8px;
	--sxr-radius-sm: 5px;
	--sxr-shadow: 0 1px 2px rgba(16, 24, 32, 0.05), 0 4px 16px rgba(16, 24, 32, 0.05);

	/* Frame centrado (rediseno conservador): ancho de la columna de contenido y
	   gutter lateral. Las barras siguen a todo el ancho (fondo/lineas a sangre),
	   pero su contenido se alinea a esta columna usando el gutter como padding. */
	--sxr-wrap: 1340px;
	--sxr-gutter: max(18px, calc((100% - var(--sxr-wrap)) / 2 + 18px));

	/* Paleta legacy --io-color-* ELIMINADA (2026-06-24): el :root de io.css se
	   vacio y todos los usos de var(--io-color-*) se migraron a tokens --sxr-*
	   directamente, asi que el remapeo puente ya no hace falta. */
}

/*
	==========
	BASE GLOBAL
	==========
	Solo familia y colores; el tamano base (medium) no se toca para no
	descolocar los layouts existentes basados en em.
*/
body {
	font-family: var(--sxr-font-ui, 'Space Grotesk', Calibri, Arial, sans-serif);
	background-color: var(--sxr-surface-frost);
	color: var(--sxr-ink-900);
}

/* Datos numericos (temperaturas, fechas, duraciones, identificadores) */
.io_mono {
	font-family: var(--sxr-font-mono, 'JetBrains Mono', Consolas, monospace);
}

/* Foco de teclado visible siempre */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid var(--sxr-focus);
	outline-offset: 2px;
}

/*
	==================================
	BADGE DE ESTADO (componente comun)
	==================================
	Pildora de estado legible (sustituye iconos con varios significados).
	Uso: <span class="io_badge io_badge--crit">Activa</span>
*/
.io_badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	padding: 1px 7px;
	border-radius: 100px;
	border: 1px solid transparent;
	white-space: nowrap;
	vertical-align: middle;
}
.io_badge--crit {
	background: var(--sxr-critical-bg);
	color: var(--sxr-critical);
	border-color: var(--sxr-critical-line);
}
.io_badge--warn {
	background: var(--sxr-warning-bg);
	color: var(--sxr-warning);
	border-color: var(--sxr-warning-line);
}
.io_badge--ok {
	background: var(--sxr-surface-sunk);
	color: var(--sxr-ok-quiet);
	border-color: var(--sxr-line-strong);
}
.io_badge--conf {
	background: var(--sxr-ok-conf-bg);
	color: var(--sxr-ok-conf);
	border-color: var(--sxr-ok-conf);
}

/* Enlace "Ver seguimiento del dispositivo": navegacion con icono, no boton
   relleno. Compartido por la grafica de lecturas y el detalle de alarma, para
   que se vea igual en ambos. */
.io_enlace_seguimiento {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 7px;
	font-size: 13px;
	font-weight: 500;
	color: var(--sxr-action, #1564bf);
	text-decoration: none;
}
.io_enlace_seguimiento:hover {
	text-decoration: underline;
}

/* Icono de accion (ojo "ver", etc.): azul de accion, sin recuadro, con un leve
   fondo al pasar el raton. Clase comun para que el mismo icono se vea igual en
   dispositivos, listado de alarmas y detalle de alarma. El SVG usa currentColor. */
.io_icono_accion {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--sxr-radius-sm, 5px);
	color: var(--sxr-action, #1564bf);
	cursor: pointer;
	text-decoration: none;
}
.io_icono_accion:visited { color: var(--sxr-action, #1564bf); }
.io_icono_accion:hover {
	background: var(--sxr-action-bg, #eef4fb);
	color: var(--sxr-action, #1564bf);
}
.io_icono_accion svg { width: 18px; height: 18px; }

/*
	=====================================
	RETOQUES DE COMPONENTES TRANSVERSALES
	=====================================
*/

/* Botones: forma del sistema (los colores ya llegan por variable) */
.io_boton,
.io_boton:visited,
.io_boton_critico,
.io_boton_critico:visited,
.io_boton_destacado,
.io_boton_destacado:visited {
	border-radius: var(--sxr-radius-sm);
	padding: 7px 13px;
	font-weight: 600;
}

/* Variante "fantasma": accion secundaria (borde, sin relleno) */
.io_boton--ghost,
.io_boton--ghost:visited {
	background-color: var(--sxr-surface);
	border-color: var(--sxr-line-strong);
	color: var(--sxr-action);
}
.io_boton--ghost:hover {
	background-color: var(--sxr-action-bg);
	border-color: var(--sxr-line-strong);
	color: var(--sxr-action);
}

/* Paneles/tarjetas */
.io_panel {
	border-radius: var(--sxr-radius);
	background-color: var(--sxr-surface);
	box-shadow: var(--sxr-shadow);
}

/*
	Tarjeta contenedora de un listado (borde, esquinas redondeadas y sombra).
	El overflow:hidden recorta las esquinas cuadradas de la cabecera navy.
	Reutilizable en cualquier listado: basta envolver <table>(+paginador) en
	<div class="io_tablacard">. La tabla interior cede su borde a la tarjeta.
*/
.io_tablacard {
	background-color: var(--sxr-surface);
	border: 1px solid var(--sxr-line);
	border-radius: var(--sxr-radius);
	box-shadow: var(--sxr-shadow);
	overflow: hidden;
}
.io_tablacard > .io_listado {
	border: 0;
	margin: 0;
}
/* Paginador dentro de la tarjeta: separador superior sobrio */
.io_tablacard > .io-pager {
	padding-left: 14px;
	padding-right: 14px;
	border-top: 1px solid var(--sxr-line);
}

/* Listados: bordes duros grises -> linea suave del sistema */
.io_listado {
	border-color: var(--sxr-line);
	background-color: var(--sxr-surface);
}
.io_listado th {
	border-right-color: rgba(255, 255, 255, 0.12);
	border-bottom-color: var(--sxr-brand-navy);
	font-size: 0.85em;
	letter-spacing: 0.02em;
}
.io_listado td {
	border-right-color: var(--sxr-line);
	border-bottom-color: var(--sxr-line);
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}

/*
	==========================================
	PAGINACION SOBRIA (envoltura .io-pager)
	==========================================
	io_html_paginacion() envuelve su salida en .io-pager (F2);
	los enlaces internos se visten como botones discretos.
*/
.io-pager {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 9px 4px;
	font-size: 0.9em;
	color: var(--sxr-ink-500);
}
.io-pager .io_enlace {
	padding: 4px 9px;
	border: 1px solid var(--sxr-line-strong);
	border-radius: var(--sxr-radius-sm);
	background: var(--sxr-surface);
	color: var(--sxr-ink-700);
	text-decoration: none;
	cursor: pointer;
}
.io-pager .io_enlace:hover {
	background: var(--sxr-action-bg);
	color: var(--sxr-action);
}
.io-pager .io-pager-actual {
	font-weight: 600;
	color: var(--sxr-ink-900);
}
/* Contador "Mostrando X-Y de N": a la izquierda, empuja los enlaces a la derecha */
.io-pager .io-pager-info {
	margin-right: auto;
	color: var(--sxr-ink-500);
}

/*
	==========================================
	LOGIN SOBRE CABECERA NAVY (legibilidad)
	==========================================
	Los azules oscuros de io.css (#003d7a) serian ilegibles sobre navy.
*/
.io_acceso_usuario,
.io_acceso_clave {
	color: var(--sxr-nav-link);
}
.io_acceso_usuario input,
.io_acceso_clave input {
	color: var(--sxr-ink-900);
	border: 1px solid var(--sxr-line-strong);
	border-radius: var(--sxr-radius-sm);
}

/*
	======================================================
	PANEL DE FILTRO (componente unificado: io_panel--filtro)
	======================================================
	El panel de filtros que encabeza un listado. Unifica las 4 variantes que
	habia (#filtro de alarmas, .div_filtro de dispositivos, .div_informes de
	informes, .div_filtros_1 de lecturas). Se compone con las clases comunes:

	  <div class="io_panel io_panel--filtro">           contenedor (borde, sombra, acento azul, espaciado)
	    <div class="io_filtro_fila io_filtro_fila--sep"> fila superior (con separador inferior)
	      <div class="io_filtro_campo">                  campo: label encima + control
	        <label class="io_filtro_etiqueta">…</label>  (rotulo eyebrow, en io_formularios.css)
	        <select|input>…
	      <div class="io_filtro_checks">                 grupo de checkboxes en linea
	        <label class="io_filtro_check"><input ...> …
	    <div class="io_filtro_fila">                      fila avanzada (sin separador)
	      …

	Los campos .io_filtro_campo / .io_filtro_etiqueta ya viven en io_formularios.css.
	El acento azul lo aporta esta clase (no hace falta anadir io_panel--acento).
*/
.io_panel--filtro {
	margin: 0 0 1em 0;
	padding: 1em;
	border-left: 4px solid var(--sxr-action);
}
/* Fila de campos en horizontal que envuelve (selects, fechas, buscador) */
.io_filtro_fila {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1em 1.5em;
}
/* Variante con separador inferior (p. ej. fila rapida sobre la avanzada) */
.io_filtro_fila--sep {
	align-items: center;
	padding-bottom: 0.75em;
	margin-bottom: 0.75em;
	border-bottom: 1px solid var(--sxr-line);
}
/* El buscador de texto ocupa el espacio libre de su fila, con tope sensato */
.io_filtro_fila .io_filtro_campo--ancho {
	flex: 1 1 320px;
	max-width: 560px;
}
.io_filtro_fila .io_filtro_campo--ancho input {
	width: 100%;
}
/* Grupo de checkboxes en linea */
.io_filtro_checks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1.5em;
}
.io_filtro_check {
	display: flex;
	align-items: center;
	gap: 0.25em;
}
.io_filtro_check label {
	font-weight: 500;
	font-size: 0.9em;
	cursor: pointer;
}
/* Inputs/selects del filtro: borde, radio y anillo de foco unicos del sistema */
.io_panel--filtro input[type="text"],
.io_panel--filtro input[type="date"],
.io_panel--filtro select {
	padding: 4px 8px;
	border: 1px solid var(--sxr-line-strong);
	border-radius: var(--sxr-radius-sm);
	font-size: inherit;
}
.io_panel--filtro input[type="text"]:focus,
.io_panel--filtro input[type="date"]:focus,
.io_panel--filtro select:focus {
	outline: none;
	border-color: var(--sxr-action);
	box-shadow: 0 0 0 2px rgba(var(--sxr-action-rgb), 0.2);
}
.io_panel--filtro input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}
/* Pareja de fechas "inicio - fin" en una fila */
.io_filtro_fechas {
	display: flex;
	align-items: center;
	gap: 0.5em;
}