.vscomp-shell {
  padding: 14px 16px 18px 16px;
  background: var(--vs-card, #fff);
  border: 1px solid var(--vs-border, #b6c0cd);
  border-radius: var(--vs-radius, 4px);
  margin: 12px;
  box-shadow: none;
  font-size: 13px;
  max-width: none;
}

.vscomp-title {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 72px 120px;
  gap: 16px;
  align-items: center;
  margin-bottom: 10px;
}

.vscomp-title b {
  font-size: 15px;
  color: var(--vs-text, #172033);
}

.vscomp-title span,
.vscomp-title strong {
  color: var(--vs-label, #334155);
}

.vscomp-grid-wrap {
  height: 186px;
  overflow: auto;
  border: 1px solid var(--vs-border, #b6c0cd);
  margin-bottom: 10px;
  background: var(--vs-card, #fff);
}

.vscomp-grid {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.vscomp-grid th,
.vscomp-grid td {
  border-right: 1px solid var(--vs-border-soft, #d7dde5);
  border-bottom: 1px solid var(--vs-border-soft, #d7dde5);
  padding: 6px 8px;
  white-space: nowrap;
}

.vscomp-grid th {
  background: var(--vs-panel-header, #cbd5e1);
  font-weight: 700;
  color: var(--vs-text, #172033);
}

.vscomp-grid td.num {
  text-align: right;
}

.vscomp-grid td.empty {
  text-align: center;
  color: var(--vs-muted, #64748b);
  padding: 22px;
}

.vscomp-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px 0;
  flex-wrap: wrap;
}

.vscomp-actions span {
  margin-left: 10px;
  color: var(--vs-muted, #64748b);
}

.vscomp-form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(48px, auto);
  gap: 10px 12px;
  align-items: end;
  margin-top: 4px;
  width: 100%;
}

.vscomp-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  grid-column: span 2;
  min-width: 0;
  align-self: end;
}

.vscomp-field span {
  font-size: 12px;
  color: var(--vs-label, #334155);
  font-weight: 600;
  min-height: 16px;
}

.vscomp-field input,
.vscomp-field select,
.vscomp-field textarea {
  border: 1px solid var(--vs-border, #b6c0cd);
  border-radius: var(--vs-radius-control, 6px);
  padding: 4px 8px;
  background: var(--vs-card, #fff);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.vscomp-field input,
.vscomp-field select {
  height: 36px;
}

.vscomp-field textarea {
  min-height: 90px;
}

.vscomp-check {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  color: var(--vs-text, #172033);
  grid-column: span 3;
  line-height: 1.2;
  align-self: end;
  min-width: 0;
  overflow: hidden;
}

.vscomp-check input {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  flex: 0 0 16px;
  margin: 0;
}

.vscomp-check span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.vscomp-text-tabs {
  display: flex;
  gap: 0;
  margin-top: 14px;
  border-bottom: 1px solid var(--vs-border, #b6c0cd);
  flex-wrap: wrap;
}

.vscomp-text-tabs button {
  border: 1px solid var(--vs-border, #b6c0cd);
  border-bottom: 0;
  background: var(--vs-panel, #dce3ec);
  padding: 8px 12px;
}

.vscomp-text-tabs button.active {
  background: var(--vs-card, #fff);
  font-weight: 700;
}

.vscomp-text-panel {
  display: none;
}

.vscomp-text-panel.active {
  display: block;
}

.vscomp-text-panel textarea {
  width: 100%;
  height: 150px;
  border: 1px solid var(--vs-border, #b6c0cd);
  border-top: 0;
  padding: 8px;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
}

.vscomp-loading {
  padding: 35px;
  text-align: center;
  color: var(--vs-muted, #64748b);
}

.alert {
  padding: 12px;
  border-radius: 6px;
}

.alert-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}

.alert-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.m-3 {
  margin: 1rem;
}

.ms-2 {
  margin-left: .5rem;
}

@media (max-width: 1200px) {
  .vscomp-form {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .vscomp-field[style],
  .vscomp-check[style] {
    grid-column: auto / span 2 !important;
    grid-row: auto !important;
  }

  .vscomp-check[style] {
    grid-column: auto / span 4 !important;
  }
}

@media (max-width: 900px) {
  .vscomp-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .vscomp-field[style],
  .vscomp-check[style] {
    grid-column: auto / span 4 !important;
    grid-row: auto !important;
  }
}

/* v4 - inclusão de linhas no grid filho */
.vscomp-action-col,
.vscomp-row-actions {
  width: 56px;
  text-align: center;
  white-space: nowrap;
}

.vscomp-new-row td {
  background: #fffdf5;
}

.vscomp-grid-input {
  width: 100%;
  min-width: 70px;
  height: 30px;
  border: 1px solid var(--vs-border, #b6c0cd);
  border-radius: var(--vs-radius-control, 6px);
  padding: 3px 6px;
  box-sizing: border-box;
  background: var(--vs-card, #fff);
  font: inherit;
}

.vscomp-grid td.num .vscomp-grid-input {
  text-align: right;
}

.vscomp-grid .btn {
  line-height: 1;
  padding: 3px 8px;
}

/* v9 - edição direta de linhas existentes do grid filho */
.vscomp-grid-input{
  width:100%;
  min-width:70px;
  height:30px;
  border:1px solid var(--vs-border,#b6c0cd);
  border-radius:var(--vs-radius-control,6px);
  padding:3px 6px;
  background:var(--vs-card,#fff);
  color:var(--vs-text,#172033);
}
.vscomp-grid td.num .vscomp-grid-input{
  text-align:right;
}
.vscomp-grid tr.vscomp-row-dirty td{
  background:#fff7ed;
}
.vscomp-row-actions{
  width:44px;
  text-align:center;
  white-space:nowrap;
}
.vscomp-action-col{
  width:44px;
}

/* v10 - formatação numérica consistente */
.vscomp-grid td.num,
.vscomp-grid td.num input,
.vscomp-grid-input[inputmode="decimal"],
.vscomp-field input[inputmode="decimal"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vscomp-title strong {
  font-variant-numeric: tabular-nums;
}


/* v11 - cabeçalho da composição: forma farmacêutica + geral + total */
.vscomp-title-with-controls{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(360px,520px) 70px 120px;
  align-items:center;
  gap:12px;
}
.vscomp-header-controls{display:flex;align-items:center;gap:8px;min-width:0}
.vscomp-header-select{display:flex;align-items:center;gap:6px;min-width:260px;flex:1;margin:0}
.vscomp-header-select span{font-size:12px;color:#334155;font-weight:600;white-space:nowrap}
.vscomp-header-select select{height:32px;border:1px solid var(--vs-border,#b6c0cd);border-radius:var(--vs-radius-control,6px);background:var(--vs-card,#fff);min-width:220px;width:100%;padding:4px 8px}
.vscomp-grid-input.vscomp-lookup-input{background:var(--vs-card,#fff)}
@media (max-width:1100px){.vscomp-title-with-controls{grid-template-columns:1fr}.vscomp-header-controls{width:100%}}


/* v15 - campos somente leitura definidos no JSON */
.vscomp-grid-input[readonly],
.vscomp-grid-input[data-vscomp-readonly="1"] {
  background: var(--vs-surface-soft, #eef2f6);
  color: var(--vs-label, #334155);
  cursor: default;
}
.vscomp-grid-input[data-vscomp-readonly="1"]:focus {
  outline: none;
  box-shadow: none;
}


/* v16 - readonly real em colunas automáticas do grid */
.vscomp-grid-readonly {
  display: block;
  min-height: 32px;
  line-height: 22px;
  padding: 5px 8px;
  border: 1px solid var(--vs-border, #b6c0cd);
  border-radius: var(--vs-radius-control, 6px);
  background: var(--vs-surface-soft, #eef2f6);
  color: var(--vs-label, #334155);
  cursor: default;
  user-select: text;
}
.vscomp-grid-hidden { display: none !important; }
.vscomp-grid [data-vscomp-readonly="1"] { pointer-events: none; }

/* v22 - grids editáveis com aparência de tabela, sem caixas permanentes */
.vscomp-grid tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.vscomp-grid tbody tr:hover td {
  background: #eef4ff;
}

.vscomp-grid th,
.vscomp-grid td {
  padding: 3px 6px;
}

.vscomp-grid-input {
  height: 28px;
  min-height: 28px;
  padding: 3px 6px;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.vscomp-grid-input:focus {
  border-color: #4f8df7;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(79, 141, 247, .32);
  outline: none;
}

.vscomp-grid-input[readonly],
.vscomp-grid-input[data-vscomp-readonly="1"],
.vscomp-grid-readonly {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}


/* v21 - editor RTF dirigido por JSON */
.vscomp-rtf-panel {
  border: 1px solid var(--vs-border, #b6c0cd);
  border-top: 0;
  background: var(--vs-card, #fff);
}
.vscomp-rtf-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--vs-border, #b6c0cd);
  background: var(--vs-panel-header, #cbd5e1);
}
.vscomp-rtf-toolbar button {
  min-width: 30px;
  height: 28px;
  border: 1px solid var(--vs-border-strong, #9fb3c8);
  border-radius: var(--vs-radius, 4px);
  background: var(--vs-card, #fff);
  color: var(--vs-text, #172033);
  font-size: 12px;
  cursor: pointer;
}
.vscomp-rtf-toolbar button:hover {
  background: var(--vs-panel-soft, #d2dae5);
  border-color: var(--vs-primary, #2563eb);
}
.vscomp-rtf-editor {
  width: 100%;
  min-height: 180px;
  padding: 10px;
  outline: none;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--vs-text, #172033);
  background: var(--vs-card, #fff);
}
.vscomp-rtf-editor:focus {
  box-shadow: inset 0 0 0 2px rgba(37,99,235,.12);
}
.vscomp-rtf-hidden {
  display: none !important;
}


/* v27 - lookup padrão: código com busca incremental + descrição readonly não tabulável */
.vscomp-field-lookup-code input.vscomp-form-lookup-code {
  font-family: inherit;
}

.vscomp-field-lookup-desc input.vscomp-form-lookup-desc {
  background: var(--vs-surface-soft, #eef2f6);
  color: var(--vs-label, #334155);
  cursor: default;
}

.vscomp-field-lookup-desc input.vscomp-form-lookup-desc:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--vs-border, #b6c0cd);
}