/* Entrar con la huella en el movil (app-huella.js). Mismo aspecto que en Aura (aura-pwa.css), con prefijo propio. Identico en Core y Nova. */
.avb-hu-modal, .avb-hu-bloqueo {
  --hu-marca: var(--avb-accion, #3580BB);
  --hu-marca-osc: var(--avb-accion-osc, #255B83);
  --hu-tinta: #1e293b;
  --hu-suave: #64748b;
  --hu-fondo: #f4f6fb;
  --hu-linea: #e2e8f0;
  --hu-ok: #1f7a52;
}

/* ---------- Cuadro "Entra con tu huella" y "Tus telefonos con huella" ---------- */
.avb-hu-modal .modal-dialog { max-width: 380px; margin-left: auto; margin-right: auto; padding: 0 16px; }
.avb-hu-modal .modal-content { overflow: hidden; border: 0; border-radius: 24px; box-shadow: 0 24px 60px -20px rgba(15, 41, 61, .5); }
.avb-hu-modal__cuerpo {
  display: flex; flex-direction: column; align-items: center; padding: 30px 24px 8px;
  color: var(--hu-tinta); text-align: center; background: radial-gradient(120% 60% at 50% 0%, #e8f2fa 0%, #fff 70%);
}
.avb-hu-modal__cuerpo--lista { padding-bottom: 4px; max-height: calc(100vh - 150px); overflow-y: auto; }
.avb-hu-modal__icono {
  display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 16px; border-radius: 50%; color: #fff; font-size: 34px;
  background: linear-gradient(135deg, var(--hu-marca), var(--hu-marca-osc));
  box-shadow: 0 0 0 8px rgba(53, 128, 187, .12), 0 12px 24px -10px rgba(37, 91, 131, .7);
}
.avb-hu-modal__titulo { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--hu-tinta); }
.avb-hu-modal__texto { margin: 8px 0 0; color: var(--hu-suave); font-size: 14.5px; line-height: 1.5; }
.avb-hu-modal__puntos {
  display: grid; gap: 10px; width: 100%; margin: 18px 0 0; padding: 14px 16px; border-radius: 16px;
  background: var(--hu-fondo); list-style: none; text-align: left;
}
.avb-hu-modal__puntos li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.4; }
.avb-hu-modal__puntos i { flex: 0 0 18px; margin-top: 2px; color: var(--hu-marca-osc); text-align: center; }
.avb-hu-modal__estado {
  width: 100%; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; color: #9a3a3a; background: #fbeeee; font-size: 13.5px; line-height: 1.4;
}
.avb-hu-modal__estado.is-ok { color: var(--hu-ok); background: #e6f5ee; }
.avb-hu-modal__estado[hidden] { display: none; }
.avb-hu-modal__pie { display: grid; gap: 6px; padding: 16px 24px 20px; background: #fff; }
.avb-hu-modal__activar {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; border: 0; border-radius: 16px;
  color: #fff; background: var(--hu-marca); font-size: 16px; font-weight: 600; box-shadow: 0 4px 12px rgba(53, 128, 187, .30);
}
.avb-hu-modal__activar:active { background: var(--hu-marca-osc); }
.avb-hu-modal__activar:disabled { opacity: .7; }
.avb-hu-modal__otra { min-height: 44px; border: 0; border-radius: 12px; color: var(--hu-suave); background: transparent; font-size: 14.5px; font-weight: 600; }
.avb-hu-modal__otra[hidden] { display: none; }
.avb-hu-modal__otra:focus-visible, .avb-hu-modal__activar:focus-visible { outline: 2px solid var(--hu-marca-osc); outline-offset: 2px; }

/* ---------- Lista de telefonos ---------- */
.avb-hu-tel { display: grid; gap: 8px; width: 100%; margin: 18px 0 0; padding: 0; list-style: none; text-align: left; }
.avb-hu-tel__item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 10px 12px; padding: 14px;
  border: 1px solid var(--hu-linea); border-radius: 16px; background: #fff;
}
.avb-hu-tel__item.is-este { border-color: rgba(53, 128, 187, .45); background: #f4f9fd; }
.avb-hu-tel__icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--hu-marca-osc); background: #e8f2fa; font-size: 18px; }
.avb-hu-tel__datos { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.avb-hu-tel__datos strong { color: var(--hu-tinta); font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.avb-hu-tel__este { padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--hu-marca); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.avb-hu-tel__datos small { flex-basis: 100%; color: var(--hu-suave); font-size: 12.5px; line-height: 1.4; }
.avb-hu-tel__quitar {
  grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1px solid #f0d4d4; border-radius: 12px; color: #a54242; background: #fff; font-size: 13.5px; font-weight: 600;
}
.avb-hu-tel__quitar:active { background: #fff3f2; }
.avb-hu-tel__quitar.is-seguro { color: #fff; background: #c0392b; border-color: #c0392b; }
.avb-hu-tel__quitar:disabled { opacity: .6; }
.avb-hu-tel__quitar:focus-visible { outline: 2px solid #a54242; outline-offset: 2px; }
.avb-hu-tel__vacio { width: 100%; margin: 18px 0 0; padding: 14px 16px; border-radius: 16px; color: var(--hu-suave); background: var(--hu-fondo); font-size: 14px; text-align: center; }
.avb-hu-tel__vacio[hidden] { display: none; }

/* ---------- Opciones en el panel de usuario ---------- */
.avb-hu-menu { display: grid; gap: 6px; width: 100%; margin: 4px 0 14px; padding: 0 12px; }
.avb-hu-menu[hidden] { display: none; }
.avb-hu-menu__opcion {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid #e2e8f0; border-radius: 12px;
  color: #344767; background: #fff; font-size: 14px; font-weight: 600; text-align: left;
}
.avb-hu-menu__opcion i { width: 20px; color: var(--avb-accion, #3580BB); text-align: center; font-size: 16px; }
.avb-hu-menu__opcion:active, .avb-hu-menu__opcion:focus-visible { background: #eef5fb; }

/* ---------- Pantalla de desbloqueo ---------- */
/* En CLARO, como el resto de Core y Nova (en Aura es azul oscuro): mismo fondo que el cuadro "Entra con tu huella", texto oscuro y la huella en el azul de accion. */
body.avb-hu-bloqueando { overflow: hidden; }
.avb-hu-bloqueo {
  position: fixed; inset: 0; z-index: 2100; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 18vh) 24px calc(env(safe-area-inset-bottom, 0px) + 28px);
  color: var(--hu-tinta);
  background: radial-gradient(120% 45% at 50% 0%, #e8f2fa 0%, rgba(232, 242, 250, 0) 70%), #fff;
}
.avb-hu-bloqueo__contenido { display: flex; flex-direction: column; align-items: center; }
.avb-hu-bloqueo__avatar {
  display: grid; place-items: center; width: 76px; height: 76px; border: 2px solid rgba(53, 128, 187, .25); border-radius: 50%;
  color: var(--hu-marca-osc); background: #e8f2fa; font-size: 26px; font-weight: 700; letter-spacing: .02em;
}
.avb-hu-bloqueo__titulo { margin: 18px 0 0; color: var(--hu-tinta); font-size: 26px; font-weight: 700; letter-spacing: -.01em; text-align: center; }
.avb-hu-bloqueo__texto { margin: 6px 0 0; color: var(--hu-suave); font-size: 15px; text-align: center; }
.avb-hu-bloqueo__huella {
  display: grid; place-items: center; width: 96px; height: 96px; margin-top: 44px; border: 0; border-radius: 50%; color: #fff; font-size: 46px;
  background: linear-gradient(135deg, var(--hu-marca), var(--hu-marca-osc));
  box-shadow: 0 0 0 10px rgba(53, 128, 187, .10), 0 0 0 22px rgba(53, 128, 187, .05), 0 12px 24px -10px rgba(37, 91, 131, .7);
  -webkit-tap-highlight-color: transparent; transition: transform .15s ease, background .15s ease;
}
.avb-hu-bloqueo__huella:active { transform: scale(.95); }
.avb-hu-bloqueo__huella:focus-visible { outline: 3px solid var(--hu-marca-osc); outline-offset: 6px; }
.avb-hu-bloqueo__huella.is-leyendo { animation: avb-hu-latido 1.2s ease-in-out infinite; }
.avb-hu-bloqueo__huella.is-ok { background: #2e9b6a; animation: none; }
@keyframes avb-hu-latido {
  0%, 100% { box-shadow: 0 0 0 10px rgba(53, 128, 187, .10), 0 0 0 22px rgba(53, 128, 187, .05), 0 12px 24px -10px rgba(37, 91, 131, .7); }
  50% { box-shadow: 0 0 0 16px rgba(53, 128, 187, .16), 0 0 0 32px rgba(53, 128, 187, .07), 0 12px 24px -10px rgba(37, 91, 131, .7); }
}
.avb-hu-bloqueo__estado { max-width: 300px; margin: 26px 0 0; padding: 10px 14px; border-radius: 12px; color: #9a3a3a; background: #fbeeee; font-size: 14px; line-height: 1.4; text-align: center; }
.avb-hu-bloqueo__estado[hidden] { display: none; }
.avb-hu-bloqueo__otra { min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; color: var(--hu-marca-osc); background: transparent; font-size: 15px; font-weight: 600; }
.avb-hu-bloqueo__otra:active { background: #eef5fb; }
.avb-hu-bloqueo__otra:focus-visible { outline: 2px solid var(--hu-marca-osc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .avb-hu-bloqueo__huella.is-leyendo { animation: none; }
}