.vx { display: flex; flex-direction: column; gap: 14px; }
.vx-head h2 { margin: 0 0 4px; }
.vx-head p, .vx-hint { margin: 0; color: var(--pos-muted, #64748b); }
.vx-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-tab {
  border: 1px solid var(--pos-border, #e2e8f0);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}
.vx-tab.active { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.vx-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: end;
  margin: 12px 0;
}
.vx-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.vx-field span { font-weight: 600; }
.vx-field input, .vx-field select, .vx-field textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--pos-border, #e2e8f0);
  border-radius: 8px;
  width: 100%;
}
.vx-wide { grid-column: 1 / -1; }
.vx-check { display: flex; gap: 6px; align-items: center; margin-right: 12px; font-weight: 500; }
.vx-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.vx-card {
  background: #fff;
  border: 1px solid var(--pos-border, #e2e8f0);
  border-radius: 12px;
  padding: 12px;
}
.vx-card header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vx-card p { margin: 8px 0; color: #334155; }
.vx-status, .vx-time {
  margin-left: auto;
  font-size: 0.75rem;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 2px 8px;
}
.vx-time { margin-left: 0; background: #fef3c7; color: #92400e; }
.vx-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-actions button {
  border: 1px solid var(--pos-border, #e2e8f0);
  background: #f8fafc;
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  cursor: pointer;
}
.vx-empty { color: var(--pos-muted, #64748b); }
.vx-photo { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; }
.cat-block { padding: 0.75rem 0; border-bottom: 1px solid var(--pos-border); }
.cat-block-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cat-products { margin: 0.45rem 0 0; padding: 0; list-style: none; color: var(--pos-muted); }
.cat-products li { padding: 0.15rem 0; }
@media (max-width: 720px) {
  .cat-block-head { flex-direction: column; }
}

#panel-celulares.vx-panel-cold {
  background: #0b1220;
  color: #e7eefc;
}
.vx-cold { color: #e7eefc; }
.vx-cold .vx-head h2 { color: #f4f8ff; }
.vx-cold .vx-head p,
.vx-cold .vx-hint,
.vx-cold .vx-empty { color: #9fb3d1; }
.vx-cold .vx-tab {
  background: #162033;
  color: #e7eefc;
  border-color: #3d5278;
}
.vx-cold .vx-tab.active {
  background: #7dd3fc;
  color: #082033;
  border-color: #7dd3fc;
  font-weight: 700;
}
.vx-cold .vx-field span,
.vx-cold .vx-check { color: #e7eefc; }
.vx-cold .vx-field input,
.vx-cold .vx-field select,
.vx-cold .vx-field textarea {
  background: #0e1728;
  color: #f4f8ff;
  border-color: #3d5278;
}
.vx-cold .vx-field select option { color: #0f172a; }
.vx-cold .btn.btn-primary {
  background: #7dd3fc;
  color: #082033;
  border: 1px solid #e0f2fe;
  font-weight: 700;
}
.vx-cold .btn.btn-primary:hover { background: #bae6fd; color: #082033; }
.vx-cold .vx-card {
  background: #121b2e;
  border-color: #243352;
  color: #e7eefc;
}
.vx-cold .vx-card p { color: #c5d4ee; }
.vx-cold .vx-status {
  background: #164e63;
  color: #cffafe;
}
.vx-cold .vx-actions button,
.vx-cold .vx-sign-clear {
  background: #1e3a5f;
  color: #e0f2fe;
  border: 1px solid #7dd3fc;
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  cursor: pointer;
}
.vx-sign {
  display: block;
  width: 100%;
  height: 120px;
  border-radius: 8px;
  touch-action: none;
  cursor: crosshair;
}
.vx-cold .vx-sign {
  background: #0e1728;
  border: 1px solid #7dd3fc;
}
.vx-cold .vx-signature {
  background: #0e1728;
  object-fit: contain;
  max-height: 90px;
}
.vx-sign-clear { margin-top: 6px; width: fit-content; }
.vx-calc {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 8px 10px;
  border-radius: 8px;
}
.vx-cold .vx-calc {
  background: #082033;
  color: #7dd3fc;
  border: 1px solid #7dd3fc;
}
.vx-cold .vx-calc[data-role="gain"] {
  background: #052e16;
  color: #bbf7d0;
  border-color: #86efac;
}

#panel-farmacia { background: #f3faf7; color: #12332c; }
.fx { display: flex; flex-direction: column; gap: 14px; }
.fx-head h2 { margin: 0 0 4px; color: #115e59; }
.fx-head p, .fx-hint, .fx-empty { margin: 0; color: #3f6f68; }
.fx-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-tab {
  border: 1px solid #99f6e4;
  background: #fff;
  color: #115e59;
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}
.fx-tab.active { background: #0f766e; color: #fff; border-color: #0f766e; font-weight: 700; }
.fx-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: end;
  margin: 12px 0;
}
.fx-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.fx-field span { font-weight: 700; }
.fx-field input, .fx-field select, .fx-field textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #fff;
  color: #12332c;
  width: 100%;
}
.fx-wide { grid-column: 1 / -1; }
.fx-check { display: flex; gap: 6px; align-items: center; margin: 4px 12px 4px 0; }
#panel-farmacia .btn.btn-primary { background: #0f766e; color: #fff; border: 1px solid #115e59; font-weight: 700; }
.fx-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.fx-card { background: #fff; border: 1px solid #ccfbf1; border-radius: 12px; padding: 12px; }
.fx-card header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-card p { margin: 8px 0; color: #134e4a; }
.fx-actions button, .fx-wait {
  border: 1px solid #99f6e4;
  background: #ecfdf5;
  color: #115e59;
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
}
.fx-bad, .fx-warn { font-size: 0.75rem; border-radius: 999px; padding: 2px 8px; }
.fx-bad { background: #fee2e2; color: #991b1b; }
.fx-warn { background: #fef3c7; color: #92400e; }
.fx-error { color: #b91c1c; font-weight: 700; }
.fx-fefo { margin: 0 0 8px; font-weight: 700; color: #0f766e; }
.fx-manual { background: #fff; border: 1px solid #ccfbf1; border-radius: 12px; padding: 16px 18px; }
.fx-manual h3 { margin: 1rem 0 0.4rem; color: #115e59; }
.fx-manual li { margin: 0.25rem 0; }