[v-cloak] {
  display: none;
}

:root {
  --c-login-bg-a: #dfe8f5;
  --c-login-bg-b: #cddaf0;
  --c-shell-dark: #ffffff;
  --c-shell-border: transparent;
  --c-text-main: #1a3450;
  --c-text-soft: #5a7390;
  --c-text-label: #2e4d6a;
  --c-field-bg: #f0f5fb;
  --c-field-border: transparent;
  --c-field-text: #1a3450;
  --c-placeholder: #8aa0b8;
  --c-focus: #2563c0;
  --c-btn-a: #1a5dc4;
  --c-btn-b: #1450ad;
  --c-brand-soft: #6882a0;
  --c-link: #1a5dc4;
  --c-toggle: #1a5dc4;
  /* Visual panel (dark side) */
  --c-visual-bg-a: #0d2137;
  --c-visual-bg-b: #163352;
  --c-visual-bg-c: #0a1c2e;
  --c-visual-text: rgba(255,255,255,0.88);
  --c-visual-soft: rgba(255,255,255,0.55);
  --c-visual-badge-bg: rgba(255,255,255,0.12);
  --c-visual-badge-border: rgba(255,255,255,0.22);
  --c-visual-benefit-bg: rgba(255,255,255,0.10);
  --c-visual-benefit-icon: rgba(255,255,255,0.90);
}

.c-login-body {
  min-height: 100vh;
  margin: 0;
  font-family: "Montserrat", "Segoe UI", sans-serif;
  background: #edf2f9;
}

.c-login {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  padding: 0;
}

.c-login__container {
  max-width: 100%;
  width: 100%;
  padding: 0;
}

.c-login__shell {
  border-radius: 0;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  min-height: 100vh;
  background: transparent;
}

.c-login__visual {
  color: var(--c-visual-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--c-visual-bg-a) 0%, var(--c-visual-bg-b) 60%, var(--c-visual-bg-c) 100%);
}

/* Patrón de puntos sutil */
.c-login__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Brillo suave en la esquina superior */
.c-login__visual::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80,140,230,0.14) 0%, transparent 65%);
  top: -160px;
  right: -160px;
  pointer-events: none;
}

/* Contenido centrado del panel */
.c-login__visual-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.c-login__visual-img {
  width: 200px;
  max-width: 80%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.c-login__visual-tagline {
  margin: 0;
  color: rgba(255,255,255,0.45);
  font-size: 0.80rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}


.c-login__panel {
  padding: 48px 40px;
  background: #edf2f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.c-login__panel > * {
  width: 100%;
  max-width: 400px;
}

/* Animacion de entrada del panel */
@keyframes c-login-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.c-login__panel > * {
  animation: c-login-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.c-login__panel > *:nth-child(1) { animation-delay: 0.05s; }
.c-login__panel > *:nth-child(2) { animation-delay: 0.10s; }
.c-login__panel > *:nth-child(3) { animation-delay: 0.15s; }

/* Animación staggered para botones de acceso rápido */
.c-login__quick-access-btn {
  animation: c-quick-btn-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.c-login__quick-access-btn:nth-child(1) { animation-delay: 0.25s; }
.c-login__quick-access-btn:nth-child(2) { animation-delay: 0.35s; }
.c-login__quick-access-btn:nth-child(3) { animation-delay: 0.45s; }

@keyframes c-quick-btn-enter {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.c-login__title {
  margin: 0 0 6px;
  text-align: center;
  color: var(--c-text-main);
  font-size: 1.90rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.c-login__subtitle {
  margin: 0 0 28px;
  text-align: center;
  color: var(--c-text-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* === SECCIÓN DE ACCESO RÁPIDO === */
.c-login__quick-access {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 32px;
}

.c-login__quick-access-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 100px;
  padding: 14px 10px;
  border-radius: 14px;
  border: 2px solid;
  background: transparent;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

.c-login__quick-access-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.08;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* RH - Azul principal */
.c-login__quick-access-btn--rh {
  color: #1a5dc4;
  border-color: #1a5dc4;
}

.c-login__quick-access-btn--rh:hover,
.c-login__quick-access-btn--rh:focus {
  background: #1a5dc4;
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(26, 93, 196, 0.28);
}

.c-login__quick-access-btn--rh:hover::before {
  opacity: 0;
}

/* MAQUILADORES - Verde */
.c-login__quick-access-btn--maquila {
  color: #16a34a;
  border-color: #16a34a;
}

.c-login__quick-access-btn--maquila:hover,
.c-login__quick-access-btn--maquila:focus {
  background: #16a34a;
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.28);
}

.c-login__quick-access-btn--maquila:hover::before {
  opacity: 0;
}

/* VIGILANCIA - Naranja/Ámbar */
.c-login__quick-access-btn--vigil {
  color: #ea580c;
  border-color: #ea580c;
}

.c-login__quick-access-btn--vigil:hover,
.c-login__quick-access-btn--vigil:focus {
  background: #ea580c;
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(234, 88, 12, 0.28);
}

.c-login__quick-access-btn--vigil:hover::before {
  opacity: 0;
}

.c-login__quick-access-icon {
  font-size: 1.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.c-login__quick-access-label {
  display: block;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: 0.74rem;
  font-weight: 700;
}

/* Fallback para navegadores antiguos */
.c-login__maquiladores-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  margin: -8px auto 16px;
  padding: 0.56rem 0.85rem;
  border-radius: 10px;
  border: 1px solid #c8d9ee;
  background: #f7fbff;
  color: #1b4f96;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.c-login__maquiladores-link:hover,
.c-login__maquiladores-link:focus {
  border-color: #9dc0ea;
  background: #eef6ff;
  color: #163e72;
}

.c-login__alert {
  border: 0;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.c-login__alert.alert-warning {
  background: #e9f3ff;
  color: #214f7d;
}

.c-login__alert.alert-danger {
  background: #ffecec;
  color: #8a2d2d;
}

.c-login__form {
  display: grid;
  gap: 14px;
}

.c-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--c-text-label);
  font-size: 0.86rem;
  font-weight: 600;
}

.c-field__control {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid #d8e4f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 0 14px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.c-field__control:focus-within {
  border-color: var(--c-focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 192, 0.13);
}

.c-field__control i {
  color: #7ea6df;
  min-width: 15px;
  text-align: center;
}

.c-field__control.is-invalid {
  box-shadow: 0 0 0 3px rgba(208, 90, 90, 0.2);
}

.c-field__control .form-control {
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--c-field-text);
  height: 46px;
  min-height: 46px;
  padding: 0;
  font-size: 0.96rem;
}

.c-field__control .form-control::placeholder {
  color: var(--c-placeholder);
}

.c-login .c-field__control input.form-control,
.c-login .c-field__control input.form-control:hover,
.c-login .c-field__control input.form-control:active,
.c-login .c-field__control input.form-control:focus,
.c-login .c-field__control input.form-control:focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.c-login .c-field__control input.form-control:-webkit-autofill,
.c-login .c-field__control input.form-control:-webkit-autofill:hover,
.c-login .c-field__control input.form-control:-webkit-autofill:focus,
.c-login .c-field__control input.form-control:-webkit-autofill:active {
  -webkit-text-fill-color: var(--c-field-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  caret-color: var(--c-field-text);
}

.c-login__credential-decoy {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.c-login__credential-decoy-input {
  width: 1px;
  height: 1px;
  border: 0;
  padding: 0;
  margin: 0;
}

.c-field__toggle {
  border: 0;
  background: transparent;
  color: var(--c-toggle);
  font-size: 0.79rem;
  font-weight: 600;
  border-radius: 6px;
  padding: 6px 4px;
  line-height: 1;
  white-space: nowrap;
}

.c-field__toggle:hover:not(:disabled) {
  background: rgba(47, 111, 205, 0.1);
}

.c-field__toggle:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.c-login__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -2px;
}

.c-login__remember {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.83rem;
  color: #49617e;
  user-select: none;
}

.c-login__remember input {
  margin: 0;
}

.c-login__remembered-users {
  margin-top: 2px;
  margin-bottom: 2px;
}

.c-login__remembered-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.c-login__remembered-label {
  color: #5b738e;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.c-login__remembered-clear {
  border: 0;
  background: transparent;
  color: var(--c-link);
  font-size: 0.79rem;
  font-weight: 600;
  padding: 0;
}

.c-login__remembered-clear:hover:not(:disabled) {
  text-decoration: underline;
}

.c-login__remembered-clear:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.c-login__remembered-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-login__remembered-card {
  border: 1px solid #cad8ec;
  background: #f4f8ff;
  border-radius: 12px;
  min-height: 52px;
  width: 100%;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.c-login__remembered-card:hover:not(:disabled) {
  background: #eaf2ff;
  border-color: #a9c4ea;
  box-shadow: 0 4px 10px rgba(37, 77, 133, 0.12);
}

.c-login__remembered-card:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.c-login__remembered-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  border: 1px solid #bfd0e6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.c-login__remembered-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.c-login__remembered-name {
  color: #26486f;
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-login__remembered-role {
  color: #6a8099;
  font-size: 0.7rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.c-login__link {
  border: 0;
  background: transparent;
  color: var(--c-link);
  font-size: 0.87rem;
  font-weight: 600;
  padding: 0;
}

.c-login__link:hover {
  text-decoration: underline;
}

.c-login__submit {
  margin-top: 6px;
  min-height: 50px;
  border-radius: 10px;
  border: 0;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, var(--c-btn-a) 0%, var(--c-btn-b) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(26, 80, 173, 0.30);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.c-login__submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 80, 173, 0.38);
  filter: brightness(1.06);
}

.c-login__submit:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(26, 80, 173, 0.25);
}

.c-login__submit:disabled {
  opacity: 0.70;
  cursor: not-allowed;
  box-shadow: none;
}

.c-login__webauthn {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.c-login__webauthn-btn {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid #a9bbd7;
  background: #f4f8ff;
  color: #24426e;
  font-weight: 700;
  font-size: 0.9rem;
}

.c-login__webauthn-btn:hover:not(:disabled) {
  background: #eaf2ff;
}

.c-login__webauthn-link {
  min-height: 40px;
  border-radius: 10px;
  border: 1px dashed #9ab1d4;
  background: #ffffff;
  color: #2f5f9d;
  font-weight: 600;
  font-size: 0.84rem;
}

.c-login__webauthn-link:hover:not(:disabled) {
  background: #f7fbff;
}

.c-login__webauthn-btn:disabled,
.c-login__webauthn-link:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ── Facial capture — borde del card de login ── */
.c-login__shell.cf-shell-buscando  { animation: cf-shell-buscando 2.5s ease-in-out infinite; }
.c-login__shell.cf-shell-detectado { animation: cf-shell-detectado .85s ease-in-out infinite; }
.c-login__shell.cf-shell-ok        { animation: cf-shell-ok .5s ease-in-out 3; }
.c-login__shell.cf-shell-rojo      { animation: cf-shell-rojo .5s ease-in-out infinite; }
/* outline no se corta con overflow:hidden */
@keyframes cf-shell-buscando  { 0%,100%{outline:3px solid rgba(100,150,255,.5);outline-offset:2px;box-shadow:0 0 18px rgba(100,150,255,.2)} 50%{outline:4px solid rgba(100,150,255,.9);outline-offset:3px;box-shadow:0 0 35px rgba(100,150,255,.45)} }
@keyframes cf-shell-detectado { 0%,100%{outline:4px solid rgba(255,193,7,.75);outline-offset:2px;box-shadow:0 0 25px rgba(255,193,7,.4)} 50%{outline:6px solid rgba(255,193,7,1);outline-offset:4px;box-shadow:0 0 55px rgba(255,193,7,.75)} }
@keyframes cf-shell-ok        { 0%,100%{outline:4px solid rgba(25,200,100,.8);outline-offset:2px;box-shadow:0 0 28px rgba(25,200,100,.4)} 50%{outline:7px solid rgba(25,200,100,1);outline-offset:5px;box-shadow:0 0 65px rgba(25,200,100,.85)} }
@keyframes cf-shell-rojo      { 0%,100%{outline:4px solid rgba(220,53,69,.75);outline-offset:2px;box-shadow:0 0 25px rgba(220,53,69,.35)} 50%{outline:6px solid rgba(220,53,69,1);outline-offset:4px;box-shadow:0 0 55px rgba(220,53,69,.75)} }

/* Dim overlay cuando facial está activo */
body.cf-facial-activo::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 10990;
  pointer-events: none;
  animation: cf-dim-in .4s ease forwards;
}
@keyframes cf-dim-in { from{opacity:0} to{opacity:1} }
body.cf-facial-activo .c-login {
  position: relative;
  z-index: 10995;
}

/* Hint facial — centro exacto de la pantalla */
.cf-facial-hint {
  display: none;
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  background: rgba(10,22,40,.94);
  color: #fff;
  padding: 16px 36px;
  border-radius: 40px;
  font-size: 1.05rem;
  font-weight: 500;
  white-space: nowrap;
  z-index: 12000;
  box-shadow: 0 8px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.16);
  transition: background .3s, border-color .3s;
  pointer-events: none;
  text-align: center;
  min-width: 220px;
}
.cf-facial-hint.cf-alerta {
  background: rgba(180,20,30,.94);
  border-color: rgba(220,53,69,.6);
  animation: cf-hint-shake .4s ease-in-out;
}
@keyframes cf-hint-shake {
  0%,100% { transform: translate(-50%,-50%); }
  25%     { transform: translate(calc(-50% - 9px),-50%); }
  75%     { transform: translate(calc(-50% + 9px),-50%); }
}
.cf-progress-dots {
  display: block;
  letter-spacing: 5px;
  font-size: 1.2rem;
  margin-top: 6px;
  opacity: .85;
}

/* Móvil: más compacto */
@media (max-width: 600px), (max-height: 750px) {
  .cf-facial-hint {
    padding: 10px 22px;
    font-size: .88rem;
    min-width: unset;
    border-radius: 30px;
  }
}

/* ── Facial capture — overlay fullscreen (legado, conservado) ── */
.c-facial-capture {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: #0a1628;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  pointer-events: auto;
  padding-top: 48px;
  gap: 0;
  transition: background .5s;
}
.c-facial-capture          { animation: cf-bg-buscando 3s ease-in-out infinite; }
.c-facial-capture.cf-bg-detectado { animation: cf-bg-amarillo 1s ease-in-out infinite; }
.c-facial-capture.cf-bg-ok        { animation: cf-bg-verde .5s ease-in-out 2; }
.c-facial-capture.cf-bg-rojo      { animation: cf-bg-rojo .6s ease-in-out infinite; }
@keyframes cf-bg-buscando  { 0%,100%{background:#0a1628;box-shadow:inset 0 0 0 4px rgba(255,255,255,.04)} 50%{background:#0d1f3a;box-shadow:inset 0 0 0 4px rgba(255,255,255,.09)} }
@keyframes cf-bg-amarillo  { 0%,100%{background:#1a1400;box-shadow:inset 0 0 0 7px rgba(255,193,7,.55)} 50%{background:#2a2000;box-shadow:inset 0 0 0 10px rgba(255,193,7,.95)} }
@keyframes cf-bg-verde     { 0%,100%{background:#001a0a;box-shadow:inset 0 0 0 7px rgba(25,200,100,.6)} 50%{background:#003015;box-shadow:inset 0 0 0 12px rgba(25,200,100,1)} }
@keyframes cf-bg-rojo      { 0%,100%{background:#1a0005;box-shadow:inset 0 0 0 7px rgba(220,53,69,.6)} 50%{background:#2a000a;box-shadow:inset 0 0 0 12px rgba(220,53,69,1)} }

/* Título */
.c-facial-capture__title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 16px;
  opacity: .85;
  letter-spacing: .3px;
}

/* Wrapper cámara */
.c-facial-capture__wrap {
  position: relative;
  width: calc(100% - 48px);
  max-width: 340px;
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .4s;
  box-shadow: 0 0 0 3px rgba(255,255,255,.15), 0 0 30px rgba(111,106,248,.3);
}
.c-facial-capture__wrap.cf-detectado { box-shadow: 0 0 0 3px rgba(255,193,7,.8), 0 0 30px rgba(255,193,7,.4); animation: cf-pulse-amarillo 1s ease-in-out infinite; }
.c-facial-capture__wrap.cf-ok        { box-shadow: 0 0 0 4px rgba(25,200,100,.9), 0 0 40px rgba(25,200,100,.5); animation: cf-pulse-verde .5s ease-in-out 2; }
.c-facial-capture__wrap.cf-rojo      { box-shadow: 0 0 0 4px rgba(220,53,69,.9),  0 0 40px rgba(220,53,69,.5);  animation: cf-pulse-rojo .6s ease-in-out 3; }
@keyframes cf-pulse-amarillo { 0%,100%{box-shadow:0 0 0 3px rgba(255,193,7,.8),0 0 30px rgba(255,193,7,.3)} 50%{box-shadow:0 0 0 5px rgba(255,193,7,1),0 0 50px rgba(255,193,7,.6)} }
@keyframes cf-pulse-verde    { 0%,100%{box-shadow:0 0 0 4px rgba(25,200,100,.9),0 0 40px rgba(25,200,100,.4)} 50%{box-shadow:0 0 0 8px rgba(25,200,100,1),0 0 60px rgba(25,200,100,.8)} }
@keyframes cf-pulse-rojo     { 0%,100%{box-shadow:0 0 0 4px rgba(220,53,69,.9),0 0 40px rgba(220,53,69,.4)}  50%{box-shadow:0 0 0 7px rgba(220,53,69,1),0 0 60px rgba(220,53,69,.8)} }

/* Video visible */
.c-facial-capture__video {
  width: 100%;
  display: block;
  transform: scaleX(-1);
  border-radius: 20px;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* Línea de escaneo */
.c-facial-capture__scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(111,106,248,.8), rgba(255,255,255,.9), rgba(111,106,248,.8), transparent);
  box-shadow: 0 0 10px rgba(111,106,248,.8);
  animation: cf-scan 2s linear infinite;
  pointer-events: none; z-index: 4;
}
@keyframes cf-scan { 0%{top:0%;opacity:1} 90%{top:100%;opacity:1} 100%{top:100%;opacity:0} }
.c-facial-capture__wrap.cf-ok .c-facial-capture__scan { display: none; }

/* Guía oval */
.c-facial-capture__guide {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  width: 60%; aspect-ratio: 3/4;
  border: 2px dashed rgba(255,255,255,.25);
  border-radius: 50%;
  pointer-events: none; z-index: 3;
  transition: border-color .4s;
}
.c-facial-capture__wrap.cf-detectado .c-facial-capture__guide { border-color: rgba(255,193,7,.7); border-style: solid; }
.c-facial-capture__wrap.cf-ok        .c-facial-capture__guide { border-color: rgba(25,200,100,.9); border-style: solid; }
.c-facial-capture__wrap.cf-rojo      .c-facial-capture__guide { border-color: rgba(220,53,69,.8); border-style: solid; }

/* Progreso de match */
.c-facial-capture__progress {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.6); color: #fff;
  font-size: .85rem; font-weight: 600; letter-spacing: 2px;
  padding: 4px 14px; border-radius: 20px;
  pointer-events: none; z-index: 5;
  display: none;
}
.c-facial-capture__wrap.cf-detectado .c-facial-capture__progress { display: block; }

/* Banner de acción sobre el video */
.c-facial-capture__banner {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.72);
  color: #fff; font-size: 1.1rem; font-weight: 700;
  text-align: center; padding: 14px 12px;
  animation: cf-banner-pulse 1s ease-in-out infinite;
  z-index: 5; display: none;
}
@keyframes cf-banner-pulse { 0%,100%{background:rgba(0,0,0,.72)} 50%{background:rgba(255,193,7,.25)} }
.c-facial-capture__banner.visible { display: block; }

/* Hint inferior */
.c-facial-capture__hint {
  margin-top: 18px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  padding: 8px 20px;
  background: rgba(255,255,255,.08);
  border-radius: 24px;
  min-width: 200px;
  transition: background .3s, font-size .3s;
}
.c-facial-capture__hint.cf-alerta {
  background: rgba(255,193,7,.2);
  font-size: 1.15rem;
  animation: cf-hint-pulse 1s ease-in-out infinite;
}
@keyframes cf-hint-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }

/* Botón cancelar */
.c-facial-capture__cancel {
  margin-top: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.7);
  border-radius: 20px;
  padding: 7px 24px;
  font-size: .85rem;
  cursor: pointer;
}
.c-facial-capture__cancel:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Legado — mantener compatibilidad por si algo lo usa */
.c-facial-capture__video--hidden { display: none; }
.c-facial-capture__focus-only    { display: none; }
.c-facial-capture__panel         { display: none; }
.c-facial-capture__btn           { display: none; }

.c-login__foot {
  margin: 18px 0 0;
  text-align: center;
  color: var(--c-brand-soft);
  font-size: 0.79rem;
}

.c-recovery-modal {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
}

.c-recovery-modal .modal-header {
  border-bottom: 1px solid #e5ebf3;
}

.c-recovery-modal .modal-title {
  font-weight: 700;
  color: #203a53;
}

.c-recovery-modal .modal-body {
  color: #3c5870;
  font-size: 0.92rem;
}

.c-recovery-steps {
  margin: 0 0 14px;
  padding-left: 18px;
}

.c-recovery-note {
  border: 1px solid #d6e3ef;
  border-radius: 10px;
  background: #f5f9ff;
  padding: 9px 11px;
  margin-bottom: 12px;
}

.c-recovery-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.c-recovery-action,
.c-recovery-copy {
  border: 0;
  border-radius: 10px;
  min-height: 40px;
  color: #fff;
  font-weight: 600;
  width: 100%;
}

.c-recovery-action--wa {
  background: #1f8f5f;
}

.c-recovery-action--mail,
.c-recovery-copy {
  background: #2f61b8;
}

.c-recovery-empty {
  color: #6b839b;
  font-size: 0.83rem;
}

.c-recovery-copy:hover,
.c-recovery-action:hover {
  filter: brightness(0.97);
}

.c-recovery-modal .btn-close:focus {
  box-shadow: none;
}

/* Logo visible solo en móvil */
.c-login__mobile-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.c-login__mobile-brand img {
  width: 160px;
  height: auto;
  opacity: 0.92;
}

@media (max-width: 991.98px) {
  .c-login__panel {
    padding: 48px 28px;
  }

  .c-login__title {
    font-size: 1.65rem;
  }
}

@media (max-width: 575.98px) {
  .c-login__shell {
    border-radius: 18px;
  }

  .c-login__title {
    font-size: 1.6rem;
  }

  .c-login__subtitle {
    font-size: 0.9rem;
  }

  .c-facial-capture__focus-only {
    width: 190px;
    height: 190px;
  }

  .c-facial-capture__cross {
    width: 120px;
    height: 120px;
  }

  .c-login__remembered-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Responsive para botones de acceso rápido en móvil */
  .c-login__quick-access {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 24px;
  }

  .c-login__quick-access-btn {
    min-height: 90px;
    padding: 10px 6px;
    gap: 6px;
  }

  .c-login__quick-access-icon {
    font-size: 1.6rem;
  }

  .c-login__quick-access-label {
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-login__submit,
  .c-field__control {
    transition: none;
  }
}