/* 2H Visual System v1.0 — primera aplicación: encabezado y acceso */
:root{
  --2h-navy-950:#061D31;
  --2h-navy-900:#071F35;
  --2h-navy-800:#0D3859;
  --2h-navy-700:#124D70;
  --2h-gold-500:#F7B500;
  --2h-gold-400:#FFC52D;
  --2h-canvas:#EAF0F4;
  --2h-surface:#FFFFFF;
  --2h-ink:#122033;
  --2h-muted:#5F6F7F;
  --2h-line:#D6E0E7;
  --2h-focus:#FFD45F;
  --2h-radius-sm:10px;
  --2h-radius-md:16px;
  --2h-radius-lg:24px;
  --2h-shadow-soft:0 12px 30px rgba(6,29,49,.08);
  --2h-shadow-strong:0 22px 50px rgba(6,29,49,.16);
  --2h-font:"Inter","Aptos","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;
}

html,body{font-family:var(--2h-font);font-size:16px}
body{background:linear-gradient(180deg,#E7EDF1 0%,#F7F9FA 48%,var(--2h-canvas) 100%)}

/* Encabezado: la marca manda; el conector acompaña. */
.top{
  height:72px;
  padding-inline:clamp(16px,2.2vw,30px);
  background:var(--2h-navy-950);
  border-bottom:1px solid rgba(255,255,255,.11);
  box-shadow:0 10px 28px rgba(4,25,43,.16);
}
.route3-approved{min-width:168px;height:64px;gap:0}
.route3-approved>img{width:96px!important;height:64px!important}
.brand-lockup{width:72px;height:36px;margin-left:-2px}
.brand-lockup .bridge{stroke-width:2}
.brand-lockup .orbit-white,.brand-lockup .orbit-gold{stroke-width:4.2}
.topact{gap:8px}
.top .btn{min-height:42px;padding:9px 14px}

/* Acceso: beneficio primero, formulario claro y sin ruido. */
.auth{max-width:590px;margin:22px auto 32px}
.auth .hero{
  padding:26px 28px 27px;
  border-radius:var(--2h-radius-lg);
  background:linear-gradient(138deg,var(--2h-navy-950) 0%,var(--2h-navy-800) 66%,var(--2h-navy-700) 100%);
  box-shadow:var(--2h-shadow-strong);
}
.auth .hero-brand{height:76px;margin:0 0 14px;align-items:center}
.auth .hero-brand>img{width:120px;height:80px}
.auth .hero h1{
  max-width:510px;
  margin:0 0 13px;
  font-size:clamp(2rem,4vw,2.35rem);
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:790;
}
.auth .hero h1 strong{color:var(--2h-gold-400);font-weight:790}
.auth .hero p{max-width:510px;font-size:1rem;line-height:1.58;color:#E1EAF0}
.auth .hero p b{color:#FFFFFF;font-weight:750}
.auth .route{margin-top:24px;gap:12px}
.auth .route-step{gap:7px;font-size:.82rem;line-height:1.25;font-weight:700}
.auth .route-step svg{width:21px;height:21px;flex:none}

.auth>.card{
  margin-top:14px;
  padding:24px;
  border:1px solid rgba(17,58,86,.13);
  border-radius:20px;
  box-shadow:var(--2h-shadow-soft);
}
.auth .tabs{padding:5px;border-radius:13px;margin-bottom:20px;background:#EDF2F5}
.auth .tab{min-height:44px;padding:10px 12px;border-radius:9px;font-size:.95rem;font-weight:720}
.auth .tab.active{box-shadow:0 2px 9px rgba(6,29,49,.10)}
.auth h2{font-size:1.55rem;line-height:1.2;margin-bottom:7px}
.auth .lead{font-size:1rem;line-height:1.5;margin-bottom:18px;color:var(--2h-muted)}
.auth label{font-size:.9rem;line-height:1.35;margin:14px 0 7px;color:#34485A;font-weight:700}
.auth input{
  min-height:48px;
  padding:11px 13px;
  border-color:#BBC8D2;
  border-radius:var(--2h-radius-sm);
  font-size:1rem;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.auth input:focus{border-color:var(--2h-navy-700);box-shadow:0 0 0 3px rgba(18,77,112,.14)}
.auth .eye{min-width:46px;min-height:36px;top:6px;right:6px;font-size:.82rem}
.auth .link{min-height:42px;margin-top:5px;font-size:.88rem;text-align:left}
.auth .btn.full{min-height:48px;margin-top:12px;font-size:.95rem;border-radius:11px}
.auth .btn.primary{background:var(--2h-navy-950);border-color:var(--2h-navy-950)}
.auth .btn.gold{background:var(--2h-gold-500);border-color:var(--2h-gold-500)}
.auth .notice{font-size:.9rem;line-height:1.5}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--2h-focus);
  outline-offset:3px;
}
button:disabled{cursor:not-allowed;opacity:.62}

/* Superficie operativa: legibilidad adulta en Comercial, Hoy y Preinicio. */
.content2{font-size:1rem}
.content2 h1{font-size:clamp(1.65rem,3vw,2.15rem);line-height:1.12}
.content2 h2{font-size:1.45rem;line-height:1.2}
.content2 h3{font-size:1.05rem;line-height:1.3}
.content2 .lead,.content2 .head p{font-size:.95rem;line-height:1.55}
.content2 label{font-size:.88rem;line-height:1.35}
.content2 input,.content2 textarea,.content2 select{font-size:1rem;line-height:1.4;min-height:44px}
.content2 .btn{min-height:42px;font-size:.88rem}
.content2 .tiny{font-size:.78rem;line-height:1.4}
.content2 .metric small,.content2 .kpi2 small,.content2 .summary-grid small{font-size:.75rem;line-height:1.35}
.content2 .metric b,.content2 .summary-grid b{font-size:.88rem;line-height:1.4}
.content2 .op b,.content2 .homeop b,.content2 .att b,.content2 .event b,.content2 .check b{font-size:.88rem;line-height:1.35}
.content2 .op small,.content2 .homeop small,.content2 .att span,.content2 .event small,.content2 .check span{font-size:.75rem;line-height:1.4}
.content2 .sum{font-size:.88rem;line-height:1.4}
.content2 .ptop b{font-size:.95rem}.content2 .ptop span{font-size:.75rem}
.content2 .qitem input{font-size:.9rem}.content2 .qitem small{font-size:.75rem}
.content2 .badge{font-size:.72rem;line-height:1.25}
.bottom2 button{min-height:54px;font-size:.75rem}

@media(max-width:760px){
  .top{height:68px;padding-inline:12px}
  .route3-approved{min-width:146px;height:60px}
  .route3-approved>img{width:90px!important;height:60px!important}
  .brand-lockup{width:56px;height:31px;margin-left:-1px}
  main{padding:12px 12px 84px}
  .auth{margin:10px auto 22px}
  .auth .hero{padding:20px 19px 22px;border-radius:19px}
  .auth .hero-brand{height:70px;margin-bottom:11px}
  .auth .hero-brand>img{width:108px;height:72px}
  .auth .hero h1{font-size:clamp(1.8rem,8.2vw,2.08rem);margin-bottom:12px}
  .auth .hero p{font-size:1rem;line-height:1.55}
  .auth .route{grid-template-columns:1fr 1fr;margin-top:20px;gap:13px 10px}
  .auth .route-step{font-size:.86rem}
  .auth>.card{padding:19px;margin-top:11px;border-radius:17px}
  .auth .tab{min-height:46px}
  .auth .btn.full{min-height:50px}
}

@media(max-width:360px){
  .route3-approved{min-width:138px}
  .route3-approved>img{width:88px!important;height:59px!important}
  .brand-lockup{width:51px;height:29px}
  .top .btn{padding-inline:10px}
  .auth .hero{padding-inline:17px}
  .auth>.card{padding-inline:17px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
/* Local attachments remain identifiable and can be heard/viewed before sending. */
dialog.local-attachment-dialog{box-sizing:border-box;width:min(700px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #d6e0e7;border-radius:18px;padding:20px;color:#0b2f4f;background:#fff}
.local-attachment-dialog::backdrop{background:#061d3199}.local-attachment-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.local-attachment-heading h2{font-size:21px;line-height:1.3;overflow-wrap:anywhere;margin:4px 0 12px}.local-attachment-heading .btn{min-width:44px;min-height:44px;flex:none;font-size:22px}.local-attachment-dialog>p{font-size:13px;line-height:1.5;color:#5f6f7f}.local-attachment-dialog img,.local-attachment-dialog video{display:block;max-width:100%;max-height:60dvh;object-fit:contain;margin:15px auto}.local-attachment-dialog audio{display:block;width:100%;margin:20px 0}.local-attachment-dialog iframe{display:block;width:100%;height:55dvh;border:0;margin:14px 0}.local-attachment-dialog>a{display:inline-block;margin-top:12px;font-size:14px;text-decoration:none;min-height:44px}
.local-file-review{box-sizing:border-box;flex-basis:100%;padding:12px;border:1px solid #e7cd82;border-radius:12px;background:#fff9e9;color:#0b2f4f;font-size:14px;line-height:1.5}.local-file-review p{margin:0 0 9px}
.draft-file-card small{display:block;overflow-wrap:anywhere;line-height:1.5}.draft-file-card{flex-wrap:wrap;min-width:0;max-width:100%}.draft-file-card>span{min-width:0;flex:1 1 170px;overflow-wrap:anywhere}.draft-file-card>.btn{min-height:44px}