/* =========================================================
   PADRÃO GLOBAL — TEMA SARAH (site todo)
   Paleta: #fff4d9 | #583488 | #ffe09e | #555555 | #f6f6f6
========================================================= */

:root{
  --brand: #583488;      /* roxo principal */
  --brand-2: #6b3fa6;    /* roxo hover */
  --cream: #fff4d9;      /* fundo claro */
  --gold: #ffe09e;       /* destaque suave */
  --text: #555555;
  --bg: #f6f6f6;

  --border: #e3d9f0;
  --shadow: 0 10px 25px rgba(88,52,136,.10);
  --radius: 16px;
  --radius-sm: 12px;
  --focus: rgba(88,52,136,.22);
}

/* Base */
html, body{
  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

a{ color: var(--brand); }
a:hover{ color: var(--brand-2); }

/* Cards / containers */
.card, .card-soft{
  border-radius: var(--radius) !important;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.04);
}
.card-soft{
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Inputs (fica premium + conversa com botões) */
.form-control,
.form-select,
.input-group-text,
.form-check-input{
  border-radius: var(--radius-sm) !important;
  border-color: rgba(88,52,136,.20) !important;
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(88,52,136,.45) !important;
  box-shadow: 0 0 0 .25rem var(--focus) !important;
}

/* Checkbox/Toggle */
.form-check-input:checked{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Botões — padrão global */
.btn{
  border-radius: var(--radius-sm) !important;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover{ transform: translateY(-1px); }

/* Botões principais (Bootstrap) com a marca */
.btn-primary{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 10px 22px rgba(88,52,136,.18);
}
.btn-primary:hover{
  background: var(--brand-2) !important;
  border-color: var(--brand-2) !important;
}

/* Sucesso (verde) — mantém, mas arredondado e consistente */
.btn-success{
  box-shadow: 0 10px 22px rgba(25,135,84,.12);
}

/* Outline harmonizado */
.btn-outline-primary{
  color: var(--brand) !important;
  border-color: rgba(88,52,136,.55) !important;
  border-width: 1.5px;
}
.btn-outline-primary:hover{
  background: rgba(88,52,136,.10) !important;
  border-color: rgba(88,52,136,.70) !important;
}

.btn-outline-warning,
.btn-outline-danger,
.btn-outline-secondary{
  border-width: 1.5px;
}

/* Botão pequeno (tabelas) */
.btn.btn-sm{
  border-radius: var(--radius-sm) !important;
  padding: .35rem .65rem;
}

/* Tabelas */
.table{
  --bs-table-hover-bg: rgba(255,224,158,.25); /* hover gold suave */
}
.table thead th{
  color: #3f3f3f;
  font-weight: 800;
  white-space: nowrap;
}
.table td, .table th{
  vertical-align: middle;
}

/* Espaço e alinhamento de botões em tabelas */
.table td .btn{ margin-left: .35rem; }
.table td .btn:first-child{ margin-left: 0; }

/* Badges */
.badge{
  border-radius: 999px !important;
  padding: .35rem .6rem;
  font-weight: 800;
  letter-spacing: .3px;
}

/* Badges do bootstrap mais “marca” */
.badge.bg-success{ background-color: #2e8b57 !important; } /* só um verde mais elegante */
.badge.bg-secondary{ background-color: #6c757d !important; }
.badge.bg-danger{ background-color: #c93a3a !important; }

/* Alerts levemente brand */
.alert{
  border-radius: var(--radius) !important;
}
.alert-success{
  border-color: rgba(88,52,136,.15);
}

/* Opcional: pequenos “chips” / tags */
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }