/* assets/css/topbar.css */

/* :root{ --eh-topbar-h: 50px; } */

.eh-topbar{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--eh-topbar-h);
  display: grid; grid-template-columns: 1fr minmax(280px,600px) 1fr;
  align-items: center; gap: 12px;
  padding: 0 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  z-index: 1239;
}
body{ padding-top: var(--eh-topbar-h); }
body.admin-bar .eh-topbar{ top: 0px; }
body.admin-bar{ padding-top: calc(var(--eh-topbar-h) + 50px); }

/* Ajuste con sidebar */
@media (min-width: 992px){
  body.has-eh-sidebar .eh-topbar{ left: var(--eh-sidebar-w); }
  body.has-eh-sidebar.sidebar-collapsed .eh-topbar{ left: var(--eh-sidebar-wc); }
}

.eh-topbar-left{ display:flex; align-items:center; gap:10px; }
.eh-topbar-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; border:0; background:#fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.08); cursor:pointer;
}
.eh-topbar-logo{ font-weight:800; color:#0b0f14; text-decoration:none; }

/* Search centered */
.eh-topbar-search{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px;
  padding: 0 12px; height:40px;
}
.eh-topbar-search input{
  border:0; outline:0; width:100%; background:transparent;
}

/* Right actions */
.eh-topbar-right{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.eh-topbar-icon{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; background:#fff;
  border:1px solid rgba(0,0,0,.06);
}
.eh-topbar-icon:hover{ background:#f6f8fb; }
.eh-topbar-notif .eh-badge{
  position:absolute; top:-4px; right:-4px;
  background:#ef4444; color:#fff; font-size:11px; font-weight:700;
  padding:3px 6px; border-radius:999px; line-height:1;
}
.eh-topbar-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; overflow:hidden; border:1px solid rgba(0,0,0,.06);
  background:#fff;
}
.eh-topbar-avatar img{ width:100%; height:100%; object-fit:cover; }

/* Profile dropdown */
.eh-topbar-profile{ position:relative; }
.eh-profile-menu{
  position:absolute; right:0; top:48px; min-width:220px; padding:8px;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  display:none;
}
.eh-profile-menu a, .eh-profile-menu button{
  width:100%; display:flex; align-items:center; gap:8px;
  padding:10px 12px; border:0; background:transparent; cursor:pointer; text-align:left;
}
.eh-profile-menu a:hover, .eh-profile-menu button:hover{ background:#f6f8fb; }
.eh-topbar-profile.open .eh-profile-menu{ display:block; }

/* Lucide SVG */
.eh-topbar svg{ width:20px; height:20px; stroke:currentColor; stroke-width:2; fill:none; display:block; }

/* Command palette */
.eh-cmd-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1200;
  display:flex; align-items:flex-start; justify-content:center; padding-top:10vh;
}
.eh-cmd{ width:min(720px,92vw); background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden; }
.eh-cmd-head{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.08); }
.eh-cmd-head input{ flex:1; border:0; outline:0; height:36px; font-size:16px; }
.eh-cmd-head kbd{ background:#f1f5f9; border-radius:6px; padding:2px 6px; font-size:12px; }
.eh-cmd-list{ list-style:none; margin:0; padding:6px; max-height:50vh; overflow:auto; }
.eh-cmd-list li{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer;
}
.eh-cmd-list li:hover{ background:#f6f8fb; }

@media (max-width: 991.98px){
  /* En móvil no estorbamos: el buscador más estrecho */
  .eh-topbar{ grid-template-columns: auto 1fr auto; }
  .eh-topbar-search{ display:none; } /* si la quieres visible en móvil, quita esta línea */
}

/* Asegura que el logo se adapte a la topbar */
.eh-topbar .custom-logo,
.eh-topbar .eh-topbar-logo img {
  max-height: 32px; height: auto; width: auto; display: block;
}