/* ============================================================
   auth.css — login.html y register.html
   Depende de las variables y clases base definidas en ds.css
   (--bg, --surface, --ink, --accent, .ds-header, .ds-btn, .ds-radar…)
   ============================================================ */

/* ---------- header simplificado ---------- */
.ds-authbar .ds-container{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.ds-authbar-hint{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-mono); font-size:.78rem; color:var(--muted);
}

/* ---------- layout principal ---------- */
.ds-auth{
  min-height:calc(100vh - 72px - 64px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,460px);
}

/* -------- columna izquierda: formulario -------- */
.ds-auth-form-col{
  display:flex; align-items:center;
  padding:var(--sp-6) var(--sp-4);
}
.ds-auth-form-wrap{width:100%; max-width:400px; margin:0 auto;}

.ds-auth-form-wrap h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem, 3.4vw, 2.3rem); line-height:1.1;
  margin:0 0 var(--sp-1);
}
.ds-auth-sub{
  color:var(--muted); font-size:.96rem; margin-bottom:var(--sp-4);
}
.ds-auth-sub a{color:var(--accent); border-bottom:1px solid rgba(143,163,179,.35);}
.ds-auth-sub a:hover{border-color:var(--accent);}

.ds-form{display:flex; flex-direction:column; gap:var(--sp-3);}

.ds-field{display:flex; flex-direction:column; gap:.45rem;}
.ds-field label{
  font-family:var(--font-body); font-size:.86rem; font-weight:500; color:var(--ink);
}
.ds-input-wrap{position:relative; display:flex; align-items:center;}
.ds-input{
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--border-strong); border-radius:var(--radius-s);
  padding:.78rem .95rem; font-family:var(--font-body); font-size:.94rem;
  transition:border-color .15s ease, background .15s ease;
}
.ds-input::placeholder{color:var(--muted-2);}
.ds-input:focus{
  outline:none; border-color:var(--accent); background:var(--surface-2);
}
.ds-input-wrap .ds-input{padding-right:2.8rem;}

.ds-eye{
  position:absolute; right:.4rem; width:2.2rem; height:2.2rem;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--muted); cursor:pointer;
  border-radius:8px;
}
.ds-eye:hover{color:var(--ink); background:rgba(255,255,255,.05);}
.ds-eye svg{width:18px; height:18px;}

.ds-field-hint{font-size:.78rem; color:var(--muted-2);}

/* strength meter */
.ds-strength{display:flex; gap:4px; margin-top:.15rem;}
.ds-strength i{
  flex:1; height:3px; border-radius:2px; background:var(--border-strong);
  transition:background .2s ease;
}
.ds-strength[data-level="1"] i:nth-child(1){background:#a8776d;}
.ds-strength[data-level="2"] i:nth-child(-n+2){background:#b3a06a;}
.ds-strength[data-level="3"] i:nth-child(-n+3){background:var(--accent);}
.ds-strength[data-level="4"] i{background:#8faa93;}

/* row: checkbox + link */
.ds-form-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-2); flex-wrap:wrap;
}
.ds-checkbox{
  display:flex; align-items:center; gap:.55rem;
  font-size:.86rem; color:var(--muted); cursor:pointer;
  user-select:none;
}
.ds-checkbox input{position:absolute; opacity:0; width:1px; height:1px;}
.ds-checkbox .box{
  width:17px; height:17px; flex:none; border-radius:5px;
  border:1px solid var(--border-strong); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, background .15s ease;
}
.ds-checkbox .box svg{width:11px; height:11px; opacity:0; transition:opacity .15s ease;}
.ds-checkbox input:checked + .box{background:var(--accent-soft); border-color:var(--accent);}
.ds-checkbox input:checked + .box svg{opacity:1;}
.ds-checkbox input:focus-visible + .box{outline:2px solid var(--accent); outline-offset:2px;}
.ds-link-muted{font-size:.86rem; color:var(--muted);}
.ds-link-muted:hover{color:var(--ink);}

.ds-btn--block{width:100%;}

.ds-divider{
  display:flex; align-items:center; gap:.9rem; margin:var(--sp-1) 0;
  font-family:var(--font-mono); font-size:.68rem; color:var(--muted-2);
  letter-spacing:.08em; text-transform:uppercase;
}
.ds-divider::before, .ds-divider::after{content:""; flex:1; height:1px; background:var(--border);}

.ds-auth-foot{
  margin-top:var(--sp-4); font-size:.9rem; color:var(--muted); text-align:center;
}
.ds-auth-foot a{color:var(--accent); border-bottom:1px solid rgba(143,163,179,.35);}
.ds-auth-foot a:hover{border-color:var(--accent);}

/* inline status message after submit */
.ds-status{
  display:none; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink);
  background:var(--accent-soft); border:1px solid rgba(143,163,179,.35);
  border-radius:var(--radius-s); padding:.7rem .9rem; margin-top:.25rem;
}
.ds-status.is-visible{display:flex;}
.ds-status--error{
  color:#f3c4c4; background:rgba(224,98,98,.1); border-color:rgba(224,98,98,.4);
}
.ds-status--error .dot{background:#e06262; animation:none;}
.ds-status .dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  flex:none; animation:ds-pulse 1.1s ease-in-out infinite;
}

/* -------- columna derecha: panel de marca -------- */
.ds-auth-panel{
  position:relative; overflow:hidden;
  background:var(--surface);
  background-image:radial-gradient(rgba(242,243,244,0.05) 1px, transparent 1px);
  background-size:20px 20px;
  border-left:1px solid var(--border);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-4);
}
.ds-auth-panel::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(46rem 30rem at 90% -10%, rgba(143,163,179,0.09), transparent 60%);
  pointer-events:none;
}
.ds-panel-top{
  font-family:var(--font-mono); font-size:.72rem; color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase;
  display:flex; align-items:center; gap:.5rem;
}
.ds-panel-top::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}

.ds-panel-quote{
  font-family:var(--font-display); font-weight:500; font-size:1.2rem;
  line-height:1.35; max-width:32ch; margin:0;
}

/* mini stats en fila */
.ds-panel-minis{display:flex;}
.ds-panel-mini{flex:1; padding-right:var(--sp-2);}
.ds-panel-mini + .ds-panel-mini{border-left:1px solid var(--border); padding-left:var(--sp-2);}
.ds-panel-mini strong{display:block; font-family:var(--font-display); font-weight:600; font-size:1.55rem;}
.ds-panel-mini span{font-family:var(--font-mono); font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; line-height:1.4;}

.ds-panel-stats{display:flex; flex-direction:column; gap:.9rem;}
.ds-panel-stat{
  display:flex; align-items:baseline; gap:.7rem;
  padding-top:.9rem; border-top:1px solid var(--border);
}
.ds-panel-stat:first-child{border-top:none; padding-top:0;}
.ds-panel-stat strong{font-family:var(--font-display); font-size:1.3rem; font-weight:600;}
.ds-panel-stat span{font-family:var(--font-mono); font-size:.74rem; color:var(--muted); line-height:1.4;}

/* feed de reportes recientes (login) */
.ds-feed{display:flex; flex-direction:column; gap:.5rem;}
.ds-feed-item{
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem .7rem; border:1px solid var(--border); border-radius:var(--radius-s);
  background:var(--surface-2);
}
.ds-feed-tag{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.03em;
  color:var(--accent); background:var(--accent-soft); border-radius:5px;
  padding:.22rem .4rem; flex:none;
}
.ds-feed-desc{
  flex:1; min-width:0; font-size:.82rem; color:var(--ink); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ds-feed-meta{display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; flex:none;}
.ds-feed-score{font-family:var(--font-mono); font-size:.7rem; color:var(--muted-2);}
.ds-pill{font-family:var(--font-mono); font-size:.6rem; padding:.16rem .45rem; border-radius:999px; letter-spacing:.02em; white-space:nowrap;}
.ds-pill--ok{background:var(--accent-soft); color:var(--accent); border:1px solid rgba(143,163,179,.35);}
.ds-pill--pending{background:transparent; color:var(--muted); border:1px solid var(--border-strong);}

/* tarjeta de verificación (registro) */
.ds-verify-card{
  border:1px solid var(--border); border-radius:var(--radius-m);
  background:var(--surface-2); padding:var(--sp-3);
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.ds-verify-label{
  font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
}
.ds-verify-msg{
  font-size:.85rem; line-height:1.5; color:var(--ink);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-s); padding:.7rem .85rem;
}
.ds-verify-result{display:flex; align-items:center; gap:var(--sp-2); padding-top:.15rem;}
.ds-gauge{position:relative; width:60px; height:60px; flex:none;}
.ds-gauge svg{width:100%; height:100%; transform:rotate(-90deg);}
.ds-gauge-track{stroke:var(--border-strong);}
.ds-gauge-arc{stroke:var(--accent);}
.ds-gauge-value{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
}
.ds-verify-verdict strong{display:block; font-family:var(--font-display); font-weight:600; font-size:.95rem;}
.ds-verify-verdict span{font-family:var(--font-mono); font-size:.7rem; color:var(--muted);}
.ds-signal-chips{display:flex; flex-wrap:wrap; gap:.4rem;}
.ds-signal-chip{
  font-family:var(--font-mono); font-size:.64rem; color:var(--muted);
  border:1px solid var(--border-strong); border-radius:999px; padding:.2rem .55rem;
}

/* beneficios por rol (registro, dinámico vía JS) */
.ds-role-benefits h3{
  font-family:var(--font-display); font-weight:600; font-size:.92rem; margin:0 0 .6rem;
}
.ds-role-benefits ul{display:flex; flex-direction:column; gap:.4rem;}
.ds-role-benefits li{
  display:flex; gap:.5rem; font-size:.83rem; color:var(--muted); line-height:1.4;
}
.ds-role-benefits li::before{content:"—"; color:var(--accent); flex:none;}

.ds-panel-top-group{display:flex; flex-direction:column; gap:var(--sp-3);}
.ds-panel-bottom-group{display:flex; flex-direction:column; gap:var(--sp-3);}

/* mini proceso (registro) */
.ds-mini-process{
  display:flex; justify-content:space-between; gap:.4rem;
  padding:var(--sp-2) 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.ds-mini-step{flex:1; display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center;}
.ds-mini-step .num{
  width:22px; height:22px; border-radius:50%; flex:none;
  border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.66rem; color:var(--muted);
}
.ds-mini-step .label{
  font-family:var(--font-mono); font-size:.58rem; color:var(--muted-2);
  text-transform:uppercase; letter-spacing:.03em; line-height:1.25;
}

.ds-panel-watermark{
  position:absolute; right:var(--sp-4); bottom:var(--sp-4);
  width:30px; height:30px; opacity:.15; pointer-events:none;
}

/* marcos tipo visor, refuerzan el aire de "panel de escaneo" */
.ds-corner{position:absolute; width:16px; height:16px; border-color:var(--border-strong); pointer-events:none;}
.ds-corner--tl{top:16px; left:16px; border-top:1px solid; border-left:1px solid;}
.ds-corner--br{bottom:16px; right:16px; border-bottom:1px solid; border-right:1px solid;}

/* franja de confianza (registro) */
.ds-trust-row{display:flex; flex-wrap:wrap; gap:.5rem;}
.ds-trust-chip{
  display:flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.66rem; color:var(--muted);
  border:1px solid var(--border-strong); border-radius:999px; padding:.32rem .65rem;
}
.ds-trust-chip svg{width:12px; height:12px; flex:none; color:var(--accent);}

/* consola de verificación (registro) — reemplaza la tarjeta de chat/gauge */
.ds-console{
  border:1px solid var(--border-strong); border-radius:var(--radius-m);
  background:#0a0c0f; overflow:hidden;
}
.ds-console-bar{
  display:flex; align-items:center; gap:.4rem;
  padding:.55rem .75rem; background:var(--surface-2); border-bottom:1px solid var(--border);
}
.ds-console-dot{width:7px; height:7px; border-radius:50%; background:var(--border-strong); flex:none;}
.ds-console-title{
  font-family:var(--font-mono); font-size:.66rem; color:var(--muted);
  margin-left:.35rem; letter-spacing:.02em;
}
.ds-console-live{
  margin-left:auto; display:flex; align-items:center; gap:.35rem;
  font-family:var(--font-mono); font-size:.6rem; color:var(--muted-2);
  text-transform:uppercase; letter-spacing:.05em;
}
.ds-console-live::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--accent);
  animation:ds-pulse 1.6s ease-in-out infinite;
}
.ds-console-body{
  padding:.8rem .9rem .9rem; font-family:var(--font-mono); font-size:.72rem;
  line-height:1.95; color:var(--muted);
}
.ds-console-line{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ds-console-line .t{color:var(--muted-2); margin-right:.5rem;}
.ds-console-line .accent{color:var(--accent);}
.ds-console-line .ink{color:var(--ink);}
.ds-console-cursor{
  display:inline-block; width:6px; height:11px; background:var(--accent);
  margin-left:3px; vertical-align:-2px; animation:ds-blink 1s step-end infinite;
}
@keyframes ds-blink{50%{opacity:0;}}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .ds-auth{grid-template-columns:1fr;}
  .ds-auth-panel{display:none;}
  .ds-auth-form-col{padding:var(--sp-5) var(--sp-3);}
}
@media (max-width:520px){
  .ds-form-row{flex-direction:column; align-items:flex-start; gap:.6rem;}
}

/* login: separador "o" y acceso como invitado */
.ds-auth-or{display:flex; align-items:center; gap:.8rem; margin:var(--sp-3) 0 var(--sp-2); color:var(--muted-2); font-size:.8rem;}
.ds-auth-or::before, .ds-auth-or::after{content:""; flex:1; height:1px; background:var(--border);}
.ds-auth-guest-note{margin:.6rem 0 0; font-size:.78rem; color:var(--muted-2); text-align:center; line-height:1.5;}