:root {
	--bg: #0b1220;
	--card: #121a2b;
	--ink: #e8eef8;
	--mute: #9aa8c4;
	--accent: #5a9fd4;
	--ok: #3dba7a;
	--warn: #d4a017;
	--bad: #e05555;
	--rule: rgba(255,255,255,.1);
	--font: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font);
	background:
		radial-gradient(circle at top left, rgba(90,159,212,.18), transparent 40%),
		linear-gradient(180deg, #0b1220, #0e1626 60%, #0b1220);
	color: var(--ink);
}
a { color: var(--accent); text-decoration: none; }
code { font-size: .92em; color: #c5d4ea; }

.ops-login {
	display: grid;
	place-items: center;
	padding: 24px;
}
.ops-card {
	width: min(420px, 100%);
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 18px;
	padding: 28px;
	box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.ops-kicker {
	margin: 0 0 6px;
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .72rem;
	font-weight: 800;
	color: var(--accent);
}
h1 { margin: 0 0 8px; font-size: 1.6rem; }
.ops-lead { color: var(--mute); margin: 0 0 18px; line-height: 1.5; }
.ops-error {
	background: rgba(224,85,85,.12);
	border: 1px solid rgba(224,85,85,.35);
	color: #ffb4b4;
	padding: 10px 12px;
	border-radius: 10px;
}
.ops-ok {
	background: rgba(61,186,122,.12);
	border: 1px solid rgba(61,186,122,.35);
	color: #9be7bf;
	padding: 10px 12px;
	border-radius: 10px;
}
.ops-optional { font-weight: 400; opacity: .75; font-size: .85em; }
a.ops-user { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
a.ops-user:hover { color: var(--accent); }
label {
	display: block;
	margin: 12px 0;
	font-size: .92rem;
	color: var(--mute);
}
input {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--rule);
	background: #0b1220;
	color: var(--ink);
	font: inherit;
}
button, .ops-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 14px;
	padding: 11px 16px;
	border-radius: 10px;
	border: 0;
	background: var(--accent);
	color: #0b1220;
	font-weight: 800;
	cursor: pointer;
}
.ops-btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--rule);
}

.ops-top {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: end;
	padding: 28px clamp(16px, 4vw, 40px) 8px;
}
.ops-top-actions { display: flex; gap: 10px; align-items: center; }
.ops-user { color: var(--mute); font-size: .92rem; }
.ops-wrap { padding: 8px clamp(16px, 4vw, 40px) 48px; }
.ops-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}
.ops-site {
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 16px;
	padding: 18px;
}
.ops-site header {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: start;
}
.ops-site h2 { margin: 0; font-size: 1.15rem; }
.ops-meta { color: var(--mute); font-size: .88rem; }
.ops-checks { list-style: none; padding: 0; margin: 12px 0; }
.ops-checks li { margin: 4px 0; font-size: .92rem; }
.ops-checks .ok::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.ops-checks .warn::before { content: "! "; color: var(--warn); font-weight: 800; }
.ops-checks .bad::before { content: "× "; color: var(--bad); font-weight: 800; }
.ops-notes { color: var(--mute); font-size: .9rem; line-height: 1.45; }
.ops-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ops-actions .ops-btn { margin-top: 8px; font-size: .88rem; padding: 8px 12px; }

.ops-badge {
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid var(--rule);
}
.ops-badge-ok { color: var(--ok); border-color: rgba(61,186,122,.35); }
.ops-badge-limpieza, .ops-badge-pendiente { color: var(--warn); border-color: rgba(212,160,23,.35); }
.ops-badge-error { color: var(--bad); border-color: rgba(224,85,85,.35); }