:root{
  --bg:#ffffff; --bg-soft:#f7f8fa; --line:#e8e9ee;
  --text:#1f2937; --muted:#6b7280;
  --accent:#0b6efd; --accent-ink:#ffffff;
  --danger:#ef4444;
  --radius:14px; --shadow:0 8px 28px rgba(0,0,0,.06);
}




/* Ações no topo */
.vinc-actions{
  max-width:1300px; margin:0 auto; padding:8px 12px 16px;
  display:flex; gap:10px; align-items:center; justify-content:flex-start;
}
.btn{
  border:1px solid var(--line); background:#fff; color:#111827;
  padding:10px 14px; border-radius:12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  transition:box-shadow .12s ease, transform .08s ease, border-color .12s ease, background .12s ease;
  font-weight:600;
}
.btn:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn-primary:hover{ filter:brightness(.98); }

/* Grid de cards */
.vinc-grid{
  max-width:1300px; margin:0 auto; padding:0 12px 32px;
  display:grid; grid-template-columns:repeat(12, 1fr); gap:16px;
}
@media (max-width: 1200px){ .vinc-grid{ grid-template-columns:repeat(9, 1fr);} }
@media (max-width: 992px){  .vinc-grid{ grid-template-columns:repeat(6, 1fr);} }
@media (max-width: 680px){  .vinc-grid{ grid-template-columns:repeat(1, 1fr);} }

.vinc-card{
  grid-column: span 12;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px; display:flex; flex-direction:column; gap:12px;
}
@media (min-width: 681px){ .vinc-card{ grid-column: span 6; } }
@media (min-width: 993px){ .vinc-card{ grid-column: span 4; } }
@media (min-width: 1201px){ .vinc-card{ grid-column: span 4; } }

/* Cabeçalho do card */
.vinc-card__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:6px; border-bottom:1px dashed var(--line);
}
.vinc-card__title{
  margin:0; font-size:16px; line-height:1.2; font-weight:800; color:#0f172a;
}

/* Ações (ícone excluir) */
.vinc-card__actions{ display:flex; gap:8px; }
.icon-btn{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid var(--line); background:#fff; color:#111827;
  transition:box-shadow .12s ease, transform .08s ease, border-color .12s ease, background .12s ease, color .12s ease;
  cursor:pointer;
}
.icon-btn:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.icon-btn--danger{ color:#b91c1c; border-color:#f2cccc; background:#fff7f7; }
.icon-btn--danger:hover{ border-color:#ef9a9a; background:#fff2f2; }

/* Corpo do card */
.vinc-card__body{ display:grid; gap:10px; }
.vinc-field .label{
  display:block; font-size:12px; color:var(--muted); margin-bottom:2px; font-weight:700;
}
.vinc-field .value{
  color:#111827; line-height:1.5; overflow-wrap:anywhere; word-break:break-word;
}

/* Rodapé (tipo) */
.vinc-card__foot{
  padding-top:6px; border-top:1px dashed var(--line);
  display:flex; align-items:center; gap:12px; justify-content:space-between;
}
.vinc-card__type{ min-width:160px; }

/* Select modernizado (aplica também em .campobasico que você já usa) */
.select, .campobasico{
  width:100%; min-width:160px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px 12px;
  color:#111827;
  font-weight:600;
  line-height:1.2;
  height:40px;
  background-image:
    linear-gradient(45deg, transparent 50%, #9aa2af 50%),
    linear-gradient(135deg, #9aa2af 50%, transparent 50%),
    linear-gradient(to right, #fff, #fff);
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 13px) calc(1em + 2px),
    100% 0;
  background-size:5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat:no-repeat;
}
.select:focus, .campobasico:focus{ outline:none; box-shadow:0 0 0 3px rgba(11,110,253,.15); border-color:#bcd1ff; }

/* Modal legado (se usado) */
.box2{ background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }