/* ════════════════════════════════════════════════════════════════════════════
   VECTOR Portal · Identidad "Magnitud × Dirección"
   6 palancas visuales, portadas de variant_e del sandbox al CSS de producción.
   ════════════════════════════════════════════════════════════════════════════
   Fuente: material/design/portal_v2/sosah_polish/variant_e/vector_identity.css
   Adaptación: selectores producción (#topbar, .btn-p, .nit, #nav, etc.)
   Fecha: 2026-05-23 · B0 redesign
   ════════════════════════════════════════════════════════════════════════════

   FILOSOFÍA:
   Petróleo = MAGNITUD (fuerza concentrada, empresa seria)
   Ámbar    = DIRECCIÓN (la señal, el ángulo, el destino de la acción)
   El operador "×" une ambos, no como decoración, como firma conceptual.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Tokens específicos de identidad, sobre la paleta magnitud_direccion */
  --vxe-header-gradient:
       linear-gradient(165deg,
         #062029 0%,
         #0A2F3A 55%,
         #0E3F4D 100%);

  --vxe-direction-cue:
       linear-gradient(90deg,
         transparent 0%,
         rgba(199, 119, 0, 0) 30%,
         rgba(199, 119, 0, 0.55) 100%);

  --vxe-operator-color:      #C77700;
  --vxe-operator-color-soft: rgba(199, 119, 0, 0.55);
}

/* ════════════════════════════════════════════════════════════════════════════
   PALANCA 1 · Gradient diagonal 165° en el topbar
   Producción: #topbar (en sandbox era .vx-topbar)
   Codifica: MAGNITUD con dirección. El ángulo 165° da al topbar
   un vector perceptible, no decoración, geometría con sentido.
   ════════════════════════════════════════════════════════════════════════════ */

#topbar {
  background: var(--vxe-header-gradient);
  border-bottom-color: transparent;
}

/* Texto e iconos del topbar: invertir a blanco */
#topbar .tlogo-w {
  background: #FFFFFF;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2.5px;
}
#topbar .tsep {
  background: rgba(255, 255, 255, .18);
}
#topbar #tmod {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .90);
}
#topbar .tbtn {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .75);
}
#topbar .tbtn:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .26);
  color: #FFFFFF;
}
#topbar .tav {
  border-color: rgba(255, 255, 255, .22);
}
#topbar .tav:hover {
  border-color: rgba(255, 255, 255, .50);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}

/* ════════════════════════════════════════════════════════════════════════════
   PALANCA 2 · Tagline "Magnitud × Dirección" en footer del sidebar
   Se inyecta vía JS post-render sobre #nav.
   Las clases .vxe-tagline y .vxe-tagline__op son propias de esta identidad.
   ════════════════════════════════════════════════════════════════════════════ */

.vxe-tagline {
  padding: 8px 16px 14px;
  margin-top: -4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vx-text-subtle, var(--tx3));
  border-top: 1px solid var(--vx-border-soft, var(--bdr));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  user-select: none;
}

.vxe-tagline__op {
  color: var(--vxe-operator-color);
  font-weight: 700;
  font-size: 11px;
  /* "×" es U+00D7, no la letra "x" */
}

body.nav-collapsed .vxe-tagline {
  display: none;
}

@media (max-width: 767px) {
  .vxe-tagline {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   PALANCA 3 · Mini-glyph flecha ámbar en el chip de módulo activo (#tmod-dot)
   En producción: #tmod-dot es el dot redondo del chip de módulo en el topbar.
   Lo reemplazamos por el glyph SVG vector ámbar.
   ════════════════════════════════════════════════════════════════════════════ */

#tmod-dot {
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: transparent;
  flex-shrink: 0;
  position: relative;
}

#tmod-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23E6AC49' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='2' y1='10' x2='9' y2='3'/><polyline points='5,3 9,3 9,7'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   PALANCA 4 · Micro-cuña ámbar a la derecha del nav item activo
   En producción: .nit.active
   Codifica: DIRECCIÓN del vector, el ítem activo apunta hacia el contenido.
   ════════════════════════════════════════════════════════════════════════════ */

.nit.active {
  position: relative;
  overflow: visible;
}

.nit.active::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 2px;
  background: var(--vxe-direction-cue);
  border-radius: 2px;
  pointer-events: none;
  opacity: .85;
}

/* ════════════════════════════════════════════════════════════════════════════
   PALANCA 5 · Arrow "→" en CTA primary (.btn-p)
   Codifica: ACCIÓN DIRECCIONAL. El primary CTA siempre apunta a algo.
   NO va en secondary/ghost/cancel.
   ════════════════════════════════════════════════════════════════════════════ */

.btn-p::after {
  content: '→';
  display: inline-block;
  margin-left: 5px;
  font-size: 1.05em;
  font-weight: 500;
  transition: transform var(--vx-dur-fast, 120ms) var(--vx-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  opacity: .85;
}

.btn-p:hover::after {
  transform: translateX(3px);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn-p::after { transition: none; }
  .btn-p:hover::after { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PALANCA 6 · Operador "×" en KPI subtitles
   Clases utilitarias: .vxe-op (fuerte) y .vxe-op--soft (suave)
   Uso: en JS templates donde hay relación "A × B" (ej. "4 encuestas × 2 activas")
   NO se fuerza, solo donde hay una relación natural de magnitud.
   ════════════════════════════════════════════════════════════════════════════ */

.vxe-op {
  display: inline-block;
  color: var(--vxe-operator-color);
  font-weight: 700;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.vxe-op--soft {
  color: var(--vxe-operator-color-soft);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════════
   PÁGINA PÚBLICA (rSosahPublica), identidad sin shell
   No hay topbar ni sidebar, pero el "×" y el "→" sí aplican.
   ════════════════════════════════════════════════════════════════════════════ */

.pub-vector-identity .pub__foot-vxe-tagline {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--vx-border-soft, var(--bdr));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vx-text-subtle, var(--tx3));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pub-vector-identity .pub__foot-vxe-tagline .vxe-tagline__op {
  color: var(--vxe-operator-color);
  font-weight: 700;
  font-size: 11px;
}