/* ==========================================================
   TPV PRO · Rediseño del Terminal Punto de Venta
   Referencias visuales: Square, Lightspeed, Toast, SumUp Pro.
   Mantiene compatibilidad con IDs/clases existentes
   (.tpv-mode, .tpv-pay, .tpv-cart-*, .tpv-products, …).
   ========================================================== */

:root{
  --tpv2-brand:#5b2a86;
  --tpv2-brand-2:#7c3aed;
  --tpv2-brand-3:#a855f7;
  --tpv2-bg:#f6f6fa;
  --tpv2-card:#ffffff;
  --tpv2-border:#e6e6ef;
  --tpv2-border-strong:#d1d1de;
  --tpv2-text:#1e1b2e;
  --tpv2-text-muted:#6b6986;
  --tpv2-text-faint:#9b99b3;
  --tpv2-success:#10b981;
  --tpv2-success-bg:#ecfdf5;
  --tpv2-warning:#f59e0b;
  --tpv2-warning-bg:#fffbeb;
  --tpv2-danger:#ef4444;
  --tpv2-danger-bg:#fef2f2;
  --tpv2-info:#3b82f6;
  --tpv2-shadow-sm:0 1px 2px rgba(20,15,40,.04), 0 1px 3px rgba(20,15,40,.05);
  --tpv2-shadow:0 4px 14px rgba(20,15,40,.06), 0 2px 4px rgba(20,15,40,.04);
  --tpv2-shadow-lg:0 12px 34px rgba(20,15,40,.10), 0 4px 10px rgba(20,15,40,.05);
  --tpv2-radius:14px;
  --tpv2-radius-sm:10px;
}

/* ---- Reset del bloque page-tpv ---- */
#page-tpv{ padding-bottom:24px; }
#page-tpv .page-header,
#page-tpv .tpv-topbar,
#page-tpv .tpv-modes:not(.tpv2-modes){ display:none !important; }

/* ---- HEADER ---- */
.tpv2-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:linear-gradient(135deg, #fff 0%, #faf7ff 100%);
  border:1px solid var(--tpv2-border);
  border-radius:var(--tpv2-radius);
  padding:1rem 1.25rem;
  box-shadow:var(--tpv2-shadow-sm);
  margin-bottom:.85rem;
}
.tpv2-brand{ display:flex; align-items:center; gap:.85rem; min-width:0; }
.tpv2-brand-ico{
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg, var(--tpv2-brand) 0%, var(--tpv2-brand-2) 100%);
  display:grid; place-items:center; color:#fff;
  box-shadow:0 4px 12px rgba(91,42,134,.25);
  flex:0 0 auto;
}
.tpv2-title{ font-size:1.05rem; font-weight:700; color:var(--tpv2-text); letter-spacing:-.01em; }
.tpv2-sub{ font-size:.78rem; color:var(--tpv2-text-muted); margin-top:2px; }

.tpv2-actions{ display:flex; gap:.45rem; flex-wrap:wrap; }
.tpv2-action{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fff; border:1px solid var(--tpv2-border-strong);
  color:var(--tpv2-text); font-weight:600; font-size:.82rem;
  padding:.55rem .85rem; border-radius:10px;
  cursor:pointer; transition:all .15s;
  box-shadow:var(--tpv2-shadow-sm);
}
.tpv2-action:hover{ background:#faf7ff; border-color:var(--tpv2-brand-3); transform:translateY(-1px); }
.tpv2-action svg{ color:var(--tpv2-text-muted); }
.tpv2-action-primary{
  background:linear-gradient(135deg, var(--tpv2-brand) 0%, var(--tpv2-brand-2) 100%);
  color:#fff !important; border-color:transparent;
}
.tpv2-action-primary svg{ color:#fff; }
.tpv2-action-primary:hover{ filter:brightness(1.08); }

/* ---- BARRA DE ESTADO ---- */
.tpv2-status{
  display:flex; align-items:stretch; gap:0;
  background:var(--tpv2-card);
  border:1px solid var(--tpv2-border);
  border-radius:var(--tpv2-radius);
  padding:.55rem .25rem;
  box-shadow:var(--tpv2-shadow-sm);
  margin-bottom:.85rem;
  overflow-x:auto;
}
.tpv2-status-cell{
  display:flex; flex-direction:column; gap:.3rem;
  padding:.35rem 1rem;
  border-right:1px solid var(--tpv2-border);
  min-width:140px;
}
.tpv2-status-cell:last-child{ border-right:none; }
.tpv2-status-sep{ flex:1; border-right:none; }
.tpv2-status-label{
  font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tpv2-text-faint);
}
.tpv2-status-val{ font-size:.88rem; color:var(--tpv2-text); display:flex; align-items:baseline; gap:.4rem; }
.tpv2-status-val b{ font-size:1.05rem; font-weight:700; }
.tpv2-status-mid{ color:var(--tpv2-text-faint); }
.tpv2-status-cell-stat{ background:linear-gradient(135deg, #faf7ff 0%, #fff 100%); border-radius:8px; }
.tpv2-clock{ font-family:'Barlow','Segoe UI',system-ui,sans-serif; font-weight:600; font-size:.95rem; color:var(--tpv2-text); }

.tpv2-select{
  background:#fff; border:1px solid var(--tpv2-border-strong);
  border-radius:8px; padding:.4rem .6rem; font-size:.85rem;
  color:var(--tpv2-text); cursor:pointer; font-weight:500;
  min-width:130px; outline:none; transition:border-color .15s;
}
.tpv2-select:hover{ border-color:var(--tpv2-brand-3); }
.tpv2-select:focus{ border-color:var(--tpv2-brand); box-shadow:0 0 0 3px rgba(91,42,134,.12); }

.tpv2-caja-state{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .65rem; border-radius:999px;
  font-size:.82rem; font-weight:600;
}
.tpv2-caja-state.closed,
.tpv-caja-state.closed.tpv2-caja-state{ background:var(--tpv2-danger-bg); color:var(--tpv2-danger); }
.tpv2-caja-state.open,
.tpv-caja-state.open.tpv2-caja-state{ background:var(--tpv2-success-bg); color:var(--tpv2-success); }
.tpv2-caja-dot{
  width:8px; height:8px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 3px rgba(239,68,68,.18);
  animation:tpv2-pulse 2s ease-in-out infinite;
}
.tpv-caja-state.open .tpv2-caja-dot{ box-shadow:0 0 0 3px rgba(16,185,129,.18); }
@keyframes tpv2-pulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.15);} }

/* ---- MODO SEGMENTADO ---- */
.tpv2-modes{
  display:flex; gap:.35rem;
  background:#ececf4;
  padding:.3rem;
  border-radius:12px;
  margin-bottom:.85rem;
}
.tpv2-modes .tpv2-mode,
.tpv-modes.tpv2-modes .tpv-mode{
  flex:1;
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:.5rem !important;
  padding:.6rem .8rem !important;
  background:transparent !important; border:none !important;
  border-radius:8px !important;
  color:var(--tpv2-text-muted) !important;
  font-weight:600 !important; font-size:.85rem !important;
  cursor:pointer; transition:all .18s;
  box-shadow:none !important;
}
.tpv2-modes .tpv-mode-lbl{ display:inline !important; font-size:inherit !important; }
.tpv2-modes .tpv2-mode-ico{ display:inline-flex; }
.tpv2-modes .tpv-mode.active,
.tpv2-modes .tpv-mode:hover{
  background:#fff !important;
  color:var(--tpv2-brand) !important;
  box-shadow:var(--tpv2-shadow-sm) !important;
}
.tpv2-modes .tpv-mode.active{ color:var(--tpv2-brand) !important; }

/* ---- LAYOUT PRINCIPAL ---- */
.tpv2-layout{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 380px;
  gap:.85rem;
  align-items:stretch;
}
@media (max-width: 1100px){
  .tpv2-layout{ grid-template-columns:1fr; }
}

/* ---- CATÁLOGO ---- */
.tpv2-catalog{
  background:var(--tpv2-card) !important;
  border:1px solid var(--tpv2-border) !important;
  border-radius:var(--tpv2-radius) !important;
  padding:1rem !important;
  box-shadow:var(--tpv2-shadow-sm) !important;
  display:flex; flex-direction:column; gap:.85rem;
  min-height:540px;
}
.tpv2-search{
  position:relative; display:flex; align-items:center;
}
.tpv2-search svg{
  position:absolute; left:.85rem; color:var(--tpv2-text-faint);
  pointer-events:none;
}
.tpv2-search input{
  width:100%;
  background:#f6f6fa;
  border:1px solid transparent;
  border-radius:10px;
  padding:.65rem .85rem .65rem 2.4rem;
  font-size:.9rem; color:var(--tpv2-text);
  outline:none; transition:all .15s;
}
.tpv2-search input::placeholder{ color:var(--tpv2-text-faint); }
.tpv2-search input:focus{ background:#fff; border-color:var(--tpv2-brand); box-shadow:0 0 0 3px rgba(91,42,134,.10); }
.tpv2-search-kbd{
  position:absolute; right:.7rem;
  background:#fff; border:1px solid var(--tpv2-border-strong);
  border-radius:5px; padding:.05rem .35rem;
  font-family:'Barlow','Segoe UI',system-ui,sans-serif; font-size:.7rem;
  color:var(--tpv2-text-faint);
}

.tpv2-cats{
  display:flex; gap:.4rem; overflow-x:auto;
  padding-bottom:.25rem;
  scrollbar-width:thin;
}
.tpv2-cats::-webkit-scrollbar{ height:5px; }
.tpv2-cats::-webkit-scrollbar-thumb{ background:#d1d1de; border-radius:5px; }

/* Pestañas categoria — sobrescribe estilo legacy */
.tpv2-cats button,
.tpv2-cats .tpv-cat-tab,
.tpv-cat-tabs.tpv2-cats > button,
.tpv-cat-tabs.tpv2-cats > .tpv-cat-tab{
  background:#f6f6fa !important;
  border:1px solid transparent !important;
  color:var(--tpv2-text-muted) !important;
  border-radius:999px !important;
  padding:.45rem .9rem !important;
  font-size:.82rem !important; font-weight:600 !important;
  cursor:pointer; white-space:nowrap;
  transition:all .15s;
  box-shadow:none !important;
}
.tpv2-cats button:hover,
.tpv-cat-tabs.tpv2-cats > button:hover{
  background:#ecebf5 !important; color:var(--tpv2-text) !important;
}
.tpv2-cats button.active,
.tpv2-cats .tpv-cat-tab.active,
.tpv-cat-tabs.tpv2-cats > button.active,
.tpv-cat-tabs.tpv2-cats > .tpv-cat-tab.active{
  background:linear-gradient(135deg, var(--tpv2-brand), var(--tpv2-brand-2)) !important;
  color:#fff !important;
  box-shadow:0 4px 10px rgba(91,42,134,.25) !important;
}

/* Grid de productos */
.tpv2-products,
.tpv-products.tpv2-products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap:.7rem !important;
}
.tpv2-products > *,
.tpv-products.tpv2-products > *,
.tpv2-products .tpv-product{
  background:#fff !important;
  border:1px solid var(--tpv2-border) !important;
  border-radius:14px !important;
  padding:1.1rem .8rem .9rem !important;
  cursor:pointer;
  display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important;
  gap:.45rem !important;
  min-height:148px;
  text-align:center;
  transition:transform .12s, box-shadow .15s, border-color .15s, background .15s;
  position:relative;
  box-shadow:var(--tpv2-shadow-sm);
  color:var(--tpv2-text) !important;
  font-size:.88rem !important;
  overflow:hidden;
}
.tpv2-products > *::before,
.tpv2-products .tpv-product::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--tpv2-brand), var(--tpv2-brand-2), var(--tpv2-brand-3));
  opacity:0; transition:opacity .15s;
}
.tpv2-products > *:hover,
.tpv-products.tpv2-products > *:hover{
  border-color:var(--tpv2-brand-3) !important;
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(91,42,134,.14) !important;
}
.tpv2-products > *:hover::before{ opacity:1; }
.tpv2-products > *:active,
.tpv-products.tpv2-products > *:active{
  transform:translateY(-1px);
  background:#faf7ff !important;
}

/* Iconos GRANDES en producto */
.tpv2-products .tpv-product-ico,
.tpv2-products .product-ico{
  font-size:2.6rem !important;
  line-height:1 !important;
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px;
  border-radius:16px;
  background:linear-gradient(135deg, #faf7ff 0%, #ecebf5 100%);
  margin-bottom:.15rem;
  filter:drop-shadow(0 1px 2px rgba(20,15,40,.08));
  transition:transform .15s;
}
.tpv2-products > *:hover .tpv-product-ico,
.tpv2-products > *:hover .product-ico{
  transform:scale(1.08);
}
.tpv2-products .tpv-product-name,
.tpv2-products .product-name{
  font-size:.85rem !important;
  font-weight:600 !important;
  color:var(--tpv2-text) !important;
  line-height:1.2 !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.05em;
}
.tpv2-products .tpv-product-price,
.tpv2-products .product-price{
  font-size:.95rem !important;
  font-weight:700 !important;
  color:var(--tpv2-brand) !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* ---- TICKET (ORDER) ---- */
.tpv2-order{
  background:var(--tpv2-card) !important;
  border:1px solid var(--tpv2-border) !important;
  border-radius:var(--tpv2-radius) !important;
  padding:0 !important;
  box-shadow:var(--tpv2-shadow) !important;
  display:flex; flex-direction:column;
  position:sticky; top:1rem;
  align-self:stretch;
  overflow:hidden;
}
.tpv2-order-head{
  display:flex !important; justify-content:space-between !important; align-items:center !important;
  padding:1rem 1.1rem !important;
  background:linear-gradient(135deg, #faf7ff 0%, #fff 100%);
  border-bottom:1px solid var(--tpv2-border);
  margin:0 !important;
}
.tpv2-order-title{
  font-size:.95rem; font-weight:700; color:var(--tpv2-text); letter-spacing:-.01em;
}
.tpv2-order-meta{
  font-size:.72rem; color:var(--tpv2-text-faint); margin-top:2px;
  font-family:'Barlow','Segoe UI',system-ui,sans-serif;
}
.tpv2-order-clear{
  background:#fff !important; border:1px solid var(--tpv2-border-strong) !important;
  color:var(--tpv2-danger) !important;
  width:32px !important; height:32px !important; border-radius:8px !important;
  cursor:pointer; display:grid; place-items:center;
  transition:all .15s;
  font-size:0 !important;
  padding:0 !important;
}
.tpv2-order-clear:hover{ background:var(--tpv2-danger-bg) !important; border-color:var(--tpv2-danger) !important; }

.tpv2-context{
  display:flex !important; align-items:center; gap:.6rem;
  padding:.7rem 1.1rem;
  background:#faf7ff;
  border-bottom:1px solid var(--tpv2-border);
}
.tpv2-context-label{
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tpv2-brand); flex:0 0 auto;
}
.tpv2-context .tpv2-select{ flex:1; min-width:0; }

/* Items del ticket */
.tpv2-items{
  padding:.5rem 1.1rem;
  overflow-y:auto;
  max-height:38vh;
  min-height:140px;
  border-bottom:1px solid var(--tpv2-border);
}
.tpv2-items:empty::before{
  content:"Toca un producto del catálogo para empezar el ticket";
  display:block; text-align:center; padding:2rem 1rem;
  color:var(--tpv2-text-faint); font-size:.82rem; font-style:italic;
}

/* Estilo de cada line-item (lo renderiza el JS legacy, le aplicamos override) */
#tpv-cart-items > div,
#tpv-cart-items > .tpv-cart-item{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:.6rem !important;
  padding:.55rem 0 !important;
  border-bottom:1px dashed var(--tpv2-border) !important;
  font-size:.85rem !important;
}
#tpv-cart-items > div:last-child{ border-bottom:none !important; }

/* Totales */
.tpv2-totals{
  padding:.85rem 1.1rem !important;
  background:#faf7ff;
  border-bottom:1px solid var(--tpv2-border);
  margin:0 !important;
}
.tpv2-total-row,
.tpv2-totals .tpv-cart-row{
  display:flex !important; justify-content:space-between !important;
  font-size:.85rem; color:var(--tpv2-text-muted);
  margin:0 !important; padding:.18rem 0 !important;
  border:none !important;
}
.tpv2-total-row span:last-child{ font-variant-numeric:tabular-nums; }
.tpv2-total-row-final,
.tpv2-totals .tpv-cart-total{
  margin-top:.45rem !important;
  padding-top:.55rem !important;
  border-top:1px solid var(--tpv2-border-strong) !important;
  color:var(--tpv2-text) !important;
  font-weight:700;
  font-size:1.05rem !important;
}
.tpv2-total-row-final span:last-child{
  color:var(--tpv2-brand);
  font-size:1.2rem;
  font-weight:800;
}

/* Botones de pago */
.tpv2-pay{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:.6rem !important;
  padding:1rem 1.1rem !important;
  background:#fff;
  margin:0 !important;
}
.tpv2-pay-btn,
.tpv2-pay .tpv-pay{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  gap:.35rem !important;
  padding:1rem .5rem !important;
  border-radius:12px !important;
  border:1px solid var(--tpv2-border-strong) !important;
  font-size:.85rem !important; font-weight:700 !important;
  cursor:pointer; transition:all .15s;
  min-height:78px;
  color:var(--tpv2-text) !important;
  background:#fff !important;
  box-shadow:var(--tpv2-shadow-sm) !important;
}
.tpv2-pay-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--tpv2-shadow) !important;
}
.tpv2-pay-btn svg{ width:24px; height:24px; }

/* Colores por método */
.tpv2-pay .tpv-pay-cash{
  background:linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color:transparent !important; color:#fff !important;
}
.tpv2-pay .tpv-pay-card{
  background:linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
  border-color:transparent !important; color:#fff !important;
}
.tpv2-pay .tpv-pay-bizum{
  background:linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
  border-color:transparent !important; color:#fff !important;
}
.tpv2-pay .tpv-pay-charge{
  background:linear-gradient(135deg, var(--tpv2-brand) 0%, var(--tpv2-brand-2) 100%) !important;
  border-color:transparent !important; color:#fff !important;
}

/* Responsive */
@media (max-width: 800px){
  .tpv2-header{ flex-direction:column; align-items:stretch; gap:.75rem; }
  .tpv2-actions{ justify-content:flex-end; }
  .tpv2-status{ flex-wrap:wrap; }
  .tpv2-status-cell{ flex:1 1 calc(50% - .5rem); min-width:0; border-right:none; border-bottom:1px solid var(--tpv2-border); }
  .tpv2-status-sep{ display:none; }
  .tpv2-modes{ overflow-x:auto; }
  .tpv2-pay{ grid-template-columns:1fr 1fr; }
  .tpv2-products{ grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)) !important; }
}

/* ====================== ALMACENES ====================== */
.tpv-wh-ov{ position:fixed; inset:0; z-index:9000; background:rgba(20,15,40,.46); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:1rem; }
.tpv-wh-modal{ width:100%; max-width:440px; background:var(--tpv2-card); border:1px solid var(--tpv2-border); border-radius:18px; padding:1.4rem; box-shadow:var(--tpv2-shadow-lg); max-height:88vh; overflow-y:auto; }
.tpv-wh-head{ display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; }
.tpv-wh-ico{ width:46px; height:46px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center; font-size:1.4rem; background:linear-gradient(135deg,#faf7ff,#ecebf5); }
.tpv-wh-title{ font-size:1.05rem; font-weight:800; color:var(--tpv2-text); letter-spacing:-.01em; }
.tpv-wh-sub{ font-size:.76rem; color:var(--tpv2-text-muted); margin-top:2px; }
.tpv-wh-x{ width:30px; height:30px; border-radius:8px; border:1px solid var(--tpv2-border-strong); background:#fff; color:var(--tpv2-text-muted); cursor:pointer; font-size:.9rem; flex:0 0 auto; }
.tpv-wh-x:hover{ background:#f4f4f8; }
.tpv-wh-lbl{ display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--tpv2-text-faint); margin:.2rem 0 .35rem; }
.tpv-wh-input{ width:100%; padding:.6rem .8rem; border:1.5px solid var(--tpv2-border-strong); border-radius:11px; font-size:.9rem; color:var(--tpv2-text); background:#fff; outline:none; font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.tpv-wh-input:focus{ border-color:var(--tpv2-brand); box-shadow:0 0 0 3px rgba(91,42,134,.12); }
.tpv-wh-list{ display:flex; flex-direction:column; gap:7px; margin:.9rem 0; }
.tpv-wh-item{ display:flex; align-items:center; gap:.5rem; padding:.45rem .55rem; border:1px solid var(--tpv2-border); border-radius:12px; background:#fff; transition:border-color .15s, background .15s; }
.tpv-wh-item.active{ border-color:var(--tpv2-brand-3); background:#faf7ff; }
.tpv-wh-radio{ width:30px; height:30px; flex:0 0 auto; border:none; background:none; cursor:pointer; font-size:1.1rem; color:var(--tpv2-brand); }
.tpv-wh-name{ flex:1; min-width:0; border:1px solid transparent; background:transparent; font-size:.9rem; font-weight:600; color:var(--tpv2-text); padding:.35rem .5rem; border-radius:8px; outline:none; font-family:inherit; }
.tpv-wh-name:hover{ background:#f4f4f8; }
.tpv-wh-name:focus{ background:#fff; border-color:var(--tpv2-brand); }
.tpv-wh-badge{ font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--tpv2-brand); background:#ede9fe; padding:.2rem .45rem; border-radius:999px; flex:0 0 auto; }
.tpv-wh-del{ width:30px; height:30px; flex:0 0 auto; border:none; background:none; cursor:pointer; font-size:.85rem; opacity:.6; }
.tpv-wh-del:hover:not([disabled]){ opacity:1; } .tpv-wh-del[disabled]{ opacity:.2; cursor:not-allowed; }
.tpv-wh-add{ display:flex; gap:.5rem; }
.tpv-wh-add .tpv-wh-input{ flex:1; }
.tpv-wh-addbtn{ padding:.6rem 1rem; border:none; border-radius:11px; background:linear-gradient(135deg,var(--tpv2-brand),var(--tpv2-brand-2)); color:#fff; font-size:.85rem; font-weight:700; cursor:pointer; font-family:inherit; flex:0 0 auto; }
.tpv-wh-addbtn:hover{ filter:brightness(1.07); }

/* Dark mode opcional (si la app aplica .dark al body) */
body.dark #page-tpv,
.dark #page-tpv{
  --tpv2-bg:#13111c;
  --tpv2-card:#1c1929;
  --tpv2-border:#2a2638;
  --tpv2-border-strong:#3a3550;
  --tpv2-text:#f3f0fb;
  --tpv2-text-muted:#a39fbb;
  --tpv2-text-faint:#7a779a;
}