.admin-panel[data-admin-panel="financeiro-vales"],
.admin-panel[data-admin-panel="colaborador-vales"] {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.vales-section-label {
  margin: 0.35rem 0 -0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.vales-comissao-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vales-comissao-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.vales-comissao-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
}

.vales-comissao-head p {
  margin: 0.25rem 0 0;
  color: #64748b;
  font-size: 0.92rem;
}

.vales-comissao-feedback {
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
}

.vales-comissao-feedback[data-tone="success"] {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.vales-comissao-feedback[data-tone="warn"] {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.vales-comissao-denied {
  padding: 2rem 1.25rem;
  text-align: center;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.vales-comissao-denied strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
  color: #0f172a;
}

.vales-comissao-denied p {
  margin: 0;
  color: #64748b;
}

.vales-kpi-grid,
.vales-fin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

.vales-fin-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vales-kpi,
.vales-fin-kpi {
  position: relative;
  background: #fff;
  border: 1px solid #e8eef6;
  border-radius: 20px;
  padding: 1rem 1.1rem;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.2s ease;
}

.vales-kpi::before,
.vales-fin-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #cbd5e1;
}

.vales-kpi:hover,
.vales-fin-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.vales-kpi[data-tone="amber"]::before { background: #f59e0b; }
.vales-kpi[data-tone="green"]::before { background: #10b981; }
.vales-kpi[data-tone="red"]::before { background: #ef4444; }
.vales-kpi[data-tone="primary"]::before { background: #2563eb; }
.vales-kpi[data-tone="violet"]::before { background: #7c3aed; }
.vales-kpi[data-tone="neutral"]::before { background: #94a3b8; }
.vales-fin-kpi::before { background: #2563eb; }

.vales-kpi span,
.vales-fin-kpi span {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vales-kpi strong,
.vales-fin-kpi strong {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

.vales-kpi[data-tone="amber"] strong { color: #b45309; }
.vales-kpi[data-tone="green"] strong { color: #047857; }
.vales-kpi[data-tone="red"] strong { color: #dc2626; }
.vales-kpi[data-tone="primary"] strong { color: #2563eb; }
.vales-kpi[data-tone="violet"] strong { color: #7c3aed; }

.vales-kpi--skeleton .vales-skeleton-line {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: vales-skeleton-shimmer 1.2s ease-in-out infinite;
}

.vales-skeleton-line--sm { height: 12px; width: 55%; margin-bottom: 0.65rem; }
.vales-skeleton-line--lg { height: 22px; width: 75%; }

@keyframes vales-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.vales-comissao-filters {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 1rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.vales-comissao-filters-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 0.75rem;
  align-items: end;
}

.vales-comissao-filters label span {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.vales-comissao-filters input,
.vales-comissao-filters select {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  padding: 0.45rem 0.7rem;
  font: inherit;
  color: #0f172a;
  background: #fff;
}

.vales-comissao-filters-actions {
  display: flex;
  gap: 0.5rem;
}

/* Botões legíveis sobre cards brancos (o .btn-ghost global é claro, feito p/ hero escuro). */
.vales-comissao-shell .btn,
.meus-vales-shell .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.vales-comissao-shell .btn-ghost,
.meus-vales-shell .btn-ghost {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  box-shadow: none;
}

.vales-comissao-shell .btn-ghost:hover:not(:disabled),
.meus-vales-shell .btn-ghost:hover:not(:disabled) {
  background: #f1f5f9;
  color: #0f172a;
  transform: none;
}

.vales-comissao-shell .btn-ghost:disabled,
.meus-vales-shell .btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vales-comissao-shell .btn-primary,
.meus-vales-shell .btn-primary {
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.vales-comissao-shell .btn-primary:disabled,
.meus-vales-shell .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.vales-table-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.vales-table-scroll {
  overflow-x: auto;
}

.vales-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 960px;
}

.vales-table th,
.vales-table td {
  padding: 0.75rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.88rem;
  vertical-align: middle;
}

.vales-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  background: #f8fafc;
}

.vales-table-empty {
  text-align: center;
  color: #64748b;
  padding: 2rem 1rem !important;
}

.vales-cell-truncate {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vales-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.vales-status-badge[data-tone="amber"] { background: #fef3c7; color: #b45309; }
.vales-status-badge[data-tone="green"] { background: #d1fae5; color: #047857; }
.vales-status-badge[data-tone="red"] { background: #fee2e2; color: #dc2626; }
.vales-status-badge[data-tone="neutral"] { background: #f1f5f9; color: #475569; }

.vales-fin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.vales-fin-badge--ok { color: #047857; }
.vales-fin-badge--warn { color: #b45309; }
.vales-fin-badge--muted { color: #94a3b8; }

.vales-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.vales-comissao-shell .vales-action-btn {
  min-height: 34px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  border-radius: 10px;
}

.vales-comissao-shell .vales-action-btn--danger {
  color: #dc2626;
  border-color: #fecaca;
}

.vales-comissao-shell .vales-action-btn--danger:hover:not(:disabled) {
  background: #fef2f2;
  color: #b91c1c;
}

.vales-actions-muted {
  color: #94a3b8;
}

.vales-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid #f1f5f9;
}

.vales-page-current {
  font-size: 0.85rem;
  color: #64748b;
}

.vales-audit-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
}

.vales-audit-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 0;
  background: #f8fafc;
  font: inherit;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
}

.vales-audit-panel {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid #e2e8f0;
}

.vales-audit-empty {
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
}

.vales-audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.vales-audit-item {
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid #fde68a;
  background: #fffbeb;
}

.vales-audit-item strong {
  display: block;
  color: #b45309;
  margin-bottom: 0.25rem;
}

.vales-audit-item span,
.vales-audit-item p {
  display: block;
  font-size: 0.82rem;
  color: #64748b;
  margin: 0.15rem 0 0;
}

.vales-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.45);
}

.vales-modal-backdrop[hidden] {
  display: none;
}

.vales-modal {
  width: min(480px, 100%);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.vales-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid #f1f5f9;
}

.vales-modal-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.vales-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #475569;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.vales-modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.vales-modal-body {
  padding: 1rem 1.1rem;
}

.vales-modal-context {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1rem;
}

.vales-modal-context div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0.5rem;
}

.vales-modal-context dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.vales-modal-context dd {
  margin: 0;
  font-size: 0.9rem;
  color: #0f172a;
}

.vales-modal-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.35rem;
}

.vales-modal-field textarea {
  width: 100%;
  min-height: 96px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  padding: 0.6rem 0.75rem;
  font: inherit;
  resize: vertical;
}

.vales-modal-field input[type="text"],
.vales-modal-field input[type="number"] {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  padding: 0.6rem 0.75rem;
  font: inherit;
}

.vales-modal-field small {
  display: block;
  margin-top: 0.35rem;
  color: #64748b;
  font-size: 0.78rem;
}

.vales-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* O modal é movido para o body (fora de .meus-vales-shell), então
   estilizamos os botões pelo escopo do próprio modal. */
.vales-modal .btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.vales-modal .btn-ghost {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  box-shadow: none;
}

.vales-modal .btn-ghost:hover:not(:disabled) {
  background: #f1f5f9;
  color: #0f172a;
  transform: none;
}

.vales-modal .btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vales-modal .btn-primary {
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.vales-modal .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.vales-comissao-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vales-comissao-skeleton[hidden] {
  display: none;
}

.vales-comissao-skeleton-row {
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: vales-skeleton-shimmer 1.2s ease-in-out infinite;
}

@media (max-width: 1199px) {
  .vales-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vales-fin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vales-comissao-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vales-kpi[data-tone="violet"] strong { color: #7c3aed; }

.vales-kpi--colaborador strong {
  font-size: 1.5rem;
}

.meus-vales-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.meus-vales-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.meus-vales-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
}

.meus-vales-head p {
  margin: 0.25rem 0 0;
  color: #64748b;
  font-size: 0.92rem;
}

.meus-vales-eligibility-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.meus-vales-eligibility-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.meus-vales-eligibility-badge[data-tone="green"] {
  background: #d1fae5;
  color: #047857;
}

.meus-vales-eligibility-badge[data-tone="amber"] {
  background: #fef3c7;
  color: #b45309;
}

.meus-vales-request-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 1rem 1.1rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.meus-vales-request-copy strong {
  display: block;
  font-size: 1rem;
  color: #0f172a;
  margin-bottom: 0.2rem;
}

.meus-vales-request-copy p {
  margin: 0;
  color: #64748b;
  font-size: 0.88rem;
}

.meus-vales-request-hint {
  margin: 0;
  color: #64748b;
  font-size: 0.88rem;
}

.meus-vales-history-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 1rem 1.1rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.meus-vales-history-card h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: #0f172a;
}

.meus-vales-history-empty {
  text-align: center;
  padding: 1.25rem 0.5rem;
  color: #64748b;
}

.meus-vales-history-empty p {
  margin: 0 0 0.35rem;
}

.meus-vales-history-note {
  font-size: 0.82rem;
  color: #94a3b8;
}

.meus-vales-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.meus-vales-history-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

.meus-vales-history-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.meus-vales-history-main strong {
  font-size: 1.05rem;
  color: #0f172a;
}

.meus-vales-history-date {
  font-size: 0.8rem;
  color: #64748b;
}

.meus-vales-history-notes {
  margin: 0;
  font-size: 0.85rem;
  color: #475569;
}

.meus-vales-history-item .vales-status-badge {
  align-self: flex-start;
}

.meus-vales-feedback {
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
}

.meus-vales-feedback[data-tone="success"] {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.meus-vales-feedback[data-tone="warn"] {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.meus-vales-denied {
  padding: 2rem 1.25rem;
  text-align: center;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.meus-vales-colaborador-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.meus-vales-request-error {
  margin: 0.5rem 0 0;
  color: #dc2626;
  font-size: 0.85rem;
}

@media (max-width: 767px) {
  .vales-kpi-grid,
  .vales-fin-kpi-grid,
  .vales-comissao-filters-grid {
    grid-template-columns: 1fr;
  }

  .meus-vales-colaborador-kpis {
    grid-template-columns: 1fr;
  }

  .meus-vales-request-card {
    flex-direction: column;
    align-items: stretch;
  }

  .meus-vales-request-card .btn {
    width: 100%;
    min-height: 44px;
  }

  .vales-table thead {
    display: none;
  }

  .vales-table tr {
    display: block;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
  }

  .vales-table td {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.5rem;
    border: 0;
    padding: 0.35rem 0;
  }

  .vales-table td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
  }
}