/* =========================
   VISUAL CLEAN
========================= */
.card{
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  padding: 20px;
}
@media (min-width: 768px){
  .card{ padding: 24px; }
}

/* Input file com melhor UI */
.file-input{
  display:block;
  width:100%;
  font-size:14px;
}
.file-input::file-selector-button{
  margin-right: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 0;
  background: rgb(15 23 42);
  color: #fff;
  font-weight: 700;
  cursor:pointer;
}
.file-input::file-selector-button:hover{
  background: rgb(2 6 23);
}

/* Progress minimal */
.progress-track{
  width:100%;
  height:8px;
  border-radius:999px;
  background: rgb(241 245 249);
  overflow:hidden;
}
.progress-bar{
  height:8px;
  background: rgb(5 150 105);
  border-radius:999px;
  transition: width .15s ease;
}

/* =========================
   TOOLTIP (discreto)
========================= */
.tt { position: relative; display: inline-flex; align-items: center; }
.tt-btn{
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1px solid rgb(226 232 240);
  color: rgb(100 116 139);
  background: white;
  font-size: 12px;
  line-height: 1;
}
.tt-btn:hover{ background: rgb(248 250 252); }

.tt .tt-bubble {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(100% + 10px);
  width: max-content; max-width: 260px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgb(226 232 240);
  background: white;
  color: rgb(15 23 42);
  font-size: 12px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.10);
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease;
  z-index: 20;
  white-space: normal;
}
.tt:hover .tt-bubble { opacity: 1; }

/* =========================
   TABLE / PREVIEW
========================= */
.preview-wrap{
  border: 1px solid rgb(226 232 240);
  border-radius: 16px;
  overflow:hidden;
  background:#fff;
}

.preview-scroll{
  max-height: 520px;
  overflow:auto;
}

thead.sticky th{
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 rgba(148,163,184,0.35);
}

.th{
  text-align:left;
  padding: 12px;
  border-bottom: 1px solid rgb(226 232 240);
}

.preview-footer{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-top: 1px solid rgb(226 232 240);
  background: #fff;
}

/* scrollbar clean */
.preview-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.preview-scroll::-webkit-scrollbar-thumb { background: rgb(203 213 225); border-radius: 999px; }
.preview-scroll::-webkit-scrollbar-track { background: rgb(241 245 249); border-radius: 999px; }

/* =========================
   BUTTONS
========================= */
.btn-primary{
  padding: 10px 16px;
  border-radius: 12px;
  background: rgb(5 150 105);
  color: white;
  font-weight: 800;
}
.btn-primary:hover{ background: rgb(4 120 87); }

.btn-dark{
  padding: 10px 16px;
  border-radius: 12px;
  background: rgb(15 23 42);
  color: white;
  font-weight: 800;
}
.btn-dark:hover{ background: rgb(2 6 23); }

.btn-ghost{
  padding: 10px 16px;
  border-radius: 12px;
  background: rgb(248 250 252);
  color: rgb(15 23 42);
  font-weight: 800;
  border: 1px solid rgb(226 232 240);
}
.btn-ghost:hover{ background: rgb(241 245 249); }

.btn-primary:disabled, .btn-dark:disabled, .btn-ghost:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* =========================
   SVG HOVER (FIX)
   - sem quadrado
   - funciona em logo local e externo (rouglas)
========================= */
.svg-shadow{
  transition: filter .18s ease;
  will-change: filter;
}

.svg-shadow:hover{
  filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.22));
}