/**
 * Skin Factory — Encabezado corporativo unificado (84px)
 * Referencia: Studio editor + Creator · Shared/Brand/logos/
 */
@import url('./sf-brand-tokens.css');

/* —— Safe area (notch / Dynamic Island) —— */
:root {
  --sf-safe-top:    env(safe-area-inset-top,    0px);
  --sf-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sf-safe-left:   env(safe-area-inset-left,   0px);
  --sf-safe-right:  env(safe-area-inset-right,  0px);
}

/* —— Topbar —— */
.sf-corp-header,
header.ll-topbar.ll-topbar-brand.sf-corp-header,
header.ll-topbar.sf-corp-header {
  display: flex;
  align-items: center;
  gap: var(--sf-layout-topbar-gap);
  flex-shrink: 0;
  /* altura crece con el notch — el fondo del header cubre la zona del reloj */
  height: calc(var(--sf-layout-topbar-h) + var(--sf-safe-top));
  min-height: calc(var(--sf-layout-topbar-h) + var(--sf-safe-top));
  max-height: none;
  padding: var(--sf-safe-top) var(--sf-layout-topbar-padding-x) 0;
  background: var(--sf-bg-deep);
  border-bottom: 1px solid var(--sf-accent-border);
  position: relative;
  z-index: var(--sf-layout-topbar-z);
}

/* —— Lockup —— */
.ll-brand-lockup,
.sf-corp-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.ll-brand-lockup--hero {
  padding: 0.25rem 0.65rem 0.25rem 0.35rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.1) 0%, rgba(5, 10, 22, 0.4) 55%, transparent 100%);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.12);
}

.ll-brand-sello,
.ll-brand-texto,
.sf-brand-logo-visible {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.ll-brand-sello,
.sf-brand-logo-visible.ll-brand-sello {
  width: var(--sf-brand-sello-size);
  height: var(--sf-brand-sello-size);
}

.ll-brand-texto,
.sf-brand-logo-visible.ll-brand-texto {
  width: var(--sf-brand-texto-width);
  height: auto;
  max-width: var(--sf-brand-texto-width);
  object-position: left center;
}

.sf-brand-on-dark .sf-brand-logo-visible,
.sf-brand-on-dark .ll-brand-sello,
.sf-brand-on-dark .ll-brand-texto {
  filter: brightness(0) invert(1);
}

.ll-brand-lab,
.ll-brand-lab--creator {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sf-accent);
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--sf-accent-border);
  background: rgba(0, 229, 255, 0.1);
}

/* —— Centro —— */
.sf-corp-header-center,
.sf-creator-header-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 0 0.5rem;
}

.sf-corp-header-center--module,
.sf-creator-header-center {
  align-items: center;
  text-align: center;
}

.sf-corp-header-sub,
.sf-creator-header-sub {
  margin: 0;
  font-size: 0.62rem;
  color: var(--sf-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  width: 100%;
}

/* —— Chrome derecho —— */
.ll-chrome-meta,
.sf-studio-chrome-meta,
.sf-creator-chrome-meta,
.sf-corp-chrome-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  font-size: 0.62rem;
  color: var(--sf-text-dim);
}

.ll-version-badge {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--sf-accent-border);
  background: rgba(0, 229, 255, 0.08);
  color: #00e5ff;
  font-weight: 700;
  white-space: nowrap;
}

.sf-chrome-link,
.sf-manual-btn,
.sf-studio-link-btn,
button.sf-chrome-link {
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.1);
  color: #00e5ff;
  font-size: 0.62rem;
  font-weight: 700;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.sf-chrome-link:hover,
.sf-manual-btn:hover,
.sf-studio-link-btn:hover {
  border-color: rgba(0, 229, 255, 0.65);
  background: rgba(0, 229, 255, 0.16);
}

.sf-reset-session-btn {
  border-color: rgba(255, 159, 10, 0.45);
  background: rgba(255, 159, 10, 0.1);
  color: #FF9F0A;
}

.sf-reset-session-btn:hover {
  border-color: rgba(255, 159, 10, 0.7);
  background: rgba(255, 159, 10, 0.18);
}

/* —— Páginas módulo (landing, admin, bots, taller, producción) —— */
body.ll-body.ll-module-page,
body.sf-module-page.ll-module-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color-scheme: dark;
  background: var(--sf-bg-deep);
  color: var(--sf-text-primary);
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

body.ll-module-page .sf-mod-main,
body.sf-module-page.ll-module-page .sf-mod-main {
  flex: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 3rem;
}