/* BUKLIO UI v2 · applied on top of the working application without replacing product logic. */
:root{
  --buklio-paper:#F7F3EC;
  --buklio-paper-2:#FFFDF9;
  --buklio-green:#0F3D2E;
  --buklio-green-2:#165A43;
  --buklio-ink:#12372C;
  --buklio-sage:#DDE6DD;
  --buklio-line:#D9D2C6;
  --buklio-warm:#C99B64;
  --buklio-muted:#68736F;
  --buklio-display:Georgia,'Times New Roman',serif;
}

html[data-theme="light"]{
  --bg:var(--buklio-paper);
  --panel:var(--buklio-paper-2);
  --panel2:#FBF8F2;
  --line:var(--buklio-line);
  --line2:#E7E0D6;
  --text:var(--buklio-ink);
  --muted:var(--buklio-muted);
  --muted2:#8B938E;
  --accent:var(--buklio-green);
  --accent2:#7B5B36;
}

html[data-theme="light"] body,
html[data-theme="light"] .app{
  background:var(--buklio-paper)!important;
}

/* Header: official logo + search + notifications + profile */
.buklio-topbar{
  width:min(100%,1100px)!important;
  padding:14px 22px 8px!important;
  min-height:74px;
  position:relative;
  z-index:40;
}
.buklio-brand{gap:0!important;min-width:155px}
.buklio-brand .buklio-mark,
.buklio-brand .buklio-wordmark,
.buklio-brand .buklio-tagline{display:none!important}
.buklio-official-logo{
  display:block;
  width:190px;
  max-width:42vw;
  height:auto;
  border-radius:8px;
  background:#f8f4ee;
}
html[data-theme="dark"] .buklio-official-logo{padding:4px 7px;background:#f8f4ee}
.buklio-top-actions{gap:10px!important}
.buklio-icon-btn{
  width:42px!important;height:42px!important;
  border:0!important;border-radius:50%!important;
  background:transparent!important;color:var(--text)!important;
  box-shadow:none!important;
}
.buklio-icon-btn:hover{background:color-mix(in srgb,var(--panel2) 82%,transparent)!important}
.buklio-icon-btn svg{width:25px!important;height:25px!important;stroke-width:1.7!important}
.buklio-notification-btn{position:relative}
.buklio-top-badge{
  position:absolute;right:2px;top:1px;min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;border-radius:999px;background:#278362;color:#fff;
  font:700 9px/1 Poppins,sans-serif;border:2px solid var(--bg);
}
.buklio-top-badge[hidden]{display:none!important}
.buklio-profile-top{
  border:1px solid var(--line)!important;
  background:var(--panel2)!important;
  overflow:hidden;
}
.buklio-profile-top .buklio-top-avatar{width:100%;height:100%;object-fit:cover;display:block}

/* Page hero: mascot consistently at the top of every main area. */
.buklio-page-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 118px;
  align-items:end;
  gap:10px;
  margin:0 0 12px;
  min-height:128px;
}
.buklio-page-hero>.section-head{margin:0!important;align-self:end;min-width:0}
.buklio-page-hero>.section-head>div:first-child{min-width:0}
.buklio-page-mascot-wrap{
  min-height:120px;display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;overflow:visible;
}
.buklio-page-mascot{
  width:118px;height:118px;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 10px 16px rgba(20,47,38,.10));
}
.buklio-page-lead{
  grid-column:1 / -1;
  margin:-1px 0 0;
  max-width:720px;
  color:var(--muted);font-size:14px;line-height:1.55;
}

/* Editorial headings from the approved direction. */
.view>.section-head .eyebrow,
.buklio-page-hero .eyebrow{
  color:var(--buklio-green)!important;
  font-size:10px!important;
  letter-spacing:.20em!important;
  text-transform:uppercase;
  font-weight:700!important;
}
.view h2,
.buklio-page-hero h2{
  font-family:var(--buklio-display)!important;
  font-weight:700!important;
  letter-spacing:-.045em!important;
  color:var(--text)!important;
  font-size:clamp(42px,7vw,62px)!important;
  line-height:.98!important;
  margin-top:5px!important;
}
html[data-theme="light"] .view h2{color:#0B3B2D!important}

/* Remove mascots that were previously scattered through cards; v2 keeps them in the page header. */
.buklio-reading-art,
.buklio-ai-art,
.buklio-profile-art,
.buklio-premium-art,
.buklio-account-art,
.buklio-discover-raven,
.community-games-raven,
.community-clubs-ravens,
.community-shop-ravens,
.community-profile-raven{display:none!important}

/* Remove the old Discover hero: Comunidad is the hub again. */
[data-buklio-discover-hero]{display:none!important}

/* Cleaner reference-like surfaces. */
html[data-theme="light"] .card,
html[data-theme="light"] .profile-section,
html[data-theme="light"] .community-games,
html[data-theme="light"] .community-clubs,
html[data-theme="light"] .home-panel,
html[data-theme="light"] .library-summary,
html[data-theme="light"] .crow-ai,
html[data-theme="light"] .account-card,
html[data-theme="light"] .security-card,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .book,
html[data-theme="light"] .book-list-item,
html[data-theme="light"] .note-card,
html[data-theme="light"] .note-list-item{
  background:rgba(255,253,249,.78)!important;
  border:1px solid var(--buklio-line)!important;
  box-shadow:0 4px 16px rgba(22,44,35,.035)!important;
  border-radius:20px!important;
}

html[data-theme="light"] .search input,
html[data-theme="light"] .select,
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .community-friend-search input,
html[data-theme="light"] .community-club-search input,
html[data-theme="light"] .crow-form textarea{
  background:rgba(255,253,249,.72)!important;
  border:1px solid var(--buklio-line)!important;
  box-shadow:none!important;
}

.btn.primary{background:linear-gradient(135deg,#0F3D2E,#176247)!important;border-color:#0F3D2E!important}

/* Biblioteca */
[data-view="biblioteca"]>.section-head .eyebrow:after{content:none!important}
.library-view-switch{border-radius:17px!important;padding:3px!important}
.library-view-btn{min-height:43px!important;border-radius:13px!important}
.library-view-btn.active{background:linear-gradient(135deg,#0F3D2E,#176247)!important;color:#fff!important}
html[data-theme="light"] .book{padding:10px!important}
html[data-theme="light"] .book .cover{border-radius:13px!important}
.book-title{font-weight:650!important;color:var(--text)!important}
.pill{border-radius:999px!important}

/* Universo: dark semantic graph remains the focal contrast. */
[data-view="red"] .network-shell,
[data-view="red"] .network-stage{border-radius:22px!important}
[data-view="red"] .network-shell{box-shadow:0 18px 40px rgba(3,15,22,.16)!important}
.crow-ai{border-radius:20px!important}

/* Apuntes */
.note-card,.note-list-item{border-radius:20px!important}
.note-photo{border-radius:14px!important}

/* Comunidad */
[data-view="comunidad"]>.community-page-lead{display:none!important}
.community-subnav{
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:color-mix(in srgb,var(--panel) 92%,transparent)!important;
  padding:4px!important;
  gap:4px!important;
}
.community-subnav-btn{border-radius:14px!important}
.community-subnav-btn.active{background:linear-gradient(135deg,#0F3D2E,#176247)!important;color:#fff!important}
.community-subnav-btn[data-community-pane="profile"]{display:none!important}

/* Ajustes */
[data-view="perfil"]>.section-head .eyebrow:after{content:none!important}
.appearance-option{border-radius:18px!important}
.plan-card.premium{border-color:#4F8C71!important}

/* Bottom navigation: exact IA from the approved structure. */
.bottom-nav{
  left:50%!important;right:auto!important;transform:translateX(-50%)!important;
  bottom:0!important;
  width:min(100%,1100px)!important;
  height:74px!important;min-height:74px!important;
  padding:7px 12px calc(7px + var(--safeB))!important;
  border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;
  background:color-mix(in srgb,var(--bg) 95%,transparent)!important;
  box-shadow:0 -7px 24px rgba(15,40,31,.04)!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
  z-index:70!important;
}
.nav-btn{position:relative!important;border-radius:0!important;background:transparent!important;color:var(--muted)!important}
.nav-btn.active{background:transparent!important;color:var(--buklio-green)!important}
.nav-btn.active:before{
  content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:44px;height:2px;border-radius:4px;background:var(--buklio-green);
}
.nav-btn .icon svg{width:24px!important;height:24px!important;stroke-width:1.75!important}
.nav-btn .label{font-size:9px!important;font-weight:500!important}
.nav-btn.active .label{font-weight:700!important}

/* The original profile view continues to hold settings/account logic, but is presented as Ajustes. */
.buklio-ui-v2 [data-view="perfil"]{}

@media(max-width:620px){
  .app{padding-top:max(6px,var(--safeT))!important;padding-bottom:calc(88px + var(--safeB))!important}
  .buklio-topbar{padding:8px 15px 5px!important;min-height:67px}
  .buklio-official-logo{width:154px;max-width:45vw}
  .buklio-top-actions{gap:3px!important}
  .buklio-icon-btn{width:37px!important;height:37px!important}
  .buklio-icon-btn svg{width:22px!important;height:22px!important}
  .view{padding:15px 16px 28px!important}
  .buklio-page-hero{grid-template-columns:minmax(0,1fr) 94px;min-height:112px;gap:5px;margin-bottom:9px}
  .buklio-page-mascot-wrap{min-height:100px}
  .buklio-page-mascot{width:96px;height:100px}
  .buklio-page-lead{font-size:12.5px;line-height:1.5}
  .view h2,.buklio-page-hero h2{font-size:43px!important}
  .buklio-page-hero .section-head>.actions{margin-top:8px}
  .bottom-nav{height:70px!important;min-height:70px!important;padding-left:4px!important;padding-right:4px!important}
  .nav-btn .label{font-size:8px!important}
}

@media(min-width:760px){
  .buklio-page-hero{grid-template-columns:minmax(0,1fr) 150px;min-height:150px}
  .buklio-page-mascot{width:145px;height:145px}
  .buklio-page-lead{font-size:15px}
}