/* Demo Day. Dos superficies distintas conviven en esta hoja:
   `.dd`  -> la portada publica del evento, que se ve sin sesion y a pantalla completa.
   `.dd-*` dentro de la app -> la pestana de supervision, que vive dentro del rail.
   Comparten tokens de nivel a proposito: el semaforo que el visitante ve en su resultado
   tiene que ser el mismo que el Supervisor lee en la tabla, o dos personas describirian el mismo
   diagnostico con colores distintos. */
/* La paleta vive en la raiz y no en `.dd`: el cuestionario del stand corre dentro de
   `.iv-shell`, que no es descendiente de `.dd`, y ahi un var() sin definir no cae a un color
   por defecto -invalida la declaracion entera-. Asi es como el boton de Siguiente terminaba
   blanco sobre blanco: el gradiente se descartaba y solo quedaba el texto en blanco. */
:root{
  --dd-ink:#0f2440;--dd-soft:#61748e;--dd-line:#dde5f1;--dd-line2:#eef3f9;
  --dd-blue:#2563eb;--dd-blue2:#4f7df5;--dd-cyan:#11b8c9;--dd-white:#fff;
}
.dd{
  min-height:100vh;display:flex;flex-direction:column;gap:10px;padding:22px clamp(16px,4vw,44px) 28px;
  color:var(--dd-ink);
  background:
    radial-gradient(circle at 6% -4%,rgba(37,99,235,.13),transparent 30%),
    radial-gradient(circle at 98% 4%,rgba(17,184,201,.12),transparent 28%),
    linear-gradient(180deg,#f7faff 0%,#eef3fa 100%);
}
.dd-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:var(--st-idle)}
.dd-dot.stalled{background:var(--st-stalled)}
.dd-dot.watch{background:var(--st-watch)}
.dd-dot.ok{background:var(--st-ok)}
.dd-dot.blue{background:var(--dd-blue)}
.dd-dot.done{background:var(--st-done)}
.dd-top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.dd-brand{display:flex;align-items:center;gap:10px;flex:1 1 260px;min-width:0}
/* La firma de la casa entra donde el fondo la sostiene, y para cada fondo hay un archivo: azul
   marino para las superficies claras -esta portada- y blanco para la barra navy de la entrevista.
   El ancho manda y el alto lo sigue: el archivo trae la proporcion y forzarla en pixeles deforma
   las letras.

   Se mide en ancho y no en alto porque lo que tiene que casar es el borde: 420px es la columna
   del formulario que arranca justo debajo, asi que el logotipo llega hasta donde llega la
   tarjeta y las dos cosas comparten linea izquierda y derecha. Mientras se midio en alto -26px
   con el nombre del producto al lado, 46 ya sin el- quedaba flotando en una cabecera que le
   sobraba por todos lados. El `min()` lo deja encoger con el contenedor en pantallas angostas,
   que es donde el 420 no cabe. */
.dd-logo{width:min(100%,420px);height:auto;flex:0 1 auto}
.dd-steps{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.dd-steps li{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1px solid var(--dd-line);background:rgba(255,255,255,.7);color:var(--dd-soft);font-size:11px}
.dd-steps li i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e7edf7;color:var(--dd-soft);font-size:10px;font-weight:800;font-style:normal}
.dd-steps li.here{border-color:rgba(37,99,235,.35);background:#fff;color:var(--dd-ink);font-weight:700}
.dd-steps li.here i{background:var(--dd-blue);color:#fff}
.dd-steps li.done i{background:var(--st-done);color:#fff}
.dd-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--dd-line);color:var(--dd-soft);font-size:11px}
.dd-foot a{color:var(--dd-blue);font-weight:700;text-decoration:none}

/* --- Portada: el formulario a la izquierda y la promesa a la derecha, como el prototipo. */
/* `flex:1` estira la portada hasta el borde inferior de la pantalla para que el degradado
   llegue abajo, pero con `align-items:center` esa altura sobrante se repartia arriba y abajo
   del contenido: en una pantalla alta abria un hueco entre el logotipo y la tarjeta que no lo
   habia puesto nadie. Alineado al inicio, el formulario arranca pegado a la cabecera y el aire
   que sobra se va todo al pie, que es donde no estorba. */
.dd-hero{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start;flex:1}
.dd-card{position:relative;overflow:hidden;display:grid;gap:11px;padding:26px 26px 24px;border-radius:22px;border:1px solid var(--dd-line);background:var(--dd-white);box-shadow:0 24px 60px rgba(20,45,80,.13)}
.dd-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--dd-blue),var(--dd-cyan))}
.dd-card .eyebrow{margin:4px 0 0;color:var(--dd-blue);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.dd-title{margin:0;font-size:34px;letter-spacing:.02em;line-height:1.05;background:linear-gradient(90deg,var(--dd-blue),var(--dd-cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.dd-sub{margin:0 0 6px;color:var(--dd-soft);font-size:12.5px}
.dd-notice{padding:9px 11px;border-radius:10px;background:#eaf1ff;border:1px solid #cfdefb;color:#1c4fbb;font-size:11.5px}
/* El aviso de que el PDF no salio es ambar y no rojo: no se perdio nada -el diagnostico esta
   entero en la pantalla- y solo falta la forma de llevarselo. Rojo diria "se rompio tu
   evaluacion", que es lo que no paso. */
.dd-notice.warn{display:grid;gap:6px;justify-items:start;background:#fff6e5;border-color:#f0d9a8;color:#8a5a06}
.dd-notice.warn b{font-size:12.5px}
.dd-ghost{padding:7px 12px;border-radius:9px;border:1px solid #d8b978;background:#fff;color:#8a5a06;font-weight:700;font-size:11.5px}
.dd-ghost:hover{background:#fffaf0}
.dd-field{display:grid;gap:5px}
.dd-field>span{display:flex;align-items:center;gap:7px;color:var(--dd-ink);font-size:12px;font-weight:700}
.dd-field>span i{color:var(--dd-blue);font-style:normal}
.dd-field>span em{color:#d0455a;font-style:normal}
.dd-field input{width:100%;padding:11px 12px;border:1px solid #d7e1ee;border-radius:10px;background:#fbfdff;color:var(--dd-ink);font-size:13px;font-family:inherit}
.dd-field input:focus{outline:none;border-color:var(--dd-blue);box-shadow:0 0 0 3px rgba(37,99,235,.14);background:#fff}
.dd-field input::placeholder{color:#a7b6c9}
.dd-consent{display:flex;align-items:flex-start;gap:9px;margin-top:2px;color:var(--dd-soft);font-size:11px;line-height:1.45;cursor:pointer}
.dd-consent input{margin-top:1px;width:15px;height:15px;accent-color:var(--dd-blue);flex:0 0 auto}
.dd-primary{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;margin-top:6px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--dd-blue),var(--dd-blue2));color:#fff;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;box-shadow:0 12px 26px rgba(37,99,235,.26)}
.dd-primary:hover{filter:brightness(1.05)}
.dd-primary:disabled{background:#dbe3ee;color:#93a3b6;box-shadow:none;cursor:default}
.dd-primary span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);font-size:13px}
.dd-primary.busy{opacity:.75}
/* La columna de la promesa se centra contra el formulario: es mas corta que el, y alineada
   arriba dejaba todo su sobrante colgando al pie. El formulario se queda en `start` porque
   crece al desplegar los combos y no puede moverse bajo el cursor, asi que el centrado va
   aqui y no en `align-items` de la rejilla. */
.dd-copy{display:grid;gap:13px;max-width:620px;align-self:center}
.dd-copy h2{margin:0;color:var(--dd-blue);font-size:clamp(24px,3vw,32px);letter-spacing:-.02em}
.dd-lead{margin:0;font-size:15px;line-height:1.6;color:var(--dd-ink)}
.dd-legend{margin:6px 0 0;color:var(--dd-soft);font-size:12px;font-weight:700}
/* Seis dimensiones en una sola columna se comen la portada: en cuanto el ancho da para dos,
   se parten en dos y el bloque queda del alto que tenia la lista de niveles. */
.dd-dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:9px;margin:0;padding:0;list-style:none}
.dd-dims li{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border-radius:13px;border:1px solid var(--dd-line);background:rgba(255,255,255,.75)}
.dd-dims li i{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;flex:0 0 auto;background:#eaf1ff;color:var(--dd-blue);font-style:normal;font-size:13px}
.dd-dims b{display:block;font-size:12.5px}
.dd-dims small{color:var(--dd-soft);font-size:11.5px;line-height:1.45}
.dd-notes{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.dd-notes span{padding:7px 11px;border-radius:999px;border:1px solid var(--dd-line);background:rgba(255,255,255,.75);color:var(--dd-soft);font-size:11px}

/* Sobras del cuestionario anterior que la maqueta nueva sigue usando: el chip de dimension
   de la portada y el boton secundario del resultado. El resto se retira -entre ellas una
   `.dd-nav` en flex que se colaba en la barra de navegacion de la entrevista y le anulaba
   las columnas. */
.dd-chip{display:inline-block;padding:5px 11px;border-radius:999px;background:#eaf1ff;color:#1c4fbb;font-size:11px;font-weight:700}
.dd-ghost{padding:11px 17px;border:1px solid var(--dd-line);border-radius:12px;background:#fff;color:var(--dd-ink);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.35,.5,1),box-shadow .18s ease,border-color .18s ease}
.dd-ghost:hover:not(:disabled){border-color:#b9cbe4;transform:translateY(-2px);box-shadow:0 10px 22px rgba(28,57,91,.12)}
.dd-ghost:disabled{color:#b3c0d0;cursor:default}
.dd-wait{flex:1;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center;padding:60px 20px}
.dd-wait h1{margin:0;font-size:22px}
.dd-wait p{margin:0;max-width:440px;color:var(--dd-soft);font-size:13px}
.dd-spin{width:38px;height:38px;border-radius:50%;border:3px solid #e2eaf6;border-top-color:var(--dd-blue);animation:dd-spin 1s linear infinite}
@keyframes dd-spin{to{transform:rotate(360deg)}}

/* --- La espera del diagnostico ------------------------------------------------------------
   El analisis lo redacta la IA y puede pasar del minuto. Un giro sin mas no distingue "esta
   trabajando" de "se colgo", y esa duda es la que hace que alguien recargue a mitad y pierda
   la pantalla. Aqui hay tres señales que un spinner no da: cuanto falta (la barra), que se
   esta haciendo ahora (el paso encendido) y que ya se hizo (los marcados). */
.dd-progress-wait{gap:26px;max-width:560px;margin-inline:auto}
.dd-progress-head{display:grid;justify-items:center;gap:8px}
.dd-progress-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--dd-blue),var(--dd-cyan));color:#fff;font-size:22px;
  box-shadow:0 10px 26px rgba(37,99,235,.28);animation:dd-pulse 2.4s ease-in-out infinite}
@keyframes dd-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.dd-progress-wait h1{margin:0;font-size:21px}
.dd-progress-wait p{margin:0;min-height:34px;color:var(--dd-soft);font-size:13px;max-width:420px}

.dd-progress-track{width:100%;height:7px;border-radius:99px;background:#e4ebf6;overflow:hidden}
.dd-progress-track i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--dd-blue),var(--dd-cyan));
  /* La barra se mueve sola cada 120 ms; la transicion solo suaviza el salto entre lecturas. */
  transition:width .3s linear}

.dd-progress-steps{display:grid;gap:2px;width:100%;margin:0;padding:0;list-style:none;text-align:left}
.dd-progress-steps li{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;
  color:var(--dd-soft);font-size:13px;transition:background .3s,color .3s}
.dd-progress-steps li i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:#e9eff8;color:#8fa3bd;font-style:normal;font-size:13px;flex:0 0 auto;transition:all .3s}
.dd-progress-steps li span{flex:1}
/* La marca de hecho ocupa su sitio desde el principio: sin esto, cada paso completado empuja
   el texto y la lista entera tiembla justo cuando la persona la esta leyendo. */
.dd-progress-steps li em{font-style:normal;color:var(--dd-cyan);font-weight:800;opacity:0;transition:opacity .3s}
.dd-progress-steps li.here{background:#fff;color:var(--dd-ink);font-weight:650;box-shadow:0 4px 14px rgba(20,45,80,.06)}
.dd-progress-steps li.here i{background:var(--dd-blue);color:#fff;animation:dd-pulse 1.6s ease-in-out infinite}
.dd-progress-steps li.done{color:var(--dd-ink)}
.dd-progress-steps li.done i{background:#e3f7f4;color:#10a396}
.dd-progress-steps li.done em{opacity:1}

/* Quien pidio menos movimiento no deberia recibir tres cosas latiendo a la vez. La barra y
   los estados se quedan -son informacion-; lo que se va es el adorno. */
@media(prefers-reduced-motion:reduce){
  .dd-progress-mark,.dd-progress-steps li.here i{animation:none}
  .dd-progress-track i{transition:none}
}

/* --- El cierre del cuestionario. Es la pantalla final del visitante, no una sala de espera:
   lo primero que ofrece es abrir el diagnóstico. Debajo, las dos miradas del instrumento con
   la suya ya marcada, que es donde se ve de un golpe qué aportó y qué falta. */
.dd-done{flex:1;display:grid;align-content:center;justify-items:center;gap:14px;padding:32px 20px}
.dd-done-card{position:relative;overflow:hidden;display:grid;justify-items:center;gap:11px;
  width:min(100%,540px);padding:30px 30px 26px;border-radius:22px;border:1px solid var(--dd-line);
  background:var(--dd-white);box-shadow:0 24px 60px rgba(20,45,80,.13);text-align:center}
.dd-done-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--st-done),var(--dd-cyan))}
.dd-done-seal{position:relative;display:grid;place-items:center;width:58px;height:58px;margin-top:4px;
  border-radius:50%;background:linear-gradient(135deg,var(--st-done),var(--dd-cyan));color:#fff;font-size:26px;
  box-shadow:0 12px 26px rgba(23,169,127,.3)}
/* El anillo confirma el cierre una vez y se detiene: en esta pantalla ya no se procesa nada. */
.dd-done-seal:before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(23,169,127,.35);animation:dd-seal .7s ease-out}
@keyframes dd-seal{from{opacity:1;transform:scale(.72)}to{opacity:0;transform:scale(1.26)}}
.dd-done-card .eyebrow{margin:0;color:var(--st-done-ink);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.dd-done-card h1{margin:0;font-size:clamp(24px,3.2vw,31px);letter-spacing:-.02em}
.dd-done-lead{margin:0;max-width:400px;color:var(--dd-soft);font-size:13px;line-height:1.6}
.dd-done-card .dd-primary{width:100%;max-width:330px;margin-top:6px}
/* Las dos miradas, una debajo de otra: la propia cerrada y la del colega con su estado real.
   Es la misma pieza que el documento repite arriba, para que la pantalla y el reporte no
   cuenten la espera de dos maneras distintas. */
.dd-done-lenses{display:grid;gap:8px;width:100%;margin-top:6px;text-align:left}
.dd-done-lens{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:13px;
  border:1px solid var(--dd-line);background:#fbfdff}
.dd-done-lens>i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:0 0 auto;font-style:normal;font-size:14px}
.dd-done-lens.tec>i{background:var(--dd-tec-soft);color:var(--dd-tec-ink)}
.dd-done-lens.neg>i{background:var(--dd-neg-soft);color:var(--dd-neg-ink)}
.dd-done-lens>div{flex:1;min-width:0}
.dd-done-lens b{display:block;font-size:12.5px;color:var(--dd-ink)}
.dd-done-lens small{color:var(--dd-soft);font-size:11.5px}
.dd-done-lens>em{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-style:normal;font-size:11px;font-weight:800;background:#eef2f7;color:#9fb0c4}
.dd-done-lens.done{border-color:rgba(23,169,127,.3);background:#fff}
.dd-done-lens.done>em{background:var(--st-done);color:#fff}
.dd-done-note{margin:4px 0 0;padding:10px 12px;border-radius:11px;background:#f5f8fc;
  color:var(--dd-soft);font-size:11.5px;line-height:1.55;text-align:left}
.dd-done-note.ok{background:var(--st-done-bg);color:var(--st-done-ink)}
.dd-done-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
@media (max-width:560px){.dd-done{padding:20px 2px}.dd-done-card{padding:24px 18px 22px}}

/* --- El diagnóstico del visitante: el documento del producto con la piel de la feria. */
.dd-report{flex:1;display:grid;gap:12px;align-content:start}
.dd-report-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dd-report-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dd-report-bar .dd-primary{width:auto;margin-top:0;padding:0 18px;min-height:42px}
/* El aviso va antes del documento y no dentro: es una advertencia sobre lo que se va a leer,
   no una sección del reporte. */
.dd-report .xr{border-radius:18px;overflow:hidden;box-shadow:0 20px 50px rgba(20,45,80,.12)}

/* --- Resultado. El mismo bloque `.dd-doc` se pinta en pantalla y se imprime a PDF: si
   fueran dos maquetas, el archivo que el visitante se lleva no diria lo que acaba de ver. */
.dd-result{flex:1;display:grid;gap:14px;width:min(940px,100%);margin:0 auto}
.dd-doc{display:grid;gap:16px;padding:24px clamp(18px,3vw,30px);border-radius:22px;border:1px solid var(--dd-line);background:var(--dd-white);box-shadow:0 20px 50px rgba(20,45,80,.1)}
.dd-doc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--dd-line2)}
.dd-doc-head .eyebrow{margin:0;color:var(--dd-blue);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.dd-doc-head h1{margin:4px 0 3px;font-size:24px;letter-spacing:-.02em}
.dd-doc-head small{color:var(--dd-soft);font-size:11.5px}
.dd-score{display:grid;grid-template-columns:132px minmax(0,1fr);gap:22px;align-items:center}
.dd-score-ring{position:relative;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--st-idle) var(--dd-arc,0deg),#eaf0f8 0)}
.dd-score-ring.stalled{background:conic-gradient(var(--st-stalled) var(--dd-arc),#eaf0f8 0)}
.dd-score-ring.watch{background:conic-gradient(var(--st-watch) var(--dd-arc),#eaf0f8 0)}
.dd-score-ring.ok{background:conic-gradient(var(--st-ok) var(--dd-arc),#eaf0f8 0)}
.dd-score-ring.blue{background:conic-gradient(var(--dd-blue) var(--dd-arc),#eaf0f8 0)}
.dd-score-ring.done{background:conic-gradient(var(--st-done) var(--dd-arc),#eaf0f8 0)}
.dd-score-ring:before{content:"";position:absolute;width:104px;height:104px;border-radius:50%;background:#fff}
.dd-score-ring span{position:relative;display:grid;justify-items:center}
.dd-score-ring b{font-size:31px;letter-spacing:-.03em}
.dd-score-ring small{color:var(--dd-soft);font-size:10px}
.dd-score-copy{display:grid;gap:8px;min-width:0}
.dd-score-copy h2{margin:0;font-size:19px;letter-spacing:-.02em}
.dd-score-copy p{margin:0;color:#41566f;font-size:13.5px;line-height:1.62}
.dd-level-chip{justify-self:start;padding:5px 11px;border-radius:999px;font-style:normal;font-size:11px;font-weight:800;background:var(--st-idle-bg);color:var(--st-idle-ink)}
.dd-level-chip.stalled{background:var(--st-stalled-bg);color:var(--st-stalled-ink)}
.dd-level-chip.watch{background:var(--st-watch-bg);color:var(--st-watch-ink)}
.dd-level-chip.ok{background:var(--st-ok-bg);color:var(--st-ok-ink)}
.dd-level-chip.blue{background:#eaf1ff;color:#1c4fbb}
.dd-level-chip.done{background:var(--st-done-bg);color:var(--st-done-ink)}
.dd-block{display:grid;gap:9px;break-inside:avoid}
.dd-block h3{margin:0;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--dd-soft)}
.dd-block>p{margin:0;color:#41566f;font-size:13px;line-height:1.6}
.dd-dims{display:grid;gap:7px}
.dd-dim{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(0,2.4fr) 42px;align-items:center;gap:12px}
.dd-dim-name{font-size:12.5px;font-weight:600}
.dd-dim-bar{height:9px;border-radius:999px;background:#edf2f8;overflow:hidden}
.dd-dim-bar i{display:block;height:100%;border-radius:999px;background:var(--st-idle)}
.dd-dim-bar i.stalled{background:var(--st-stalled)}
.dd-dim-bar i.watch{background:var(--st-watch)}
.dd-dim-bar i.ok{background:var(--st-ok)}
.dd-dim-bar i.blue{background:var(--dd-blue)}
.dd-dim-bar i.done{background:var(--st-done)}
.dd-dim-score{font-size:13px;text-align:right}
.dd-list{display:grid;gap:7px;margin:0;padding-left:18px;color:#41566f;font-size:13px;line-height:1.55}
.dd-list.good li::marker{color:var(--st-done)}
.dd-list.steps li::marker{color:var(--dd-blue);font-weight:800}
.dd-scale{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.dd-scale li{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid transparent;font-size:12px}
.dd-scale li i{margin-top:3px}
.dd-scale li span{display:grid;gap:2px}
.dd-scale li small{color:var(--dd-soft);line-height:1.45}
.dd-scale li.here{border-color:rgba(37,99,235,.3);background:#f4f8ff}
.dd-doc-foot{padding-top:12px;border-top:1px solid var(--dd-line2);color:var(--dd-soft);font-size:11px;line-height:1.5}
.dd-result-actions{display:flex;gap:10px;flex-wrap:wrap}
.dd-result-actions .dd-primary{width:auto;min-width:280px;margin:0}
.dd-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:15px 18px;border-radius:16px;background:linear-gradient(135deg,#102d50,#173f70);color:#fff}
.dd-cta b{display:block;font-size:14px}
.dd-cta small{color:#b9cbe4;font-size:11.5px}
.dd-cta>span{font-size:12px;font-weight:700;color:#8fd7e2}

/* --- Impresion. El documento del visitante se pagina solo, sin la app alrededor. */
.dd-print{margin:0;padding:0;background:#fff;font:13px/1.5 system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#0f2440;
  --dd-ink:#0f2440;--dd-soft:#61748e;--dd-line:#dde5f1;--dd-line2:#eef3f9;--dd-blue:#2563eb;--dd-cyan:#11b8c9;
  --st-done:#17a97f;--st-done-bg:#e7f8f2;--st-done-ink:#0f7a58;--st-ok:#e8b923;--st-ok-bg:#fff8dd;--st-ok-ink:#8a6a06;
  --st-watch:#f2801e;--st-watch-bg:#ffeadb;--st-watch-ink:#a8500a;--st-stalled:#e0455a;--st-stalled-bg:#ffe9ec;
  --st-stalled-ink:#c4323f;--st-idle:#c3cede;--st-idle-bg:#f0f4f8;--st-idle-ink:#6f8097;
  --dd-tec:#5d5af0;--dd-tec-soft:#eeedff;--dd-tec-ink:#3e3bc4;
  --dd-neg:#0f9f8c;--dd-neg-soft:#e3f7f3;--dd-neg-ink:#0a7466}
.dd-doc-print{border:0;border-radius:0;box-shadow:none;padding:0;gap:18px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
@page{size:A4;margin:16mm 14mm}
@media print{
  .dd-top,.dd-foot,.dd-result-actions,.dd-cta,.dd-steps{display:none!important}
  .dd{padding:0;background:#fff;min-height:0}
  .dd-doc{border:0;box-shadow:none;padding:0}
}

/* --- Pestana de supervision. Vive dentro del rail, con los componentes de la app.
   Se lee en tres pantallas -el portatil del comercial, la tablet del stand y un movil en la
   mano-, asi que cada banda ocupa lo que su dato necesita y ni una fila mas: la tabla, que
   es lo unico que se consulta cada rato, tiene que empezar antes del pliegue en las tres. */
.dd-page-head{align-items:center;margin-bottom:14px}
.dd-page-head h1{font-size:24px;letter-spacing:-.8px;margin:0 0 3px}
.dd-page-head .eyebrow{margin-bottom:5px}
.dd-page-head p:not(.eyebrow){font-size:12px}
.dd-page-head .primary{padding:9px 14px;font-size:12.5px;white-space:nowrap}
/* Las cuatro cifras y el reparto por nivel son la misma lectura y comparten banda. */
.dd-board{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,1fr);gap:12px;margin-bottom:12px;align-items:start}
.dd-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dd-tile{display:flex;align-items:center;gap:11px;min-width:0;padding:11px 13px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(20,45,80,.03)}
.dd-tile>i{flex:0 0 auto;width:32px;height:32px;border-radius:9px;font-style:normal;font-size:15px}
.dd-tile>div{display:grid;min-width:0}
.dd-tile b{font-size:19px;line-height:1.15}
.dd-tile small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-dist{padding:11px 14px 13px;margin:0}
.dd-dist header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.dd-dist header b{font-size:12.5px}
.dd-dist header small{color:var(--muted);font-size:10.5px}
.dd-dist-bars{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:end}
/* La pista de la barra necesita alto definido: dentro de una fila automatica el porcentaje
   no resuelve contra nada y las cinco columnas quedan del mismo tamano. */
.dd-dist-col{display:grid;grid-template-rows:54px auto auto;justify-items:center;gap:3px}
.dd-dist-col span{align-self:end;width:100%;max-width:46px;min-height:4px;border-radius:6px 6px 0 0;background:var(--st-idle)}
.dd-dist-col span.stalled{background:var(--st-stalled)}
.dd-dist-col span.watch{background:var(--st-watch)}
.dd-dist-col span.ok{background:var(--st-ok)}
.dd-dist-col span.blue{background:#2563eb}
.dd-dist-col span.done{background:var(--st-done)}
.dd-dist-col b{font-size:11.5px}
.dd-dist-col small{color:var(--muted);font-size:10px}
/* La configuracion se decide al abrir la feria y despues estorba: se pliega y deja a la
   vista su resumen y el interruptor, que es lo unico que se comprueba durante el evento. */
.dd-config{padding:12px 14px;margin-bottom:12px}
.dd-config-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.dd-config-toggle{display:flex;align-items:center;gap:10px;min-width:0;padding:0;background:transparent;color:var(--ink);font-family:inherit;text-align:left}
.dd-config-toggle>i{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;border-radius:7px;background:#eef3fa;color:#5c7288;font-style:normal;font-size:10px}
.dd-config-toggle>span{display:grid;min-width:0}
.dd-config-toggle b{font-size:13.5px}
.dd-config-toggle small{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-config-toggle:hover>i{background:var(--blue2);color:#2563eb}
.dd-config-body{margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.dd-config-note{margin:0 0 10px;max-width:88ch;color:var(--muted);font-size:11.5px}
.dd-switch{display:flex;align-items:center;gap:9px;font-size:12px;cursor:pointer;white-space:nowrap}
.dd-switch input{appearance:none;width:38px;height:21px;border-radius:999px;background:#d8e0ea;position:relative;cursor:pointer;transition:background .15s}
.dd-switch input:after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;transition:left .15s}
.dd-switch input:checked{background:var(--st-done)}
.dd-switch input:checked:after{left:20px}
.dd-config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.dd-mode{display:grid;gap:3px;padding:11px 12px;text-align:left;border:1px solid var(--line);border-radius:11px;background:#fbfdff;color:var(--ink);font-family:inherit;cursor:pointer}
.dd-mode b{font-size:12.5px}
.dd-mode small{color:var(--muted);font-size:11px;line-height:1.4}
.dd-mode.on{border-color:#2563eb;background:#f2f7ff;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.dd-count{display:grid;gap:5px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:#fbfdff;font-size:12px;font-weight:700}
.dd-count input{padding:7px 10px;border:1px solid #d7e1eb;border-radius:9px;font-size:13px;font-family:inherit}
.dd-count small{color:var(--muted);font-size:11px;font-weight:400}
.dd-fixed{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border-radius:11px;background:#f4f8ff;border:1px solid #d9e5f8}
.dd-fixed b{display:block;font-size:12.5px}
.dd-fixed small{color:var(--muted);font-size:11px}
.dd-list{padding:14px 16px}
.dd-toolbar{display:grid;grid-template-columns:auto minmax(160px,1fr) auto;align-items:center;gap:10px;padding:0 0 10px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.dd-chips{display:flex;gap:6px;flex-wrap:wrap}
.dd-chip-btn{padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:#fbfdff;color:var(--muted);font-size:11px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap}
.dd-chip-btn.on{border-color:#2563eb;background:#eaf1ff;color:#1c4fbb}
.dd-toolbar input{padding:8px 11px;border:1px solid #d7e1eb;border-radius:10px;background:#fbfdff;font-size:12px;font-family:inherit;min-width:0}
.dd-toolbar input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.dd-toolbar>small{color:var(--muted);font-size:11px;white-space:nowrap}
.dd-table .tr{grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr) minmax(100px,.7fr) minmax(94px,.66fr) minmax(74px,.5fr) auto;align-items:center;gap:10px;min-height:52px}
.dd-table .tr.th{min-height:28px}
.dd-table .tr>span{display:grid;gap:2px;min-width:0}
.dd-table .tr>span:first-child{grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:9px}
.dd-table .tr>span:first-child i{grid-row:1/3}
.dd-table .company-avatar{width:26px;height:26px;font-size:9.5px}
.dd-table .tr>span b{font-size:12.5px}
.dd-table small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La fila es un div con papel de boton: dentro vive la papelera del administrador y un
   boton no puede anidar otro. El teclado la abre igual, y por eso conserva su foco. */
.dd-table [data-demo-lead]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.dd-table [data-demo-lead]:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}
.dd-table .tr>span.dd-row-end{display:flex;align-items:center;justify-content:flex-end;gap:2px;color:#a9b7c6}
.dd-del{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:transparent;color:#a9b7c6;font-size:12px;line-height:1;opacity:0;transition:opacity .14s ease,background .14s ease,color .14s ease}
.dd-table .tr:hover .dd-del,.dd-del:focus-visible{opacity:1}
.dd-del:hover{background:#fdecec;color:#c8372c}
/* Sin puntero no hay hover que revele la papelera: en la tablet del stand va siempre. */
@media (hover:none){.dd-del{opacity:1}}
.dd-del-wide{margin-left:auto;padding:7px 12px;border-radius:9px;background:#fdecec;color:#c8372c;font-size:11.5px;font-weight:700;font-family:inherit}
.dd-del-wide:hover{background:#f8dcd9}
.dd-tag{padding:4px 9px;border-radius:999px;justify-self:start;font-style:normal;font-size:10.5px;font-weight:800;background:var(--st-idle-bg);color:var(--st-idle-ink)}
.dd-tag.stalled{background:var(--st-stalled-bg);color:var(--st-stalled-ink)}
.dd-tag.watch{background:var(--st-watch-bg);color:var(--st-watch-ink)}
.dd-tag.ok{background:var(--st-ok-bg);color:var(--st-ok-ink)}
.dd-tag.blue{background:#eaf1ff;color:#1c4fbb}
.dd-tag.done{background:var(--st-done-bg);color:var(--st-done-ink)}
/* Tres formas de la lista: completa, sin fecha y en tarjeta. Lo unico que se cae por el
   camino es la fecha, que es el unico dato que nadie busca en la tabla. */
@media (max-width:1180px){
  .dd-board{grid-template-columns:minmax(0,1fr)}
  .dd-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dd-table .tr{grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(96px,.7fr) minmax(92px,.66fr) auto}
  .dd-when{display:none}
}
@media (max-width:900px){
  .dd-toolbar{grid-template-columns:minmax(0,1fr) auto;row-gap:9px}
  .dd-chips{grid-column:1/3;grid-row:1;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .dd-table .tr.th{display:none}
  .dd-table .tr{grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:7px;min-height:0;padding:11px 0}
  .dd-table .tr>span:nth-child(1){grid-column:1;grid-row:1}
  .dd-table .tr>span:nth-child(2){grid-column:1/3;grid-row:2}
  .dd-table .tr>span:nth-child(3){grid-column:1;grid-row:3}
  .dd-table .tr>span:nth-child(4){grid-column:2;grid-row:3;justify-items:end}
  .dd-table .tr>span.dd-row-end{grid-column:2;grid-row:1;align-self:center}
}
@media (max-width:620px){
  .dd-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dd-page-head{flex-wrap:wrap;gap:12px}
  .dd-page-head .primary{width:100%;text-align:center}
  .dd-config-head{gap:10px}
  .dd-list{padding:13px}
}

/* --- Panel lateral del visitante: sus respuestas, para que el comercial llame con contexto. */
.dd-drawer{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end}
.dd-scrim{position:absolute;inset:0;border:0;background:rgba(12,28,50,.42);cursor:pointer}
.dd-drawer-panel{position:relative;display:grid;align-content:start;gap:14px;width:min(560px,100%);height:100%;overflow-y:auto;padding:20px 22px 28px;background:#fff;box-shadow:-18px 0 50px rgba(15,35,65,.2)}
.dd-drawer-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.dd-drawer-panel h2{margin:3px 0 2px;font-size:19px}
.dd-drawer-panel header small{color:var(--muted);font-size:12px}
.dd-lead-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:12px 14px;border-radius:12px;background:#f7fafd;border:1px solid var(--line)}
.dd-lead-meta small{display:block;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.dd-lead-meta a,.dd-lead-meta b{font-size:12.5px;color:var(--ink);text-decoration:none;word-break:break-word}
.dd-lead-meta a{color:#2563eb}
.dd-source{color:var(--muted);font-size:11px}
.dd-answers{display:grid;gap:8px;margin:0;padding:0;list-style:none;counter-reset:none}
.dd-answers li{padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fbfdff}
.dd-answer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.dd-answer-head b{font-size:11.5px;color:var(--muted)}
.dd-answers p{margin:0;font-size:12.5px;line-height:1.5}
.dd-drawer-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}
.login-demo{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:11.5px;text-align:center}
.login-demo a{color:#2563eb;font-weight:700;text-decoration:none}

@media (max-width:1000px){
  .dd-hero{grid-template-columns:minmax(0,1fr);gap:24px}
  .dd-copy{order:-1;max-width:none}
}
@media (max-width:680px){
  .dd-steps{display:none}
  .dd-score{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .dd-dim{grid-template-columns:minmax(0,1fr) 42px}
  .dd-dim-bar{grid-column:1/3;order:3}
  .dd-result-actions .dd-primary{min-width:0;width:100%}
}

/* --- Los dos enfoques. Un color por enfoque, el mismo en la portada, en el cuestionario, en
   el resultado y en la pantalla del staff: si el violeta significa "tecnica" en un sitio, no
   puede significar otra cosa en el siguiente. */
:root{--dd-tec:#5d5af0;--dd-tec-soft:#eeedff;--dd-tec-ink:#3e3bc4;
      --dd-neg:#0f9f8c;--dd-neg-soft:#e3f7f3;--dd-neg-ink:#0a7466}
.dd-lens{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:0 0 auto;font-style:normal;font-size:14px}
.dd-lens.tec{background:var(--dd-tec-soft);color:var(--dd-tec-ink)}
.dd-lens.neg{background:var(--dd-neg-soft);color:var(--dd-neg-ink)}
.dd-lens-chip{display:inline-block;padding:5px 10px;border-radius:999px;font-size:10.5px;font-weight:800;vertical-align:middle}
.dd-lens-chip.tec{background:var(--dd-tec-soft);color:var(--dd-tec-ink)}
.dd-lens-chip.neg{background:var(--dd-neg-soft);color:var(--dd-neg-ink)}

/* La tarjeta que anuncia el subrol deducido: es el momento en que el evaluador demuestra
   que leyo el cargo, asi que ocupa el ancho completo antes de la primera pregunta. */
.dd-assign{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:13px 15px;border-radius:14px;border:1px solid var(--dd-line)}
.dd-assign.tec{background:linear-gradient(135deg,rgba(93,90,240,.09),transparent 60%);border-color:rgba(93,90,240,.28)}
.dd-assign.neg{background:linear-gradient(135deg,rgba(15,159,140,.09),transparent 60%);border-color:rgba(15,159,140,.28)}
.dd-assign .eyebrow{margin:0 0 2px;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dd-soft)}
.dd-assign b{display:block;font-size:13.5px}
.dd-assign small{color:var(--dd-soft);font-size:11.5px;line-height:1.45}
.dd-assign em{font-style:normal;font-size:11px;font-weight:800;color:var(--dd-soft);white-space:nowrap}

/* Bloque de contraste del resultado. */
.dd-lens-row{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(0,2fr) 46px;align-items:center;gap:12px;padding:7px 0}
.dd-lens-name{display:flex;align-items:center;gap:9px;min-width:0}
.dd-lens-name b{display:block;font-size:12.5px}
.dd-lens-name small{color:var(--dd-soft);font-size:11px}
.dd-lens-row.empty{opacity:.6}
.dd-dim-bar i.tec{background:var(--dd-tec)}
.dd-dim-bar i.neg{background:var(--dd-neg)}
.dd-gap{margin-top:8px;padding:11px 13px;border-radius:12px;border-left:3px solid var(--st-idle);background:var(--st-idle-bg)}
.dd-gap b{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px}
.dd-gap em{font-style:normal;font-size:12px;font-weight:800}
.dd-gap p{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:#41566f}
.dd-gap.adopcion{border-left-color:var(--st-watch);background:var(--st-watch-bg)}
.dd-gap.sobreconfianza{border-left-color:var(--st-stalled);background:var(--st-stalled-bg)}
.dd-gap.alineado{border-left-color:var(--st-done);background:var(--st-done-bg)}
.dd-gap.pending{border-left-color:var(--dd-blue);background:#eef4ff}
.dd-viewer{display:block;margin-top:2px;color:var(--dd-soft);font-size:11px}

/* --- Campo escribible con lista desplegable. */
.dd-combo>span{margin-bottom:0}
.dd-combo-box{position:relative}
.dd-combo-box input{width:100%;padding:11px 34px 11px 12px;border:1px solid #d7e1ee;border-radius:10px;background:#fbfdff;color:var(--dd-ink);font-size:13px;font-family:inherit}
.dd-combo-box input:focus{outline:none;border-color:var(--dd-blue);box-shadow:0 0 0 3px rgba(37,99,235,.14);background:#fff}
.dd-combo-box input::placeholder{color:#a7b6c9}
.dd-combo-toggle{position:absolute;top:0;right:0;height:100%;width:32px;border:0;background:none;color:#8ba0b8;font-size:14px;cursor:pointer}
.dd-combo-menu{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;max-height:224px;overflow-y:auto;padding:5px;border:1px solid var(--dd-line);border-radius:11px;background:#fff;box-shadow:0 16px 34px rgba(20,45,80,.14)}
.dd-combo-menu button{display:grid;gap:1px;width:100%;padding:8px 10px;text-align:left;border:0;border-radius:8px;background:none;color:var(--dd-ink);font-family:inherit;cursor:pointer}
.dd-combo-menu button:hover{background:#f2f7ff}
.dd-combo-menu b{font-size:12.5px;font-weight:600}
.dd-combo-menu small{color:var(--dd-soft);font-size:10.5px}
.dd-combo-new{border-top:1px solid var(--dd-line2)!important;border-radius:0 0 8px 8px!important;color:var(--dd-blue)!important;font-size:12px;font-weight:700}
.dd-combo-empty{margin:0;padding:9px 10px;color:var(--dd-soft);font-size:11.5px}
.dd-field>small{color:var(--dd-soft);font-size:10.5px;line-height:1.4}

/* --- Personas dentro de la tabla y del panel del staff. */
.dd-people{display:grid;gap:5px}
.dd-person{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.dd-person .dd-lens{width:22px;height:22px;border-radius:7px;font-size:11px}
.dd-person b{font-size:12px;font-weight:600}
.dd-person small{display:block;color:var(--muted);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-person-state{font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.dd-person-state.done{color:var(--st-done-ink)}
.dd-contacts{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.dd-contacts li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fbfdff}
.dd-contacts b{font-size:12.5px}
.dd-contacts small{display:block;color:var(--muted);font-size:11px;line-height:1.45}
.dd-contacts a{color:#2563eb;text-decoration:none}

/* --- El cuestionario del stand reusa `.iv-shell` entera. Aqui solo van los retoques que la
   feria necesita y el producto no: no hay sesion que cerrar ni oportunidad que mostrar. */
.dd-shell .iv-dimension-toggle{cursor:default}
.dd-shell .iv-dimension-toggle i{display:none}
/* La bajada de la marca deja de estar escrita en el navy y pasa a ser el logotipo blanco. Se
   alinea por la base con el "by" -no por el centro- porque asi las dos piezas se apoyan en la
   misma linea de texto. El alto se mide contra el nombre del producto que va encima: 17px deja
   la palabra legible y su bajada como textura, que es todo lo que se le pide a una firma. */
.dd-byline{display:flex;align-items:baseline;gap:5px}
.dd-byline-logo{height:17px;width:auto;flex:0 0 auto;transform:translateY(4px)}
@media(max-width:600px){.dd-byline-logo{height:14px;transform:translateY(3px)}}
.dd-topbar-side{display:flex;align-items:center;gap:10px;margin-left:auto}
/* Terminado el cuestionario, la salida hacia el resultado no puede depender de que la persona
   busque el boton de arriba: se pone donde termina de leer, debajo de la tarjeta. */
.dd-finish-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  width:min(100%,1230px);margin:14px auto 0;padding:16px 20px;border:1px solid #cfe6de;border-radius:18px;
  background:linear-gradient(135deg,#f2fbf8,#eef6ff);box-shadow:0 10px 26px rgba(22,165,143,.12)}
.dd-finish-cta b{display:block;color:#0d7f6a;font-size:13px}
.dd-finish-cta small{display:block;margin-top:3px;color:var(--dd-soft);font-size:11px}
.dd-finish-cta .dd-primary{width:auto;min-width:220px;margin-top:0;padding:0 22px}
@media(max-width:600px){.dd-finish-cta{align-items:stretch;flex-direction:column}.dd-finish-cta .dd-primary{width:100%}}
.dd-shell .iv-topbar .dd-lens-chip{white-space:nowrap}
.iv-ai-message.pending p{opacity:.6}

/* --- La pantalla que anuncia el enfoque deducido. */
.dd-assign-stage{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);align-items:center;gap:clamp(20px,4vw,52px);width:min(1000px,100%);margin:0 auto}
.dd-assign-copy{display:grid;gap:13px;justify-items:start}
.dd-assign-copy .eyebrow{margin:0;color:var(--dd-blue);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.dd-assign-copy h1{margin:0;font-size:clamp(26px,3.6vw,38px);line-height:1.15;letter-spacing:-.03em}
.dd-assign-copy h1 b.tec{color:var(--dd-tec-ink)}
.dd-assign-copy h1 b.neg{color:var(--dd-neg-ink)}
.dd-assign-copy>p{margin:0;max-width:560px;font-size:14.5px;line-height:1.6;color:#41566f}
.dd-assign-blurb{color:var(--dd-soft)!important;font-size:13px!important}
.dd-assign-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.dd-assign-meta span{padding:7px 12px;border-radius:999px;border:1px solid var(--dd-line);background:rgba(255,255,255,.8);color:var(--dd-soft);font-size:11.5px}
.dd-assign-meta b{color:var(--dd-ink)}
.dd-assign-stage .dd-primary{width:auto;min-width:210px}
.dd-assign-note{max-width:520px;color:var(--dd-soft);font-size:11.5px;line-height:1.5}
.dd-assign-art{display:grid;place-items:center;aspect-ratio:1;border-radius:28px;font-size:96px}
.dd-assign-art.tec{background:linear-gradient(150deg,var(--dd-tec-soft),rgba(255,255,255,.4));color:var(--dd-tec-ink)}
.dd-assign-art.neg{background:linear-gradient(150deg,var(--dd-neg-soft),rgba(255,255,255,.4));color:var(--dd-neg-ink)}
.dd-assign-art i{font-style:normal}

/* --- Lo que el visitante pregunto, en el panel del staff. */
.dd-asked{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.dd-asked li{padding:9px 11px;border-left:3px solid #d9e5f8;border-radius:0 9px 9px 0;background:#f7fafd;font-size:12.5px;line-height:1.5}
.dd-asked small{display:block;color:var(--muted);font-size:10.5px;margin-bottom:2px}

@media (max-width:820px){
  .dd-assign-stage{grid-template-columns:minmax(0,1fr)}
  .dd-assign-art{display:none}
}

/* --- Navegacion del cuestionario del stand ------------------------------------------------
   En el producto, Anterior y Siguiente son dos botones discretos: el consultor conoce la
   pantalla y no los busca. En una feria los mira alguien que llego hace treinta segundos, y
   pasaban desapercibidos contra el fondo blanco. Aqui pesan mas, y Siguiente se enciende en
   cuanto hay una alternativa elegida, que es como se dice "quedo guardado, sigue" sin
   arrastrar a nadie a la pregunta siguiente antes de que termine de decidir. */
.dd-shell .dd-nav{grid-template-columns:150px minmax(0,1fr) 180px;gap:16px;margin-bottom:16px}
.dd-shell .dd-nav-btn{width:100%;height:48px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid #cfdcec;border-radius:14px;color:#26456a;background:#fff;font-size:13px;font-weight:800;
  box-shadow:0 6px 18px rgba(28,57,91,.09);transition:transform .18s cubic-bezier(.34,1.4,.5,1),box-shadow .18s ease,border-color .18s ease,color .18s ease,background .18s ease}
.dd-shell .dd-nav-btn:hover:not(:disabled){border-color:#8fb4f7;color:#1552c8;background:#f7faff;
  box-shadow:0 12px 26px rgba(37,99,235,.16);transform:translateY(-2px)}
.dd-shell .dd-nav-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 4px 12px rgba(37,99,235,.14)}
.dd-shell .dd-nav-btn:disabled{opacity:.4;box-shadow:none;cursor:not-allowed}
.dd-shell .dd-nav-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.28),0 8px 20px rgba(37,99,235,.16)}
/* Siguiente encendido: la senal de que la respuesta quedo registrada. */
.dd-shell #demo-next.ready{border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--dd-blue),var(--dd-blue2));
  box-shadow:0 10px 26px rgba(37,99,235,.34);animation:dd-ready-in .38s cubic-bezier(.34,1.5,.5,1) both}
.dd-shell #demo-next.ready:hover:not(:disabled){color:#fff;background:linear-gradient(135deg,#2f74f0,#2a63de);
  box-shadow:0 14px 32px rgba(37,99,235,.42);transform:translateY(-2px)}
.dd-shell #demo-next.ready:after{content:"";position:absolute;inset:-4px;border-radius:18px;pointer-events:none;
  border:2px solid rgba(37,99,235,.36);animation:dd-halo 1.5s ease-out 2}
.dd-shell #demo-next{position:relative}
@keyframes dd-ready-in{from{transform:scale(.94)}60%{transform:scale(1.04)}to{transform:scale(1)}}
@keyframes dd-halo{from{opacity:.75;transform:scale(.96)}to{opacity:0;transform:scale(1.1)}}

/* --- Alternativas y tarjeta: mas aire, mas relieve y una seleccion que se nota. */
.dd-shell .iv-question-card{border-radius:20px;box-shadow:0 18px 44px rgba(20,45,80,.1)}
.dd-shell .iv-question-card.dd-enter{animation:dd-rise .34s cubic-bezier(.22,.9,.3,1) both}
.dd-shell .iv-question-card.dd-enter .iv-option{animation:dd-rise .3s cubic-bezier(.22,.9,.3,1) both}
.dd-shell .iv-question-card.dd-enter .iv-option:nth-child(2){animation-delay:.04s}
.dd-shell .iv-question-card.dd-enter .iv-option:nth-child(3){animation-delay:.08s}
.dd-shell .iv-question-card.dd-enter .iv-option:nth-child(4){animation-delay:.12s}
.dd-shell .iv-question-card.dd-enter .iv-option:nth-child(5){animation-delay:.16s}
.dd-shell .iv-question-card.dd-enter .iv-option:nth-child(6){animation-delay:.2s}
@keyframes dd-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dd-shell .iv-question-card h1{font-size:clamp(19px,1.9vw,24px);line-height:1.32;letter-spacing:-.015em}
.dd-shell .iv-option{min-height:62px;padding:12px 15px;border-radius:14px;font-size:12.5px;
  transition:transform .18s cubic-bezier(.34,1.35,.5,1),box-shadow .18s ease,border-color .18s ease,background .18s ease}
.dd-shell .iv-option>span{font-size:12.5px}
.dd-shell .iv-option>i{width:32px;height:32px;border-radius:10px;font-size:12px;transition:.18s ease}
.dd-shell .iv-option:hover{border-color:#9ec0fb;background:#f8fbff;box-shadow:0 10px 24px rgba(37,99,235,.12);transform:translateY(-2px)}
.dd-shell .iv-option:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.dd-shell .iv-option.selected{border-color:var(--dd-blue);background:linear-gradient(135deg,#f0f6ff,#fbfdff);
  box-shadow:0 0 0 2px rgba(37,99,235,.2),0 12px 28px rgba(37,99,235,.16)}
.dd-shell .iv-option.selected>i{background:linear-gradient(135deg,var(--dd-blue),var(--dd-blue2));color:#fff;
  box-shadow:0 5px 14px rgba(37,99,235,.34);animation:dd-pick .32s cubic-bezier(.34,1.5,.5,1) both}
.dd-shell .iv-option.selected>em{background:var(--dd-blue);color:#fff;font-size:9px;letter-spacing:.03em}
@keyframes dd-pick{from{transform:scale(.7) rotate(-8deg)}60%{transform:scale(1.12) rotate(2deg)}to{transform:none}}

/* La barra la define la hoja del cuestionario, compartida con el diagnostico del cliente.
   Aqui solo se cambia el acento: el stand es azul, no violeta. */
.dd-shell .iv-inline-progress>header strong{color:var(--dd-blue)}

/* El numero de una pendiente late al aparecer, para que se note que quedo guardada ahi. */
.dd-shell .iv-number.skipped{transition:transform .18s cubic-bezier(.34,1.4,.5,1),box-shadow .18s ease}
.dd-shell .iv-number.skipped:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 8px 18px rgba(224,69,90,.22)}
.dd-shell .dd-lens-chip{box-shadow:0 4px 14px rgba(15,35,65,.18)}

@media (prefers-reduced-motion:reduce){
  .dd-shell .iv-question-card.dd-enter,.dd-shell .iv-question-card.dd-enter .iv-option,
  .dd-shell .iv-option.selected>i,.dd-shell #demo-next.ready,.dd-shell #demo-next.ready:after{animation:none}
  .dd-shell .dd-nav-btn,.dd-shell .iv-option{transition:none}
}

@media (max-width:900px){
  .dd-shell .dd-nav{grid-template-columns:52px minmax(0,1fr) 60px;gap:8px}
  .dd-shell .dd-nav-btn{padding:0 10px;font-size:0}
  .dd-shell .dd-nav-btn span[aria-hidden]{font-size:16px}
}

/* --- Vida en el resto del recorrido -------------------------------------------------------
   La misma mano que se aplico al cuestionario: relieve al pasar el cursor, entradas cortas y
   una animacion que solo ocurre una vez. Nada que se repita en bucle delante de alguien que
   esta leyendo, salvo el brillo de la barra, que marca avance. */
.dd-primary{transition:transform .18s cubic-bezier(.34,1.35,.5,1),box-shadow .18s ease,filter .18s ease}
.dd-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 34px rgba(37,99,235,.34)}
.dd-primary:active:not(:disabled){transform:translateY(0);box-shadow:0 6px 16px rgba(37,99,235,.28)}
.dd-primary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.3),0 12px 26px rgba(37,99,235,.28)}
.dd-card{animation:dd-rise .4s cubic-bezier(.22,.9,.3,1) both}
.dd-copy{animation:dd-rise .4s cubic-bezier(.22,.9,.3,1) .08s both}
.dd-field input:hover:not(:focus){border-color:#b9cbe4}
.dd-option,.dd-mode,.dd-chip-btn{transition:transform .18s cubic-bezier(.34,1.35,.5,1),box-shadow .18s ease,border-color .18s ease,background .18s ease}
.dd-mode:hover,.dd-chip-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(28,57,91,.1)}

/* El anillo del resultado dibuja su arco al aparecer: la cifra llega, no estaba puesta. */
.dd-score-ring{animation:dd-arc .9s cubic-bezier(.22,.9,.3,1) both}
@keyframes dd-arc{from{--dd-arc:0deg}}
@property --dd-arc{syntax:'<angle>';inherits:false;initial-value:0deg}
.dd-doc:not(.dd-doc-print) .dd-block{animation:dd-rise .38s cubic-bezier(.22,.9,.3,1) both}
.dd-doc:not(.dd-doc-print) .dd-block:nth-of-type(2){animation-delay:.06s}
.dd-doc:not(.dd-doc-print) .dd-block:nth-of-type(3){animation-delay:.12s}
.dd-doc:not(.dd-doc-print) .dd-block:nth-of-type(4){animation-delay:.18s}
.dd-dim-bar i{transition:width .6s cubic-bezier(.22,.9,.3,1)}
.dd-assign-art{animation:dd-float 5s ease-in-out infinite}
@keyframes dd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.dd-table .tr{transition:background .16s ease,box-shadow .16s ease}
.dd-table .tr:not(.th):hover{background:#f6faff;box-shadow:inset 3px 0 0 var(--dd-blue)}

@media (prefers-reduced-motion:reduce){
  .dd-card,.dd-copy,.dd-score-ring,.dd-doc .dd-block,.dd-assign-art{animation:none}
  .dd-primary,.dd-mode,.dd-chip-btn,.dd-dim-bar i{transition:none}
}

/* ── Elegir diagnostico: la empresa ya paso por el stand ──────────────────────
   Va entre la portada y la asignacion de enfoque. La decision -sumarse al de un
   companero o abrir otro- no la puede tomar el sistema: unir dos grupos que no
   querian unirse estropea el resultado tanto como separarlos. Por eso las
   tarjetas muestran lo unico con lo que alguien puede reconocer a su equipo:
   quienes respondieron, cuanto llevan y cuando fue la ultima vez. */
/* Una empresa puede tener varios diagnosticos: sin el numero, dos filas con el mismo
   nombre no se distinguen. */
.dd-seq{margin-left:6px;padding:2px 7px;border-radius:999px;color:#1552c8;background:#e8f0ff;
  font-size:9.5px;font-weight:800;font-style:normal;vertical-align:middle}


/* La presentacion de la dimension en el stand: el mismo componente del producto con el acento
   azul de la feria. El sello verde del cliente aqui competiria con el chip del enfoque. */
.dd-shell .iv-dim-mark{color:var(--dd-blue);background:linear-gradient(145deg,#e9f1ff,#f2f8ff);
  box-shadow:0 8px 20px rgba(37,99,235,.2)}
.dd-shell .iv-dim-body>article b{color:#1f56b8;background:#e9f1ff}
.dd-shell .iv-dim-dots>i.done{background:#7fb0f7}
/* El boton del encabezado ya no esta apagado: abre de nuevo la presentacion. */
.dd-shell .iv-dimension-toggle>i{color:#9fd0ff;background:rgba(37,99,235,.22)}