/*
 * Bubbles Plugin — Base / Shell
 * base.css
 *
 * Contiene: reset, app shell, topbar, sidebar, bottom nav, responsive.
 * NO contiene: componentes de contenido — eso va en tech.css
 * Importar DESPUÉS de variables.css
 */

@import url('variables.css');

/* ═══════════════════════════════════════════════════
   1. RESET
   ═══════════════════════════════════════════════════ */
#bubbles-app *,
#bubbles-app *::before,
#bubbles-app *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}
#bubbles-app {
  font-family:            var(--b-font);
  font-size:              var(--b-font-size);
  font-weight:            var(--b-font-weight);
  line-height:            var(--b-line-height);
  color:                  var(--b-text);
  background:             var(--b-bg-surface);
  -webkit-font-smoothing: antialiased;
}
#bubbles-app button {
  appearance:         none;
  -webkit-appearance: none;
  background:         transparent;
  border:             none;
  padding:            0;
  margin:             0;
  font:               inherit;
  cursor:             pointer;
  outline:            none;
}
#bubbles-app button:focus,
#bubbles-app button:focus-visible { outline: none; }

/* Images — scoped so SVGs inside buttons don't blow up */
#bubbles-app img { max-width: 100%; display: block; }
#bubbles-app .b-btn img,
#bubbles-app .b-btn svg,
#bubbles-app .b-nav-link svg,
#bubbles-app .b-tab svg,
#bubbles-app .b-bottom-nav__item svg { display: inline-flex; flex-shrink: 0; }
#bubbles-app .b-btn img { width: auto; max-width: none; }
#bubbles-app .b-topbar__avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

#bubbles-app a   { color: inherit; text-decoration: none; }
#bubbles-app ul  { list-style: none; }

/* Títulos con la misma letra que el resto del panel (el tema de
   WordPress les ponía una serif en Payments y Availability). */
#bubbles-app h1, #bubbles-app h2, #bubbles-app h3,
#bubbles-app h4, #bubbles-app h5, #bubbles-app h6 {
  font-family:    var(--b-font);
  color:          var(--b-text);
  line-height:    1.3;
  letter-spacing: normal;
  text-transform: none;
}

/* ═══════════════════════════════════════════════════
   2. APP SHELL
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-app {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
  max-width:      none;
  margin:         0;
  border-radius:  0;
  box-shadow:     none;
  background:     var(--b-bg);
  overflow:       visible;
}
#bubbles-app .b-body {
  display:    flex;
  flex:       1;
  min-height: 0;
}
#bubbles-app .b-hidden { display: none !important; }

/* ═══════════════════════════════════════════════════
   3. TOPBAR
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 var(--b-space-xl);
  height:          60px;
  background:      var(--b-brand);
  flex-shrink:     0;
  width:           100%;
  position:        sticky;
  top:             0;
  z-index:         100;
}
#bubbles-app .b-topbar__left {
  display:     flex;
  align-items: center;
  gap:         10px;
  min-width:   0;
}
#bubbles-app .b-topbar__logo {
  width:       32px;
  height:      32px;
  flex-shrink: 0;
}
#bubbles-app .b-topbar__brand {
  font-size:      20px;
  font-weight:    700;
  color:          #fff;
  letter-spacing: -.5px;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

/* Menú de cuenta (foto del técnico): My Profile, My Portfolio, Log out */
#bubbles-app .b-account          { position: relative; }
#bubbles-app .b-account > summary {
  list-style: none;
  cursor:     pointer;
  padding:    6px 8px;
  margin:     0 -8px;
  border-radius: var(--b-radius-md);
}
#bubbles-app .b-account > summary::-webkit-details-marker { display: none; }
#bubbles-app .b-account > summary:hover { background: rgba(255,255,255,0.08); }
#bubbles-app .b-account__chevron  { color: rgba(255,255,255,0.6); display: inline-flex; transition: transform var(--b-transition); }
#bubbles-app .b-account[open] .b-account__chevron { transform: rotate(180deg); }
#bubbles-app .b-account__menu {
  position:      absolute;
  right:         0;
  top:           calc(100% + 6px);
  min-width:     190px;
  background:    var(--b-bg);
  border:        1px solid var(--b-border);
  border-radius: var(--b-radius-md);
  box-shadow:    0 8px 24px rgba(0,0,0,0.12);
  padding:       6px;
  z-index:       200;
}
#bubbles-app .b-account__menu a {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 12px;
  border-radius: var(--b-radius-md);
  color:         var(--b-text);
  font-weight:   500;
}
#bubbles-app .b-account__menu a:hover  { background: var(--b-bg-surface); }
#bubbles-app .b-account__menu svg      { width: 16px; height: 16px; opacity: .7; }
#bubbles-app .b-account__menu .b-account__logout { color: var(--b-danger-text); border-top: 1px solid var(--b-border); border-radius: 0 0 var(--b-radius-md) var(--b-radius-md); margin-top: 4px; }

/* Listas explicativas dentro de tarjetas (ej. "How promotions work") */
#bubbles-app .b-info-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
#bubbles-app .b-info-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
#bubbles-app .b-info-list svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--b-brand); }
#bubbles-app details.b-disclosure > summary {
  list-style: none;
  cursor:     pointer;
  display:    inline-flex;
  align-items: center;
  gap:        4px;
  color:      var(--b-brand);
  font-weight: 600;
  margin-top: 10px;
}
#bubbles-app details.b-disclosure > summary::-webkit-details-marker { display: none; }
#bubbles-app details.b-disclosure[open] > summary svg { transform: rotate(180deg); }
#bubbles-app .b-topbar__right {
  display:     flex;
  align-items: center;
  gap:         var(--b-space-md);
}
#bubbles-app .b-topbar__avatar {
  width:         36px;
  height:        36px;
  border-radius: var(--b-radius-full);
  overflow:      hidden;
  background:    rgba(255,255,255,0.15);
  flex-shrink:   0;
}
#bubbles-app .b-topbar__user-info {
  display:        flex;
  flex-direction: column;
  line-height:    1.2;
}
#bubbles-app .b-topbar__user-name { font-size: var(--b-font-size); font-weight: 600; color: #fff; }
#bubbles-app .b-topbar__user-role { font-size: var(--b-font-size); color: rgba(255,255,255,0.45); }

/* ═══════════════════════════════════════════════════
   4. SIDEBAR
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-sidebar {
  width:          180px;
  flex-shrink:    0;
  background:     var(--b-brand);
  border-right:   none;
  display:        flex;
  flex-direction: column;
  padding:        var(--b-space-lg) var(--b-space-sm);
  color:          #fff;
  position:       sticky;
  top:            60px;
  height:         calc(100vh - 60px);
  overflow-y:     auto;
}
#bubbles-app .b-sidebar__footer {
  margin-top:  auto;
  padding-top: var(--b-space-md);
  border-top:  1px solid rgba(255,255,255,0.08);
}

/* Nav links */
#bubbles-app .b-nav-link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--b-space-md);
  padding:         var(--b-space-sm) var(--b-space-md);
  border-radius:   var(--b-radius-md);
  font-size:       var(--b-font-size);
  font-weight:     500;
  color:           rgba(255,255,255,0.55);
  background:      transparent;
  border:          none;
  width:           100%;
  text-align:      left;
  cursor:          pointer;
  text-decoration: none !important;
  transition:      background var(--b-transition), color var(--b-transition);
  margin-bottom:   2px;
  white-space:     nowrap;
}
#bubbles-app .b-nav-link:hover {
  background: rgba(255,255,255,0.08);
  color:      rgba(255,255,255,0.9);
}
#bubbles-app .b-nav-link.is-active {
  background:  rgba(255,255,255,0.15) !important;
  color:       #fff !important;
  font-weight: 600;
  border-left: none !important;
}
#bubbles-app .b-nav-link--danger       { color: #f87171 !important; }
#bubbles-app .b-nav-link--danger:hover { background: rgba(248,113,113,0.12); }
#bubbles-app .b-nav-link svg           { flex-shrink: 0; width: 16px; height: 16px; opacity: .55; }
#bubbles-app .b-nav-link.is-active svg { opacity: 1; }

/* ═══════════════════════════════════════════════════
   5. MAIN
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-main {
  flex:       1;
  min-width:  0;
  max-width:  none;
  margin:     0;
  width:      100%;
  padding:    var(--b-space-xl);
  background: #f7f8fa;
}

/* ═══════════════════════════════════════════════════
   6. BOTTOM NAV — móvil
   ═══════════════════════════════════════════════════ */
#bubbles-app .b-bottom-nav {
  display:        none;
  position:       fixed !important;
  bottom:         0 !important;
  left:           0 !important;
  right:          0 !important;
  background:     var(--b-bg);
  border-top:     1px solid var(--b-border);
  z-index:        99999 !important;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow:     0 -2px 12px rgba(0,0,0,0.06);
}
#bubbles-app .b-bottom-nav__item {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  padding:         8px var(--b-space-xs);
  font-size:       10px;
  font-weight:     500;
  color:           var(--b-text-muted);
  cursor:          pointer;
  border:          none;
  background:      transparent;
  text-decoration: none;
  transition:      color var(--b-transition);
  -webkit-appearance: none;
  appearance:      none;
  outline:         none;
  min-height:      56px;
}
#bubbles-app .b-bottom-nav__item svg       { width: 22px; height: 22px; }
#bubbles-app .b-bottom-nav__item.is-active { color: var(--b-brand); }
#bubbles-app .b-bottom-nav__item--logout   { color: var(--b-danger-text); }

/* ═══════════════════════════════════════════════════
   7. UTILIDADES
   ═══════════════════════════════════════════════════ */
.b-flex         { display: flex; }
.b-flex-center  { display: flex; align-items: center; }
.b-flex-between { display: flex; align-items: center; justify-content: space-between; }
.b-flex-col     { display: flex; flex-direction: column; }
.b-gap-xs  { gap: var(--b-space-xs); }
.b-gap-sm  { gap: var(--b-space-sm); }
.b-gap-md  { gap: var(--b-space-md); }
.b-gap-lg  { gap: var(--b-space-lg); }
.b-mt-sm   { margin-top: var(--b-space-sm); }
.b-mt-md   { margin-top: var(--b-space-md); }
.b-mt-lg   { margin-top: var(--b-space-lg); }
.b-mb-sm   { margin-bottom: var(--b-space-sm); }
.b-mb-md   { margin-bottom: var(--b-space-md); }
.b-mb-lg   { margin-bottom: var(--b-space-lg); }
.b-text-muted { color: var(--b-text-muted); }
.b-text-xs    { font-size: var(--b-font-size-sm); }
.b-text-sm    { font-size: var(--b-font-size); }
.b-text-lg    { font-size: var(--b-font-size-lg); }
.b-font-md    { font-weight: var(--b-font-weight-md); }
.b-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-w-full     { width: 100%; }

/* ═══════════════════════════════════════════════════
   8. RESPONSIVE — app nativa
   ═══════════════════════════════════════════════════ */

/* Móvil ≤ 768px */
@media (max-width: 768px) {
  #bubbles-app .b-topbar            { padding: 0 var(--b-space-md); height: 54px; }
  #bubbles-app .b-topbar__brand     { font-size: 18px; }
  #bubbles-app .b-topbar__user-info { display: none; }
  #bubbles-app .b-sidebar           { display: none !important; }
  #bubbles-app .b-main              { padding: var(--b-space-md); padding-bottom: 72px; }
  #bubbles-app .b-bottom-nav        { display: flex !important; }
}

/* Tablet 769px–1023px */
@media (min-width: 769px) and (max-width: 1023px) {
  #bubbles-app .b-sidebar           { display: flex !important; width: 160px; top: 60px; height: calc(100vh - 60px); }
  #bubbles-app .b-nav-link          { font-size: 13px; padding: var(--b-space-sm); }
  #bubbles-app .b-bottom-nav        { display: none !important; }
  #bubbles-app .b-main              { padding: var(--b-space-lg); }
  #bubbles-app .b-topbar__user-info { display: none; }
}

/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
  #bubbles-app .b-sidebar           { display: flex !important; width: 180px; }
  #bubbles-app .b-bottom-nav        { display: none !important; }
  #bubbles-app .b-main              { padding: var(--b-space-xl); }
  #bubbles-app .b-topbar__user-info { display: flex; }
}
#bubbles-app img.emoji {
  display:        inline !important;
  width:          1em !important;
  height:         1em !important;
  max-width:      none !important;
  vertical-align: -0.1em;
}