/* ============================================================
   BRANDING · identidad de marca editable desde la app
   La vista se monta sola desde branding.js sobre <section id="vista-branding">, así que
   el diff sobre index.html queda en el <link>, el <script src> y el item de nav. Mismo
   criterio que banco.css y feedback.css.

   Solo tokens de /tokens.css — cero hex hardcodeado. La excepción son los swatches de
   color, que pintan el hex que la persona está editando: ese "hex hardcodeado" es el
   dato, no una decisión de diseño.
   `.on` para "seleccionado", nunca `.sel` (design/ARQUITECTURA-PANTALLA.md).
   ============================================================ */

/* ---------- barra de perfil ---------- */

/* LA BARRA CONTEXTUAL DE LA PESTAÑA ACTIVA (etapa 4).
   Va DEBAJO de .br-tabs, no arriba: describe lo que hay abajo, así que no puede estar
   arriba del control que elige qué hay abajo. Tiene tres huecos y nunca se ven los tres:
     · #br-topbar-perfil → el selector de perfil, solo en las pestañas que guardan por perfil
     · #br-topbar-global → la línea que avisa que la pestaña activa NO es por perfil
     · #br-topbar-tab    → los controles propios de la pestaña (hoy, el [Guardar] de tokens) */
.br-topbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:var(--sp-5) 0; margin-bottom:14px; border-bottom:1px solid var(--line);
}
.br-topbar-perfil{
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; flex:1; min-width:0;
}
.br-topbar-perfil[hidden]{ display:none; }
.br-topbar-global{
  flex:1; min-width:0; font-size:var(--fs-sm); color:var(--ink-3); line-height:var(--lh-tight);
}
.br-topbar-global[hidden]{ display:none; }
.br-topbar-tab{ display:flex; align-items:center; gap:var(--sp-4); flex:none; margin-left:auto; }
.br-barra-tab{ display:flex; align-items:center; gap:var(--sp-4); }
.br-barra-tab[hidden]{ display:none; }
.br-topbar select{ min-width:200px; }
/* .spacer se define una sola vez en /base.css (con .cr-sp, .mk-sp y .fb-spacer como alias). */
.br-activo{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--turquesa-ink); background:var(--turquesa-dim);
  border:1px solid var(--turquesa-line); border-radius:var(--r-xs);
  padding:3px 8px; white-space:nowrap;
}
.br-inactivo{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-xs);
  padding:3px 8px; white-space:nowrap;
}

/* ---------- pestañas ---------- */

/* Sin margen abajo: la barra contextual de la pestaña activa arranca pegada a las
   pestañas, y su propio padding hace el aire. */
.br-tabs{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:0; }
.br-tab{
  background:transparent; border:1px solid transparent; border-bottom-color:var(--line);
  color:var(--ink-2); padding:7px 13px; border-radius:var(--r-sm) var(--r-sm) 0 0;
  font-size:12.5px; cursor:pointer;
}
.br-tab:hover{ color:var(--ink); }
.br-tab.on{
  color:var(--ink); background:var(--s2);
  border-color:var(--line); border-bottom-color:var(--s2); font-weight:600;
}
.br-panel[hidden]{ display:none; }

/* ---------- layout de la pestaña de tokens ---------- */

.br-cols{ display:flex; gap:var(--gut); align-items:flex-start; flex-wrap:wrap; }
.br-col-form{ flex:1 1 420px; min-width:0; }
.br-col-preview{ flex:0 1 380px; min-width:0; position:sticky; top:10px; }
@media (max-width: 900px){
  .br-col-preview{ position:static; flex-basis:100%; }
}

/* ---------- colores ---------- */

.br-colores{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px; }
.br-color{
  display:flex; align-items:center; gap:9px;
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:var(--s2); padding:8px 10px;
}
/* El <input type=color> nativo trae su propio chrome en cada plataforma; se lo achica y
   se lo deja hacer de swatch clickeable, que es exactamente lo que hace falta. */
.br-color input[type=color]{
  width:34px; height:34px; padding:0; border:1px solid var(--line);
  border-radius:var(--r-xs); background:transparent; cursor:pointer; flex:none;
}
.br-color-txt{ min-width:0; flex:1; }
.br-color-txt label{ display:block; font-size:11px; color:var(--ink-2); }
.br-color-txt .br-ayuda{ font-size:10px; color:var(--ink-3); line-height:1.3; }
.br-color input[type=text]{
  width:100%; font-family:var(--f-mono); font-size:11.5px; text-transform:uppercase;
  margin-top:3px;
}
.br-color.br-mal input[type=text]{ border-color:var(--rojo); }

/* ---------- preview ---------- */

/* El preview NO es el carrusel: es una maqueta chica que muestra los tokens aplicados sin
   costar un render. El carrusel de verdad se actualiza solo al guardar
   (window.invalidarPlantillaCarrusel), que es donde la paleta ya pasó por el server. */
.br-preview{
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
}
.br-preview-slide{
  padding:22px 20px; min-height:150px;
  display:flex; flex-direction:column; gap:9px; justify-content:center;
}
.br-preview-kicker{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.br-preview-titulo{ font-size:23px; line-height:1.08; font-weight:800; }
.br-preview-cuerpo{ font-size:12.5px; line-height:1.45; }
.br-preview-cta{
  align-self:flex-start; padding:6px 13px; font-size:11px; font-weight:700;
  letter-spacing:.04em;
}
.br-preview-nota{
  padding:8px 12px; font-size:10.5px; color:var(--ink-3); line-height:1.4;
  border-top:1px solid var(--line); background:var(--s1);
}

/* ---------- avisos ---------- */

.br-aviso{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  padding:9px 12px; font-size:12px; color:var(--ink-2); margin-bottom:12px;
  line-height:1.45; white-space:pre-wrap;
}
.br-aviso.err{ border-color:var(--rojo); color:var(--ink); }
.br-aviso.ok{ border-color:var(--turquesa-line); color:var(--ink); }
.br-aviso[hidden]{ display:none; }

.br-sec{ margin:16px 0 8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.br-fila{ display:flex; gap:10px; flex-wrap:wrap; }
.br-fila > .field{ flex:1 1 180px; min-width:0; }