/* --- NUEVO DISEÑO FULLSCREEN CON IMAGEN Y TEXTO ABAJO --- */
/* --- NUEVO DISEÑO FULLSCREEN VERDE UNIFORME --- */
.welcome-full-bg {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%; height: 100vh;
  overflow: hidden;
  z-index: 200;
  /* Sin background extra, solo la imagen */
}
.bg-img-full {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100vh;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.5) contrast(1.1) grayscale(0.2) hue-rotate(-30deg) saturate(1.5);
  opacity: 0.7;
}
.welcome-bottom-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 0 1.2rem 2.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  box-sizing: border-box;
}
.welcome-main-title {
  color: #fff;
  font-size: 2.1rem;
  font-weight: bold;
  margin-bottom: 0.7rem;
  text-shadow: 0 2px 12px #000a;
  text-align: left;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}
.welcome-sub {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 2.2rem;
  text-shadow: 0 2px 8px #000a;
  text-align: left;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}
.welcome-user-select label {
  color: #00e676;
  font-size: 1.1rem;
  margin-bottom: 0.7rem;
  display: block;
  text-align: left;
  font-weight: 600;
  text-shadow: 0 0 8px #00e67633;
}
.welcome-user-select select {
  padding: 1rem 1.2rem;
  border-radius: 14px;
  border: 2px solid #00e67644;
  font-size: 1.1rem;
  background: #1a1a1a;
  color: #fff;
  margin-bottom: 2.2rem;
  box-shadow: 0 4px 16px #00e67633, inset 0 1px 3px #00e67622;
  outline: none;
  min-width: 280px;
  max-width: 320px;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2300e676" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 20px;
  padding-right: 2.8rem;
}
.welcome-user-select select:hover {
  border-color: #00e676;
  box-shadow: 0 6px 20px #00e67644, inset 0 1px 3px #00e67622;
}
.welcome-user-select select:focus {
  border-color: #00e676;
  box-shadow: 0 8px 24px #00e67655;
}
.welcome-btn-main {
  background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
  color: #181818;
  border: none;
  border-radius: 16px;
  padding: 1.2rem 2.2rem;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 24px #00e67655, 0 1px 3px #fff6;
  transition: all 0.3s ease;
  width: 100%;
  margin-bottom: 0.8rem;
  max-width: 320px;
  letter-spacing: 0.5px;
}
.welcome-btn-main:hover {
  background: linear-gradient(135deg, #00c853 0%, #00a840 100%);
  box-shadow: 0 6px 32px #00e67666, 0 2px 8px #0004;
  transform: translateY(-2px);
}
.welcome-btn-main:active {
  transform: translateY(0);
}
/* --- PANTALLA DE BIENVENIDA SIMPLE --- */
.simple-welcome-bg {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%; height: 100vh;
  overflow: hidden;
  z-index: 200;
}
.bg-img {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100vh;
  object-fit: cover;
  z-index: 1;
}
.simple-welcome-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  background: none;
}
.simple-title {
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 2.5rem;
  text-shadow: 0 2px 24px #000a;
  text-align: center;
}
.simple-user-select label {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 0.7rem;
  display: block;
  text-align: center;
}
.simple-user-select select {
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  border: none;
  font-size: 1.1rem;
  background: #232323cc;
  color: #fff;
  margin-bottom: 2.2rem;
  box-shadow: 0 2px 12px #0006;
  outline: none;
  min-width: 220px;
  max-width: 320px;
}
.simple-btn {
  background: #00e676;
  color: #181818;
  border: none;
  border-radius: 16px;
  padding: 1.1rem 2.2rem;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 24px #00e67644;
  transition: background 0.2s;
  width: 220px;
}
.simple-btn:hover {
  background: #00c853;
}
.fullscreen-welcome {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100vh;
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 0 3.5rem 0;
  background: #111;
  z-index: 200;
}
.fullscreen-welcome .decor-shapes {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100vh;
}
.fullscreen-welcome .alt-title {
  margin-top: 260px;
  margin-left: 2.2rem;
  font-size: 2.3rem;
  text-align: left;
}
.fullscreen-welcome #userSelectWrap {
  margin-left: 2.2rem;
  margin-bottom: 1.2rem;
  width: calc(100% - 4.4rem);
  max-width: 400px;
}
.fullscreen-welcome .btn-exchange {
  margin-left: 2.2rem;
  margin-bottom: 2.5rem;
  width: calc(100% - 4.4rem);
  max-width: 400px;
  font-size: 1.25rem;
  border-radius: 16px;
  box-shadow: 0 8px 40px #00ff7f33, 0 1.5px 0 #baff6b;
}
.fullscreen-welcome .anywhere {
  font-size: 1.3em;
}
.fullscreen-welcome .decor-shapes {
  z-index: 1;
}
/* --- LOGIN / WELCOME UNIFICADO --- */
.login-bg, .welcome-bg, .wallet-bg {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  background: linear-gradient(135deg, #181818 70%, #232323 100%);
  overflow: hidden;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login-glass, .welcome-glass, .wallet-glass, .form-card, .wallet-balance-card {
  background: rgba(30,32,40,0.82);
  box-shadow: 0 8px 32px #000a, 0 1.5px 0 #00e67633;
  border-radius: 22px;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1.5px solid #23232399;
}
.wallet-balance-card {
  margin: 0 auto 1.5rem auto;
  padding: 2.5rem 1.5rem 1.5rem 1.5rem;
  max-width: 100%;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.08) 0%, rgba(0, 200, 83, 0.05) 100%), rgba(30,32,40,0.82);
  border: 2px solid #00e67644;
  box-shadow: 0 8px 32px #00e67622, 0 1px 6px #00000022;
}
.wallet-balance-label {
  color: #00e676;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  font-weight: 600;
  text-shadow: 0 0 8px #00e67633;
  letter-spacing: 0.5px;
}
.wallet-balance-value {
  color: #fff;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 4px 16px #00e67644, 0 2px 8px #00000044;
  font-family: 'Courier New', monospace;
}
.wallet-header {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 1.5rem auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.2rem 0.5rem 1.2rem;
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.05) 0%, rgba(0, 200, 83, 0.02) 100%);
  border-radius: 16px;
  border-bottom: 2px solid #00e67633;
  margin-bottom: 2rem;
}
.wallet-logo {
  font-size: 1.3rem;
  color: #00e676;
  font-weight: bold;
  text-shadow: 0 0 8px #00e67633;
  letter-spacing: 1px;
}
.wallet-user {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.wallet-user #saludoUsuario {
  color: #b2ffb2;
  font-size: 1rem;
  font-weight: 500;
  text-shadow: 0 0 4px #00e67622;
}
.wallet-btn-logout {
  background: #1a1a1a;
  color: #ff5252;
  border: 2px solid #ff525244;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 4px 12px #ff525233;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wallet-btn-logout:hover {
  background: #ff5252;
  color: #fff;
  border-color: #ff5252;
  box-shadow: 0 6px 20px #ff525244;
  transform: scale(1.1);
}
.wallet-btn-logout:active {
  transform: scale(0.95);
}
.wallet-main {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 1.2rem;
}
.wallet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2.2rem;
}
.wallet-action-btn {
  flex: 1 1 45%;
  background: linear-gradient(135deg, #232323 0%, #2a2a2a 100%);
  color: #fff;
  border: 2px solid #333;
  border-radius: 16px;
  padding: 1.2rem 0.7rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px #00e67611;
  transition: all 0.3s ease;
  min-width: 120px;
  margin-bottom: 0.8rem;
}
.wallet-action-btn:hover {
  background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
  color: #181818;
  border-color: #00e676;
  box-shadow: 0 6px 20px #00e67644, 0 0 20px #00e67633;
  transform: translateY(-2px);
}
.wallet-action-btn:active {
  transform: translateY(0);
}
.wallet-action-ingreso {
  background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
  color: #181818;
  border: none;
  box-shadow: 0 4px 16px #00e67644;
}
.wallet-action-ingreso:hover {
  box-shadow: 0 6px 24px #00e67655;
}
.wallet-movimientos {
  background: linear-gradient(135deg, #232323 0%, #1a1a1a 100%);
  border-radius: 18px;
  box-shadow: 0 4px 16px #0008;
  border: 1px solid #333;
  padding: 1.5rem 1.2rem 1.8rem 1.2rem;
  margin-bottom: 2.5rem;
}
.wallet-mov-title {
  color: #00e676;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  text-shadow: 0 0 8px #00e67633;
  letter-spacing: 0.5px;
}
#wallet-mov-list {
  min-height: 48px;
  margin-bottom: 1.2rem;
}
.wallet-btn-resumen {
  width: 100%;
  background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
  color: #181818;
  border: none;
  border-radius: 14px;
  padding: 1.1rem;
  font-size: 1.1rem;
  font-weight: bold;
  box-shadow: 0 4px 16px #00e67644;
  transition: all 0.3s ease;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.wallet-btn-resumen:hover {
  background: linear-gradient(135deg, #00c853 0%, #00a840 100%);
  box-shadow: 0 6px 24px #00e67655;
  transform: translateY(-2px);
}
.wallet-btn-resumen:active {
  transform: translateY(0);
}
/* --- INPUTS Y SELECTS --- */
input, select, textarea {
  font-size: 16px !important;
  background: #1a1a1a;
  color: #fff;
  border: 2px solid #333;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px #0005, inset 0 1px 2px #00e67611;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s ease;
}
input:hover, select:hover, textarea:hover {
  border-color: #00e67644;
}
input:focus, select:focus, textarea:focus {
  border: 2px solid #00e676;
  background: #232323;
  box-shadow: 0 4px 16px #00e67633, inset 0 1px 2px #00e67611;
}
input::placeholder {
  color: #666;
}
label {
  color: #00e676;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
  text-shadow: 0 0 4px #00e67622;
}
@media (max-width: 600px) {
  .wallet-header, .wallet-main {
    max-width: 100%;
    padding-left: calc(0.5rem + env(safe-area-inset-left));
    padding-right: calc(0.5rem + env(safe-area-inset-right));
  }
  .wallet-balance-card, .wallet-movimientos {
    max-width: 100%;
    width: calc(100% - (2 * 0.7rem));
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
}
/* --- NUEVO DISEÑO TIPO CAPTURA --- */
.alt-welcome {
  background: #111;
  border-radius: 28px;
  box-shadow: 0 4px 32px #000a;
  padding: 2.5rem 1.2rem 2.2rem 1.2rem;
  text-align: left;
  max-width: 340px;
  width: 100%;
  position: relative;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.decor-shapes {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.shape.star {
  position: absolute; left: 18px; top: 32px;
  width: 32px; height: 32px;
  background: none;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #baff6b, 0 0 0 0 #fff;
}
.shape.bar {
  position: absolute; left: 110px; top: 38px;
  width: 70px; height: 10px;
  background: #3a7cff;
  border-radius: 8px;
  transform: rotate(30deg);
}
.shape.dot {
  position: absolute; right: 32px; top: 54px;
  width: 22px; height: 22px;
  background: #ffe3b2;
  border-radius: 50%;
}
.shape.flower {
  position: absolute; left: 50%; top: 120px;
  width: 90px; height: 90px;
  transform: translateX(-50%);
  z-index: 2;
}
.shape.flower .petal {
  position: absolute;
  width: 32px; height: 16px;
  background: #e6d6ff;
  border-radius: 16px 16px 16px 16px;
  left: 29px; top: 0;
  transform-origin: 16px 40px;
}
.shape.flower .petal:nth-child(1) { transform: rotate(0deg) translateY(-24px); }
.shape.flower .petal:nth-child(2) { transform: rotate(45deg) translateY(-24px); }
.shape.flower .petal:nth-child(3) { transform: rotate(90deg) translateY(-24px); }
.shape.flower .petal:nth-child(4) { transform: rotate(135deg) translateY(-24px); }
.shape.flower .petal:nth-child(5) { transform: rotate(180deg) translateY(-24px); }
.shape.flower .petal:nth-child(6) { transform: rotate(225deg) translateY(-24px); }
.shape.flower .petal:nth-child(7) { transform: rotate(270deg) translateY(-24px); }
.shape.flower .petal:nth-child(8) { transform: rotate(315deg) translateY(-24px); }
.shape.flower .center {
  position: absolute; left: 50%; top: 50%;
  width: 24px; height: 24px;
  background: #e6d6ff;
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.shape.diamond {
  position: absolute; left: 70%; top: 180px;
  width: 32px; height: 32px;
  background: #baff6b;
  transform: rotate(45deg);
  border-radius: 8px;
}
.alt-title {
  font-size: 2.1rem;
  color: #fff;
  margin-bottom: 1.2rem;
  font-weight: bold;
  letter-spacing: 1px;
  margin-top: 220px;
  z-index: 2;
  text-align: left;
}
.anywhere {
  color: #baff6b;
  font-weight: bold;
  text-shadow: 0 0 8px #baff6b99;
}
.btn-exchange {
  background: #baff6b;
  color: #181818;
  border: none;
  border-radius: 12px;
  padding: 1.1rem 2.2rem;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px #baff6b44;
  margin-top: 2.2rem;
  width: 100%;
  z-index: 2;
  transition: background 0.2s;
}
.btn-exchange:hover {
  background: #a3e635;
}
/* --- NUEVO DISEÑO PANTALLA DE CARGA --- */
.welcome-bg {
  background: linear-gradient(135deg, #0a1837 60%, #0e2a5e 100%);
}
.new-welcome {
  background: rgba(10,24,55,0.95);
  box-shadow: 0 4px 32px #0e2a5e99;
  border-radius: 24px;
  padding: 2.5rem 2rem 2.2rem 2rem;
  text-align: center;
  max-width: 340px;
  width: 100%;
  position: relative;
}
.face-scan-anim {
  width: 120px;
  height: 180px;
  margin: 0 auto;
  position: relative;
  margin-top: 1.2rem;
}
.face-outline {
  width: 100%;
  height: 100%;
  border: 2px solid #3a7cff;
  border-radius: 40% 40% 50% 50%/50% 50% 60% 60%;
  box-shadow: 0 0 32px #3a7cff55, 0 0 64px #3a7cff22;
  position: absolute;
  left: 0; top: 0;
}
.scan-bar {
  width: 80%;
  height: 6px;
  background: linear-gradient(90deg, #3a7cff 0%, #00e6ff 100%);
  border-radius: 6px;
  position: absolute;
  left: 10%;
  top: 0;
  animation: scan-move 2.2s cubic-bezier(.4,0,.2,1) infinite alternate;
  box-shadow: 0 0 16px #00e6ff99;
}
@keyframes scan-move {
  0% { top: 10px; opacity: 0.7; }
  50% { opacity: 1; }
  100% { top: 150px; opacity: 0.7; }
}
.glow-blue {
  color: #3a7cff;
  text-shadow: 0 0 16px #3a7cff99, 0 0 32px #3a7cff44;
}
/* Pantalla de bienvenida */
.welcome-bg {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #232323 60%, #00e676 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.welcome-card {
  background: #181818ee;
  border-radius: 18px;
  box-shadow: 0 4px 24px #000a;
  padding: 2.5rem 2rem 2.2rem 2rem;
  text-align: center;
  max-width: 340px;
  width: 100%;
}
.welcome-img {
  width: 90px;
  height: 90px;
  border-radius: 18px;
  margin-bottom: 1.2rem;
  box-shadow: 0 2px 12px #00e67655;
}
.welcome-title {
  font-size: 2.1rem;
  color: #00e676;
  margin-bottom: 0.5rem;
  font-weight: bold;
  letter-spacing: 1px;
}
.welcome-desc {
  color: #b2ffb2;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}
.btn-entrar {
  background: #00e676;
  color: #181818;
  border: none;
  border-radius: 10px;
  padding: 1rem 2.2rem;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px #00e67644;
  transition: background 0.2s;
}
.btn-entrar:hover {
  background: #00c853;
}
/* Loader */
.loader-bg {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #181818 0%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.loader {
  border: 4px solid #232323;
  border-top: 4px solid #00e676;
  border-right: 4px solid #00c853;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  animation: spin 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  box-shadow: 0 0 24px #00e67644;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Botón de ingreso */
.btn-ingreso {
  width: 100%;
  background: #40c4ff;
  color: #181818;
  border: none;
  border-radius: 8px;
  padding: 1rem;
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
  margin-top: 0.5rem;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}
.btn-ingreso:hover {
  background: #0091ea;
}
.resumen-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0 1rem 0;
  background: #232323;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px #0008;
  border: 1px solid #333;
}
.resumen-table th, .resumen-table td {
  padding: 1.1rem 0.9rem;
  text-align: left;
  transition: background 0.2s ease;
}
.resumen-table th {
  background: linear-gradient(135deg, #181818 0%, #0e0e0e 100%);
  color: #00e676;
  font-size: 1.1rem;
  border-bottom: 2px solid #00e67644;
  font-weight: 600;
  text-shadow: 0 0 4px #00e67622;
}
.resumen-table td {
  border-bottom: 1px solid #333;
  font-size: 1.05rem;
}
.resumen-table tr:hover td {
  background: #2a2a2a;
}
.resumen-table tr.concepto td {
  background: #232323;
  font-weight: bold;
  color: #fff;
  border-top: 2px solid #00e67644;
  text-shadow: 0 0 2px #00e67622;
}
.resumen-table tr.subcat td {
  background: #1a1a1a;
  color: #b2ffb2;
  font-style: italic;
  padding-left: 1.8rem;
}
.resumen-table td.importe {
  text-align: right;
  font-family: 'Courier New', monospace;
  color: #00e676;
  font-weight: 600;
}
.resumen-table tr.saldo td {
  background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
  color: #181818;
  font-weight: bold;
  font-size: 1.3rem;
  border-top: 3px solid #00e676;
  text-shadow: 0 1px 2px #0008;
}
body {
  background: #181818;
  color: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
}
.container {
  max-width: 400px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #232323;
  border-radius: 16px;
  box-shadow: 0 2px 12px #0008;
}

/* Prevent horizontal overflow on mobile and remove default blue focus outlines */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

* { box-sizing: border-box; }

/* Remove tap highlight on mobile browsers */
html, body, button, a { -webkit-tap-highlight-color: transparent; }

/* Replace blue focus outline with subtle green focus ring matching theme */
button:focus, a:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.12);
}

/* Ensure main containers don't exceed viewport at 125% zoom */
.wallet-header, .wallet-main, .wallet-balance-card, .wallet-movimientos {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Fix for safe-area insets and avoid accidental horizontal scroll */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* Unified responsive shell for wallet pages */
:root {
  --wallet-max: 420px;
}

body.page-wallet, body.page-reporte, body.page-resumen {
  --wallet-shell: min(100%, var(--wallet-max));
  --wallet-pad: clamp(0.9rem, 4vw, 1.2rem);
}

body.page-wallet .wallet-main,
body.page-wallet .wallet-header,
body.page-wallet .wallet-balance-card,
body.page-wallet .wallet-movimientos,
body.page-reporte .reporte-app,
body.page-resumen .resumen-app {
  width: var(--wallet-shell);
  max-width: var(--wallet-shell);
  margin: 0 auto;
  padding-left: calc(var(--wallet-pad) + env(safe-area-inset-left));
  padding-right: calc(var(--wallet-pad) + env(safe-area-inset-right));
  box-sizing: border-box;
}

/* Ensure content never overflows on very small devices */
body.page-wallet *, body.page-reporte *, body.page-resumen * {
  max-width: 100%;
}

@media (max-width: 420px) {
  body.page-wallet .wallet-main,
  body.page-reporte .reporte-app,
  body.page-resumen .resumen-app {
    padding-left: calc(0.6rem + env(safe-area-inset-left));
    padding-right: calc(0.6rem + env(safe-area-inset-right));
  }
}
.saldo-card {
  background: #222;
  border-radius: 12px;
  padding: 1.5rem 1rem;
  margin: 1.5rem 0;
  text-align: center;
  box-shadow: 0 1px 6px #0005;
}
.saldo-card span {
  font-size: 1.1rem;
  color: #aaa;
}
.saldo-card h2 {
  font-size: 2.5rem;
  margin: 0.5rem 0 0 0;
  color: #00e676;
}
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.btn-mov {
  flex: 1 1 45%;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 1rem;
  font-size: 1.1rem;
  margin: 0.2rem 0;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-mov:hover {
  background: #444;
}
#verResumen {
  width: 100%;
  background: #00e676;
  color: #181818;
  border: none;
  border-radius: 8px;
  padding: 1rem;
  font-size: 1.1rem;
  margin-top: 1rem;
  cursor: pointer;
  font-weight: bold;
}
#verResumen:hover {
  background: #00c853;
}
.modal {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.oculto {
  display: none !important;
}
.form-card {
  background: linear-gradient(135deg, #232323 0%, #1a1a1a 100%);
  border-radius: 18px;
  padding: 2rem 1.5rem;
  min-width: 320px;
  max-width: 100%;
  box-shadow: 0 8px 32px #000d, 0 1px 3px #00e67622;
  border: 1px solid #333;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.form-card h2 {
  color: #00e676;
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  text-shadow: 0 0 8px #00e67633;
}
.form-card label {
  display: block;
  margin: 1rem 0 0.5rem 0;
  color: #00e676;
  font-weight: 600;
  font-size: 1rem;
  text-shadow: 0 0 4px #00e67622;
}
.form-card input, .form-card textarea, .form-card select {
  width: 100%;
  padding: 1rem;
  border-radius: 10px;
  border: 2px solid #333;
  margin-bottom: 1.2rem;
  background: #1a1a1a;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 2px 8px #0005, inset 0 1px 2px #00e67611;
  transition: all 0.3s ease;
}
.form-card input:focus, .form-card textarea:focus, .form-card select:focus {
  border-color: #00e676;
  background: #232323;
  box-shadow: 0 4px 16px #00e67633, inset 0 1px 2px #00e67611;
}
.form-card input[type="file"] {
  background: none;
  color: #fff;
}

.form-card .file-hidden {
  display: none !important;
}

.form-card .foto-opcional-wrap {
  margin: 0.25rem 0 1rem;
  padding: 0.8rem;
  border: 1px solid #2f3a46;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 25, 35, 0.85), rgba(14, 19, 28, 0.85));
}

.form-card .foto-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.form-card .media-btn {
  border: 1px solid #38506a;
  background: #1a2433;
  color: #d9eaff;
  border-radius: 10px;
  min-height: 42px;
  padding: 0.6rem 0.5rem;
  font-size: 0.83rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  box-shadow: none;
}

.form-card .media-btn:hover {
  background: #223146;
  transform: translateY(-1px);
}

.form-card .media-btn:active {
  transform: translateY(0);
}

.form-card .media-btn-camera {
  border-color: rgba(88, 228, 173, 0.45);
  color: #b9ffe4;
}

.form-card .media-btn-upload {
  border-color: rgba(135, 164, 212, 0.45);
}

.form-card .foto-selected {
  margin-top: 0.65rem;
  display: grid;
  gap: 0.32rem;
}

.form-card .foto-selected span {
  display: block;
  padding: 0.34rem 0.5rem;
  border-radius: 8px;
  background: rgba(9, 14, 20, 0.7);
  border: 1px solid #2a3442;
  color: #95a7c2;
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- FINAL MODAL DESIGN (wallet) --- */
body.page-wallet .modal {
  background: rgba(4, 9, 15, 0.76);
  backdrop-filter: blur(7px);
  z-index: 120;
}

body.page-wallet .modal .form-card {
  width: min(100%, 390px);
  min-width: 0;
  padding: 1.15rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(66, 89, 122, 0.5);
  background:
    radial-gradient(180px 90px at 88% -12%, rgba(66, 212, 165, 0.14), transparent 72%),
    linear-gradient(180deg, #1a202b 0%, #141b27 100%);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42);
}

body.page-wallet .modal .form-card h2 {
  margin-bottom: 0.9rem;
  font-size: 1.22rem;
  color: #31e3a5;
  text-shadow: none;
}

body.page-wallet .modal .form-card label {
  margin: 0.72rem 0 0.36rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #39e3a9;
  text-shadow: none;
}

body.page-wallet .modal .form-card input,
body.page-wallet .modal .form-card textarea,
body.page-wallet .modal .form-card select {
  margin-bottom: 0.64rem;
  border-radius: 9px;
  border: 1px solid #33445d;
  background: rgba(12, 18, 27, 0.86);
  font-size: 0.9rem;
  padding: 0.74rem 0.78rem;
}

body.page-wallet .modal .form-card textarea {
  min-height: 74px;
  resize: vertical;
}

body.page-wallet .modal .form-card input:focus,
body.page-wallet .modal .form-card textarea:focus,
body.page-wallet .modal .form-card select:focus {
  border-color: rgba(70, 236, 178, 0.76);
  box-shadow: 0 0 0 3px rgba(70, 236, 178, 0.16);
}

body.page-wallet .modal .form-card .foto-opcional-wrap {
  margin: 0.12rem 0 0.72rem;
  padding: 0.72rem;
  border-radius: 10px;
  border: 1px solid #31425a;
  background: rgba(9, 15, 23, 0.58);
}

body.page-wallet .modal .form-card .foto-actions {
  gap: 0.48rem;
}

body.page-wallet .modal .form-card .media-btn {
  min-height: 40px;
  border-radius: 9px;
  border: 1px solid #365276;
  background: linear-gradient(180deg, #1b2a3e, #162335);
  color: #d8e9ff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.52rem 0.42rem;
}

body.page-wallet .modal .form-card .media-btn:hover {
  background: linear-gradient(180deg, #203149, #1a2940);
}

body.page-wallet .modal .form-card .media-btn.is-selected {
  border-color: rgba(74, 235, 177, 0.74);
  background: linear-gradient(180deg, #1c3a39, #173030);
  color: #bfffe7;
}

body.page-wallet .modal .form-card .acciones-form {
  margin-top: 0.95rem;
  gap: 0.66rem;
}

body.page-wallet .modal .form-card button {
  border-radius: 9px;
  min-height: 40px;
  padding: 0.7rem 0.84rem;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

@media (max-width: 420px) {
  body.page-wallet .modal .form-card {
    width: min(94vw, 372px);
    padding: 1rem 0.9rem;
  }

  body.page-wallet .modal .form-card h2 {
    font-size: 1.12rem;
  }

  body.page-wallet .modal .form-card .media-btn {
    font-size: 0.74rem;
  }
}
.form-card .img-preview {
  display: block;
  margin: 0.5rem auto 1rem auto;
  max-width: 90%;
  border-radius: 8px;
  box-shadow: 0 1px 6px #0005;
}
/* Detail photo preview inside modals */
.wallet-detail-photo {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
}
.wallet-detail-photo span { display:block; color: #9fb0c9; font-size: 0.86rem; }
.detail-photo-thumb {
  display: block;
  margin-top: 0.35rem;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}

/* Mostrar más button for mov list */
/* Removed .wallet-show-more — list capped to 10 items */
.form-card .acciones-form {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.form-card button {
  background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
  color: #181818;
  border: none;
  border-radius: 10px;
  padding: 1rem 1.5rem;
  flex: 1 1 auto;
  font-size: 1rem;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 4px 12px #00e67644;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}
.form-card button:hover:not(.cancelar) {
  background: linear-gradient(135deg, #00c853 0%, #00a840 100%);
  box-shadow: 0 6px 20px #00e67655;
  transform: translateY(-2px);
}
.form-card button:active:not(.cancelar) {
  transform: translateY(0);
}
.form-card button.cancelar {
  background: #333;
  color: #fff;
  box-shadow: 0 2px 8px #0008;
}
.form-card button.cancelar:hover {
  background: #444;
  box-shadow: 0 4px 12px #0008;
}
.mov-list {
  margin-top: 2rem;
}
.mov-item {
  background: linear-gradient(135deg, #232323 0%, #1a1a1a 100%);
  border-radius: 12px;
  padding: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px #0008;
  border: 1px solid #333;
  transition: all 0.3s ease;
}
.mov-item:hover {
  box-shadow: 0 6px 16px #00e67633;
  border-color: #00e67644;
  transform: translateY(-2px);
}
.mov-item .mov-img {
  max-width: 120px;
  display: block;
  margin-top: 0.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px #0008;
}
#resumen {
  margin-bottom: 2rem;
}
canvas#grafico {
  background: #232323;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* --- MOBILE SAFETY OVERRIDES (final cascade) --- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

img, video, canvas {
  max-width: 100%;
  height: auto;
}

.welcome-bg,
.wallet-bg,
.login-bg,
.welcome-full-bg,
.simple-welcome-bg,
.fullscreen-welcome {
  width: 100%;
  max-width: 100%;
}

.wallet-bg {
  min-height: 100dvh;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  justify-content: flex-start;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

.wallet-header,
.wallet-main,
.wallet-balance-card,
.wallet-movimientos,
.container,
.form-card {
  width: 100%;
  max-width: 100%;
}

.wallet-header,
.wallet-main {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.wallet-balance-card,
.wallet-movimientos {
  width: calc(100% - 2rem);
  margin-left: auto;
  margin-right: auto;
}

.welcome-bottom-content {
  width: 100%;
  max-width: 420px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
}

.welcome-user-select,
.welcome-user-select label {
  width: 100%;
  max-width: 100%;
}

.welcome-user-select select,
#userSelect {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.welcome-btn-main {
  width: 100%;
  max-width: 100%;
}

.wallet-actions {
  gap: 0.75rem;
}

.wallet-action-btn {
  min-width: 0;
}

.form-card {
  min-width: 0;
  width: calc(100% - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  margin: 1rem;
}

.form-card .acciones-form {
  flex-wrap: wrap;
}

.form-card button {
  min-width: 0;
}

@media (max-width: 900px) {
  .wallet-main,
  .wallet-header {
    max-width: 680px;
  }

  .wallet-action-btn {
    flex: 1 1 calc(50% - 0.75rem);
  }
}

@media (max-width: 600px) {
  .welcome-main-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.2;
  }

  .welcome-sub {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }

  .wallet-header {
    padding-top: 1rem;
    border-radius: 0;
  }

  .wallet-logo {
    font-size: 1rem;
  }

  .wallet-user {
    gap: 0.5rem;
  }

  .wallet-user #saludoUsuario {
    font-size: 0.9rem;
  }

  .wallet-btn-logout {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .wallet-balance-card {
    padding: 1.5rem 1rem;
  }

  .wallet-balance-value {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    letter-spacing: 1px;
  }

  .wallet-action-btn {
    flex: 1 1 100%;
    font-size: 0.95rem;
    padding: 1rem 0.75rem;
    margin-bottom: 0;
  }

  .wallet-movimientos {
    padding: 1rem;
  }

  .wallet-mov-title {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .resumen-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 380px) {
  .welcome-bottom-content,
  .wallet-header,
  .wallet-main {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .wallet-balance-card,
  .wallet-movimientos,
  .form-card {
    width: calc(100% - 1.5rem);
  }

  .welcome-btn-main,
  .wallet-btn-resumen {
    font-size: 1rem;
    padding: 0.95rem 1rem;
  }
}

/* --- PREMIUM WALLET + RESUMEN V3 --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;800&family=Open+Sans:wght@400;600;700&display=swap');

:root {
  --pw-bg: #0c0e10;
  --pw-bg-soft: #111419;
  --pw-panel: #141922;
  --pw-panel-2: #181e29;
  --pw-line: #293143;
  --pw-text: #eef2f8;
  --pw-muted: #95a0b3;
  --pw-accent: #33d695;
  --pw-accent-2: #5af1b2;
  --pw-danger: #ee7e7e;
}

body.page-wallet,
body.page-resumen {
  font-family: 'Roboto', 'Open Sans', 'Montserrat', 'Verdana', 'Segoe UI', sans-serif;
  background:
    radial-gradient(900px 420px at 16% -10%, rgba(41, 116, 89, 0.38), transparent 60%),
    radial-gradient(820px 380px at 90% -20%, rgba(34, 77, 120, 0.22), transparent 62%),
    var(--pw-bg);
  color: var(--pw-text);
}

/* Index welcome */
body.page-wallet .bg-img-full {
  filter: brightness(0.36) contrast(1.08) saturate(1.05);
  opacity: 0.36;
}

body.page-wallet .welcome-bottom-content {
  max-width: 460px;
  padding-bottom: calc(1.6rem + env(safe-area-inset-bottom));
}

body.page-wallet .welcome-main-title {
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.55rem;
}

body.page-wallet .welcome-sub {
  color: #c5cfde;
  font-size: clamp(0.92rem, 2.7vw, 1.08rem);
  line-height: 1.45;
  margin-bottom: 1.2rem;
}

.user-picker-label {
  display: block;
  font-size: 0.82rem;
  color: var(--pw-muted);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.user-picker-select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--pw-line);
  background: rgba(10, 13, 18, 0.86);
  color: var(--pw-text);
  padding: 0.8rem 0.92rem;
  margin-bottom: 0.9rem;
}

body.page-wallet .welcome-btn-main {
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.9rem 1rem;
  box-shadow: 0 12px 24px rgba(32, 172, 120, 0.28);
}

.wallet-btn-danger {
  background: #2b1a1f !important;
  color: #ffd4d4 !important;
  border: 1px solid #5a303c !important;
  box-shadow: none !important;
}

/* Index dashboard */
body.page-wallet #mainContent.wallet-bg {
  background: transparent;
}

body.page-wallet .wallet-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  margin-top: 0.75rem;
  margin-bottom: 1.15rem;
  padding: 1rem 1rem 0.78rem;
}

body.page-wallet .wallet-logo {
  font-size: 0.96rem;
  color: var(--pw-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.page-wallet #saludoUsuario {
  color: var(--pw-text);
  font-size: 0.88rem;
  font-weight: 600;
}

body.page-wallet .wallet-btn-logout {
  border-color: #3f495d;
  background: #141922;
  color: #d9e2f3;
}

body.page-wallet .wallet-user {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

body.page-wallet .wallet-balance-card {
  background:
    radial-gradient(450px 220px at 85% -20%, rgba(57, 210, 148, 0.28), transparent 65%),
    linear-gradient(180deg, #16212b, #10151d 72%);
  border: 1px solid rgba(68, 228, 162, 0.24);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  padding: 1.35rem 1.2rem 1.2rem;
}

body.page-wallet .wallet-balance-label {
  color: #b8c6da;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  margin-bottom: 0.6rem;
}

body.page-wallet .wallet-balance-value {
  font-size: clamp(2.05rem, 10vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #f7fbff;
  text-shadow: none;
  font-family: 'Roboto', 'Open Sans', 'Verdana', sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
}

body.page-wallet .wallet-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}

body.page-wallet .wallet-action-btn {
  border-radius: 12px;
  border: 1px solid rgba(146, 163, 188, 0.24);
  background: #161c26;
  color: #d9e5f7;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.9rem 0.75rem;
  min-height: 52px;
  box-shadow: none;
}

body.page-wallet .wallet-action-ingreso {
  background: linear-gradient(135deg, var(--pw-accent), var(--pw-accent-2));
  color: #0f1416;
  border-color: transparent;
}

body.page-wallet .wallet-movimientos {
  background: linear-gradient(180deg, #141922, #11161f);
  border: 1px solid var(--pw-line);
  border-radius: 18px;
  padding: 1rem;
}

body.page-wallet .wallet-mov-title {
  color: #f2f6fc;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wallet-mov-item {
  background: #171d28;
  border: 1px solid #2a3446;
  border-radius: 12px;
  padding: 0.78rem 0.8rem;
  margin-bottom: 0.55rem;
}

.wallet-mov-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.wallet-mov-meta strong {
  font-size: 0.86rem;
  color: #ebf1fa;
  font-weight: 700;
}

.wallet-mov-meta small {
  color: var(--pw-muted);
  font-size: 0.74rem;
}

.wallet-mov-amount {
  font-family: 'Roboto', 'Open Sans', 'Verdana', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.wallet-mov-amount.is-in {
  color: var(--pw-accent-2);
}

.wallet-mov-amount.is-out {
  color: var(--pw-danger);
}

.wallet-empty {
  text-align: center;
  color: var(--pw-muted);
  padding: 1.25rem 0.8rem;
  font-size: 0.84rem;
}

body.page-wallet .wallet-btn-resumen {
  border-radius: 12px;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1rem;
}

/* Resumen page */
.resumen-app {
  max-width: 520px;
  margin: 0 auto;
  padding: 1rem 0.9rem calc(1.1rem + env(safe-area-inset-bottom));
  display: grid;
  gap: 0.85rem;
}

body.page-resumen .wallet-header.resumen-wallet-header {
  width: min(100%, 390px);
  margin: 0.35rem auto 0.55rem;
  padding: 0.65rem 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.page-resumen .wallet-logo {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

body.page-resumen #resumenSaludo {
  color: #e9f3ff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body.page-resumen #resumenFechaHeader {
  color: #8aa2c2;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
}

body.page-resumen .wallet-user {
  display: flex;
  align-items: center;
}

body.page-resumen .resumen-back-top {
  border: 1px solid rgba(77, 230, 170, 0.45);
  background: linear-gradient(135deg, #2fd193, #56ecb2);
  color: #0f1715;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.38rem 0.74rem;
  font-size: 0.72rem;
  font-weight: 800;
  min-height: 36px;
  cursor: pointer;
}

body.page-resumen .resumen-back-top::before {
  content: attr(data-icon);
  width: 0.95rem;
  height: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
}

.resumen-header {
  display: grid;
  gap: 0.55rem;
}

.resumen-header h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.resumen-header p {
  margin: 0;
  color: var(--pw-muted);
  font-size: 0.84rem;
}

.resumen-back {
  width: fit-content;
  border: 1px solid #313a4c;
  background: #131923;
  color: #dbe7f7;
  border-radius: 10px;
  padding: 0.52rem 0.82rem;
  font-weight: 700;
}

.resumen-hero,
.resumen-chart-card,
.resumen-table-card {
  background: linear-gradient(180deg, #141a25, #10151d);
  border: 1px solid #293243;
  border-radius: 18px;
  padding: 1rem;
}

.resumen-hero-label {
  color: #a8b8d0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.73rem;
  margin-bottom: 0.35rem;
}

.resumen-hero-value {
  font-size: clamp(2rem, 11vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: 0.85rem;
}

.resumen-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.resumen-mini-card {
  border: 1px solid #2e384b;
  border-radius: 12px;
  background: #121924;
  padding: 0.62rem;
}

.resumen-mini-card span {
  display: block;
  color: #95a3ba;
  font-size: 0.74rem;
  margin-bottom: 0.12rem;
}

.resumen-mini-card strong {
  font-size: 0.95rem;
  font-family: 'Roboto', 'Open Sans', 'Verdana', sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
}

.resumen-chart-card h2,
.resumen-table-card h2 {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d6e0ef;
}

body.page-resumen canvas#grafico {
  width: 100%;
  height: 240px;
  background: linear-gradient(180deg, #111a28, #0d1623);
  border: 1px solid #273244;
  border-radius: 14px;
  margin: 0;
}

body.page-resumen #resumen {
  margin: 0;
}

body.page-resumen .resumen-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

body.page-resumen .resumen-table th,
body.page-resumen .resumen-table td {
  border-bottom: 1px solid #263044;
  padding: 0.56rem 0.45rem;
  text-align: left;
  font-size: 0.82rem;
  color: #e8effa;
}

body.page-resumen .resumen-table th {
  color: #b7c4d8;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
}

body.page-resumen .resumen-table td.importe {
  text-align: right;
  white-space: nowrap;
  font-family: 'Roboto', 'Open Sans', 'Verdana', sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
}

body.page-resumen .resumen-table .saldo td {
  background: #15261f;
  color: #d9f8ea;
  font-weight: 800;
}

body.page-resumen .resumen-table-card {
  overflow: hidden;
}

body.page-resumen .resumen-table-card #resumen {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  body.page-wallet .wallet-actions {
    grid-template-columns: 1fr;
  }

  .resumen-app {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  body.page-resumen .wallet-header.resumen-wallet-header {
    width: min(100%, 376px);
    margin-bottom: 0.5rem;
    padding: 0.58rem 0.74rem;
  }

  body.page-resumen .resumen-back-top {
    font-size: 0.69rem;
    padding: 0.35rem 0.66rem;
    min-height: 34px;
  }

  body.page-resumen canvas#grafico {
    height: 226px;
  }

  .resumen-hero-grid {
    grid-template-columns: 1fr;
  }

  body.page-resumen .resumen-table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  body.page-resumen .resumen-table thead {
    display: none;
  }

  body.page-resumen .resumen-table tbody,
  body.page-resumen .resumen-table tfoot {
    display: block;
  }

  body.page-resumen .resumen-table tr {
    display: block;
    background: #121924;
    border: 1px solid #2a3447;
    border-radius: 12px;
    margin-bottom: 0.55rem;
    overflow: hidden;
  }

  body.page-resumen .resumen-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.65rem;
    border-bottom: 1px solid #273245;
    padding: 0.52rem 0.58rem;
    font-size: 0.78rem;
  }

  body.page-resumen .resumen-table td:last-child {
    border-bottom: none;
  }

  body.page-resumen .resumen-table td::before {
    content: '';
    flex: 0 0 34%;
    color: #9aabc5;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  body.page-resumen .resumen-table td:nth-child(1)::before { content: 'Concepto'; }
  body.page-resumen .resumen-table td:nth-child(2)::before { content: 'Detalle'; }
  body.page-resumen .resumen-table td:nth-child(3)::before { content: 'Importe'; }

  body.page-resumen .resumen-table td.importe {
    text-align: right;
    justify-content: space-between;
  }

  body.page-resumen .resumen-table tr.saldo td {
    background: #173025;
    color: #dff9ec;
    font-weight: 800;
  }

  body.page-resumen .resumen-table tr.saldo td:nth-child(2) {
    display: none;
  }

  body.page-resumen .resumen-table tr.saldo td:nth-child(3)::before {
    content: 'Saldo';
  }
}

/* --- PREMIUM FLAT OVERRIDES (no cards in main dashboard) --- */
body.page-wallet {
  background:
    radial-gradient(1100px 560px at 14% -8%, rgba(38, 135, 98, 0.36), transparent 62%),
    radial-gradient(940px 520px at 88% -22%, rgba(28, 72, 112, 0.26), transparent 58%),
    linear-gradient(180deg, #090b0e 0%, #0b0e12 52%, #080a0d 100%);
}

body.page-wallet #mainContent.wallet-bg {
  position: relative;
  background: transparent;
}

body.page-wallet #mainContent.wallet-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(500px 180px at 85% 14%, rgba(51, 214, 149, 0.14), transparent 72%),
    radial-gradient(760px 260px at 10% 76%, rgba(86, 131, 210, 0.1), transparent 80%);
  z-index: 0;
}

body.page-wallet .wallet-header,
body.page-wallet .wallet-main,
body.page-wallet .wallet-balance-card,
body.page-wallet .wallet-movimientos {
  position: relative;
  z-index: 1;
}

/* Header integrated with page, no card look */
body.page-wallet .wallet-header {
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin-top: 0.35rem;
  margin-bottom: 0.65rem;
  padding: 0.55rem 0.1rem 0.7rem;
  border-bottom: 1px solid rgba(162, 181, 210, 0.2);
}

body.page-wallet .wallet-logo {
  color: #8f9aab;
  font-size: 0.82rem;
  letter-spacing: 0.11em;
}

body.page-wallet #saludoUsuario {
  font-size: 0.9rem;
  color: #e2ebf8;
  font-weight: 700;
}

/* Balance integrated, no card container */
body.page-wallet .wallet-balance-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  margin: 0 auto 0.75rem;
  padding: 0.15rem 0.1rem 0.9rem;
  border-bottom: 1px solid rgba(162, 181, 210, 0.18);
  text-align: left;
}

body.page-wallet .wallet-balance-label {
  color: #97a5bb;
  margin-bottom: 0.3rem;
  font-size: 0.68rem;
}

body.page-wallet .wallet-balance-value {
  font-size: clamp(2.1rem, 12vw, 3.5rem);
  line-height: 1;
  font-weight: 800;
  color: #f5f8ff;
  letter-spacing: -0.04em;
  margin: 0;
  font-family: 'Roboto', 'Open Sans', 'Verdana', sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Movements section integrated, no card box */
body.page-wallet .wallet-movimientos {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0.7rem 0.1rem 0;
  border-top: 1px solid rgba(162, 181, 210, 0.14);
}

body.page-wallet .wallet-mov-title {
  font-size: 0.78rem;
  color: #aab7cb;
  margin-bottom: 0.7rem;
}

body.page-wallet .wallet-mov-item {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.62rem 0.05rem;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(162, 181, 210, 0.14);
}

body.page-wallet .wallet-mov-row {
  align-items: flex-start;
}

body.page-wallet .wallet-mov-meta strong {
  font-size: 0.82rem;
  color: #edf3ff;
}

body.page-wallet .wallet-mov-meta small {
  font-size: 0.72rem;
  color: #8f9bad;
}

body.page-wallet .wallet-mov-amount {
  font-size: 0.82rem;
  padding-top: 0.1rem;
}

body.page-wallet .wallet-btn-resumen {
  margin-top: 0.85rem;
}

@media (max-width: 640px) {
  body.page-wallet .wallet-main {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  body.page-wallet .wallet-header {
    margin-top: 0.2rem;
  }

  body.page-wallet .wallet-balance-value {
    font-size: clamp(2rem, 14vw, 3rem);
  }
}

/* --- APP-STYLE PREMIUM OVERRIDES (reference-inspired) --- */
body.page-wallet {
  --wallet-shell: min(100%, 392px);
  --wallet-pad: clamp(0.64rem, 2.7vw, 0.95rem);
  --wallet-balance: clamp(2rem, 10.6vw, 3.1rem);
  --wallet-action-icon: clamp(2.2rem, 7.6vw, 2.75rem);
  --wallet-action-text: clamp(0.64rem, 2.25vw, 0.79rem);
  --wallet-top-btn-text: clamp(0.61rem, 1.95vw, 0.72rem);
  --wallet-row-text: clamp(0.64rem, 2.05vw, 0.76rem);
  min-height: 100dvh;
  background:
    radial-gradient(300px 170px at 80% 2%, rgba(67, 220, 167, 0.2), transparent 70%),
    linear-gradient(180deg, #06090d 0%, #071019 55%, #091321 100%);
}

body.page-wallet .wallet-bg {
  min-height: 100dvh;
}

body.page-wallet .wallet-main {
  width: var(--wallet-shell);
  max-width: var(--wallet-shell);
  margin: 0 auto;
  padding: 0 var(--wallet-pad) calc(1.15rem + env(safe-area-inset-bottom));
}

body.page-wallet .wallet-header {
  width: var(--wallet-shell);
  max-width: var(--wallet-shell);
  margin: 0.35rem auto 0.6rem;
  padding: 0.65rem var(--wallet-pad) 0.7rem;
  border-bottom: none;
}

body.page-wallet .wallet-logo::before {
  content: none;
}

body.page-wallet .wallet-balance-card {
  border: none;
  margin: 0 0 0.95rem;
  padding: 0.32rem 0 0.7rem;
  text-align: center;
}

body.page-wallet .wallet-balance-label {
  text-align: center;
}

body.page-wallet .wallet-balance-value {
  text-align: center;
  font-size: var(--wallet-balance);
  letter-spacing: -0.02em;
}

body.page-wallet .wallet-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.32rem;
  overflow: visible;
  margin: 0 0 1.1rem;
  padding-bottom: 0;
}

body.page-wallet .wallet-action-btn {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #cfd9e9;
  min-height: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.48rem;
  font-size: var(--wallet-action-text);
  font-weight: 700;
  line-height: 1.15;
  flex: 1 1 0;
  min-width: 0;
}

body.page-wallet .wallet-action-btn::before {
  content: attr(data-icon);
  width: var(--wallet-action-icon);
  height: var(--wallet-action-icon);
  border-radius: 999px;
  background: #121f33;
  border: 1px solid #243752;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.84rem, 2.5vw, 1rem);
  color: #a9bddf;
}

body.page-wallet .wallet-action-top {
  border: 1px solid rgba(77, 230, 170, 0.48);
  background: linear-gradient(135deg, #2fd193, #56ecb2);
  color: #0f1715;
  border-radius: 999px;
  padding: 0.27rem 0.54rem;
  font-size: var(--wallet-top-btn-text);
  font-weight: 800;
  min-height: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}

body.page-wallet .wallet-action-top::before {
  width: 0.82rem;
  height: 0.82rem;
  background: transparent;
  border: none;
  font-size: 0.7rem;
  color: #0f1715;
}

body.page-wallet .wallet-logo {
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
}

body.page-wallet #saludoUsuario {
  font-size: clamp(0.64rem, 2.05vw, 0.73rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d6e8ff;
}

body.page-wallet #walletFecha {
  font-size: clamp(0.55rem, 1.75vw, 0.64rem);
  color: #86a2c8;
  letter-spacing: 0.03em;
}

body.page-wallet .wallet-user {
  gap: 0.38rem;
}

body.page-wallet .wallet-btn-logout {
  width: 28px;
  height: 28px;
  font-size: 0.8rem;
}

body.page-wallet .wallet-promo {
  margin: 0 0 1.12rem;
}

body.page-wallet .wallet-promo-content {
  border-radius: 12px;
  padding: 0.95rem 0.9rem 0.95rem;
}

body.page-wallet .wallet-promo-title {
  font-size: clamp(0.74rem, 2.35vw, 0.9rem);
  margin-bottom: 0.15rem;
}

body.page-wallet .wallet-promo-text {
  font-size: clamp(0.64rem, 2.05vw, 0.75rem);
  margin-bottom: 0.7rem;
}

body.page-wallet .wallet-promo-btn {
  padding: 0.45rem 0.8rem;
  font-size: clamp(0.65rem, 2.05vw, 0.76rem);
}

body.page-wallet .wallet-movimientos {
  border-top: none;
  padding-top: 0.38rem;
}

body.page-wallet .wallet-mov-title {
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #89a3c7;
  margin-bottom: 0.58rem;
}

body.page-wallet .wallet-mov-item {
  padding: 0.68rem 0.56rem;
  margin-bottom: 0.46rem;
  border: 1px solid rgba(56, 83, 116, 0.45);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(12, 21, 34, 0.86), rgba(9, 17, 30, 0.86));
}

body.page-wallet .wallet-mov-meta {
  font-size: var(--wallet-row-text);
}

body.page-wallet .wallet-mov-meta small {
  font-size: clamp(0.54rem, 1.72vw, 0.63rem);
}

body.page-wallet .wallet-mov-amount {
  font-size: clamp(0.67rem, 2.1vw, 0.78rem);
  white-space: nowrap;
}

body.page-wallet .wallet-action-ingreso {
  color: #e7fff4;
}

body.page-wallet .wallet-action-ingreso::before {
  background: linear-gradient(140deg, var(--pw-accent), #57eeb3);
  color: #0e1715;
  border-color: transparent;
}

body.page-wallet .wallet-promo {
  margin: 0 0 1.12rem;
}

body.page-wallet .wallet-promo-content {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #2b3a50;
  background:
    radial-gradient(180px 90px at 85% 15%, rgba(70, 241, 178, 0.24), transparent 70%),
    linear-gradient(135deg, #182538 0%, #122233 55%, #17332b 100%);
  padding: 0.95rem 0.9rem 0.95rem;
}

body.page-wallet .wallet-promo-title {
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
  color: #eef4ff;
}

body.page-wallet .wallet-promo-text {
  font-size: 0.67rem;
  color: #a9b8cf;
  margin-bottom: 0.7rem;
}

body.page-wallet .wallet-promo-btn {
  border: 1px solid rgba(69, 240, 176, 0.45);
  background: linear-gradient(135deg, #2fd193, #56ecb2);
  color: #0f1715;
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font-size: 0.68rem;
  font-weight: 700;
}

body.page-wallet .wallet-movimientos {
  border-top: none;
  padding-top: 0.38rem;
}

body.page-wallet .wallet-mov-title {
  margin-bottom: 0.58rem;
}

body.page-wallet .wallet-mov-item {
  padding: 0.68rem 0.56rem;
}

@media (max-width: 640px) {
  body.page-wallet {
    --wallet-pad: clamp(0.68rem, 3vw, 0.88rem);
  }

  body.page-wallet .wallet-actions {
    gap: 0.28rem;
    margin-bottom: 1rem;
  }

  body.page-wallet .wallet-action-top {
    padding: 0.32rem 0.6rem;
    font-size: var(--wallet-top-btn-text);
  }
}

@media (max-width: 420px) {
  body.page-wallet {
    --wallet-shell: min(100%, 368px);
    --wallet-pad: clamp(0.72rem, 3.8vw, 0.95rem);
  }

  body.page-wallet .wallet-main {
    width: var(--wallet-shell);
    max-width: var(--wallet-shell);
    padding-left: var(--wallet-pad);
    padding-right: var(--wallet-pad);
  }

  body.page-wallet .wallet-header {
    width: var(--wallet-shell);
    max-width: var(--wallet-shell);
    padding-left: var(--wallet-pad);
    padding-right: var(--wallet-pad);
  }

  body.page-wallet .wallet-user {
    gap: 0.4rem;
  }

  body.page-wallet .wallet-btn-logout {
    width: 29px;
    height: 29px;
    font-size: 0.82rem;
  }
}

@media (min-width: 421px) and (max-width: 520px) {
  body.page-wallet {
    --wallet-shell: min(100%, 404px);
    --wallet-pad: clamp(0.72rem, 2.3vw, 0.95rem);
  }
}

/* --- FINAL MOBILE PROPORTION TUNING (match reference spacing) --- */
body.page-wallet {
  --wallet-shell: min(100%, 390px);
  --wallet-pad: clamp(0.92rem, 4vw, 1.16rem);
  --wallet-stack-gap: 0.56rem;
  --wallet-balance: clamp(2.72rem, 12.8vw, 3.85rem);
  --wallet-action-icon: clamp(2.44rem, 8vw, 2.95rem);
  --wallet-action-text: clamp(0.7rem, 2.35vw, 0.84rem);
  --wallet-top-btn-text: clamp(0.66rem, 2vw, 0.75rem);
  --wallet-row-text: clamp(0.69rem, 2.2vw, 0.8rem);
}

body.page-wallet .wallet-header {
  margin: 0.34rem auto var(--wallet-stack-gap);
  padding-top: 0.58rem;
  padding-bottom: 0.58rem;
}

body.page-wallet .wallet-balance-card {
  margin-bottom: var(--wallet-stack-gap);
  padding: 0.4rem 0;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.42rem;
}

body.page-wallet .wallet-balance-label {
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: 700;
}

body.page-wallet .wallet-balance-value {
  line-height: 1.04;
  font-weight: 800;
}

body.page-wallet .wallet-actions {
  gap: 0.45rem;
  margin-bottom: 0.82rem;
}

body.page-wallet .wallet-actions-title {
  font-size: clamp(0.74rem, 2.4vw, 0.9rem);
  font-weight: 700;
  color: #dce9ff;
  margin: 0 0 var(--wallet-stack-gap);
  letter-spacing: 0.01em;
}

body.page-wallet .wallet-action-btn {
  gap: 0.5rem;
  font-weight: 600;
}

body.page-wallet .wallet-action-btn::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.page-wallet .wallet-action-top {
  padding: 0.36rem 0.66rem;
}

body.page-wallet #saludoUsuario {
  letter-spacing: 0.07em;
}

body.page-wallet #walletFecha {
  margin-top: 0.04rem;
}

body.page-wallet .wallet-promo {
  margin-bottom: 0.86rem;
  width: 100%;
}

body.page-wallet .wallet-promo-content {
  border-radius: 13px;
  padding: 1rem 0.95rem 1rem;
}

body.page-wallet .wallet-promo-title {
  font-size: clamp(0.78rem, 2.45vw, 0.92rem);
  margin-bottom: 0.22rem;
}

body.page-wallet .wallet-promo-text {
  margin-bottom: 0.75rem;
}

body.page-wallet .wallet-movimientos {
  padding-top: 0.5rem;
}

body.page-wallet .wallet-mov-title {
  font-size: 0.66rem;
  margin-bottom: 0.72rem;
}

body.page-wallet .wallet-mov-item {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(73, 101, 136, 0.4);
  margin-bottom: 0;
  padding: 0.76rem 0.12rem;
}

body.page-wallet .wallet-mov-item:first-child {
  border-top: 1px solid rgba(73, 101, 136, 0.4);
}

body.page-wallet .wallet-mov-meta {
  font-weight: 600;
}

body.page-wallet .wallet-mov-meta small {
  margin-top: 0.15rem;
  display: inline-block;
}

@media (max-width: 420px) {
  body.page-wallet {
    --wallet-shell: min(100%, 380px);
    --wallet-pad: clamp(0.9rem, 4.8vw, 1.1rem);
    --wallet-stack-gap: 0.5rem;
    --wallet-balance: clamp(2.52rem, 13.6vw, 3.45rem);
  }

  body.page-wallet .wallet-header {
    margin-bottom: var(--wallet-stack-gap);
  }

  body.page-wallet .wallet-actions {
    gap: 0.36rem;
    margin-bottom: 0.78rem;
  }

  body.page-wallet .wallet-actions-title {
    font-size: clamp(0.72rem, 2.9vw, 0.84rem);
    margin-bottom: var(--wallet-stack-gap);
  }

  body.page-wallet .wallet-balance-card {
    min-height: 136px;
    padding: 0.34rem 0;
    gap: 0.36rem;
  }
}

/* --- UX POLISH PASS: hierarchy, spacing, clarity --- */
body.page-wallet .wallet-actions .wallet-action-btn {
  cursor: pointer;
  border-radius: 13px;
  padding: 0.42rem 0.12rem 0.34rem;
  background: linear-gradient(180deg, rgba(16, 28, 45, 0.8), rgba(10, 19, 33, 0.62));
  border: 1px solid rgba(60, 88, 124, 0.45);
  text-align: center;
  font-size: clamp(0.82rem, 2.6vw, 0.98rem);
  font-weight: 700;
}

body.page-wallet .wallet-actions .wallet-action-btn::after {
  content: none;
}

body.page-wallet .wallet-actions .wallet-action-btn::before {
  color: #52f2b8;
  border-color: rgba(82, 242, 184, 0.42);
  background: radial-gradient(circle at 30% 28%, rgba(82, 242, 184, 0.22), rgba(14, 38, 47, 0.92));
}

body.page-wallet .wallet-actions .wallet-action-btn:active {
  transform: translateY(1px);
}

body.page-wallet .wallet-action-top {
  min-height: 36px;
  padding: 0.43rem 0.78rem;
  font-size: clamp(0.69rem, 2.1vw, 0.8rem);
  font-weight: 700;
}

body.page-wallet .wallet-action-top::before {
  width: 0.95rem;
  height: 0.95rem;
  font-size: 0.78rem;
}

body.page-wallet .wallet-promo-content {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  border: 1px solid #2b3a50;
  border-radius: 14px;
  min-height: 132px;
  padding: 0.92rem 0.9rem 0.9rem;
  background:
    linear-gradient(135deg, rgba(16, 28, 44, 0.66) 0%, rgba(13, 27, 42, 0.6) 55%, rgba(16, 44, 37, 0.58) 100%),
    radial-gradient(210px 120px at 84% 16%, rgba(70, 241, 178, 0.22), transparent 74%),
    url('../assets/card.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, cover;
  background-position: center, center, center 36%;
}

body.page-wallet .wallet-promo-title {
  font-size: clamp(0.94rem, 2.9vw, 1.12rem);
  font-weight: 700;
  width: 100%;
}

body.page-wallet .wallet-promo-text {
  max-width: 70%;
  font-size: clamp(0.76rem, 2.35vw, 0.88rem);
  line-height: 1.35;
  margin-top: 0.2rem;
}

body.page-wallet .wallet-promo-btn {
  font-size: clamp(0.76rem, 2.3vw, 0.9rem);
  font-weight: 700;
  padding: 0.52rem 0.92rem;
}

body.page-wallet .wallet-movimientos {
  padding-top: 0.32rem;
  width: 100%;
}

body.page-wallet #wallet-mov-list {
  width: 100%;
  border-top: 1px solid rgba(231, 242, 255, 0.26);
}

body.page-wallet .wallet-mov-title {
  font-size: 0.78rem;
  margin-bottom: 0.5rem;
}

body.page-wallet .wallet-mov-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0.74rem 0.1rem;
  border-bottom: 1px solid rgba(231, 242, 255, 0.22);
}

body.page-wallet .wallet-mov-action {
  appearance: none;
  -webkit-appearance: none;
}

body.page-wallet .wallet-mov-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.72rem;
  width: 100%;
}

body.page-wallet .wallet-mov-left {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  min-width: 0;
  flex: 1 1 auto;
}

body.page-wallet .wallet-mov-status {
  width: 1.08rem;
  height: 1.08rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex: 0 0 auto;
}

body.page-wallet .wallet-mov-status.is-in {
  color: #3cf3b5;
  background: rgba(22, 75, 60, 0.35);
}

body.page-wallet .wallet-mov-status.is-out {
  color: #ff8686;
  background: rgba(91, 36, 36, 0.35);
}

body.page-wallet .wallet-mov-meta {
  min-width: 0;
}

body.page-wallet .wallet-mov-meta strong {
  display: block;
  font-size: clamp(0.84rem, 2.7vw, 0.98rem);
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.page-wallet .wallet-mov-meta small {
  display: block;
  margin-top: 0.2rem;
  color: #7993b8;
  font-size: clamp(0.64rem, 2.05vw, 0.74rem);
}

body.page-wallet .wallet-mov-right {
  display: flex;
  align-items: center;
  gap: 0.46rem;
  flex: 0 0 auto;
}

body.page-wallet .wallet-mov-amount {
  font-size: clamp(0.8rem, 2.5vw, 0.92rem);
  font-weight: 600;
}

body.page-wallet .wallet-mov-chevron {
  color: #dbe9ff;
  font-size: 1.04rem;
  line-height: 1;
}

body.page-wallet .wallet-empty-state {
  border: 1px dashed rgba(104, 143, 188, 0.55);
  border-radius: 14px;
  padding: 1.15rem 1rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(11, 20, 33, 0.82), rgba(9, 16, 27, 0.78));
}

body.page-wallet .wallet-empty-icon {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  margin: 0 auto 0.62rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(91, 241, 182, 0.5);
  background: rgba(29, 87, 68, 0.3);
  color: #58f1b6;
  font-weight: 800;
}

body.page-wallet .wallet-empty-state h3 {
  font-size: 0.86rem;
  margin: 0 0 0.32rem;
  color: #eaf3ff;
}

body.page-wallet .wallet-empty-state p {
  margin: 0 0 0.78rem;
  font-size: 0.7rem;
  color: #9ab0d0;
}

body.page-wallet .wallet-detail-card .wallet-detail-grid {
  display: grid;
  gap: 0.62rem;
  margin: 0.5rem 0 0.8rem;
}

body.page-wallet .wallet-detail-card .wallet-detail-grid span {
  display: block;
  font-size: 0.7rem;
  color: #8ca3c4;
  margin-bottom: 0.14rem;
}

body.page-wallet .wallet-detail-card .wallet-detail-grid strong {
  font-size: 0.86rem;
  color: #eaf3ff;
}

@media (max-width: 420px) {
  body.page-wallet .wallet-action-top {
    min-height: 34px;
    padding: 0.4rem 0.72rem;
  }

  body.page-wallet .wallet-mov-item {
    padding: 0.72rem 0.08rem;
  }

  body.page-wallet .wallet-mov-row {
    gap: 0.56rem;
  }

  body.page-wallet .wallet-balance-label {
    font-size: 0.68rem;
  }

  body.page-wallet .wallet-promo-title {
    font-size: clamp(0.9rem, 3.1vw, 1.02rem);
  }

  body.page-wallet .wallet-mov-title {
    font-size: 0.74rem;
  }

  body.page-wallet .wallet-promo-text {
    font-size: clamp(0.73rem, 2.8vw, 0.84rem);
  }

  body.page-wallet .wallet-promo-btn {
    font-size: 0.8rem;
    padding: 0.5rem 0.88rem;
  }

  body.page-wallet .wallet-promo-content {
    min-height: 122px;
    padding: 0.86rem 0.82rem 0.84rem;
    background-size: auto, auto, cover;
    background-position: center, center, center;
  }

  body.page-wallet .wallet-promo-text {
    max-width: 72%;
  }
}

/* --- FINAL ALIGNMENT: RESUMEN WITH INDEX DESIGN --- */
body.page-resumen {
  --wallet-shell: min(100%, 390px);
  --wallet-pad: clamp(0.92rem, 4vw, 1.16rem);
  min-height: 100dvh;
  background:
    radial-gradient(300px 170px at 80% 2%, rgba(67, 220, 167, 0.2), transparent 70%),
    linear-gradient(180deg, #06090d 0%, #071019 55%, #091321 100%);
}

body.page-resumen .resumen-app {
  width: var(--wallet-shell);
  max-width: var(--wallet-shell);
  margin: 0 auto;
  padding: 0 var(--wallet-pad) calc(1.05rem + env(safe-area-inset-bottom));
  gap: 0;
  box-sizing: border-box;
}

body.page-resumen .wallet-header.resumen-wallet-header {
  width: 100%;
  max-width: none;
  margin: 0.18rem auto 0.5rem;
  padding: 0.46rem 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

body.page-resumen .resumen-back-top {
  min-height: 34px;
  padding: 0.34rem 0.68rem;
  font-size: 0.7rem;
}

body.page-resumen .resumen-hero,
body.page-resumen .resumen-chart-card,
body.page-resumen .resumen-table-card {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.76rem 0;
  margin: 0;
  border-top: 1px solid rgba(231, 242, 255, 0.2);
}

body.page-resumen .resumen-hero {
  border-top: none;
  padding-top: 0.28rem;
  padding-bottom: 0.9rem;
}

body.page-resumen .resumen-hero-label {
  color: #b8c6da;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

body.page-resumen .resumen-hero-value {
  font-size: clamp(2.15rem, 11.6vw, 3.25rem);
  margin-bottom: 0.58rem;
}

body.page-resumen .resumen-mini-card {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

body.page-resumen .resumen-mini-card span {
  color: #95a3ba;
}

body.page-resumen .resumen-mini-card strong {
  font-size: 1.02rem;
}

body.page-resumen .resumen-chart-card h2,
body.page-resumen .resumen-table-card h2 {
  font-size: 0.8rem;
  margin: 0 0 0.5rem;
  letter-spacing: 0.08em;
}

body.page-resumen canvas#grafico {
  border: 1px solid rgba(96, 122, 158, 0.36);
  border-radius: 12px;
  background: linear-gradient(180deg, #0f1826, #0c1522);
  height: 220px;
}

body.page-resumen .resumen-table-card {
  padding-bottom: 0;
}

body.page-resumen .resumen-table {
  min-width: 0;
  width: 100%;
}

body.page-resumen .resumen-table th,
body.page-resumen .resumen-table td {
  padding-left: 0;
  padding-right: 0;
}

body.page-resumen .resumen-list {
  width: 100%;
  border-top: 1px solid rgba(231, 242, 255, 0.2);
}

body.page-resumen .resumen-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.72rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid rgba(231, 242, 255, 0.2);
}

body.page-resumen .resumen-item-btn {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  text-align: left;
}

body.page-resumen .resumen-item-main {
  min-width: 0;
  flex: 1 1 auto;
}

body.page-resumen .resumen-item-main strong {
  display: block;
  font-size: 0.83rem;
  color: #eaf2ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.page-resumen .resumen-item-main small {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.67rem;
  color: #8ea5c5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.page-resumen .resumen-item-amount {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

body.page-resumen .resumen-item-side {
  display: flex;
  align-items: center;
  gap: 0.38rem;
}

body.page-resumen .resumen-item-chevron {
  color: #d2e1f7;
  font-size: 0.94rem;
  line-height: 1;
}

body.page-resumen .resumen-item-amount.is-in {
  color: #59ebb2;
}

body.page-resumen .resumen-item-amount.is-out {
  color: #ff8f8f;
}

body.page-resumen .resumen-balance-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.72rem 0 0.2rem;
  font-size: 0.78rem;
  color: #b7c9e1;
}

body.page-resumen .resumen-balance-line strong {
  color: #e8fff6;
  font-size: 0.88rem;
  font-weight: 800;
}

body.page-resumen .resumen-report-action {
  border-top: 1px solid rgba(231, 242, 255, 0.2);
  padding: 0.82rem 0 0.34rem;
}

body.page-resumen .resumen-report-action .wallet-promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  width: 100%;
  min-height: 46px;
  border-radius: 13px;
  text-decoration: none;
  font-size: clamp(0.82rem, 2.4vw, 0.94rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0f1715;
  border: 1px solid rgba(86, 244, 183, 0.48);
  background:
    linear-gradient(135deg, rgba(70, 238, 176, 0.98), rgba(51, 210, 151, 0.95)),
    linear-gradient(135deg, #2fd193, #56ecb2);
  box-shadow: 0 10px 24px rgba(38, 189, 135, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

body.page-resumen .resumen-report-action .wallet-promo-btn::before {
  content: '▣';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 0.84rem;
  color: #0d3a2b;
}

body.page-resumen .resumen-report-action .wallet-promo-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 13px 26px rgba(38, 189, 135, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  filter: brightness(1.02);
}

body.page-resumen .resumen-report-action .wallet-promo-btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(38, 189, 135, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.page-resumen .reporte-general-wrap {
  width: 100%;
  border-top: 1px solid rgba(231, 242, 255, 0.2);
  padding: 0.82rem 0 0.2rem;
}

body.page-reporte {
  --wallet-shell: min(100%, 390px);
  --wallet-pad: clamp(0.92rem, 4vw, 1.16rem);
}

body.page-reporte .reporte-app {
  width: var(--wallet-shell);
  max-width: var(--wallet-shell);
  margin: 0 auto;
  padding: 0 var(--wallet-pad) calc(1.05rem + env(safe-area-inset-bottom));
}

body.page-reporte .wallet-header.reporte-wallet-header {
  width: 100%;
  margin: 0.34rem auto 0.56rem;
  padding: 0.46rem 0;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.page-reporte .wallet-logo {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

body.page-reporte #reporteSaludo {
  color: #e9f3ff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body.page-reporte #reporteFechaHeader {
  color: #8aa2c2;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
}

body.page-reporte .reporte-back-top {
  border: 1px solid rgba(77, 230, 170, 0.45);
  background: linear-gradient(135deg, #2fd193, #56ecb2);
  color: #0f1715;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.34rem 0.68rem;
  font-size: 0.7rem;
  font-weight: 800;
  min-height: 34px;
  cursor: pointer;
}

body.page-reporte .reporte-download-top {
  border: 1px solid rgba(166, 187, 214, 0.44);
  background: linear-gradient(135deg, #2c3950, #223046);
  color: #e5edf8;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.34rem 0.68rem;
  font-size: 0.7rem;
  font-weight: 800;
  min-height: 34px;
  cursor: pointer;
}

body.page-reporte .reporte-download-top::before {
  content: attr(data-icon);
  width: 0.95rem;
  height: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
}

body.page-reporte .reporte-back-top::before {
  content: attr(data-icon);
  width: 0.95rem;
  height: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
}

body.page-reporte .reporte-general-wrap {
  width: 100%;
  border-top: 1px solid rgba(231, 242, 255, 0.2);
  padding: 0.82rem 0 0.2rem;
}

body.page-reporte .reporte-general-wrap h2 {
  margin: 0 0 0.56rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d6e0ef;
}

body.page-reporte .reporte-general-standalone {
  border-top: none;
  padding-top: 0.18rem;
}

body.page-reporte .reporte-general-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #191f1a;
  border-radius: 0;
  overflow: visible;
  background: #d6d6d6;
  font-family: 'Roboto', 'Open Sans', 'Verdana', sans-serif;
}

body.page-reporte .reporte-general-table th,
body.page-reporte .reporte-general-table td {
  border-right: 2px solid #191f1a;
  border-bottom: 2px solid #191f1a;
  padding: 0.22rem 0.44rem;
  text-align: center;
  color: #152117;
  line-height: 1.15;
}

body.page-reporte .reporte-general-table tr > *:last-child {
  border-right: none;
}

body.page-reporte .reporte-general-table tbody tr:last-child td,
body.page-reporte .reporte-general-table tfoot tr:last-child td {
  border-bottom: none;
}

body.page-reporte .reporte-general-table .rg-title-row th {
  background: #8dd36f;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-top: 0.18rem;
  padding-bottom: 0.18rem;
}

body.page-reporte .reporte-general-table .rg-head-row th {
  background: #9dd988;
  font-size: 0.58rem;
  font-weight: 800;
}

body.page-reporte .reporte-general-table .rg-concept,
body.page-reporte .reporte-general-table .rg-total-label {
  background: #a4d996;
  font-size: 0.56rem;
  font-weight: 800;
}

body.page-reporte .reporte-general-table .rg-detail,
body.page-reporte .reporte-general-table .rg-total-detail {
  background: #d8d8d8;
  font-size: 0.53rem;
  color: #202620;
}

body.page-reporte .reporte-general-table .rg-sub-detail {
  font-style: italic;
}

body.page-reporte .reporte-general-table .rg-amount,
body.page-reporte .reporte-general-table .rg-total-amount {
  background: #d8d8d8;
  font-size: 0.58rem;
  font-weight: 800;
}

body.page-reporte .reporte-general-table .rg-total-amount {
  background: #8dd36f;
  color: #132514;
}

body.page-reporte .reporte-general-table .rg-apartado-head {
  background: #9dd988;
  color: #152117;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

body.page-reporte .reporte-general-table .rg-apartado-label {
  background: #c6e8b7;
  font-size: 0.55rem;
  font-weight: 700;
}

body.page-reporte .reporte-general-table .rg-apartado-detail {
  background: #e2e2e2;
  font-size: 0.53rem;
  color: #2a2f2a;
}

body.page-reporte .reporte-general-table .rg-apartado-amount {
  background: #e2e2e2;
  font-size: 0.58rem;
  font-weight: 800;
}

body.page-reporte .reporte-general-table .rg-apartado-amount.is-in {
  color: #3d7a1a;
}

body.page-reporte .reporte-general-table .rg-apartado-amount.is-out {
  color: #a04141;
}

body.page-resumen .reporte-general-wrap h2 {
  margin: 0 0 0.56rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d6e0ef;
}

body.page-resumen .reporte-general-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #191f1a;
  border-radius: 0;
  overflow: visible;
  background: #d6d6d6;
  font-family: 'Roboto', 'Open Sans', 'Verdana', sans-serif;
}

body.page-resumen .reporte-general-table th,
body.page-resumen .reporte-general-table td {
  border-right: 2px solid #191f1a;
  border-bottom: 2px solid #191f1a;
  padding: 0.22rem 0.44rem;
  text-align: center;
  color: #152117;
  line-height: 1.15;
}

body.page-resumen .reporte-general-table tr > *:last-child {
  border-right: none;
}

body.page-resumen .reporte-general-table tbody tr:last-child td,
body.page-resumen .reporte-general-table tfoot tr:last-child td {
  border-bottom: none;
}

body.page-resumen .reporte-general-table .rg-title-row th {
  background: #8dd36f;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-top: 0.18rem;
  padding-bottom: 0.18rem;
}

body.page-resumen .reporte-general-table .rg-head-row th {
  background: #9dd988;
  font-size: 0.58rem;
  font-weight: 800;
}

body.page-resumen .reporte-general-table .rg-concept,
body.page-resumen .reporte-general-table .rg-total-label {
  background: #a4d996;
  font-size: 0.56rem;
  font-weight: 800;
}

body.page-resumen .reporte-general-table .rg-detail,
body.page-resumen .reporte-general-table .rg-total-detail {
  background: #d8d8d8;
  font-size: 0.53rem;
  color: #202620;
}

body.page-resumen .reporte-general-table .rg-sub-detail {
  font-style: italic;
}

body.page-resumen .reporte-general-table .rg-amount,
body.page-resumen .reporte-general-table .rg-total-amount {
  background: #d8d8d8;
  font-size: 0.58rem;
  font-weight: 800;
}

body.page-resumen .reporte-general-table .rg-total-amount {
  background: #8dd36f;
  color: #132514;
}

@media (max-width: 420px) {
  body.page-resumen .reporte-general-table .rg-title-row th {
    font-size: 0.58rem;
  }

  body.page-resumen .reporte-general-table .rg-head-row th {
    font-size: 0.54rem;
  }

  body.page-resumen .reporte-general-table .rg-concept,
  body.page-resumen .reporte-general-table .rg-total-label {
    font-size: 0.52rem;
  }

  body.page-resumen .reporte-general-table .rg-detail,
  body.page-resumen .reporte-general-table .rg-total-detail {
    font-size: 0.5rem;
  }

  body.page-resumen .reporte-general-table .rg-amount,
  body.page-resumen .reporte-general-table .rg-total-amount {
    font-size: 0.54rem;
  }
}

body.page-resumen .resumen-detail-card .wallet-detail-grid {
  display: grid;
  gap: 0.62rem;
  margin: 0.5rem 0 0.8rem;
}

body.page-resumen .resumen-detail-card .wallet-detail-grid span {
  display: block;
  font-size: 0.7rem;
  color: #8ca3c4;
  margin-bottom: 0.14rem;
}

body.page-resumen .resumen-detail-card .wallet-detail-grid strong {
  font-size: 0.86rem;
  color: #eaf3ff;
}

body.page-resumen .resumen-detail-card .wallet-detail-grid strong.is-in {
  color: #59ebb2;
}

body.page-resumen .resumen-detail-card .wallet-detail-grid strong.is-out {
  color: #ff8f8f;
}

@media (max-width: 420px) {
  body.page-resumen {
    --wallet-shell: min(100%, 380px);
    --wallet-pad: clamp(0.9rem, 4.8vw, 1.1rem);
  }

  body.page-resumen .resumen-app {
    width: var(--wallet-shell);
    max-width: var(--wallet-shell);
    padding-left: var(--wallet-pad);
    padding-right: var(--wallet-pad);
    gap: 0;
  }

  body.page-resumen .wallet-header.resumen-wallet-header {
    margin-bottom: 0.44rem;
    padding: 0.42rem 0;
  }

  body.page-resumen .resumen-hero,
  body.page-resumen .resumen-chart-card,
  body.page-resumen .resumen-table-card {
    padding: 0.72rem 0;
  }

  body.page-resumen canvas#grafico {
    height: 206px;
  }

  body.page-resumen .resumen-item-main strong {
    font-size: 0.79rem;
  }

  body.page-resumen .resumen-item-main small {
    font-size: 0.64rem;
  }

  body.page-resumen .resumen-item-amount {
    font-size: 0.78rem;
  }

  body.page-reporte {
    --wallet-shell: min(100%, 380px);
    --wallet-pad: clamp(0.9rem, 4.8vw, 1.1rem);
  }

  body.page-reporte .reporte-app {
    width: var(--wallet-shell);
    max-width: var(--wallet-shell);
    padding-left: var(--wallet-pad);
    padding-right: var(--wallet-pad);
  }

  body.page-reporte .reporte-general-table .rg-title-row th {
    font-size: 0.58rem;
  }

  body.page-reporte .reporte-general-table .rg-head-row th {
    font-size: 0.54rem;
  }

  body.page-reporte .reporte-general-table .rg-concept,
  body.page-reporte .reporte-general-table .rg-total-label {
    font-size: 0.52rem;
  }

  body.page-reporte .reporte-general-table .rg-detail,
  body.page-reporte .reporte-general-table .rg-total-detail {
    font-size: 0.5rem;
  }

  body.page-reporte .reporte-general-table .rg-amount,
  body.page-reporte .reporte-general-table .rg-total-amount {
    font-size: 0.54rem;
  }
}

/* --- MOBILE WELCOME FINAL OVERRIDES --- */
body.page-wallet #welcome.welcome-bg {
  justify-content: flex-end;
}

body.page-wallet .welcome-full-bg {
  position: fixed;
  inset: 0;
  min-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(5, 8, 12, 0.14) 0%, rgba(5, 8, 12, 0.48) 48%, rgba(5, 8, 12, 0.92) 100%),
    radial-gradient(120% 90% at 50% 100%, rgba(18, 112, 72, 0.34) 0%, rgba(18, 112, 72, 0) 60%);
}

body.page-wallet .welcome-bottom-content {
  width: min(100%, 430px);
  padding: 0 1rem calc(1.15rem + env(safe-area-inset-bottom));
}

body.page-wallet .welcome-user-select,
body.page-wallet .user-picker-select,
body.page-wallet .welcome-btn-main {
  width: 100%;
  max-width: none;
}

body.page-wallet .welcome-user-select {
  margin-bottom: 0.2rem;
}

body.page-wallet .user-picker-select {
  min-width: 0;
  font-size: 0.95rem;
}

body.page-wallet .welcome-btn-main {
  min-height: 48px;
}

@media (max-width: 640px) {
  body.page-wallet .bg-img-full {
    object-position: center top;
    opacity: 0.3;
  }

  body.page-wallet .welcome-bottom-content {
    padding-left: 0.95rem;
    padding-right: 0.95rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  body.page-wallet .welcome-main-title {
    font-size: clamp(1.55rem, 7.4vw, 2.2rem);
    line-height: 1.05;
    margin-bottom: 0.7rem;
  }

  body.page-wallet .welcome-sub {
    font-size: clamp(0.9rem, 3.7vw, 1rem);
    line-height: 1.5;
    margin-bottom: 1rem;
    max-width: 32ch;
  }
}

@media (max-width: 420px) {
  body.page-wallet .welcome-bottom-content {
    width: 100%;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    padding-bottom: calc(0.9rem + env(safe-area-inset-bottom));
  }

  body.page-wallet .welcome-main-title {
    font-size: clamp(1.42rem, 7vw, 1.78rem);
  }

  body.page-wallet .welcome-sub {
    font-size: 0.88rem;
    margin-bottom: 0.9rem;
  }

  body.page-wallet .user-picker-label {
    font-size: 0.74rem;
  }

  body.page-wallet .user-picker-select {
    padding: 0.82rem 2.6rem 0.82rem 0.82rem;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
  }

  body.page-wallet .welcome-btn-main {
    padding: 0.88rem 0.95rem;
    font-size: 0.9rem;
    margin-bottom: 0.55rem;
  }
}

@media (max-width: 360px) {
  body.page-wallet .welcome-main-title {
    font-size: 1.28rem;
  }

  body.page-wallet .welcome-sub {
    font-size: 0.84rem;
    line-height: 1.42;
  }
}

/* --- WELCOME AND LOADER VISUAL REFRESH --- */
body.page-wallet .welcome-user-select {
  margin-bottom: 0.7rem;
}

body.page-wallet .welcome-bottom-content {
  width: min(100%, 470px);
  align-items: center;
  justify-content: flex-end;
  margin: 0 auto;
  padding: 0 1rem calc(1.1rem + env(safe-area-inset-bottom));
}

body.page-wallet .welcome-surface {
  width: 100%;
  border-radius: 26px;
  border: 1px solid rgba(155, 231, 197, 0.22);
  background:
    linear-gradient(175deg, rgba(8, 15, 24, 0.93), rgba(7, 12, 19, 0.84)),
    radial-gradient(120% 100% at 100% 100%, rgba(35, 139, 98, 0.25), rgba(35, 139, 98, 0) 58%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  padding: 1.2rem 1rem 1rem;
}

body.page-wallet .welcome-main-title {
  margin-bottom: 0.36rem;
  text-align: left;
  font-size: clamp(1.45rem, 6.3vw, 2rem);
}

body.page-wallet .welcome-sub {
  margin-bottom: 0.84rem;
  text-align: left;
  max-width: 44ch;
  color: #c2d0e2;
}

body.page-wallet .user-picker-card {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(120, 220, 176, 0.23);
  background: rgba(7, 13, 20, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 0.72rem 0.68rem 0.62rem;
}

body.page-wallet .user-picker-label {
  color: #90eec4;
  font-size: 0.73rem;
  letter-spacing: 0.11em;
  margin-bottom: 0.48rem;
}

body.page-wallet .user-picker-row {
  position: relative;
}

body.page-wallet .user-picker-list {
  display: grid;
  gap: 0.42rem;
}

body.page-wallet .user-option {
  appearance: none;
  width: 100%;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(145, 232, 194, 0.16);
  background: rgba(8, 14, 22, 0.9);
  color: #f1f7ff;
  padding: 0.66rem 0.72rem;
  margin: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

body.page-wallet .user-option:active {
  transform: scale(0.99);
}

body.page-wallet .user-option.is-active {
  border-color: rgba(83, 225, 156, 0.78);
  background: linear-gradient(145deg, rgba(15, 45, 35, 0.72), rgba(10, 20, 28, 0.94));
  box-shadow: 0 0 0 2px rgba(83, 225, 156, 0.18);
}

body.page-wallet .user-option-name {
  display: block;
  font-size: 0.91rem;
  font-weight: 700;
  color: #f6fbff;
  line-height: 1.25;
}

body.page-wallet .user-option-meta {
  display: block;
  margin-top: 0.14rem;
  font-size: 0.74rem;
  color: #9cb4d2;
  line-height: 1.35;
  word-break: break-word;
}

body.page-wallet .welcome-btn-main {
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.9rem 1rem;
  box-shadow: 0 16px 28px rgba(31, 186, 128, 0.28);
}

body.page-wallet .welcome-btn-main:disabled {
  opacity: 0.65;
  filter: grayscale(0.2);
  cursor: not-allowed;
}

body.page-wallet .wallet-btn-danger {
  margin-top: 0.55rem;
}

body.page-wallet .user-picker-select {
  border-radius: 12px;
  border: 1px solid rgba(144, 238, 196, 0.2);
  background: rgba(5, 9, 14, 0.86);
  color: #f1f7ff;
  padding: 0.84rem 2.4rem 0.84rem 1.55rem;
  margin-bottom: 0.56rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.page-wallet .user-picker-select:focus {
  border-color: rgba(66, 225, 151, 0.8);
  box-shadow: 0 0 0 3px rgba(66, 225, 151, 0.2);
}

body.page-wallet .user-picker-hint {
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  line-height: 1.38;
  color: #d5deeb;
  min-height: 1.25rem;
}

body.page-wallet .user-picker-hint.is-admin {
  color: #ffd68e;
}

body.page-wallet .user-picker-hint.is-user {
  color: #b6d5ff;
}

body.page-wallet .loader-bg {
  background:
    radial-gradient(90% 65% at 50% 100%, rgba(35, 154, 107, 0.24) 0%, rgba(35, 154, 107, 0) 75%),
    linear-gradient(160deg, #090d13 0%, #0d151e 52%, #081219 100%);
  z-index: 240;
}

body.page-wallet .loader-shell {
  width: min(100%, 380px);
  display: grid;
  place-items: center;
}

body.page-wallet .loader-card {
  width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(126, 225, 186, 0.22);
  background: linear-gradient(170deg, rgba(12, 18, 27, 0.9), rgba(10, 15, 22, 0.82));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 1.2rem 1.1rem 1.1rem;
  text-align: center;
}

body.page-wallet .loader-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #92f0c8;
  border: 1px solid rgba(146, 240, 200, 0.26);
  background: rgba(16, 40, 33, 0.4);
}

body.page-wallet .loader {
  margin: 0.82rem auto 0.92rem;
  width: 62px;
  height: 62px;
  border-width: 4px;
  border-color: rgba(130, 225, 190, 0.24);
  border-top-color: #3ce09a;
  border-right-color: #5ae9ad;
  box-shadow: 0 0 18px rgba(90, 233, 173, 0.28);
}

body.page-wallet .loader-title {
  color: #f5fbff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.28rem;
}

body.page-wallet .loader-text {
  margin: 0;
  color: #b5c3d8;
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 420px) {
  body.page-wallet .welcome-bottom-content {
    padding-left: 0.78rem;
    padding-right: 0.78rem;
  }

  body.page-wallet .welcome-surface {
    border-radius: 18px;
    padding: 1rem 0.84rem 0.85rem;
  }

  body.page-wallet .welcome-main-title {
    font-size: clamp(1.32rem, 7vw, 1.72rem);
  }

  body.page-wallet .welcome-sub {
    font-size: 0.84rem;
    margin-bottom: 0.72rem;
  }

  body.page-wallet .user-picker-card {
    border-radius: 14px;
    padding: 0.6rem;
  }

  body.page-wallet .user-option-name {
    font-size: 0.84rem;
  }

  body.page-wallet .user-option-meta {
    font-size: 0.7rem;
  }

  body.page-wallet .welcome-btn-main {
    font-size: 0.88rem;
    padding: 0.82rem 0.9rem;
  }

  body.page-wallet .loader-card {
    border-radius: 18px;
    padding: 1rem 0.9rem 0.95rem;
  }

  body.page-wallet .loader-title {
    font-size: 0.94rem;
  }

  body.page-wallet .loader-text {
    font-size: 0.78rem;
  }
}

/* --- FINAL APP-LIKE WELCOME LAYOUT --- */
body.page-wallet .welcome-full-bg {
  background: #090f17;
}

body.page-wallet .bg-img-full {
  height: 54vh;
  object-fit: cover;
  object-position: center top;
  opacity: 0.64;
  filter: brightness(0.45) contrast(1.04) saturate(1.05);
}

body.page-wallet .welcome-bottom-content {
  position: relative;
  min-height: 100dvh;
  width: min(100%, 460px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0.95rem 1rem calc(1rem + env(safe-area-inset-bottom));
  gap: 0.62rem;
  background: linear-gradient(180deg, rgba(8, 14, 22, 0) 0%, rgba(8, 14, 22, 0.52) 41%, rgba(8, 14, 22, 0.95) 58%, rgba(8, 14, 22, 0.98) 100%);
}

body.page-wallet .welcome-hero {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

body.page-wallet .welcome-main-title {
  margin-bottom: 0.34rem;
  font-size: clamp(1.7rem, 7vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f7fbff;
}

body.page-wallet .welcome-sub {
  margin-bottom: 0.65rem;
  max-width: 38ch;
  color: #b8c8dc;
  font-size: clamp(0.9rem, 2.9vw, 1.02rem);
  line-height: 1.45;
}

body.page-wallet .welcome-install-btn {
  border: 1px solid rgba(128, 215, 180, 0.42);
  background: rgba(10, 23, 20, 0.8);
  color: #bdf0d9;
  border-radius: 999px;
  padding: 0.5rem 0.82rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  width: fit-content;
}

body.page-wallet .welcome-install-btn:active {
  transform: scale(0.98);
}

body.page-wallet .welcome-user-select {
  margin: 0;
}

body.page-wallet .user-picker-inline {
  background: transparent;
}

body.page-wallet .user-picker-label {
  margin-bottom: 0.36rem;
  color: #8de9c0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.page-wallet .user-search-input {
  width: 100%;
  border: 1px solid rgba(125, 208, 174, 0.28);
  border-radius: 12px;
  background: rgba(11, 19, 30, 0.9);
  color: #eef6ff;
  font-size: 0.95rem;
  padding: 0.82rem 0.88rem;
  outline: none;
}

body.page-wallet .user-search-input:focus {
  border-color: rgba(79, 215, 152, 0.9);
  box-shadow: 0 0 0 3px rgba(79, 215, 152, 0.2);
}

body.page-wallet .user-picker-list {
  margin-top: 0.46rem;
  display: grid;
  gap: 0.34rem;
  max-height: 172px;
  overflow: auto;
  padding-right: 0.1rem;
}

body.page-wallet .user-picker-empty {
  border: 1px dashed rgba(125, 208, 174, 0.3);
  border-radius: 10px;
  padding: 0.7rem;
  font-size: 0.8rem;
  color: #c6d5e7;
  background: rgba(10, 17, 27, 0.76);
}

body.page-wallet .user-option {
  border: 1px solid rgba(130, 209, 176, 0.18);
  border-radius: 10px;
  background: rgba(11, 19, 30, 0.88);
  padding: 0.6rem 0.66rem;
}

body.page-wallet .user-option.is-active {
  border-color: rgba(73, 213, 146, 0.8);
  background: linear-gradient(145deg, rgba(13, 46, 36, 0.76), rgba(11, 21, 31, 0.94));
  box-shadow: 0 0 0 2px rgba(73, 213, 146, 0.18);
}

body.page-wallet .user-option-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: #f2f8ff;
}

body.page-wallet .user-option-meta {
  margin-top: 0.12rem;
  color: #9cb2ce;
  font-size: 0.69rem;
}

body.page-wallet .user-picker-hint {
  margin: 0.38rem 0 0;
  min-height: 1.2rem;
  font-size: 0.75rem;
}

body.page-wallet .welcome-btn-main {
  margin-top: 0.2rem;
  border-radius: 12px;
  padding: 0.88rem 0.95rem;
}

body.page-wallet .welcome-btn-main:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 420px) {
  body.page-wallet .bg-img-full {
    height: 50vh;
  }

  body.page-wallet .welcome-bottom-content {
    padding-left: 0.82rem;
    padding-right: 0.82rem;
    gap: 0.56rem;
  }

  body.page-wallet .welcome-main-title {
    font-size: clamp(1.48rem, 7.5vw, 1.92rem);
  }

  body.page-wallet .welcome-sub {
    font-size: 0.84rem;
    margin-bottom: 0.5rem;
  }

  body.page-wallet .user-search-input {
    font-size: 0.9rem;
    padding: 0.76rem 0.8rem;
  }

  body.page-wallet .user-picker-list {
    max-height: 160px;
  }

  body.page-wallet .welcome-btn-main {
    font-size: 0.9rem;
  }
}

/* --- WELCOME DESIGN: IMAGE TOP + TITLE + COLLAPSIBLE USER LIST --- */
body.page-wallet .bg-img-full {
  height: 100dvh;
  object-position: center top;
  opacity: 0.9;
}

body.page-wallet .welcome-bottom-content {
  width: min(100%, 460px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.62rem;
  background: linear-gradient(180deg, rgba(7, 12, 19, 0) 0%, rgba(7, 12, 19, 0.56) 42%, rgba(7, 12, 19, 0.95) 58%, rgba(7, 12, 19, 0.98) 100%);
}

body.page-wallet .welcome-hero {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  width: 100%;
  max-width: 360px;
}

body.page-wallet .welcome-main-title {
  margin: 0;
  color: #f6fbff;
  font-size: clamp(1.75rem, 7vw, 2.45rem);
  letter-spacing: -0.02em;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  text-align: center;
}

body.page-wallet .welcome-sub,
body.page-wallet .welcome-install-btn {
  display: none !important;
}

body.page-wallet .welcome-user-select {
  margin: 0;
  width: 100%;
  max-width: 360px;
}

body.page-wallet .user-picker-inline {
  width: 100%;
}

body.page-wallet .user-picker-label {
  display: block;
  margin-bottom: 0.38rem;
  color: #8ce7be;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

body.page-wallet .user-accordion-toggle {
  width: 100%;
  border: 1px solid rgba(137, 218, 184, 0.3);
  border-radius: 12px;
  background: rgba(12, 20, 31, 0.92);
  color: #eaf3ff;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  padding: 0.82rem 2.2rem 0.82rem 0.86rem;
  position: relative;
}

body.page-wallet .user-accordion-toggle::after {
  content: "▾";
  position: absolute;
  right: 0.86rem;
  top: 50%;
  transform: translateY(-50%);
  color: #86e6bc;
  font-size: 0.94rem;
}

body.page-wallet .user-accordion-toggle.has-value {
  border-color: rgba(83, 216, 150, 0.78);
  box-shadow: 0 0 0 2px rgba(83, 216, 150, 0.16);
}

body.page-wallet .user-accordion-panel {
  margin-top: 0.38rem;
  border: 1px solid rgba(134, 216, 181, 0.22);
  border-radius: 12px;
  background: rgba(9, 16, 25, 0.94);
  padding: 0.44rem;
}

body.page-wallet .user-picker-list {
  display: grid;
  gap: 0.32rem;
  max-height: 170px;
  overflow: auto;
  padding-right: 0.05rem;
}

body.page-wallet .user-option {
  border: 1px solid rgba(140, 216, 185, 0.18);
  border-radius: 10px;
  background: rgba(11, 20, 31, 0.9);
  padding: 0.58rem 0.62rem;
  color: #eef5ff;
  text-align: left;
}

body.page-wallet .user-option.is-active {
  border-color: rgba(79, 215, 151, 0.85);
  background: linear-gradient(145deg, rgba(12, 43, 34, 0.74), rgba(11, 21, 31, 0.94));
  box-shadow: 0 0 0 2px rgba(79, 215, 151, 0.16);
}

body.page-wallet .user-option-name {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
}

body.page-wallet .user-option-meta {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.68rem;
  color: #98adca;
}

body.page-wallet .user-picker-empty {
  border: 1px dashed rgba(130, 208, 177, 0.34);
  border-radius: 10px;
  padding: 0.68rem;
  font-size: 0.79rem;
  color: #c5d4e8;
}

body.page-wallet .user-picker-hint {
  margin: 0.35rem 0 0;
  min-height: 1.1rem;
  font-size: 0.74rem;
  text-align: center;
}

body.page-wallet .welcome-btn-main {
  margin-top: 0.18rem;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  width: 100%;
  max-width: 360px;
}

@media (max-width: 420px) {
  body.page-wallet .bg-img-full {
    height: 100dvh;
  }

  body.page-wallet .welcome-bottom-content {
    padding-left: 0.82rem;
    padding-right: 0.82rem;
  }

  body.page-wallet .welcome-main-title {
    font-size: clamp(1.5rem, 7.5vw, 2rem);
  }

  body.page-wallet .user-accordion-toggle {
    font-size: 0.88rem;
  }

  body.page-wallet .user-picker-list {
    max-height: 154px;
  }
}

/* ==========================================================
   V2 WELCOME — MINIMALIST REDESIGN (FINAL OVERRIDE BLOCK)
   ========================================================== */

/* Reset: hide old welcome elements that conflict */
.v2-welcome .welcome-full-bg,
.v2-welcome .bg-img-full,
.v2-welcome .welcome-bottom-content,
.v2-welcome .welcome-hero,
.v2-welcome .welcome-main-title,
.v2-welcome .welcome-sub,
.v2-welcome .welcome-surface,
.v2-welcome .welcome-install-btn,
.v2-welcome .user-picker-card {
  display: none !important;
}

/* Base container */
body.page-wallet .v2-welcome {
  position: fixed !important;
  inset: 0 !important;
  z-index: 300 !important;
  background: #08080f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.page-wallet .v2-welcome-inner {
  position: relative;
  width: 100%;
  max-width: 400px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.4rem calc(2rem + env(safe-area-inset-bottom));
  gap: 0;
  z-index: 2;
}

/* Animated glow blobs */
.v2-glow {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.4;
  z-index: 0;
  animation: v2-pulse 8s ease-in-out infinite alternate;
}
.v2-glow-1 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
  top: -60px;
  right: -40px;
}
.v2-glow-2 {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, #ec4899 0%, transparent 70%);
  bottom: 10%;
  left: -50px;
  animation-delay: 4s;
}

@keyframes v2-pulse {
  0% { transform: scale(1) translate(0, 0); opacity: 0.35; }
  50% { transform: scale(1.15) translate(8px, -6px); opacity: 0.5; }
  100% { transform: scale(1) translate(-4px, 4px); opacity: 0.35; }
}

/* Card image visual */
.v2-card-visual {
  position: relative;
  width: 240px;
  height: 160px;
  margin-bottom: 2rem;
  border-radius: 20px;
  overflow: hidden;
  transform: perspective(600px) rotateY(-6deg) rotateX(4deg);
  box-shadow:
    0 20px 60px rgba(124, 58, 237, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 1;
}

.v2-card-visual:hover {
  transform: perspective(600px) rotateY(0deg) rotateX(0deg) scale(1.03);
}

.v2-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.7) saturate(1.2);
}

.v2-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 50%,
    rgba(124, 58, 237, 0.1) 100%
  );
  pointer-events: none;
}

/* Hero text */
.v2-hero-text {
  text-align: center;
  margin-bottom: 1.8rem;
  z-index: 1;
}

.v2-title {
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.6rem;
}

.v2-subtitle {
  font-size: clamp(0.85rem, 2.8vw, 0.95rem);
  color: #8b8b9e;
  line-height: 1.5;
  margin: 0;
  max-width: 28ch;
  margin-inline: auto;
}

/* User selector area v2 */
body.page-wallet .v2-user-select {
  width: 100%;
  max-width: 340px;
  margin: 0 auto 1rem !important;
  z-index: 1;
}

body.page-wallet .v2-user-select .user-picker-inline {
  background: transparent !important;
}

body.page-wallet .v2-user-select .user-picker-label {
  display: block !important;
  text-align: center !important;
  color: #a78bfa !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.55rem !important;
  font-weight: 600 !important;
}

body.page-wallet .v2-user-select .user-accordion-toggle {
  width: 100% !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  border-radius: 14px !important;
  background: rgba(15, 15, 25, 0.9) !important;
  color: #e2e2f0 !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 0.85rem 2.4rem 0.85rem 1rem !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.3s ease !important;
}

body.page-wallet .v2-user-select .user-accordion-toggle::after {
  color: #a78bfa !important;
}

body.page-wallet .v2-user-select .user-accordion-toggle:hover {
  border-color: rgba(139, 92, 246, 0.45) !important;
  background: rgba(20, 18, 36, 0.95) !important;
}

body.page-wallet .v2-user-select .user-accordion-toggle.has-value {
  border-color: rgba(139, 92, 246, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.12), 0 4px 16px rgba(124, 58, 237, 0.15) !important;
}

body.page-wallet .v2-user-select .user-accordion-panel {
  margin-top: 0.5rem !important;
  border: 1px solid rgba(139, 92, 246, 0.18) !important;
  border-radius: 14px !important;
  background: rgba(12, 12, 22, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  padding: 0.5rem !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

body.page-wallet .v2-user-select .user-picker-list {
  display: grid !important;
  gap: 0.35rem !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  padding-right: 0.15rem !important;
}

/* Custom scrollbar for user list */
body.page-wallet .v2-user-select .user-picker-list::-webkit-scrollbar {
  width: 4px;
}
body.page-wallet .v2-user-select .user-picker-list::-webkit-scrollbar-track {
  background: transparent;
}
body.page-wallet .v2-user-select .user-picker-list::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 4px;
}

body.page-wallet .v2-user-select .user-option {
  border: 1px solid rgba(139, 92, 246, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(18, 16, 32, 0.8) !important;
  padding: 0.72rem 0.8rem !important;
  color: #e8e8f5 !important;
  text-align: left !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

body.page-wallet .v2-user-select .user-option:hover {
  border-color: rgba(139, 92, 246, 0.35) !important;
  background: rgba(25, 22, 45, 0.9) !important;
  transform: translateX(3px) !important;
}

body.page-wallet .v2-user-select .user-option:active {
  transform: scale(0.99) !important;
}

body.page-wallet .v2-user-select .user-option.is-active {
  border-color: rgba(139, 92, 246, 0.75) !important;
  background: linear-gradient(145deg, rgba(40, 24, 80, 0.6), rgba(18, 14, 35, 0.9)) !important;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15), 0 4px 20px rgba(124, 58, 237, 0.12) !important;
}

body.page-wallet .v2-user-select .user-option-name {
  display: block !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #f0f0ff !important;
  line-height: 1.3 !important;
}

body.page-wallet .v2-user-select .user-option-meta {
  display: block !important;
  margin-top: 0.15rem !important;
  font-size: 0.7rem !important;
  color: #7b7b95 !important;
  line-height: 1.35 !important;
}

body.page-wallet .v2-user-select .user-picker-hint {
  margin: 0.45rem 0 0 !important;
  text-align: center !important;
  font-size: 0.74rem !important;
  color: #6b6b82 !important;
  min-height: 1.1rem !important;
}

body.page-wallet .v2-user-select .user-picker-hint.is-admin {
  color: #fbbf24 !important;
}

body.page-wallet .v2-user-select .user-picker-hint.is-user {
  color: #a78bfa !important;
}

body.page-wallet .v2-user-select .user-picker-empty {
  border: 1px dashed rgba(139, 92, 246, 0.25) !important;
  border-radius: 12px !important;
  padding: 0.75rem !important;
  font-size: 0.8rem !important;
  color: #8b8b9e !important;
  background: rgba(15, 14, 28, 0.7) !important;
  text-align: center !important;
}

/* Enter button */
body.page-wallet .v2-btn-enter {
  width: 100%;
  max-width: 340px;
  border: none;
  border-radius: 14px;
  padding: 0.95rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #7c3aed 100%);
  background-size: 200% auto;
  color: #fff;
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.35s ease;
  z-index: 1;
  margin-bottom: 0.5rem;
}

body.page-wallet .v2-btn-enter:hover:not(:disabled) {
  background-position: right center;
  box-shadow: 0 12px 36px rgba(124, 58, 237, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

body.page-wallet .v2-btn-enter:active:not(:disabled) {
  transform: translateY(0);
}

body.page-wallet .v2-btn-enter:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

body.page-wallet .v2-btn-enter svg {
  transition: transform 0.3s ease;
}

body.page-wallet .v2-btn-enter:hover:not(:disabled) svg {
  transform: translateX(3px);
}

body.page-wallet .v2-btn-danger {
  background: rgba(30, 15, 20, 0.85) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.12) !important;
}

body.page-wallet .v2-btn-danger:hover {
  border-color: rgba(239, 68, 68, 0.5) !important;
  background: rgba(40, 18, 25, 0.95) !important;
}

/* Entry animation */
@keyframes v2-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes v2-scaleIn {
  from { opacity: 0; transform: perspective(600px) rotateY(-6deg) rotateX(4deg) scale(0.9); }
  to { opacity: 1; transform: perspective(600px) rotateY(-6deg) rotateX(4deg) scale(1); }
}

.v2-card-visual {
  animation: v2-scaleIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.1s both;
}

.v2-hero-text {
  animation: v2-fadeUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.25s both;
}

.v2-user-select {
  animation: v2-fadeUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
}

body.page-wallet .v2-btn-enter {
  animation: v2-fadeUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.55s both;
}

/* Responsive */
@media (max-width: 420px) {
  body.page-wallet .v2-welcome-inner {
    padding: 2rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom));
  }

  .v2-card-visual {
    width: 200px;
    height: 135px;
    margin-bottom: 1.5rem;
  }

  .v2-title {
    font-size: clamp(1.8rem, 8vw, 2.3rem);
  }
}

@media (max-width: 360px) {
  .v2-card-visual {
    width: 180px;
    height: 120px;
  }

  .v2-title {
    font-size: 1.7rem;
  }
}

@media (min-height: 750px) {
  body.page-wallet .v2-welcome-inner {
    gap: 0;
  }

  .v2-card-visual {
    margin-bottom: 2.5rem;
  }

  .v2-hero-text {
    margin-bottom: 2.2rem;
  }
}

/* Small height devices - scroll mode */
@media (max-height: 620px) {
  body.page-wallet .v2-welcome-inner {
    justify-content: flex-start;
    padding-top: 1.5rem;
  }

  .v2-card-visual {
    width: 180px;
    height: 120px;
    margin-bottom: 1.2rem;
  }

  .v2-hero-text {
    margin-bottom: 1.2rem;
  }
}

/* ==========================================================
   FULLSCREEN LOGIN - FINAL UNIFIED STYLE
   ========================================================== */
body.page-wallet .login-fullscreen {
  --login-bg-a: #071224;
  --login-bg-b: #0d1a26;
  --login-accent: #6c5ce7;
  --login-accent-strong: #5947db;
  --login-text-main: #f8fbff;
  --login-text-sub: #aab3bd;
  --login-border-soft: rgba(170, 188, 207, 0.22);
  --login-focus: 0 0 0 3px rgba(108, 92, 231, 0.45);
  position: fixed;
  inset: 0;
  z-index: 320;
  background: linear-gradient(160deg, var(--login-bg-a), var(--login-bg-b));
  overflow: hidden;
}

body.page-wallet .login-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.55) brightness(0.38) contrast(1.06);
}

body.page-wallet .login-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 90% at 90% 0%, rgba(108, 92, 231, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(4, 10, 20, 0.52) 0%, rgba(4, 10, 20, 0.9) 60%, rgba(4, 10, 20, 0.96) 100%);
}

body.page-wallet .login-content {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 2.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.72rem;
  box-sizing: border-box;
  animation: login-content-enter 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.page-wallet .login-kicker {
  margin: 0;
  color: #c8d2de;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.page-wallet .login-title {
  margin: 0;
  color: var(--login-text-main);
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-size: clamp(1.9rem, 8vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

body.page-wallet .login-copy {
  margin: 0;
  color: var(--login-text-sub);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: clamp(0.86rem, 2.9vw, 0.96rem);
  line-height: 1.5;
  max-width: 46ch;
}

body.page-wallet .nw-user-select {
  width: 100%;
  margin: 0.15rem 0 0.65rem;
}

body.page-wallet .nw-inline {
  width: 100%;
}

body.page-wallet .nw-label {
  display: block;
  color: #d5deea;
  margin-bottom: 0.36rem;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body.page-wallet .nw-toggle {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--login-border-soft);
  border-radius: 12px;
  background: rgba(6, 13, 24, 0.78);
  color: var(--login-text-main);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  padding: 0.82rem 2.25rem 0.82rem 2.1rem;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.page-wallet .nw-toggle::before {
  content: "•";
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--login-accent);
  font-size: 1.05rem;
}

body.page-wallet .nw-toggle::after {
  content: "v";
  position: absolute;
  right: 0.86rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9eb0c7;
  font-size: 0.9rem;
}

body.page-wallet .nw-toggle:hover,
body.page-wallet .nw-toggle.has-value {
  border-color: rgba(108, 92, 231, 0.76);
}

body.page-wallet .nw-toggle:focus-visible {
  outline: none;
  box-shadow: var(--login-focus);
}

body.page-wallet .nw-panel {
  margin-top: 0.34rem;
  border: 1px solid rgba(155, 172, 196, 0.22);
  border-radius: 12px;
  background: rgba(8, 14, 24, 0.94);
  padding: 0.42rem;
}

body.page-wallet .nw-list {
  display: grid;
  gap: 0.28rem;
  max-height: 165px;
  overflow: auto;
  padding-right: 0.08rem;
}

body.page-wallet .nw-option {
  min-height: 44px;
  border: 1px solid rgba(150, 168, 192, 0.16);
  border-radius: 10px;
  background: rgba(17, 26, 40, 0.72);
  padding: 0.56rem 0.62rem;
  text-align: left;
  color: var(--login-text-main);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

body.page-wallet .nw-option:hover {
  border-color: rgba(108, 92, 231, 0.45);
}

body.page-wallet .nw-option:focus-visible {
  outline: none;
  box-shadow: var(--login-focus);
}

body.page-wallet .nw-option.is-active {
  border-color: rgba(108, 92, 231, 0.82);
  background: linear-gradient(145deg, rgba(56, 45, 120, 0.78), rgba(16, 27, 43, 0.92));
}

body.page-wallet .nw-option-name {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
}

body.page-wallet .nw-option-meta {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.69rem;
  color: #b2c0d2;
}

body.page-wallet .nw-empty {
  border: 1px dashed rgba(150, 168, 192, 0.33);
  border-radius: 10px;
  padding: 0.62rem;
  font-size: 0.76rem;
  color: #b2c0d2;
}

body.page-wallet .nw-hint {
  margin: 0.4rem 0 0;
  min-height: 1.1rem;
  font-size: 0.75rem;
  color: #aab3bd;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

body.page-wallet .nw-hint.is-error {
  color: #ffc2c2;
}

body.page-wallet .nw-hint.is-admin {
  color: #ffd68e;
}

body.page-wallet .nw-hint.is-user {
  color: #bcd6ff;
}

body.page-wallet .login-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

body.page-wallet .login-btn {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, var(--login-accent), var(--login-accent-strong));
  color: #ffffff;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.58rem;
  padding: 0.78rem 0.95rem;
  transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

body.page-wallet .login-btn-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.9rem;
}

body.page-wallet .login-btn:disabled,
body.page-wallet .login-btn.is-disabled {
  opacity: 0.55;
  filter: grayscale(0.24);
  cursor: not-allowed;
}

body.page-wallet .login-btn:not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 30px rgba(53, 43, 120, 0.45);
}

body.page-wallet .login-btn:focus-visible {
  outline: none;
  box-shadow: var(--login-focus), 0 14px 30px rgba(53, 43, 120, 0.45);
}

body.page-wallet .login-btn-logout {
  min-height: 44px;
  border-radius: 10px;
  background: rgba(47, 24, 29, 0.9);
  border: 1px solid rgba(240, 124, 124, 0.34);
  color: #ffc5c5;
}

@keyframes login-content-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  body.page-wallet .login-content {
    width: min(100%, 680px);
    min-height: 100dvh;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.82rem;
  }

  body.page-wallet .login-kicker,
  body.page-wallet .login-title,
  body.page-wallet .login-copy {
    text-align: center;
  }

  body.page-wallet .login-title {
    font-size: 2.35rem;
    max-width: 18ch;
  }

  body.page-wallet .login-copy {
    max-width: 52ch;
  }

  body.page-wallet .nw-user-select,
  body.page-wallet .login-actions {
    width: 100%;
    max-width: 440px;
  }
}

@media (min-width: 1024px) {
  body.page-wallet .login-content {
    width: min(100%, 860px);
    min-height: 100dvh;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.92rem;
  }

  body.page-wallet .login-kicker,
  body.page-wallet .login-title,
  body.page-wallet .login-copy {
    text-align: center;
  }

  body.page-wallet .login-title {
    font-size: 2.55rem;
    max-width: 18ch;
  }

  body.page-wallet .login-copy {
    font-size: 1rem;
    max-width: 52ch;
  }

  body.page-wallet .nw-user-select,
  body.page-wallet .login-actions {
    width: 100%;
    max-width: 520px;
  }
}

@media (max-width: 480px) {
  body.page-wallet .login-content {
    padding: 1.7rem 0.95rem calc(0.95rem + env(safe-area-inset-bottom));
  }

  body.page-wallet .login-title {
    font-size: clamp(1.72rem, 8.2vw, 2.05rem);
  }

  body.page-wallet .login-copy {
    font-size: 0.87rem;
  }

  body.page-wallet .nw-toggle,
  body.page-wallet .login-btn {
    min-height: 50px;
  }
}

@media (max-height: 650px) and (max-width: 767px) {
  body.page-wallet .login-content {
    justify-content: flex-start;
    padding-top: 1.2rem;
  }
}

/* ==========================================================
   WALLET FINAL THEME OVERRIDE
   Neutral Black + Accent #95c11f
   ========================================================== */
body.page-wallet {
  --wl-bg: #050505;
  --wl-bg-soft: #0b0b0b;
  --wl-panel: #111111;
  --wl-panel-2: #161616;
  --wl-line: #262626;
  --wl-text: #f4f4f4;
  --wl-muted: #b7b7b7;
  --wl-accent: #95c11f;
  --wl-accent-strong: #a7d52e;
  --wl-danger: #f17878;
  background: var(--wl-bg) !important;
  color: var(--wl-text);
}

/* Login fullscreen */
body.page-wallet .login-fullscreen {
  background: var(--wl-bg) !important;
}

body.page-wallet .login-bg-media {
  filter: grayscale(0.3) saturate(0.35) brightness(0.28) contrast(1.08) !important;
}

body.page-wallet .login-overlay {
  background:
    radial-gradient(75% 55% at 82% 0%, rgba(149, 193, 31, 0.12), transparent 68%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.68) 0%, rgba(5, 5, 5, 0.92) 55%, rgba(5, 5, 5, 0.98) 100%) !important;
}

body.page-wallet .login-kicker {
  color: #d2d2d2;
}

body.page-wallet .login-title {
  color: #ffffff;
}

body.page-wallet .login-copy {
  color: var(--wl-muted);
}

body.page-wallet .nw-label {
  color: #d7d7d7;
}

body.page-wallet .nw-toggle {
  background: rgba(9, 9, 9, 0.88) !important;
  border-color: #2f2f2f !important;
  color: var(--wl-text) !important;
}

body.page-wallet .nw-toggle::before {
  color: var(--wl-accent) !important;
}

body.page-wallet .nw-toggle::after {
  color: #a6a6a6 !important;
}

body.page-wallet .nw-toggle:hover,
body.page-wallet .nw-toggle.has-value {
  border-color: rgba(149, 193, 31, 0.75) !important;
}

body.page-wallet .nw-toggle:focus-visible,
body.page-wallet .nw-option:focus-visible,
body.page-wallet .login-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(149, 193, 31, 0.45) !important;
}

body.page-wallet .nw-panel {
  background: #0d0d0d !important;
  border-color: #2f2f2f !important;
}

body.page-wallet .nw-option {
  background: #141414 !important;
  border-color: #2f2f2f !important;
  color: #f2f2f2 !important;
}

body.page-wallet .nw-option:hover {
  border-color: rgba(149, 193, 31, 0.55) !important;
}

body.page-wallet .nw-option.is-active {
  background: linear-gradient(145deg, rgba(149, 193, 31, 0.22), #191919) !important;
  border-color: rgba(149, 193, 31, 0.85) !important;
}

body.page-wallet .nw-option-meta,
body.page-wallet .nw-hint,
body.page-wallet .nw-empty {
  color: var(--wl-muted) !important;
}

body.page-wallet .login-btn {
  background: linear-gradient(135deg, var(--wl-accent), var(--wl-accent-strong)) !important;
  color: #101010 !important;
  box-shadow: 0 10px 24px rgba(149, 193, 31, 0.22);
}

body.page-wallet .login-btn-icon {
  background: rgba(16, 16, 16, 0.18) !important;
  color: #111111 !important;
}

body.page-wallet .login-btn:not(:disabled):hover {
  box-shadow: 0 14px 28px rgba(149, 193, 31, 0.3) !important;
  filter: brightness(1.03) !important;
}

body.page-wallet .login-btn:disabled,
body.page-wallet .login-btn.is-disabled {
  background: #3a3a3a !important;
  color: #9a9a9a !important;
  opacity: 1 !important;
}

body.page-wallet .login-btn-logout {
  background: #1a1111 !important;
  color: #ffcccc !important;
  border: 1px solid #5a2d2d !important;
}

/* Main dashboard */
body.page-wallet #mainContent.wallet-bg {
  background:
    radial-gradient(780px 280px at 85% 0%, rgba(149, 193, 31, 0.14), transparent 70%),
    linear-gradient(180deg, #050505 0%, #080808 55%, #050505 100%) !important;
}

body.page-wallet .wallet-header {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--wl-line) !important;
  box-shadow: none !important;
}

body.page-wallet .wallet-logo,
body.page-wallet #walletFecha,
body.page-wallet #saludoUsuario {
  color: var(--wl-text) !important;
}

body.page-wallet .wallet-action-top,
body.page-wallet #btnIngreso {
  background: linear-gradient(135deg, var(--wl-accent), var(--wl-accent-strong)) !important;
  color: #111111 !important;
  border: none !important;
}

body.page-wallet .wallet-btn-logout {
  border-color: #3a3a3a !important;
  background: #121212 !important;
  color: #d8d8d8 !important;
}

body.page-wallet .wallet-balance-card {
  background: linear-gradient(180deg, #121212, #0f0f0f) !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

body.page-wallet .wallet-balance-label,
body.page-wallet .wallet-actions-title,
body.page-wallet .wallet-mov-title {
  color: var(--wl-accent) !important;
}

body.page-wallet .wallet-balance-value {
  color: #ffffff !important;
}

body.page-wallet .wallet-action-btn {
  background: #131313 !important;
  border: 1px solid #2d2d2d !important;
  color: #f1f1f1 !important;
  box-shadow: none !important;
}

body.page-wallet .wallet-action-btn::before {
  background: #1a1a1a !important;
  border: 1px solid #2d2d2d !important;
  color: var(--wl-accent) !important;
}

body.page-wallet .wallet-action-btn:hover {
  border-color: rgba(149, 193, 31, 0.75) !important;
  background: #171717 !important;
}

body.page-wallet .wallet-promo-content {
  border: 1px solid #2f2f2f !important;
  background:
    linear-gradient(140deg, rgba(149, 193, 31, 0.16), rgba(17, 17, 17, 0.98) 42%),
    #121212 !important;
}

body.page-wallet .wallet-promo-title {
  color: #ffffff !important;
}

body.page-wallet .wallet-promo-text {
  color: var(--wl-muted) !important;
}

body.page-wallet .wallet-promo-btn,
body.page-wallet .wallet-btn-resumen {
  background: linear-gradient(135deg, var(--wl-accent), var(--wl-accent-strong)) !important;
  color: #101010 !important;
  border: none !important;
}

body.page-wallet .wallet-movimientos {
  background: #0f0f0f !important;
  border: 1px solid #282828 !important;
}

body.page-wallet .wallet-mov-item {
  background: #141414 !important;
  border: 1px solid #292929 !important;
}

body.page-wallet .wallet-mov-meta strong {
  color: #f3f3f3 !important;
}

body.page-wallet .wallet-mov-meta small,
body.page-wallet .wallet-empty-state p,
body.page-wallet .wallet-empty-state h3 {
  color: var(--wl-muted) !important;
}

body.page-wallet .wallet-mov-amount.is-in {
  color: var(--wl-accent) !important;
}

body.page-wallet .wallet-mov-amount.is-out {
  color: var(--wl-danger) !important;
}

/* Responsive tuning */
@media (max-width: 900px) {
  body.page-wallet .wallet-main,
  body.page-wallet .wallet-header {
    width: min(100%, 430px) !important;
  }
}

@media (max-width: 767px) {
  body.page-wallet .login-content {
    width: 100%;
    padding-left: 0.95rem;
    padding-right: 0.95rem;
    justify-content: flex-end;
    align-items: stretch;
    text-align: left;
  }

  body.page-wallet .login-title,
  body.page-wallet .login-copy,
  body.page-wallet .login-kicker {
    text-align: left;
  }
}

/* ==========================================================
   WALLET DASHBOARD FLAT PRO (NO CARDS) - MOBILE + DESKTOP
   ========================================================== */
body.page-wallet #mainContent.wallet-bg {
  background:
    radial-gradient(820px 300px at 90% 0%, rgba(149, 193, 31, 0.13), transparent 72%),
    linear-gradient(180deg, #050505 0%, #070707 55%, #050505 100%) !important;
  min-height: 100dvh;
}

body.page-wallet .wallet-header,
body.page-wallet .wallet-main {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-wallet .wallet-header {
  padding: 0.95rem 1rem 0.78rem !important;
  margin-bottom: 0.6rem !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #242424 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.page-wallet .wallet-main {
  padding: 0 1rem calc(1.1rem + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

body.page-wallet .wallet-balance-card {
  margin: 0 !important;
  padding: 0.15rem 0 0.85rem !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #242424 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

body.page-wallet .wallet-balance-label {
  color: #95c11f !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.74rem !important;
  margin-bottom: 0.38rem !important;
}

body.page-wallet .wallet-balance-value {
  color: #ffffff !important;
  font-size: clamp(2.05rem, 10vw, 3.35rem) !important;
  line-height: 1;
  letter-spacing: -0.02em !important;
  text-align: left !important;
}

body.page-wallet .wallet-actions-title {
  margin: 0.1rem 0 0.1rem !important;
  color: #95c11f !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

body.page-wallet .wallet-actions {
  margin: 0 0 0.35rem !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem;
}

body.page-wallet .wallet-action-btn {
  min-height: 72px !important;
  border-radius: 10px !important;
  background: #111111 !important;
  border: 1px solid #2a2a2a !important;
  color: #f2f2f2 !important;
  box-shadow: none !important;
  font-size: 0.92rem !important;
  font-weight: 700;
}

body.page-wallet .wallet-action-btn::before {
  background: #171717 !important;
  border: 1px solid #2a2a2a !important;
  color: #95c11f !important;
}

body.page-wallet .wallet-action-btn:hover {
  transform: none !important;
  background: #151515 !important;
  border-color: rgba(149, 193, 31, 0.75) !important;
}

body.page-wallet .wallet-promo {
  margin: 0.15rem 0 !important;
}

body.page-wallet .wallet-promo-content {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid #242424 !important;
  border-bottom: 1px solid #242424 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.82rem 0 !important;
}

body.page-wallet .wallet-promo-title {
  color: #f2f2f2 !important;
  font-size: 1.05rem !important;
  margin-bottom: 0.16rem !important;
}

body.page-wallet .wallet-promo-text {
  color: #b7b7b7 !important;
  font-size: 0.9rem !important;
  margin-bottom: 0.56rem !important;
}

body.page-wallet .wallet-promo-btn,
body.page-wallet .wallet-btn-resumen {
  border-radius: 999px !important;
  background: linear-gradient(135deg, #95c11f, #a7d52e) !important;
  color: #121212 !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* Promo card contrast + centered content */
body.page-wallet .wallet-promo-content {
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(149, 193, 31, 0.24), rgba(149, 193, 31, 0.03) 40%, transparent 70%),
    linear-gradient(180deg, #171717 0%, #0f0f0f 100%) !important;
  border: 1px solid #343434 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38) !important;
  text-align: center !important;
  align-items: center !important;
}

body.page-wallet .wallet-promo-title,
body.page-wallet .wallet-promo-text {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-wallet .wallet-promo-title {
  color: #f8f8f8 !important;
}

body.page-wallet .wallet-promo-text {
  color: #d0d0d0 !important;
  max-width: 42ch;
}

body.page-wallet .wallet-promo-btn,
body.page-wallet #btnPromoResumen {
  align-self: center !important;
}

@media (max-width: 767px) {
  body.page-wallet .wallet-promo-content {
    border-radius: 14px !important;
    padding: 0.82rem 0.72rem !important;
  }
}

body.page-wallet .wallet-movimientos {
  margin: 0 !important;
  padding: 0.25rem 0 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-top: 1px solid #242424 !important;
}

body.page-wallet .wallet-mov-title {
  margin: 0 0 0.45rem !important;
  color: #95c11f !important;
  font-size: 0.84rem !important;
}

body.page-wallet .wallet-mov-item {
  margin: 0 !important;
  padding: 0.7rem 0.08rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #232323 !important;
}

body.page-wallet .wallet-mov-meta strong {
  color: #f2f2f2 !important;
  font-size: 0.93rem !important;
}

body.page-wallet .wallet-mov-meta small {
  color: #a6a6a6 !important;
  font-size: 0.74rem !important;
}

body.page-wallet .wallet-mov-amount.is-in {
  color: #95c11f !important;
}

body.page-wallet .wallet-mov-amount.is-out {
  color: #f17878 !important;
}

body.page-wallet .wallet-empty-state {
  background: transparent !important;
  border: 1px dashed #2d2d2d !important;
  border-radius: 10px !important;
}

/* Desktop layout: same style language, only structure expands */
@media (min-width: 1024px) {
  body.page-wallet .wallet-main {
    grid-template-columns: 1.12fr 0.88fr;
    gap: 0.9rem 2rem;
    align-items: start;
  }

  body.page-wallet .wallet-balance-card {
    grid-column: 1 / -1;
    padding-bottom: 1rem !important;
  }

  body.page-wallet .wallet-actions-title,
  body.page-wallet .wallet-actions {
    grid-column: 1 / 2;
  }

  body.page-wallet .wallet-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0 !important;
  }

  body.page-wallet .wallet-action-btn {
    min-height: 86px !important;
  }

  body.page-wallet .wallet-promo {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    margin: 0 !important;
  }

  body.page-wallet .wallet-movimientos {
    grid-column: 1 / -1;
  }

  body.page-wallet .wallet-balance-value {
    font-size: clamp(2.8rem, 5vw, 4.3rem) !important;
  }
}

/* Desktop distribution final fix (requested layout) */
@media (min-width: 1024px) {
  body.page-wallet .wallet-header {
    margin-top: 0 !important;
    margin-bottom: 0.45rem !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.55rem !important;
    min-height: 0 !important;
  }

  body.page-wallet .wallet-main {
    width: min(100%, 1240px) !important;
    max-width: 1240px !important;
    grid-template-columns: 0.92fr 1.08fr !important;
    grid-template-areas:
      "balance movs"
      "actionsTitle movs"
      "actions movs"
      "promo movs" !important;
    gap: 0.55rem 2rem !important;
    align-items: start !important;
  }

  body.page-wallet .wallet-balance-card {
    grid-area: balance !important;
    margin-bottom: 0.2rem !important;
  }

  body.page-wallet .wallet-actions-title {
    grid-area: actionsTitle !important;
    margin: 0.08rem 0 0.1rem !important;
  }

  body.page-wallet .wallet-actions {
    grid-area: actions !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin-bottom: 0.35rem !important;
  }

  body.page-wallet .wallet-promo {
    grid-area: promo !important;
    margin-top: 0.05rem !important;
  }

  body.page-wallet .wallet-movimientos {
    grid-area: movs !important;
    border-top: none !important;
    border-left: 1px solid #232323 !important;
    padding: 0 0 0 1.25rem !important;
    margin: 0 !important;
    min-height: 100% !important;
  }

  body.page-wallet .wallet-mov-title {
    margin-bottom: 0.55rem !important;
  }

  body.page-wallet #wallet-mov-list {
    max-height: calc(100dvh - 255px);
    overflow: auto;
    padding-right: 0.2rem;
  }
}

/* Desktop full-height fit: remove visible empty areas */
@media (min-width: 1024px) {
  body.page-wallet #mainContent.wallet-bg {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  body.page-wallet .wallet-main {
    flex: 1 1 auto;
    min-height: calc(100dvh - 132px);
    grid-template-rows: auto auto auto 1fr !important;
  }

  body.page-wallet .wallet-promo {
    align-self: stretch;
    height: 100%;
  }

  body.page-wallet .wallet-promo-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.page-wallet .wallet-movimientos {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100dvh - 190px);
  }

  body.page-wallet #wallet-mov-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow: auto;
    padding-right: 0.25rem;
    padding-bottom: 0.35rem;
  }
}

/* Desktop flat layout: no cards, full-width composition */
@media (min-width: 1024px) {
  body.page-wallet .wallet-header {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin: 0 auto 1rem !important;
    padding: 1rem 0.4rem 0.9rem !important;
    border-bottom: 1px solid #242424 !important;
  }

  body.page-wallet .wallet-main {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 0.4rem 1.2rem !important;
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1rem 2rem;
    align-items: start;
  }

  body.page-wallet .wallet-balance-card {
    grid-column: 1 / -1;
    padding: 0.1rem 0 1rem !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #242424 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  body.page-wallet .wallet-balance-label {
    margin-bottom: 0.35rem !important;
    font-size: 0.82rem !important;
  }

  body.page-wallet .wallet-balance-value {
    font-size: clamp(2.6rem, 5vw, 4.2rem) !important;
    letter-spacing: -0.02em !important;
  }

  body.page-wallet .wallet-actions-title {
    grid-column: 1 / 2;
    margin: 0 0 -0.35rem !important;
    color: #95c11f !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
  }

  body.page-wallet .wallet-actions {
    grid-column: 1 / 2;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
  }

  body.page-wallet .wallet-action-btn {
    border-radius: 10px !important;
    min-height: 90px !important;
    background: #121212 !important;
    border: 1px solid #282828 !important;
  }

  body.page-wallet .wallet-promo {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    margin: 0 !important;
  }

  body.page-wallet .wallet-promo-content {
    min-height: 100%;
    padding: 1rem 0 !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #242424 !important;
    border-bottom: 1px solid #242424 !important;
    border-radius: 0 !important;
  }

  body.page-wallet .wallet-movimientos {
    grid-column: 1 / -1;
    margin: 0 !important;
    padding: 0.35rem 0 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top: 1px solid #242424 !important;
  }

  body.page-wallet .wallet-mov-item {
    margin: 0 !important;
    padding: 0.75rem 0.15rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #232323 !important;
  }

  body.page-wallet .wallet-mov-row {
    align-items: center !important;
  }

  body.page-wallet .wallet-empty-state {
    background: transparent !important;
    border: 1px dashed #2d2d2d !important;
    border-radius: 10px !important;
  }
}

/* Loader final override: pure black experience */
body.page-wallet .loader-bg {
  background: #050505 !important;
}

body.page-wallet .loader-shell {
  width: min(100%, 420px) !important;
}

body.page-wallet .loader-card {
  background: #0e0e0e !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}

body.page-wallet .loader-brand {
  color: #95c11f !important;
  border-color: rgba(149, 193, 31, 0.36) !important;
  background: rgba(149, 193, 31, 0.12) !important;
}

body.page-wallet .loader {
  border-color: #2b2b2b !important;
  border-top-color: #95c11f !important;
  border-right-color: #95c11f !important;
  box-shadow: 0 0 16px rgba(149, 193, 31, 0.28) !important;
}

body.page-wallet .loader-title {
  color: #f2f2f2 !important;
}

body.page-wallet .loader-text {
  color: #b7b7b7 !important;
}

/* ==========================================================
   DESKTOP FINAL FIT OVERRIDE (100% width/height, no page scroll)
   ========================================================== */
@media (min-width: 1024px) {
  html, body {
    overflow: hidden;
  }

  body.page-wallet #mainContent.wallet-bg {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  body.page-wallet .wallet-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.42rem 2.4rem 0.46rem !important;
    border-bottom: 1px solid #232323 !important;
  }

  body.page-wallet .wallet-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.5rem 1.5rem 0.75rem !important;
    height: calc(100dvh - 74px) !important;
    min-height: calc(100dvh - 74px) !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 0.78fr 1.52fr !important;
    grid-template-areas:
      "balance movs"
      "actionsTitle movs"
      "actions movs"
      "promo movs" !important;
    grid-template-rows: auto auto auto 1fr !important;
    gap: 0.45rem 1rem !important;
    align-items: start !important;
  }

  body.page-wallet .wallet-user {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  body.page-wallet #btnIngreso.wallet-action-top,
  body.page-wallet #btnRequerimientos.wallet-action-top {
    min-height: 36px !important;
    padding: 0.42rem 0.82rem !important;
    border-radius: 999px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    box-shadow: inset 0 0 0 1px rgba(149, 193, 31, 0.2) !important;
  }

  body.page-wallet #btnIngreso.wallet-action-top::before,
  body.page-wallet #btnRequerimientos.wallet-action-top::before {
    width: 0.8rem !important;
    height: 0.8rem !important;
    font-size: 0.62rem !important;
  }

  body.page-wallet #btnIngreso.wallet-action-top,
  body.page-wallet #btnRequerimientos.wallet-action-top {
    min-height: 38px !important;
    padding: 0.5rem 0.92rem !important;
    border-radius: 999px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    box-shadow: none !important;
    align-self: center !important;
  }

  body.page-wallet #btnIngreso.wallet-action-top::before,
  body.page-wallet #btnRequerimientos.wallet-action-top::before {
    width: 0.88rem !important;
    height: 0.88rem !important;
    font-size: 0.68rem !important;
  }

  body.page-wallet .wallet-btn-logout {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
  }

  body.page-wallet .wallet-balance-card {
    grid-area: balance !important;
    margin: 0 !important;
    padding: 0.2rem 0 0.75rem !important;
    border: none !important;
    border-bottom: 1px solid #242424 !important;
    background: transparent !important;
  }

  body.page-wallet .wallet-balance-label {
    font-size: 0.86rem !important;
    margin-bottom: 0.4rem !important;
  }

  body.page-wallet .wallet-balance-value {
    font-size: clamp(3rem, 5.2vw, 4.8rem) !important;
    line-height: 0.96 !important;
  }

  body.page-wallet .wallet-actions-title {
    grid-area: actionsTitle !important;
    margin: 0.05rem 0 !important;
    font-size: 1.18rem !important;
  }

  body.page-wallet .wallet-actions {
    grid-area: actions !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }

  body.page-wallet .wallet-action-btn {
    min-height: 92px !important;
    font-size: 1rem !important;
  }

  body.page-wallet .wallet-promo {
    grid-area: promo !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  body.page-wallet .wallet-promo-content {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0.55rem 0 !important;
  }

  body.page-wallet .wallet-promo-title {
    font-size: 1.9rem !important;
    line-height: 1.06 !important;
    margin-bottom: 0.3rem !important;
  }

  body.page-wallet .wallet-promo-text {
    font-size: 1rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.6rem !important;
  }

  body.page-wallet .wallet-movimientos {
    grid-area: movs !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 0.75rem !important;
    border: none !important;
    border-left: 1px solid #232323 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.page-wallet .wallet-mov-title {
    font-size: 0.94rem !important;
    margin-bottom: 0.45rem !important;
  }

  body.page-wallet #wallet-mov-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    width: 100% !important;
    padding-right: 0 !important;
  }

  body.page-wallet .wallet-mov-item {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    padding: 0.63rem 0.12rem !important;
  }

  body.page-wallet .wallet-mov-row {
    width: 100% !important;
  }

  body.page-wallet .wallet-mov-right {
    margin-left: auto !important;
    min-width: 220px !important;
    justify-content: flex-end !important;
  }

  body.page-wallet .wallet-mov-meta strong {
    font-size: 1.01rem !important;
  }

  body.page-wallet .wallet-mov-meta small {
    font-size: 0.78rem !important;
  }

  body.page-wallet .wallet-mov-amount {
    font-size: 1.02rem !important;
  }
}

/* Hard desktop width override for movimientos (remove right blank area) */
@media (min-width: 1024px) {
  body.page-wallet .wallet-main {
    grid-template-columns: minmax(520px, 40%) minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }

  body.page-wallet .wallet-main > * {
    max-width: none !important;
  }

  body.page-wallet .wallet-movimientos,
  body.page-wallet #wallet-mov-list,
  body.page-wallet .wallet-mov-item,
  body.page-wallet .wallet-mov-row {
    width: 100% !important;
    max-width: none !important;
  }

  body.page-wallet .wallet-movimientos {
    padding-left: 1.1rem !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }

  body.page-wallet .wallet-mov-right {
    margin-left: auto !important;
    min-width: 250px !important;
  }
}

/* Mobile refined wallet UI */
@media (max-width: 767px) {
  body.page-wallet .wallet-header {
    padding: 0.5rem 0.72rem 0.45rem !important;
    margin-bottom: 0.35rem !important;
  }

  body.page-wallet .wallet-logo {
    font-size: 0.66rem !important;
    line-height: 1.2;
  }

  body.page-wallet #saludoUsuario {
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
  }

  body.page-wallet #walletFecha {
    font-size: 0.6rem !important;
  }

  body.page-wallet .wallet-user {
    gap: 0.35rem !important;
  }

  body.page-wallet #btnIngreso.wallet-action-top {
    min-height: 36px !important;
    padding: 0.38rem 0.7rem !important;
    font-size: 0.74rem !important;
    border-radius: 999px !important;
  }

  body.page-wallet .wallet-btn-logout {
    width: 30px !important;
    height: 30px !important;
  }

  body.page-wallet .wallet-main {
    padding: 0 0.72rem calc(0.75rem + env(safe-area-inset-bottom)) !important;
    gap: 0.46rem !important;
  }

  body.page-wallet .wallet-balance-card {
    padding: 0.15rem 0 0.65rem !important;
  }

  body.page-wallet .wallet-balance-label {
    font-size: 0.7rem !important;
    margin-bottom: 0.26rem !important;
  }

  body.page-wallet .wallet-balance-value {
    font-size: clamp(2.3rem, 11.4vw, 3.3rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.02em !important;
  }

  body.page-wallet .wallet-actions-title {
    margin: 0.06rem 0 0.02rem !important;
    font-size: 0.96rem !important;
  }

  body.page-wallet .wallet-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    margin-bottom: 0.2rem !important;
  }

  body.page-wallet .wallet-action-btn {
    min-height: 64px !important;
    border-radius: 10px !important;
    padding: 0.52rem 0.5rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
  }

  body.page-wallet .wallet-action-btn::before {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.78rem !important;
  }

  /* Mobile banner card for summary */
  body.page-wallet .wallet-promo {
    margin: 0.25rem 0 0.1rem !important;
  }

  body.page-wallet .wallet-promo-content {
    border-radius: 14px !important;
    border: 1px solid #2e3820 !important;
    background:
      linear-gradient(130deg, rgba(149, 193, 31, 0.2), rgba(18, 18, 18, 0.96) 45%),
      #121212 !important;
    padding: 0.75rem 0.72rem !important;
  }

  body.page-wallet .wallet-promo-title {
    font-size: 1.02rem !important;
    margin-bottom: 0.12rem !important;
  }

  body.page-wallet .wallet-promo-text {
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.45rem !important;
  }

  body.page-wallet .wallet-promo-btn {
    min-height: 34px !important;
    padding: 0.35rem 0.78rem !important;
    font-size: 0.82rem !important;
  }

  body.page-wallet .wallet-movimientos {
    margin-top: 0.18rem !important;
    padding-top: 0.36rem !important;
  }

  body.page-wallet .wallet-mov-title {
    font-size: 0.78rem !important;
    margin-bottom: 0.34rem !important;
  }

  body.page-wallet .wallet-mov-item {
    padding: 0.56rem 0.05rem !important;
  }

  body.page-wallet .wallet-mov-status {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.63rem !important;
    font-weight: 700 !important;
    border: 1px solid #2f2f2f !important;
    background: #161616 !important;
    color: #d6d6d6 !important;
  }

  body.page-wallet .wallet-mov-status.is-cat-utilidad,
  body.page-wallet .wallet-mov-status.is-cat-ingreso {
    border-color: rgba(149, 193, 31, 0.75) !important;
    background: rgba(149, 193, 31, 0.22) !important;
    color: #95c11f !important;
  }

  body.page-wallet .wallet-mov-status.is-cat-obra {
    border-color: #6f8fa6 !important;
    color: #9fb5c7 !important;
  }

  body.page-wallet .wallet-mov-status.is-cat-gastos {
    border-color: #8b6c3d !important;
    color: #d4b37e !important;
  }

  body.page-wallet .wallet-mov-status.is-cat-prestamo {
    border-color: #6d4a7a !important;
    color: #c6a0d4 !important;
  }

  body.page-wallet .wallet-mov-meta strong {
    font-size: 0.9rem !important;
  }

  body.page-wallet .wallet-mov-meta small {
    font-size: 0.7rem !important;
    margin-top: 0.13rem !important;
  }

  body.page-wallet .wallet-mov-right {
    min-width: 122px !important;
    gap: 0.28rem !important;
  }

  body.page-wallet .wallet-mov-amount {
    font-size: 0.9rem !important;
  }
}

/* Action icon cleanup: single circle only */
body.page-wallet .wallet-actions .wallet-action-btn::after {
  content: none !important;
  display: none !important;
}

body.page-wallet .wallet-actions .wallet-action-btn::before {
  background: #1b1b1b !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: #95c11f !important;
}

body.page-wallet .wallet-mov-status svg {
  width: 12px;
  height: 12px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.page-wallet .wallet-mov-status.is-cat-ingreso svg,
body.page-wallet .wallet-mov-status.is-cat-utilidad svg {
  stroke-width: 2.2;
}

/* Final modal form theme (black + #95c11f) */
body.page-wallet .modal {
  background: rgba(5, 5, 5, 0.86) !important;
  backdrop-filter: blur(6px) !important;
}

body.page-wallet .modal .form-card {
  background:
    radial-gradient(220px 100px at 100% 0%, rgba(149, 193, 31, 0.14), transparent 72%),
    linear-gradient(180deg, #121212 0%, #0f0f0f 100%) !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.55) !important;
}

body.page-wallet .modal .form-card h2 {
  color: #95c11f !important;
}

body.page-wallet .modal .form-card label {
  color: #95c11f !important;
}

body.page-wallet .modal .form-card input,
body.page-wallet .modal .form-card textarea,
body.page-wallet .modal .form-card select {
  background: #0d1116 !important;
  border: 1px solid #2f2f2f !important;
  color: #f2f2f2 !important;
}

body.page-wallet .modal .form-card input::placeholder,
body.page-wallet .modal .form-card textarea::placeholder {
  color: #8d8d8d !important;
}

body.page-wallet .modal .form-card input:focus,
body.page-wallet .modal .form-card textarea:focus,
body.page-wallet .modal .form-card select:focus {
  border-color: rgba(149, 193, 31, 0.78) !important;
  box-shadow: 0 0 0 3px rgba(149, 193, 31, 0.24) !important;
}

body.page-wallet .modal .form-card .foto-opcional-wrap {
  border: 1px solid #2e2e2e !important;
  background: #121212 !important;
}

body.page-wallet .modal .form-card .media-btn {
  background: #1a1a1a !important;
  border: 1px solid #343434 !important;
  color: #d6d6d6 !important;
}

body.page-wallet .modal .form-card .media-btn:hover {
  background: #202020 !important;
  border-color: rgba(149, 193, 31, 0.55) !important;
  color: #f0f0f0 !important;
}

body.page-wallet .modal .form-card .media-btn.is-selected {
  background: rgba(149, 193, 31, 0.18) !important;
  border-color: rgba(149, 193, 31, 0.75) !important;
  color: #d8f28f !important;
}

body.page-wallet .modal .form-card button {
  min-height: 40px !important;
  border-radius: 9px !important;
}

body.page-wallet .modal .form-card button:not(.cancelar) {
  background: linear-gradient(135deg, #95c11f, #a7d52e) !important;
  color: #111111 !important;
  box-shadow: none !important;
}

body.page-wallet .modal .form-card button.cancelar {
  background: #2a2a2a !important;
  color: #f1f1f1 !important;
  border: 1px solid #3a3a3a !important;
}

/* Resumen polish: saldo hero clean + metrics in chart */
body.page-resumen .resumen-hero {
  border-bottom: none !important;
  padding-bottom: 0.35rem !important;
}

body.page-resumen .resumen-chart-card {
  border-top: 1px solid #242424 !important;
}

body.page-resumen .resumen-chart-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.2rem 0 0.6rem;
}

body.page-resumen .resumen-chart-chip {
  border: 1px solid #2f2f2f;
  border-radius: 10px;
  background: #121212;
  padding: 0.48rem 0.55rem;
}

body.page-resumen .resumen-chart-chip span {
  display: block;
  font-size: 0.72rem;
  color: #aeb5bf;
  margin-bottom: 0.16rem;
}

body.page-resumen .resumen-chart-chip strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
}

body.page-resumen .resumen-chart-chip.is-in strong {
  color: #95c11f;
}

body.page-resumen .resumen-chart-chip.is-out strong {
  color: #f17878;
}

@media (max-width: 767px) {
  body.page-resumen .resumen-chart-metrics {
    gap: 0.38rem;
    margin-bottom: 0.48rem;
  }

  body.page-resumen .resumen-chart-chip {
    padding: 0.42rem 0.48rem;
  }

  body.page-resumen .resumen-chart-chip strong {
    font-size: 0.86rem;
  }
}

/* ==========================================================
   RESUMEN FINAL THEME (aligned with index)
   ========================================================== */
body.page-resumen {
  background:
    radial-gradient(860px 320px at 92% 0%, rgba(149, 193, 31, 0.13), transparent 72%),
    linear-gradient(180deg, #050505 0%, #070707 55%, #050505 100%) !important;
  color: #f2f2f2;
}

body.page-resumen .resumen-app {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0.8rem 1rem calc(1rem + env(safe-area-inset-bottom)) !important;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "hero"
    "chart"
    "table"
    "action";
}

body.page-resumen .resumen-wallet-header {
  grid-area: header;
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid #242424 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0.35rem 0.1rem 0.55rem !important;
}

body.page-resumen .resumen-hero {
  grid-area: hero;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #242424 !important;
  border-radius: 0 !important;
  padding: 0.35rem 0 0.75rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 132px;
}

body.page-resumen .resumen-hero-label {
  color: #95c11f !important;
  width: 100%;
  text-align: center;
}

body.page-resumen .resumen-hero-value {
  color: #ffffff !important;
  font-size: clamp(2.2rem, 8vw, 4.1rem) !important;
  margin: 0 !important;
  width: 100%;
  text-align: center;
}

body.page-resumen .resumen-mini-card {
  background: #121212 !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 10px !important;
}

body.page-resumen .resumen-chart-card {
  grid-area: chart;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid #242424 !important;
  border-bottom: 1px solid #242424 !important;
  border-radius: 0 !important;
  padding: 0.75rem 0 0.65rem !important;
}

body.page-resumen .resumen-table-card {
  grid-area: table;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid #242424 !important;
  border-radius: 0 !important;
  padding: 0.55rem 0 0 !important;
}

body.page-resumen .resumen-chart-card h2,
body.page-resumen .resumen-table-card h2 {
  color: #95c11f !important;
}

body.page-resumen .resumen-report-action {
  grid-area: action;
}

body.page-resumen .resumen-report-action .wallet-promo-btn,
body.page-resumen .resumen-back-top {
  background: linear-gradient(135deg, #95c11f, #a7d52e) !important;
  color: #111111 !important;
  border: none !important;
  box-shadow: none !important;
}

body.page-resumen .resumen-list {
  display: grid;
  gap: 0;
}

body.page-resumen .resumen-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #232323 !important;
  border-radius: 0 !important;
  padding: 0.64rem 0.12rem !important;
}

body.page-resumen .resumen-item-main strong {
  color: #f2f2f2 !important;
}

body.page-resumen .resumen-item-main small {
  color: #aeb5bf !important;
}

body.page-resumen .resumen-item-amount.is-in {
  color: #95c11f !important;
}

body.page-resumen .resumen-item-amount.is-out {
  color: #f17878 !important;
}

body.page-resumen .resumen-balance-line {
  margin-top: 0.45rem;
  padding-top: 0.55rem;
  border-top: 1px solid #2c2c2c;
}

@media (min-width: 1024px) {
  body.page-resumen .resumen-app {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    grid-template-columns: 0.92fr 1.08fr;
    grid-template-areas:
      "header header"
      "hero chart"
      "table table"
      "action action";
    grid-template-rows: auto auto 1fr auto;
    gap: 0.6rem 1.2rem;
  }

  body.page-resumen .resumen-table-card #resumen {
    max-height: calc(100dvh - 360px);
    overflow: auto;
    padding-right: 0.25rem;
  }
}

@media (max-width: 767px) {
  body.page-resumen .resumen-app {
    padding-left: 0.72rem !important;
    padding-right: 0.72rem !important;
    gap: 0.52rem;
  }

  body.page-resumen .resumen-wallet-header {
    padding-top: 0.25rem !important;
    padding-bottom: 0.45rem !important;
  }

  body.page-resumen #resumenSaludo {
    font-size: 0.75rem !important;
  }

  body.page-resumen .resumen-back-top {
    min-height: 34px !important;
    font-size: 0.72rem !important;
  }

  body.page-resumen .resumen-hero-value {
    font-size: clamp(2.15rem, 11vw, 3.3rem) !important;
  }

  body.page-resumen canvas#grafico {
    height: 260px !important;
  }
}

/* FINAL REPORTE THEME (aligned with index) */
body.page-reporte {
  background:
    radial-gradient(860px 320px at 92% 0%, rgba(149, 193, 31, 0.13), transparent 72%),
    linear-gradient(180deg, #050505 0%, #070707 55%, #050505 100%) !important;
  color: #f2f2f2;
  font-family: 'Inter', system-ui, sans-serif;
}

body.page-reporte .reporte-app {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0.8rem 1rem calc(1rem + env(safe-area-inset-bottom)) !important;
}

body.page-reporte .wallet-header.reporte-wallet-header {
  margin: 0 !important;
  width: 100% !important;
  border: none !important;
  border-bottom: 1px solid #242424 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0.35rem 0.1rem 0.55rem !important;
}

body.page-reporte #reporteSaludo {
  color: #f2f2f2 !important;
  font-size: 0.8rem !important;
}

body.page-reporte #reporteFechaHeader {
  color: #9ba4ae !important;
}

body.page-reporte .reporte-download-top,
body.page-reporte .reporte-back-top {
  border: none !important;
  box-shadow: none !important;
  background: linear-gradient(135deg, #95c11f, #a7d52e) !important;
  color: #111111 !important;
}

body.page-reporte .reporte-general-wrap {
  border-top: none !important;
  padding: 0.65rem 0 0 !important;
}

body.page-reporte .reporte-general-wrap h2 {
  color: #95c11f !important;
  margin-bottom: 0.5rem !important;
}

body.page-reporte #reporteGeneral {
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  background: #0f0f0f;
  padding: 0.35rem;
  overflow-x: auto;
}

body.page-reporte .reporte-general-table {
  min-width: 720px;
  border: 1px solid #2f2f2f !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #121212 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

body.page-reporte .reporte-general-table th,
body.page-reporte .reporte-general-table td {
  border-right: 1px solid #2a2a2a !important;
  border-bottom: 1px solid #2a2a2a !important;
  padding: 0.42rem 0.58rem !important;
  color: #ececec !important;
  font-size: 0.72rem !important;
}

body.page-reporte .reporte-general-table .rg-title-row th {
  background: linear-gradient(135deg, #95c11f, #a7d52e) !important;
  color: #111111 !important;
  font-size: 0.68rem !important;
}

body.page-reporte .reporte-general-table .rg-head-row th {
  background: #1a1a1a !important;
  color: #cfd6de !important;
  font-size: 0.66rem !important;
}

body.page-reporte .reporte-general-table .rg-concept,
body.page-reporte .reporte-general-table .rg-total-label,
body.page-reporte .reporte-general-table .rg-apartado-label {
  background: #171717 !important;
  color: #95c11f !important;
  font-weight: 800 !important;
}

body.page-reporte .reporte-general-table .rg-detail,
body.page-reporte .reporte-general-table .rg-total-detail,
body.page-reporte .reporte-general-table .rg-apartado-detail {
  background: #101010 !important;
  color: #b9c0c8 !important;
}

body.page-reporte .reporte-general-table .rg-amount,
body.page-reporte .reporte-general-table .rg-total-amount,
body.page-reporte .reporte-general-table .rg-apartado-amount {
  background: #121212 !important;
  font-weight: 800 !important;
}

body.page-reporte .reporte-general-table .rg-apartado-head {
  background: #1a1a1a !important;
  color: #95c11f !important;
}

body.page-reporte .reporte-general-table .rg-apartado-amount.is-in {
  color: #95c11f !important;
}

body.page-reporte .reporte-general-table .rg-apartado-amount.is-out {
  color: #f17878 !important;
}

body.page-reporte .reporte-general-table .rg-total-amount {
  background: #95c11f !important;
  color: #111111 !important;
}

@media (max-width: 767px) {
  body.page-reporte .reporte-app {
    padding-left: 0.72rem !important;
    padding-right: 0.72rem !important;
  }

  body.page-reporte .wallet-header.reporte-wallet-header {
    gap: 0.45rem;
    align-items: flex-start;
  }

  body.page-reporte .wallet-user {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
  }

  body.page-reporte #reporteSaludo {
    font-size: 0.75rem !important;
  }

  body.page-reporte .reporte-download-top,
  body.page-reporte .reporte-back-top {
    min-height: 34px !important;
    font-size: 0.72rem !important;
  }

  body.page-reporte #reporteGeneral {
    padding: 0.25rem;
    overflow-x: hidden;
  }

  body.page-reporte .reporte-general-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  body.page-reporte .reporte-general-table th,
  body.page-reporte .reporte-general-table td {
    padding: 0.34rem 0.24rem !important;
    font-size: 0.62rem !important;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  body.page-reporte .reporte-general-table tr > *:nth-child(1) {
    width: 33%;
  }

  body.page-reporte .reporte-general-table tr > *:nth-child(2) {
    width: 41%;
  }

  body.page-reporte .reporte-general-table tr > *:nth-child(3) {
    width: 26%;
  }

  body.page-reporte .reporte-general-table .rg-title-row th,
  body.page-reporte .reporte-general-table .rg-apartado-head {
    width: 100%;
  }

  body.page-reporte .reporte-general-table .rg-title-row th {
    font-size: 0.56rem !important;
    letter-spacing: 0.01em;
  }

  body.page-reporte .reporte-general-table .rg-head-row th {
    font-size: 0.55rem !important;
  }
}

.wallet-mode-copy {
  color: #aeb7c0;
  margin: 0.25rem 0 1rem;
  font-size: 0.95rem;
}

.wallet-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.wallet-mode-btn {
  border: 1px solid #343b44;
  border-radius: 12px;
  padding: 0.9rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  background: #14181f;
  color: #d8dee5;
}

.wallet-mode-btn.is-gasto {
  border-color: #5f7f34;
  color: #b8de58;
}

.wallet-mode-btn.is-req {
  border-color: #5e7a9a;
  color: #9cc8f2;
}

body.page-requerimientos {
  background:
    radial-gradient(820px 300px at 90% 0%, rgba(149, 193, 31, 0.13), transparent 72%),
    linear-gradient(180deg, #050505 0%, #070707 55%, #050505 100%) !important;
  color: #e3e9ef;
}

.requerimientos-app {
  max-width: 440px;
  margin: 0 auto;
  padding: 0.25rem 0.75rem 1rem;
}

.requerimientos-header {
  max-width: 100%;
  width: 100% !important;
  margin: 0 0 0.45rem !important;
  padding: 0.45rem 0.15rem 0.5rem !important;
  border: none !important;
  border-bottom: 1px solid #232323 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.page-requerimientos .wallet-logo {
  color: #f2f2f2 !important;
}

body.page-requerimientos #reqSaludo {
  color: #00e676 !important;
  font-size: 0.72rem !important;
  line-height: 1.1 !important;
}

body.page-requerimientos #reqFecha {
  color: #95c11f !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.03em;
}

body.page-requerimientos .wallet-user {
  display: flex !important;
  align-items: center !important;
  gap: 0.34rem !important;
}

body.page-requerimientos #btnVolverWallet.wallet-action-top,
body.page-requerimientos #btnRefrescarReq.wallet-action-top {
  min-height: 31px !important;
  padding: 0.36rem 0.62rem !important;
  border-radius: 999px !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #f1f1f1 !important;
  background: #1c1c1c !important;
  border: 1px solid #2b2b2b !important;
  box-shadow: none !important;
}

body.page-requerimientos #btnVolverWallet.wallet-action-top::before,
body.page-requerimientos #btnRefrescarReq.wallet-action-top::before {
  width: 0.68rem !important;
  height: 0.68rem !important;
  font-size: 0.55rem !important;
  color: #95c11f !important;
  background: #171717 !important;
  border-color: #2d2d2d !important;
}

.requerimientos-hero {
  padding: 0.48rem 0.1rem 0.68rem;
}

.requerimientos-hero h2 {
  margin: 0;
  color: #f1f1f1;
  font-size: 1rem;
}

.requerimientos-hero p {
  margin: 0.2rem 0 0;
  color: #a7a7a7;
  font-size: 0.74rem;
}

.requerimientos-list-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.req-list {
  display: grid;
  gap: 0.55rem;
}

.req-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.65rem;
  align-items: center;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  background: #101010;
  padding: 0.72rem;
}

.req-item-main {
  display: grid;
  gap: 0.16rem;
}

.req-item-main strong {
  color: #f2f2f2;
  font-size: 0.84rem;
}

.req-item-main small {
  color: #9f9f9f;
  font-size: 0.7rem;
}

.req-item-side {
  display: grid;
  justify-items: end;
  gap: 0.34rem;
}

.req-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #303030;
}

.req-no-thumb {
  font-size: 0.68rem;
  color: #868686;
}

.req-item-amount {
  font-weight: 700;
  color: #f17878;
  font-size: 0.85rem;
}

.req-approve-btn {
  border: none;
  border-radius: 999px;
  padding: 0.42rem 0.68rem;
  background: linear-gradient(135deg, #95c11f, #a7d52e);
  color: #111111;
  font-weight: 700;
  font-size: 0.69rem;
  cursor: pointer;
}

body.page-requerimientos #reqListado .wallet-empty {
  border: 1px dashed #2d2d2d;
  border-radius: 10px;
  background: transparent;
  color: #8f8f8f;
  font-size: 0.74rem;
  padding: 0.95rem 0.7rem;
  text-align: center;
}

body.page-requerimientos .req-approve-card,
body.page-requerimientos .req-notice-card {
  max-width: 360px;
  min-width: min(320px, 92vw);
  text-align: center;
}

body.page-requerimientos .req-approve-card h2,
body.page-requerimientos .req-notice-card h2 {
  color: #95c11f;
  margin-bottom: 0.55rem;
}

body.page-requerimientos .req-approve-copy,
body.page-requerimientos .req-notice-card p {
  color: #b9b9b9;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0 0 0.95rem;
}

body.page-requerimientos .req-approve-card .foto-actions {
  justify-content: center;
}

body.page-requerimientos .req-confirm-btn,
body.page-requerimientos .req-notice-ok {
  width: 100%;
  border: none;
  border-radius: 999px;
  min-height: 36px;
  font-weight: 700;
  background: linear-gradient(135deg, #95c11f, #a7d52e);
  color: #111111;
  cursor: pointer;
}

body.page-requerimientos .req-cancel-btn {
  width: 100%;
  border-radius: 999px;
}

body.page-requerimientos .req-notice-card.is-error h2 {
  color: #f17878;
}

body.page-requerimientos .req-notice-card.is-error .req-notice-ok {
  background: linear-gradient(135deg, #f17878, #f39b9b);
  color: #220c0c;
}

@media (max-width: 767px) {
  .wallet-mode-grid {
    grid-template-columns: 1fr;
  }

  .req-item {
    grid-template-columns: 1fr;
  }

  .req-item-side {
    justify-items: start;
  }
}

/* Compact header actions: Ingreso + Requerimientos */
body.page-wallet #btnIngreso.wallet-action-top,
body.page-wallet #btnRequerimientos.wallet-action-top {
  min-height: 34px !important;
  padding: 0.4rem 0.72rem !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  margin: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(149, 193, 31, 0.24) !important;
}

body.page-wallet #btnIngreso.wallet-action-top::before,
body.page-wallet #btnRequerimientos.wallet-action-top::before {
  width: 0.78rem !important;
  height: 0.78rem !important;
  font-size: 0.6rem !important;
}

@media (min-width: 1024px) {
  body.page-wallet #btnIngreso.wallet-action-top,
  body.page-wallet #btnRequerimientos.wallet-action-top {
    min-height: 36px !important;
    padding: 0.45rem 0.82rem !important;
    font-size: 0.76rem !important;
  }
}

body.page-wallet .wallet-notice-card {
  max-width: 360px;
  min-width: min(320px, 92vw);
  text-align: center;
  border: 1px solid #2f2f2f;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

body.page-wallet .wallet-notice-card h2 {
  margin-bottom: 0.6rem;
}

body.page-wallet .wallet-notice-card p {
  margin: 0 0 1rem;
  color: #c3c3c3;
  font-size: 0.92rem;
  line-height: 1.4;
}

body.page-wallet .wallet-notice-card.is-success h2 {
  color: #95c11f;
}

body.page-wallet .wallet-notice-card.is-error h2 {
  color: #f17878;
}

body.page-wallet .wallet-notice-ok {
  width: 100%;
  border: none;
  border-radius: 999px;
  min-height: 36px;
  font-weight: 700;
  background: linear-gradient(135deg, #95c11f, #a7d52e);
  color: #111111;
  cursor: pointer;
}

body.page-wallet .wallet-notice-card.is-error .wallet-notice-ok {
  background: linear-gradient(135deg, #f17878, #f39b9b);
  color: #220c0c;
}