/* ============================================================
   APP NAVBAR — Hamburger & Mobile menu (CSS puro)
   Reemplaza utilidades Tailwind que no están en explore.css
   (lg:hidden, bg-gray-800, h-0.5, gap-1.5, hover:bg-amber-200)
   ============================================================ */

/* Fijar ancho del navbar al viewport real.
   Sin esto, en páginas con overflow horizontal (DataTables anchas,
   modales fixed w-full, etc.) el .navbar con width:100% toma el
   document width como referencia y estira el navbar-end fuera del
   viewport — el hamburger queda invisible. 100vw garantiza ancho
   de viewport independiente del containing block. */
.fixed.navbar {
  left: 0;
  right: 0;
  top: 0;
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
}

/* Hamburger: visible < 1024px, oculto >= 1024px */
.app-nav-hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0.5rem;
  border-radius: 0.375rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.app-nav-hamburger:hover {
  background-color: #fde68a; /* amber-200 */
}

.app-nav-hamburger-bar {
  display: block;
  width: 1.35rem;
  height: 2px;
  background-color: #1f2937; /* gray-800 */
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

/* Hamburger → X cuando el menú está abierto */
.app-nav-hamburger.is-open .app-nav-hamburger-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.app-nav-hamburger.is-open .app-nav-hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.app-nav-hamburger.is-open .app-nav-hamburger-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Menú desktop: visible >= 1024px, oculto < 1024px */
.app-nav-desktop {
  display: none;
}

/* Dropdown mobile: fijo bajo el navbar, se muestra vía JS */
.app-nav-mobile {
  display: none;
  position: fixed;
  top: 48px;
  left: 0;
  right: 0;
  z-index: 49;
  background: #fffbeb;
  border-bottom: 2px solid #f59e0b;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.app-nav-mobile.is-open {
  display: block;
}

.app-nav-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.app-nav-mobile a {
  display: block;
  padding: 0.75rem 1.5rem;
  color: #1f2937;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.app-nav-mobile a:hover {
  background-color: #fef3c7;
}

.app-nav-mobile-divider {
  border-top: 1px solid #fde68a;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

.app-nav-mobile-dashboard {
  color: #d97706 !important;
  font-weight: 700 !important;
}

.app-nav-mobile-signout {
  border-top: 1px solid #f3f4f6;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

.app-nav-mobile-signout a {
  color: #9ca3af !important;
  font-weight: 500 !important;
}

.app-nav-mobile-signout a:hover {
  background-color: #fef2f2 !important;
  color: #ef4444 !important;
}

/* Breakpoint desktop */
@media (min-width: 1024px) {
  .app-nav-hamburger-wrap {
    display: none !important;
  }

  .app-nav-desktop {
    display: flex !important;
  }

  /* El menú mobile nunca debe aparecer en desktop,
     aunque JS lo haya dejado abierto antes del resize */
  .app-nav-mobile,
  .app-nav-mobile.is-open {
    display: none !important;
  }
}

/* Clases de Tailwind básicas */
.w-8 {
    width: 2rem;
    min-width: 2rem;
    flex-shrink: 0;
  }
  
  .h-8 {
    height: 2rem;
    min-height: 2rem;
  }
  
  .object-cover {
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .rounded-full {
    border-radius: 9999px;
  }
  
  /* Avatar con iniciales (NUEVO) */
  .avatar-initials {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;        /* Evita que se achique */
    min-height: 2rem;       /* Evita que se achique */
    flex-shrink: 0;         /* Evita compresión en flex containers */
    background-color: white;
    border: 1px solid #000000;
    color: black;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.875rem;
    text-transform: uppercase;
  }
  
  /* Ajustar posición del dropdown */
  .navbar-end .menu li:last-child ul,
  .navbar-end .menu li:nth-last-child(2) ul {
    right: 0;
    left: auto;
    transform: translateX(0);
  }
  
  /* Asegurar que el dropdown se mantenga dentro de la pantalla */
  .navbar-end ul ul {
    position: absolute;
    right: 0;
    left: auto;
    min-width: 200px;
    max-width: 300px;
  }
  
  /* ── Dropdown del usuario — refinado ── */

  /* Contenedor del dropdown — aplica a TODOS los submenús del navbar */
  .navbar-end ul ul,
  .navbar-end .menu li ul.bg-amber-500 {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-top: 3px solid #f59e0b !important;
    border-radius: 0 0 0.75rem 0.75rem !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
    padding: 0 !important;
    overflow: hidden;
    min-width: 180px !important;
  }

  /* Header del perfil */
  .profile-header-item {
    padding: 0;
    background-color: #fffbeb !important;
    border-bottom: 1px solid #fde68a !important;
  }

  .profile-header-item:hover {
    background-color: #fffbeb !important;
  }

  /* Contenedor de la info del perfil */
  .profile-info-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    white-space: nowrap;
    cursor: default;
  }

  .profile-info-container:hover {
    background-color: #fffbeb !important;
  }

  /* Texto del perfil */
  .profile-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .profile-text p {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #92400e;
  }

  .profile-username {
    font-size: 0.75rem;
    color: #b45309;
    display: block;
    margin: 0;
  }

  /* Avatar initials dentro del dropdown — versión amber */
  .profile-header-item .avatar-initials {
    background-color: #f59e0b;
    border-color: #d97706;
    color: #fff;
  }

  /* Items del dropdown — aplica a todos los submenús */
  .navbar-end ul ul li a,
  .navbar-end .menu li ul.bg-amber-500 li a {
    color: #374151 !important;
    background: transparent !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0.6rem 1rem !important;
    border-radius: 0 !important;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
    border-left: 3px solid transparent;
  }

  .navbar-end ul ul li a:hover,
  .navbar-end .menu li ul.bg-amber-500 li a:hover {
    background-color: #fffbeb !important;
    color: #d97706 !important;
    border-left-color: #f59e0b !important;
    padding-left: 1.25rem !important;
  }

  /* Primera opcion del dropdown de usuario (Dashboard) resaltada */
  .navbar-end ul ul li:first-of-type a {
    color: #d97706 !important;
    font-weight: 700 !important;
  }

  .navbar-end ul ul li:first-of-type a:hover {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border-left-color: #f59e0b !important;
  }

  /* Signout — separador visual y color diferente */
  .navbar-end ul ul li:last-child {
    border-top: 1px solid #f3f4f6;
  }

  .navbar-end ul ul li:last-child a {
    color: #9ca3af !important;
    font-size: 0.8rem !important;
  }

  .navbar-end ul ul li:last-child a:hover {
    color: #ef4444 !important;
    background-color: #fef2f2 !important;
    border-left-color: #ef4444 !important;
  }



  
/* Avatar Grande en Profile */
.avatar-large-container {
  width: 150px;
  height: 150px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  border: 4px solid #f59e0b;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.avatar-large-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}

.avatar-large-initials {
  width: 150px;
  height: 150px;
  background-color: white;
  color: #f59e0b;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 3.5rem;
  text-transform: uppercase;
}
/* ============================================================
   Upgrade badge — shown in navbars/cards for users without
   sufficient role to access a gated feature (Gene Editing).
   Used in base.html, baseindex.html, about.html, landing.html.
   ============================================================ */
/* Candado para funciones que requieren upgrade de plan.
   Aparece junto al nombre "Gene Editing" en los 3 navbars y en las cards.
   Solo muestra el ícono SVG — sin texto. */
.upgrade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #fef3c7;
  color: #d97706;
  border-radius: 999px;
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
  border: 1px solid #fcd34d;
}
.upgrade-badge svg {
  display: block;
  stroke: #d97706;
}

/* Candados alineados al borde derecho del menú, no pegados al texto.
   "Explore Genes" es más largo que "Gene Editing", así que con el margen fijo de
   5px los dos candados caían en columnas distintas. Con margin-left:auto se van
   al final del enlace, y como el ancho del desplegable lo fija la etiqueta más
   larga, todos los ítems miden lo mismo y los candados quedan en una columna.
   Funciona porque el enlace es flex: en desktop lo hace daisyUI
   (.menu li > :not(ul) => display:flex) y en mobile se declara acá abajo. */
.app-nav-desktop .menu ul .upgrade-badge,
.app-nav-mobile a .upgrade-badge {
  margin-left: auto;
}

.app-nav-mobile a {
  display: flex;
  align-items: center;
}

/* Landing navbar dark variant */
.landing-navbar .upgrade-badge,
.landing-mobile-menu .upgrade-badge {
  background: rgba(251, 191, 36, 0.18);
  color: #fcd34d;
  border: 1px solid rgba(251, 191, 36, 0.35);
}
.landing-navbar .upgrade-badge svg,
.landing-mobile-menu .upgrade-badge svg {
  stroke: #fcd34d;
}

/* Landing feature-card variant (sobre fondo oscuro) */
.feature-card .upgrade-badge {
  background: rgba(251, 191, 36, 0.18);
  color: #fcd34d;
  border: 1px solid rgba(251, 191, 36, 0.4);
  margin-left: 8px;
  width: 20px;
  height: 20px;
}
.feature-card .upgrade-badge svg {
  stroke: #fcd34d;
}