/* ============================================================================
   dharma-components.css  ·  Capa 2 — COMPONENTES NUEVOS

   Todo lo que Bootstrap no trae y dhTordo necesita:
   armazon (menu + barra superior), Pulso del dia, tarjetas de indicador,
   paleta de comandos, personalizador, cortina, pantalla de acceso, avisos.

   Todas las clases llevan prefijo .dh- para que no choquen con nada
   que ya exista en el sistema.
   ============================================================================ */

.dh-icon{width:18px;height:18px;flex:0 0 auto;stroke-width:1.7}

/* ============================ ARMAZON ==================================== */
.dh-app{display:flex;height:100vh;overflow:hidden}

.dh-nav{
  width:var(--nav-w);flex:0 0 var(--nav-w);
  background:linear-gradient(178deg,var(--nav-bg),var(--nav-bg-2));
  border-right:1px solid var(--nav-line);
  display:flex;flex-direction:column;z-index:40;
  transition:width .22s cubic-bezier(.4,0,.2,1),flex-basis .22s cubic-bezier(.4,0,.2,1);
}
.dh-app.is-mini .dh-nav{width:var(--nav-w-mini);flex-basis:var(--nav-w-mini)}
.dh-app.is-mini .dh-label,
.dh-app.is-mini .dh-nav-sec,
.dh-app.is-mini .dh-brand-txt,
.dh-app.is-mini .dh-nav-badge,
.dh-app.is-mini .dh-empresa-meta,
.dh-app.is-mini .dh-chev,
.dh-app.is-mini .dh-credit-txt{display:none}
.dh-app.is-mini .dh-nav-item{justify-content:center;padding-inline:0}
.dh-app.is-mini .dh-empresa{justify-content:center;padding:10px}

.dh-brand{
  height:var(--top-h);display:flex;align-items:center;gap:11px;
  padding:0 18px;border-bottom:1px solid var(--nav-line);flex:0 0 auto;
}
.dh-mark{
  width:31px;height:31px;border-radius:9px;flex:0 0 auto;
  background:var(--pri-bg);display:grid;place-items:center;
  box-shadow:0 0 0 1px var(--accent-line),0 4px 14px rgba(0,0,0,.28);
}
.dh-mark svg{width:17px;height:17px;stroke:var(--pri-fg);stroke-width:2;fill:none}
.dh-brand-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.dh-brand-txt b{font-family:var(--f-display);font-size:16.5px;font-weight:700;color:#fff;letter-spacing:-.02em}
.dh-brand-txt span{font-size:10px;color:var(--nav-text);letter-spacing:.09em;text-transform:uppercase;font-weight:500}

/* Conmutador de empresa (multiempresa) */
.dh-empresa{
  margin:12px 12px 4px;padding:9px 11px;width:calc(100% - 24px);
  border-radius:var(--r);background:rgba(255,255,255,.045);
  border:1px solid var(--nav-line);
  display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left;
  transition:background .15s,border-color .15s;
}
.dh-empresa:hover{background:rgba(255,255,255,.075);border-color:var(--accent-line)}
.dh-empresa-av{
  width:28px;height:28px;border-radius:7px;flex:0 0 auto;
  display:grid;place-items:center;background:var(--accent-soft);color:var(--au-hi);
  font-family:var(--f-data);font-size:11px;font-weight:700;
}
.dh-empresa-meta{min-width:0;flex:1}
.dh-empresa-meta b{display:block;font-size:12.5px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-empresa-meta span{display:block;font-size:10.5px;color:var(--nav-text)}
.dh-chev{color:var(--nav-text);width:14px;height:14px;stroke-width:2}

.dh-nav-scroll{flex:1;overflow-y:auto;padding:8px 12px 20px;scrollbar-width:thin}
.dh-nav-scroll::-webkit-scrollbar{width:6px}
.dh-nav-scroll::-webkit-scrollbar-thumb{background:#2A2B31;border-radius:3px}
.dh-nav-sec{
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nav-sec-c);padding:16px 10px 7px;
}
.dh-nav-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 11px;margin-bottom:2px;border-radius:var(--r-sm);
  color:var(--nav-text);background:none;border:0;cursor:pointer;
  font-size:13.5px;font-weight:500;position:relative;
  transition:background .14s,color .14s;text-decoration:none;
}
.dh-nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.dh-nav-item.is-on{background:var(--accent-soft);color:var(--nav-on)}
.dh-nav-item.is-on::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:19px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--au-hi),var(--au));
}
.dh-label{flex:1;text-align:left}
.dh-nav-badge{
  font-family:var(--f-data);font-size:10.5px;font-weight:700;
  padding:1px 6px;border-radius:20px;background:var(--bad);color:#fff;
}

.dh-nav-foot{padding:10px 12px 12px;border-top:1px solid var(--nav-line);flex:0 0 auto}
.dh-nav-user{
  display:flex;align-items:center;gap:10px;padding:7px;width:100%;
  border-radius:var(--r-sm);cursor:pointer;border:0;background:none;text-align:left;
}
.dh-nav-user:hover{background:rgba(255,255,255,.06)}

/* Firma de la casa. Va SIEMPRE, sea cual sea el color de la instancia. */
.dh-credit{
  display:flex;align-items:center;gap:9px;width:100%;margin-top:6px;
  padding:9px 7px;border:0;background:none;border-radius:var(--r-sm);
  cursor:pointer;text-align:left;transition:background .14s;
}
.dh-credit:hover{background:rgba(255,255,255,.05)}
.dh-credit .dh-enso{width:22px;height:22px;flex:0 0 auto}
.dh-credit-txt{min-width:0}
.dh-credit-txt span{display:block;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#4F5057}
.dh-credit-txt b{display:block;font-family:var(--f-mark);font-size:11px;font-weight:600;letter-spacing:.15em;color:#8E8F96}
.dh-credit:hover .dh-credit-txt b{color:var(--au-hi)}

.dh-av{
  border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--f-data);font-weight:700;color:var(--pri-fg);background:var(--pri-bg);
}
.dh-av-s{width:26px;height:26px;font-size:10px}
.dh-av-m{width:32px;height:32px;font-size:11.5px}
.dh-av-l{width:40px;height:40px;font-size:13px}

/* -------------------------- Barra superior ------------------------------- */
.dh-main{flex:1;display:flex;flex-direction:column;min-width:0}
.dh-top{
  height:var(--top-h);flex:0 0 auto;background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:0 18px;z-index:30;
}
.dh-iconbtn{
  width:34px;height:34px;border-radius:var(--r-sm);border:0;background:none;
  color:var(--text-2);display:grid;place-items:center;cursor:pointer;position:relative;
  flex:0 0 auto;transition:background .14s,color .14s;
}
.dh-iconbtn:hover{background:var(--surface-3);color:var(--text)}
.dh-dot{
  position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--bad);border:2px solid var(--surface);
}
.dh-omni{
  flex:1;max-width:400px;height:34px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2);
  display:flex;align-items:center;gap:9px;padding:0 11px;cursor:pointer;
  color:var(--text-3);font-size:13px;transition:border-color .15s,background .15s;
}
.dh-omni:hover{border-color:var(--accent-line);background:var(--surface)}
.dh-kbd{
  margin-left:auto;font-family:var(--f-data);font-size:10.5px;font-weight:500;
  padding:2px 6px;border-radius:var(--r-xs);background:var(--surface-3);
  border:1px solid var(--line);color:var(--text-3);
}
.dh-sp{flex:1}
.dh-divider{width:1px;height:22px;background:var(--line);margin:0 3px}

.dh-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.dh-page{padding:22px 24px 56px;max-width:1560px;margin:0 auto}

.dh-crumb{font-size:12px;color:var(--text-3);margin-bottom:6px}
.dh-crumb b{color:var(--text-2);font-weight:500}
.dh-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.dh-head h1{font-family:var(--f-display);font-size:26px;font-weight:600;letter-spacing:-.025em;margin:0;line-height:1.15}
.dh-head p{margin:5px 0 0;color:var(--text-2);font-size:13.5px}
.dh-head-act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ==================== FIRMA VISUAL: PULSO DEL DIA ======================== */
.dh-pulso{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px 15px;margin-bottom:16px;box-shadow:var(--sh-1);
  position:relative;overflow:hidden;
}
.dh-pulso::after{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--au-dp),var(--au-hi),var(--au-dp));
  background-size:220% 100%;animation:dh-shimmer 7s linear infinite;
}
@keyframes dh-shimmer{to{background-position:220% 0}}
.dh-pulso-h{display:flex;align-items:center;gap:10px;margin-bottom:13px;flex-wrap:wrap}
.dh-pulso-h h3{margin:0;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.dh-live{
  width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 var(--ok-soft);animation:dh-beat 2.1s ease-out infinite;
}
@keyframes dh-beat{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.dh-pulso-time{font-family:var(--f-data);font-size:11.5px;color:var(--text-3)}
.dh-rail{display:flex;height:26px;border-radius:7px;overflow:hidden;background:var(--surface-3);gap:2px}
.dh-seg{
  height:100%;display:grid;place-items:center;min-width:0;
  font-family:var(--f-data);font-size:11px;font-weight:700;color:#fff;
  animation:dh-grow .9s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes dh-grow{from{flex-basis:0;opacity:0}}
.dh-seg-ok{background:var(--ok)}
.dh-seg-live{background:linear-gradient(100deg,var(--au),var(--au-hi));color:#1A1A1C}
.dh-seg-wait{background:var(--surface-3);color:var(--text-3);border:1px solid var(--line)}
.dh-seg-bad{background:var(--bad);font-size:10px}
.dh-rail-key{display:flex;gap:18px;margin-top:11px;flex-wrap:wrap}
.dh-key{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2)}
.dh-key i{width:9px;height:9px;border-radius:3px;display:block}
.dh-key b{color:var(--text);font-family:var(--f-data);font-size:12.5px}

/* ======================== TARJETA DE INDICADOR =========================== */
.dh-kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 17px;box-shadow:var(--sh-1);
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.dh-kpi:hover{border-color:var(--accent-line);transform:translateY(-2px);box-shadow:var(--sh-2)}
.dh-kpi-t{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.dh-kpi-ic{
  width:31px;height:31px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--accent-soft);color:var(--accent-ink);
}
.dh-kpi-ic.is-ok{background:var(--ok-soft);color:var(--ok)}
.dh-kpi-ic.is-warn{background:var(--warn-soft);color:var(--warn)}
.dh-kpi-ic.is-bad{background:var(--bad-soft);color:var(--bad)}
.dh-kpi-t span{font-size:12.5px;color:var(--text-2);font-weight:500}
.dh-kpi-v{font-family:var(--f-data);font-size:27px;font-weight:700;letter-spacing:-.035em;line-height:1}
.dh-kpi-v small{font-size:15px;font-weight:500;color:var(--text-3);letter-spacing:0}
.dh-kpi-f{display:flex;align-items:flex-end;gap:10px;margin-top:9px}
.dh-kpi-f em{font-style:normal;font-size:11.5px;color:var(--text-3)}
.dh-delta{font-family:var(--f-data);font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:20px}
.dh-delta.is-up{background:var(--ok-soft);color:var(--ok)}
.dh-delta.is-dn{background:var(--bad-soft);color:var(--bad)}
.dh-spark{margin-left:auto}

/* ======================== PALETA DE COMANDOS ============================= */
.dh-veil{position:fixed;inset:0;background:rgba(8,9,12,.55);z-index:1090;display:none}
.dh-veil.is-on{display:block}
.dh-cmdk{
  position:fixed;top:14vh;left:50%;transform:translateX(-50%);
  width:min(590px,92vw);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);z-index:1091;display:none;overflow:hidden;
}
.dh-cmdk.is-on{display:block;animation:dh-pop .2s cubic-bezier(.2,.9,.3,1)}
@keyframes dh-pop{from{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.97)}}
.dh-cmdk::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--au-dp),var(--au-hi),var(--au-dp));
}
.dh-cmdk-in{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.dh-cmdk-in input{border:0;background:none;outline:none;flex:1;font-size:15.5px;min-width:0;color:var(--text)}
.dh-cmdk-list{max-height:340px;overflow-y:auto;padding:7px}
.dh-cmdk-sec{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);padding:10px 11px 5px}
.dh-cmdk-it{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);cursor:pointer;font-size:13.5px}
.dh-cmdk-it:hover,.dh-cmdk-it.is-hi{background:var(--accent-soft);color:var(--accent-ink)}
.dh-cmdk-it .dh-icon{color:var(--text-3)}
.dh-cmdk-it:hover .dh-icon,.dh-cmdk-it.is-hi .dh-icon{color:var(--accent-ink)}
.dh-cmdk-it .dh-kbd{margin-left:auto}
.dh-cmdk-empty{padding:32px 16px;text-align:center;color:var(--text-3);font-size:13.5px}
.dh-cmdk-foot{padding:9px 16px;border-top:1px solid var(--line-soft);background:var(--surface-2);display:flex;gap:16px;font-size:11.5px;color:var(--text-3)}

/* ========================== PERSONALIZADOR =============================== */
.dh-cust{
  position:fixed;top:0;right:0;bottom:0;width:312px;
  background:var(--surface);border-left:1px solid var(--line);
  box-shadow:var(--sh-3);z-index:1092;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.dh-cust.is-on{transform:none}
.dh-cust-h{padding:17px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.dh-cust-h h3{margin:0;font-size:14.5px;font-weight:600}
.dh-cust-h p{margin:2px 0 0;font-size:12px;color:var(--text-3)}
.dh-cust-b{flex:1;overflow-y:auto;padding:18px}
.dh-cust-sec{margin-bottom:24px}
.dh-cust-sec h4{margin:0 0 11px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.dh-hues{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.dh-hue{aspect-ratio:1;border-radius:9px;border:2px solid transparent;cursor:pointer;position:relative;padding:0;transition:transform .14s}
.dh-hue:hover{transform:scale(1.09)}
.dh-hue.is-on{border-color:var(--text)}
.dh-hue.is-on::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
}
.dh-hue.is-casa{grid-column:span 2;aspect-ratio:2/1;display:grid;place-items:center}
.dh-hue.is-casa em{font-family:var(--f-mark);font-style:normal;font-size:9px;font-weight:700;letter-spacing:.13em;color:#1A1A1C;text-indent:.13em}
.dh-hue.is-casa.is-on::after{background-position:right 8px center}
.dh-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dh-opt{
  padding:11px 9px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface-2);cursor:pointer;font-size:12.5px;font-weight:500;
  display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .14s;color:var(--text);
}
.dh-opt:hover{border-color:var(--text-3)}
.dh-opt.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.dh-cust-f{padding:14px 18px;border-top:1px solid var(--line)}

/* ============================ AVISOS ==================================== */
.dh-toasts{position:fixed;bottom:20px;right:20px;z-index:1095;display:flex;flex-direction:column;gap:9px}
.dh-toast{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:12px 15px;display:flex;gap:11px;align-items:center;
  min-width:275px;animation:dh-slidein .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes dh-slidein{from{opacity:0;transform:translateX(24px)}}
.dh-toast b{display:block;font-size:13.5px;font-weight:600}
.dh-toast span{font-size:12.5px;color:var(--text-3)}

/* ======================= MARCA: ENSO Y LOGOTIPO ========================== */
.dh-enso path{fill:none;stroke:url(#dhAuGrad);stroke-linecap:round}
.dh-wordmark{display:flex;flex-direction:column;align-items:center}
.dh-wm-1{font-family:var(--f-mark);font-weight:600;letter-spacing:.17em;line-height:1;text-indent:.17em}
.dh-wm-2{
  display:flex;align-items:center;gap:12px;width:100%;
  font-family:var(--f-mark);font-weight:500;letter-spacing:.34em;
  color:var(--au);line-height:1;text-indent:.34em;
}
/* Las reglas que flanquean PROJECTS en el logo. Motivo estructural. */
.dh-wm-2::before,.dh-wm-2::after{content:"";flex:1;height:1px;background:currentColor;opacity:.55}
.dh-wm-tag{font-family:var(--f-mark);font-weight:500;letter-spacing:.2em;color:var(--au-dp);text-indent:.2em}

/* El mismo motivo, reutilizado como divisor de seccion en formularios */
.dh-fset{border:0;padding:0;margin:0 0 26px}
.dh-fset legend{
  padding:0;margin-bottom:14px;width:100%;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);display:flex;align-items:center;gap:10px;
}
.dh-fset legend::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--accent-line),var(--line) 45%)}

/* ========================= CORTINA DE CARGA ==============================
   Se retira con animacion CSS pura. NO depende de JavaScript.
   ======================================================================== */
.dh-curtain{
  position:fixed;inset:0;z-index:1200;background:var(--ink);
  display:grid;place-items:center;
  animation:dh-curtainOut .55s 1.75s forwards;
}
@keyframes dh-curtainOut{to{opacity:0;visibility:hidden}}
.dh-curtain path{stroke-dasharray:520;stroke-dashoffset:520;animation:dh-draw 1.3s cubic-bezier(.4,0,.2,1) forwards}
.dh-curtain path:nth-child(2){animation-delay:.14s}
.dh-curtain path:nth-child(3){animation-delay:.26s}
.dh-curtain path:nth-child(4){animation-delay:.36s}
@keyframes dh-draw{to{stroke-dashoffset:0}}
.dh-curtain p{
  margin:22px 0 0;text-align:center;font-family:var(--f-mark);
  font-size:11px;letter-spacing:.32em;color:#5A5A5F;text-indent:.32em;
  animation:dh-fadeup .6s .75s both;
}
@keyframes dh-fadeup{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){
  .dh-curtain{animation:dh-curtainOut .01ms 1s forwards}
  .dh-curtain path{stroke-dashoffset:0}
}

/* ======================== PANTALLA DE ACCESO ============================= */
.dh-gate{position:fixed;inset:0;z-index:1100;display:flex;background:var(--surface)}
.dh-gate-art{
  flex:1.15;background:var(--ink);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px;
}
.dh-gate-art::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(760px 520px at 50% 34%,rgba(201,162,39,.14),transparent 65%),
    radial-gradient(400px 400px at 82% 88%,rgba(201,162,39,.06),transparent 70%);
}
.dh-gate-art::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:4px 4px;
}
.dh-gate-brand{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:430px;width:100%}
.dh-gate-brand .dh-enso{margin-bottom:34px;filter:drop-shadow(0 8px 34px rgba(201,162,39,.3))}
.dh-gate-brand .dh-wm-1{font-size:clamp(34px,4.4vw,54px);color:#E7E7EA}
.dh-gate-brand .dh-wm-2{font-size:clamp(13px,1.5vw,18px);margin-top:16px}
.dh-gate-brand .dh-wm-tag{font-size:10.5px;margin-top:16px}
.dh-gate-foot{position:absolute;bottom:34px;left:0;right:0;z-index:2;text-align:center;font-size:11.5px;color:#4E4E54}
.dh-gate-foot b{color:var(--au-dp);font-weight:500}
.dh-gate-form{flex:.85;display:flex;align-items:center;justify-content:center;padding:44px 40px;min-width:0}
.dh-gate-box{width:100%;max-width:352px}
.dh-gate-prod{display:flex;align-items:center;gap:12px;margin-bottom:34px}
.dh-gate-prod .dh-mark{width:38px;height:38px;border-radius:11px}
.dh-gate-prod b{font-family:var(--f-display);font-size:20px;font-weight:700;letter-spacing:-.025em;display:block;line-height:1.1}
.dh-gate-prod span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.dh-gate-box h2{font-family:var(--f-display);font-size:25px;font-weight:600;letter-spacing:-.025em;margin:0 0 6px}
.dh-gate-box > p{margin:0 0 26px;color:var(--text-2);font-size:13.5px}
.dh-gate-note{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--text-3)}

/* ========================== ADAPTACION ================================== */
@media (max-width:980px){
  .dh-gate{flex-direction:column;overflow-y:auto}
  .dh-gate-art{flex:0 0 auto;padding:40px 24px 34px}
  .dh-gate-foot{display:none}
  .dh-gate-form{flex:1;padding:32px 24px 48px}
}
@media (max-width:860px){
  .dh-nav{position:fixed;inset:0 auto 0 0;transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1)}
  .dh-app.is-open .dh-nav{transform:none;box-shadow:var(--sh-3)}
  .dh-app.is-mini .dh-nav{width:var(--nav-w);flex-basis:var(--nav-w)}
  .dh-app.is-mini .dh-label,
  .dh-app.is-mini .dh-nav-sec,
  .dh-app.is-mini .dh-brand-txt,
  .dh-app.is-mini .dh-empresa-meta,
  .dh-app.is-mini .dh-chev,
  .dh-app.is-mini .dh-credit-txt{display:revert}
  .dh-app.is-mini .dh-nav-item{justify-content:flex-start;padding-inline:11px}
  .dh-desk-only{display:none}
  .dh-page{padding:16px 14px 48px}
  .dh-head h1{font-size:22px}
  .dh-cust{width:100%}
  .dh-omni{max-width:none}
}