/* =========================================================
   TOROSOFT MARKET — White Minimal + Bleu France (v1)
   - UI general (cards, tables, inputs, buttons, modals)
   - Sidebar nueva con menús/submenús + iconografía
   ========================================================= */

:root{
  --tm-bg: #ffffff;
  --tm-surface: #ffffff;
  --tm-surface-2: #f6f8fc;
  --tm-surface-3: #eef3ff;

  --tm-border: rgba(15,23,42,.10);
  --tm-border-2: rgba(15,23,42,.14);

  --tm-text: #0f172a;
  --tm-muted: #6b7280;

  /* Azul Francia (acentos) */
  --tm-accent: #1e5eff;
  --tm-accent-2: #0b3dff;
  --tm-accent-soft: rgba(30,94,255,.10);
  --tm-accent-soft-2: rgba(30,94,255,.16);

  --tm-ok: #16a34a;
  --tm-warn: #f59e0b;
  --tm-err: #ef4444;

  --tm-radius: 16px;
  --tm-radius-sm: 14px;

  --tm-shadow: 0 12px 32px rgba(15,23,42,.08);
  --tm-shadow-sm: 0 8px 20px rgba(15,23,42,.07);

  --tm-font: system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* Reset / base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
a{ color:inherit; text-decoration:none; }
code{ font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }

.tm-muted{ color: var(--tm-muted); font-size:12px;}

/* Layout base */
.tm-app{
  display:flex;
  gap:14px;
  align-items:flex-start;

  font-family: var(--tm-font);
  color: var(--tm-text);

  background: var(--tm-bg);
}

.tm-main{
  width:80%;
  flex:1;
  min-width:320px;
  padding:0; /* tu main ya tiene cards internas */
}

/* Card */
.tm-card{
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  box-shadow: var(--tm-shadow-sm);
}

.tm-card[style*="padding"]{ /* respeta tus inline */
  border-radius: var(--tm-radius-sm);
}

/* Row helpers */
.tm-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}

/* =========================================================
   Inputs / Selects / Textarea
   ========================================================= */
.tm-input,
.tm-select,
.tm-textarea{
  width:auto;
  padding:10px 12px;
  border: 1px solid var(--tm-border-2);
  border-radius: 8px;
  background: var(--tm-surface);
  color: var(--tm-text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
}

.tm-textarea{ min-height: 92px; resize: vertical; }

.tm-input::placeholder,
.tm-textarea::placeholder{
  color: rgba(100,116,139,.70);
}

.tm-input:focus,
.tm-select:focus,
.tm-textarea:focus{
  outline:none;
  border-color: rgba(30,94,255,.55);
  box-shadow: 0 0 0 4px rgba(30,94,255,.14);
}

.tm-input:disabled,
.tm-select:disabled,
.tm-textarea:disabled{
  background: var(--tm-surface-2);
  color: rgba(100,116,139,.85);
  cursor:not-allowed;
}

.tm-input[readonly],
.tm-textarea[readonly]{
  background: var(--tm-surface-2);
}

/* =========================================================
   Checkbox / Radio (simple + consistente)
   ========================================================= */
input[type="checkbox"],
input[type="radio"]{
  accent-color: var(--tm-accent);
}

.tm-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}

/* =========================================================
   Buttons
   ========================================================= */
.tm-btn{
  padding:10px 12px;
  border: 1px solid var(--tm-border-2);
  border-radius: 8px;
  color: var(--tm-text);
  font-weight: 600;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, opacity .12s ease;
}


.tm-btn:active{
  transform: translateY(0px);
  box-shadow:none;
  opacity:.96;
}

.tm-btn:focus{
  outline:none;
  border-color: rgba(30,94,255,.55);
}

/* Variantes (si querés usarlas en botones clave) */
.tm-btn--primary{
  border-color: rgba(30,94,255,.35);
  color:#fff;
}
.tm-btn--primary:hover{
  color: #2F2E2E !important;
}
.tm-btn--danger{
  border-color: rgba(239,68,68,.35);
  background: linear-gradient(180deg, rgba(239,68,68,.96) 0%, rgba(220,38,38,.96) 100%);
  color:#fff;
}

/* =========================================================
   Notices / Pre
   ========================================================= */
.tm-notice{
  border-radius: var(--tm-radius-sm);
  padding:12px;
  border:1px solid var(--tm-border);
  background: var(--tm-surface);
  box-shadow: var(--tm-shadow-sm);
}
.tm-notice strong{ font-weight:900; }

.tm-notice--ok{ border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.10); }
.tm-notice--warn{ border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.12); }
.tm-notice--err{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.12); }

.tm-pre{
  white-space:pre-wrap;
  background: #0b1220;
  color: #e5e7eb;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:12px;
}

/* =========================================================
   Tables
   ========================================================= */
.tm-tablewrap,
.tm-table-wrap{
  overflow:auto;
  border:1px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-surface);
  box-shadow: var(--tm-shadow-sm);
}

.tm-table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}

.tm-table th{
  text-align:left;
  padding:10px 12px;
  font-size:12px;
  color: rgba(100,116,139,.95);
  border-bottom:1px solid var(--tm-border);
  background: #fbfcff;
}

.tm-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(15,23,42,.06);
  font-size:13px;
}

.tm-table tr:hover td{
  background: var(--tm-accent-soft);
}

/* =========================================================
   Modal System
   ========================================================= */
.tm-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none; /* se abre con JS: display:flex */
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.tm-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.38);
  backdrop-filter: blur(3px);
}
.tm-modal__panel{
  position: relative;
  width: min(860px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: var(--tm-radius);
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  box-shadow: 0 26px 70px rgba(15,23,42,.18);
  padding: 12px;
  width: 1100px !important;
}
.tm-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 6px 10px 6px;
  border-bottom: 1px solid var(--tm-border);
  margin-bottom: 10px;
}
.tm-modal__body{ padding: 6px; }

/* =========================================================
   Sidebar NUEVA (white minimal + azul francia)
   Necesita HTML en core-ui.php con estas clases.
   ========================================================= */
.tm-side--new{
  width:20%;
  min-width:260px;
  max-width:340px;
  position: sticky;
  top: 14px;
}

.tm-side__inner{
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: 0px 10px 10px 0px;
  box-shadow: var(--tm-shadow);
  padding: 14px;
}

.tm-side__brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding: 5px 5px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.tm-brand__logo{
  width:44px;
  height:44px;
  border-radius:14px;
  background: linear-gradient(180deg, #f1f5ff 0%, #eef2ff 100%);
  border:1px solid rgba(30,94,255,.18);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tm-brand__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tm-brand__meta{ min-width:0; }
.tm-brand__name{
  font-weight:900;
  font-size:15px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tm-brand__plan{
  font-size:12px;
  color: rgba(100,116,139,.85);
  margin-top:2px;
}

.tm-side__label{
  font-size:12px;
  color: rgba(100,116,139,.85);
  font-weight:800;
  margin: 0 8px 8px 8px;
  letter-spacing:.2px;
}

.tm-ico{
  width:20px; height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(15,23,42,.52);
}
.tm-ico svg{ width:20px; height:20px; display:block; }
.tm-ico--sm{ width:18px; height:18px; }
.tm-ico--sm svg{ width:18px; height:18px; }

.tm-nav2{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color: var(--tm-text);
  font-weight:650;
  opacity:.92;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}

.tm-nav2:hover{
  background: rgba(15,23,42,.04);
  opacity:1;
  transform: translateY(-1px);
}

.tm-nav2.is-active{
  background: var(--tm-accent-soft-2);
  color: #0b3d91;
  font-weight:850;
}

.tm-nav2.is-active .tm-ico{
  color:#0b3d91;
}

.tm-nav2__txt{ flex:1; min-width:0; font-weight: 400;}

.tm-nav2__chev{
  width:18px;height:18px;
  opacity:.65;
  transition: transform .15s ease;
}
.tm-nav2__chev svg{ width:18px;height:18px; display:block; }

/* Grupo colapsable (ej Inventario) */
.tm-nav2--group{
  width:100%;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
}

.tm-nav2--group.is-open .tm-nav2__chev{
  transform: rotate(180deg);
}

/* Submenu */
.tm-subnav{
  margin: 6px 0 0 30px;
  padding-left:10px;
  border-left: 2px solid rgba(15,23,42,.08);
}

.tm-subnav__item{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  color: rgba(15,23,42,.92);
  font-weight:600;
  opacity:.88;
  transition: background .15s ease, color .15s ease;
}

.tm-subnav__item:hover{
  background: rgba(15,23,42,.04);
  opacity:1;
}

.tm-subnav__item.is-active{
  background: var(--tm-accent-soft-2);
  color: #0b3d91;
  font-weight:850;
}

/* Footer sidebar */
.tm-side__footer{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(15,23,42,.08);
}

.tm-side__footerLinks{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 6px;
}

.tm-footlink {
    display: flex;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: var(--tm-text);
    opacity: .86;
    padding: 8px 10px;
    border-radius: 12px;
    font-weight: 400;
    transition: background .15s ease, transform .12s ease;
    font-size: 13px;
}
.tm-footlink:hover{
  background: rgba(15,23,42,.04);
  opacity:1;
  transform: translateY(-1px);
}

.tm-side__version{
  font-size:12px;
  color: rgba(100,116,139,.85);
  padding:10px 10px 6px 10px;
}

.tm-side__user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
}
.tm-user__avatar{
  width:32px;height:32px;
  border-radius:10px;
  background: linear-gradient(135deg,#00d4ff,#7c3aed,#f59e0b);
}
.tm-user__txt{ flex:1; font-weight:850; }
.tm-user__chev{ width:18px;height:18px; opacity:.7; }
.tm-user__chev svg{ width:18px;height:18px; display:block; }

/* =========================================================
   Compat: si seguís usando <a class="tm-nav"> (viejo)
   Lo estilamos similar a .tm-nav2 para que no “rompa”.
   ========================================================= */
.tm-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(15,23,42,.08);
}
.tm-nav[data-legacy="1"]{ border-top:0; padding-top:0; margin-top:0; }

.tm-nav a.tm-nav{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  font-weight:650;
  opacity:.92;
}
.tm-nav a.tm-nav:hover{
  background: rgba(15,23,42,.04);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 980px){
  .tm-app{ flex-direction:column; }
  .tm-side--new{ width:100%; max-width:none; position:relative; top:auto; }
  .tm-main{ width:100% !important; }
}
[data-tm-screen] .tm-card {
    padding: 20px;
}
/* ===== Subscription: top summary (Plan actual / Acciones) ===== */
.tm-sub-summary{
  display:flex;
  gap:12px;
  align-items:stretch;
  flex-wrap:wrap;
  margin-top:12px;
}

.tm-sub-summaryBox{
  flex:1;
  min-width:260px;
  padding:14px 16px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:#fff;
  box-shadow: 0 1px 0 rgba(2,6,23,.02);
}

/* Head row */
.tm-sub-summaryBox .tm-row{
  gap:10px;
}

/* Title / labels */
.tm-sub-summaryBox .tm-muted{
  color: rgba(15,23,42,.62);
  font-size:12px;
  letter-spacing:.2px;
}

/* Plan name (Plan actual) */
.tm-sub-summaryBox .tm-sub-planName{
  font-size:20px;
  font-weight:900;
  margin-top:8px;
  line-height:1.1;
}

/* Expiration mono line */
.tm-sub-summaryBox .tm-sub-exp,
.tm-sub-summaryBox .tm-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  color: rgba(15,23,42,.78);
  background: rgba(2,6,23,.04);
  border:1px solid rgba(2,6,23,.06);
  border-radius:12px;
  padding:6px 10px;
  display:inline-block;
  margin-top:4px;
}

/* Actions text */
.tm-sub-summaryBox b{
  font-weight:900;
}

.tm-sub-summaryBox + .tm-sub-summaryBox{
  position:relative;
}

/* Nice accent on Actions card */
.tm-sub-summaryBox:nth-child(2){
  background: linear-gradient(180deg, rgba(30,94,255,.06), rgba(255,255,255,1));
  border-color: rgba(30,94,255,.12);
}

/* Responsive */
@media (max-width: 720px){
  .tm-sub-summaryBox{
    min-width:100%;
  }
}
/* =========================
   SUBSCRIPTION · TOP BAR (1 contenedor)
   ========================= */

.tm-sub-summary{
  display:flex;
  gap:0 !important;
  border:1px solid rgba(2,6,23,.10);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

/* Las dos cajas ahora son "columnas" internas del mismo contenedor */
.tm-sub-summaryBox{
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:14px 16px !important;
  margin:0 !important;
  box-shadow:none !important;
}

.tm-sub-summaryBox:first-child{
  flex: 1.1;
  border-right:1px solid rgba(2,6,23,.08);
}
.tm-sub-summaryBox:last-child{
  flex: 0.9;
}

/* Tipografía más “barra” */
.tm-sub-summaryBox .tm-muted{
  font-size:12px;
  opacity:.85;
}
.tm-sub-summaryBox .tm-mono{
  font-size:12px;
}

/* Badge/pill dentro del top */
.tm-sub-summaryBox .tm-badge,
.tm-sub-summaryBox .tmsp-pill,
.tm-sub-summaryBox .tm-notice{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  line-height:1;
}

/* Ajustes al badge "OK / expiring / expired" */
.tm-sub-summaryBox .tm-badge.tm-ok{
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.28);
}
.tm-sub-summaryBox .tm-badge.tm-warn{
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.28);
}
.tm-sub-summaryBox .tm-badge.tm-bad{
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.28);
}

/* Layout interno: todo en una fila cuando hay espacio */
.tm-sub-summaryBox:first-child{
  display:grid;
  grid-template-columns: 1fr auto; /* texto + badge */
  grid-auto-rows: auto;
  row-gap:6px;
  column-gap:12px;
}

/* “Plan actual” y badge arriba */
.tm-sub-summaryBox:first-child .tm-muted:first-child{
  grid-column:1/2;
}
.tm-sub-summaryBox:first-child .tm-badge{
  grid-column:2/3;
  justify-self:end;
}

/* Hacer que el plan (STANDARD) sea headline compacto */
.tm-sub-summaryBox:first-child > div:nth-child(2){
  font-size:18px !important;
  font-weight:900 !important;
  letter-spacing:.2px;
}

/* Hacer “Vence” y “Vence en X días” tipo pills suaves */
.tm-sub-summaryBox:first-child .tm-mono{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.08);
  width: fit-content;
}

/* Acciones: compacto y alineado */
.tm-sub-summaryBox:last-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}

/* Responsive: 1 columna cuando no hay ancho */
@media (max-width: 900px){
  .tm-sub-summary{
    flex-direction:column;
  }
  .tm-sub-summaryBox:first-child{
    border-right:none;
    border-bottom:1px solid rgba(2,6,23,.08);
  }
}
/* =========================
   PLAN UPGRADE · Blue France glow pulse
   ========================= */

/* Detecta el plan que tiene el botón de upgrade */
.tm-sub-plan:has(button[data-upgrade="1"]) {
  border-color: rgba(0, 87, 255, .40) !important;
  background: rgba(0, 87, 255, .06) !important;
  position: relative;
  overflow: hidden;
}

/* Glow */
.tm-sub-plan:has(button[data-upgrade="1"])::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:16px;
  pointer-events:none;
  box-shadow:
    0 0 0 1px rgba(0, 87, 255, .28),
    0 0 24px rgba(0, 87, 255, .18),
    0 0 56px rgba(0, 87, 255, .10);
  opacity:.85;
  animation: tmGlowPulse 1.6s ease-in-out infinite;
}

/* Highlight suave de “barrido” */
.tm-sub-plan:has(button[data-upgrade="1"])::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width:60%;
  height:180%;
  background: linear-gradient(90deg, transparent, rgba(0,87,255,.10), transparent);
  transform: rotate(14deg);
  animation: tmShine 2.8s ease-in-out infinite;
  pointer-events:none;
  opacity:.9;
}

@keyframes tmGlowPulse{
  0%, 100% { transform: scale(1); filter: blur(0px); opacity:.75; }
  50%      { transform: scale(1.01); filter: blur(.2px); opacity:1; }
}
@keyframes tmShine{
  0%   { transform: translateX(-30%) rotate(14deg); opacity:.0; }
  30%  { opacity:.9; }
  60%  { opacity:.3; }
  100% { transform: translateX(210%) rotate(14deg); opacity:.0; }
}
/* Topbar subscription: 1 solo contenedor */
.tm-sub-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background: var(--tm-surface, #fff);
}

.tm-sub-topbar__title{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 8px;
}

.tm-sub-topbar__row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.tm-sub-topbar__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width: 110px;
}

.tm-sub-topbar__msg{
  margin-top:10px;
  color: rgba(91,103,122,.95);
  font-size: 13px;
  line-height: 1.35;
}

.tm-sub-req{
  margin-top:8px;
  color: rgba(91,103,122,.95);
  font-size: 13px;
}

/* Pills */
.tm-sub-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
  line-height: 1;
}

.tm-sub-pill__k{
  font-size: 11px;
  opacity: .78;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.tm-sub-pill__v{
  font-size: 13px;
  font-weight: 900;
}

/* Variantes */
.tm-sub-pill.is-ok{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.28); }
.tm-sub-pill.is-warn{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.28); }
.tm-sub-pill.is-bad{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.28); }
.tm-sub-pill.is-muted{ background: rgba(2,6,23,.03); border-color: rgba(15,23,42,.10); }
.tm-sub-pill.is-strong{ background: rgba(30,94,255,.10); border-color: rgba(30,94,255,.28); }

/* Mobile */
@media (max-width: 720px){
  .tm-sub-topbar{ flex-direction:column; }
  .tm-sub-topbar__right{ justify-content:flex-start; min-width:0; }
}
/* Subscription: deshabilitar MercadoPago visualmente */
#tm-sub-method-mp{
  pointer-events:none !important;
  opacity:.45 !important;
}

#tm-sub-method-mp + span,
#tm-sub-method-mp{
  cursor:not-allowed !important;
}

/* Si el texto "MercadoPago (Checkout Pro)" está justo después del input dentro del label */
#tm-sub-method-mp{
  /* no cambia texto, solo lo deshabilita */
}

/* Opcional: mostrar badge "Próximamente" al lado del label */
#tm-sub-method-mp{
  /* nada */
}
#tm-sub-method-mp:checked{
  /* evitá que quede seleccionado visualmente */
}
/* ===== TM Subscription Plans: glow azul + sweep ===== */
#tm-sub-plans .tm-sub-plan{
  position: relative;
  overflow: hidden;
  border-color: rgba(30,94,255,.35) !important;
  box-shadow:
    0 0 0 1px rgba(30,94,255,.22),
    0 0 22px rgba(30,94,255,.18);
  animation: tmBluePulse 2.6s ease-in-out infinite;
}

/* Sweep que recorre la card */
#tm-sub-plans .tm-sub-plan::after{
  content: "";
  position: absolute;
  top: -30%;
  left: -60%;
  width: 55%;
  height: 160%;
  pointer-events: none;
  transform: rotate(18deg) translateX(-120%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(30,94,255,.08) 35%,
    rgba(30,94,255,.22) 50%,
    rgba(30,94,255,.08) 65%,
    transparent 100%
  );
  filter: blur(0.5px);
  animation: tmGlowSweep 2.6s ease-in-out infinite;
}

/* Si está selected, un toque más fuerte */
#tm-sub-plans .tm-sub-plan--selected{
  box-shadow:
    0 0 0 1px rgba(30,94,255,.35),
    0 0 32px rgba(30,94,255,.28) !important;
}

/* Si está disabled, bajamos intensidad */
#tm-sub-plans .tm-sub-plan--disabled{
  animation: none !important;
  box-shadow:
    0 0 0 1px rgba(30,94,255,.12),
    0 0 10px rgba(30,94,255,.10) !important;
}
#tm-sub-plans .tm-sub-plan--disabled::after{
  display: none !important;
}

/* Animaciones */
@keyframes tmGlowSweep{
  0%   { transform: rotate(18deg) translateX(-140%); opacity: .0; }
  18%  { opacity: .85; }
  50%  { opacity: .65; }
  82%  { opacity: .85; }
  100% { transform: rotate(18deg) translateX(260%); opacity: 0; }
}

@keyframes tmBluePulse{
  0%, 100%{
    box-shadow:
      0 0 0 1px rgba(30,94,255,.22),
      0 0 18px rgba(30,94,255,.16);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(30,94,255,.35),
      0 0 34px rgba(30,94,255,.28);
  }
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  #tm-sub-plans .tm-sub-plan{ animation: none !important; }
  #tm-sub-plans .tm-sub-plan::after{ animation: none !important; display:none !important; }
}
/* ===== TM Subscription Plans: glow azul + sweep vertical (no diagonal) ===== */
#tm-sub-plans .tm-sub-plan{
  position: relative;
  overflow: hidden;
  border-color: rgba(30,94,255,.28) !important;
  box-shadow:
    0 0 0 1px rgba(30,94,255,.16),
    0 0 18px rgba(30,94,255,.12);
  animation: tmBluePulse 3.2s ease-in-out infinite;
}

/* Sweep vertical, ocupa TODO el alto, más soft */
#tm-sub-plans .tm-sub-plan::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;          /* 👈 ocupa todo el alto */
  left: -40%;
  width: 40%;
  pointer-events: none;
  transform: translateX(-120%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(30,94,255,.035) 35%,
    rgba(30,94,255,.085) 50%,
    rgba(30,94,255,.035) 65%,
    transparent 100%
  );
  filter: blur(1px);  /* más suave */
  animation: tmGlowSweepV 3.2s ease-in-out infinite;
}

/* Selected un toque más fuerte, pero sutil */
#tm-sub-plans .tm-sub-plan--selected{
  box-shadow:
    0 0 0 1px rgba(30,94,255,.24),
    0 0 26px rgba(30,94,255,.18) !important;
}

/* Disabled sin animación */
#tm-sub-plans .tm-sub-plan--disabled{
  animation: none !important;
  box-shadow:
    0 0 0 1px rgba(30,94,255,.10),
    0 0 10px rgba(30,94,255,.08) !important;
}
#tm-sub-plans .tm-sub-plan--disabled::after{
  display: none !important;
}

/* Animaciones */
@keyframes tmGlowSweepV{
  0%   { transform: translateX(-140%); opacity: 0; }
  18%  { opacity: .65; }
  50%  { opacity: .45; }
  82%  { opacity: .65; }
  100% { transform: translateX(320%); opacity: 0; }
}

@keyframes tmBluePulse{
  0%, 100%{
    box-shadow:
      0 0 0 1px rgba(30,94,255,.14),
      0 0 16px rgba(30,94,255,.10);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(30,94,255,.22),
      0 0 26px rgba(30,94,255,.16);
  }
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  #tm-sub-plans .tm-sub-plan{ animation: none !important; }
  #tm-sub-plans .tm-sub-plan::after{ animation: none !important; display:none !important; }
}
/* ===== Pago en 1 sola fila ===== */
#tm-sub-pay-card.tm-sub-pay--one .tm-sub-pay__row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}

#tm-sub-pay-card.tm-sub-pay--one .tm-sub-pay__title{
  font-weight:900;
  margin-right:6px;
  white-space:nowrap;
}

/* En mobile, que baje prolijo */
@media (max-width: 720px){
  #tm-sub-pay-card.tm-sub-pay--one .tm-sub-pay__row{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  #tm-sub-pay-card.tm-sub-pay--one .tm-sub-pay__btn{
    width:100%;
  }
}

/* ===== Radios con look pro (sin “básico”) ===== */
#tm-sub-pay-card .tm-check{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  user-select:none;
}

#tm-sub-pay-card .tm-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

#tm-sub-pay-card .tm-check__box{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1.5px solid rgba(15,23,42,.25);
  background:#fff;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

#tm-sub-pay-card .tm-check__box::after{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(30,94,255,.90);
  transform: scale(0);
  transition: transform .16s ease;
}

#tm-sub-pay-card .tm-check input:checked + .tm-check__box{
  border-color: rgba(30,94,255,.55);
  box-shadow:
    0 0 0 3px rgba(30,94,255,.12),
    0 1px 0 rgba(15,23,42,.04);
}

#tm-sub-pay-card .tm-check input:checked + .tm-check__box::after{
  transform: scale(1);
}

#tm-sub-pay-card .tm-check__txt{
  font-size:13px;
  color: rgba(15,23,42,.92);
}

#tm-sub-pay-card .tm-sub-pay__opt--disabled{
  opacity:.55;
  cursor:not-allowed;
}

#tm-sub-pay-card .tm-sub-pay__opt--disabled .tm-check__box{
  background: rgba(15,23,42,.03);
}

/* Hover suave */
@media (hover:hover){
  #tm-sub-pay-card .tm-sub-pay__opt:not(.tm-sub-pay__opt--disabled):hover .tm-check__box{
    border-color: rgba(30,94,255,.40);
    box-shadow: 0 0 0 3px rgba(30,94,255,.08);
  }
}
/* La fila de medios de pago que contiene el botón debe ocupar todo el ancho */
#tm-sub-pay-card .tm-row{
  width: 100% !important;
}

/* Si el botón está en la MISMA fila que los radios: lo empuja al final */
#tm-sub-pay-card #tm-sub-btn-start{
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

/* Si por algún motivo el botón quedó en otra fila, igual lo manda a la derecha */
#tm-sub-pay-card .tm-row:last-of-type{
  justify-content: flex-end !important;
}
/* Azul Francia para el texto del plan cuando es STANDARD */
body.tm-plan-standard #tm-plan-name,
#tm-app.tm-plan-standard #tm-plan-name{
  color: #0055A4; /* azul francia */
}


/* =========================================================
   TM POS — Skin “como la captura” (override final)
   Pegar al FINAL de tm.css
   ========================================================= */

.tm-pos{
  --pos-border: rgba(15, 23, 42, .08);
  --pos-border2: rgba(15, 23, 42, .06);
  --pos-muted: #64748b;
  --pos-bg: #ffffff;
  --pos-soft: #f8fafc;
  --pos-radius: 14px;
  --pos-radius-lg: 16px;
  --pos-shadow: 0 1px 2px rgba(15,23,42,.05);
  --pos-shadow-h: 0 10px 24px rgba(15,23,42,.08);
  --pos-blue: #2563eb;
  --pos-purple: #7c3aed;
}

/* ---------- Layout general (soporta splitter) ---------- */
/* Si tu POS usa splitter + flex, esto lo deja igual a la captura */
.tm-pos__body{
  display:flex;
  gap:12px;
  align-items:stretch;
}

/* Izquierda flexible */
.tm-pos__left{
  flex: 1 1 auto;
  min-width: 360px;
}

/* Splitter (si existe) */
.tm-pos__splitter{
  flex: 0 0 10px;
  width: 10px;
  cursor: col-resize;
  border-radius: 999px;
  position: relative;
  user-select: none;
  touch-action: none;
  opacity: .85;
}
.tm-pos__splitter:before{
  content:"";
  position:absolute;
  inset: 10px 3px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
}
.tm-pos__splitter:hover:before{ background: rgba(15,23,42,.12); }
.tm-pos__splitter.is-dragging:before{ background: rgba(15,23,42,.18); }

body.tmpos-resizing{
  cursor: col-resize !important;
  user-select: none !important;
}

/* Derecha con ancho variable (cuando el JS setea --tmpos-right-w) */
.tm-pos__right{
  flex: 0 0 var(--tmpos-right-w, 380px);
  min-width: 340px;
  max-width: 720px;
  position: sticky;
  top: 10px;
  align-self: start;
}

/* Responsive */
@media (max-width: 980px){
  .tm-pos__body{ flex-direction: column; }
  .tm-pos__splitter{ display:none; }
  .tm-pos__right{
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
    position: relative;
    top: 0;
  }
  .tm-pos__left{ min-width: 0; }
}

/* ---------- Header / topbar ---------- */
.tm-pos__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.tm-pos__crumb{ font-weight:800; }
.tm-pos__crumb .tm-muted{ font-weight:500; color: var(--pos-muted); }

.tm-pos__globalActions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Botón Turno como primario (blue) */
#tmpos_btn_shift{
  background: var(--pos-blue);
  border-color: var(--pos-blue);
  color:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
#tmpos_btn_shift:hover{ filter: brightness(.98); }

/* Botón Nuevo blanco (como en captura) */
#tmpos_btn_cash_new{
  background:#fff;
  border: 1px solid var(--pos-border);
  box-shadow: var(--pos-shadow);
}
#tmpos_btn_cash_new:hover{ box-shadow: var(--pos-shadow-h); }

/* Barra superior izquierda/derecha */
.tm-pos__topbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.tm-pos__topbarLeft, .tm-pos__topbarRight{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Search con icono (solo CSS, usando tu wrapper) */
.tm-pos__searchWrap{
  position:relative;
  min-width: 280px;
  flex: 1;
}
.tm-pos__searchWrap:before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  transform: translateY(-50%);
  width:16px;
  height:16px;
  opacity:.65;
  background-repeat:no-repeat;
  background-size:16px 16px;
  /* lupa (svg inline) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
#tmpos_q{
  padding-left: 38px;
  height: 40px;
  border: 1px solid var(--pos-border);
  border-radius: 8px;
  background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.01);
}
#tmpos_q:focus{ outline:none; border-color: rgba(37,99,235,.35); box-shadow: 0 0 0 3px rgba(37,99,235,.10); }

.tm-pos__hintKey{
  position:absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  font-size:12px;
  border:1px solid var(--pos-border);
  border-radius:8px;
  padding:2px 7px;
  background: var(--pos-soft);
  color: var(--pos-muted);
}

/* Selects / botones de vista */
.tm-pos select.tm-select,
.tm-pos .tm-select{
  height: 40px;
  border: 1px solid var(--pos-border);
  border-radius: 8px;
  background:#fff;
}
.tm-pos__viewBtns .tm-btn{
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  border: 1px solid var(--pos-border);
  background:#fff;
}

/* ---------- Catálogo (cards como la captura) ---------- */
.tm-pos__catalog{ margin-top: 10px; }

.tm-pos__grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
@media (max-width: 1200px){
  .tm-pos__grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 560px){
  .tm-pos__grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Card: imagen arriba + texto abajo */
.tm-pos__card{
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--pos-border2);
  border-radius: var(--pos-radius-lg);
  background: var(--pos-bg);
  box-shadow: var(--pos-shadow);
  cursor: pointer;
  user-select:none;
  transition: box-shadow .14s ease, transform .06s ease, border-color .14s ease;
}
.tm-pos__card:hover{
  box-shadow: var(--pos-shadow-h);
  border-color: rgba(15,23,42,.10);
}
.tm-pos__card:active{ transform: scale(.995); }

/* Thumb grande */
.tm-pos__thumb{
  width: 100%;
  height: 150px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--pos-border2);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tm-pos__thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* como la captura (producto “entero”) */
  display:block;
}

/* Textos */
.tm-pos__pname{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;
  text-transform: none;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: 3.6em;
}
.tm-pos__meta{
  margin-top: -2px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color: var(--pos-muted);
  font-size: 13px;
}
.tm-pos__price{
  margin-top: 0;
  font-weight: 900;
  font-size: 16px;
  color: #0f172a;
}

/* Badge (cantidad/promo) arriba derecha */
.tm-pos__badge{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 900;
  background: #7c3aed;
  color:#fff;
  box-shadow: 0 6px 16px rgba(124,58,237,.25);
}

/* ---------- Tabs abajo (Venta Principal + plus) ---------- */
.tm-pos__tabs{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 12px;
}
.tm-pos__tab{
  height: 36px;
  border: 1px solid var(--pos-border);
  border-radius: 8px;
  padding: 0 12px;
  background:#fff;
  font-weight: 800;
  display:flex;
  align-items:center;
  gap:8px;
}
.tm-pos__tab.is-active{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
  background:#fff;
}

/* El “+” como botón azul cuadrado (como la captura) */
#tmpos_btn_new_sale{
  height: 36px;
  min-width: 44px;
  border-radius: 8px;
  background: var(--pos-blue);
  border-color: var(--pos-blue);
  color:#fff;
  font-weight:900;
}
#tmpos_btn_new_sale:hover{ filter: brightness(.98); }

/* ---------- Panel derecho (como la captura) ---------- */
.tm-pos__rightCard{
  background:#fff;
  border: 0;
  border-radius: 0;
  padding: 14px 14px 14px 18px;
  box-shadow: none;
}

.tm-pos__rightTitle{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pos-border2);
}
.tm-pos__barcodeState{
  font-weight: 700;
  color: #16a34a;
  font-size: 13px;
  margin-top: 4px;
}

/* Grid: 3 arriba + Cliente abajo (span) */
.tm-pos__formGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}
.tm-pos__formGrid > div:nth-child(4){
  grid-column: 1 / -1; /* Cliente ocupa toda la fila */
}
@media (max-width: 980px){
  .tm-pos__formGrid{ grid-template-columns: 1fr 1fr; }
  .tm-pos__formGrid > div:nth-child(4){ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .tm-pos__formGrid{ grid-template-columns: 1fr; }
}

/* Quick row: +Cliente violeta y botón envío chico */
.tm-pos__quickRow{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top: 10px;
  flex-wrap:wrap;
}
#tmpos_btn_new_customer{
  background: var(--pos-purple);
  border-color: var(--pos-purple);
  color:#fff;
  height: 40px;
  border-radius: 8px;
}
#tmpos_btn_new_customer:hover{ filter: brightness(.98); }

#tmpos_btn_shipping{
  height: 40px;
  min-width: 44px;
  border-radius: 8px;
  border: 1px solid var(--pos-border);
  background:#fff;
}

/* ---------- Carrito: se banca el resize ---------- */
.tm-pos__cart{ margin-top: 12px; display:flex; flex-direction:column; gap:10px; }

.tm-pos__cartItem{
  border: 0;
  border-top: 1px solid var(--pos-border2);
  border-radius: 0;
  padding: 12px 0;
  background: transparent;
}

/* cuando el panel se achica: que envuelva */
.tm-pos__cartTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  flex-wrap: wrap;
}
.tm-pos__cartName{
  font-weight: 900;
  line-height: 1.2;
  color:#0f172a;
}
.tm-pos__cartLineTotal{
  font-weight: 900;
  color:#0f172a;
}

/* Botón delete “como ícono” */
.tm-pos__cartTop .tm-btn[data-del]{
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 6px;
  border-radius: 8px;
}
.tm-pos__cartTop .tm-btn[data-del]:hover{
  background: rgba(239,68,68,.08);
}

/* Controles: cantidad estilo “- [1] +” */
.tm-pos__cartControls{
  margin-top: 10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.tm-pos__qty{
  display:flex;
  gap:8px;
  align-items:center;
}
.tm-pos__qty .tm-btn{
  height: 36px;
  min-width: 36px;
  border-radius: 8px;
  border: 1px solid var(--pos-border);
  background: var(--pos-soft);
}
.tm-pos__qty .tm-btn:hover{ filter: brightness(.99); }

.tm-pos__qty input.tm-input,
.tm-pos__qty input{
  height: 36px;
  width: 64px;
  text-align:center;
  border-radius: 8px;
  border: 1px solid var(--pos-border);
  background:#fff;
}

/* ---------- Totales + finalizar ---------- */
.tm-pos__totals{
  margin-top: 14px;
  border-top: 1px solid var(--pos-border2);
  padding-top: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tm-pos__totRow{ display:flex; justify-content:space-between; gap:12px; }
.tm-pos__totRow .tm-muted{ color: var(--pos-muted); }

.tm-pos__totalBig{
  font-size: 22px;
  font-weight: 900;
  color:#0f172a;
}

.tm-pos__discountRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.tm-pos__discountRow .tm-input{
  height: 40px;
  border-radius: 8px;
  width: 140px;
  border: 1px solid var(--pos-border);
  background:#fff;
}

/* Finalizar full width blue */
.tm-pos__finishRow{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top: 8px;
}
.tm-pos__finishBtn{
  width: 100%;
  height: 44px;
  border-radius: 8px;
  background: var(--pos-blue);
  border-color: var(--pos-blue);
  color:#fff;
  font-weight:900;
}
.tm-pos__finishBtn:hover{ filter: brightness(.98); }

/* ---------- “muted” como captura ---------- */
.tm-pos__muted{
  color: var(--pos-muted);
  font-size: 13px;
}

/* ---------- Mini modals: más “clean” ---------- */
.tm-pos__modalBackdrop{
  background: rgba(15,23,42,.35);
}
.tm-pos__modal{
  width: min(520px, 100%);
  background:#fff;
  border-radius: 18px;
  border: 1px solid var(--pos-border2);
  padding: 16px;
  box-shadow: 0 24px 70px rgba(15,23,42,.18);
}
.tm-pos__modalTitle{ font-weight: 900; font-size: 18px; }
.tm-pos__modalActions .tm-btn{
  height: 40px;
  border-radius: 8px;
}

/* ===========================
   POS - Modales “Nuevo Movimiento” + “Devolución”
   (NO va dentro de modules/pos.php)
   =========================== */

/* Backdrop (usa tu clase existente, solo refinamos si hace falta) */
#tmpos_modal_cashmove.tm-pos__modalBackdrop,
#tmpos_modal_return.tm-pos__modalBackdrop{
  /* si ya tenés backdrop global, esto no lo pisa: es específico por id */
  align-items: center;
  justify-content: center;
}

/* Contenedor modal (look&feel como capturas) */
.tmpos-xmodal{
  width: 760px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  overflow: hidden;
}

/* Header */
.tmpos-xmodal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  padding: 22px 22px 14px 22px;
}
.tmpos-xmodal__title{
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}
.tmpos-xmodal__subtitle{
  margin-top: 6px;
  color: rgba(0,0,0,.55);
  font-size: 16px;
  line-height: 1.35;
  max-width: 560px;
}
.tmpos-xmodal__close{
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
}
.tmpos-xmodal__close:hover{
  background: rgba(0,0,0,.06);
}

/* Body */
.tmpos-xmodal__body{
  padding: 10px 22px 20px 22px;
}

/* Section label */
.tmpos-xmodal__sectionLabel{
  font-weight: 800;
  color: rgba(0,0,0,.85);
  margin: 10px 0 8px;
}

/* Grid 2 columns cards */
.tmpos-xmodal__grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Card */
.tmpos-xcard{
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  border-radius: 8px;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 8px;
  cursor:pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.tmpos-xcard:hover{
  border-color: rgba(0,0,0,.16);
}
.tmpos-xcard.is-active{
  border: 2px solid #2563eb;
  padding: 13px 13px; /* compensa border 2px */
}
.tmpos-xcard__text{
  font-weight: 800;
  color: rgba(0,0,0,.88);
  text-align:center;
}
.tmpos-xcard__icon{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 15px;
}
.tmpos-xcard__icon--in{
  border: 2px solid rgba(22,163,74,.45);
  color: #16a34a;
}
.tmpos-xcard__icon--out{
  border: 2px solid rgba(220,38,38,.40);
  color: #dc2626;
}

/* Registers card: icon cube */
.tmpos-xcard__cube{
  display:flex;
  align-items:center;
  justify-content:center;
}
.tmpos-cube{
  fill: rgba(0,0,0,.60);
}

/* Fields */
.tmpos-xmodal__field{
  margin-top: 12px;
}

/* Money input */
.tmpos-money{
  display:flex;
  align-items:center;
  gap: 10px;
}
.tmpos-money__prefix{
  font-weight: 900;
  color: rgba(0,0,0,.75);
  padding-left: 4px;
}
.tmpos-money__input{
  flex: 1 1 auto;
}

/* Actions */
.tmpos-xmodal__actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 14px;
  padding-top: 6px;
}
.tmpos-xmodal__actions--single{
  justify-content: center;
}

/* Primary button look */
.tmpos-xbtn-primary{
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.tmpos-xbtn-primary:hover{
  filter: brightness(.98);
}
.tmpos-xbtn-lg{
  padding: 12px 18px;
  font-weight: 900;
  border-radius: 8px;
  min-width: 240px;
}

/* Return modal: form rows like screenshot */
.tmpos-formRows{
  display:flex;
  flex-direction:column;
  gap: 16px;
  padding: 4px 0 10px;
}
.tmpos-formRow{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items:center;
}
.tmpos-formRow__label{
  text-align: right;
  font-weight: 800;
  color: rgba(0,0,0,.85);
}
.tmpos-formRow__field .tm-input,
.tmpos-formRow__field .tm-select{
  width: 100%;
}

/* Responsive */
@media (max-width: 720px){
  .tmpos-xmodal{ width: 100%; }
  .tmpos-xmodal__grid2{ grid-template-columns: 1fr; }
  .tmpos-formRow{
    grid-template-columns: 1fr;
  }
  .tmpos-formRow__label{
    text-align:left;
  }
}
/* FIX: modales POS no deben “verse” ni ocupar lugar si no están abiertos */
.tm-pos .tm-pos__modalBackdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;

  display: none !important;        /* clave */
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;

  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}

.tm-pos .tm-pos__modalBackdrop.is-open{
  display: flex !important;        /* clave */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Por si algún CSS global le pone margins/padding/position raro al modal */
.tm-pos .tm-pos__modal{
  position: relative !important;
  margin: 0 !important;
}
/* =========================================================
   TM PRODUCTS — UI (tabla + modal + acciones)
   Pegar al FINAL de tm.css
   ========================================================= */

.tm-products .tm-tablewrap{
  overflow:auto;
  border:1px solid rgba(15,23,42,.08);
  border-radius:0px;
}

.tm-products__table{
  min-width: 1180px; /* base + dinámicas */
}

.tm-products__table thead th{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  border-bottom: 1px solid rgba(15,23,42,.08);
  font-weight: 900;
  white-space: nowrap;
}

.tm-products__tdName{ min-width: 220px; }
.tm-products__tdDesc{
  min-width: 260px;
  max-width: 420px;
  color: #334155;
}
.tm-products__tdDesc{
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-products__thDyn,
.tm-products__tdDyn{
  white-space: nowrap;
}

.tm-products__tdNum{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tm-products__mutedPrice{
  color: #64748b;
}

.tm-products__thActions,
.tm-products__tdActions{
  width: 90px;
  text-align: right;
  white-space: nowrap;
}

/* Acciones (⋯) */
.tm-products__menuWrap{
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}

.tm-products__dotsBtn{
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 1;
  font-weight: 900;
}

.tm-products__menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 160px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(15,23,42,.14);
  padding: 6px;
  display: none;
  z-index: 50;
}

.tm-products__menuWrap.is-open .tm-products__menu{
  display: block;
}

.tm-products__menuItem{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
}
.tm-products__menuItem:hover{
  background: rgba(37,99,235,.08);
}

/* Modal layout */
.tm-products__modal .tm-modal__panel{
  width: min(980px, 96vw);
}

.tm-products__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 920px){
  .tm-products__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .tm-products__grid{ grid-template-columns: 1fr; }
}

.tm-products__field--desc{ grid-column: 1 / -1; }
.tm-products__field--image{ grid-column: 1 / -1; }

.tm-products__barcodeRow{
  display:flex;
  gap: 8px;
  align-items:center;
}

.tm-products__iconBtn{
  height: 40px;
  min-width: 44px;
  border-radius: 8px;
}

.tm-products__imgPreview{
  margin-top: 10px;
  border: 1px dashed rgba(15,23,42,.16);
  border-radius: 14px;
  padding: 12px;
  background: rgba(15,23,42,.02);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 160px;
  overflow: hidden;
}
.tm-products__imgPreview.has-img{
  border-style: solid;
  background: #fff;
}
.tm-products__imgPreview img{
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  display:block;
}

.tm-products__saveBtn{
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  font-weight: 900;
  height: 44px;
  border-radius: 8px;
}
.tm-products__saveBtn:hover{ filter: brightness(.98); }
/* =========================
   TM POS / Modales — Overrides
   1) Campos al 100%
   2) Estilo para input[type=number]
   ========================= */

/* 1) Todos los campos ocupan 100% del contenedor */
.tm-pos .tm-input,
.tm-pos .tm-select,
.tm-pos textarea.tm-input,
.tm-pos__modal .tm-input,
.tm-pos__modal .tm-select,
.tm-pos__modal textarea,
.tm-modal .tm-input,
.tm-modal .tm-select,
.tm-modal textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Si algún layout viene con widths inline (ej: style="width:180px"), esto lo pisa */
.tm-pos__formGrid > * { min-width: 0; }
.tm-pos__modalBody .tm-pos__formGrid > * { min-width: 0; }

/* 2) Inputs number (look&feel consistente) */
.tm-pos input[type="number"].tm-input,
.tm-pos__modal input[type="number"].tm-input,
.tm-modal input[type="number"].tm-input {
  appearance: textfield;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Oculta spinners (Chrome/Safari/Edge) */
.tm-pos input[type="number"].tm-input::-webkit-outer-spin-button,
.tm-pos input[type="number"].tm-input::-webkit-inner-spin-button,
.tm-pos__modal input[type="number"].tm-input::-webkit-outer-spin-button,
.tm-pos__modal input[type="number"].tm-input::-webkit-inner-spin-button,
.tm-modal input[type="number"].tm-input::-webkit-outer-spin-button,
.tm-modal input[type="number"].tm-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Opcional: mejor foco para number (sin cambiar tu tema global) */
.tm-pos input[type="number"].tm-input:focus,
.tm-pos__modal input[type="number"].tm-input:focus,
.tm-modal input[type="number"].tm-input:focus {
  outline: none;
}
/* =========================
   TOROSOFT MARKET — PRODUCTS
   Modal layout + acciones + preview imagen
   ========================= */

/* Tabla */
.tm-products__tablewrap { overflow:auto; }
.tm-products__table td, .tm-products__table th { vertical-align: top; }
.tm-products__tdDesc { max-width: 380px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-products__tdName { min-width: 220px; }
.tm-products__tdNum { text-align: right; font-variant-numeric: tabular-nums; }
.tm-products__thActions, .tm-products__tdActions { width: 1%; white-space: nowrap; }

/* Menú acciones (⋯) */
.tm-products__menuWrap{ position:relative; display:inline-flex; justify-content:flex-end; }
.tm-products__dotsBtn{ padding:6px 10px; border-radius:10px; min-width: 44px; }
.tm-products__menu{
  position:absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  padding: 6px;
  display:none;
  z-index: 999999;
}
.tm-products__menuWrap.is-open .tm-products__menu{ display:block; }
.tm-products__menuItem{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:0;
  background:transparent;
  border-radius:10px;
  cursor:pointer;
  font-weight:800;
  text-align:left;
}
.tm-products__menuItem:hover{ background: rgba(0,0,0,.05); }

/* Modal grid: orden + homogeneidad */
.tm-products__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.tm-products__field{ min-width:0; }
.tm-products__field--desc{ grid-column: span 2; }
.tm-products__field--image{ grid-column: span 1; }

.tm-products__barcodeRow{ display:flex; gap:8px; align-items:center; }
.tm-products__iconBtn{ width:44px; display:flex; align-items:center; justify-content:center; }

/* Preview de imagen (FIX: no más imagen “rota”) */
.tm-products__imgPreview{
  margin-top:8px;
  border:1px dashed rgba(0,0,0,.15);
  border-radius:12px;
  padding:10px;
  min-height: 140px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: rgba(0,0,0,.02);
  position: relative;
}
.tm-products__imgPreview.has-img{
  padding:0;
  border-style:solid;
  background: #fff;
}
.tm-products__imgHint{
  position: relative;
  z-index: 1;
}
.tm-products__imgPreview img{
  max-width:100%;
  height:auto;           /* CLAVE: evita height:100% con parent sin height */
  display:block;
}
.tm-products__imgPreview.has-img img{
  width:100%;
  height: 100%;
  object-fit: cover;
}
.tm-products__imgPreview.has-img{
  height: 160px;         /* CLAVE: da altura real al contenedor para cover */
}

/* Responsive */
@media (max-width: 980px){
  .tm-products__grid{ grid-template-columns: 1fr; }
  .tm-products__field--desc,
  .tm-products__field--image{ grid-column: span 1; }
  .tm-products__tdDesc{ max-width: 260px; }
  .tm-products__imgPreview.has-img{ height: 180px; }
}
/* ================================
   FIX: botón minimizar sidebar visible siempre
   - Evita que el nombre de empresa lo empuje afuera
   - Reserva espacio para el botón
   - En collapsed: oculta logo placeholder y centra el botón
================================== */

#tm-app .tm-side__brand{
  position: relative;
  padding-right: 52px; /* reserva lugar para el botón */
  padding-bottom: 20px;
}

#tm-app .tm-side__brandTop{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* clave: permite que el bloque izquierdo achique */
}

#tm-app .tm-side__brandTop > div{
  min-width: 0; /* el contenedor del logo+meta puede achicarse */
}

#tm-app .tm-brand__meta{
  min-width: 0;
  overflow: hidden;
}

#tm-app .tm-brand__name,
#tm-app .tm-brand__plan,
#tm-app #tm-trial-left{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* el botón no debe “competir” con el texto */
#tm-app .tm-side__collapseBtn{
  position: absolute;
  top: 10px;
  right: 10px;
  flex: 0 0 auto;
  z-index: 5;
}

/* estado colapsado: liberar espacio (ocultar el cuadradito del logo) */
#tm-app.tm-side--collapsed .tm-brand__logo{
  display: none !important;
}

/* opcional: en collapsed, el botón queda más prolijo */
#tm-app.tm-side--collapsed .tm-side__brand{
  padding-right: 0;
  padding-top: 6px;
}
#tm-app.tm-side--collapsed .tm-side__collapseBtn{
  position: static;
  margin: 0 auto;
  display: flex;
}
#tm-app.tm-side--collapsed .tm-side__brandTop{
  justify-content: center;
}
/* Botón toggle: look azul y consistente */
#tm-app .tm-side__collapseBtn{
  width: 0px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #FFF;
  background: #FFF;
  color: #1e5fff;                 /* azul francia */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#tm-app .tm-side__collapseBtn:hover{
  background: rgba(30, 95, 255, .16);
  border-color: rgba(30, 95, 255, .40);
}

#tm-app .tm-side__collapseBtn:active{
  transform: translateY(1px);
}

/* Expandido: fijo arriba a la derecha del header */
#tm-app:not(.tm-side--collapsed) .tm-side__collapseBtn{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}

/* Colapsado: centrado dentro del sidebar (no corrido) */
#tm-app.tm-side--collapsed .tm-side__brandTop{
  justify-content: center;
}

#tm-app.tm-side--collapsed .tm-side__collapseBtn{
  position: static;
  margin: 6px auto 10px;
  display: flex;
}
/* ===========================
   Layout 100vh + WordPress admin bar
   =========================== */
.tm-app-wrap{
  height: 100vh;
}
body.admin-bar .tm-app-wrap{
  height: calc(100vh - 32px);
}
@media (max-width: 782px){
  body.admin-bar .tm-app-wrap{
    height: calc(100vh - 46px);
  }
}

#tm-app.tm-layout{
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  gap: 14px;
  align-items: stretch;
}

/* main y sidebar con scroll interno */
#tm-app .tm-main{
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: auto;
}
#tm-app .tm-side{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#tm-app .tm-side__inner{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#tm-app .tm-side__scroll{
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
  padding-bottom: 10px;
}
#tm-app .tm-side__footer{
  flex: 0 0 auto;
}

/* ===========================
   Sidebar collapse (ancho + ocultar textos)
   =========================== */
#tm-app{ --tm-side-w: 260px; --tm-side-w-collapsed: 70px; }

#tm-app .tm-side{
  width: var(--tm-side-w);
  flex: 0 0 var(--tm-side-w);
  min-width: var(--tm-side-w);
  max-width: var(--tm-side-w);
  overflow: hidden;
}
#tm-app.tm-side--collapsed .tm-side{
  width: var(--tm-side-w-collapsed);
  flex: 0 0 var(--tm-side-w-collapsed);
  min-width: var(--tm-side-w-collapsed);
  max-width: var(--tm-side-w-collapsed);
}

/* Ocultamientos al colapsar */
#tm-app.tm-side--collapsed .tm-brand__meta,
#tm-app.tm-side--collapsed .tm-side__label,
#tm-app.tm-side--collapsed .tm-nav2__txt,
#tm-app.tm-side--collapsed .tm-side__footerLinks span:last-child,
#tm-app.tm-side--collapsed #tm-user-label,
#tm-app.tm-side--collapsed .tm-user__chev,
#tm-app.tm-side--collapsed .tm-side__version{
  display: none !important;
}
#tm-app.tm-side--collapsed .tm-brand__logo{
  display: none !important;
}
#tm-app.tm-side--collapsed .tm-nav2{
  justify-content: center;
}
#tm-app.tm-side--collapsed .tm-ico{
  margin-right: 0 !important;
}
#tm-app.tm-side--collapsed .tm-subnav{
  display: none !important;
}

/* ===========================
   Header brand (logo+meta) + botón redondo arriba der
   =========================== */
.tm-side__brand{
  position: relative;
  padding-right: 40px; /* deja lugar al botón */
}
.tm-side__brandRow{
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

/* Fix: el cuadrado del logo NO se achica */
.tm-brand__logo{
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  overflow: hidden;
}
.tm-brand__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tm-side__collapseBtn:hover{
  filter: brightness(0.95);
}
.tm-side__collapseBtn:active{
  transform: translateY(1px);
}
.tm-side__collapseIcon{
  font-size: 14px;
  line-height: 1;
}

/* ===========================
   Flyout (cuando sidebar colapsado)
   =========================== */
.tm-sideFlyout{
  position: fixed;
  z-index: 99998;
  min-width: 220px;
  max-width: 300px;
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
.tm-sideFlyout__title{
  font-weight: 900;
  margin-bottom: 8px;
}
.tm-sideFlyout__list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ===========================
   Paywall overlay (antes estaba inline)
   =========================== */
.tm-paywall{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
}
.tm-paywall__glass{
  position: absolute;
  inset: 0;
  background: rgba(10,14,22,.55);
  backdrop-filter: blur(10px);
}
.tm-paywall__panel{
  position: relative;
  width: min(1100px, 100%);
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
}
body.tm-paywall-on{ overflow: hidden; }
#tm-app.tm-blocked{ pointer-events: none; }
#tm-app.tm-blocked #tm-paywall{ pointer-events: auto; }
#tm-paywall-body [data-tm-screen]{ display: block !important; }

/* ===========================
   Default: subnav cerrado (por si JS tarda)
   =========================== */
.tm-subnav{
  display: none;
}
/* Sidebar: el scroll no debe tapar el contenido */
.tm-side{
  overflow: hidden;           /* el scroll NO acá */
}

/* El scroll va en el inner */
.tm-side__inner{
  height: 100%;
  overflow: auto;
  padding-right: 10px;        /* gutter para que no tape el scroll */
  box-sizing: border-box;

  /* si el navegador lo soporta, mejor aún */
  scrollbar-gutter: stable;
}

/* Opcional: que el contenido no se corte en ancho */
.tm-side__inner{
  min-width: 0;
}
/* =========================
   Fix: estados raros en botón (rosa)
   ========================= */

/* 1) Evitar "tap highlight" rosa/azul en mobile */
.tm-nav2--group,
.tm-side__collapseBtn{
  -webkit-tap-highlight-color: transparent;
}

/* 2) Active/pressed: que NO cambie a rosa */
.tm-nav2--group:active,
.tm-side__collapseBtn:active{
  background: rgba(0,0,0,.03);   /* ajustá si querés */
  transform: translateY(1px);
}

/* 3) Focus: usar un anillo azul (estilo interfaz) */
.tm-nav2--group:focus,
.tm-nav2--group:focus-visible,
.tm-side__collapseBtn:focus,
.tm-side__collapseBtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 1px rgba(0, 90, 255, .18); /* azul francia suave */
  border-color: rgba(0, 90, 255, .35);
  color: #2f2e2e;
}

/* 4) Si algún estilo global marca "button:focus { background: pink }", lo pisamos */
.tm-nav2--group:focus,
.tm-nav2--group:focus-visible{
  background: inherit;
  color: #2f2e2e;
}
/* Hover: texto NO blanco */
.tm-side .tm-nav2:hover,
.tm-side .tm-nav2--group:hover,
.tm-side .tm-nav2:hover .tm-nav2__txt,
.tm-side .tm-nav2--group:hover .tm-nav2__txt{
  color: #2b2f36 !important; /* gris oscuro */
}

/* Por si el SVG/icono hereda color */
.tm-side .tm-nav2:hover .tm-ico,
.tm-side .tm-nav2--group:hover .tm-ico{
  color: #2b2f36 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* === 100vh real del módulo POS === */
.tm-mod.tm-pos{
  min-height: 100vh;
  min-height: 100dvh; /* mejor en mobile */
  display: flex;
  flex-direction: column;
}

/* El body del POS ocupa el espacio disponible */
.tm-mod.tm-pos .tm-pos__body{
  flex: 1 1 auto;
  min-height: 0; /* clave para que no rompa scroll interno */
}

/* Si el card derecho necesita scrollear adentro */
.tm-mod.tm-pos .tm-pos__rightCard{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Si querés que el carrito scrollee y los totales queden pegados abajo */
.tm-mod.tm-pos .tm-pos__cart{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* === Guardar + Finalizar siempre en una fila === */
.tm-mod.tm-pos .tm-pos__finishRow{
  display: grid;
  grid-template-columns: 1fr 2fr; /* guardar más chico, finalizar más grande */
  gap: 10px;
  align-items: stretch;
}

/* Evita que se “baje” a otra línea */
.tm-mod.tm-pos .tm-pos__finishRow .tm-btn{
  width: 100%;
  white-space: nowrap;
}

/* el módulo y body ocupan alto disponible */
.tm-mod.tm-pos{ min-height: 100vh; min-height: 100dvh; display:flex; flex-direction:column; }
.tm-mod.tm-pos .tm-pos__body{ flex:1 1 auto; min-height:0; }

/* right card = columna */
.tm-mod.tm-pos .tm-pos__rightCard{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* scroll SOLO en contenido */
.tm-mod.tm-pos .tm-pos__rightScroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-bottom: 12px; /* aire antes del bottom */
}

/* bottom fijo */
.tm-mod.tm-pos .tm-pos__rightBottom{
  flex: 0 0 auto;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: #fff;
}

/* fila guardar/finalizar */
.tm-mod.tm-pos .tm-pos__finishRow{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}
.tm-mod.tm-pos .tm-pos__finishRow .tm-btn{ width:100%; white-space:nowrap; }
/* POS: hacer que el panel derecho tenga altura de viewport y bottom real */
.tm-mod.tm-pos{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.tm-mod.tm-pos .tm-pos__body{
  flex: 1 1 auto;
  min-height: 0;
}
.tm-mod.tm-pos .tm-pos__right{
  display: flex;
  min-height: 0;
}
.tm-mod.tm-pos .tm-pos__rightCard{
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 140px); /* fallback por header/topbar */
}
.tm-mod.tm-pos .tm-pos__rightScroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.tm-mod.tm-pos .tm-pos__rightBottom{
  flex: 0 0 auto;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 12px;
}
/* =========================================================
   POS RIGHT: carrito con bottom fijo (totals + acciones)
   - TOP: fijo (título + selectores + cliente + pago)
   - CART: único scrolleable
   - BOTTOM: fijo (totales + botones)
   Pegar en tm.css
   ========================================================= */

/* Asegura que el panel derecho pueda ocupar toda la altura disponible */
.tm-pos__right,
.tm-pos__rightCard{
  height: 100%;
  min-height: 0; /* clave para que el scroll funcione dentro de flex */
}

/* El card se vuelve layout vertical */
.tm-pos__rightCard{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* TOP fijo (no scrollea) */
.tm-pos__rightTop{
  flex: 0 0 auto;
}

/* CART = ÚNICO scrolleable */
.tm-pos__cartScroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* opcional: un poquito de aire al lado del scroll */
  padding-bottom: 8px;
}

/* BOTTOM fijo */
.tm-pos__rightBottom{
  flex: 0 0 auto;
  margin-top: auto;        /* empuja al fondo */
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.10);
  background: inherit;     /* mantiene el look del card */
}

/* Totales pegados al fondo, arriba de los botones */
.tm-pos__rightBottom .tm-pos__totals{
  margin-top: 0; /* por si venía con margin */
}

/* Botones en la misma fila */
.tm-pos__finishRow{
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.tm-pos__finishRow .tm-btn{
  flex: 1 1 0;
  width: auto;
}

/* Responsive: en pantallas chicas apila los botones */
@media (max-width: 720px){
  .tm-pos__finishRow{
    flex-direction: column;
  }
  .tm-pos__finishRow .tm-btn{
    width: 100%;
  }
}

/* (Opcional) Si tu .tm-pos__rightCard tiene padding, que el bottom no “salte” */
.tm-pos__rightBottom{
  padding-bottom: 12px;
}
/* Top actions buttons (POS) */
.tm-btn--topact{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  line-height:1;
  white-space:nowrap;
}

/* Icono Font Awesome monocromático */
.tm-btn--topact .tm-ico{
  font-size: 14px;
  line-height: 1;
  opacity: .9;
}

/* Variante “softblue pastel” (sin glow) */
.tm-btn--topact{
  background: rgba(37, 99, 235, .10);   /* azul suave */
  border: 1px solid rgba(37, 99, 235, .18);
  color: rgba(30, 64, 175, .95);
}

.tm-btn--topact:hover{
  background: rgba(37, 99, 235, .14);
  border-color: rgba(37, 99, 235, .22);
}

.tm-btn--topact:active{
  transform: translateY(1px);
  background: rgba(37, 99, 235, .18);
}

/* Asegura monocromía (ícono hereda color del botón) */
.tm-btn--topact .tm-ico{ color: currentColor; }
/* FIX: asegurar Font Awesome en botones */
.tm-btn i.fa-solid,
.tm-btn i.fa-regular,
.tm-btn i.fa-brands{
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important; /* fa-solid */
  font-style: normal !important;
  display: inline-block;
  line-height: 1;
}
/* Top actions: icon + text alineados perfecto */
.tm-btn.tm-btn--topact{
  display: inline-flex;
  align-items: center;       /* centra vertical */
  justify-content: center;   /* centra horizontal el conjunto */
  gap: 10px;
  line-height: 1;
}

/* Icono centrado y consistente */
.tm-btn.tm-btn--topact .tm-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 16px;
}

/* Turnos: azul francia sólido */
.tm-btn.tm-btn--sessions{
  background: #1f5fff;  /* azul francia */
  border-color: #1f5fff;
  color: #fff;
}
.tm-btn.tm-btn--sessions .tm-ico{
  color: #fff;
}

/* In/Out: blanco/normal (outlined) */
.tm-btn.tm-btn--cash{
  background: #fff;
  color: inherit;
  border-color: rgba(0,0,0,.12);
}

/* Hover suaves */
.tm-btn.tm-btn--sessions:hover{
  filter: brightness(.95);
}
.tm-btn.tm-btn--cash:hover{
  background: rgba(0,0,0,.03);
}
.tm-btn.tm-btn--topact{
  padding-top: 10px;
  padding-bottom: 10px;
}
/* =========================
   Dashboard: Period + Calendar (evitar FOUC)
   ========================= */

/* contenedor toolbar (si lo usás) */
.tmd-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* botón/selector blanco tipo “pill” */
.tmd-pill,
.tmd-period,
.tmd-calendar{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  line-height:1;
  color:#111;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

/* hover/focus suaves */
.tmd-pill:hover,
.tmd-period:hover,
.tmd-calendar:hover{
  border-color:#dedede;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.tmd-pill:focus-within,
.tmd-period:focus-within,
.tmd-calendar:focus-within{
  outline:none;
  border-color:#cfcfcf;
  box-shadow:0 0 0 3px rgba(0,0,0,.05);
}

/* íconos font awesome monocromáticos */
.tmd-pill i,
.tmd-period i,
.tmd-calendar i{
  color:#2b2b2b;
  opacity:.85;
  font-size:14px;
}

/* label “Período” */
.tmd-period-label{
  font-weight:600;
  color:#111;
}

/* caret (si lo tenés como chevron) */
.tmd-caret{
  margin-left:2px;
  opacity:.55;
  font-size:12px;
}

/* date range text */
.tmd-range-text{
  font-weight:600;
  color:#111;
  letter-spacing:-0.1px;
}

/* dropdown */
.tmd-dd{
  position:relative;
}
.tmd-dd-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:220px;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  padding:8px;
  z-index:9999;
}
.tmd-dd-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer;
  color:#111;
  font-size:14px;
}
.tmd-dd-item:hover{
  background:#f6f7f8;
}
.tmd-dd-item:active{
  background:#eef1f3;
}
.tmd-dd-item .tmd-dd-icon{
  opacity:.65;
}

/* “calendar popover” */
.tmd-cal-pop{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  padding:12px;
  z-index:9999;
}

/* inputs fecha (si usás 2 inputs from/to o uno range) */
.tmd-date-input{
  border:1px solid #e8e8e8;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
  width:170px;
}
.tmd-date-input:focus{
  border-color:#cfcfcf;
  box-shadow:0 0 0 3px rgba(0,0,0,.05);
}

/* botones dentro del popover */
.tmd-cal-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.tmd-btn{
  border:1px solid #e8e8e8;
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  cursor:pointer;
}
.tmd-btn:hover{
  border-color:#dedede;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

/* estados “oculto/visible” (si controlás por data-open) */
.tmd-hidden{ display:none !important; }
.tmd-open{ display:block; }

/* mobile */
@media (max-width: 720px){
  .tmd-toolbar{ gap:8px; }
  .tmd-date-input{ width:150px; }
}
.tmd-kpi{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size:26px;
  font-weight:700;
  letter-spacing:-0.2px;
  line-height:1.05;
}
/* =========================================================
   Dashboard (tmd) — Controles de período + calendario
   Pegar en tm.css
   ========================================================= */

/* Wrapper opcional (si lo usás) */
.tmd-controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* --- Botón base (período / aplicar / etc) --- */
.tmd-btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  color:#111;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  line-height:1;
  box-shadow:0 1px 0 rgba(0,0,0,.02);

  /* tipografía “menos bold” */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-weight:600;
  font-size:13px;
}

/* icono FA monocromático */
.tmd-btn i,
.tmd-btn .fa,
.tmd-btn .fas,
.tmd-btn .far{
  font-size:14px;
  line-height:1;
  opacity:.85;
}

/* Hover */
.tmd-btn:hover{
  background:#fafafa;
  border-color:#e2e2e2;
}

/* Active (mouse down) */
.tmd-btn:active{
  transform:translateY(0.5px);
  background:#f5f5f5;
  border-color:#dcdcdc;
}

/* Focus (teclado) */
.tmd-btn:focus{
  outline:none;
}

/* Focus-visible (accesible) */
.tmd-btn:focus-visible{
  outline:none;
  border-color:#cfcfcf;
  box-shadow:0 0 0 3px rgba(17,17,17,.10);
}

/* Disabled */
.tmd-btn:disabled,
.tmd-btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

/* Estado “abierto/activo” (para dropdown) */
.tmd-btn.is-open,
.tmd-btn[aria-expanded="true"]{
  background:#f7f7f7;
  border-color:#dcdcdc;
}

/* Variante “primary” (si la usás) */
.tmd-btn-primary{
  background:#111;
  border-color:#111;
  color:#fff;
}
.tmd-btn-primary:hover{
  background:#1a1a1a;
  border-color:#1a1a1a;
}
.tmd-btn-primary:active{
  background:#0f0f0f;
  border-color:#0f0f0f;
}
.tmd-btn-primary:focus-visible{
  box-shadow:0 0 0 3px rgba(17,17,17,.18);
}

/* --- Dropdown de período --- */
.tmd-dd{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:220px;
  background:#fff;
  border:1px solid #eaeaea;
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.10);
  overflow:hidden;
  z-index:9999;
}

/* Item del dropdown */
.tmd-dd-item{
  width:100%;
  text-align:left;
  border:0;
  background:#fff;
  padding:12px 14px;
  cursor:pointer;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-weight:600;
  font-size:13px;
  color:#111;
}

/* Hover item */
.tmd-dd-item:hover{
  background:#f6f7f9;
}

/* Active item */
.tmd-dd-item:active{
  background:#efefef;
}

/* Focus item */
.tmd-dd-item:focus{
  outline:none;
}
.tmd-dd-item:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 3px rgba(17,17,17,.10);
}

/* Item seleccionado (si le ponés clase) */
.tmd-dd-item.is-active,
.tmd-dd-item[aria-selected="true"]{
  background:#f1f1f1;
  font-weight:700;
}

/* --- Input calendario (date) --- */
.tmd-date{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:10px 10px;
  outline:none;
  background:#fff;
  color:#111;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-weight:600;
  font-size:13px;
  line-height:1;
}

/* Placeholder (si usás type=text con placeholder) */
.tmd-date::placeholder{
  color:#9a9a9a;
  opacity:1;
}

/* Hover input */
.tmd-date:hover{
  background:#fafafa;
  border-color:#e2e2e2;
}

/* Focus input */
.tmd-date:focus{
  border-color:#cfcfcf;
  box-shadow:0 0 0 3px rgba(17,17,17,.10);
  background:#fff;
}

/* Disabled input */
.tmd-date:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Si el date trae icono nativo (Chrome) que querés “limpio” */
.tmd-date::-webkit-calendar-picker-indicator{
  opacity:.65;
  cursor:pointer;
}
.tmd-date:hover::-webkit-calendar-picker-indicator{
  opacity:.85;
}

/* --- Grupo (si tenés icono + input envueltos) --- */
.tmd-date-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.tmd-date-wrap i,
.tmd-date-wrap .fa{
  position:absolute;
  left:12px;
  pointer-events:none;
  opacity:.80;
  font-size:14px;
}
/* cuando hay icono a la izquierda */
.tmd-date-wrap .tmd-date{
  padding-left:34px;
}

/* --- Ajustes para mobile --- */
@media (max-width: 720px){
  .tmd-btn{
    padding:10px 10px;
    font-size:13px;
  }
  .tmd-dd{
    min-width:200px;
  }
}
/* OVERRIDE — Botones Dashboard (Período + Fechas)
   Evita: hover texto blanco + active rosa
*/

#tmd_btn_period.tmd-btn,
#tmd_btn_dates.tmd-btn{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #e6e6e6 !important;
  box-shadow:0 1px 0 rgba(0,0,0,.02) !important;
}

/* Hover */
#tmd_btn_period.tmd-btn:hover,
#tmd_btn_dates.tmd-btn:hover{
  background:#fafafa !important;
  color:#111 !important;
  border-color:#e0e0e0 !important;
}

/* Active (mouse down) */
#tmd_btn_period.tmd-btn:active,
#tmd_btn_dates.tmd-btn:active{
  background:#f1f1f1 !important;
  color:#111 !important;
  border-color:#dedede !important;
}

/* Focus (tab/teclado) */
#tmd_btn_period.tmd-btn:focus,
#tmd_btn_dates.tmd-btn:focus,
#tmd_btn_period.tmd-btn:focus-visible,
#tmd_btn_dates.tmd-btn:focus-visible{
  outline:none !important;
  background:#fff !important;
  color:#111 !important;
  border-color:#d6d6d6 !important;
  box-shadow:0 0 0 3px rgba(0,0,0,.06) !important;
}
/* =========================
   TM TABLES (scope real: .tm-products / .tm-tablewrap / .tm-table)
   Pegalo AL FINAL de tm.css
   ========================= */

:root{
  --tm-primary: #1F66FF;
  --tm-secondary: #0B7285; /* serio */
  --tm-header-bg: #F8FAFF;
  --tm-border: #E2E8F0;
  --tm-border-2: #E2E8F0;
  --tm-text: #0F172A;
  --tm-muted: #64748B;
  --tm-row-hover: #F3F8FF;
  --tm-radius: 14px;
  --tm-radius-sm: 10px;
  --tm-field-h: 36px;
}

/* Contenedor scroll / borde redondeado */
.tm-products .tm-tablewrap.tm-products__tablewrap{
  overflow: auto;
  border: 1px solid var(--tm-border);
  background: #fff;
}

/* Tabla base */
.tm-products table.tm-table.tm-products__table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

/* Header */
.tm-products table.tm-table.tm-products__table thead th{
  background: var(--tm-header-bg);
  color: var(--tm-muted);
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  padding: 12px 12px;
  border-bottom: 1px solid var(--tm-border);
  white-space: nowrap;
}

/* Celdas */
.tm-products table.tm-table.tm-products__table tbody td{
  color: var(--tm-text);
  font-size: 14px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--tm-border-2);
  vertical-align: middle;
  background: #fff; /* importante: evita transparencias raras */
}

.tm-products table.tm-table.tm-products__table tbody tr:last-child td{
  border-bottom: 0;
}

/* Hover row */
.tm-products table.tm-table.tm-products__table tbody tr:hover td{
  background: var(--tm-row-hover);
}

/* Inputs/selects dentro de esa tabla (si existen) */
.tm-products table.tm-table.tm-products__table input[type="text"],
.tm-products table.tm-table.tm-products__table input[type="number"],
.tm-products table.tm-table.tm-products__table input[type="date"],
.tm-products table.tm-table.tm-products__table select,
.tm-products table.tm-table.tm-products__table textarea{
  width: 100%;
  height: var(--tm-field-h);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  padding: 0 12px;
  background: #fff;
  color: var(--tm-text);
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tm-products table.tm-table.tm-products__table textarea{
  height: auto;
  min-height: 90px;
  padding: 10px 12px;
}

.tm-products table.tm-table.tm-products__table input:focus,
.tm-products table.tm-table.tm-products__table select:focus,
.tm-products table.tm-table.tm-products__table textarea:focus{
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px rgba(31, 102, 255, 0.12);
}

/* Checkbox limpio */
.tm-products table.tm-table.tm-products__table input[type="checkbox"]{
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #BBD0FF;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  transition: all .15s ease;
}

.tm-products table.tm-table.tm-products__table input[type="checkbox"]:checked{
  border-color: var(--tm-primary);
  background: var(--tm-primary);
}

.tm-products table.tm-table.tm-products__table input[type="checkbox"]:checked::after{
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  display: block;
  margin: 4px 0 0 3px;
}
/* Sin líneas verticales entre columnas (solo horizontales) */
.tm-products table.tm-table.tm-products__table thead th,
.tm-products table.tm-table.tm-products__table tbody td{
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Asegura que solo queden separadores horizontales */
.tm-products table.tm-table.tm-products__table thead th{
  border-bottom: 1px solid var(--tm-border) !important;
}

.tm-products table.tm-table.tm-products__table tbody td{
  border-bottom: 1px solid var(--tm-border-2) !important;
}
/* 1) El wrapper solo scrollea, SIN borde */
.tm-products .tm-tablewrap.tm-products__tablewrap{
  overflow: auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
}

/* 2) El borde + radius van en la TABLA (exterior) */
.tm-products table.tm-table.tm-products__table{
  width: 100%;
  border: 1px solid var(--tm-border);
  border-radius: 8px;          /* <- lo que pedís */
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  overflow: hidden;             /* <- clave: recorta esquinas */
}

/* 3) Header pegado al radio */
.tm-products table.tm-table.tm-products__table thead th{
  background: var(--tm-header-bg);
  border-bottom: 1px solid var(--tm-border);
}

/* 4) Si querés evitar cualquier línea vertical */
.tm-products table.tm-table.tm-products__table thead th,
.tm-products table.tm-table.tm-products__table tbody td{
  border-left: 0 !important;
  border-right: 0 !important;
}

/* 5) Que no “rompa” el radius en las esquinas del header */
.tm-products table.tm-table.tm-products__table thead th:first-child{
  border-top-left-radius: 10px;
}
.tm-products table.tm-table.tm-products__table thead th:last-child{
  border-top-right-radius: 10px;
}
/* Fix: separadores de filas demasiado oscuros */
.tm-products table.tm-table.tm-products__table{
  --tm-row-sep: #E2E8F0; /* hsl(214.3 31.8% 91.4%) */
}

/* mata bordes/sombras heredadas */
.tm-products table.tm-table.tm-products__table tr,
.tm-products table.tm-table.tm-products__table td,
.tm-products table.tm-table.tm-products__table th{
  box-shadow: none !important;
  outline: 0 !important;
}

/* un SOLO borde inferior, suave */
.tm-products table.tm-table.tm-products__table tbody td{
  border-top: 0 !important;
  border-bottom: 1px solid var(--tm-row-sep) !important;
}

/* evita doble línea con el row */
.tm-products table.tm-table.tm-products__table tbody tr{
  border: 0 !important;
}

/* opcional: si querés el header un toque más marcado */
.tm-products table.tm-table.tm-products__table thead th{
  border-bottom: 1px solid #CBD5E1 !important; /* un pelín más */
}

/* 1) El wrap NO aporta padding/margen/fondo */
.tm-products .tm-tablewrap.tm-products__tablewrap{
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* 2) La tabla define el "marco" y no deja aire alrededor */
.tm-products table.tm-table.tm-products__table{
  margin: 0 !important;
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden; /* recorta header y hover */
}

/* 3) Unificar separadores (mismo gris suave) */
.tm-products table.tm-table.tm-products__table{
  --tm-row-sep: #E2E8F0; /* hsl(214.3 31.8% 91.4%) */
}

/* matar sombras que puedan oscurecer */
.tm-products table.tm-table.tm-products__table thead,
.tm-products table.tm-table.tm-products__table th{
  box-shadow: none !important;
}

/* Header: línea inferior suave (no oscura) */
.tm-products table.tm-table.tm-products__table thead th{
  border-bottom: 1px solid var(--tm-row-sep) !important;
  border-top: 0 !important;
}

/* Por si había border extra en el thead */
.tm-products table.tm-table.tm-products__table thead tr{
  border: 0 !important;
}

/* Primera fila: evita doble línea pegada al header */
.tm-products table.tm-table.tm-products__table tbody tr:first-child td{
  border-top: 0 !important;
}
/* Que NO asome la puntita blanca: wrapper y tabla con mismo radio */
.tm-products .tm-tablewrap.tm-products__tablewrap{
  border-radius: 10px !important;
  overflow: hidden !important;   /* recorta lo que sobresalga */
  background: #fff !important;   /* si hay “aire”, que sea blanco parejo */
}

/* La tabla mantiene su borde/radius */
.tm-products table.tm-table.tm-products__table{
  border-radius: 12px !important;
  overflow: hidden !important;
}
/* Alternativa: recorta sin perder scroll */
.tm-products .tm-tablewrap.tm-products__tablewrap{
  border-radius: 10px !important;
  background: #fff !important;
}

.tm-products .tm-tablewrap.tm-products__tablewrap{
  overflow: auto !important;          /* mantiene scroll */
  clip-path: inset(0 round 10px);     /* recorta esquinas */
}





/* Switch */
.tm-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.tm-switch input{ position:absolute; opacity:0; pointer-events:none; }
.tm-switch__track{
  width:46px; height:26px; border-radius:999px;
  background:hsl(214.3 31.8% 91.4%); /* gris claro */
  border:1px solid rgba(15,23,42,.14);
  position:relative; transition:all .18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.tm-switch__thumb{
  width:22px; height:22px; border-radius:999px;
  background:#fff; position:absolute; top:1px; left:1px;
  box-shadow:0 2px 8px rgba(2,6,23,.18);
  transition:transform .18s ease;
  border:1px solid rgba(15,23,42,.08);
}
.tm-switch__text{ font-weight:700; color:rgba(15,23,42,.75); }

.tm-switch input:checked + .tm-switch__track{
  background:#1f66ff;
  border-color:rgba(31,102,255,.45);
}
.tm-switch input:checked + .tm-switch__track .tm-switch__thumb{
  transform:translateX(20px);
}

/* =========================
   END TABLE STYLES
   ========================= */
   
/* Switch chico para tabla */
.tm-switch--sm .tm-switch__track{ width:40px; height:22px; }
.tm-switch--sm .tm-switch__thumb{ width:18px; height:18px; }
.tm-switch--sm input:checked + .tm-switch__track .tm-switch__thumb{ transform:translateX(18px); }
.tm-products__menuItem--danger{ color:#b91c1c; }
.tm-products__menuItem--danger:hover{ background:rgba(185,28,28,.08); }

/* =========================
   PRODUCTS · MODAL "+ Producto"
   (BLOCK C layout / UX)
   ========================= */

/* Panel un poco más ancho y centrado (sin ocupar toda la pantalla) */
.tm-products__modal .tm-modal__panel{
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: hidden;
}

/* Body scrolleable (head fijo) */
.tm-products__modal .tm-modal__body{
  overflow: auto;
  max-height: calc(100vh - 140px);
}

/* Grid principal del formulario */
.tm-products__grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  align-items: start;
}

/* Campos */
.tm-products__field{
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Distribución por tipo */
.tm-products__field--barcode{ grid-column: span 6; }
.tm-products__field--desc{ grid-column: span 12; }
.tm-products__field--image{ grid-column: span 6; }

/* Inputs full width */
.tm-products__field .tm-input,
.tm-products__field .tm-select,
.tm-products__field textarea{
  width: 100%;
}

/* Row barcode: botón + input alineados */
.tm-products__barcodeRow{
  display: flex;
  gap: 8px;
  align-items: center;
}
.tm-products__iconBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
}

/* Preview imagen */
.tm-products__imgPreview{
  margin-top: 8px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 10px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.55);
}
.tm-products__imgPreview img{
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  display: block;
}
.tm-products__imgPreview.has-img{
  padding: 8px;
}
.tm-products__imgHint{
  opacity: 0.7;
}

/* Actions row: se ve siempre al fondo cuando hay scroll */
.tm-products__actionsRow{
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  background: linear-gradient(to top, rgba(255,255,255,0.96), rgba(255,255,255,0.80), rgba(255,255,255,0));
  z-index: 2;
}

/* Botón primario consistente (si ya tenés, esto no rompe) */
.tm-products__btnPrimary{
  font-weight: 800;
}

/* Switch: alineación prolija en el modal */
.tm-products__field .tm-switch{
  margin-top: 2px;
}

/* Responsive: en pantallas chicas, todo a 1 columna */
@media (max-width: 860px){
  .tm-products__grid{ grid-template-columns: 1fr; }
  .tm-products__field,
  .tm-products__field--barcode,
  .tm-products__field--desc,
  .tm-products__field--image{
    grid-column: auto;
  }
  .tm-products__modal .tm-modal__panel{
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
  }
  .tm-products__modal .tm-modal__body{
    max-height: calc(100vh - 150px);
  }
}

/* Extra: evita que el file input rompa el layout */
#tm-pr-file{
  padding: 9px 10px;
}

/* Nota inferior más prolija */
#tm-pr-modal-note{
  opacity: 0.85;
}
/* =========================
   FIX: Number inputs con estilo tm-input
   (Costo / Precio / Qty / Medidas)
   ========================= */

.tm-input[type="number"]{
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.90);
  outline: none;
}

/* Focus consistente */
.tm-input[type="number"]:focus{
  border-color: rgba(0,0,0,0.22);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

/* Disabled consistente */
.tm-input[type="number"]:disabled{
  opacity: 0.6;
  cursor: not-allowed;
  background: rgba(245,245,245,0.9);
}

/* Quita / reduce spinners (Chrome/Edge/Safari) */
.tm-input[type="number"]::-webkit-outer-spin-button,
.tm-input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.tm-input[type="number"]{
  -moz-appearance: textfield;
}
[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
    background-color: #1F66FF;
    color: #fff;
    text-decoration: none;
}
/* TM PRODUCTS - RECV OCR: tabla estable, sin nth-child */

#tm-products-modal-recv .tm-table,
#tm-products-modal-recv table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

#tm-products-modal-recv .tm-table th,
#tm-products-modal-recv .tm-table td,
#tm-products-modal-recv table th,
#tm-products-modal-recv table td{
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  padding: 10px 10px;
  vertical-align: middle;
}

/* Header */
#tm-products-modal-recv table thead th{
  background: #fafafa;
  color: #333;
  font-weight: 800;
  white-space: nowrap;
}

/* Evita que el modal “apriete” y rompa columnas */
#tm-products-modal-recv .tm-modal__body,
#tm-products-modal-recv .tm-products__modalBody{
  overflow-x: auto;
}

/* Column widths por CLASE (no se rompen si aparecen Costo/Precio) */
#tm-products-modal-recv .tm-recv-col-rec       { min-width: 220px; }
#tm-products-modal-recv .tm-recv-col-product   { min-width: 260px; }
#tm-products-modal-recv .tm-recv-col-warehouse { min-width: 190px; }

#tm-products-modal-recv .tm-recv-col-stockcur,
#tm-products-modal-recv .tm-recv-col-received,
#tm-products-modal-recv .tm-recv-col-stockfinal,
#tm-products-modal-recv .tm-recv-col-cost,
#tm-products-modal-recv .tm-recv-col-sell{
  width: 110px;
  text-align: center;
  white-space: nowrap;
}

#tm-products-modal-recv .tm-recv-col-actions{
  width: 72px;
  text-align: right;
  white-space: nowrap;
}

/* Inputs numéricos compactos */
#tm-products-modal-recv input.tm-input[data-ocr="qty"],
#tm-products-modal-recv input.tm-input[data-ocr="price"]{
  width: 90px;
  padding: 8px 10px;
  text-align: center;
}
/* =========================
   TM Sidebar - Match ref 1:1
   (PEGAR AL FINAL)
   ========================= */

/* 1) ESPACIADO: todos los items iguales (con o sin dropdown) */
.tm-side__section .tm-nav2{
  margin: 2px 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  gap: 10px !important;
}

.tm-side__label{ margin: 8px 0 6px !important; }

/* 2) DEFAULT: sin fondo azul, texto gris oscuro, icono gris */
.tm-side__section .tm-nav2{
  background: transparent !important;
  color: #111827 !important; /* texto */
}
.tm-side__section .tm-nav2 .tm-ico{
  color: #6b7280 !important; /* icono gris */
}
.tm-side__section .tm-nav2 .tm-ico svg{
  color: inherit !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* 3) HOVER: gris suave (NO azul) */
.tm-side__section .tm-nav2:hover{
  background: #f3f4f6 !important;
  color: #111827 !important;
}

/* 4) ACTIVE (item seleccionado): NO fondo, SOLO bold en texto + icono azul */
.tm-side__section .tm-nav2.is-active{
  background: transparent !important;
  color: #111827 !important;
}
.tm-side__section .tm-nav2.is-active .tm-nav2__txt{
  font-weight: 800 !important; /* bold como el ejemplo */
}
.tm-side__section .tm-nav2.is-active .tm-ico{
  color: #2563eb !important; /* azul SOLO icono */
}

.tm-subnav__item{
  display: block !important;
  padding: 8px 10px !important;
  margin: 2px 0 !important;
  border-radius: 10px !important;
  color: #111827 !important;
  text-decoration: none !important;
  background: transparent !important;
  font-weight: 400 !important;
}
.tm-subnav__item:hover{
  background: #f3f4f6 !important; /* hover gris */
}
.tm-subnav__item.is-active{
  background: transparent !important;
  font-weight: 800 !important; /* selected = bold */
  color: #111827 !important;
}

/* 6) CHEVRON: que no empuje el layout + ocultar en colapsado */
.tm-nav2__chev{
  width: 18px !important;
  min-width: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  opacity: .65 !important;
}
.tm-side--collapsed .tm-nav2__chev{
  display: none !important; /* EXTRA que pediste */
}

/* En colapsado: centrar icono */
.tm-side--collapsed .tm-nav2{
  justify-content: center !important;
  padding: 10px 8px !important;
}
.tm-side--collapsed .tm-nav2__txt{
  display: none !important;
}

/* 7) Si tu CSS viejo pinta “azul” con clases tipo .tm-nav2--active, lo anulamos */
.tm-side__section .tm-nav2.tm-nav2--active,
.tm-side__section .tm-nav2.tm-nav2--selected{
  background: transparent !important;
  color: #111827 !important;
}
/* Fix: Dashboard + POS se ven más “chicos” por el arte del SVG (padding interno / stroke).
   Los escalamos levemente solo a esos 2 items. */
.tm-side__section [data-tm-nav="dashboard"] .tm-ico svg{
  transform: scale(1.12);
  transform-origin: 50% 50%;
  display: block; /* evita offsets raros */
}
/* Fix: Dashboard + POS se ven más “chicos” por el arte del SVG (padding interno / stroke).
   Los escalamos levemente solo a esos 2 items. */
.tm-side__section [data-tm-nav="pos"] .tm-ico svg {
  transform: scale(1.4);
  transform-origin: 50% 50%;
  display: block; /* evita offsets raros */
}
/* Empresa: inputs redondeados + gris clarito */
#tm-screen-empresa .tm-input,
#tm-screen-empresa .tm-select,
#tm-screen-empresa .tm-textarea{
  border-radius: 12px;
  background: #f3f4f6;        /* gris clarito */
  border: 1px solid #e5e7eb;  /* borde suave */
  box-shadow: none;
}

/* Placeholder un poco más suave */
#tm-screen-empresa .tm-input::placeholder,
#tm-screen-empresa .tm-textarea::placeholder{
  color: #9ca3af;
}

/* Focus prolijo */
#tm-screen-empresa .tm-input:focus,
#tm-screen-empresa .tm-select:focus,
#tm-screen-empresa .tm-textarea:focus{
  outline: none;
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}