/* =============================================================================
   dm-auth.css
   Lenguaje visual unificado para las 4 paginas de autenticacion:
   login.php, recupera.php, registro.php, cambia_pass.php
   Aplica el Manual de Marca del Colegio Colombiano de Derecho Medico.
   Fecha: 2026-05-07
============================================================================= */

:root {
  --dm-primary:        #0E2B4A;
  --dm-primary-soft:   #1E4670;
  --dm-primary-deep:   #061629;
  --dm-primary-pale:   #C8D5E2;
  --dm-secondary:      #6FCBD4;
  --dm-secondary-soft: #9BDDE2;
  --dm-secondary-deep: #3FA5AE;
  --dm-secondary-pale: #E0F4F6;
  --dm-gold-soft:      #C9A96E;
  --dm-gold-deep:      #A88742;
  --dm-cream:          #F5EFE3;
  --dm-cream-warm:     #FBF6E9;
  --dm-ink:            #0A0F1A;
  --dm-muted:          #6B6F78;
  --dm-paper:          #FFFFFF;
  --dm-paper-2:        #F8FAFC;
  --dm-danger:         #B53A3A;
  --dm-warn:           #B57F1A;
  --dm-success:        #2F7D5B;

  --dm-ff-display: 'Cormorant Garamond', Georgia, serif;
  --dm-ff-body:    'Inter', system-ui, -apple-system, sans-serif;
  --dm-ff-mono:    'JetBrains Mono', 'Courier New', monospace;
}

/* ============================== RESET / BASE ============================== */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body.dm-auth {
  font-family: var(--dm-ff-body);
  color: var(--dm-ink);
  background: var(--dm-paper-2);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: stretch;
}

/* ============================== SHELL ============================== */
.dm-auth-shell {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%; min-height: 100vh; min-height: 100dvh;
}
@media (max-width: 992px) {
  .dm-auth-shell { grid-template-columns: 1fr; }
}

/* ============================== PANEL IZQUIERDO (BRAND) ============================== */
.dm-auth-brand {
  background: linear-gradient(135deg, var(--dm-primary-deep) 0%, var(--dm-primary) 50%, var(--dm-secondary-deep) 100%);
  color: #fff; padding: 56px 56px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 100vh; min-height: 100dvh;
}
.dm-auth-brand::before {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 380px; height: 380px; border-radius: 50%;
  background: rgba(201,169,110,0.10);
}
.dm-auth-brand::after {
  content: ""; position: absolute; left: -80px; bottom: -150px;
  width: 320px; height: 320px; border-radius: 50%;
  background: rgba(111,203,212,0.08);
}
.dm-auth-brand > * { position: relative; z-index: 1; }

.dm-auth-brand .dm-brand-logo {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; color: #fff;
}
.dm-auth-brand .dm-brand-logo img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 12px; background: #fff; padding: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.30);
}
.dm-auth-brand .dm-brand-logo .dm-brand-meta {
  display: flex; flex-direction: column; gap: 2px;
}
.dm-auth-brand .dm-brand-logo .dm-brand-eyebrow {
  font-family: var(--dm-ff-mono); font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--dm-secondary);
}
.dm-auth-brand .dm-brand-logo .dm-brand-name {
  font-family: var(--dm-ff-display); font-style: italic; font-weight: 600;
  font-size: 22px; line-height: 1.05;
}

.dm-auth-brand .dm-brand-headline { max-width: 520px; }
.dm-auth-brand .dm-brand-eyebrow-2 {
  font-family: var(--dm-ff-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--dm-secondary); margin-bottom: 14px;
}
.dm-auth-brand h1 {
  font-family: var(--dm-ff-display); font-style: italic; font-weight: 600;
  font-size: 56px; line-height: 1.05; margin: 0; letter-spacing: -0.005em;
  color: #fff;
}
.dm-auth-brand h1 .dm-gold { color: var(--dm-gold-soft); }
.dm-auth-brand .dm-brand-divider {
  width: 80px; height: 2px; background: var(--dm-gold-soft); margin: 22px 0;
}
.dm-auth-brand .dm-brand-lead {
  font-size: 15px; line-height: 1.65; opacity: 0.92; max-width: 460px; margin: 0;
}

.dm-auth-brand .dm-brand-features {
  list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px;
}
.dm-auth-brand .dm-brand-features li {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--dm-ff-mono); font-size: 11px; letter-spacing: 0.10em;
  text-transform: uppercase; opacity: 0.92;
}
.dm-auth-brand .dm-brand-features li i {
  color: var(--dm-gold-soft); width: 22px; text-align: center;
}

.dm-auth-brand .dm-brand-foot {
  font-family: var(--dm-ff-mono); font-size: 10px; letter-spacing: 0.14em;
  opacity: 0.70; text-transform: uppercase;
}
.dm-auth-brand .dm-brand-foot a { color: var(--dm-secondary); text-decoration: none; }

/* ============================== PANEL DERECHO (FORM) ============================== */
.dm-auth-card {
  background: var(--dm-paper);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 48px;
}
@media (max-width: 992px) {
  .dm-auth-brand { padding: 40px 32px 32px; min-height: auto; }
  .dm-auth-brand h1 { font-size: 38px; }
  .dm-auth-card { padding: 40px 24px; }
}
@media (max-width: 480px) {
  .dm-auth-brand { padding: 32px 20px 24px; }
  .dm-auth-brand h1 { font-size: 30px; }
  .dm-auth-brand .dm-brand-features { display: none; }
  .dm-auth-card { padding: 28px 20px; }
}

.dm-auth-form {
  width: 100%; max-width: 460px;
}

.dm-auth-form .dm-form-eyebrow {
  font-family: var(--dm-ff-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 600; color: var(--dm-secondary-deep);
  margin-bottom: 8px;
}
.dm-auth-form h2 {
  margin: 0 0 8px; font-family: var(--dm-ff-display); font-style: italic;
  font-weight: 600; font-size: 32px; color: var(--dm-primary); line-height: 1.1;
}
.dm-auth-form .dm-form-lead {
  margin: 0 0 28px; color: var(--dm-muted); font-size: 14px; line-height: 1.55;
}

/* ====== Floating label fields ====== */
.dm-field {
  position: relative; margin-bottom: 16px;
}
.dm-field input,
.dm-field select,
.dm-field textarea {
  width: 100%; padding: 18px 14px 8px;
  font-family: var(--dm-ff-body); font-size: 14px; color: var(--dm-ink);
  background: var(--dm-paper); border: 1.5px solid var(--dm-secondary-pale);
  border-radius: 6px; outline: none; transition: border-color .15s, box-shadow .15s;
  appearance: none;
}
.dm-field input:focus,
.dm-field select:focus,
.dm-field textarea:focus {
  border-color: var(--dm-secondary-deep);
  box-shadow: 0 0 0 4px rgba(111,203,212,0.18);
}
.dm-field input.is-invalid,
.dm-field select.is-invalid {
  border-color: var(--dm-danger);
  box-shadow: 0 0 0 4px rgba(181,58,58,0.10);
}
.dm-field input.is-valid {
  border-color: var(--dm-success);
}
.dm-field label {
  position: absolute; left: 14px; top: 14px; pointer-events: none;
  color: var(--dm-muted); font-size: 14px; transition: all .15s ease;
  background: transparent; padding: 0 4px;
}
.dm-field input:focus + label,
.dm-field input:not(:placeholder-shown) + label,
.dm-field select:focus + label,
.dm-field select:valid + label,
.dm-field textarea:focus + label,
.dm-field textarea:not(:placeholder-shown) + label {
  top: -8px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dm-primary); font-family: var(--dm-ff-mono); font-weight: 600;
  background: var(--dm-paper);
}
.dm-field .dm-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--dm-muted); pointer-events: none;
}
.dm-field .dm-icon.dm-icon-clickable { cursor: pointer; pointer-events: auto; }
.dm-field .dm-icon.dm-icon-clickable:hover { color: var(--dm-primary); }

.dm-field-error {
  display: none; margin-top: 6px; padding-left: 4px;
  font-size: 12px; color: var(--dm-danger);
  font-family: var(--dm-ff-body);
}
.dm-field.is-invalid .dm-field-error { display: block; }

.dm-field-hint {
  margin-top: 6px; padding-left: 4px;
  font-size: 11px; color: var(--dm-muted); font-style: italic;
}

.dm-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 480px) { .dm-field-row { grid-template-columns: 1fr; gap: 0; } }

/* ====== Buttons ====== */
.dm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 20px; border-radius: 6px;
  font-family: var(--dm-ff-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s, box-shadow .12s, background .15s, border-color .15s;
}
.dm-btn-primary {
  background: var(--dm-primary); color: #fff; border-color: var(--dm-primary);
  box-shadow: 0 4px 14px rgba(14,43,74,0.20);
}
.dm-btn-primary:hover { background: var(--dm-primary-soft); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(14,43,74,0.26); }
.dm-btn-ghost {
  background: transparent; color: var(--dm-primary); border-color: var(--dm-secondary-pale);
}
.dm-btn-ghost:hover { background: var(--dm-secondary-pale); }
.dm-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }

.dm-btn .dm-spinner {
  width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: dm-rot 0.8s linear infinite; display: none;
}
.dm-btn.is-loading .dm-spinner { display: inline-block; }
.dm-btn.is-loading .dm-btn-label { opacity: 0.7; }
@keyframes dm-rot { to { transform: rotate(360deg); } }

/* ====== Top toolbar ====== */
.dm-form-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; gap: 10px; flex-wrap: wrap;
}
.dm-form-top a {
  font-family: var(--dm-ff-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600; color: var(--dm-secondary-deep);
  text-decoration: none;
}
.dm-form-top a:hover { color: var(--dm-primary); }

/* ====== Divider y footer del form ====== */
.dm-form-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 24px 0 16px;
}
.dm-form-divider::before,
.dm-form-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--dm-secondary-pale);
}
.dm-form-divider span {
  font-family: var(--dm-ff-mono); font-size: 10px; letter-spacing: 0.20em;
  text-transform: uppercase; color: var(--dm-muted);
}

.dm-form-foot {
  text-align: center; font-size: 13px; color: var(--dm-muted);
}
.dm-form-foot a { color: var(--dm-primary); text-decoration: none; font-weight: 600; }
.dm-form-foot a:hover { text-decoration: underline; }

/* ====== Checkbox de terminos ====== */
.dm-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; background: var(--dm-paper-2);
  border: 1px solid var(--dm-secondary-pale); border-radius: 6px;
  margin-bottom: 14px;
}
.dm-check input[type="checkbox"] {
  flex: 0 0 auto; margin-top: 2px; width: 18px; height: 18px;
  accent-color: var(--dm-primary); cursor: pointer;
}
.dm-check label {
  flex: 1; font-size: 13px; line-height: 1.5; color: var(--dm-ink); cursor: pointer;
}
.dm-check label a { color: var(--dm-secondary-deep); font-weight: 600; text-decoration: none; }
.dm-check label a:hover { text-decoration: underline; }

/* ====== Alert inline ====== */
.dm-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-radius: 6px; margin-bottom: 18px;
  font-size: 14px; line-height: 1.5; border-left: 3px solid var(--dm-secondary-deep);
  background: var(--dm-secondary-pale); color: var(--dm-primary-deep);
}
.dm-alert i { font-size: 16px; flex: 0 0 auto; margin-top: 2px; }
.dm-alert.dm-alert-success { background: rgba(47,125,91,0.10);  color: var(--dm-success); border-left-color: var(--dm-success); }
.dm-alert.dm-alert-danger  { background: rgba(181,58,58,0.10);  color: var(--dm-danger);  border-left-color: var(--dm-danger); }
.dm-alert.dm-alert-warn    { background: rgba(181,127,26,0.10); color: var(--dm-warn);    border-left-color: var(--dm-warn); }

/* ====== Password strength ====== */
.dm-pass-strength {
  margin-top: 6px; height: 4px; background: var(--dm-secondary-pale);
  border-radius: 999px; overflow: hidden;
}
.dm-pass-strength-bar { height: 100%; background: var(--dm-danger); width: 0%; transition: width .25s, background .25s; border-radius: 999px; }
.dm-pass-strength-bar.lvl-1 { background: var(--dm-danger);  width: 25%; }
.dm-pass-strength-bar.lvl-2 { background: var(--dm-warn);    width: 50%; }
.dm-pass-strength-bar.lvl-3 { background: var(--dm-secondary-deep); width: 75%; }
.dm-pass-strength-bar.lvl-4 { background: var(--dm-success); width: 100%; }
.dm-pass-strength-text {
  display: block; margin-top: 4px; font-size: 11px;
  font-family: var(--dm-ff-mono); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--dm-muted);
}

/* ====== reCAPTCHA badge bottom-right (cuando se carga sin esconderlo) ====== */
.grecaptcha-badge {
  visibility: visible !important;
  bottom: 14px !important; right: 14px !important;
  z-index: 9999;
}

/* ====== Privacy notice (reCAPTCHA v3) ====== */
.dm-recaptcha-notice {
  margin-top: 14px; padding: 8px 12px; background: var(--dm-paper-2);
  border-radius: 4px; font-size: 11px; color: var(--dm-muted); line-height: 1.5;
  border-left: 2px solid var(--dm-gold-soft);
}
.dm-recaptcha-notice a { color: var(--dm-secondary-deep); text-decoration: none; }
.dm-recaptcha-notice a:hover { text-decoration: underline; }