/* Colores corporativos de Proingec: azul R38 G152 B208, gris R111 G112 B114. */
:root {
	color-scheme: light dark;
	/* El tema lo decide el JavaScript y se pone en <html data-tema>. El @media de mas abajo solo
	   sirve para el PRIMER pintado, antes de que decida: asi no hay fogonazo blanco al abrir de
	   noche. Cuando hay atributo, gana el atributo. */
	--azul:      #2698D0;
	--azul-hond: #1B6E99;
	--gris:      #6F7072;
	--tinta:     #2B2A2E;
	--tinta-sua: #6F7072;
	--linea:     #E1E5EA;
	--fondo:     #F2F5F8;
	--ficha:     rgba(255,255,255,.86);
	--ficha-op:  #FFFFFF;
	--barra:     rgba(255,255,255,.92);
	--verde:     #2FA84F;
	--rojo:      #C0392B;
	--ambar:     #D98218;
	/* La barra de desplazamiento. Aqui, en :root, porque los bloques por tema no existen hasta que
	   el JavaScript pone data-tema: sin esto, en el primer pintado var(--barra-pulgar) no resuelve,
	   la declaracion es invalida y vuelve la barra NATIVA. */
	--barra-pulgar:       rgba(45,55,70,.42);
	--barra-pulgar-sobre: rgba(45,55,70,.62);
	--barra-carril:       rgba(16,32,48,.07);
	--sombra:    0 1px 2px rgba(16,32,48,.07), 0 6px 18px rgba(16,32,48,.10);
	--velo:      rgba(242,245,248,.55);   /* solo la ventana de encima: ya no hay plano de fondo */
}

/* Oscuro automatico: la tablet de una vivienda pasa del salon de dia al dormitorio de noche, y
   una pantalla en blanco a las tres de la manana deslumbra. Se respeta lo que diga el aparato. */
@media (prefers-color-scheme: dark) {
	:root {
		--tinta:     #E8EAED;
		--tinta-sua: #A3A8AF;
		--ambar:     #E9A03A;
		--linea:     #343A42;
		--fondo:     #15181C;
		--ficha:     rgba(32,36,41,.86);
		--ficha-op:  #202429;
		--barra:     rgba(24,27,31,.94);
		--sombra:    0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.45);
		--velo:      rgba(10,12,15,.62);
		--barra-pulgar:       rgba(255,255,255,.48);
		--barra-pulgar-sobre: rgba(255,255,255,.68);
		--barra-carril:       rgba(255,255,255,.08);
	}
}
/* Los controles NATIVOS (la lista que despliega un select, los campos de hora, las barras de
   desplazamiento) los pinta el navegador mirando color-scheme, no el CSS de la pagina. Si se deja
   en «light dark» los decide el SISTEMA, y con el sistema en claro y la pagina en oscuro el
   desplegable salia blanco con el texto claro encima: ilegible. Aqui se le dice que siga al tema
   de la pagina. */
html[data-tema="oscuro"] { color-scheme: dark; }
html[data-tema="claro"]  {
	color-scheme: light;
	--barra-pulgar:       rgba(45,55,70,.42);
	--barra-pulgar-sobre: rgba(45,55,70,.62);
	--barra-carril:       rgba(16,32,48,.07);
}

/* Y las opciones, a mano: algun navegador de Android hace caso al color-scheme para el fondo pero
   no para el texto. */
html[data-tema="oscuro"] select option { background: #202429; color: #E8EAED; }
html[data-tema="claro"]  select option { background: #FFFFFF; color: #2B2A2E; }

html[data-tema="oscuro"] {
	/* Sobre #15181C, un 16% de blanco daba un gris dos tonos por encima del fondo: la barra
	   estaba, pero no se veia. Lo que cuenta es el contraste, no la opacidad. */
	--barra-pulgar:       rgba(255,255,255,.48);
	--barra-pulgar-sobre: rgba(255,255,255,.68);
	--barra-carril:       rgba(255,255,255,.08);
	--tinta:     #E8EAED;
	--tinta-sua: #A3A8AF;
	--ambar:     #E9A03A;
	--linea:     #343A42;
	--fondo:     #15181C;
	--ficha:     rgba(32,36,41,.86);
	--ficha-op:  #202429;
	--barra:     rgba(24,27,31,.94);
	--sombra:    0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.45);
	--velo:      rgba(10,12,15,.62);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* El documento NO se desplaza: se desplaza `main` por dentro.

   Antes se desplazaba el documento y el body llevaba height:100%, y eso tenia dos consecuencias
   que se veian: la cabecera sticky desaparecia pasada la primera pantalla —un elemento sticky solo
   se pega mientras su bloque contenedor esta a la vista, y ese body medía justo una pantalla— y la
   barra de desplazamiento era la del DOCUMENTO, que pinta el navegador y donde manda tambien el
   marco que nos embebe. Con el desplazamiento dentro de `main`, la barra es de un elemento mio:
   la pinto yo y se acabo la discusion. */
html, body { height: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; }
.barra { flex: 0 0 auto; }

/* Que «hidden» signifique oculto.

   El atributo hidden no lo aplica el HTML: lo aplica la hoja del NAVEGADOR con [hidden]{display:none},
   y una hoja de AUTOR gana siempre a la del navegador —por origen, no por especificidad—. Asi que
   cualquier regla de aqui que ponga display (un #modal{display:grid}, un .barra{display:flex}) deja
   el elemento a la vista aunque lleve hidden. Con !important porque es la unica forma de ganarle a
   cualquier regla de autor, la de hoy y la de dentro de un año. */
[hidden] { display: none !important; }

/* La barra de desplazamiento nativa es ancha, con flechas y de los colores del sistema: sobre el
   tema oscuro es una franja clara pegada al borde. Aqui va fina, sin flechas, translucida y del
   color del tema — se ve cuando hace falta y no antes. */
/* El segundo color de scrollbar-color es el CARRIL. Y ojo: en los navegadores nuevos
   scrollbar-color manda sobre las reglas ::-webkit-*, asi que las dos declaraciones tienen que
   decir lo mismo o se vera una cosa en un navegador y otra en otro. */
* { scrollbar-width: thin; scrollbar-color: var(--barra-pulgar) var(--barra-carril); }
::-webkit-scrollbar { width: 11px; height: 11px; background: transparent; }
::-webkit-scrollbar-track { background: var(--barra-carril); border-radius: 999px; }
::-webkit-scrollbar-thumb {
	background-color: var(--barra-pulgar);
	border-radius: 999px;
	/* El borde transparente adelgaza el pulgar sin estrechar la zona donde se puede agarrar. */
	border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--barra-pulgar-sobre); }
/* Sin flechas arriba y abajo: son de otra epoca y roban sitio. */
::-webkit-scrollbar-corner, ::-webkit-scrollbar-button { background: transparent; display: none; }

html {
	scroll-behavior: smooth;
	/* Al llegar al final, el gesto NO sigue en el carrusel de paginas que hay detras: sin esto,
	   pasar el dedo en el movil te cambia de planta sin querer. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
body {
	margin: 0; background: var(--fondo); color: var(--tinta);
	font: 15px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
}

/* UNA fila que no baja de linea. El degradado fino de arriba —un velo del azul de la marca que se
   apaga hacia abajo— es lo que le da profundidad sin poner una sombra dura. */
.barra {
	position: sticky; top: 0; z-index: 20;
	background: linear-gradient(180deg, rgba(38,152,208,.11) 0%, rgba(38,152,208,0) 70%), var(--barra);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--linea);
	box-shadow: 0 2px 10px rgba(15,23,42,.05);
	padding: 8px 14px; min-height: 58px; display: flex; gap: 12px; align-items: center; flex-wrap: nowrap;
}
/* La altura la manda el TEXTO del logotipo, no la caja. El anterior llevaba «Your trustworthy
   company» en una segunda linea (proporcion 2,9:1) y el actual solo la palabra (6,6:1): a la
   misma altura, las letras salian mas del doble de grandes y la barra se comia la pantalla. */
.logo { height: 18px; width: auto; flex: 0 0 auto; }
.menu-btn {
	width: 42px; height: 42px; flex: 0 0 auto; border: 0; border-radius: 10px;
	background: transparent; color: var(--azul-hond); cursor: pointer; display: grid; place-items: center;
}
.menu-btn svg { width: 26px; height: 26px; fill: currentColor; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--fondo); }
.separa { width: 1px; height: 30px; background: var(--linea); flex: 0 0 auto; }
/* La subbarra: los mandos de la vista, en su propia fila y solo cuando la vista los tiene. */
.subbarra {
	flex: 0 0 auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
	padding: 6px 14px; background: var(--barra); border-bottom: 1px solid var(--linea);
}

/* Los mandos de la vista en la que estas (planta y buscador en la lista; pagina y zoom en el
   plano), dentro de la subbarra. */
.mandos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
@media (prefers-color-scheme: dark) {
	/* Sin version oscura del logotipo hay que ponerle fondo claro propio, porque la tipografia de
	   un logotipo suele ir en gris oscuro y sobre negro no se leeria. Con version oscura (la clase
	   la pone barra.js cuando la encuentra) no hace falta y el recuadro desaparece. */
	.logo:not(.tiene-oscuro) { background: #fff; border-radius: 7px; padding: 3px 7px; }
}
html[data-tema="oscuro"] .logo:not(.tiene-oscuro) { background: #fff; border-radius: 7px; padding: 3px 7px; }
/* El pin, el nombre grande y debajo el estado del sistema. */
.instalacion { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 0 1 auto; }
.instalacion .pin { width: 28px; height: 28px; fill: var(--azul); flex: 0 0 auto; }
.inst-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
#instalacion {
	font-weight: 800; font-size: 19px; color: var(--azul-hond); letter-spacing: -.2px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sistema { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-sua); font-weight: 500; white-space: nowrap; }
/* Verde con la conexion viva, rojo sin ella. En una pantalla de pared es el dato mas importante:
   sin conexion, todo lo que se ve es de antes. */
.bola { width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); flex: 0 0 auto; }
.bola.viva { background: var(--verde); box-shadow: 0 0 0 3px rgba(47,168,79,.22); }
/* Cuando no cabe, lo que se sacrifica es texto, nunca la fila: primero el nombre de quien ha
   entrado (quedan sus iniciales), luego el estado en letras (queda la bola). */
@media (max-width: 1150px) { #nombreUsuario { display: none; } }
@media (max-width: 640px) { #estadoSistema { display: none; } .separa { display: none; } .barra { gap: 8px; } }
/* Movil en VERTICAL (360-420 px): se van el logotipo y el reloj. El logotipo no se encogia
   —flex 0 0 auto— y empujaba fuera de la fila la campana y el usuario, que son lo unico que hay
   que poder pulsar, y el reloj se montaba encima del indicador de sitio (la hora ya esta en la
   barra del propio telefono). Se quedan el menu, donde estoy, las alarmas y quien ha entrado.
   El umbral es de ANCHO, no de dispositivo: al girar el telefono vuelven, que es lo que pidio
   Miguel. */
@media (max-width: 560px) {
	.barra .logo { display: none; }
	.barra .reloj { display: none; }
}

/* Pantalla BAJA (un movil en horizontal, que es donde mejor se ve un plano y peor cabe todo): la
   barra se encoge a una franja y suelta lo prescindible. Lo que queda es de donde estoy, si el
   equipo responde y las alarmas. */
@media (max-height: 520px) {
	.barra { min-height: 40px; padding: 3px 10px; }
	.barra .logo { max-height: 14px; }
	.barra .tema { display: none; }
	#estadoSistema { display: none; }
	.reloj { font-size: 13px; }
}
@media (max-width: 480px) { .tema { display: none; } }
/* En oscuro el logo va sobre fondo claro propio: el gris del texto no se lee sobre negro. */
@media (prefers-color-scheme: dark) {
	.logo:not(.tiene-oscuro) { background: #fff; border-radius: 6px; padding: 3px 6px; }
}
html[data-tema="oscuro"] .logo:not(.tiene-oscuro) { background: #fff; border-radius: 6px; padding: 3px 6px; }

/* Conmutador Plano / Lista. Global y arriba, como pidio Miguel: es la misma informacion vista de
   otra forma, no otro sitio al que ir. */
/* Pastilla segmentada: las opciones se ven todas y se elige en un toque. */
.conmutador { display: flex; background: var(--ficha-op); border: 1px solid var(--linea); border-radius: 999px; padding: 3px; box-shadow: var(--sombra); }
.conmutador button {
	border: 0; background: transparent; font: inherit; font-weight: 650; font-size: 13.5px;
	color: var(--tinta-sua); padding: 7px 15px; border-radius: 999px; cursor: pointer;
	display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.conmutador button svg { width: 15px; height: 15px; fill: currentColor; }
.conmutador button[aria-pressed="true"] { background: var(--azul); color: #fff; }

.derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.campana {
	position: relative; border: 0; background: transparent; font-size: 19px; cursor: pointer;
	padding: 4px 6px; line-height: 1;
}
.campana b {
	position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px;
	background: var(--rojo); color: #fff; border-radius: 999px;
	font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; padding: 0 4px;
}
.usuario {
	display: flex; align-items: center; gap: 8px; font: inherit; font-size: 13.5px; font-weight: 600;
	color: inherit; border: 0; background: transparent; cursor: pointer;
	padding: 3px 8px 3px 3px; border-radius: 999px;
}
.usuario:hover { background: var(--fondo); }
.reloj {
	font-variant-numeric: tabular-nums; font-weight: 650; font-size: 15px; letter-spacing: .5px;
	border: 0; background: transparent; color: inherit; font-family: inherit; cursor: pointer;
	padding: 4px 6px; border-radius: 8px;
}
.reloj:hover { background: var(--fondo); }
.panel .horario { display: flex; gap: 10px; padding: 4px 8px 10px; }
.panel .horario label { flex: 1; font-size: 12.5px; color: var(--tinta-sua); display: block; }
.panel .horario input {
	display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 15px;
	padding: 7px 8px; border: 1px solid var(--linea); border-radius: 9px;
	background: var(--fondo); color: var(--tinta);
}
.panel .nota { padding: 0 8px 8px; font-size: 12px; color: var(--tinta-sua); }
.tema { display: flex; background: var(--ficha-op); border: 1px solid var(--linea); border-radius: 999px; padding: 3px; }
.tema button {
	border: 0; background: transparent; font: inherit; font-size: 14px; line-height: 1;
	color: var(--tinta-sua); padding: 5px 9px; border-radius: 999px; cursor: pointer;
}
.tema button[aria-pressed="true"] { background: var(--azul); color: #fff; }
.avatar {
	width: 34px; height: 34px; border-radius: 50%; background: var(--azul); color: #fff;
	display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: .5px;
	box-shadow: 0 2px 6px rgba(15,23,42,.15);
}
/* El menu de vistas: cuelga del boton de las tres rayas. */
.panel.menu { left: 12px; right: auto; top: 62px; width: 260px; padding: 6px; }
.panel.menu button {
	display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
	border: 0; background: transparent; color: var(--tinta); font: inherit; font-size: 14.5px;
	font-weight: 600; padding: 10px 12px; border-radius: 10px; cursor: pointer;
}
.panel.menu button svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; color: var(--tinta-sua); }
.panel.menu button:hover { background: var(--fondo); }
.panel.menu button[aria-pressed="true"] { background: rgba(38,152,208,.12); color: var(--azul); }
.panel.menu button[aria-pressed="true"] svg { color: var(--azul); }
.panel.menu button.salir { color: var(--rojo); }
.panel.menu .sep { height: 1px; background: var(--linea); margin: 6px 4px; }
.buscador { flex: 1 1 160px; min-width: 120px; max-width: 320px; }
.buscador input {
	width: 100%; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px;
	font: inherit; background: var(--fondo);
}
.buscador input:focus { outline: 2px solid var(--azul); outline-offset: -1px; background: var(--ficha-op); }
.agrupar { display: flex; align-items: center; gap: 7px; color: var(--tinta-sua); font-size: 13px; }
.agrupar select {
	font: inherit; padding: 7px 10px; border: 1px solid var(--linea); border-radius: 8px;
	background: var(--ficha-op); color: var(--tinta);
}

/* El selector de planta, sobre el plano y a la izquierda. Se distingue del resto porque es el que
   manda: elige de que estas viendo los puntos. */
.planta-caja {
	display: flex; align-items: center; gap: 8px;
	background: var(--ficha-op); border: 1px solid var(--linea); border-radius: 12px;
	padding: 5px 10px 5px 12px; box-shadow: var(--sombra);
}
.planta-caja svg { width: 15px; height: 15px; fill: var(--azul); flex: 0 0 auto; }
.planta-caja select {
	border: 0; background: transparent; font: inherit; font-weight: 650; font-size: 14px;
	color: var(--tinta); padding: 3px 18px 3px 2px; max-width: 46vw;
	-webkit-appearance: none; appearance: none;
	/* La flecha se dibuja aqui: la del sistema no se puede colorear y desentona. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%236F7072'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 2px center; background-size: 9px;
}
.planta-caja select:focus { outline: none; }

/* Panel de notificaciones que abre la campana. */
.panel {
	position: fixed; top: 58px; right: 12px; z-index: 40; width: min(380px, calc(100vw - 24px));
	max-height: 70vh; overflow: auto;
	background: var(--ficha-op); border: 1px solid var(--linea); border-radius: 14px;
	box-shadow: 0 10px 40px rgba(0,0,0,.22); padding: 8px;
}
.panel h3 { margin: 6px 8px 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .7px; color: var(--tinta-sua); }
.noti { display: flex; gap: 9px; padding: 9px 8px; border-top: 1px solid var(--linea); }
.noti:first-of-type { border-top: 0; }
.noti .pip { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: var(--tinta-sua); }
/* Los niveles que manda la placa: critica | aviso | info, y el estado restablecida. */
.noti .pip.critica, .noti .pip.alarma { background: var(--rojo); }
.noti .pip.aviso  { background: var(--ambar); }
.noti .pip.info   { background: var(--azul); }
.noti .pip.restablecida { background: var(--verde); }
.noti.vieja { opacity: .85; }
.noti .notiFoto { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; cursor: pointer; background: #000; }
.panel .grupo { padding: 8px 8px 2px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--tinta-sua); }
.panel .mas { display: block; width: 100%; border: 0; border-top: 1px solid var(--linea); background: transparent; color: var(--azul); font: inherit; font-size: 13px; font-weight: 600; padding: 10px; cursor: pointer; }
.panel .mas:disabled { color: var(--tinta-sua); cursor: default; }
.noti b { display: block; font-size: 14px; font-weight: 650; }
.noti span { display: block; color: var(--tinta-sua); font-size: 12.5px; }
.noti time { color: var(--tinta-sua); font-size: 11.5px; margin-left: auto; white-space: nowrap; }
.noti .quitar {
	border: 0; background: transparent; color: var(--tinta-sua); cursor: pointer;
	font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 6px; flex: 0 0 auto;
}
.noti .quitar:hover { background: var(--fondo); color: var(--tinta); }
.panel .cab { display: flex; align-items: center; gap: 8px; margin: 6px 8px 10px; }
.panel .cab h3 { margin: 0; flex: 1; }
.panel .cab button {
	border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta-sua);
	font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
}
.panel .cab button:hover { color: var(--tinta); }
.panel .pie { padding: 8px; font-size: 11.5px; color: var(--tinta-sua); border-top: 1px solid var(--linea); }

/* El que se desplaza ocupa TODO el ancho: asi su barra sale en el borde de la ventana y no a
   media pantalla. El ancho maximo lo pone la caja de dentro, que es la que centra el contenido. */
main {
	padding: 14px;
	/* El unico que se desplaza. min-height:0 hace falta o un hijo flexible se niega a encogerse
	   por debajo de su contenido y el desplazamiento se va otra vez al documento. */
	flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
	width: 100%;
	/* Al llegar al final, el gesto NO sigue en lo que haya detras. */
	overscroll-behavior: contain;
}

/* ============================ De derecha a izquierda (árabe) ============================
   El documento entero cambia de sentido con html[dir="rtl"]; lo que estaba clavado a un lado con
   margenes o posiciones fijas se da la vuelta aqui. */
html[dir="rtl"] .derecha { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .panel { right: auto; left: 12px; }
html[dir="rtl"] .panel.menu { left: auto; right: 12px; }
html[dir="rtl"] .noti time { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .pie, html[dir="rtl"] .pie-form { justify-content: flex-start; }
html[dir="rtl"] .campo select { background-position: left 12px center; padding-right: 12px; padding-left: 38px; }