/* Editor de logo: recorte en pantalla y vistas previas (usa los colores del tema ENLINEASALUD) */

.logo-editor{ width:100%; }

.logo-editor-ayuda{ font-size:.8rem; margin-top:.35rem; }
.logo-editor-original{ margin-top:.5rem; }

.logo-editor-panel{ margin-top:.75rem; }
.logo-editor-modos{ gap:.35rem; margin-bottom:.5rem; }
.logo-editor-modos .nav-link{ cursor:pointer; padding:.35rem .8rem; border:1px solid var(--ms-border, #e3e6eb); }
.logo-editor-modos .nav-link.active{ border-color:transparent; }
.logo-editor-pista{ font-size:.8rem; margin:0 0 .5rem; min-height:2.2em; }

/* la imagen a recortar: ocupa el ancho disponible y nunca se sale del cuadro */
.logo-editor-lienzo{ width:100%; max-height:340px; background:var(--ms-muted, #f1f3f6); border:1px solid var(--ms-border, #e3e6eb); border-radius:8px; overflow:hidden; }
.logo-editor-lienzo img{ display:block; max-width:100%; }

.logo-editor-acciones{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }

/* vistas previas */
.logo-editor-vistas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1rem; }
.logo-editor-vista{ display:flex; flex-direction:column; gap:.3rem; }
.logo-editor-vista-titulo{ font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ms-muted-fg, #667085); }

.le-login{ width:220px; height:100px; background:#fff; border:1px solid var(--ms-border, #e3e6eb); border-radius:12px; display:flex; align-items:center; justify-content:center; }
.le-login canvas{ width:220px; height:100px; }

.le-barra{ width:220px; height:50px; background:var(--ms-sidebar, #f3f5f8); border:1px solid var(--ms-border, #e3e6eb); display:flex; align-items:center; justify-content:center; }
.le-barra canvas{ width:220px; height:50px; }
.le-barra-cerrada{ width:57px; height:50px; }
.le-barra-cerrada canvas{ width:40px; height:40px; }

.le-pestana{ display:flex; align-items:center; gap:.45rem; width:160px; height:34px; padding:0 .7rem; background:var(--ms-card, #fff); border:1px solid var(--ms-border, #e3e6eb); border-radius:8px 8px 0 0; font-size:.78rem; color:var(--ms-fg, #1a1d23); }
.le-pestana canvas{ width:16px; height:16px; flex:0 0 auto; }
.le-pestana span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }