/**
 * shell-clone.css
 *
 * Copia fiel de shell.css (el CSS real del sitio), sin modificaciones de
 * fondo/paleta — así lo que se ve en el viewport 16:9 es exactamente lo que
 * un owner vería en producción. Solo se agregan, al final, un par de ajustes
 * de contexto para que funcione embebido dentro del viewport del builder
 * (el body real ocupa toda la ventana; acá ocupa un contenedor scrolleable).
 */

#viewportScroll { font-family: 'Public Sans', sans-serif; background: #f8f9fb; color: #1a1f36; }
#viewportScroll a { text-decoration: none; color: inherit; }

.site-navbar { background: #fff; border-bottom: 1px solid #e9ecef; padding: 14px 0; position: sticky; top: 0; z-index: 30; }

.brand { font-size: 1.4rem; font-weight: 800; color: #1a3c6e; letter-spacing: -0.02em; white-space: nowrap; }
.brand span { color: #0f5e9c; }

.nav-link-custom {
  display: flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 8px;
  font-size: .87rem; font-weight: 500; color: #6c757d; white-space: nowrap; position: relative;
  transition: background .18s, color .18s; cursor: default;
}
.nav-link-custom i { font-size: 1rem; }
.nav-link-custom:hover { background: #e8f4fd; color: #1a3c6e; }
.nav-link-custom.active { background: #e8f4fd; color: #1a3c6e; font-weight: 600; }
.nav-link-custom.active::after {
  content: ''; position: absolute; bottom: -15px; left: 8px; right: 8px; height: 2px;
  background: #0f5e9c; border-radius: 2px 2px 0 0;
}

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent;
  color: #6c757d; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .18s, color .18s;
}
.icon-btn:hover { background: #e8f4fd; color: #1a3c6e; }

.avatar-btn {
  display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 50px;
  border: 1.5px solid #e9ecef; background: transparent; cursor: pointer;
  font-family: 'Public Sans', sans-serif; font-size: .87rem; font-weight: 600; color: #1a1f36;
  transition: border-color .18s, background .18s;
}
.avatar-btn:hover { border-color: #c5e0f5; background: #e8f4fd; }

.avatar, .pd-avatar {
  border-radius: 50%; background: linear-gradient(135deg, #1a3c6e 0%, #0f5e9c 100%);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0;
}
.avatar { width: 32px; height: 32px; font-size: .82rem; }
.pd-avatar { width: 42px; height: 42px; font-size: 1rem; }
.avatar-name { padding-right: 6px; }

.profile-dropdown { min-width: 248px; border: 1px solid #e9ecef; border-radius: 12px; box-shadow: 0 8px 32px rgba(26,60,110,.10); overflow: hidden; padding: 0; }
.pd-header { display: flex; align-items: center; gap: 12px; padding: 16px; background: #f8f9fb; border-bottom: 1px dashed #e9ecef; }
.pd-name { font-size: .93rem; font-weight: 700; color: #1a1f36; }
.pd-email { font-size: .76rem; color: #6c757d; word-break: break-all; }
.pd-links { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.pd-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: .87rem; font-weight: 500; color: #1a1f36; }
.pd-link:hover { background: #e8f4fd; color: #1a3c6e; }
.pd-footer { padding: 8px; border-top: 1px dashed #e9ecef; }
.pd-logout { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: .87rem; font-weight: 500; color: #c0392b; }
.pd-logout:hover { background: #fdecea; }

.page-content { padding: 32px 0 64px; }

.impersonation-bar {
  position: sticky; top: 0; z-index: 25;
  background: #1a3c6e; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 8px 16px; font-size: .85rem;
}
.impersonation-bar i { margin-right: 4px; }

.view-404 { text-align: center; padding: 80px 16px; color: #6c757d; }
.view-404 h1 { font-size: 3rem; font-weight: 800; color: #1a3c6e; }