/* Herramienta grande dentro de la web (Reiluminar y las próximas de Coqueta Studio): la barra de MyPrompTribe arriba
   y la herramienta ocupando todo lo demás, a todo el ancho. Mismo esquema que la página de Neuronautas. */
html:has(body.tf-shell), body.tf-shell { height: 100%; }
body.tf-shell { margin: 0; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; padding: 0 !important; background: var(--tf-bg, #0b0c10); }
body.tf-shell .tool-shell { display: contents; }
body.tf-shell .tf-shell__header {
  flex: none; position: relative; z-index: 5; margin: 0; padding: 10px 20px;
  /* en fila también en el móvil (experience.css pone .tool-header en columna por debajo de 700 px) */
  display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap !important; gap: 10px; min-height: 0;
}
/* barra en una sola fila (las páginas de herramientas la parten en dos en pantallas estrechas) */
body.tf-shell .tf-shell__header .tool-header__nav { flex: 1 1 auto; width: auto !important; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.tf-shell .tf-shell__header .tool-header__nav::-webkit-scrollbar { display: none; }
body.tf-shell .tf-shell__header .tool-header__nav a { white-space: nowrap; }
.tf-shell__full {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 179, 107, .4); background: rgba(255, 140, 90, .1); color: inherit;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tf-shell__full:hover, .tf-shell__full:focus-visible { background: rgba(255, 140, 90, .2); border-color: rgba(255, 179, 107, .8); }
body.tf-shell main.tf-shell__main { flex: 1; min-height: 0; display: flex; max-width: none; width: 100%; margin: 0; padding: 0; }
.tf-shell__frame { flex: 1; width: 100%; height: 100%; border: 0; display: block; background: var(--tf-bg, #0b0c10); }
/* texto para buscadores y lectores de pantalla (la herramienta se ve en el marco) */
.tf-shell__about { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* móvil en horizontal o pantalla estrecha: la barra se compacta para dejar sitio a la herramienta */
@media (max-height: 520px), (max-width: 720px) {
  body.tf-shell .tf-shell__header { padding: 4px 10px; gap: 6px; }
  body.tf-shell .tf-shell__header .brand-lockup__name { display: none; }
  body.tf-shell .tf-shell__header .brand-lockup__mark { width: 26px; height: 26px; }
  body.tf-shell .tf-shell__header .tool-header__nav { gap: 2px; }
  body.tf-shell .tf-shell__header .tool-header__nav a:not(.brand-lockup) { min-height: 32px; padding: 6px 8px; font-size: .76rem; }
  body.tf-shell .tf-shell__header select { padding-top: 4px; padding-bottom: 4px; font-size: .76rem; }
  .tf-shell__full span { display: none; }
  .tf-shell__full { padding: 6px 10px; }
}