/* ================================================
   AGA — Soft Cream Theme
   ================================================ */

:root {
  --bg:         #faf7f2;
  --surface:    #ffffff;
  --surface-2:  #f5f0e8;
  --surface-3:  #ede6d5;
  --border:     #e8e0d4;
  --text:       #1a1614;
  --text-muted: #7a6a5a;
  --text-dim:   #b8aa98;
  --accent:     rgba(139,94,60,0.07);
  --primary:    #8b5e3c;
  --primary-hover: #6b4a2e;
  --text-danger: #991b1b;
  --radius:     10px;
  --radius-sm:  6px;
  --shadow:     0 1px 4px rgba(26,22,20,0.08);
}

/* ================================================
   BASE
   ================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.925rem;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 { color: var(--text); }

a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

hr { border-color: var(--border); opacity: 1; }

/* ================================================
   INFO TOOLTIP ICON (ⓘ nos KPIs e labels)
   ================================================ */
.info-tip {
  font-size: .72rem;
  opacity: .55;
  cursor: help;
  vertical-align: middle;
  margin-left: 2px;
  transition: opacity .15s;
}
.info-tip:hover { opacity: 1; }

/* ================================================
   SCROLLBAR
   ================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ================================================
   NAVBAR
   ================================================ */
.navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  padding: 0 1.25rem;
  min-height: 52px;
}

.navbar-brand {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text) !important;
  padding: 0.6rem 0;
}
.navbar-brand i { opacity: 0.6; color: var(--primary) !important; }

.navbar .nav-link {
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.8rem;
  margin: 0 1px;
  font-size: 0.875rem;
  transition: color 0.15s, background 0.15s;
}
.navbar .nav-link:hover { color: var(--text) !important; background: var(--accent); }
.navbar .nav-link.active {
  color: var(--primary) !important;
  background: rgba(139,94,60,0.08);
  font-weight: 600;
}
.navbar .nav-link i { margin-right: 5px; }

.navbar-toggler { border-color: var(--border); }

/* logout button */
.navbar .btn-outline-light {
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
  font-size: 0.8rem;
}
.navbar .btn-outline-light:hover {
  background: var(--accent) !important;
  color: var(--text) !important;
}

/* ================================================
   LAYOUT
   ================================================ */
.container-fluid { max-width: 1400px; }

/* ================================================
   CARDS
   ================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
}

.card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 0.85rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.card-body { background: transparent; }

.card-footer {
  background: var(--surface-2) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

.bg-white  { background: var(--surface)   !important; }
.bg-light  { background: var(--surface-2) !important; }
.bg-dark   { background: var(--text)      !important; }

/* ================================================
   TIPOGRAFIA / HELPERS
   ================================================ */
.text-muted     { color: var(--text-muted) !important; }
.text-dark      { color: var(--text) !important; }
.fw-bold        { color: var(--text); }
.fw-semibold    { color: var(--text); }
.small, small   { font-size: 0.8rem; }
.form-text      { color: var(--text-muted) !important; font-size: 0.8rem !important; }

/* ================================================
   FORMS
   ================================================ */
.form-control,
.form-select {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus,
.form-select:focus {
  background: var(--surface) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(139,94,60,0.12) !important;
  color: var(--text) !important;
}
.form-control::placeholder { color: var(--text-dim); }
.form-control:disabled,
.form-select:disabled { opacity: 0.5; background: var(--surface-2) !important; }

.form-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.input-group-text {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}
.form-control, .form-select, .input-group-text { border-radius: var(--radius-sm); }
.input-group .form-control                      { border-radius: 0; }
.input-group > :first-child                     { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }
.input-group > :last-child                      { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }

.form-check-input {
  background-color: var(--surface);
  border-color: var(--border);
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-check-label { color: var(--text); font-size: 0.9rem; }

/* ================================================
   BOTÕES
   ================================================ */
.btn {
  border-radius: var(--radius-sm) !important;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
  letter-spacing: 0.01em;
}

/* primary = caramelo */
.btn-primary,
.btn-dark {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-dark:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

.btn-success {
  background: rgba(22,163,74,0.12) !important;
  border-color: rgba(22,163,74,0.3) !important;
  color: #166534 !important;
}
.btn-success:hover { background: rgba(22,163,74,0.2) !important; }

.btn-danger {
  background: rgba(220,38,38,0.1) !important;
  border-color: rgba(220,38,38,0.3) !important;
  color: #991b1b !important;
}
.btn-danger:hover { background: rgba(220,38,38,0.18) !important; }

.btn-secondary {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.btn-secondary:hover { color: var(--text) !important; background: var(--surface-3) !important; }

/* outline variants */
.btn-outline-primary {
  background: transparent !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.btn-outline-primary:hover {
  background: var(--accent) !important;
  color: var(--primary-hover) !important;
}

.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-outline-light:hover {
  background: var(--surface-2) !important;
  border-color: var(--text-dim) !important;
  color: var(--text) !important;
}

.btn-outline-danger {
  background: transparent !important;
  border-color: rgba(220,38,38,0.35) !important;
  color: #b91c1c !important;
}
.btn-outline-danger:hover { background: rgba(220,38,38,0.08) !important; }

.btn-outline-warning {
  background: transparent !important;
  border-color: rgba(217,119,6,0.35) !important;
  color: #92400e !important;
}
.btn-outline-warning:hover { background: rgba(217,119,6,0.08) !important; }

.btn-outline-success {
  background: transparent !important;
  border-color: rgba(22,163,74,0.35) !important;
  color: #166534 !important;
}
.btn-outline-success:hover { background: rgba(22,163,74,0.08) !important; }

/* ================================================
   TABELAS
   ================================================ */
.table {
  color: var(--text) !important;
  border-color: var(--border) !important;
  --bs-table-bg: transparent;
}
.table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted) !important;
  font-weight: 600;
  border-color: var(--border) !important;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  background: var(--surface-2) !important;
}
.table td {
  border-color: var(--border) !important;
  vertical-align: middle;
}
.table-light,
.table-light > th,
.table-light > td,
thead.table-light th {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  --bs-table-bg: var(--surface-2);
}
.table-hover > tbody > tr:hover > * {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  --bs-table-hover-bg: var(--surface-2);
}

/* ================================================
   BADGES
   ================================================ */
.badge {
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  border-radius: 4px !important;
  padding: 0.3em 0.55em;
}
.badge.bg-secondary, .badge.bg-light {
  background: var(--surface-3) !important;
  color: var(--text-muted) !important;
}
.badge.bg-dark {
  background: var(--text) !important;
  color: var(--surface) !important;
}
.badge.bg-primary {
  background: rgba(139,94,60,0.15) !important;
  color: var(--primary) !important;
}
.badge.bg-warning {
  background: rgba(217,119,6,0.15) !important;
  color: #92400e !important;
}
.badge.bg-success {
  background: rgba(22,163,74,0.15) !important;
  color: #166534 !important;
}
.badge.bg-danger {
  background: rgba(220,38,38,0.15) !important;
  color: #991b1b !important;
}

/* ================================================
   ALERTAS (flash messages)
   ================================================ */
.alert {
  border: 1px solid transparent;
  border-radius: var(--radius-sm) !important;
  font-size: 0.875rem;
}
.alert-success {
  background: rgba(22,163,74,0.08) !important;
  border-color: rgba(22,163,74,0.25) !important;
  color: #166534 !important;
}
.alert-danger {
  background: rgba(220,38,38,0.08) !important;
  border-color: rgba(220,38,38,0.25) !important;
  color: #991b1b !important;
}
.alert-warning {
  background: rgba(217,119,6,0.08) !important;
  border-color: rgba(217,119,6,0.25) !important;
  color: #92400e !important;
}
.alert-info {
  background: rgba(139,94,60,0.08) !important;
  border-color: rgba(139,94,60,0.2) !important;
  color: var(--primary) !important;
}

/* ================================================
   LIST GROUPS
   ================================================ */
.list-group-item {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.list-group-item:hover { background: var(--surface-2) !important; }

/* ================================================
   MODAL
   ================================================ */
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.modal-header {
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.modal-header.bg-danger {
  background: rgba(220,38,38,0.08) !important;
  border-bottom-color: rgba(220,38,38,0.2) !important;
}
.modal-header.bg-danger .modal-title { color: #991b1b; }
.modal-footer { border-top: 1px solid var(--border); }
.modal-backdrop { background: rgba(26,22,20,0.5); }

/* ================================================
   KPI ICONS (dashboard)
   ================================================ */
.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bg-primary-subtle { background: rgba(139,94,60,0.12) !important; }
.bg-success-subtle { background: rgba(22,163,74,0.12)  !important; }
.bg-warning-subtle { background: rgba(217,119,6,0.12)  !important; }
.bg-danger-subtle  { background: rgba(220,38,38,0.12)  !important; }
.bg-info-subtle    { background: rgba(14,165,233,0.12)  !important; }

/* ================================================
   CORES DE TEXTO SEMÂNTICAS
   ================================================ */
.text-primary { color: var(--primary) !important; }
.text-success { color: #166534 !important; }
.text-warning { color: #92400e !important; }
.text-danger  { color: #991b1b !important; }
.text-info    { color: #1e40af !important; }

/* ícones KPI */
.kpi-icon .text-primary { color: var(--primary) !important; }
.kpi-icon .text-success { color: #16a34a !important; }
.kpi-icon .text-warning { color: #d97706 !important; }

/* ================================================
   BORDAS E UTILITÁRIOS
   ================================================ */
.border         { border-color: var(--border) !important; }
.border-top     { border-top-color: var(--border) !important; }
.border-bottom  { border-bottom-color: var(--border) !important; }
.border-start   { border-left-color: var(--border) !important; }
.border-end     { border-right-color: var(--border) !important; }
.border-dashed  { border-style: dashed !important; border-color: var(--border) !important; }

.shadow-sm { box-shadow: 0 1px 3px rgba(26,22,20,0.07) !important; }
.shadow    { box-shadow: 0 2px 8px rgba(26,22,20,0.1) !important; }

/* ================================================
   COLLAPSE / SEÇÕES INTERNAS
   ================================================ */
.collapse .card-body,
.collapse.card-body,
div.bg-light.card-body,
.card-body.bg-light,
div.border-bottom.bg-light { background: var(--surface-2) !important; }

/* ================================================
   DROPDOWN
   ================================================ */
.dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(26,22,20,0.12);
  min-width: 180px;
}
.dropdown-item {
  color: var(--text-muted);
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 0;
}
.dropdown-item:hover { background: var(--surface-2); color: var(--text); }
.dropdown-divider { border-color: var(--border); margin: 0.25rem 0; }

/* ================================================
   PROGRESS / MISC
   ================================================ */
.progress { background: var(--surface-3); }

/* ================================================
   TÍTULOS DE PÁGINA
   ================================================ */
.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ================================================
   ACTION TILES (dashboard ações rápidas)
   ================================================ */
.aga-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 1.1rem 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none !important;
  color: var(--text) !important;
  font-size: 0.8rem;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  min-height: 90px;
  cursor: pointer;
}
.aga-action-tile:hover {
  background: var(--surface-3);
  border-color: var(--text-dim);
  transform: translateY(-1px);
}
.aga-action-tile i { font-size: 1.5rem; }
.aga-action-tile span { text-align: center; line-height: 1.2; }

/* ================================================
   BTN GHOST MUTED
   ================================================ */
.btn-ghost-muted {
  background: transparent;
  border: none;
  color: var(--text-muted) !important;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}
.btn-ghost-muted:hover {
  color: var(--primary) !important;
  background: var(--accent);
}

/* ================================================
   BREADCRUMB
   ================================================ */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-dim); }
.breadcrumb-item a { color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
.breadcrumb-item a:hover { color: var(--primary); }
.breadcrumb-item.active { color: var(--text-muted); }

/* ================================================
   CARDS DE COLEÇÃO
   ================================================ */
.colecao-card { transition: border-color 0.2s, box-shadow 0.2s; }
.colecao-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 4px 16px rgba(139,94,60,0.12) !important;
}

.colecao-status-dot {
  width: 8px; height: 8px;
  background: #16a34a;
  border-radius: 50%;
  margin-top: 6px;
  box-shadow: 0 0 6px rgba(22,163,74,0.35);
}

.colecao-stats {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.colecao-stat {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0.25rem;
  border-right: 1px solid var(--border);
}
.colecao-stat:last-child { border-right: none; }
.colecao-stat-val { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.colecao-stat-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-top: 2px; }

/* ================================================
   FOCUS RING
   ================================================ */
:focus-visible {
  outline: 2px solid rgba(139,94,60,0.5) !important;
  outline-offset: 2px !important;
}

/* ================================================
   CURSOR & INTERAÇÃO
   ================================================ */
.btn,
[role="button"],
summary,
label[for] { cursor: pointer; }

a .card, a.card { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
a:hover .card, a.card:hover { border-color: var(--primary) !important; }

/* ================================================
   TIPOGRAFIA — AJUSTES FINAIS
   ================================================ */
.form-text { font-size: 0.8rem !important; }

.table td,
.fw-bold,
.fs-2, .fs-4, .fs-5,
.text-success, .text-danger { font-variant-numeric: tabular-nums; }

/* ================================================
   MOVIMENTO REDUZIDO
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ================================================
   IMPRESSÃO
   ================================================ */
@media print {
  .navbar, .btn, .card-footer, .d-print-none,
  #sidebar { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 12px; }
  .card { border: 1px solid #ddd !important; box-shadow: none !important; background: #fff !important; }
  .card-header { background: #f5f5f5 !important; color: #000 !important; }
  .table th, .table td { color: #000 !important; border-color: #ddd !important; }
  .container, .container-fluid { max-width: 100% !important; padding: 0 !important; }
  #main-content { padding: 0 !important; }
}

/* ================================================
   SIDEBAR + LAYOUT WRAPPER
   ================================================ */
#app-wrapper {
  display: flex;
  min-height: calc(100vh - 52px);
  align-items: stretch;
}

#sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 0.75rem 0 1.5rem;
  position: sticky;
  top: 52px;
  height: calc(100vh - 52px);
  overflow-y: auto;
  flex-shrink: 0;
  z-index: 100;
}

#sidebarInner { padding: 0; }

.sidebar-group-label {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 0.9rem 1.1rem 0.35rem;
  user-select: none;
}

.sidebar-section-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  padding: 0.9rem 1.1rem 0.35rem;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.sidebar-section-toggle:hover { color: var(--primary); }
.sidebar-chevron { transition: transform 0.2s; font-size: 0.75rem; }
.sidebar-section-toggle[aria-expanded="true"] .sidebar-chevron { transform: rotate(-180deg); }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0.42rem 1.1rem;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  font-size: 0.875rem;
  transition: color 0.13s, background 0.13s;
  border-left: 2px solid transparent;
  line-height: 1.4;
}
.sidebar-link i { font-size: 1rem; flex-shrink: 0; opacity: 0.8; }
.sidebar-link:hover {
  color: var(--text) !important;
  background: var(--surface-2);
}
.sidebar-link.active {
  color: var(--primary) !important;
  background: rgba(139,94,60,0.07);
  font-weight: 600;
  border-left-color: var(--primary);
}
.sidebar-link.active i { opacity: 1; }

.sidebar-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.6rem 0;
}

#main-content {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1.75rem 2rem;
}

/* bg-secondary-subtle (usado nos gateways desconhecidos) */
.bg-secondary-subtle { background: var(--surface-3) !important; }

/* ================================================
   SIDEBAR — MOBILE (< lg = 992px)
   ================================================ */
@media (max-width: 991px) {
  #sidebar {
    position: fixed;
    top: 52px;
    left: -220px;
    height: calc(100vh - 52px);
    transition: left 0.22s ease;
    box-shadow: 4px 0 20px rgba(26,22,20,0.14);
    z-index: 1040;
    -webkit-overflow-scrolling: touch;
  }
  #sidebar.show {
    left: 0;
  }
  /* Links e botões da sidebar: elimina delay de 300ms e gesto de zoom */
  .sidebar-link,
  .sidebar-section-toggle {
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(139,94,60,0.15);
  }
  /* Backdrop ao abrir sidebar */
  body.sidebar-open::after {
    content: '';
    position: fixed;
    inset: 52px 0 0 220px;
    background: rgba(26,22,20,0.35);
    z-index: 1030;
    touch-action: manipulation;
  }

  #main-content { padding: 1rem 1rem 2rem; }
}

/* ================================================
   MOBILE GLOBAL (< 768px)
   ================================================ */
@media (max-width: 767px) {
  /* Previne zoom automático em inputs no iOS */
  input, select, textarea, .form-control, .form-select {
    font-size: 16px !important;
  }

  /* Tabelas menores em mobile */
  .table { font-size: 0.82rem; }
  .table th, .table td { padding: 0.45rem 0.4rem; }

  /* Page titles menores */
  .page-title { font-size: 1.3rem !important; }
  h1.page-title { font-size: 1.3rem !important; }

  /* Notificação dropdown ocupa largura da tela */
  .dropdown-menu[style*="min-width:320px"] {
    min-width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
  }

  /* pre com código não transborda */
  pre { overflow-x: auto; white-space: pre-wrap; word-break: break-all; }

  /* Toolbar de ações em massa */
  #bulkToolbar {
    min-width: calc(100vw - 1rem) !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    transform: none !important;
  }
  #bulkToolbar .card { flex-wrap: wrap; }

  /* Copy text em campanhas */
  .copy-cell-text { max-width: calc(100vw - 80px) !important; }

  /* KPI icons menores em mobile */
  .kpi-icon { width: 36px !important; height: 36px !important; min-width: 36px; }
  .kpi-icon i { font-size: 1rem !important; }

  /* Sidebar ainda menor em phones muito pequenos */
  #sidebar { width: 200px; }

  /* Colunas de tabela opcionais: esconder em mobile */
  .d-mobile-none { display: none !important; }
}

/* Colunas de tabela opcionais: mostrar a partir de md */
@media (min-width: 768px) {
  .d-mobile-none { display: table-cell !important; }
}