/* ============================================================
   BELA TEMPLATE — Component Overrides & Bottom Navigation
   Se carga DESPUÉS de app.css y del archivo de color (light/dark)
   ============================================================ */

/* ── Global overrides ──────────────────────────────────────── */

[data-template="bela"] body {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  background: var(--bg);
}

/* Botones: más redondeados y con más padding */
[data-template="bela"] .btn {
  border-radius: 50px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
[data-template="bela"] .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
[data-template="bela"] .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
[data-template="bela"] .btn-ghost {
  border-color: var(--border2);
  color: var(--text2);
}
[data-template="bela"] .btn-secondary {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text);
}

/* Cards: más redondeadas y con sombra más suave */
[data-template="bela"] .card {
  border-radius: var(--radius-lg);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

/* Navbar: borde inferior brand-color-2 */
[data-template="bela"] .navbar {
  /* Borde inferior difuminado: hairline verde sutil + sombra de profundidad (a juego con el sidebar) */
  border-bottom: none;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--brand-color-2) 32%, transparent),
              0 6px 24px rgba(0,0,0,.06);
}

/* ── Bottom Navigation — solo en Bela ──────────────────────── */

.bela-bottom-nav {
  display: none; /* hidden by default, visible only en mobile Bela */
}

@media (max-width: 768px) {
  [data-template="bela"] {
    --bottom-nav-h: 62px; /* altura de bela-bottom-nav, leída por el JS de sala */
  }

  [data-template="bela"] .bela-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 900;
    background: var(--bottom-nav-bg, var(--surface));
    border-top: 1px solid var(--bottom-nav-border, var(--border));
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    align-items: center;
    justify-content: space-around;
    padding: 8px 8px 10px;
    gap: 0;
  }

  /* Body padding para no quedar tapado por el bottom nav */
  [data-template="bela"] #main-content,
  [data-template="bela"] .app-footer {
    padding-bottom: calc(62px + 16px);
  }

  /* PWA/cookie banners salen por encima del bottom nav */
  [data-template="bela"] .pwa-banner,
  [data-template="bela"] #cookie-banner,
  [data-template="bela"] #cookie-config {
    bottom: 62px;
  }

  /* En Bela mobile: navbar solo muestra logo + acciones a la derecha */
  [data-template="bela"] .hamburger-btn,
  [data-template="bela"] .mobile-menu,
  [data-template="bela"] .navbar-mobile-actions,
  [data-template="bela"] .navbar-nav {
    display: none !important;
  }
  [data-template="bela"] .navbar-spacer {
    display: block !important;
    flex: 1;
  }
  /* Mostrar solo el icono de salir de .navbar-actions */
  [data-template="bela"] .navbar-actions {
    display: flex !important;
    gap: 6px;
  }
  /* Ocultar user-btn (@username) y notif-btn del navbar-actions (está en top bar) */
  [data-template="bela"] .navbar-actions .user-btn {
    display: none !important;
  }
  /* Mostrar el notif-btn en la navbar de Bela mobile — mismo tamaño que admin btn */
  [data-template="bela"] .navbar-actions .notif-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
  }
  /* Admin/mod button: solo icono, mismo estilo que notif-btn */
  [data-template="bela"] .navbar-actions .btn[href="/admin"],
  [data-template="bela"] .navbar-actions .btn[href="/moderacion"] {
    font-size: 0 !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    border: 1px solid rgba(239,68,68,.35) !important;
    background: rgba(239,68,68,.08) !important;
    color: var(--danger) !important;
  }
  [data-template="bela"] .navbar-actions .btn[href="/admin"]::before {
    content: '⚙';
    font-size: 15px;
    line-height: 1;
  }
  [data-template="bela"] .navbar-actions .btn[href="/moderacion"]::before {
    content: '🛡';
    font-size: 15px;
    line-height: 1;
  }

}


.bela-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 10px;
  border-radius: 14px;
  transition: color 0.15s, background 0.15s;
  text-decoration: none !important;
  min-width: 52px;
  flex: 1;
  position: relative;
}

.bela-tab svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  flex-shrink: 0;
}
.bela-tab.active {
  color: var(--bottom-nav-active, var(--accent)) !important;
}
.bela-tab.active svg {
  stroke-width: 2.2;
}
/* Dot indicator debajo del icono activo */
.bela-tab.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bottom-nav-active, var(--accent));
}
/* Badge de notificaciones en bottom nav */
.bela-tab .bela-badge {
  position: absolute;
  top: 2px;
  right: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  border-radius: 8px;
  padding: 1px 4px;
  min-width: 14px;
  text-align: center;
  line-height: 1.4;
}

/* ── FAB Speed-dial (Crear / Escanear / Álbum) ─────────────── */

/* Overlay semitransparente detrás del menú */
.bela-fab-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Contenedor del speed-dial — flotante justo encima del FAB */
.bela-fab-menu {
  position: fixed;
  bottom: calc(80px + var(--safe-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1101;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* Cada item del speed-dial */
.bela-fab-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 50px;
  padding: 12px 20px 12px 14px;
  color: var(--text) !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transition: transform .15s, box-shadow .15s;
  min-width: 180px;
}
.bela-fab-item:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.38); }

.bela-fab-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bela-fab-item-icon svg { width: 20px; height: 20px; }

/* Item primario (Crear QR) — fondo de acento */
.bela-fab-item-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff !important;
}
.bela-fab-item-primary .bela-fab-item-icon {
  background: rgba(255,255,255,.2);
  color: #fff;
}
.bela-fab-item-primary .bela-fab-item-icon svg { color: #fff; }

/* Animaciones Alpine.js */
@keyframes belaFabSlideUp   { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes belaFabSlideDown { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(16px); } }
@keyframes belaFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes belaFadeOut { from { opacity: 1; } to { opacity: 0; } }

.bela-fab-menu[x-show] { animation: none; }
.bela-slide-up   { animation: belaFabSlideUp .22s cubic-bezier(.16,1,.3,1); }
.bela-slide-down { animation: belaFabSlideDown .18s ease-in forwards; }
.bela-fade-in    { animation: belaFadeIn .22s ease; }
.bela-fade-out   { animation: belaFadeOut .18s ease forwards; }

/* Botón central de crear */
.bela-tab-create {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff !important;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  margin-top: -14px;
  margin-bottom: 0;
  padding: 0;
  font-size: 0;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.bela-tab-create:hover, .bela-tab-create-open {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(0,0,0,.32);
}
.bela-tab-create::after {
  display: none !important;
}
.bela-tab-create svg {
  width: 26px;
  height: 26px;
  stroke-width: 2.5;
}

/* ── Bela Navbar overrides (desktop) ───────────────────────── */

@media (min-width: 769px) {
  /* En desktop Bela, ocultar el bottom nav */
  [data-template="bela"] .bela-bottom-nav {
    display: none !important;
  }
  /* Restaurar padding normal en desktop */
  [data-template="bela"] #main-content {
    padding-bottom: 0;
  }
}

/* ── Inputs y formularios ──────────────────────────────────── */

[data-template="bela"] input[type="text"],
[data-template="bela"] input[type="email"],
[data-template="bela"] input[type="password"],
[data-template="bela"] input[type="search"],
[data-template="bela"] textarea,
[data-template="bela"] select {
  border-radius: var(--radius);
  border-color: var(--border2);
  background: var(--surface);
  color: var(--text);
}

/* ── Badge de rareza — heredado de cards.css, solo ajustar radios ── */
[data-template="bela"] .badge {
  border-radius: 50px;
}

/* ── Page transitions suavizadas ───────────────────────────── */
[data-template="bela"] ::view-transition-old(root),
[data-template="bela"] ::view-transition-new(root) {
  animation-duration: 280ms;
}
[data-template="bela"] #main-content {
  transition: opacity .12s;
}