/* Visor de frentes: distribución y controles propios. */
html, body { height: 100%; }
body.pagina-frentes { display: flex; flex-direction: column; min-height: 100dvh; }
.barra-frentes { display:flex; flex-wrap:wrap; align-items:end; gap:12px; flex:none; padding:10px 28px;
                 background:var(--panel); border-bottom:1px solid var(--linea); }
.barra-frentes label { display:flex; flex-direction:column; gap:3px; color:var(--suave); font-size:12px; }
.barra-frentes label.desactivado { opacity:.45; }
.barra-frentes select, .barra-frentes input { min-width:110px; padding:6px 8px; font-size:13px; }
.barra-frentes select { min-width:220px; }
.barra-frentes select:disabled { opacity:.45; cursor:not-allowed; }
.btns-cam { display:flex; flex-wrap:wrap; align-items:end; gap:6px; }
.btns-cam button { min-height:30px; padding:6px 10px; font-size:12px; color:var(--tinta); background:var(--fondo);
                             border:1px solid var(--linea); border-radius:var(--radio); }
.btns-cam button:hover { background:var(--panel); }
.btns-cam button.activo { color:var(--sobre-acento); background:var(--acento); border-color:var(--acento); }
#wrap { position:relative; flex:1 1 auto; min-height:180px; }
#lienzo { display:block; width:100%; height:100%; }
#info { flex:none; padding:8px 28px; color:var(--suave); background:var(--panel); border-top:1px solid var(--linea); font-size:12px; line-height:1.5; }
#info b { font-weight:700; }
#error { color:var(--peligro); white-space:pre-wrap; }

@media (max-width:760px) {
  .cabecera-pagina { padding:8px 14px; }
  .barra-frentes { padding:10px 18px; }
  .barra-frentes label, .barra-frentes select { width:100%; }
  .barra-frentes input { width:100%; }
  .btns-cam { width:100%; }
}