/* ══════════════════════════════════════════════════════════════════════════════
   PQR PSICOLOGÍA — LOGIN / REGISTRO DE PACIENTES (views/auth)
   Paleta según la sede — la misma que usa el resto de cada sitio, para que
   el login/registro se sienta parte de la MISMA página, no algo aparte.
   El layout pone data-sede="clinica|fundacion" en <html>.
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
  --p900:#003D47; --p800:#005F6B; --p700:#007E91; --p600:#00ACC1; --p500:#26C6DA; --p100:#E0F7FA;
  --accent:#FF7043; --accent-dark:#D84315;
}
:root[data-sede="fundacion"] {
  --p900:#020818; --p800:#0D1557; --p700:#1A237E; --p600:#283593; --p500:#3949AB; --p100:#E8EAF6;
  --accent:#FFCA28; --accent-dark:#C77800;
}
* { font-family: 'Outfit', 'Segoe UI', Arial, sans-serif; }
body { background: var(--p900); min-height: 100vh; margin:0; }
.auth-wrapper {
  min-height: 100vh;
  display: flex; align-items: stretch; justify-content: center;
}
/* ── Panel lateral de marca (se oculta en móvil) ── */
.auth-brand-panel {
  flex: 0 0 42%;
  background: linear-gradient(155deg, var(--p900) 0%, var(--p800) 45%, var(--p700) 100%);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem 3.2rem; color: #fff;
}
.auth-brand-panel::before {
  content:''; position:absolute; inset:0; opacity:.5;
  background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.08) 0%, transparent 45%),
                     radial-gradient(circle at 85% 80%, rgba(255,255,255,.06) 0%, transparent 50%);
}
.auth-brand-panel .logo-row { display:flex; align-items:center; gap:.8rem; margin-bottom:2.2rem; position:relative; z-index:1 }
.auth-brand-panel .logo-row img { height:44px; width:auto; max-width:130px; object-fit:contain; background:rgba(255,255,255,.08); border-radius:10px; padding:6px }
.auth-brand-panel .sede-badge {
  display:inline-flex; align-items:center; gap:.4rem; width:fit-content;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  padding:.35rem .9rem; border-radius:30px; font-size:.78rem; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; margin-bottom:1.1rem; position:relative; z-index:1;
  color: var(--accent);
}
.auth-brand-panel h1 { font-size:1.9rem; font-weight:800; line-height:1.25; margin-bottom:.9rem; position:relative; z-index:1 }
.auth-brand-panel p.tag { font-size:.95rem; color:rgba(255,255,255,.65); max-width:340px; line-height:1.6; position:relative; z-index:1 }
.auth-brand-panel .switch-sede {
  position:relative; z-index:1; margin-top:2.5rem; font-size:.82rem; color:rgba(255,255,255,.55);
}
.auth-brand-panel .switch-sede a { color:#fff; font-weight:700; text-decoration:none; border-bottom:1.5px dashed rgba(255,255,255,.4) }
.auth-brand-panel .switch-sede a:hover { border-color:#fff }

/* ── Panel del formulario ── */
.auth-form-panel {
  flex: 1; background:#f6f8fb; display:flex; align-items:center; justify-content:center;
  padding: 2.5rem 1.5rem;
}
.auth-card { width:100%; max-width:400px; }
.auth-mobile-brand { display:none; }
.auth-title { font-size: 1.45rem; font-weight: 800; color: var(--p800); margin-bottom: .35rem; }
.auth-sub { font-size: .87rem; color: #7c8798; margin-bottom: 1.6rem; }
.form-label { font-size: .82rem; font-weight: 600; color: #4a5568; margin-bottom: .3rem; }
.form-control {
  border-radius: 10px; border: 1.5px solid #e2e8f0;
  padding: .65rem 1rem; font-size: .9rem;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus { border-color: var(--p600); box-shadow: 0 0 0 3px var(--p100); }
.btn-auth {
  width: 100%; padding: .8rem; border-radius: 12px;
  font-weight: 700; font-size: .95rem; border: none;
  background: linear-gradient(135deg, var(--p700) 0%, var(--p600) 100%);
  color: white; transition: all .2s; box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.btn-auth:hover { opacity: .92; color: white; transform: translateY(-1px); }
.divider { text-align: center; position: relative; margin: 1.2rem 0; color: #bbb; font-size: .8rem; }
.divider::before, .divider::after {
  content: ''; position: absolute; top: 50%; width: 42%; height: 1px; background: #e2e8f0;
}
.divider::before { left: 0; } .divider::after { right: 0; }
.auth-link { color: var(--p600); font-weight: 700; text-decoration: none; }
.auth-link:hover { color: var(--p800); text-decoration: underline; }
.input-group-icon { position: relative; }
.input-group-icon i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #aaa; font-size: 1rem; z-index: 2;
}
.input-group-icon .form-control { padding-left: 2.4rem; }
.toggle-pass { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #aaa; z-index: 2; }
.alert-auth { border-radius: 10px; font-size: .85rem; padding: .6rem 1rem; margin-bottom: 1rem; }
.back-link { text-align: center; margin-top: 1.5rem; font-size: .82rem; color: #888; }

@media (max-width: 860px) {
  .auth-brand-panel { display:none; }
  .auth-mobile-brand {
    display:flex; align-items:center; gap:.7rem; justify-content:center; margin-bottom:1.6rem;
  }
  .auth-mobile-brand img { height:36px; width:auto; max-width:110px; object-fit:contain }
  .auth-mobile-brand .name { font-weight:800; color:var(--p800); font-size:1.05rem }
  .auth-mobile-sede {
    display:inline-flex; margin: 0 auto 1.3rem; width:fit-content;
    background: var(--p100); color:var(--p700); font-weight:700; font-size:.75rem;
    letter-spacing:.03em; text-transform:uppercase; padding:.3rem .8rem; border-radius:30px;
  }
  .auth-form-panel { padding: 2rem 1.2rem; }
}

/* ── login.ejs: sacudida del formulario al fallar ── */
.shake{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ── register.ejs: validación en vivo y selector de lada ── */
.input-status{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.85rem;z-index:2}
.valid .form-control{border-color:#10b981}
.invalid .form-control{border-color:#ef4444}
.hint{font-size:.75rem;margin-top:.25rem;min-height:1rem}
.hint-ok{color:#10b981}
.hint-err{color:#ef4444}
.strength-bar{height:4px;border-radius:2px;margin-top:.4rem;transition:all .3s;background:#e2e8f0}
.strength-bar-fill{height:100%;border-radius:2px;transition:all .4s}
.step-check{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}
.step-check.ok{background:#10b981}.step-check.no{background:#e2e8f0}
.phone-row{display:flex;gap:.5rem;align-items:stretch}
.cc-picker{position:relative;flex-shrink:0}
.cc-btn{height:100%;min-height:46px;display:flex;align-items:center;gap:.35rem;padding:0 .7rem;border:1.5px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer;font-size:.95rem;transition:.15s;white-space:nowrap}
.cc-btn:hover{border-color:var(--p600)}
.cc-dial{font-weight:600;font-size:.86rem;color:#334155}
.cc-drop{position:absolute;top:54px;left:0;width:280px;max-width:78vw;background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.18);z-index:50;overflow:hidden;border:1px solid #eef2f6}
.cc-search{width:100%;border:none;border-bottom:1px solid #eef2f6;padding:.7rem .9rem;font-size:.88rem;outline:none}
.cc-list{max-height:240px;overflow-y:auto}
.cc-item{width:100%;display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;border:none;background:none;cursor:pointer;font-size:.88rem;text-align:left;transition:.12s}
.cc-item:hover{background:#f1f5f9}
.cc-name{flex:1;color:#334155}
.cc-item .cc-dial{color:#94a3b8}