/* ============================================================
 * Flow360 — Design Tokens (Fase 39.2)
 * ============================================================
 *
 * Paleta + tipografía + tokens visuales inspirados en Front.com
 * adaptados para Flow360. Aplicados como override de las variables
 * CSS que ya expone temba-components (Fase 30.1 las hizo
 * theming-friendly).
 *
 * Filosofía:
 *   - Sobrio pero NO frío
 *   - Acento púrpura/azul moderno para CTAs y selecciones
 *   - Tipografía Inter (premium SaaS B2B 2024-2026)
 *   - Border radius 6-8px (no 16+ que es B2C kawaii)
 *   - Sombras suaves, profesionales
 *
 * Para iterar la paleta cambiá solamente las variables --flow360-*
 * de abajo. Todo el resto se deriva. */


/* ─── Tipografía: Inter desde Google Fonts ─────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* ─── Design tokens Flow360 ─────────────────────────────────── */
html {
  /* Paleta principal */
  --flow360-primary:        #5A6CFA;   /* púrpura/azul Front-style */
  --flow360-primary-hover:  #4A5BE0;
  --flow360-primary-light:  #EEEDFC;   /* bg de selección sutil */

  --flow360-secondary:      #4A5BE0;
  --flow360-accent:         #8B6CFA;   /* acento gradients */

  /* Neutros — grises fríos estilo Front */
  --flow360-bg:             #FAFAFB;   /* fondo app */
  --flow360-surface:        #FFFFFF;   /* cards, sidebar */
  --flow360-border:         #EAEBEE;   /* divisores sutiles */
  --flow360-border-strong:  #C5CAD3;
  --flow360-hover:          #F4F5F7;   /* hover sutil */

  --flow360-text-primary:   #1E2228;   /* títulos, principal */
  --flow360-text-secondary: #67707D;   /* body, secondary */
  --flow360-text-tertiary:  #9AA1AC;   /* placeholders, captions */

  /* Estados semánticos */
  --flow360-success:        #10B981;
  --flow360-warning:        #F59E0B;
  --flow360-danger:         #EF4444;
  --flow360-info:           #3B82F6;

  /* Sombras suaves */
  --flow360-shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.04);
  --flow360-shadow-md:    0 4px 12px rgba(15, 23, 42, 0.06);
  --flow360-shadow-lg:    0 8px 24px rgba(15, 23, 42, 0.08);
  --flow360-shadow-sidebar: 4px 0 24px rgba(15, 23, 42, 0.06);

  /* Border radius */
  --flow360-radius-sm:    4px;
  --flow360-radius-md:    8px;
  --flow360-radius-lg:    12px;
  --flow360-radius-full:  999px;

  /* Override de las variables que usa el tailwind config */
  --primary-rgb:    90, 108, 250;     /* #5A6CFA en rgb */
  --secondary-rgb:  74, 91, 224;
  --tertiary-rgb:   139, 108, 250;
  --error-rgb:      239, 68, 68;
  --success-rgb:    16, 185, 129;

  /* Override de variables que usa temba-components (Fase 30.1) */
  --color-primary-dark: var(--flow360-primary);
  --color-selection:    var(--flow360-primary-light);

  /* Sidebar temba-menu — light Flow360 theme */
  --menu-icon-color:                  var(--flow360-text-secondary);
  --menu-submenu-bg:                  var(--flow360-surface);
  --menu-submenu-text:                var(--flow360-text-primary);
  --menu-submenu-selected-bg:         var(--flow360-primary);
  --menu-submenu-selected-text:       #FFFFFF;
  --menu-selected-corner-bg:          transparent;
  --menu-padding:                     8px;
}


/* ─── Tipografía global ────────────────────────────────────── */
body, html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Todos los elementos heredan Inter (override explícito por si algún tag
   tiene font-family inline) */
button, input, select, textarea, .temba-menu, temba-menu, temba-button,
temba-textinput, temba-select, temba-dialog, temba-dropdown {
  font-family: inherit;
}


/* ─── Background app ───────────────────────────────────────── */
body {
  background: var(--flow360-bg);
  color: var(--flow360-text-primary);
}


/* ─── Sidebar brand row (cuadrado "F" + texto "Flow360" al hover) ─── */
.flow360-sidebar-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  border-bottom: 1px solid var(--flow360-border);
  height: 72px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}

.flow360-sidebar-brand {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--flow360-primary) 0%, var(--flow360-accent) 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  box-shadow: 0 2px 6px rgba(90, 108, 250, 0.3);
}

.flow360-sidebar-brand-text {
  font-weight: 700;
  font-size: 15px;
  color: var(--flow360-text-primary);
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 180ms ease 80ms, transform 180ms ease 80ms;
}

/* ─── Sidebar collapse + hover-expand (patrón Front) ──────── */
.folders.flow360-sidebar:hover .flow360-sidebar-brand-text {
  opacity: 1;
  transform: translateX(0);
}


/* ============================================================
 * Sidebar nav custom — REWRITE limpio (Fase 39.3)
 *
 * Estrategia simple:
 *   - Sidebar 80px colapsado, 240px hover
 *   - Cada nav-item es flex con icono + label
 *   - En colapsado: justify-content center → icono centrado
 *   - Label, section-label, badge: display:none en colapsado
 *   - En hover: display normal, justify-content flex-start
 *   - Sin "!important" innecesarios, sin animaciones complejas
 *
 * Esto da el look exacto del mockup standalone con CSS minimal.
 * ============================================================ */

/* Ocultar el temba-menu original SIEMPRE (lo reemplazamos con nuestro nav) */
.folders.flow360-sidebar temba-menu,
temba-menu#nav {
  display: none !important;
}

/* Nav wrapper */
.flow360-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Section labels (OPERAÇÃO / CONFIGURAÇÃO) */
.flow360-nav-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--flow360-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 12px 4px;
  white-space: nowrap;
}
/* Ocultas cuando el sidebar está colapsado */
.folders.flow360-sidebar:not(:hover) .flow360-nav-section-label {
  display: none;
}

/* [Fase 15.8] Section labels del modo STAFF — color púrpura para
 * diferenciarlas de las secciones normales (Operação / Configuração).
 * Sutil pero claro: "esto es zona avanzada / cross-org". */
.flow360-nav-section-staff {
  color: var(--flow360-primary) !important;
  margin-top: 12px;
  border-top: 1px dashed var(--flow360-border);
  padding-top: 12px !important;
}
/* La primera section staff (la que dice "Staff 🛡") tiene margin-top
 * extra para separarse claramente del nav normal de Configuração. */
.flow360-nav-section-staff:first-of-type {
  margin-top: 20px;
}

/* Nav items */
.flow360-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--flow360-text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}
.flow360-nav-item:hover {
  background: var(--flow360-hover);
  color: var(--flow360-text-primary);
  text-decoration: none;
}
.flow360-nav-item.active {
  background: var(--flow360-primary-light);
  color: var(--flow360-primary);
  font-weight: 600;
}
.flow360-nav-item.active .flow360-nav-icon {
  stroke: var(--flow360-primary);
}

.flow360-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
}

.flow360-nav-label {
  flex: 1;
}
.flow360-nav-badge {
  background: var(--flow360-primary);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
  min-width: 20px;
  text-align: center;
}

/* === ESTADO COLAPSADO (sidebar sin :hover) === */
/* Ocultar labels y badges → solo se ve el icono */
.folders.flow360-sidebar:not(:hover) .flow360-nav-label,
.folders.flow360-sidebar:not(:hover) .flow360-nav-badge {
  display: none;
}
/* Items centrados horizontalmente (icono centrado en los 80px) */
.folders.flow360-sidebar:not(:hover) .flow360-nav-item {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}
.flow360-nav-item.active .flow360-nav-icon {
  stroke: var(--flow360-primary);
}
.flow360-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
}
.flow360-nav-label {
  flex: 1;
}
.flow360-nav-badge {
  background: var(--flow360-primary);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
  min-width: 20px;
  text-align: center;
}


/* ─── Sidebar (folders.flow360-sidebar) ────────────────────── */
.folders.flow360-sidebar {
  background: var(--flow360-surface) !important;
  border-right: 1px solid var(--flow360-border);

  /* [Fase 39.3] Sidebar FULL-HEIGHT desde el tope de la pantalla (estilo
   * mockup standalone). Position absolute para que arranque desde el
   * tope (encima del topbar). El topbar y content tienen padding-left
   * que sincroniza con el width del sidebar — cuando el sidebar se
   * expande al hover, el padding-left aumenta y todo el contenido se
   * empuja a la derecha al mismo tiempo, dando sensación de armonía. */
  position: absolute !important;
  top: 0;
  left: 0;
  height: 100vh !important;
  z-index: 100;
  min-width: 80px !important;
  width: 80px !important;
  flex-shrink: 0 !important;
  padding: 0;
  box-sizing: border-box;
  transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1),
              min-width 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.folders.flow360-sidebar:hover {
  width: 240px !important;
  min-width: 240px !important;
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.06);
}

/* Wrapper que contiene topbar + widget-container (parent del sidebar).
 * Tiene padding-left para no quedar tapado por el sidebar absolute.
 * El selector :has() es CSS moderno (Chrome 105+, Safari 15.4+, Firefox 121+) */
.flex.flex-col:has(> .widget-container > .folders.flow360-sidebar) {
  padding-left: 80px;
  transition: padding-left 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.flex.flex-col:has(> .widget-container > .folders.flow360-sidebar:hover) {
  padding-left: 240px;
}

/* Reset cualquier padding heredado del wrapper en colapsado */
.folders.flow360-sidebar:not(:hover) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
}
.folders.flow360-sidebar:hover {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* CSS variables del temba-menu (Fase 39.2): override DENTRO del wrapper
 * para que el menu interno pinte el bg blanco. Hereda al Shadow DOM. */
.folders.flow360-sidebar {
  --color-primary-dark: var(--flow360-surface);
  --color-selection:    var(--flow360-primary-light);
}


/* ─── Iconos más finos (estilo Front/Lucide) ───────────────── */
/* Override de stroke-width para que los iconos del sidebar (y de todos
 * los temba-icon en el producto) se vean estilo Lucide/Front: line minimal,
 * stroke 1.5px. Si un icono está dibujado como filled path (no como stroke)
 * este override no lo afecta — pero los iconos del menú son line-style.
 * Si quedan iconos gruesos puntuales, se atacan en Sprint B (reemplazo
 * por Lucide). */
.folders.flow360-sidebar svg,
.folders.flow360-sidebar svg *,
.folders.flow360-sidebar temba-icon svg,
.folders.flow360-sidebar temba-icon svg * {
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* También en el topbar y resto del producto (consistencia) */
temba-icon svg,
temba-icon svg * {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Cards & containers ───────────────────────────────────── */
.card, .panel {
  border-radius: var(--flow360-radius-lg) !important;
  border-color: var(--flow360-border) !important;
}


/* ─── Buttons (override clases temba/bootstrap) ────────────── */
button.primary, .btn-primary, temba-button[primary] {
  background: var(--flow360-primary) !important;
  border-color: var(--flow360-primary) !important;
  border-radius: var(--flow360-radius-md);
  font-weight: 500;
  transition: background 150ms ease;
}
button.primary:hover, .btn-primary:hover {
  background: var(--flow360-primary-hover) !important;
}


/* ─── Inputs con focus Flow360 ─────────────────────────────── */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--flow360-primary) !important;
  box-shadow: 0 0 0 3px var(--flow360-primary-light) !important;
}


/* ─── Footer ───────────────────────────────────────────────── */
/* (consolidada abajo con position: fixed para alinear con el footer del sidebar) */


/* ─── Topbar (Fase 36.2) ───────────────────────────────────── */
.flow360-topbar {
  background: var(--flow360-surface);
  border-bottom: 1px solid var(--flow360-border);
}

/* ===========================================================
 * Brand logo en el SIDEBAR (clon exacto del mockup standalone)
 * ===========================================================
 * Estructura: .flow360-sidebar-logo (row 56px height)
 *   ├─ .flow360-sidebar-logo-mark   (cuadrado "F" 32x32 con gradient)
 *   └─ .flow360-sidebar-logo-text   (texto "Flow360" — opacity 0 en
 *                                    colapsado, 1 al hover sidebar)
 *
 * El header tiene MISMA ALTURA que el topbar (56px) y border-bottom,
 * lo que hace que el header del sidebar + topbar formen una "L" visual
 * unificada. Cuando el sidebar se expande, el header crece junto con él,
 * dando sensación de armonía. (Fase 39.3) */
.flow360-sidebar-logo {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--flow360-border);
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}

.flow360-sidebar-logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--flow360-primary) 0%, var(--flow360-accent) 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(90, 108, 250, 0.3);
}

.flow360-sidebar-logo-text {
  margin-left: 12px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--flow360-text-primary);
  opacity: 0;
  transition: opacity 150ms ease 100ms;
}

.folders.flow360-sidebar:hover .flow360-sidebar-logo-text {
  opacity: 1;
}


/* ─── Footer del sidebar — avatar + nombre + workspace ──────── */
.flow360-sidebar-footer {
  border-top: 1px solid var(--flow360-border);
  padding: 0 16px;
  height: 72px;            /* SAME altura que .spa-footer para que se alineen */
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 120ms ease;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}
.flow360-sidebar-footer:hover {
  background: var(--flow360-hover);
}

.flow360-sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
/* Dot verde de presencia "online" */
.flow360-sidebar-avatar::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--flow360-success);
  border: 2px solid var(--flow360-surface);
}

.flow360-sidebar-user-info {
  flex: 1;
  min-width: 0;
  opacity: 0;
  transition: opacity 150ms ease 100ms;
}
.folders.flow360-sidebar:hover .flow360-sidebar-user-info {
  opacity: 1;
}
.flow360-sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--flow360-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow360-sidebar-user-org {
  font-size: 11px;
  color: var(--flow360-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}


/* ─── Ocultar avatar del topbar (movido al sidebar footer) ─── */
.flow360-topbar-avatar-wrapper {
  display: none !important;
}


/* ─── [Fase 15.7c] Dropdown del avatar — posicionado desde el sidebar footer ───
 * El dropdown del avatar vivía dentro del topbar (Fase 36.2.4) con position:
 * absolute + top: calc(100% + 8px); right: 0. Cuando movimos el avatar al
 * sidebar footer (Fase 39.3) el dropdown quedó dentro de un parent display:none
 * → invisible.
 *
 * En la Fase 15.7c reubicamos la HTML del dropdown a estar adentro del
 * .flow360-sidebar-footer. Como el footer está fixed al bottom del viewport,
 * el dropdown tiene que abrir HACIA ARRIBA (bottom-up), no hacia abajo.
 *
 * Posicionamiento override: bottom: calc(100% + 8px) en lugar de top:, y
 * left: 8px en lugar de right: 0 (para que el dropdown se asome a la derecha
 * cuando el sidebar está colapsado a 80px). El z-index alto asegura que se
 * dibuje encima de otros elementos del layout. */
.flow360-sidebar-footer {
  position: relative;  /* mantiene anchor para fallback */
}
/* Position FIXED (no absolute) para que ningún ancestor con overflow:hidden
 * pueda recortar el dropdown. Coordenadas absolutas al viewport:
 *   bottom: 80px → 72px (alto del footer) + 8px de gap
 *   left:   8px  → asomado al borde izquierdo del sidebar/viewport
 * z-index 9999 → encima de TODO (sidebar z-index:100, content < 100). */
.flow360-sidebar-footer .flow360-topbar-avatar-dropdown {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: 80px !important;
  left: 8px !important;
  z-index: 9999 !important;
}

/* [Fase 15.7c fix] Logout form — invisible wrapper, button con estilo idéntico
 * a los <a> items del dropdown. display:contents para que el form no rompa el
 * layout flex del dropdown padre. */
.flow360-topbar-avatar-dropdown-logout-form {
  display: contents;
  margin: 0;
  padding: 0;
}
.flow360-topbar-avatar-dropdown-logout-form button {
  /* Reset del button: sin background nativo, ancho 100% del dropdown,
   * mismo padding/font que los <a> items para que se vea idéntico */
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}


/* ─── Sidebar flex column para que el footer quede al bottom ─── */
.folders.flow360-sidebar {
  display: flex;
  flex-direction: column;
}
.flow360-sidebar-nav {
  flex: 1;        /* nav ocupa el espacio disponible, empuja el footer abajo */
}

/* El footer del spa-content (© 2026 Flow360...) debe estar EXACTAMENTE
 * al mismo nivel vertical que el footer del sidebar (avatar).
 *
 * Truco: como el sidebar es position:absolute height:100vh, su footer
 * está SIEMPRE al bottom del viewport. Hacemos lo mismo con .spa-footer:
 * position:fixed bottom:0. Así ambos footers comparten la línea base.
 *
 * El sidebar colapsado mide 80px de ancho → footer arranca en left:80px.
 * Al hover, el sidebar crece a 240px → footer se desplaza a left:240px
 * (mismo transition que el padding-left del wrapper).
 *
 * Z-index 90 para que el sidebar (z-index 100) quede ENCIMA cuando
 * hace overlay. (Fase 39.5) */
.spa-footer {
  position: fixed !important;
  bottom: 0;
  left: 80px;
  right: 0;
  height: 72px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--flow360-bg) !important;
  color: var(--flow360-text-tertiary) !important;
  border-top: 1px solid var(--flow360-border);
  margin: 0 !important;
  padding: 0 24px !important;
  transition: left 220ms ease;
  box-sizing: border-box;
}

/* Cuando el sidebar se expande al hover, el footer se desplaza con él */
.flex.flex-col:has(.folders.flow360-sidebar:hover) .spa-footer,
body:has(.folders.flow360-sidebar:hover) .spa-footer {
  left: 240px;
}

/* El spa-content necesita padding-bottom para no quedar tapado por
 * el footer fijo. */
.spa-content {
  padding-bottom: 72px !important;
}


/* ===========================================================
 * Topbar — Ocultar workspace switcher (Fase 39.7)
 * ===========================================================
 * El switcher "Facilitta Saude" del topbar es REDUNDANTE: el nombre del
 * workspace ya aparece en el footer del sidebar (debajo del nombre del
 * usuario). Lo ocultamos del topbar para limpiar la UI.
 *
 * Si en el futuro queremos volver a habilitar el switcher (para usuarios
 * con múltiples workspaces), basta con quitar este display:none. La
 * lógica del dropdown sigue intacta. */
.flow360-topbar-workspace-wrapper {
  display: none !important;
}


/* ===========================================================
 * Topbar bell — Icono SVG line (Lucide) + dot rojo al costado
 * ===========================================================
 * El bell ahora es un SVG inline en lugar del emoji 🔔. Se ajusta a
 * 18x18 (igual al mockup) y hereda el color del topbar (text-secondary).
 * El wrapper .flow360-topbar-notif mantiene padding/hover de la Fase 36.2.3,
 * pero ya no necesita font-size grande (era para el emoji). */
.flow360-topbar-notif {
  font-size: 0 !important;   /* desactiva el sizing del emoji anterior */
}
.flow360-topbar-notif-icon {
  width: 18px;
  height: 18px;
  color: var(--flow360-text-secondary);
  display: block;
}
.flow360-topbar-notif:hover .flow360-topbar-notif-icon {
  color: var(--flow360-text-primary);
}


/* ===========================================================
 * Topbar bell — Dot rojo al costado (estilo mockup standalone, Fase 39.7)
 * ===========================================================
 * Reemplaza el badge "número rojo sobre la campana" por un punto rojo
 * pequeño en la esquina top-right del bell. Más limpio, menos ruidoso,
 * coincide con el patrón de Linear/Front. El número exacto de notifs
 * se ve igualmente al abrir el dropdown.
 *
 * El badge sigue presente en el DOM (lo controla notif-badge.js) — solo
 * cambiamos su apariencia: sin texto, círculo de 8px con borde blanco. */
.flow360-topbar-notif-badge {
  /* Override completo del badge rojo con número de Fase 36.2.3 */
  top: 6px !important;
  right: 6px !important;
  bottom: auto !important;
  left: auto !important;
  min-width: 0 !important;
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  font-size: 0 !important;          /* esconde el número */
  color: transparent !important;
  background: #EF4444 !important;
  border-radius: 50% !important;
  border: 2px solid var(--flow360-surface) !important;
  box-sizing: border-box;
  line-height: 0 !important;
}


/* ===========================================================
 * Topbar search — alinear a la DERECHA (como el mockup standalone)
 * ===========================================================
 * En el mockup `.topbar-search` usa `margin-left: auto` + `width: 360px`
 * para empujar el search al borde derecho, junto a los iconos de
 * notif/info. Replicamos ese comportamiento override-ando las reglas
 * de frame.css que centran el search.
 *
 * Estructura: [workspace] [── espacio flex ──] [search-360px] [bell] [info]
 * (Fase 39.6) */
.flow360-topbar-center {
  justify-content: flex-end !important;
}
.flow360-topbar-search {
  width: 360px !important;
  max-width: 360px !important;
  margin-right: 16px;
  flex: 0 0 360px;
}