/* ==========================================================================
   Consola CAU · SmartOLT
   Todo va con el prefijo .acs para no pelear con los estilos de WordPress.
   ========================================================================== */

/* Los colores viven en :root, no en .acs, para que también los reciban
   el login, el instalador y la pantalla de ajustes. */
:root {
	--tinta: #111a24;
	--tinta-suave: #566a7d;
	--papel: #eaeff4;
	--superficie: #ffffff;
	--linea: #d3dce5;
	--linea-fuerte: #b6c3cf;

	--fibra: #0d6e72;
	--fibra-viva: #12a3a8;
	--fibra-tenue: #e2f1f1;

	--ok: #1c7a4b;
	--alerta: #a3630a;
	--critico: #b02a20;
	--apagado: #7b8a99;

	--radio: 4px;
	--sombra: 0 1px 2px rgba(17, 26, 36, .08), 0 8px 24px -16px rgba(17, 26, 36, .35);

	--dato: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
	--texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.acs {
	font-family: var(--texto);
	color: var(--tinta);
	background: var(--papel);
	padding: 16px;
	margin: 16px 0 0;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	box-sizing: border-box;
}

.acs *,
.acs *::before,
.acs *::after { box-sizing: inherit; }

.acs :focus-visible {
	outline: 2px solid var(--fibra-viva);
	outline-offset: 2px;
}

/* Etiquetas pequeñas: el rótulo de todo el sistema. */
.acs-rotulo {
	font: 600 10px/1 var(--texto);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tinta-suave);
}

/* --------------------------------- Barra --------------------------------- */

.acs-barra {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 12px 16px;
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
}

.acs-marca {
	display: flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
}

.acs-marca__texto {
	font-size: 14px;
	letter-spacing: .02em;
}

.acs-marca__texto b {
	font-weight: 700;
	color: var(--fibra);
}

/* El punto late suave: hay red viva detrás de esta pantalla. */
.acs-marca__punto {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--fibra-viva);
	box-shadow: 0 0 0 0 rgba(18, 163, 168, .55);
	animation: acs-latido 2.6s ease-out infinite;
}

@keyframes acs-latido {
	0%   { box-shadow: 0 0 0 0 rgba(18, 163, 168, .5); }
	70%  { box-shadow: 0 0 0 9px rgba(18, 163, 168, 0); }
	100% { box-shadow: 0 0 0 0 rgba(18, 163, 168, 0); }
}

.acs-buscador { position: relative; }

.acs-buscador input {
	width: 100%;
	height: 40px;
	padding: 0 44px 0 14px;
	font: 400 15px/1 var(--texto);
	color: var(--tinta);
	background: var(--papel);
	border: 1px solid var(--linea-fuerte);
	border-radius: var(--radio);
}

.acs-buscador input:focus {
	background: var(--superficie);
	border-color: var(--fibra);
	box-shadow: 0 0 0 3px var(--fibra-tenue);
	outline: none;
}

.acs-atajo {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font: 600 11px/1 var(--dato);
	color: var(--tinta-suave);
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: 3px;
	padding: 4px 7px;
}

/* Medidor de presupuesto: el elemento que define esta herramienta. */
.acs-presupuesto {
	min-width: 148px;
	text-align: right;
}

.acs-presupuesto__cifra {
	font: 600 20px/1 var(--dato);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

.acs-presupuesto__de { color: var(--linea-fuerte); margin: 0 2px; }
#acs-tope { color: var(--tinta-suave); font-size: 15px; }

.acs-presupuesto__barra {
	position: relative;
	height: 4px;
	margin: 7px 0 5px;
	background: var(--papel);
	border-radius: 2px;
	overflow: hidden;
}

.acs-presupuesto__barra i {
	position: absolute;
	inset: 0 100% 0 0;
	background: var(--fibra-viva);
	transition: right .4s ease, background .4s ease;
}

.acs-presupuesto--medio .acs-presupuesto__barra i { background: var(--alerta); }
.acs-presupuesto--alto  .acs-presupuesto__barra i { background: var(--critico); }
.acs-presupuesto--alto  .acs-presupuesto__cifra   { color: var(--critico); }

.acs-presupuesto__pie {
	font: 600 9px/1 var(--texto);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tinta-suave);
}

/* -------------------------------- Tablero -------------------------------- */

.acs-tablero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 1px;
	margin: 16px 0;
	background: var(--linea);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	overflow: hidden;
}

.acs-dato {
	padding: 12px 14px;
	background: var(--superficie);
	border: 0;
	text-align: left;
	cursor: pointer;
	transition: background .15s ease;
}

.acs-dato:hover { background: var(--fibra-tenue); }

.acs-dato__cifra {
	display: block;
	font: 600 24px/1.1 var(--dato);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
}

.acs-dato__nombre {
	display: block;
	margin-top: 5px;
	font: 600 10px/1.2 var(--texto);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tinta-suave);
}

.acs-dato--ok .acs-dato__cifra { color: var(--ok); }
.acs-dato--baja .acs-dato__cifra { color: var(--apagado); }
.acs-dato--alerta .acs-dato__cifra { color: var(--alerta); }
.acs-dato--critico .acs-dato__cifra { color: var(--critico); }

.acs-tablero__sello {
	grid-column: 1 / -1;
	padding: 7px 14px;
	background: var(--superficie);
	font: 400 11px/1.4 var(--texto);
	color: var(--tinta-suave);
	border-top: 1px solid var(--linea);
}

/* -------------------------------- Filtros -------------------------------- */

.acs-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	align-items: center;
	margin-bottom: 12px;
}

.acs-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.acs-chip {
	padding: 6px 12px;
	font: 500 12px/1 var(--texto);
	color: var(--tinta-suave);
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: 100px;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.acs-chip:hover { border-color: var(--linea-fuerte); color: var(--tinta); }

.acs-chip.acs-chip--on {
	color: var(--superficie);
	background: var(--fibra);
	border-color: var(--fibra);
}

.acs-selects { display: flex; gap: 8px; margin-left: auto; }

.acs-selects select {
	height: 32px;
	max-width: 190px;
	padding: 0 8px;
	font: 400 12px/1 var(--texto);
	color: var(--tinta);
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
}

/* ------------------------------- Resultados ------------------------------ */

.acs-resultados {
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	overflow: hidden;
}

.acs-resultados__cabecera {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: baseline;
	padding: 10px 14px;
	border-bottom: 1px solid var(--linea);
}

.acs-conteo {
	font: 600 12px/1 var(--dato);
	font-variant-numeric: tabular-nums;
}

.acs-nota { font-size: 11px; color: var(--tinta-suave); }

.acs-tabla-envoltura { overflow-x: auto; }

.acs-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.acs-tabla th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 9px 12px;
	text-align: left;
	white-space: nowrap;
	font: 600 10px/1 var(--texto);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tinta-suave);
	background: var(--papel);
	border-bottom: 1px solid var(--linea);
}

.acs-tabla th.acs-th--orden { cursor: pointer; }
.acs-tabla th.acs-th--orden:hover { color: var(--fibra); }
.acs-tabla th.acs-num { text-align: right; }

.acs-tabla th[data-dir]::after {
	content: "↑";
	margin-left: 5px;
	color: var(--fibra);
}

.acs-tabla th[data-dir="DESC"]::after { content: "↓"; }

.acs-tabla td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--linea);
	vertical-align: middle;
}

.acs-tabla tbody tr { cursor: pointer; }
.acs-tabla tbody tr:hover { background: var(--fibra-tenue); }
.acs-tabla tbody tr.acs-fila--activa { background: var(--fibra-tenue); box-shadow: inset 3px 0 0 var(--fibra); }

.acs-abonado__nombre { font-weight: 600; }

.acs-abonado__pista {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--tinta-suave);
}

.acs-mono {
	font-family: var(--dato);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
}

.acs-num { text-align: right; }

.acs-vacio td {
	padding: 40px 14px;
	text-align: center;
	color: var(--tinta-suave);
}

/* Estados */
.acs-estado {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 500;
}

.acs-estado::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.acs-estado--online { color: var(--ok); }
.acs-estado--offline { color: var(--apagado); }
.acs-estado--los { color: var(--critico); }
.acs-estado--powerfail { color: var(--alerta); }
.acs-estado--otro { color: var(--tinta-suave); }

/* Señal */
.acs-senal--ok { color: var(--ok); }
.acs-senal--alerta { color: var(--alerta); }
.acs-senal--critico { color: var(--critico); font-weight: 600; }
.acs-senal--sin { color: var(--linea-fuerte); }

/* Paginación */
.acs-paginacion {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding: 10px 14px;
}

.acs-paginacion button {
	min-width: 32px;
	height: 28px;
	padding: 0 9px;
	font: 500 12px/1 var(--dato);
	color: var(--tinta);
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	cursor: pointer;
}

.acs-paginacion button[disabled] { opacity: .4; cursor: default; }
.acs-paginacion button.acs-pag--on { color: #fff; background: var(--fibra); border-color: var(--fibra); }

/* --------------------------------- Ficha --------------------------------- */

.acs-velo {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(17, 26, 36, .35);
}

.acs-ficha {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100001;
	width: min(560px, 100vw);
	background: var(--superficie);
	border-left: 1px solid var(--linea);
	box-shadow: -24px 0 48px -32px rgba(17, 26, 36, .5);
	transform: translateX(100%);
	transition: transform .22s cubic-bezier(.32, .72, 0, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.acs-ficha[aria-hidden="false"] { transform: translateX(0); }

.acs-ficha__cabecera {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px 14px;
	background: var(--superficie);
	border-bottom: 1px solid var(--linea);
}

.acs-ficha__titulo { flex: 1; min-width: 0; }

.acs-ficha__nombre {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.acs-ficha__sn {
	font: 500 12px/1 var(--dato);
	color: var(--tinta-suave);
}

.acs-cerrar {
	width: 30px;
	height: 30px;
	font-size: 17px;
	line-height: 1;
	color: var(--tinta-suave);
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	cursor: pointer;
}

.acs-cerrar:hover { color: var(--tinta); border-color: var(--linea-fuerte); }

.acs-seccion { padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.acs-seccion > .acs-rotulo { display: block; margin-bottom: 10px; }

/* La regla óptica: el instrumento propio de este panel. */
.acs-regla { margin-top: 4px; }

.acs-regla__valor {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 10px;
}

.acs-regla__db {
	font: 600 30px/1 var(--dato);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
}

.acs-regla__unidad { font-size: 13px; color: var(--tinta-suave); }

.acs-regla__pista {
	position: relative;
	height: 12px;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		var(--critico) 0%,
		var(--critico) 22%,
		var(--alerta) 22%,
		var(--alerta) 42%,
		var(--ok) 42%,
		var(--ok) 88%,
		var(--alerta) 88%
	);
	opacity: .85;
}

.acs-regla__aguja {
	position: absolute;
	top: -5px;
	bottom: -5px;
	width: 3px;
	margin-left: -1.5px;
	background: var(--tinta);
	border-radius: 2px;
	box-shadow: 0 0 0 2px var(--superficie);
	transition: left .3s ease;
}

.acs-regla__escala {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font: 500 10px/1 var(--dato);
	color: var(--tinta-suave);
}

/* Distancia: el tramo de fibra dibujado */
.acs-tramo {
	position: relative;
	height: 2px;
	margin: 14px 0 8px;
	background: repeating-linear-gradient(90deg, var(--linea-fuerte) 0 6px, transparent 6px 10px);
}

.acs-tramo__nodo {
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-radius: 50%;
	background: var(--superficie);
	border: 2px solid var(--fibra);
}

.acs-tramo__nodo--olt { left: 0; }
.acs-tramo__nodo--onu { right: 0; background: var(--fibra); }

.acs-tramo__etiquetas {
	display: flex;
	justify-content: space-between;
	font: 500 10px/1 var(--texto);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tinta-suave);
}

/* Rejilla de datos */
.acs-rejilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
	margin: 0;
}

.acs-rejilla > div { min-width: 0; }

.acs-rejilla dt {
	font: 600 10px/1.2 var(--texto);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tinta-suave);
	margin-bottom: 3px;
}

.acs-rejilla dd {
	margin: 0;
	font-size: 13px;
	overflow-wrap: anywhere;
}

.acs-rejilla dd.acs-mono { font-size: 12px; }

/* Acciones */
.acs-acciones { display: grid; gap: 8px; }

.acs-boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 11px 14px;
	font: 500 13px/1.2 var(--texto);
	text-align: left;
	color: var(--tinta);
	background: var(--superficie);
	border: 1px solid var(--linea-fuerte);
	border-radius: var(--radio);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.acs-boton:hover:not([disabled]) { border-color: var(--fibra); background: var(--fibra-tenue); }
.acs-boton[disabled] { opacity: .5; cursor: not-allowed; }

.acs-boton--principal {
	color: #fff;
	background: var(--fibra);
	border-color: var(--fibra);
}

.acs-boton--principal:hover:not([disabled]) { background: #0a5b5e; border-color: #0a5b5e; }

.acs-boton--riesgo { border-color: #e3c3bf; color: var(--critico); }
.acs-boton--riesgo:hover:not([disabled]) { background: #fbeeec; border-color: var(--critico); }

/* Coste en llamadas: siempre visible antes de pulsar. */
.acs-coste {
	flex: none;
	padding: 3px 7px;
	font: 600 10px/1 var(--dato);
	letter-spacing: .04em;
	color: var(--tinta-suave);
	background: var(--papel);
	border-radius: 100px;
}

.acs-boton--principal .acs-coste { color: #fff; background: rgba(255, 255, 255, .2); }

/* Formulario de clave */
.acs-form { display: grid; gap: 10px; margin-top: 12px; }

.acs-campo { display: grid; gap: 5px; }

.acs-campo label {
	font: 600 10px/1 var(--texto);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tinta-suave);
}

.acs-campo input {
	height: 38px;
	padding: 0 11px;
	font: 400 14px/1 var(--dato);
	color: var(--tinta);
	background: var(--superficie);
	border: 1px solid var(--linea-fuerte);
	border-radius: var(--radio);
}

.acs-campo input:focus {
	border-color: var(--fibra);
	box-shadow: 0 0 0 3px var(--fibra-tenue);
	outline: none;
}

.acs-campo__pista { font-size: 11px; color: var(--tinta-suave); }

.acs-fila-botones { display: flex; flex-wrap: wrap; gap: 8px; }

.acs-enlace {
	padding: 0;
	font: 500 12px/1 var(--texto);
	color: var(--fibra);
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

/* Historial */
.acs-historial { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.acs-historial li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	font-size: 12px;
	color: var(--tinta-suave);
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--linea);
}

.acs-historial time { font-family: var(--dato); white-space: nowrap; }
.acs-historial b { color: var(--tinta); font-weight: 600; }

/* --------------------------------- Avisos -------------------------------- */

.acs-avisos {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 100002;
	display: grid;
	gap: 8px;
	width: min(380px, calc(100vw - 36px));
}

.acs-toast {
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--tinta);
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-left: 3px solid var(--fibra);
	border-radius: var(--radio);
	box-shadow: 0 12px 32px -18px rgba(17, 26, 36, .6);
	animation: acs-entra .18s ease;
}

.acs-toast--error { border-left-color: var(--critico); }
.acs-toast--ok { border-left-color: var(--ok); }

@keyframes acs-entra {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.acs-aviso {
	padding: 11px 14px;
	margin: 12px 0;
	font-size: 13px;
	background: #fff;
	border: 1px solid var(--linea);
	border-left: 3px solid var(--fibra);
	border-radius: var(--radio);
}

.acs-aviso--alto { border-left-color: var(--critico); }

.acs-cargando { position: relative; }

.acs-cargando::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--fibra-viva), transparent);
	animation: acs-barrido 1.1s linear infinite;
}

@keyframes acs-barrido {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}



/* --------------------- Experiencia del hogar (ACS) ----------------------- */

.acs-experiencia {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
}

.acs-experiencia__nota {
	font: 700 13px/1 var(--dato);
	letter-spacing: .06em;
	padding: 7px 10px;
	background: var(--superficie);
	border: 1px solid currentColor;
	border-radius: 3px;
}

.acs-experiencia__detalle {
	font-size: 12.5px;
	color: var(--tinta-suave);
}

.acs-equipos {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}

.acs-equipo {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
}

.acs-equipo__info { min-width: 0; }

.acs-equipo__nombre {
	display: block;
	font-size: 13px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.acs-equipo__meta {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: var(--tinta-suave);
	overflow-wrap: anywhere;
}

.acs-equipo__senal {
	flex: none;
	display: grid;
	gap: 4px;
	justify-items: end;
	min-width: 96px;
}

.acs-equipo__senal .acs-mono { font-size: 12px; font-weight: 600; }

.acs-barrita {
	position: relative;
	width: 96px;
	height: 5px;
	background: var(--papel);
	border-radius: 3px;
	overflow: hidden;
}

.acs-barrita i {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 3px;
}

.acs-barrita--ok      { background: var(--ok); }
.acs-barrita--alerta  { background: var(--alerta); }
.acs-barrita--critico { background: var(--critico); }
.acs-barrita--sin     { background: var(--linea-fuerte); }

/* ============================ Plataforma propia ==========================
   Barra de navegación, acceso, paneles de ajustes e instalador.
   ======================================================================== */

.mon-body {
	margin: 0;
	background: #eaeff4;
	color: #111a24;
	font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.mon-main { max-width: 1400px; margin: 0 auto; padding: 0 16px 48px; }

/* -------------------------------- Barra ---------------------------------- */

.mon-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 22px;
	align-items: center;
	padding: 10px 20px;
	background: #111a24;
	color: #fff;
}

.mon-nav__marca {
	font-weight: 700;
	letter-spacing: .01em;
	color: #fff;
	text-decoration: none;
}

.mon-nav__enlaces { display: flex; gap: 16px; }

.mon-nav__enlaces a {
	padding: 4px 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .68);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.mon-nav__enlaces a:hover { color: #fff; }
.mon-nav__enlaces a.mon-nav--on { color: #fff; border-bottom-color: #12a3a8; }

.mon-nav__usuario {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-left: auto;
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
}

.mon-nav__usuario a { color: #12a3a8; text-decoration: none; }
.mon-nav__usuario a:hover { text-decoration: underline; }

/* -------------------------------- Acceso --------------------------------- */

.mon-body--entrada {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px;
}

.mon-entrada {
	width: min(360px, 100%);
	padding: 28px;
	background: #fff;
	border: 1px solid #d3dce5;
	border-radius: 4px;
	box-shadow: 0 24px 48px -32px rgba(17, 26, 36, .45);
}

.mon-entrada__marca {
	display: flex;
	gap: 9px;
	align-items: center;
	font-size: 16px;
	font-weight: 700;
}

.mon-entrada__pie {
	margin: 6px 0 22px;
	font-size: 12px;
	color: #566a7d;
}

.mon-entrada .acs-campo { margin-bottom: 14px; }

.mon-entrada__boton {
	justify-content: center;
	width: 100%;
	margin-top: 6px;
	text-decoration: none;
}

.mon-entrada__error,
.mon-alerta {
	padding: 10px 12px;
	margin-bottom: 16px;
	font-size: 13px;
	color: #b02a20;
	background: #fbeeec;
	border-left: 3px solid #b02a20;
	border-radius: 3px;
}

/* ------------------------ Paneles de ajustes ------------------------------ */

.mon-panel-wrap { max-width: 1000px; margin: 0 auto; }

.mon-panel {
	padding: 20px 22px 24px;
	margin: 18px 0;
	background: #fff;
	border: 1px solid #d3dce5;
	border-radius: 4px;
}

.mon-panel h2 {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
}

.mon-panel h3 {
	margin: 24px 0 12px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #566a7d;
}

.mon-datos { margin: 0 0 18px; padding: 0; list-style: none; font-size: 13px; }
.mon-datos li { padding: 3px 0; }

.mon-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px 18px;
	margin-bottom: 18px;
}

.mon-campo--ancho { grid-column: 1 / -1; }

.mon-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.mon-fila .acs-boton { width: auto; }

.mon-check {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 6px 0;
	font-size: 13px;
}

.mon-tabla {
	width: 100%;
	margin-bottom: 18px;
	border-collapse: collapse;
	font-size: 12.5px;
}

.mon-tabla th {
	padding: 8px 10px;
	text-align: left;
	font: 600 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #566a7d;
	background: #eaeff4;
	border-bottom: 1px solid #d3dce5;
}

.mon-tabla td {
	padding: 8px 10px;
	border-bottom: 1px solid #e6ecf1;
	vertical-align: middle;
}

.mon-tabla input[type="text"],
.mon-tabla input[type="password"] {
	width: 100%;
	height: 30px;
	padding: 0 8px;
	font: 400 12px/1 ui-monospace, Menlo, Consolas, monospace;
	border: 1px solid #d3dce5;
	border-radius: 3px;
}

.mon-acciones-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mon-acciones-fila form { display: flex; gap: 5px; align-items: center; }
.mon-fila-mini input { min-width: 130px; }

.mon-mini {
	padding: 5px 9px;
	font-size: 11px;
	color: #111a24;
	background: #fff;
	border: 1px solid #b6c3cf;
	border-radius: 3px;
	cursor: pointer;
}

.mon-mini:hover { border-color: #0d6e72; color: #0d6e72; }

.mon-panel .acs-boton { width: auto; }

/* ------------------------------ Instalador -------------------------------- */

.mon-instalador {
	width: min(720px, 100%);
	padding: 32px;
	background: #fff;
	border: 1px solid #d3dce5;
	border-radius: 4px;
	box-shadow: 0 24px 48px -32px rgba(17, 26, 36, .45);
}

.mon-instalador h1 { margin: 0 0 6px; font-size: 21px; }
.mon-instalador h2 {
	margin: 26px 0 10px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #566a7d;
}

.mon-sub { margin: 0 0 22px; color: #566a7d; }

.mon-lista { padding-left: 20px; font-size: 13.5px; line-height: 1.8; }

.mon-codigo {
	display: inline-block;
	padding: 5px 9px;
	margin: 4px 0;
	font: 400 12px/1.4 ui-monospace, Menlo, Consolas, monospace;
	background: #eaeff4;
	border: 1px solid #d3dce5;
	border-radius: 3px;
	overflow-wrap: anywhere;
}

.mon-instalador .acs-boton { width: auto; text-decoration: none; }

@media (max-width: 782px) {
	.mon-nav { padding: 10px 14px; }
	.mon-nav__usuario { width: 100%; margin-left: 0; }
	.mon-main { padding: 0 10px 32px; }
	.mon-panel { padding: 16px; }
	.mon-tabla { font-size: 12px; }
}

/* ------------------------------- Adaptable ------------------------------- */

@media (max-width: 782px) {
	.acs { padding: 12px; }

	.acs-barra {
		grid-template-columns: 1fr auto;
		grid-template-areas: "marca presupuesto" "buscador buscador";
		gap: 12px;
	}

	.acs-marca { grid-area: marca; }
	.acs-buscador { grid-area: buscador; }
	.acs-presupuesto { grid-area: presupuesto; }
	.acs-atajo { display: none; }

	.acs-selects { margin-left: 0; width: 100%; }
	.acs-selects select { flex: 1; max-width: none; }

	.acs-tabla thead { display: none; }

	.acs-tabla tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 2px 10px;
		padding: 10px 12px;
		border-bottom: 1px solid var(--linea);
	}

	.acs-tabla td { padding: 0; border: 0; }
	.acs-tabla td:nth-child(1) { grid-column: 1; grid-row: 1; }
	.acs-tabla td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
	.acs-tabla td:nth-child(3) { grid-column: 1; grid-row: 2; text-align: left; }
	.acs-tabla td:nth-child(4) { grid-column: 2; grid-row: 2; }
	.acs-tabla td:nth-child(5),
	.acs-tabla td:nth-child(6),
	.acs-tabla td:nth-child(7) { grid-column: 1 / -1; font-size: 11px; color: var(--tinta-suave); }

	.acs-rejilla { grid-template-columns: 1fr; }
	.acs-ficha { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.acs *,
	.acs *::before,
	.acs *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}