/* === estilo.css === */
body {
  margin: 0;
  padding: 0;
  background-color: #111;
  color: white;
  font-family: 'Segoe UI', sans-serif;
  width: 300px;
  height: 500px;
overflow-y: auto;

}

#wallet {
  text-align: center;
  padding: 5px 10px 0 10px;
}

#monsterLogo {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 5px;
  display: block;
}

#avatarIcon {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  border: 2px solid white;
}

h1 {
  font-size: 18px;
  margin: 3px 0;
}

h2 {
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 10px;
  color: #ccc;
}

#aliasMostrado {
  font-weight: bold;
  margin-bottom: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

#aliasMostrado img {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid white;
}

button, select, input[type="text"], input[type="password"] {
  border: none;
  border-radius: 6px;
  margin: 3px;
  padding: 5px 8px;
  font-size: 11px;
}

button {
  background-color: #0077cc;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #005fa3;
}

#registroPanel {
  background-color: #222;
  padding: 8px;
  border-radius: 10px;
  margin: 5px auto;
  text-align: center;
}

#registroPanel input, #registroPanel select {
  width: 90%;
  margin: 5px auto;
  display: block;
}

#fraseVisible {
  margin: 6px 0;
  font-size: 12px;
  color: #fff;
}

#fraseAviso {
  font-size: 10px;
  color: #f44;
  margin-top: 4px;
}

#botonesFuncionales {
  display: flex;
  justify-content: space-between;
  margin: 6px auto;
  padding: 0 6px;
  gap: 3px;
  flex-wrap: nowrap;
}

#botonesFuncionales button {
  flex: 1;
  font-size: 9px;
  padding: 3px 0;
  min-width: 48px;
  max-width: 55px;
  text-align: center;
}

#balance {
  display: none;
  justify-content: space-between; /* extremos */
  align-items: center;
  width: 100%;
  margin-top: 8px;
  padding: 0 8px;
  color: #ccc;
  font-size: 12px;
}

#diviBalance {
  font-size: 14px;    
  font-weight: 600;
  margin-left: auto;
  float: right;
}

/* Palabras clave invisibles (para generación aleatoria de semilla) */
#palabrasClave {
  font-size: 0;
  color: transparent;
  height: 0;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  visibility: hidden;
}

/* Panel de ordenamiento de frase semilla */
#ordenFrasePanel {
  display: none;
  background-color: #222;
  padding: 10px;
  border-radius: 10px;
  margin-top: 10px;
  text-align: center;
}

#ordenFrasePanel h3 {
  font-size: 13px;
  margin-bottom: 8px;
  color: #ddd;
}

.ordenPalabra {
  display: inline-block;
  margin: 4px;
  padding: 4px 6px;
  background-color: #444;
  border-radius: 6px;
  font-size: 10px;
  color: white;
  cursor: pointer;
}

.ordenEntrada {
  display: inline-block;
  margin: 4px;
  padding: 4px;
  border-radius: 6px;
  background-color: #333;
}

.ordenEntrada input {
  width: 40px;
  text-align: center;
  font-size: 10px;
  padding: 3px;
  border-radius: 4px;
  border: none;
  background-color: #555;
  color: #fff;
}

/* Botón continuar para frase */
#btnContinuarFrase {
  margin-top: 10px;
  padding: 5px 12px;
  font-size: 11px;
  background-color: #28a745;
  border-radius: 6px;
  color: white;
  cursor: pointer;
}

#btnContinuarFrase:hover {
  background-color: #218838;
}

.divi-linea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 15px 0 15px;
  padding: 6px 0;
  border-top: 1px solid #333;
}

#logoDivi {
  width: 22px !important;   /* más pequeño */
  height: 22px !important;
  object-fit: contain;
  border-radius: 4px;
}

.saldo-divi {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}
.botones-registro {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.botones-registro button {
  flex: 1 1 45%;
  font-size: 10px;
  padding: 5px 4px;
  white-space: nowrap;
}
#bloqueoPanel {
  background-color: #222;
  padding: 15px 10px;
  border-radius: 10px;
  margin: 20px auto;
  text-align: center;
  display: none; /* se activará por JS si hay contraseña */
}

#bloqueoPanel input {
  width: 90%;
  padding: 6px;
  margin-bottom: 8px;
  border-radius: 6px;
  border: none;
  font-size: 11px;
}

#bloqueoPanel button {
  background-color: #0077cc;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
}

#bloqueoPanel button:hover {
  background-color: #005fa3;
}
.oculto {
  display: none;
}
.direccion-divi {
  margin-top: 10px;
  padding: 6px;
  background-color: #222;
  border-radius: 8px;
  font-size: 12px;
  color: #00ffcc;
  word-break: break-all;
}

.password-container {
  position: relative;
  display: flex;
  align-items: center;
}

.password-container input {
  flex: 1;
  padding-right: 30px;
}

.toggle-password {
  position: absolute;
  right: 10px;
  cursor: pointer;
  user-select: none;
}
.panel-oculto {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #222;
  border: 1px solid #555;
  border-radius: 10px;
}

.staking-inputs input {
  width: 100%;
  padding: 6px;
  margin-bottom: 8px;
  border-radius: 6px;
  border: none;
}

.staking-inputs button {
  width: 48%;
  padding: 6px;
  margin: 2px 1%;
  border: none;
  background-color: #5f00ba;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

.mensaje-resultado {
  font-size: 12px;
  margin-top: 8px;
  color: #00ffae;
}


/* === DMW: Indicador persistente de modo (Simulación/Real) === */
#dmwModeIndicator.dmw-mode-indicator{
  position: fixed;
  top: 8px;
  left: 8px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  border-radius: 999px;
  background: rgba(20,20,20,0.35);
  color: #ddd;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  user-select: none;
  pointer-events: none;
  z-index: 9999;
}
#dmwModeIndicator.real{ color:#0ad10a; border-color: rgba(10, 209, 10, .35); }
#dmwModeIndicator.sim{ color:#ff6b6b; border-color: rgba(255, 107, 107, .35); }

/* === DMW: Historial (modal) === */
.dmw-modal-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  z-index: 9998;
}
.dmw-modal{
  width: 90%; max-width: 420px; max-height: 80vh; overflow: hidden;
  background: #111; color: #ddd; border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  display:flex; flex-direction: column;
}
.dmw-modal header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 600;
}
.dmw-modal .dmw-modal-body{ overflow:auto; padding: 8px 12px; }
.dmw-close{ background:none; border:none; color:#ccc; font-size:16px; cursor:pointer; }
.dmw-table{ width:100%; border-collapse:collapse; font-size:12px; }
.dmw-table th,.dmw-table td{
  padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.06); white-space:nowrap;
}
.dmw-txid{ font-family:monospace; font-size:11px; }
.dmw-badge{ font-size:10px; border-radius:999px; padding:2px 6px; border:1px solid transparent; }
.dmw-badge.send{ color:#ff6b6b; border-color:rgba(255,107,107,.3); }
.dmw-badge.receive{ color:#0ad10a; border-color:rgba(10,209,10,.3); }
.dmw-badge.move{ color:#61dafb; border-color:rgba(97,218,251,.3); }
/* Ajuste: que el alias (con padding-left 65px) tenga el mismo ancho visual que la contraseña */
#alias { 
  /* restamos ~50px al 90% para compensar el padding-left inline (65px vs ~15px) */
  width: calc(90% - 80px) !important;
  box-sizing: border-box;
}

/* DMW_AVATAR_FIX_V2: refuerzo táctil para avatar en móvil */
#avatarIcon {
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}

/* DMW avatar/panel hardening */
#avatarIcon{
  pointer-events:auto !important;
  cursor:pointer !important;
  position:relative !important;
  z-index:9999 !important;
  touch-action:manipulation !important;
}
#monsterLogo{
  pointer-events:none !important; /* evita tap shadow sobre el avatar */
}
.panel.oculto{
  display:none !important; /* coherente con el toggle por clase */
}
/* Asegura que el panel pueda reaparecer aunque alguna regla ponga display:none */
#registroPanel:not(.oculto){
  display:block !important;
}
#registroPanel{ /* display:none removed 20251110T175034Z */ }
/* --- DMW avatar fix (top-right) --- */
#avatarIcon{
  position: fixed;      /* se ancla a la ventana, no al flujo */
  top: 12px;            /* sin cambiar tamaños globales */
  right: 12px;          /* lo llevamos al extremo derecho */
  z-index: 1000;        /* por encima del logo */
  margin: 0;            /* evita empujes del flujo original */
}
@media (max-width: 480px){
  #avatarIcon{ top: 10px; right: 10px; } /* pequeño ajuste móvil */
}
/* --- end DMW avatar fix --- */
/* --- DMW avatar to right (inline) --- */
/* Anula el fix anterior si existiera */
#avatarIcon{
  position: static !important;   /* vuelve al flujo normal */
  float: right !important;       /* al extremo derecho en la misma línea */
  margin: 8px 12px 0 0 !important;
  z-index: auto !important;
}
/* Evita que el logo y títulos queden a su lado: fuerzo salto bajo el float */
#monsterLogo, .titulo, .subtitulo{
  clear: both;
}
/* Ajuste fino en pantallas pequeñas */
@media (max-width: 480px){
  #avatarIcon{ margin: 8px 10px 0 0 !important; }
}
/* --- end --- */
/* --- DMW override: empuja ~5mm (≈19px) más a la derecha --- */
#avatarIcon{
  /* seguimos en flujo/float como pediste */
  margin: 8px -7px 0 0 !important; /* antes era 8px 12px 0 0 → 12 - 19 ≈ -7 */
}
@media (max-width: 480px){
  /* un pelín más en móvil para compensar padding del viewport */
  #avatarIcon{ margin: 8px -9px 0 0 !important; }
}
/* --- end --- */
/* --- enforce avatar absolute @ 10px from right/top --- */
#avatarIcon{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  float: none !important;
  margin: 0 !important;
  z-index: 1000; /* sobre el logo, sin cambiar tamaños */
}
/* --- end --- */

/* === DMW_FIX_CONFIRM_20251020 === */
#confirmarFrase{
  pointer-events: auto !important;
  display: inline-block !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}
#resultadoFrase{
  display: block !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}
/* === END DMW_FIX_CONFIRM_20251020 === */

#avatarIcon{ width:40px; height:40px; object-fit:cover; border-radius:50%; position:fixed; top:10px; right:10px; cursor:pointer; border:2px solid white; z-index:9999; pointer-events:auto; }


/* DMW AVATAR CLICK FIX 20251110 */
#avatarIcon{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 99999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* DMW 20251112 — AVATAR TOPMOST: fija posición y clic por encima de todo */
#avatarIcon{
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* el logo no debe interceptar clics del avatar */
#monsterLogo{ pointer-events: none !important; }
/* DMW_PANEL_HIGHLIGHT_20251128 */
#registroPanel {
  border: 2px solid #00ff00;
  box-shadow: 0 0 10px #00ff00;
}


/* DMW_PANEL_FORCE_IMPORTANT_20251204 — asegura posición fija bajo los botones en PWA */


/* DMW_REGPANEL_FLOW_BELOW_BTNS — 20251219
   Hace que el panel de registro se despliegue debajo de los botones (layout normal) */
#registroPanel{
  position: static !important;
  margin: 8px 10px 0 !important;
}

/* DMW_REGPANEL_FLOW_BELOW_BTNS_RESET — 20251219
   Fuerza que el panel de registro sea layout normal debajo de botones,
   anulando cualquier overlay previo (top/left/transform/z-index). */
#registroPanel{
  position: static !important;
  margin: 8px 10px 0 !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  z-index: auto !important;
}

/* DMW_STAKING_REWARDS_DEST_UI_20260103 — selector destino recompensas */
.staking-dest{
  margin: 8px 0 10px 0;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
}
.staking-dest label{
  display:block;
  font-size: 12px;
  opacity: .9;
  margin-bottom: 6px;
}
.staking-dest select{
  width: 100%;
  padding: 6px;
  border-radius: 6px;
  border: none;
  outline: none;
}


/* DMW_STAKING_VAULTINFO_UI_20260103 — caja informativa del total del Vault */
.staking-vaultinfo{
  margin: 8px 0 10px 0;
  padding: 8px;
  background: rgba(0,255,174,0.06);
  border: 1px solid rgba(0,255,174,0.22);
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.staking-vaultinfo label{
  display:block;
  font-size: 12px;
  opacity: .9;
}
.staking-vaultinfo #vaultStatus{
  margin-top: 0;         /* anula el margin-top de .mensaje-resultado */
  color: #00ffae;
  font-weight: 700;
  white-space: nowrap;
}