@font-face {
	font-family: "Outfit";
	src: url("outfit.ttf") format("truetype");
	font-weight: 100 900;
}

:root {
	--fondo: #05061a;
	--fondo-2: #0b0c33;
	--tarjeta: rgba(255, 255, 255, 0.05);
	--borde: rgba(255, 255, 255, 0.09);
	--texto: #f2f3ff;
	--tenue: rgba(242, 243, 255, 0.58);
	--azul: #3534ff;
	--azul-2: #2355c3;
	--verde: #2fd47c;
	--ambar: #ffb627;
	--rojo: #ff4d5e;
	--violeta: #8b7bff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--fondo);
	color: var(--texto);
	font-family: "Outfit", system-ui, sans-serif;
	font-weight: 300;
	cursor: none;
}

body {
	background:
		radial-gradient(60vh 60vh at 85% 15%, rgba(53, 52, 255, 0.22), transparent 70%),
		radial-gradient(50vh 50vh at 8% 100%, rgba(47, 44, 121, 0.35), transparent 70%),
		linear-gradient(180deg, var(--fondo), var(--fondo-2));
}

#muro {
	position: absolute;
	inset: 4vh 4.5vw;
	display: flex;
	flex-direction: column;
	gap: 2.6vh;
	transition: transform 2s ease;
}

/* --- Encabezado --- */
header { display: flex; justify-content: space-between; align-items: center; }
.marca { display: flex; align-items: center; gap: 1.6vh; }
.marca svg { height: 7.5vh; }
.nombre { font-size: 4.4vh; font-weight: 500; letter-spacing: 0.04em; }
.sub { font-size: 2.2vh; color: var(--tenue); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.4vh; }
.ahora { display: flex; align-items: center; gap: 4vh; }
.reloj { text-align: right; }
#hora { font-size: 9vh; font-weight: 200; line-height: 1; letter-spacing: 0.01em; }
#fecha { font-size: 2.2vh; color: var(--tenue); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.8vh; }
.clima-chip { font-size: 3.6vh; padding: 1.2vh 2.4vh; border-radius: 99vh; background: var(--tarjeta); border: 1px solid var(--borde); }
.clima-chip:empty { display: none; }

/* --- Banner de urgentes --- */
#urgente {
	font-size: 2.8vh;
	font-weight: 500;
	padding: 1.6vh 2.6vh;
	border-radius: 1.6vh;
	background: linear-gradient(90deg, rgba(255, 77, 94, 0.35), rgba(255, 77, 94, 0.12));
	border: 1px solid rgba(255, 77, 94, 0.6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido { 50% { border-color: rgba(255, 77, 94, 0.15); } }

/* --- Escenario de paneles --- */
#escenario { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.panel { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; display: flex; gap: 3vh; }
.panel > * { min-width: 0; }
.panel[data-panel="soporte"] { flex-direction: column; gap: 2.4vh; }
.panel.activo { opacity: 1; }
.panel[hidden] { display: none; }

h2 { font-size: 2.4vh; font-weight: 400; color: var(--tenue); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 2vh; }

.kpis { display: flex; gap: 2.4vh; flex: none; }
.kpi { flex: 1; padding: 2.2vh 3vh; border-radius: 2.4vh; background: var(--tarjeta); border: 1px solid var(--borde); display: flex; align-items: baseline; gap: 2.4vh; }
.kpi .valor { font-size: 9vh; font-weight: 200; line-height: 1; }
.kpi .etiqueta { font-size: 2.6vh; color: var(--tenue); }
.kpi.rojo.activa { background: rgba(255, 77, 94, 0.14); border-color: rgba(255, 77, 94, 0.55); }
.kpi.rojo.activa .valor { color: var(--rojo); font-weight: 400; }

.lista { list-style: none; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1.4vh; }
.lista li {
	display: flex;
	align-items: center;
	gap: 2.2vh;
	padding: 2vh 2.6vh;
	border-radius: 1.8vh;
	background: var(--tarjeta);
	border: 1px solid var(--borde);
	font-size: 2.9vh;
	min-width: 0;
}
.lista .folio { font-weight: 500; font-size: 2.4vh; padding: 0.5vh 1.4vh; border-radius: 0.9vh; background: rgba(53, 52, 255, 0.28); white-space: nowrap; }
.lista .texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista .meta { font-size: 2.2vh; color: var(--tenue); white-space: nowrap; }
.lista .vacio { justify-content: center; color: var(--tenue); }
.prio { width: 1.6vh; height: 1.6vh; border-radius: 50%; flex: none; background: var(--tenue); }
.prio.p1 { background: var(--rojo); box-shadow: 0 0 1.6vh var(--rojo); }
.prio.p2 { background: var(--ambar); }
.prio.p3 { background: var(--violeta); }

/* --- Servidores --- */
.rejilla { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, 15vh); gap: 2vh; align-content: start; }
.app { padding: 2.2vh 2.6vh; border-radius: 2vh; background: var(--tarjeta); border: 1px solid var(--borde); display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.app .arriba { display: flex; align-items: center; gap: 1.4vh; font-size: 3vh; font-weight: 400; min-width: 0; }
.app .arriba span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .abajo { font-size: 2.1vh; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foco { width: 1.8vh; height: 1.8vh; border-radius: 50%; flex: none; }
.ok .foco { background: var(--verde); box-shadow: 0 0 1.4vh var(--verde); }
.alerta .foco { background: var(--ambar); }
.desplegando .foco { background: var(--azul); animation: latido-foco 1.2s ease-in-out infinite; }
.caida { border-color: rgba(255, 77, 94, 0.55); background: rgba(255, 77, 94, 0.1); }
.caida .foco { background: var(--rojo); box-shadow: 0 0 1.4vh var(--rojo); }
@keyframes latido-foco { 50% { opacity: 0.3; } }

/* --- Hoy --- */
.hoy { flex: 1; display: flex; gap: 3vh; }
.reuniones { flex: 1.7; display: flex; flex-direction: column; min-width: 0; }
.lista .horario { font-size: 2.6vh; font-weight: 500; white-space: nowrap; width: 20vh; }
.lista .en-curso { font-size: 1.9vh; font-weight: 600; padding: 0.4vh 1.2vh; border-radius: 0.8vh; background: var(--verde); color: #06210f; letter-spacing: 0.08em; }
.clima-grande { flex: 1; padding: 3.4vh; border-radius: 2.4vh; background: var(--tarjeta); border: 1px solid var(--borde); display: flex; flex-direction: column; justify-content: center; gap: 1.4vh; }
.clima-grande .icono { font-size: 9vh; line-height: 1; }
.clima-grande .temp { font-size: 12vh; font-weight: 200; line-height: 1; }
.clima-grande .desc { font-size: 3.2vh; }
.clima-grande .detalle { font-size: 2.3vh; color: var(--tenue); line-height: 1.6; }

/* --- Sprint --- */
.sprint { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4vh; padding: 0 2vh; }
.sprint .ciclo { font-size: 3vh; color: var(--tenue); letter-spacing: 0.16em; text-transform: uppercase; }
.sprint .dias { font-size: 18vh; font-weight: 200; line-height: 0.9; }
.sprint .dias small { font-size: 4vh; color: var(--tenue); margin-left: 2vh; }
.barra { height: 3vh; border-radius: 99vh; background: var(--tarjeta); border: 1px solid var(--borde); overflow: hidden; }
.barra div { height: 100%; border-radius: 99vh; background: linear-gradient(90deg, var(--azul-2), var(--azul)); transition: width 1s ease; }
.sprint .avance { display: flex; justify-content: space-between; font-size: 2.8vh; color: var(--tenue); }

/* --- Avisos de error dentro de un panel --- */
.aviso { margin: auto; text-align: center; color: var(--tenue); font-size: 2.8vh; }

/* --- Pie --- */
footer { display: flex; justify-content: space-between; align-items: center; font-size: 2vh; color: var(--tenue); }
.puntos { display: flex; gap: 1.2vh; }
.puntos span { width: 1.2vh; height: 1.2vh; border-radius: 50%; background: var(--borde); transition: background 0.6s ease, width 0.6s ease; }
.puntos span.activo { background: var(--texto); width: 3.6vh; border-radius: 99vh; }