:root {
  --green: #1DB954;
  --green-dim: #158a3e;
  --green-glow: rgba(29, 185, 84, 0.18);
  --danger: #e8534a;
  --dglow: rgba(232, 83, 74, 0.15);
  --warn: #e8a84a;
  --blue: #4a9ee8;
  --r: 14px;
  
  /* Dark Mode (Default) */
  --bg: #0a0a0a;
  --surface: #141414;
  --surface2: #1c1c1c;
  --border: rgba(255, 255, 255, 0.07);
  --border2: rgba(255, 255, 255, 0.12);
  --text: #f0f0f0;
  --text2: #888;
  --text3: #555;
  --on-surface: #fff;
}

html.light {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface2: #f0f0f0;
  --border: rgba(0, 0, 0, 0.07);
  --border2: rgba(0, 0, 0, 0.12);
  --text: #1a1a1a;
  --text2: #666;
  --text3: #888;
  --on-surface: #000;
}

/* ===== Puente para Tailwind (bg-*/text-*/border-*) =====
   Tailwind CDN usaba una paleta fija que nunca cambiaba con el tema.
   Estas variables sí cambian entre claro/oscuro y alimentan tailwind.config.js. */
:root {
  --tw-background: 19 19 19;
  --tw-surface: 19 19 19;
  --tw-surface2: 28 27 27;
  --tw-surface-high: 42 42 42;
  --tw-surface-highest: 53 53 52;
  --tw-on-background: 229 226 225;
  --tw-on-surface: 229 226 225;
  --tw-on-primary: 0 57 20;
  --tw-primary: 83 224 118;
  --tw-green: 29 185 84;
  --tw-tertiary: 167 200 255;
  --tw-blue: 74 158 232;
  --tw-danger: 232 83 74;
  --tw-warn: 232 168 74;
  --tw-outline: 134 149 133;
  --tw-outline-variant: 61 74 61;
  --tw-text: 240 240 240;
  --tw-text2: 136 136 136;
  --tw-text3: 85 85 85;
  --tw-dglow: rgba(232, 83, 74, 0.15);
  --tw-green-glow: rgba(29, 185, 84, 0.15);
}

html.light {
  --tw-background: 245 245 245;
  --tw-surface: 255 255 255;
  --tw-surface2: 240 240 240;
  --tw-surface-high: 228 228 228;
  --tw-surface-highest: 216 216 216;
  --tw-on-background: 26 26 26;
  --tw-on-surface: 26 26 26;
  --tw-on-primary: 0 57 20;
  --tw-primary: 22 163 74;
  --tw-green: 22 163 74;
  --tw-tertiary: 37 99 235;
  --tw-blue: 37 99 235;
  --tw-danger: 220 38 38;
  --tw-warn: 180 83 9;
  --tw-outline: 150 150 150;
  --tw-outline-variant: 224 224 224;
  --tw-text: 26 26 26;
  --tw-text2: 90 90 90;
  --tw-text3: 130 130 130;
  --tw-dglow: rgba(220, 38, 38, 0.10);
  --tw-green-glow: rgba(22, 163, 74, 0.12);
}

/* ===== Reglas explicitas de color (bg-*/text-*/border-*) =====
   Escritas directo (con !important) en vez de depender de que Tailwind las
   genere en vivo, asi no dependen de la version/orden de carga del CDN. */
.bg-background { background-color: rgb(var(--tw-background)) !important; }
.text-background { color: rgb(var(--tw-background)) !important; }
.border-background { border-color: rgb(var(--tw-background)) !important; }
.bg-surface { background-color: rgb(var(--tw-surface)) !important; }
.text-surface { color: rgb(var(--tw-surface)) !important; }
.border-surface { border-color: rgb(var(--tw-surface)) !important; }
.bg-surface2 { background-color: rgb(var(--tw-surface2)) !important; }
.text-surface2 { color: rgb(var(--tw-surface2)) !important; }
.border-surface2 { border-color: rgb(var(--tw-surface2)) !important; }
.bg-surface-container-low { background-color: rgb(var(--tw-surface2)) !important; }
.text-surface-container-low { color: rgb(var(--tw-surface2)) !important; }
.border-surface-container-low { border-color: rgb(var(--tw-surface2)) !important; }
.bg-surface-high { background-color: rgb(var(--tw-surface-high)) !important; }
.text-surface-high { color: rgb(var(--tw-surface-high)) !important; }
.border-surface-high { border-color: rgb(var(--tw-surface-high)) !important; }
.bg-surface-container-high { background-color: rgb(var(--tw-surface-high)) !important; }
.text-surface-container-high { color: rgb(var(--tw-surface-high)) !important; }
.border-surface-container-high { border-color: rgb(var(--tw-surface-high)) !important; }
.bg-surface-highest { background-color: rgb(var(--tw-surface-highest)) !important; }
.text-surface-highest { color: rgb(var(--tw-surface-highest)) !important; }
.border-surface-highest { border-color: rgb(var(--tw-surface-highest)) !important; }
.bg-surface-container-highest { background-color: rgb(var(--tw-surface-highest)) !important; }
.text-surface-container-highest { color: rgb(var(--tw-surface-highest)) !important; }
.border-surface-container-highest { border-color: rgb(var(--tw-surface-highest)) !important; }
.bg-on-background { background-color: rgb(var(--tw-on-background)) !important; }
.text-on-background { color: rgb(var(--tw-on-background)) !important; }
.border-on-background { border-color: rgb(var(--tw-on-background)) !important; }
.bg-on-surface { background-color: rgb(var(--tw-on-surface)) !important; }
.text-on-surface { color: rgb(var(--tw-on-surface)) !important; }
.border-on-surface { border-color: rgb(var(--tw-on-surface)) !important; }
.bg-on-primary { background-color: rgb(var(--tw-on-primary)) !important; }
.text-on-primary { color: rgb(var(--tw-on-primary)) !important; }
.border-on-primary { border-color: rgb(var(--tw-on-primary)) !important; }
.bg-primary { background-color: rgb(var(--tw-primary)) !important; }
.text-primary { color: rgb(var(--tw-primary)) !important; }
.border-primary { border-color: rgb(var(--tw-primary)) !important; }
.bg-green { background-color: rgb(var(--tw-green)) !important; }
.text-green { color: rgb(var(--tw-green)) !important; }
.border-green { border-color: rgb(var(--tw-green)) !important; }
.bg-tertiary { background-color: rgb(var(--tw-tertiary)) !important; }
.text-tertiary { color: rgb(var(--tw-tertiary)) !important; }
.border-tertiary { border-color: rgb(var(--tw-tertiary)) !important; }
.bg-blue { background-color: rgb(var(--tw-blue)) !important; }
.text-blue { color: rgb(var(--tw-blue)) !important; }
.border-blue { border-color: rgb(var(--tw-blue)) !important; }
.bg-danger { background-color: rgb(var(--tw-danger)) !important; }
.text-danger { color: rgb(var(--tw-danger)) !important; }
.border-danger { border-color: rgb(var(--tw-danger)) !important; }
.bg-warn { background-color: rgb(var(--tw-warn)) !important; }
.text-warn { color: rgb(var(--tw-warn)) !important; }
.border-warn { border-color: rgb(var(--tw-warn)) !important; }
.bg-outline { background-color: rgb(var(--tw-outline)) !important; }
.text-outline { color: rgb(var(--tw-outline)) !important; }
.border-outline { border-color: rgb(var(--tw-outline)) !important; }
.bg-outline-variant { background-color: rgb(var(--tw-outline-variant)) !important; }
.text-outline-variant { color: rgb(var(--tw-outline-variant)) !important; }
.border-outline-variant { border-color: rgb(var(--tw-outline-variant)) !important; }
.bg-border { background-color: rgb(var(--tw-outline-variant)) !important; }
.text-border { color: rgb(var(--tw-outline-variant)) !important; }
.border-border { border-color: rgb(var(--tw-outline-variant)) !important; }
.bg-text { background-color: rgb(var(--tw-text)) !important; }
.text-text { color: rgb(var(--tw-text)) !important; }
.border-text { border-color: rgb(var(--tw-text)) !important; }
.bg-text2 { background-color: rgb(var(--tw-text2)) !important; }
.text-text2 { color: rgb(var(--tw-text2)) !important; }
.border-text2 { border-color: rgb(var(--tw-text2)) !important; }
.bg-text3 { background-color: rgb(var(--tw-text3)) !important; }
.text-text3 { color: rgb(var(--tw-text3)) !important; }
.border-text3 { border-color: rgb(var(--tw-text3)) !important; }
.bg-dglow { background-color: var(--tw-dglow) !important; }
.bg-green-glow { background-color: var(--tw-green-glow) !important; }
.bg-danger\/10 { background-color: rgb(var(--tw-danger) / 0.1) !important; }
.bg-danger\/20 { background-color: rgb(var(--tw-danger) / 0.2) !important; }
.bg-green\/20 { background-color: rgb(var(--tw-green) / 0.2) !important; }
.bg-outline-variant\/15 { background-color: rgb(var(--tw-outline-variant) / 0.15) !important; }
.bg-primary\/10 { background-color: rgb(var(--tw-primary) / 0.1) !important; }
.bg-primary\/20 { background-color: rgb(var(--tw-primary) / 0.2) !important; }
.bg-primary\/5 { background-color: rgb(var(--tw-primary) / 0.05) !important; }
.bg-surface\/20 { background-color: rgb(var(--tw-surface) / 0.2) !important; }
.bg-warn\/10 { background-color: rgb(var(--tw-warn) / 0.1) !important; }
.bg-warn\/20 { background-color: rgb(var(--tw-warn) / 0.2) !important; }
.border-border\/20 { border-color: rgb(var(--tw-outline-variant) / 0.2) !important; }
.border-danger\/30 { border-color: rgb(var(--tw-danger) / 0.3) !important; }
.border-outline-variant\/15 { border-color: rgb(var(--tw-outline-variant) / 0.15) !important; }
.border-outline-variant\/30 { border-color: rgb(var(--tw-outline-variant) / 0.3) !important; }
.border-primary\/20 { border-color: rgb(var(--tw-primary) / 0.2) !important; }
.border-primary\/30 { border-color: rgb(var(--tw-primary) / 0.3) !important; }
.border-primary\/60 { border-color: rgb(var(--tw-primary) / 0.6) !important; }
.border-warn\/30 { border-color: rgb(var(--tw-warn) / 0.3) !important; }
.text-on-surface\/40 { color: rgb(var(--tw-on-surface) / 0.4) !important; }

body {
  background-color: var(--bg);
  min-height: max(884px, 100dvh);
  -webkit-tap-highlight-color: transparent;
}

/* Respaldo directo (sin pasar por clases) por si algo mas pisa el fondo/color del body */
html:not(.light) body {
  background-color: rgb(19 19 19) !important;
  color: rgb(229 226 225) !important;
}
html.light body {
  background-color: rgb(245 245 245) !important;
  color: rgb(26 26 26) !important;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1;
}

.glass-panel {
  background: rgba(53, 53, 52, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Nav styles */
.nav-item {
  color: rgba(229, 226, 225, 0.4);
}

.nav-item.active {
  color: #53e076;
  transform: scale(1.1);
}

.nav-item.active .nav-icon {
  font-variation-settings: 'FILL' 1;
}


/* Elements from the mockups translated to Utility / Components */
.sdot {
  transition: background .3s;
}

.sdot.ok {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.sdot.sync {
  background: var(--warn);
  animation: pulse 1s infinite;
}

.sdot.err {
  background: var(--danger);
  box-shadow: 0 0 6px var(--danger);
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }
}

.eb {
  background: var(--green);
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  margin-top: 16px;
  font-family: 'DM Sans', sans-serif;
}

/* CARDS */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid transparent;
  border-radius: var(--r);
  margin-bottom: 24px;
  /* Spacing 6 based on DESIGN.md */
  overflow: hidden;
  position: relative;
}

.card.vc {
  border-left-color: var(--danger);
}

.card.vh {
  border-left-color: var(--warn);
}

.card.vm {
  border-left-color: var(--blue);
}

.card.vl {
  border-left-color: #3d4a3d;
}

.card.sent {
  opacity: .5;
}

.card-main {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
  color: #fff;
}

.ci {
  flex: 1;
  min-width: 0;
}

.cn {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.cm {
  font-size: 11px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bd {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: 700;
}

.bc {
  background: var(--dglow);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.bh {
  background: rgba(232, 168, 74, .15);
  color: var(--warn);
  border: 1px solid var(--warn);
}

.bm {
  background: rgba(74, 158, 232, .15);
  color: var(--blue);
  border: 1px solid var(--blue);
}

.bl {
  background: var(--surface2);
  color: var(--text3);
  border: 1px solid var(--border);
}

.cr {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.np {
  font-size: 10px;
  color: var(--text3);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
}

.wb {
  background: #25D366;
  border: none;
  border-radius: 14px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.wb:active {
  background: #1aab52;
}

.wb svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}

.ce {
  display: none;
  border-top: 1px solid var(--border);
  padding: 16px;
}

.grp-body {
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease, margin .3s ease;
}

#app-header {
  transition: transform .25s ease;
}

#app-header.header-hidden {
  transform: translateY(-100%);
}

.jump-highlight {
  animation: jumpPulse 1.6s ease;
}

@keyframes jumpPulse {
  0%, 100% { box-shadow: none; }
  20% { box-shadow: 0 0 0 3px var(--green); }
}

.grp-arrow {
  display: inline-block;
  transition: transform .25s ease;
}

.grp-arrow.collapsed {
  transform: rotate(-90deg);
}

.ce.open {
  display: block;
}

.eg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.eg.f {
  grid-template-columns: 1fr;
}

.fl {
  font-size: 10px;
  color: var(--text3);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.fv {
  font-size: 13px;
  color: var(--text2);
  font-family: 'Space Mono';
}

.mp {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text2);
  word-break: break-word;
}

.ea {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.bs {
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 5px;
}

.bs:active {
  transform: scale(0.96);
}

/* Spotify slide effect */
.bs.g {
  background: var(--green);
  border-color: var(--green);
  color: #000;
  font-weight: 600;
}

.bs.w {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
  font-weight: 600;
  flex: 1;
  justify-content: center;
}

.bs svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.sb {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--green-glow);
  border: 1px solid var(--green);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--green);
}

.card.sent .sb {
  display: block;
}

/* History Details */
.hi {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.ht {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 6px;
}

.hitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

.hitem:last-child {
  border-bottom: none;
}

.hdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hdot.pago {
  background: var(--green);
}

.hdot.msg {
  background: var(--blue);
}

.hdot.nota {
  background: var(--warn);
}

.hdot.acuerdo {
  background: var(--text2);
}

.htxt {
  flex: 1;
  font-size: 12px;
  color: var(--text2);
}

.hdate {
  font-size: 10px;
  color: var(--text3);
  font-family: 'Space Mono', monospace;
  white-space: nowrap;
}

.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text3);
  font-size: 14px;
}

.empty .big {
  font-size: 48px;
  margin-bottom: 12px;
}

/* FAB */
.fab-area {
  position: fixed;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 50;
}

#bottom-nav {
  padding-bottom: max(2rem, calc(0.75rem + env(safe-area-inset-bottom, 0px)));
}

.fab {
  background: #53e076;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 20px 40px rgba(14, 14, 14, 0.4);
  font-size: 24px;
  color: #000;
}

.fab:active {
  transform: scale(.92);
}

.fab-mini {
  background: #2a2a2a;
  border: 1px solid #3d4a3d;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
}

/* Toast & Loading */
.toast {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #353534;
  border: 1px solid #53e076;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #53e076;
  opacity: 0;
  transition: all .3s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 999;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.err {
  border-color: #ffb4ab;
  color: #ffb4ab;
}

.ldo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 500;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.ldo.show {
  display: flex;
}

.sp {
  width: 36px;
  height: 36px;
  border: 3px solid var(--surface2);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.ltxt {
  font-size: 13px;
  color: var(--text2);
}

/* Modals */
.ov {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, .75);
  backdrop-filter: blur(4px);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
}

.ov.open {
  display: flex;
}

.modal {
  background: #1c1b1b;
  border: 1px solid rgba(61, 74, 61, 0.15);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 40px;
  width: 100%;
  max-width: 520px;
  animation: su .3s cubic-bezier(0.33, 1, 0.68, 1);
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes su {
  from {
    transform: translateY(80px);
    opacity: 0;
  }
}

.mt {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #e5e2e1;
}

.mt-sub {
  font-size: 12px;
  color: var(--text2);
  font-weight: 400;
  margin-top: 2px;
}

.xbtn {
  background: #2a2a2a;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--text2);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fg {
  margin-bottom: 14px;
}

.fl2 {
  font-size: 11px;
  color: var(--text3);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: block;
  font-family: 'Space Grotesk';
}

.fii {
  width: 100%;
  background: #2a2a2a;
  border: none;
  border-bottom: 1px solid #3d4a3d;
  border-radius: 8px 8px 0 0;
  padding: 11px 14px;
  color: #e5e2e1;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
}

.fii:focus {
  border-bottom-color: #53e076;
}

.fii::placeholder {
  color: var(--text3);
}

.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fhint {
  font-size: 11px;
  color: var(--text3);
  margin-top: 4px;
}

.fhint code {
  color: #53e076;
  background: rgba(83, 224, 118, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
}

textarea.fii {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.ma {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.bcancel {
  flex: 1;
  background: transparent;
  border: 1px solid #3d4a3d;
  border-radius: 14px;
  padding: 12px;
  color: var(--text2);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  cursor: pointer;
}

.bconfirm {
  flex: 2;
  background: linear-gradient(135deg, #53e076, #1db954);
  border: none;
  border-radius: 14px;
  padding: 12px;
  color: #003914;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.bconfirm:active {
  transform: scale(0.96);
}

.bdel {
  width: 100%;
  background: var(--dglow);
  border: 1px solid var(--danger);
  border-radius: 14px;
  padding: 12px;
  color: var(--danger);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}

.pp {
  background: #2a2a2a;
  border: 1px solid #3d4a3d;
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
  margin-top: 8px;
  word-break: break-word;
}

.pmonto {
  font-family: 'Space Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  color: #53e076;
  text-align: center;
  padding: 16px 0 8px;
}

.psub {
  font-size: 12px;
  color: var(--text2);
  text-align: center;
  margin-bottom: 16px;
}

.mbtns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
}

.mbtn {
  background: #2a2a2a;
  border: 1px solid #3d4a3d;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  font-family: 'Space Mono', monospace;
}

.mbtn.active {
  background: rgba(83, 224, 118, 0.1);
  border-color: #53e076;
  color: #53e076;
}

.ntipos {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.ntipo {
  flex: 1;
  background: #2a2a2a;
  border: 1px solid #3d4a3d;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  transition: all .2s;
}

.ntipo.active {
  border-color: #53e076;
  color: #53e076;
  background: rgba(83, 224, 118, 0.1);
}

/* Tabs y Controls */
.controls {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  width: 100%;
}

.sw {
  flex: 1;
  position: relative;
}

.sw input {
  width: 100%;
  background: #2a2a2a;
  border: none;
  border-bottom: 1px solid #3d4a3d;
  border-radius: 8px 8px 0 0;
  padding: 9px 14px 9px 38px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
}

.sw input:focus {
  border-bottom-color: #53e076;
}

.si {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  pointer-events: none;
}

.fbtn {
  background: #2a2a2a;
  border: 1px solid #3d4a3d;
  border-radius: 14px;
  padding: 9px 12px;
  color: var(--text2);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
}

.fbtn.active {
  background: #53e076;
  border-color: #53e076;
  color: #04140a;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(83, 224, 118, 0.5);
}

.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  margin-bottom: 6px;
  width: 100%;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab,
.tsvc {
  background: #2a2a2a;
  border: 1px solid #3d4a3d;
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
}

.tab.active,
.tsvc.active {
  background: rgba(83, 224, 118, 0.1);
  border-color: #53e076;
  color: #53e076;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.eb {
  background: var(--green);
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  /* antes #000 */
  cursor: pointer;
  margin-top: 16px;
  font-family: 'DM Sans', sans-serif;
}

.bs.g {
  background: var(--green);
  border-color: var(--green);
  color: var(--text);
  /* antes #000 */
  font-weight: 600;
}

.fab {
  background: #53e076;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 20px 40px rgba(14, 14, 14, 0.4);
  font-size: 24px;
  color: var(--text);
  /* antes #000 */
}