/*
 * Diagnóstico de los seis frentes.
 * Paleta de Marketing sin Recursos. Tipografías heredadas del tema: aquí no se
 * carga ninguna fuente ni se pide nada a un tercero.
 */

.msr-diag {
	--m: #C98A1E;
	--mt: #8A5D08;
	--ol: #5B6B45;
	--ti: #2B2119;
	--ts: #6B5D50;
	--ln: #E3DCD1;
	--cr: #EFE7D8;
	--pa: #F8F5F0;
	--ro: #8C3A2B;
	border: 1px solid var(--ln);
	border-radius: 3px;
	background: var(--pa);
	padding: clamp(18px, 4vw, 30px);
	margin: 0;
}

.msr-diag * { box-sizing: border-box; }

/* Sin esto, el display:flex de abajo gana al [hidden] del navegador y las tres
   pantallas se pintan a la vez, una debajo de otra. */
.msr-diag [hidden] { display: none !important; }

.msr-diag .msr-sec { display: flex; flex-direction: column; gap: 24px; }
.msr-diag h2, .msr-diag h3 { margin: 0; line-height: 1.25; }
.msr-diag h2 { font-size: clamp(20px, 4vw, 25px); }
.msr-diag h3 { font-size: 18px; }
.msr-diag p { margin: 0; line-height: 1.65; }
.msr-diag hr { border: 0; border-top: 1px solid var(--ln); margin: 0; }

.msr-diag .msr-eyebrow {
	font-size: 13px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ts);
	font-weight: 700;
}
.msr-diag .msr-suave { color: var(--ts); }
.msr-diag .msr-peq { font-size: 15px; }
.msr-diag [data-sub] { margin-top: 6px; }
.msr-diag .msr-tit-tabla { margin-bottom: 12px; }

.msr-diag .msr-btn {
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	background: var(--mt);
	color: #fff;
	border: 1px solid var(--mt);
	padding: 12px 22px;
	border-radius: 3px;
	cursor: pointer;
	line-height: 1.3;
}
.msr-diag .msr-btn:hover { background: var(--ti); border-color: var(--ti); }
.msr-diag .msr-btn.msr-gh { background: transparent; color: var(--ts); border-color: var(--ln); }
.msr-diag .msr-btn.msr-gh:hover { background: transparent; color: var(--ti); border-color: var(--ts); }
.msr-diag .msr-btn[disabled] { opacity: .4; cursor: not-allowed; }
.msr-diag .msr-nav { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.msr-diag .msr-barra { display: flex; flex-direction: column; gap: 8px; }
.msr-diag .msr-paso {
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--ts);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.msr-diag .msr-prog { display: flex; gap: 5px; }
.msr-diag .msr-tr { height: 4px; flex: 1 1 0; min-width: 0; background: var(--ln); border-radius: 2px; }
.msr-diag .msr-tr.ok { background: var(--m); }
.msr-diag .msr-tr.now { background: var(--ts); }

.msr-diag fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.msr-diag legend { padding: 0; font-weight: 700; font-size: 17px; line-height: 1.4; margin-bottom: 2px; }
.msr-diag .msr-ops { border: 1px solid var(--ln); border-radius: 3px; overflow: hidden; background: #fff; }
.msr-diag .msr-op {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 12px 14px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.5;
	border-top: 1px solid var(--ln);
	margin: 0;
}
.msr-diag .msr-op:first-child { border-top: 0; }
.msr-diag .msr-op:hover { background: var(--cr); }
.msr-diag .msr-op input { margin: 5px 0 0; accent-color: var(--mt); flex: 0 0 auto; width: auto; }

.msr-diag .msr-ver {
	background: #fff;
	border: 1px solid var(--ln);
	border-left: 4px solid var(--m);
	padding: clamp(16px, 3.5vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.msr-diag .msr-tabla { border: 1px solid var(--ln); border-radius: 3px; overflow: hidden; background: #fff; }
.msr-diag .msr-fila {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 14px;
	padding: 14px;
	border-top: 1px solid var(--ln);
	align-items: baseline;
}
.msr-diag .msr-fila:first-child { border-top: 0; }
.msr-diag .msr-fila .msr-nota { grid-column: 1 / -1; font-size: 15px; color: var(--ts); }

.msr-diag .msr-sello {
	font-size: 12px;
	letter-spacing: .07em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 2px;
	white-space: nowrap;
}
.msr-diag .s0 { background: #F2E0DC; color: var(--ro); }
.msr-diag .s1 { background: #F4E8CE; color: var(--mt); }
.msr-diag .s2 { background: #E4E9DC; color: var(--ol); }
.msr-diag .sna { background: transparent; color: var(--ts); border: 1px solid var(--ln); }
/* Pendiente no es lo mismo que no aplica: uno es un hueco, el otro una decisión. */
.msr-diag .spend { background: var(--ti); color: #fff; }

.msr-diag .msr-envio {
	border: 1px dashed var(--ln);
	border-radius: 3px;
	padding: clamp(16px, 3.5vw, 22px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--cr);
}
.msr-diag .msr-aviso { font-size: 14px; color: var(--ts); line-height: 1.6; }
.msr-diag .msr-copia { font-size: 14px; color: var(--ol); font-weight: 700; }
.msr-diag .msr-fallo { color: var(--ro); }

/* El campo trampa sale de la página sin usar display:none, para que un robot
   que lea el CSS no lo detecte tan fácil. */
.msr-diag .msr-trampa {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 520px) {
	.msr-diag .msr-envio .msr-btn { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
	.msr-diag .msr-sec { animation: msr-entra .2s ease-out; }
	@keyframes msr-entra { from { opacity: .5; } to { opacity: 1; } }
}