/* Overrides mínimos sobre Tailwind. Se llena a medida que hace falta. */
:root {
  --color-cream: #faf7f2;
  --color-rose-dust: #d4a5a5;
  --color-sage: #a8b5a0;
}

.tab-btn {
  padding: 0.75rem 0.9rem;
  border-bottom: 2px solid transparent;
  color: #78716c;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.9rem;
}
@media (min-width: 640px) {
  .tab-btn { padding: 0.5rem 1rem; font-size: 1rem; }
}
.tab-btn:hover { color: #292524; }
.tab-btn.active {
  color: #292524;
  border-bottom-color: #d4a5a5;
  font-weight: 600;
}

/* Ocultar la barra de scroll horizontal en la nav de tabs */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Tablas responsive: en mobile, borde suave alrededor para que el scroll se note */
.tbl-scroll { position: relative; }
.tbl-scroll::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 20px;
  background: linear-gradient(to left, rgba(0,0,0,0.05), transparent);
  pointer-events: none;
}
@media (min-width: 640px) {
  .tbl-scroll::after { display: none; }
}

/* Botones de acción táctiles en mobile (min 40x40) */
.btn-touch {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}