/* ════════════════════════════════════════════════════════════════════════════
   MODO AD, paleta "Inversiones AD" (rojo Claro/AD)
   Activo únicamente bajo :root[data-brand="ad"] (ver js/brand_ad.js).
   Sin el atributo, esta hoja no aplica NADA, cero efecto sobre el modo VECTOR.

   Fuente de colores: material/Inversiones_AD/MVP/design/README.md
   (Design Tokens · Color · Marca / acción)
   Rojo primario:        #DA291C
   Rojo CTA gradiente:    linear-gradient(135deg, #E23124, #C01D13)
   Rojo header gradiente: linear-gradient(180deg, #C0201A, #9A180F)

   Refactor w.192: los literales de --vx-brand-primary/--vxe-operator-color de
   acá abajo son SOLO el respaldo (por si js/brand_ad.js no llegó a correr).
   La fuente real es vector_tenants.metadata->'marca'.color_primario (chunk
   v45t/165), y js/brand_ad.js la inyecta como inline style en :root
   (_aplicarColoresMarca), un inline style siempre gana sobre esta regla de
   hoja externa, así que el valor real manda sin tocar este archivo. Las
   pocas reglas de abajo que usaban el literal plano en vez del var() ya se
   migraron a var(--vx-brand-primary, #DA291C) (mismo resultado hoy, config-
   driven a futuro). Los gradientes de 3 stops (--vxe-header-gradient,
   .topbar, .sophia-hero) quedan LITERALES a propósito, no derivan de
   color_primario_dark: son 3 colores, no 2, y ya están hardeneados contra
   overrides de temas de usuario (fix w.135, ver más abajo); no se tocan acá. */

:root[data-brand="ad"] {
  /* ── Semánticos de marca (consumidos ya por main.css / --mag / --ora vía var()) ── */
  --vx-brand-primary:        #DA291C;
  --vx-brand-primary-hover:  #E23124;
  --vx-brand-primary-active: #9A180F;
  --vx-brand-primary-soft:   rgba(218, 41, 28, .08);
  --vx-brand-primary-on:     #FFFFFF;

  /* Sin acento ámbar en la paleta AD (monocromática rojo), accent = rojo
     más oscuro para dar jerarquía sin introducir un segundo hue. */
  --vx-brand-accent:         #C01D13;
  --vx-brand-accent-hover:   #9A180F;
  --vx-brand-accent-soft:    rgba(218, 41, 28, .08);
  --vx-brand-accent-on:      #FFFFFF;

  --vx-brand-gradient: linear-gradient(135deg, #E23124 0%, #C01D13 100%);

  /* ── Tokens de identity.css (hardcodeados ahí, no derivan de --vx-brand-*) ──
     Se reasignan acá para que el topbar, la cuña de nav activo y el operador
     "×" del tagline (donde aplique) usen rojo AD en vez de petróleo/ámbar. */
  --vxe-header-gradient: linear-gradient(165deg, #7A1610 0%, #9A180F 55%, #C0201A 100%);
  --vxe-direction-cue: linear-gradient(90deg, transparent 0%, rgba(218,41,28,0) 30%, rgba(218,41,28,.55) 100%);
  --vxe-operator-color: #DA291C;
  --vxe-operator-color-soft: rgba(218, 41, 28, .55);
}

/* Refuerzo explícito del topbar. El elemento es `.topbar` (CLASE), no `#topbar`
   (id), y en identity.css el gradiente petróleo está HARDCODEADO en `.topbar`
   (no deriva de --vxe-header-gradient), por eso la reasignación del token no
   alcanza sola. Selector `.topbar` + !important para ganar la especificidad de
   identity.css sin borrar su regla (que solo aplica en modo VECTOR). */
:root[data-brand="ad"] .topbar {
  /* fix w.135: gradiente LITERAL, no var(--vxe-header-gradient), los temas
     por usuario (aplicarTemaDinamico) escriben ese token INLINE en :root y
     le ganan a cualquier stylesheet: el topbar AD quedaba petróleo con un
     tema activo. La identidad de marca del cliente no se tematiza. */
  background: linear-gradient(165deg, #7A1610 0%, #9A180F 55%, #C0201A 100%) !important;
  border-bottom-color: transparent !important;
}

/* Modal del asistente VEC: el hero usaba var(--topbar-bg) (petróleo de
   main.css) y quedaba VERDE en modo AD (reporte Darío w.134). Rojo marca. */
:root[data-brand="ad"] .sophia-hero {
  background: linear-gradient(165deg, #7A1610 0%, #9A180F 55%, #C0201A 100%) !important;
}

/* El tagline "MAGNITUD × DIRECCIÓN" es concepto propio de la identidad
   VECTOR "Magnitud × Dirección"; en modo AD no aplica (login usa marca +
   tagline propios inyectados por js/brand_ad.js). Se oculta, no se borra. */
[data-brand="ad"] .slogo-tagline {
  display: none;
}

/* "Inversiones AD" es más largo que "VECTOR", el tracking amplio de
   .topbar-brand-word (2.5px) fue calibrado para 6 caracteres. Se reduce
   solo en modo AD para que el label entre sin apretar el buscador contiguo. */
[data-brand="ad"] .topbar-brand-word {
  letter-spacing: 0.4px;
  font-size: 17px;
}

/* El logo AD (landscape) es más ancho que la "V" cuadrada de VECTOR → la marca
   necesita ancho automático + gap para no pisar el texto "Inversiones AD".
   El ícono del rail (colapsado) va sobre fondo rojo AD con el logo blanco. */
:root[data-brand="ad"] .topbar-brand-mark {
  width: auto !important;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  overflow: visible;
}
:root[data-brand="ad"] .topbar-brand-mark img.brand-ad-logo {
  height: 26px !important;
}
:root[data-brand="ad"] .sidebar-brand-icon {
  /* var() con fallback literal: fuente real es vector_tenants.metadata->
     'marca'.color_primario, inyectada por js/brand_ad.js (_aplicarColoresMarca)
     como --vx-brand-primary inline en :root (gana por especificidad a esta
     regla de hoja externa). El literal de acá es solo el respaldo si ese
     script no llegó a correr. */
  background: var(--vx-brand-primary, #DA291C) !important;
}

/* Avatar del usuario (topbar + menú desplegable), rojo AD, no el ámbar de
   VECTOR (main.css lo hardcodea con gradiente ámbar). */
:root[data-brand="ad"] .topbar-user-avatar,
:root[data-brand="ad"] .sum-avatar {
  background: linear-gradient(135deg, #E23124 0%, #C01D13 100%) !important;
  box-shadow: 0 2px 6px rgba(192, 29, 19, 0.28), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Pill de filtros del recorrido SOSMS (#sosms/mapa-colaborador), rojo AD
   en vez del morado SOSMS genérico. El track/halo ya se computan en rojo
   desde JS (_sosmsTrackColores, gated a _esAD()); esto es solo el look de
   los controles (radios, checkbox "por calles", estado activo). */
:root[data-brand="ad"] .sosms-track-pill label.active{
  background: rgba(218,41,28,.1) !important; color: var(--vx-brand-primary, #DA291C) !important;
}
:root[data-brand="ad"] .sosms-track-pill input[type=radio],
:root[data-brand="ad"] .sosms-track-pill .toggle-calles input{
  accent-color: var(--vx-brand-primary, #DA291C) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   JORNADA AD (vendedor), calco de material/Inversiones_AD/MVP/design/
   "MVP Inversiones AD - App Movil.dc.html" (bloque isInicio). Ver
   js/sosms.js · _renderJornadaInactivaAD / _renderJornadaActivaAD, gated a
   window.__BRAND==='ad'. Clase de íconos Material Symbols (fuente cargada
   en index.html) usada solo por esos templates AD.
   ════════════════════════════════════════════════════════════════════════════ */
.msym-ad{
  font-family:'Material Symbols Rounded';
  font-weight:400;font-style:normal;line-height:1;text-transform:none;
  white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
  display:inline-block;
}

/* ════════════════════════════════════════════════════════════════════════════
   LOGIN AD, rediseño oscuro/premium calcado de
   material/Inversiones_AD/MVP/design/"MVP Inversiones AD - App Movil.dc.html"
   (bloque isLogin). Nodos nuevos (.slogo-ad-circle / .ad-login-chip /
   .ad-chip-icon / .ad-dl-link) los inyecta js/brand_ad.js SOLO en modo AD -
   las reglas "off" de acá abajo (sin el selector :root[data-brand="ad"]) son
   para que, si por lo que sea el nodo existiera en el DOM, no se vea en modo
   VECTOR. En la práctica nunca se insertan fuera de AD, así que son no-ops.
   ════════════════════════════════════════════════════════════════════════════ */

.slogo-ad-circle{display:none}
.ad-login-chip{display:none}
.ad-chip-icon{display:none}
.ad-dl-link{display:none}
/* .ad-google-btn / .ad-google-divider ya vienen con display:none inline en el
   HTML (index.html), no necesitan regla "off" acá; la activación vive en las
   reglas :root[data-brand="ad"] más abajo. */

/* Fondo full-screen oscuro + glows rojos (reemplaza los orbes petróleo/ámbar) */
:root[data-brand="ad"] #setup{
  background:linear-gradient(160deg,#1C2530 0%,#121922 60%,#0C1116 100%);
}
:root[data-brand="ad"] .orb1{
  width:340px;height:340px;top:-90px;right:-90px;left:auto;bottom:auto;
  background:radial-gradient(circle,rgba(218,41,28,.16),transparent 70%);
  filter:none;animation:none;
}
:root[data-brand="ad"] .orb2{
  width:300px;height:300px;bottom:-110px;left:-100px;right:auto;top:auto;
  background:radial-gradient(circle,rgba(218,41,28,.10),transparent 70%);
  filter:none;animation:none;
}
:root[data-brand="ad"] .orb3{display:none}

/* Botón cerrar app (solo Capacitor), inline style claro por defecto,
   invisible sobre el fondo oscuro nuevo. Reajuste mínimo de contraste. */
:root[data-brand="ad"] #setup-close{
  border-color:rgba(255,255,255,.25) !important;
  color:#C9D2DB !important;
}
/* Fix urgente (coordinador, misma sesión): la "×" de cerrar app no está en el
   diseño AD y queda rara sobre el login oscuro. !important gana sobre el
   inline style display:block que pone core.js en _isMobileApp(), no hace
   falta tocar la lógica JS, el CSS alcanza. */
:root[data-brand="ad"] #setup-close{ display:none !important; }

/* Card sin glass, el fondo oscuro del #setup hace de contenedor visual */
:root[data-brand="ad"] .setup-card{
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:none;box-shadow:none;
  padding:34px 22px 30px;max-width:380px;width:100%;
}

/* Logo, círculo blanco centrado + título/subtítulo debajo (columna, no fila) */
:root[data-brand="ad"] .slogo{
  flex-direction:column;align-items:center;text-align:center;gap:15px;margin-bottom:30px;
}
:root[data-brand="ad"] .slogo > svg{display:none}
:root[data-brand="ad"] .slogo-ad-circle{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:82px;height:82px;border-radius:50%;background:#fff;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.04);
}
:root[data-brand="ad"] .slogo-ad-circle img{width:60px;height:auto;display:block}
:root[data-brand="ad"] .slogo-word{
  font-size:24px;font-weight:800;letter-spacing:-.3px;color:#fff;text-transform:uppercase;
}
:root[data-brand="ad"] .slogo-tag{
  font-size:13px;font-weight:600;letter-spacing:normal;text-transform:none;color:#9AA8B5;margin-top:5px;
  text-wrap:balance;max-width:320px;margin-left:auto;margin-right:auto;
}

/* Sin tabs, el MVP AD solo tiene login (config queda accesible por URL/localStorage
   si hiciera falta, pero no se expone visualmente) */
:root[data-brand="ad"] .stabs{display:none}

/* Inputs oscuros con ícono a la izquierda (persona / candado, inline SVG) */
:root[data-brand="ad"] #tab-login .fg label{
  font-size:11px;font-weight:800;letter-spacing:.7px;color:#7A8896;
}
:root[data-brand="ad"] #tab-login .fg input{
  background-color:rgba(255,255,255,.05);
  background-repeat:no-repeat;background-position:15px center;background-size:20px 20px;
  border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding-left:44px;color:#E7ECF1;font-weight:600;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
:root[data-brand="ad"] #tab-login .fg input::placeholder{color:#6B7684}
:root[data-brand="ad"] #tab-login .fg input:focus{
  background-color:rgba(255,255,255,.08);
  border-color:rgba(218,41,28,.55);
  box-shadow:0 0 0 3px rgba(218,41,28,.15);
}
:root[data-brand="ad"] #iu{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B97A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
:root[data-brand="ad"] #ip{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B97A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}
:root[data-brand="ad"] #ip-toggle{ color:#6B7684 !important; }
:root[data-brand="ad"] #ip-bio{
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.15) !important;
  color:#E23124 !important;
}
:root[data-brand="ad"] #tab-login > label{ color:#9AA8B5 !important; }

/* Decisión 7 (2026-07-08, spec REDESIGN_ad_flujo_v2.md): AD usa correo
   corporativo (Google OAuth diferido), usuario/contraseña pasa a ser el
   camino PRIMARIO; "Continuar con Google" baja a secundario, debajo del
   form. Se reordena con flex+order (sin tocar el DOM/HTML compartido con
   VECTOR) y se restylea a outline discreto en vez de botón blanco
   prominente. Solo visible/reordenado en modo AD. */
:root[data-brand="ad"] #tab-login{ display:flex; flex-direction:column; }
:root[data-brand="ad"] .ad-google-divider{ order:8; }
:root[data-brand="ad"] .ad-google-btn{ order:9; }

/* fix w.137 (observación Darío): mismo aire arriba y abajo del divider
   "o iniciá con Google" (16px, igual que el margen sobre el divider). */
:root[data-brand="ad"] .ad-google-btn{
  display:flex !important;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px 16px;margin:0;margin-top:16px;
  background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:14px;
  color:#C9D2DB;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;
  cursor:pointer;transition:opacity .2s,transform .15s,background .2s;
  box-shadow:none;
}
:root[data-brand="ad"] .ad-google-btn:hover{ background:rgba(255,255,255,.05); }
:root[data-brand="ad"] .ad-google-btn:active{ transform:scale(.98); }
:root[data-brand="ad"] .ad-google-btn:disabled{ opacity:.55;cursor:not-allowed; }
:root[data-brand="ad"] .ad-google-divider{
  display:flex !important;align-items:center;gap:10px;margin:16px 0 0;
  color:#7A8896;font-size:11px;font-weight:600;
}
:root[data-brand="ad"] .ad-google-divider::before,
:root[data-brand="ad"] .ad-google-divider::after{
  content:'';flex:1;height:1px;background:rgba(255,255,255,.12);
}

/* fix w.137 (observación Darío): la flecha "→" del CTA primario es Palanca 5
   de la identidad VECTOR (identity.css), en marca AD no aplica, se quita. */
:root[data-brand="ad"] .btn-p::after{ content:none !important; }

/* Botón, gradiente rojo CTA (solo dentro del login, no afecta .btn-p del resto de la app) */
:root[data-brand="ad"] #setup .btn-p{
  background:linear-gradient(135deg,#E23124,#C01D13);
  border-radius:14px;padding:16px;font-weight:800;font-size:15.5px;
  box-shadow:0 12px 26px -12px rgba(218,41,28,.55);
}
:root[data-brand="ad"] #setup .btn-p:hover{
  opacity:.93;box-shadow:0 14px 30px -10px rgba(218,41,28,.65);
}
:root[data-brand="ad"] #setup .serr{
  background:rgba(226,49,36,.12);border-color:rgba(226,49,36,.35);color:#FF8A80;
}

/* Chip offline */
:root[data-brand="ad"] .ad-login-chip{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  padding:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}
:root[data-brand="ad"] .ad-chip-icon{
  display:inline-block;width:18px;height:18px;flex-shrink:0;
  background-repeat:no-repeat;background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA8B5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4 4 0 0 1-1-7.87A5 5 0 0 1 16 8a4 4 0 0 1 1 7.9'/%3E%3Cpath d='M12 12v6'/%3E%3Cpath d='m9 15 3-3 3 3'/%3E%3C/svg%3E");
}
:root[data-brand="ad"] .ad-login-chip span:last-child{
  font-size:12px;color:#9AA8B5;font-weight:600;
}

/* Footer: sello de co-marca VECTOR/DARFU (#sver, ver brand_ad.js
   applyTextBranding) más el link discreto de descarga
   (patrón VERTEX: login → descargar-ad.html) */
:root[data-brand="ad"] #setup .sver{ color:#8B97A5; }
:root[data-brand="ad"] .ad-dl-link{
  display:block;text-align:center;margin-top:14px;
  font-size:11.5px;color:#8B97A5;font-weight:600;text-decoration:none;
}
:root[data-brand="ad"] .ad-dl-link:hover{ color:#C9D2DB;text-decoration:underline; }

/* ════════════════════════════════════════════════════════════════════════════
   JORNADA AD, shell "fit-to-screen" sin scroll de página (fix 2026-07-06,
   2do reporte del vendedor: el botón "Finalizar Jornada" quedaba tapado por
   el bottom-nav y el scroll general lo escondía).
   .jad-fixed ocupa EXACTAMENTE el área visible entre #topbar (var(--bar-h))
   y #bottom-nav (58px + safe-area, solo cuando el bottom-nav está visible en
   mobile). Es position:fixed y vive como hijo directo del innerHTML que
   pinta rJornada(), al navegar a otra vista, main.innerHTML se reemplaza y
   este nodo desaparece solo, sin dejar rastro ni requerir cleanup manual.
   Adentro: .jad-body (scrollea si el contenido no entra en pantallas chicas)
   + .jad-footer (CTA + nota, siempre visible, nunca se mueve aunque el body
   crezca/encoja por banners condicionales como "modo ahorro" u "offline").
   Usado por js/sosms.js: _renderJornadaCargandoAD, _renderJornadaMensaje
   (rama AD), _renderJornadaInactivaAD, _renderJornadaActivaAD.
   ════════════════════════════════════════════════════════════════════════════ */
.jad-fixed{
  position:fixed;top:var(--bar-h);left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;background:#EDEFF3;
  font-family:'Manrope',sans-serif;
}
.jad-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 16px 6px;max-width:480px;margin:0 auto;width:100%;box-sizing:border-box;
}
.jad-footer{
  flex-shrink:0;padding:8px 16px calc(10px + env(safe-area-inset-bottom,0px));
  max-width:480px;margin:0 auto;width:100%;box-sizing:border-box;
}
@media(max-width:768px){
  .jad-fixed{ bottom:calc(58px + env(safe-area-inset-bottom,0px)); }
}
@keyframes jadspin{ to{ transform:rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   AD DESKTOP, sistema reusable de contenedores para vistas AD.
   Mobile-first: los defaults replican EXACTO el layout de 560px de hoy.
   Los @media (min-width:900px) son 100% ADITIVOS (desktop premium).
   Aplica a: #sosms/direccion (hero), #sosms/comando, y cualquier vista AD
   que envuelva contenido en .ad-view.
   ════════════════════════════════════════════════════════════════ */

/* 1. Contenedor de vista (reemplaza el inline max-width:560px del wrapper) */
.ad-view{
  max-width:560px;margin:0 auto;padding:18px 18px 26px;
  font-family:'Manrope',sans-serif;background:#EDEFF3;min-height:100%;
}

/* Encabezado */
.ad-head{margin-bottom:16px}
.ad-head-actions{display:none}
/* fix w.34: el font-size del título vive acá (no inline) para que la regla
   desktop de 30px pueda ganarle, un style inline la pisaba siempre. */
.ad-title-xl{font-size:21px}

/* 2. Grilla de KPIs (reemplaza el inline grid-template-columns:1fr 1fr) */
.ad-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}

/* Upgrade opcional de las cards de KPI (si se les pone class="ad-kpi") */
.ad-kpi{position:relative;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease}

/* 3. Región dashboard (roles + panel lateral). Mobile: apilado = hoy. */
.ad-dash{display:block}

/* rank chip en filas de rol = enhancement SOLO desktop (mobile idéntico) */
.ad-role .rank{display:none}

/* ── DESKTOP (aditivo) ── */
@media (min-width:900px){
  /* fix w.126 (observación Darío): sin auto-centrado propio, el ancho lo
     capea .shell-main (container estándar); centrarse a 1240px adentro
     dejaba la banda gris desalineada del header inyectado (aire desparejo
     a la izquierda en #sosms/direccion). */
  .ad-view{max-width:none;margin:0;padding:30px 34px 48px}

  /* Encabezado 2 columnas: identidad izq, acciones der */
  .ad-head{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:24px;margin-bottom:24px}
  .ad-head .ad-title-xl{font-size:30px}        /* si se marca el <div> del título con esta clase */
  .ad-head-actions{display:flex;align-items:center;gap:12px;justify-self:end}
  .ad-head-actions .btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;
    border-radius:12px;font-size:13.5px;font-weight:800;cursor:pointer;border:1px solid transparent;
    transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease}
  .ad-head-actions .btn .msym-ad{font-size:19px}
  .ad-head-actions .btn--ghost{background:#fff;border-color:#E4E8ED;color:#0F1E2D}
  .ad-head-actions .btn--ghost:hover{box-shadow:0 6px 18px -8px rgba(16,24,40,.25);transform:translateY(-1px)}
  .ad-head-actions .btn--primary{background:linear-gradient(135deg,#E23124,#C01D13);color:#fff;
    box-shadow:0 12px 24px -12px rgba(218,41,28,.6)}
  .ad-head-actions .btn--primary:hover{opacity:.94;transform:translateY(-1px)}

  /* KPIs: 4 en fila, más presencia */
  .ad-kpi-grid{grid-template-columns:repeat(4,1fr);gap:18px;margin-top:0}
  .ad-kpi{padding:22px 22px 20px !important;border-radius:18px !important;
    box-shadow:0 1px 2px rgba(16,24,40,.04), 0 14px 30px -22px rgba(16,24,40,.5) !important}
  .ad-kpi::after{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:#1F2A37;opacity:0;transition:opacity .2s}
  .ad-kpi.is-primary::after{background:linear-gradient(135deg,#E23124,#C01D13);opacity:1}
  .ad-kpi.is-alert::after{background:var(--vx-brand-primary, #DA291C);opacity:1}
  .ad-kpi:hover{transform:translateY(-3px);
    box-shadow:0 1px 2px rgba(16,24,40,.04), 0 22px 40px -24px rgba(16,24,40,.6) !important}
  .ad-kpi .ad-kpi-ic{width:40px !important;height:40px !important;border-radius:12px !important;margin-bottom:16px !important}
  .ad-kpi .ad-kpi-ic .msym-ad{font-size:22px !important}
  .ad-kpi .ad-kpi-val{font-size:38px !important}
  .ad-kpi .ad-kpi-lbl{font-size:13px !important;margin-top:8px !important}

  /* Región dashboard: roles (1.9fr) + panel lateral (1fr) */
  .ad-dash{display:grid;grid-template-columns:1.9fr 1fr;gap:22px;align-items:start;margin-top:28px !important}
  .ad-dash-main>*:first-child{margin-top:0 !important}   /* neutraliza el margin-top:22px inline del header de sección */
  .ad-dash-side>*:first-child{margin-top:0 !important}
  .ad-role .rank{display:flex;width:26px;height:26px;border-radius:8px;background:#EEF1F4;color:#5E6E7A;
    font-size:12px;font-weight:800;align-items:center;justify-content:center;flex-shrink:0}
}

/* ── Variantes chicas (520px mobile) · "Mis encuestas AD" + form de llenado ── */
.ad-view--sm{max-width:520px;margin:0 auto;padding:18px 20px 24px;font-family:'Manrope',sans-serif;background:#EDEFF3;min-height:100%}
@media (min-width:900px){
  .ad-view--sm{max-width:900px;padding:30px 34px 48px}
  .ad-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
}

/* ── Wizard "#equipo/alta" (onboarding.js), mobile EXACTO al inline previo
   (padding:4px / 4px 4px 24px, sin tocar un pixel), desktop 720px premium. ── */
.eq-view{max-width:560px;margin:0 auto;padding:4px}
.eq-view-wiz{max-width:560px;margin:0 auto;padding:4px 4px 24px}
@media (min-width:900px){
  .eq-view,.eq-view-wiz{max-width:720px}
}

/* ── v45w, banner "Actualización disponible" (SOLO APK AD, ver
   js/brand_ad.js::_adCheckActualizacion). No bloqueante: card flotante
   sobre el contenido, sin backdrop, no captura clicks fuera de sí misma.
   Gateado a [data-brand="ad"] por consistencia con el resto del archivo,
   aunque el nodo #ad-update-banner solo se crea en brand AD de todos
   modos (defensa en profundidad). ── */
:root[data-brand="ad"] #ad-update-banner{
  position:fixed;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:9500;display:flex;gap:12px;align-items:flex-start;
  background:#FFFFFF;border-radius:16px;padding:14px;
  box-shadow:0 16px 38px -14px rgba(16,24,32,.4);
  font-family:'Manrope',sans-serif;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
:root[data-brand="ad"] #ad-update-banner.show{
  opacity:1;transform:translateY(0);pointer-events:auto;
}
:root[data-brand="ad"] .ad-upd-icon{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:rgba(218,41,28,.1);color:var(--vx-brand-primary, #DA291C);
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
:root[data-brand="ad"] .ad-upd-body{flex:1;min-width:0}
:root[data-brand="ad"] .ad-upd-title{font-size:13.5px;font-weight:800;color:#161E27}
:root[data-brand="ad"] .ad-upd-sub{font-size:12px;font-weight:600;color:#5E6E7A;margin-top:3px;line-height:1.42}
:root[data-brand="ad"] .ad-upd-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
:root[data-brand="ad"] .ad-upd-btn{
  border:none;border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:800;
  cursor:pointer;font-family:'Manrope',sans-serif;
}
:root[data-brand="ad"] .ad-upd-btn-pri{background:linear-gradient(135deg,#E23124,#C01D13);color:#fff}
:root[data-brand="ad"] .ad-upd-btn-pri:active{transform:scale(.98)}
:root[data-brand="ad"] .ad-upd-btn-sec{background:#F2F3F5;color:#5E6E7A}
:root[data-brand="ad"] .ad-upd-close{
  background:none;border:none;color:#98A2B3;font-size:20px;line-height:1;
  cursor:pointer;padding:2px 4px;flex-shrink:0;
}
@media (min-width:640px){
  :root[data-brand="ad"] #ad-update-banner{left:auto;right:20px;bottom:20px;width:360px}
}

/* ── v45w, gate BLOQUEANTE "Actualización obligatoria" (Dany #486). A
   diferencia del banner de arriba (opcional, con "Después"), este overlay
   cubre toda la pantalla y no tiene forma de cerrarse: la única acción
   posible es ir a descargar. z-index por encima de los otros gates de
   postLogin (legal 10010, password temporal 10011) porque corre último.
   Ver js/brand_ad.js::_adCheckVersionMinima. ── */
:root[data-brand="ad"] #ad-forzada-gate{
  position:fixed;inset:0;z-index:10012;
  display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(15,20,26,.92);
  font-family:'Manrope',sans-serif;
}
:root[data-brand="ad"] .ad-fz-card{
  width:100%;max-width:360px;background:#FFFFFF;border-radius:20px;
  padding:28px 22px;text-align:center;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
}
:root[data-brand="ad"] .ad-fz-icon{font-size:38px;line-height:1;margin-bottom:10px}
:root[data-brand="ad"] .ad-fz-title{font-size:17px;font-weight:800;color:#161E27;margin-bottom:8px}
:root[data-brand="ad"] .ad-fz-sub{font-size:13px;font-weight:600;color:#5E6E7A;line-height:1.5;margin-bottom:6px}
:root[data-brand="ad"] .ad-fz-ver{font-size:11px;font-weight:700;color:#98A2B3;margin-bottom:18px}
:root[data-brand="ad"] .ad-fz-btn{
  width:100%;border:none;border-radius:12px;padding:13px 16px;font-size:14px;font-weight:800;
  cursor:pointer;font-family:'Manrope',sans-serif;color:#fff;
  background:linear-gradient(135deg,#E23124,#C01D13);
}
:root[data-brand="ad"] .ad-fz-btn:active{transform:scale(.98)}
/* w.218 · salida de respaldo del gate obligatorio. Discreta a propósito: el
   camino principal es el botón, esto es para cuando el navegador no abre y la
   persona quedaría encerrada sin explicación (overlay sin cierre). */
:root[data-brand="ad"] .ad-fz-ayuda{
  margin-top:16px;padding-top:14px;border-top:1px solid #E7ECF0;text-align:left;
}
:root[data-brand="ad"] .ad-fz-ayuda-t{font-size:12px;font-weight:800;color:#5E6E7A;margin-bottom:4px}
:root[data-brand="ad"] .ad-fz-ayuda-s{font-size:11.5px;font-weight:600;color:#98A2B3;margin-bottom:6px}
:root[data-brand="ad"] .ad-fz-ayuda-url{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#5E6E7A;
  background:#F4F7F9;border-radius:6px;padding:8px 10px;word-break:break-all;line-height:1.45;
  -webkit-user-select:all;user-select:all;
}