/*
 * Blissful Tribe — components (S0 component library)
 *
 * Generated 2026-10-08 from Figma file X01urgBd8stPyRkyjeD4DS, page "Components" (21:131)
 * and the component sets on "Colors&Types&Icons" (0:1). Plain CSS, no build step.
 * Requires tokens.css first. Desktop-first, like the design.
 *
 * States: the Figma Hover / Pressed / Disabled / Active variants map to :hover, :active,
 * :disabled, :focus-visible. The .is-hover / .is-pressed / .is-focus classes reproduce
 * them statically (the gallery uses them; a page should not need to).
 *
 * Icons: `<span class="bt-icon bt-icon--search" aria-hidden="true"></span>`. The Figma
 * SVGs are filled #262626, so they are used as a CSS MASK and take currentColor; the SVG
 * files are untouched. Masks need the page served over http(s), not file://.
 * Multi-colour assets (logos, content-type badges, checkbox) are plain <img>.
 */

/* =========================================================================
   Base
   ========================================================================= */
.bt-reset,
.bt-reset * { box-sizing: border-box; }

.bt-page {
  margin: 0;
  font-family: var(--font-family);
  color: var(--neutro-900);
  background: var(--neutro-50);
  -webkit-font-smoothing: antialiased;
}

:where([class^="bt-"], [class*=" bt-"]) { box-sizing: border-box; }

/* Shared focus ring (not in Figma — the design draws no focus state). */
:where(.bt-button, .bt-tab, .bt-menu-item, .bt-menu-title, .bt-menu-icon-item, .bt-option,
       .bt-pill, .bt-tag__remove, .bt-accordion__head, .bt-card, .bt-checkbox, .bt-icon-button,
       .bt-reaction):focus-visible,
:where(.bt-button, .bt-tab, .bt-option, .bt-pill).is-focus {
  outline: 2px solid var(--secondary-500);
  outline-offset: 2px;
}

/* =========================================================================
   Icons (frame 56:353 + "Icons / evento" 677:6072)
   Sizes: XS 16 · S 24 (default) · M 32 · L 48. The shapes are identical across
   sizes (checked), so one file per icon is scaled — except evento, whose four
   Figma sizes differ slightly and ship as four files.
   ========================================================================= */
.bt-icon {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--bt-icon-src) center / contain no-repeat;
  mask: var(--bt-icon-src) center / contain no-repeat;
  vertical-align: middle;
}
.bt-icon--xs { width: 16px; height: 16px; }
.bt-icon--s  { width: 24px; height: 24px; }
.bt-icon--m  { width: 32px; height: 32px; }
.bt-icon--l  { width: 48px; height: 48px; }

.bt-icon--search      { --bt-icon-src: url("icons/search.svg"); }
.bt-icon--arrow-down  { --bt-icon-src: url("icons/arrow-down.svg"); }
.bt-icon--arrow-up    { --bt-icon-src: url("icons/arrow-up.svg"); }
.bt-icon--arrow-right { --bt-icon-src: url("icons/arrow-right.svg"); }
.bt-icon--arrow-left  { --bt-icon-src: url("icons/arrow-left.svg"); }
.bt-icon--check       { --bt-icon-src: url("icons/check.svg"); }
.bt-icon--close       { --bt-icon-src: url("icons/close.svg"); }
.bt-icon--plus        { --bt-icon-src: url("icons/plus.svg"); }
.bt-icon--order       { --bt-icon-src: url("icons/order.svg"); }
.bt-icon--book        { --bt-icon-src: url("icons/book.svg"); }
.bt-icon--companeros  { --bt-icon-src: url("icons/companeros.svg"); }
.bt-icon--perfil      { --bt-icon-src: url("icons/perfil.svg"); }
.bt-icon--delete      { --bt-icon-src: url("icons/delete.svg"); }
.bt-icon--page        { --bt-icon-src: url("icons/page.svg"); }
.bt-icon--upload      { --bt-icon-src: url("icons/upload.svg"); }
.bt-icon--visible     { --bt-icon-src: url("icons/visible.svg"); }
.bt-icon--not-visible { --bt-icon-src: url("icons/not-visible.svg"); }
.bt-icon--grid-view   { --bt-icon-src: url("icons/grid-view.svg"); }
.bt-icon--page-view   { --bt-icon-src: url("icons/page-view.svg"); }
.bt-icon--message     { --bt-icon-src: url("icons/message.svg"); }
.bt-icon--like        { --bt-icon-src: url("icons/like.svg"); }
.bt-icon--unlike      { --bt-icon-src: url("icons/unlike.svg"); }
.bt-icon--menu        { --bt-icon-src: url("icons/menu.svg"); }
.bt-icon--evento      { --bt-icon-src: url("icons/evento-s.svg"); }
.bt-icon--evento.bt-icon--xs { --bt-icon-src: url("icons/evento-xs.svg"); }
.bt-icon--evento.bt-icon--m  { --bt-icon-src: url("icons/evento-m.svg"); }
.bt-icon--evento.bt-icon--l  { --bt-icon-src: url("icons/evento-l.svg"); }

/* A bare icon used as a button (Edit bar, Libro nav bar). */
.bt-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary-600);
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.bt-icon-button:hover, .bt-icon-button.is-hover { color: var(--primary-700); }
.bt-icon-button:active, .bt-icon-button.is-pressed { color: var(--primary-800); }
.bt-icon-button:disabled { color: var(--neutro-500); cursor: default; }

/* =========================================================================
   Logo (495:3711, 728:6486) — <img class="bt-logo" src="ui/icons/logo-default.svg">
   ========================================================================= */
.bt-logo { display: block; height: 56px; width: auto; }
.bt-logo--small { height: 40px; }           /* mobile bar 702:5910 */
.bt-logo-icon { display: block; width: 52px; height: 52px; object-fit: contain; } /* 178:3801 */

/* =========================================================================
   Avatar (59:132) · Avatar edit (293:1679)
   ========================================================================= */
.bt-avatar {
  position: relative;
  display: inline-block;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--secondary-100);
}
.bt-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bt-avatar--s { width: 32px; height: 32px; }
.bt-avatar--m { width: 48px; height: 48px; }
.bt-avatar--l { width: 64px; height: 64px; }

.bt-avatar--edit { cursor: pointer; border: 0; padding: 0; }
.bt-avatar--edit::after {           /* Primary/600 at 60% — "Ellipse 3" */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--primary-600);
  opacity: 0.6;
}
.bt-avatar--edit .bt-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  color: var(--on-color);
  width: 16px;
  height: 16px;
}
.bt-avatar--s.bt-avatar--edit .bt-icon { width: 12px; height: 12px; }

/* Overlapping stack (Hilo 293:1348): 32px avatars, -24px overlap. */
.bt-avatar-stack { display: inline-flex; }
.bt-avatar-stack .bt-avatar + .bt-avatar { margin-inline-start: -24px; }

/* Content type badge (105:1737) — <img class="bt-content-type" src="ui/icons/content-type.svg"> */
.bt-content-type { display: block; flex: none; width: 32px; height: 32px; }
.bt-content-type--s { width: 24px; height: 24px; }
.bt-content-type--m { width: 48px; height: 48px; }
.bt-content-type--l { width: 64px; height: 64px; }

/* =========================================================================
   Checkbox (513:3749) — a native checkbox drawn with the Figma assets.
   ========================================================================= */
.bt-checkbox {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: 50%;
  background: url("icons/checkbox-default.svg") center / contain no-repeat;
  cursor: pointer;
}
.bt-checkbox:checked,
.bt-checkbox.is-checked { background-image: url("icons/checkbox-selected.svg"); }
.bt-checkbox:disabled { cursor: default; }

/* =========================================================================
   Buttons (22:267 "Button/Primary" — holds Primary, Secondary and Tertiary)
   Default size = Small; add .bt-button--big.
   ========================================================================= */
.bt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font: var(--font-p2-bold);
  line-height: normal;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: none;
  color: var(--primary-500);
}
.bt-button .bt-icon { width: 16px; height: 16px; }
.bt-button--big { padding: 12px 20px; gap: 10px; font: var(--font-p1-bold); line-height: normal; }

/* Primary */
.bt-button--primary { background: var(--primary-500); border-color: var(--primary-500); color: var(--on-color); }
.bt-button--primary:hover, .bt-button--primary.is-hover { background: var(--primary-600); border-color: var(--primary-600); }
.bt-button--primary:active, .bt-button--primary.is-pressed { background: var(--primary-800); border-color: var(--primary-800); }
.bt-button--primary:disabled, .bt-button--primary[aria-disabled="true"] {
  background: var(--neutro-500); border-color: var(--neutro-500); color: var(--on-color); cursor: default;
}

/* Secondary */
.bt-button--secondary { border-color: var(--primary-500); color: var(--primary-500); }
.bt-button--secondary:hover, .bt-button--secondary.is-hover { border-color: var(--primary-600); color: var(--primary-600); }
.bt-button--secondary:active, .bt-button--secondary.is-pressed { border-color: var(--primary-800); color: var(--primary-800); }
.bt-button--secondary:disabled, .bt-button--secondary[aria-disabled="true"] {
  border-color: var(--neutro-500); color: var(--neutro-500); cursor: default;
}

/* Tertiary */
.bt-button--tertiary { border-color: transparent; color: var(--primary-500); }
.bt-button--tertiary:hover, .bt-button--tertiary.is-hover { color: var(--primary-600); }
.bt-button--tertiary:active, .bt-button--tertiary.is-pressed { color: var(--primary-800); }
.bt-button--tertiary:disabled, .bt-button--tertiary[aria-disabled="true"] { color: var(--neutro-500); cursor: default; }

/* =========================================================================
   Navigation
   ========================================================================= */

/* Principal nav bar (63:275) */
.bt-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--space-xxl) 0;
  background: var(--surface);
  width: 100%;
}
.bt-navbar__start { display: flex; align-items: flex-end; gap: var(--space-xxxxxxl); }
.bt-navbar__brand { display: flex; padding-bottom: 4px; }
.bt-navbar__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-m); padding-bottom: 4px; }

/* Libro nav bar (178:3807) */
.bt-navbar--libro { padding: var(--space-s) var(--space-xxl) var(--space-xs); }
.bt-navbar--libro .bt-navbar__start { align-items: center; gap: var(--space-l); }
.bt-navbar__title { margin: 0; font: var(--font-h4); line-height: normal; color: var(--neutro-900); }
.bt-navbar__meta { font: var(--font-note); line-height: normal; color: var(--neutro-600); }

/* Mobile bar ("Frame 63", 702:5910 — an unnamed frame, not a component) */
.bt-navbar--mobile { padding: var(--space-xs) var(--space-xl); }
.bt-navbar--mobile .bt-icon-button { color: var(--neutro-900); }

/* Tab bar (63:259) · Tab (63:239: Active 63:238, Default 63:240, Hover 485:2095) */
.bt-tabbar { display: flex; align-items: flex-end; gap: var(--space-xl); }
.bt-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xl) 12px var(--space-l);
  border: 0;
  background: none;
  font: var(--font-p1-bold);
  line-height: normal;
  color: var(--neutro-500);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.bt-tab:hover, .bt-tab.is-hover { color: var(--primary-600); }
.bt-tab--active, .bt-tab[aria-selected="true"] {
  color: var(--primary-600);
  gap: var(--space-m);
  padding-bottom: 0;
}
.bt-tab--active::after, .bt-tab[aria-selected="true"]::after {
  content: "";
  width: 48px;
  height: 4px;
  background: var(--primary-600);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
/* Count badge ("Revisiones" tab, 641:5474) */
.bt-tab__badge {
  position: absolute;
  top: 10px;
  inset-inline-end: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-chip);
  background: var(--primary-600);
  color: var(--on-color);
  font: var(--font-note);
}

/* Side bar / 1 (68:164) · Menu title (293:1441) · Menu item (63:413) */
.bt-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
  width: 318px;
  padding: var(--space-xl) var(--space-s);
  background: var(--surface);
}
.bt-sidebar__group { display: flex; flex-direction: column; gap: var(--space-xs); }

.bt-menu-title,
.bt-menu-item {
  display: flex;
  align-items: center;
  height: 40px;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--neutro-900);
  text-align: start;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
}
.bt-menu-title { padding: 0 var(--space-m); font: var(--font-p1-bold); line-height: normal; }
.bt-menu-title--selected, .bt-menu-title[aria-current] { background: var(--neutro-50); }

.bt-menu-item { gap: var(--space-xs); padding: 0 var(--space-s); font: var(--font-p2); }
.bt-menu-item .bt-icon { width: 16px; height: 16px; }
.bt-menu-item__label { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-menu-item--selected, .bt-menu-item[aria-current] {
  background: var(--neutro-50);
  font: var(--font-p1-bold);
  line-height: normal;
}
/* No Hover variant in Figma — a light hover borrowed from Selected's fill. */
.bt-menu-item:hover, .bt-menu-item.is-hover,
.bt-menu-title:hover, .bt-menu-title.is-hover { background: var(--neutro-50); }

/* Side bar libro (178:4012) · menu item icono (178:3967) — dark editor rail */
.bt-sidebar-libro {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  background: var(--neutro-900);
}
.bt-menu-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxs);
  width: 74px;
  padding: var(--space-s);
  border: 0;
  background: var(--neutro-900);
  color: var(--neutro-300);
  font: var(--font-note);
  line-height: normal;
  cursor: pointer;
}
.bt-menu-icon-item .bt-icon { width: 32px; height: 32px; }
.bt-menu-icon-item:hover, .bt-menu-icon-item.is-hover { color: var(--on-color); }
.bt-menu-icon-item--selected, .bt-menu-icon-item[aria-current] {
  background: var(--neutro-800);
  color: var(--on-color);
}

/* Option (178:4151) inside the dark Selector panel (178:4207) */
.bt-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--neutro-800);
  border: 1px solid var(--neutro-800);
  color: var(--on-color);
}
.bt-panel__label { font: var(--font-note); line-height: normal; color: var(--on-color); }
.bt-panel__options { display: flex; flex-wrap: wrap; gap: var(--space-s); }

.bt-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xs);
  border: 4px solid transparent;
  border-radius: var(--radius-xs);
  background: var(--neutro-700);
  color: var(--on-color);
  font: var(--font-note);
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
}
/* Figma draws Active with a 4px border; other states have none, so the box would
   grow. A transparent 4px border on every state keeps the size stable: Figma's
   Default is 68×59, ours is 76×67. */
.bt-option:hover, .bt-option.is-hover { background: var(--neutro-600); }
.bt-option:active, .bt-option.is-pressed { background: var(--neutro-500); }
.bt-option--active, .bt-option[aria-pressed="true"] {
  background: var(--neutro-700);
  border-color: var(--primary-100);
  color: var(--primary-100);
}

/* Selector dropdown / upload (284:1289) — dark panel field */
.bt-dark-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 260px;
  padding: var(--space-s) var(--space-m) var(--space-m);
  background: var(--neutro-800);
}
.bt-dark-field__label { font: var(--font-note); line-height: normal; color: var(--on-color); }
.bt-dark-field__control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-s) var(--space-xs);
  border: var(--stroke-s) solid var(--neutro-600);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--neutro-400);
  font: var(--font-p2);
  text-align: start;
  cursor: pointer;
}
.bt-dark-field__control .bt-icon { width: 16px; height: 16px; color: var(--on-color); }
select.bt-dark-field__control { -webkit-appearance: none; appearance: none; }

/* View bar (284:649) with Slider Zoom (275:1117) */
.bt-viewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xxs) var(--space-xxl);
  background: var(--surface);
  box-shadow: var(--shadow-bar);
}
.bt-viewbar__pager { display: flex; align-items: center; gap: var(--space-m); font: var(--font-p2-bold); line-height: normal; color: var(--neutro-900); }
.bt-viewbar__pager .bt-icon-button { color: var(--neutro-900); }
.bt-viewbar__views { display: flex; align-items: center; height: 32px; }
.bt-viewbar__views .bt-icon-button { color: var(--neutro-900); padding: 0 12px; height: 32px; }
.bt-viewbar__views .bt-icon-button + .bt-icon-button { border-inline-start: 1px solid var(--neutro-300); }
.bt-viewbar__views .bt-icon-button[aria-pressed="false"] { color: var(--neutro-500); }

/* Slider Zoom — the colours are from a foreign library ("light/gray/…"), not Neutro. */
.bt-slider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 264px;
  height: 32px;
}
.bt-slider__value { font: var(--font-p2-bold); line-height: normal; color: var(--neutro-800); min-width: 3ch; }
.bt-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.bt-slider input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 20px; background: #B1B1B1; }
.bt-slider input[type="range"]::-moz-range-track { height: 2px; border-radius: 20px; background: #B1B1B1; }
.bt-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -11px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0 3px, #222222 3.5px);
  border: 0;
}
.bt-slider input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0 3px, #222222 3.5px);
  border: 0;
}

/* Edit bar (287:764) */
.bt-editbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-xxl);
  background: var(--surface);
}
.bt-editbar__title { padding: var(--space-xxs); font: var(--font-p2-bold); line-height: normal; color: var(--neutro-900); text-transform: uppercase; }
.bt-editbar__actions { display: flex; align-items: center; gap: var(--space-xl); }
.bt-editbar__move { display: flex; gap: 8px; }
.bt-editbar__add { display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; }
.bt-editbar__add img { width: 32px; height: 32px; display: block; }

/* Steper (526:4480) · Step (526:4399) · .Indicator (526:4377) · .Progress line (526:4394)
   Rendered by <bt-stepper>; the classes are usable by hand too. */
.bt-stepper { display: flex; align-items: flex-start; width: 100%; }
.bt-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
.bt-step__row { display: flex; align-items: center; width: 100%; height: 16px; }
.bt-step__line { flex: 1 1 0; height: 2px; background: var(--neutro-300); }
.bt-step__line--on { background: var(--primary-600); }
.bt-step__line--none { background: none; }
.bt-step__dot {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--neutro-300) 0 4px, var(--neutro-fff) 4.5px);
}
.bt-step--active .bt-step__dot { background: radial-gradient(circle, var(--neutro-fff) 0 4px, var(--primary-600) 4.5px); }
.bt-step--done .bt-step__dot { background: var(--primary-600); color: var(--on-color); }
.bt-step--done .bt-step__dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: currentColor;
  -webkit-mask: url("icons/check.svg") center / contain no-repeat;
  mask: url("icons/check.svg") center / contain no-repeat;
}
.bt-step__label { padding: 0 var(--space-m); font: var(--font-p1); line-height: normal; color: var(--neutro-600); text-align: center; white-space: nowrap; }
.bt-step--active .bt-step__label { color: var(--primary-600); }

/* =========================================================================
   Cards (56:233)
   ========================================================================= */
.bt-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  width: 342px;
  padding: var(--space-m) var(--space-xl) var(--space-xl);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--neutro-900);
  text-decoration: none;
}
a.bt-card, button.bt-card, .bt-card[tabindex] { cursor: pointer; }
.bt-card:where(a, button, [tabindex]):hover, .bt-card.is-hover { background: var(--neutro-200); }
.bt-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.bt-card__when { display: flex; align-items: center; gap: var(--space-xs); font: var(--font-note); line-height: normal; color: var(--secondary-500); }
.bt-card__body { display: flex; flex-direction: column; gap: var(--space-xxs); }
.bt-card__author { font: var(--font-p2); color: var(--neutro-900); }
.bt-card__title {
  margin: 0;
  font: var(--font-h4);
  line-height: normal;
  color: var(--neutro-900);
  min-height: 72px;               /* three lines, as the frames reserve */
}
.bt-card__visibility { display: flex; align-items: center; gap: 8px; font: var(--font-note); line-height: normal; color: var(--neutro-600); }
.bt-card__visibility .bt-icon { width: 16px; height: 16px; color: var(--neutro-600); }
.bt-card__meta { display: flex; flex-direction: column; gap: 4px; font: var(--font-note); line-height: normal; color: var(--neutro-600); }

/* Compañero (68:269) */
.bt-card--companero { width: 340px; padding: var(--space-xl); }
.bt-card--companero .bt-card__name { margin: 0; font: var(--font-h4); line-height: normal; color: var(--neutro-900); }
.bt-card--companero .bt-card__role { font: var(--font-p2); color: var(--neutro-600); }
.bt-card--companero .bt-card__bio { margin: 0; font: var(--font-p1); line-height: normal; color: var(--neutro-900); }
.bt-card__head { display: flex; flex-direction: column; gap: var(--space-xs); }

/* Evento (685:5862) */
.bt-card--evento .bt-card__body { gap: var(--space-l); }

/* Hilo (293:1348) · Respuesta (293:4021) · Responder (293:4096) */
.bt-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 720px;
  max-width: 100%;
  padding: var(--space-xl);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.bt-thread--reply { width: 636px; }
.bt-thread__main { display: flex; align-items: flex-start; gap: 12px; }
.bt-thread__aside { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); align-self: stretch; }
.bt-thread__rule { width: 2px; height: 16px; background: var(--neutro-300); border-radius: 1px; }
.bt-thread__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-m); }
.bt-thread__text { display: flex; flex-direction: column; gap: var(--space-xxs); }
.bt-thread__byline { margin: 0; font: var(--font-note); line-height: normal; color: var(--neutro-600); }
.bt-thread__title { margin: 0; font: var(--font-p1-bold); line-height: normal; color: var(--neutro-900); }
.bt-thread__body { margin: 0; font: var(--font-p2); color: var(--neutro-900); }
.bt-thread__foot { display: flex; align-items: center; justify-content: space-between; }
.bt-thread__people { display: flex; align-items: center; gap: var(--space-s); font: var(--font-note); line-height: normal; color: var(--neutro-700); }
.bt-thread__reactions { display: flex; align-items: center; gap: var(--space-l); }

.bt-reaction {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0;
  border: 0;
  background: none;
  font: var(--font-p1-bold);
  line-height: normal;
  color: var(--neutro-500);
  cursor: pointer;
}
.bt-reaction--on, .bt-reaction[aria-pressed="true"] { color: var(--primary-500); }

.bt-reply-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 636px;
  max-width: 100%;
  padding: var(--space-xl);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.bt-reply-form__actions { display: flex; justify-content: flex-end; }

/* =========================================================================
   Content (59:212)
   ========================================================================= */

/* Profile (178:3670) · Profile edit (293:1722) */
.bt-profile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xxl);
  padding: var(--space-xxxl) var(--space-xxxxxxl) var(--space-xxxxxxl) var(--space-xxl);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.bt-profile__main { display: flex; flex-direction: column; gap: var(--space-xxxl); min-width: 0; }
.bt-profile__names { display: flex; flex-direction: column; gap: var(--space-xs); }
.bt-profile__name { margin: 0; font: var(--font-h1); line-height: normal; color: var(--neutro-900); }
.bt-profile__role { margin: 0; font: var(--font-h2); line-height: normal; color: var(--neutro-600); }
.bt-profile__story { display: flex; flex-direction: column; gap: var(--space-m); color: var(--neutro-600); max-width: 768px; }
.bt-profile__story h3 { margin: 0; font: var(--font-h4); line-height: normal; }
.bt-profile__story p { margin: 0; font: var(--font-p1); line-height: normal; }
.bt-profile__story p + p { margin-top: calc(1.22em - var(--space-m)); }  /* Figma: one blank line between paragraphs */
.bt-profile--edit .bt-profile__main { gap: var(--space-m); width: 794px; max-width: 100%; }

/* Divider (424:1554) */
.bt-divider { height: 0; margin: 0; border: 0; border-top: 1px solid var(--neutro-300); }

/* Accordion (434:2139: Extended 434:2126, "Defaul" 434:2140) — behaviour in <bt-accordion> */
.bt-accordion {
  width: 595px;
  max-width: 100%;
  padding: var(--space-s) var(--space-xl);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.bt-accordion__head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: var(--font-p1-bold);
  line-height: normal;
  color: #000;
  text-align: start;
  cursor: pointer;
}
.bt-accordion__head > span:first-child { flex: 1 1 0; }
.bt-accordion__head .bt-icon { width: 32px; height: 32px; --bt-icon-src: url("icons/arrow-down.svg"); }
.bt-accordion.is-expanded .bt-accordion__head { align-items: flex-start; }
.bt-accordion.is-expanded .bt-accordion__head .bt-icon { --bt-icon-src: url("icons/arrow-up.svg"); }
.bt-accordion__body {
  margin-top: -2px;                 /* title (≈20px) + 10px gap, under a 32px-tall head */
  padding-inline-end: 40px;         /* clear of the 32px arrow + 8px gap */
  font: var(--font-p1);
  line-height: normal;
  color: #000;
}
.bt-accordion:not(.is-expanded) .bt-accordion__body { display: none; }

/* Chip (526:9948) — review status labels. Figma variant names in comments. */
.bt-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xxs) var(--space-s);
  border-radius: var(--radius-chip);
  font: var(--font-p2-bold);
  line-height: normal;
  white-space: nowrap;
  background: var(--secondary-50);
  color: var(--secondary-500);
}
.bt-chip--pendiente { background: var(--secondary-50); color: var(--secondary-500); }   /* Estados=Pendiente 526:9941 */
.bt-chip--revision { background: var(--alert); color: var(--on-color); }              /* Estados=Revision 526:9949 */
.bt-chip--listo { background: var(--success); color: var(--on-color); }               /* Estados=Listo 526:9951 */
.bt-chip--correcciones { background: var(--error); color: var(--on-color); }          /* Estados=Correciones 526:9953 */
.bt-chip--borrador { background: var(--neutro-50); color: var(--neutro-600); }          /* Estados=Borrador 642:6732 */
.bt-chip--nuevo { background: var(--secondary-50); color: var(--secondary-500); }       /* "Chip / nuevo" 156:3107 */

/* =========================================================================
   Inputs (62:122)
   ========================================================================= */

/* Input text (62:174: inactive 62:173, Active 62:175, Done 288:1051, Error 288:1056,
   Disabled 514:3764). Markup:
   <label class="bt-field"><span class="bt-field__label">Label</span>
     <input class="bt-input" placeholder="Input text"><span class="bt-field__help">…</span></label> */
.bt-field { display: flex; flex-direction: column; gap: var(--space-xxs); min-width: 0; }
.bt-field__label { font: var(--font-p2-bold); line-height: normal; color: var(--neutro-900); }
.bt-field__help { font: var(--font-helper); line-height: normal; color: var(--neutro-600); }
.bt-input {
  display: block;
  width: 100%;
  padding: var(--space-s) var(--space-xs);
  border: var(--stroke-s) solid var(--neutro-300);
  border-radius: var(--radius-xs);
  background: var(--surface);
  font: var(--font-p1);
  line-height: normal;
  color: var(--neutro-900);
  outline: none;
}
.bt-input::placeholder { color: var(--neutro-500); opacity: 1; }
textarea.bt-input { resize: vertical; min-height: 120px; }
.bt-input:focus, .bt-input.is-focus { border-color: var(--primary-600); }   /* Status=Active */
.bt-field--error .bt-field__label { color: var(--error); }
.bt-field--error .bt-input, .bt-input[aria-invalid="true"] { border-color: var(--error); }
.bt-input:disabled { background: var(--surface); color: var(--neutro-500); }
.bt-field:has(.bt-input:disabled) .bt-field__label,
.bt-field--disabled .bt-field__label { color: var(--neutro-700); }

/* Form (63:118): two columns of 275 and a full-width textarea; gap 16 × 24 */
.bt-form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xl); }
.bt-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m) var(--space-xl); width: 575px; max-width: 100%; }
.bt-form__grid .bt-field--wide { grid-column: 1 / -1; }

/* Selector with checkbox (514:3818: Selected 514:3817, Disabled 526:6734, "Doble" 526:6753) */
.bt-check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-l);
  padding: var(--space-xl) var(--space-l) var(--space-xxl);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.bt-check-row__fields { display: flex; align-items: flex-end; gap: var(--space-s); }
.bt-check-row__stack { display: flex; flex-direction: column; gap: 12px; width: 428px; }
.bt-check-row--disabled .bt-field__label { color: var(--neutro-600); }

/* Pill selector (515:4256: Default 515:4255, Selected 515:4257) */
.bt-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-s);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--neutro-50);
  color: var(--neutro-900);
  font: var(--font-p2);
  white-space: nowrap;
  cursor: pointer;
}
.bt-pill--selected, .bt-pill[aria-pressed="true"] { background: var(--primary-600); color: var(--on-color); }

/* Tags (515:4311) */
.bt-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-xs);
  background: var(--primary-600);
  color: var(--on-color);
  font: var(--font-p2);
  white-space: nowrap;
}
.bt-tag__remove { display: inline-flex; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.bt-tag__remove .bt-icon { width: 16px; height: 16px; }

/* Page (625:5902: Default 518:2896, Done 625:5903) — a page slot in the book editor */
.bt-page-slot { display: flex; flex-direction: column; gap: var(--space-xs); width: 160px; }
.bt-page-slot__label { padding-inline-start: var(--space-s); font: var(--font-p2); color: var(--neutro-700); text-align: end; }
.bt-page-slot__box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 160px;
  height: 160px;
  border: 1px dashed var(--neutro-300);
  border-radius: var(--radius-s);
  background: none;
  color: var(--neutro-900);
  font: var(--font-note);
  line-height: normal;
  cursor: pointer;
  overflow: hidden;
}
.bt-page-slot__box .bt-page-slot__hint { color: var(--neutro-600); }
.bt-page-slot__box .bt-icon { width: 32px; height: 32px; }
.bt-page-slot--done .bt-page-slot__box { align-items: flex-end; justify-content: flex-start; padding: var(--space-s) var(--space-s) 0 0; }
.bt-page-slot__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-s); }
.bt-page-slot__remove { position: relative; z-index: 1; padding: 0; border: 0; background: none; cursor: pointer; }
.bt-page-slot__remove img { display: block; width: 32px; height: 32px; }

/* =========================================================================
   Feedback — NOT IN FIGMA. The "Pop ups" frame (70:929) is empty.
   Placeholders built from the tokens until designed.
   ========================================================================= */

/* <bt-dialog> — placeholder */
.bt-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--neutro-900);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.bt-dialog::backdrop { background: rgba(38, 38, 38, 0.5); }
.bt-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding: var(--space-xl) var(--space-xl) 0; }
.bt-dialog__title { margin: 0; font: var(--font-h4); line-height: normal; }
.bt-dialog__close { color: var(--neutro-900); }
.bt-dialog__body { padding: var(--space-m) var(--space-xl); font: var(--font-p1); line-height: normal; }
.bt-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-s); padding: 0 var(--space-xl) var(--space-xl); }
.bt-dialog__actions:empty { display: none; }
/* Static preview in the gallery (an open, non-modal copy). */
.bt-dialog--static { position: static; display: block; margin: 0; }

/* <bt-banner> — the mock-data marker ("Datos de prueba"). Placeholder. */
.bt-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-m);
  background: var(--alert);
  color: var(--neutro-900);         /* white on Alert is ~2.6:1; dark text passes AA */
  font: var(--font-p2-bold);
  line-height: normal;
  text-align: center;
}
.bt-banner__note { font: var(--font-p2); }
bt-banner { display: block; }
bt-banner[sticky] { position: sticky; top: 0; z-index: 100; }