/* login.xhtml con el mismo lenguaje visual del portal (vrdevgroup.com).
   Usa las variables de tokens.css. Solo presentación. */
.vl-body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--soft-2); color: var(--text);
  font-family: var(--font-sans); padding-top: 62px;
  display: flex; flex-direction: column;
}
.vl-body *, .vl-body *::before, .vl-body *::after { box-sizing: border-box; }
.vl-body :is(input, button, a, .ui-widget, .ui-inputfield, .ui-button) { font-family: var(--font-sans); }
.vl-body :is(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-dark) !important; outline-offset: 2px; border-radius: 10px;
}

/* ---- Cabecera ---- */
.vl-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 41; min-height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 36px; background: var(--white); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px rgba(22, 35, 74, 0); transition: box-shadow .22s ease;
}
.vl-topbar.is-scrolled { box-shadow: 0 12px 30px rgba(22, 35, 74, .10); }
.vl-brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.vl-brand img { display: block; width: 140px; height: auto; }
.vl-topbar-cta { white-space: nowrap; }
.vl-lang { flex: none; }
.vl-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.vl-lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--white); }
.vl-lang-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.vl-lang-opt.active { background: var(--blue); color: var(--white); }

/* ---- Botones: píldora, sin sombra ---- */
.vl-body .vl-btn, .vl-body .ui-button.vl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: none; transform: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.vl-body .vl-btn-primary, .vl-body .ui-button.vl-btn-primary { background: var(--blue) !important; border-color: var(--blue) !important; color: var(--white) !important; }
.vl-body .vl-btn-primary:hover, .vl-body .ui-button.vl-btn-primary:hover,
.vl-body .ui-button.vl-btn-primary:focus { background: var(--blue-dark) !important; border-color: var(--blue-dark) !important; }
.vl-body .vl-btn-secondary, .vl-body .ui-button.vl-btn-secondary { background: var(--white) !important; border-color: var(--line) !important; color: var(--ink) !important; }
.vl-body .ui-button.vl-btn-secondary:hover { background: var(--soft) !important; }
.vl-body .ui-button .ui-button-text { padding: 0; }

/* ---- Tarjeta central ---- */
.vl-main { flex: 1 0 auto; display: flex; align-items: flex-start; justify-content: center; padding: 56px 20px 48px; }
.vl-main > form { width: 100%; max-width: 440px; }
.vl-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 32px; }
.vl-title { margin: 0 0 24px; color: var(--ink); font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }

/* ---- Campos ---- */
.vl-field { margin: 0 0 16px; }
.vl-field label { display: block; margin: 0 0 6px; color: var(--ink); font-size: 14px; font-weight: 600; }
.vl-input-wrap { position: relative; }
.vl-body .vl-field input.ui-inputfield, .vl-body .vl-field input {
  width: 100%; min-height: 44px; padding: 0 48px 0 14px; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: none; font-size: 15px;
}
.vl-body .vl-field input::placeholder { color: var(--muted); opacity: 1; }
.vl-body .vl-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.vl-body .vl-field input:disabled { background: var(--soft); color: var(--muted); }
.vl-body .vl-field .ui-state-error, .vl-body .vl-field input.ui-state-error { border-color: var(--danger); }
.vl-field .ui-message-error, .vl-field .ui-messages-error { color: var(--danger); font-size: 13px; }
.vl-toggle {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 999px; cursor: pointer;
}
.vl-toggle:hover { color: var(--blue-dark); background: var(--blue-soft); }
.vl-links { display: flex; justify-content: flex-end; margin: -4px 0 16px; }
.vl-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue-dark); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.vl-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.vl-link-muted { color: var(--muted); font-weight: 500; }
.vl-actions { display: grid; gap: 10px; }
.vl-actions .vl-btn { width: 100%; }
.vl-note { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.vl-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ---- Pie ---- */
.vl-footer { flex: none; padding: 54px 24px 24px; background: var(--white); border-top: 1px solid var(--line); }
.vl-footer-inner { max-width: 1180px; margin: 0 auto; display: grid; gap: 30px; }
.vl-footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.vl-footer-links h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: 0; }
.vl-footer-links ul { list-style: none; margin: 0; padding: 0; }
.vl-footer-links a { display: inline-flex; align-items: center; min-height: 34px; color: var(--muted); font-size: 14.7px; text-decoration: none; }
.vl-footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.vl-social { display: grid; justify-items: center; gap: 10px; }
.vl-social-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.vl-social-links { display: flex; gap: 4px; }
.vl-social-links a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: var(--muted); font-size: 20px; text-decoration: none; }
.vl-social-links a:hover { background: var(--blue-soft); color: var(--blue-dark); }
.vl-footer-bottom {
  max-width: 1180px; margin: 30px auto 0; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; color: var(--muted); font-size: 12.8px;
}

/* ---- Estado de carga y avisos de PrimeFaces ---- */
.vl-body .ui-growl-item-container { border-radius: 12px; box-shadow: 0 12px 30px rgba(22, 35, 74, .10); }

/* ---- Móvil ---- */
@media (max-width: 1040px) { .vl-footer-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .vl-topbar { padding: 8px 20px; gap: 10px; }
  .vl-brand img { width: 108px; }
  .vl-main { padding: 28px 20px 32px; }
  .vl-card { padding: 24px 20px; }
  .vl-title { font-size: 24px; }
  .vl-footer-links { grid-template-columns: 1fr; gap: 20px; }
  .vl-footer-links a { min-height: 44px; }
}
@media (max-width: 480px) {
  .vl-topbar { padding: 8px 12px; }
  .vl-brand img { width: 88px; }
  .vl-body .vl-topbar-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vl-topbar, .vl-body .vl-btn { transition: none; } }

/* ---- Login a la izquierda, imágenes del sistema a la derecha ---- */
.vl-layout { width: 100%; max-width: 1180px; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; align-items: center; margin: 0 auto; }
.vl-layout > form { width: 100%; max-width: 440px; }
.vl-main > form { max-width: none; }
.vl-showcase { min-width: 0; }
.vl-showcase-visual { position: relative; width: 100%; max-width: 480px; margin: 0 auto; padding-bottom: 22%; }
.vl-showcase-visual img { display: block; height: auto; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.vl-shot-main { width: 88%; }
.vl-shot-second { position: absolute; right: 0; bottom: 0; width: 56%; box-shadow: 0 12px 30px rgba(22, 35, 74, .10); }
@media (max-width: 1040px) {
  .vl-layout { grid-template-columns: minmax(0, 440px); justify-content: center; }
  .vl-showcase { display: none; }
}

/* ---- Movimiento: una sola secuencia al cargar + respuestas a acciones ---- */
.vl-body .ui-blockui { border-radius: 999px; background: var(--white); opacity: .6; }
.vl-body .vl-field input { transition: border-color .16s ease, box-shadow .16s ease; }
.vl-body .vl-btn:active { transform: scale(.98); }

@keyframes vl-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes vl-slide-in { from { opacity: 0; transform: translateX(32px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes vl-pop { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes vl-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

@media (prefers-reduced-motion: no-preference) {
  .vl-card { animation: vl-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .vl-shot-main { animation: vl-slide-in .8s cubic-bezier(.2, .7, .2, 1) .3s both; }
  .vl-shot-second { animation: vl-pop .7s cubic-bezier(.2, .7, .2, 1) .7s both; }
  .vl-card.is-shake { animation: vl-shake .42s ease; }
}