/* 14/10/2026 · SOLINFOR · Botón «Probar la demo — sin registrarse» (portada y fichas de cada programa).
   Las demos son instalaciones aparte con datos inventados: https://control.solinfor-srv.eu:8081/demo/?app=<clave>.
   Va después de solinfor-contraste.css. Para quitar los botones basta con quitar los bloques .demo-prueba del HTML. */
.app-btn.demo { background: #ffcf3a; color: #0b2a4a !important; border: 2px solid #0b2a4a; box-shadow: 0 4px 0 #0b2a4a; font-size: 17px; padding: 13px 22px; }
.app-btn.demo:hover { background: #ffdb6b; }
.app-btn.demo:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b2a4a; }
.app-btn.demo::after { content: "↗"; font-weight: 900; margin-left: 2px; }

.demo-prueba { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; }
.demo-prueba .demo-nota, p.demo-nota { margin: 0; font-size: 15px; line-height: 1.4; }
.app-hero .demo-prueba .demo-nota { color: #fff; font-size: 16px; }
.demo-prueba.centrado { justify-content: center; margin: 0 0 18px; }
.demo-prueba.centrado .demo-nota { flex-basis: 100%; text-align: center; color: #3c4b5c; }
.ventajas-cta .demo-prueba { justify-content: center; margin: 4px 0 12px; }
.ventajas-cta .demo-prueba .demo-nota { flex-basis: 100%; color: #fff; }

/* Tarjetas de la portada: el botón de la demo debajo de «Ver …» y la nota pequeña */
.app-card-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.app-card-botones .app-btn.demo { font-size: 15px; padding: 10px 16px; }
.app-card-body p.demo-nota { font-size: 14px !important; color: #4a5a6b; margin: 8px 0 0; }

/* La demo del panel del dueño (fichas de SOL-TALLER y SOL-BÁSCULAS) */
.demo-panel { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: center; background: #0c336d; color: #fff; border-radius: 18px; padding: 18px; margin-top: 22px; }
.demo-panel img { width: 100%; border-radius: 12px; display: block; }
.demo-panel h3 { margin: 0 0 6px; font-size: 21px; color: #fff; }
.demo-panel p { margin: 0 0 14px; color: #e3f0ff; }
.demo-panel .app-btn.sec { background: #fff; }

@media (max-width: 720px) {
  .demo-prueba .app-btn.demo, .app-card-botones .app-btn.demo { display: block; flex: 1 1 100%; text-align: center; }
  .demo-panel { grid-template-columns: 1fr; }
}