/*
 * v26 · El diagnóstico de los avisos del teléfono.
 *
 * Es una lista de comprobaciones, no una tabla: lo que importa es ver de un
 * vistazo qué está bien y qué no, y leer la explicación del que no lo está
 * sin tener que preguntar.
 */

.avisos-diagnostico h3{margin:20px 0 10px;color:var(--ink);font-size:13.5px}

.chequeo{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.chequeo li{
	display:flex;align-items:flex-start;gap:11px;padding:11px 13px;
	border:1px solid var(--line);border-radius:11px;background:var(--surface,#fff);
}
.chequeo li b{display:block;color:var(--ink);font-size:13px}
.chequeo li small{display:block;margin-top:3px;color:var(--muted);font-size:11.5px;line-height:1.5}
.chequeo-marca{
	flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
	font-size:12px;font-weight:800;line-height:1;
	background:rgba(109,129,139,.16);color:var(--muted);
}
.chequeo li.bien{border-left:3px solid #18684a}
.chequeo li.bien .chequeo-marca{background:#dff0e7;color:#18684a}
.chequeo li.aviso{border-left:3px solid var(--amber,#b8860b)}
.chequeo li.aviso .chequeo-marca{background:var(--amber-soft,#fdf3e0);color:var(--amber-ink,#8a6212)}
.chequeo li.mal{border-left:3px solid var(--red,#b3261e)}
.chequeo li.mal .chequeo-marca{background:var(--red-soft,#fdf1f0);color:var(--red,#b3261e)}

.aparatos{display:grid;gap:9px}
.aparatos article{
	display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
	padding:11px 13px;border:1px solid var(--line);border-left:3px solid var(--muted);
	border-radius:11px;background:var(--surface,#fff);
}
.aparatos article.bien{border-left-color:#18684a}
.aparatos article.aviso{border-left-color:var(--amber,#b8860b)}
.aparatos article.mal{border-left-color:var(--red,#b3261e)}
.aparatos article>div{flex:1;min-width:0}
.aparatos article b{display:block;color:var(--ink);font-size:13px}
.aparatos article small{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.5}
.aparatos .chequeo-error{color:var(--red,#b3261e)}
.aparatos form{flex:0 0 auto;margin:0}
/* .form-panel button gana por especificidad: hay que igualarla para que este
   botón no se vea como la acción principal del panel. */
.form-panel .avisos-diagnostico .quitar-aparato,
.avisos-diagnostico .quitar-aparato{
	margin:0;padding:7px 13px;border:1px solid var(--line);border-radius:9px;
	background:transparent;color:var(--muted);font-size:11.5px;font-weight:700;
}
.form-panel .avisos-diagnostico .quitar-aparato:hover,
.avisos-diagnostico .quitar-aparato:hover{border-color:var(--red,#b3261e);background:var(--red-soft,#fdf1f0);color:var(--red,#b3261e)}

@media (max-width:620px){
	.aparatos article{flex-direction:column;align-items:stretch}
	.avisos-diagnostico .quitar-aparato{width:100%}
}

/* --- Instalar Compras: una línea discreta, no un cartel --- */
.instalar-compras{
	display:flex;align-items:center;flex-wrap:wrap;gap:8px;
	margin:12px 0 0;padding:8px 12px;
	border:1px solid var(--line);border-radius:999px;background:var(--soft,#f4f8f9);
	color:var(--muted);font-size:11.5px;
}
.instalar-compras[hidden]{display:none!important}
.instalar-compras>[hidden]{display:none!important}
.instalar-compras span{flex:1;min-width:150px;line-height:1.45}
.form-panel .instalar-compras button,
.instalar-compras button{
	margin:0;padding:5px 12px;border:0;border-radius:999px;
	background:var(--amber,#b8860b);color:#fff;font-size:11px;font-weight:800;
	white-space:nowrap;cursor:pointer;
}
.instalar-compras code{
	flex-basis:100%;margin:0;padding:6px 9px;border-radius:8px;
	background:#fff;border:1px solid var(--line);
	color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
	font-size:10.5px;word-break:break-all;user-select:all;
}
.instalar-compras code[hidden]{display:none!important}