/* ============================================================================
   Auth (login + registro) — respeta el diseño que se intentaba (fondo QMC,
   card gris translúcida, tipografía Nunito, botón azul VDA) pero implementado
   limpio, responsive, sin posicionamiento hackeado (left:35.5%, margin
   negativo, etc.).
   ============================================================================ */

@import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700&display=swap");

:root {
  --brand:         #004487;   /* Azul VDA (reservado para acentos del modal) */
  --brand-dark:    #003466;
  --btn-gray:      #5c5c5c;   /* Botones principales del login — respetando el gris original */
  --btn-gray-dk:   #3f3f3f;
  --card-bg:       rgba(192, 192, 192, .77);   /* mismo #c0c0c0c4 del original */
  --card-border:   rgba(255, 255, 255, .35);
  --modal-body-bg: #545c62;   /* Gris oscuro del original — se conserva
                                 para no espantar a los usuarios que ya
                                 conocen la vista actual. */
  --modal-title:   #ffffff;   /* Título "Formulario de registro" sobre gris */
  --panel-bg:      #ffffff;
  --ink:           #1f1f1f;
  --ink-soft:      #3a3a3a;
  --muted:         #666;
  --line:          rgba(255, 255, 255, .45);
  --danger:        #dc2626;
  --success:       #16a34a;
  --shadow:        0 12px 40px rgba(0, 0, 0, .18);
}

* { box-sizing: border-box; }

body.auth-body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Background que se veía en el CSS original — pero con center/cover
     bien configurados y attachment fixed para que se quede quieto. */
  background:
    linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .35)),
    url("/public/images/login/QMC_fondo_blanco.jpg") center center / cover no-repeat fixed,
    #fff;
  display: flex;
  flex-direction: column;
}

/* ─── Header con logo ────────────────────────────────────────────────── */
.auth-header {
  padding: 24px 32px;
}
.auth-header .logo {
  height: 60px;
  width: auto;
}

/* ─── Shell centrada ─────────────────────────────────────────────────── */
.auth-shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* ─── Card (mismo look que el original: gris translúcida redondeada) ─── */
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin: 0 0 6px;
  letter-spacing: .2px;
}

.auth-subtitle {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin: 0 0 24px;
}

/* ─── Form ──────────────────────────────────────────────────────────── */
.auth-form .form-group { margin-bottom: 18px; }

.auth-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.auth-form .form-control {
  width: 100%;
  height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 8px;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}

.auth-form .form-control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 68, 135, .18);
}

.auth-form .form-control.is-invalid { border-color: var(--danger); }
.auth-form .form-control.is-valid   { border-color: var(--success); }

/* Password + toggle */
.password-field { position: relative; }
.password-field .form-control { padding-right: 40px; }
.password-field .password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
}
.password-field .password-toggle:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-contacts-auto-fill-button { display: none !important; }

/* Botones — respetando la línea del original: fondo gris, texto blanco. */
.auth-form .btn-primary-vda,
.auth-btn-secondary {
  display: block;
  width: 100%;
  height: 46px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  line-height: 44px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s, color .15s, transform .05s;
  font-family: inherit;
}

.auth-form .btn-primary-vda {
  background: var(--btn-gray);
  color: #fff;
  margin-top: 4px;
  letter-spacing: .3px;
}
.auth-form .btn-primary-vda:hover:not(:disabled) { background: var(--btn-gray-dk); }
.auth-form .btn-primary-vda:active:not(:disabled) { transform: translateY(1px); }
.auth-form .btn-primary-vda:disabled { opacity: .55; cursor: not-allowed; }

.auth-btn-secondary {
  background: var(--btn-gray);
  color: #fff;
  border-color: var(--btn-gray);
  letter-spacing: .3px;
}
.auth-btn-secondary:hover {
  background: var(--btn-gray-dk);
  color: #fff;
  text-decoration: none;
  border-color: var(--btn-gray-dk);
}

.auth-divider {
  height: 1px;
  background: var(--line);
  margin: 20px 0 14px;
}

/* Links debajo — más visibles: blanco sólido con sombra fuerte y underline
   sutil por defecto (antes eran demasiado ligeros sobre la card gris). */
.auth-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}
.auth-links a {
  color: #ffffff;
  font-family: "Nunito", Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  transition: color .15s;
}
.auth-links a:hover { color: #ffe28a; text-decoration: underline; }

.auth-footer {
  text-align: center;
  padding: 12px 16px 16px;
  font-size: 12px;
  color: #666;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .5);
}
.auth-footer a { color: #444; text-decoration: none; }
.auth-footer a:hover { color: var(--brand); }

/* ─── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .auth-card { padding: 28px 22px; border-radius: 18px; }
  .auth-title { font-size: 19px; }
  .auth-header { padding: 16px 20px; }
  .auth-header .logo { height: 48px; }
}


/* ============================================================================
   Modal de registro (moral + física)
   Mismo look: fondo con blur, card blanca por dentro (contraste con el
   fondo gris translúcido de la página).
   ============================================================================ */

.register-modal .modal-dialog { max-width: 920px; margin: 20px auto; }
.register-modal .modal-content {
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  font-family: "Nunito", sans-serif;
  /* Toda la caja va en el mismo gris oscuro del original — sin header
     azul contrastante. */
  background: var(--modal-body-bg);
}
.register-modal .modal-header {
  background: transparent;
  color: var(--modal-title);
  border-bottom: 0;
  padding: 22px 28px 6px;
}
.register-modal .modal-header .modal-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  color: var(--modal-title);
  text-align: center;
  width: 100%;
  letter-spacing: .3px;
}
.register-modal .modal-header .close {
  color: #fff;
  opacity: .85;
  text-shadow: none;
  font-size: 28px;
  position: absolute;
  right: 16px;
  top: 12px;
}
.register-modal .modal-header .close:hover { opacity: 1; }

.register-modal .modal-body {
  padding: 20px 28px 28px;
  max-height: 76vh;
  overflow-y: auto;
  background: var(--modal-body-bg);
}

.register-type-picker {
  display: flex; gap: 14px; justify-content: center;
  margin: 10px 0 22px;
  flex-wrap: wrap;
}
/* Regla base — sirve tanto para inactivo como para active. Todos los
   sobre-estilos se aplican encima. Se blindan con :not(.is-active-btn)
   para que el hover NO le gane al active. */
.register-type-picker .type-btn {
  padding: 12px 28px;
  min-width: 200px;
  border: 2px solid transparent;
  background: #ffffff;
  color: var(--ink-soft);
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.register-type-picker .type-btn:focus { outline: none; }
/* Hover SOLO cuando NO está activo */
.register-type-picker .type-btn:not(.is-active-btn):hover {
  background: #eef2f6;
}
/* Active: fondo azul VDA — usamos una clase MUY específica (con !important
   y con doble class) para blindar contra el :hover, :focus, cache del
   navegador y estilos de Bootstrap sobre <button>. Bug reportado: al
   alternar Moral → Física el active del segundo no se veía. */
.register-type-picker .type-btn.is-active-btn,
.register-type-picker .type-btn.is-active-btn:hover,
.register-type-picker .type-btn.is-active-btn:focus,
.register-type-picker .type-btn.is-active-btn:active {
  background: var(--brand) !important;
  color: #ffffff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 4px 12px rgba(0, 68, 135, .35) !important;
}

/* ─── Chooser inicial de Persona Moral: nueva empresa vs código de cliente
       Sustituye al viejo `supplier-finder` (una fila apretada de input+botones
       con un ícono ? de tooltip que casi nadie usaba). Ahora son 2 tarjetas
       lado a lado que se leen solas. ─── */
.supplier-chooser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 8px 0 20px;
}
@media (max-width: 640px) { .supplier-chooser { grid-template-columns: 1fr; } }

.chooser-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.chooser-card .chooser-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(0, 68, 135, .1);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}
.chooser-card h5 {
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}
.chooser-card p {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 16px;
  flex: 1;
  line-height: 1.45;
}
.chooser-card .chooser-input {
  display: flex; gap: 6px;
  margin-bottom: 10px;
}
.chooser-card .chooser-input .form-control {
  flex: 1;
  height: 42px;
  border: 1px solid rgba(0, 0, 0, .12);
  color: var(--ink);
}
.chooser-card .chooser-btn {
  height: 42px;
  padding: 0 22px;
  border-radius: 8px;
  border: 0;
  background: var(--brand);
  color: #ffffff;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
.chooser-card .chooser-btn:hover { background: var(--brand-dark); }
.chooser-card .chooser-btn.icon-only { padding: 0 14px; }
.chooser-card .chooser-btn.secondary {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.chooser-card .chooser-btn.secondary:hover {
  background: var(--brand);
  color: #ffffff;
}
.chooser-status {
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 0;
  min-height: 18px;
}
.chooser-status.ok      { color: var(--success); }
.chooser-status.err     { color: var(--danger);  }
.chooser-status.info    { color: var(--muted);   }

/* Botón de volver al chooser (arriba del form1 cuando ya se eligió) */
.back-to-chooser {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
  text-decoration: underline;
}
.back-to-chooser:hover { color: #ffffff; }

/* Todo el form queda sobre el mismo gris del modal-body — sin card
   blanca por dentro. Los inputs blancos resaltan contra el gris. */
.register-form-wrap {
  background: transparent;
  padding: 8px 0 0;
}

/* Labels y encabezados en blanco/claro para leer sobre el fondo gris. */
.register-form-wrap label,
.register-form-wrap h5,
.register-form-wrap h4,
.register-form-wrap p {
  color: #f2f4f7;
}
.register-form-wrap h5 { font-weight: 700; letter-spacing: .3px; }
.register-form-wrap label { font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.register-form-wrap .text-muted { color: rgba(255, 255, 255, .7) !important; }

.register-form-wrap .form-control {
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}
.register-form-wrap .form-control:focus {
  outline: none;
  border-color: #7fb3ff;
  box-shadow: 0 0 0 3px rgba(0, 68, 135, .35);
}
.register-form-wrap .form-control.is-invalid { border-color: var(--danger); }

.register-steps {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  gap: 4px;
}
.register-steps .step {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  color: rgba(255, 255, 255, .55);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  user-select: none;
  transition: color .15s, border-color .15s;
}
.register-steps .step:hover { color: #ffffff; }
.register-steps .step.active {
  color: #ffffff;
  border-bottom-color: #7fb3ff;
}
.register-steps .step .step-num {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  align-items: center; justify-content: center;
  font-size: 12px; margin-right: 6px;
  transition: background .15s;
}
.register-steps .step.active .step-num { background: #7fb3ff; color: var(--brand-dark); }

.register-step-panel { display: none; }
.register-step-panel.active { display: block; }

.register-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.register-actions .btn { min-width: 130px; font-family: inherit; font-weight: 700; }
/* Botón "Atrás" — fondo blanco sólido con texto gris oscuro. Antes usaba
   btn-outline-secondary de Bootstrap que salía morado y difícil de leer
   sobre el fondo gris del modal. Con !important porque Bootstrap tiene
   estilos con mayor especificidad. */
.register-actions .btn-outline-secondary,
.register-actions .btn-outline-secondary:focus {
  background: #ffffff !important;
  color: var(--ink) !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important;
}
.register-actions .btn-outline-secondary:hover,
.register-actions .btn-outline-secondary:active {
  background: #e9ecef !important;
  color: var(--ink) !important;
  border-color: #e9ecef !important;
}

/* Mensajes de validación bajo los inputs — como "chips" con fondo suave
   para que se lean bien contra el gris oscuro del modal. display:block +
   width:fit-content = el chip solo ocupa su ancho pero rompe línea, así
   el <small> de ayuda que puede venir después aparece abajo (no al lado). */
.email-match-msg {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 1.3;
  letter-spacing: .2px;
}
.email-match-msg:empty { display: none; }

.email-match-msg.match {
  background: rgba(22, 163, 74, .22);
  color: #d4f7de;
  border: 1px solid rgba(22, 163, 74, .55);
}
.email-match-msg.no-match {
  background: rgba(220, 38, 38, .22);
  color: #ffdcdc;
  border: 1px solid rgba(220, 38, 38, .6);
}