/* ============================================================================
   Ponte ACERO ↔ Bootstrap 5.3

   As telas dos três frontends são Bootstrap puro (~100 arquivos .razor com
   .table, .modal, .btn, .form-control). Em vez de reescrever o markup de cada
   uma, esta folha traduz os tokens do tokens-acero.css para as variáveis
   --bs-* que o Bootstrap já consome — assim toda tela existente herda o tema
   sem alteração de markup, e telas novas podem usar direto o .tbl do
   tables-acero.css.

   Carregue sempre depois do bootstrap.min.css e do tokens-acero.css.
   ============================================================================ */

:root {
  /* --- Cores da paleta nas variáveis do Bootstrap ------------------------
     Alimenta de uma vez os utilitários (.bg-*, .text-*, .border-*), os botões
     e todos os componentes contextuais. */
  --bs-primary:   var(--coral-400);
  --bs-secondary: var(--navy-400);
  --bs-success:   var(--success);
  --bs-danger:    var(--danger);
  --bs-warning:   var(--warning);
  --bs-info:      var(--navy-600);
  --bs-light:     var(--navy-50);
  --bs-dark:      var(--navy-900);

  --bs-primary-rgb:   240, 154, 115;
  --bs-secondary-rgb: 123, 131, 158;
  --bs-success-rgb:   76, 158, 122;
  --bs-danger-rgb:    212, 91, 78;
  --bs-warning-rgb:   217, 154, 43;
  --bs-info-rgb:      73, 83, 118;
  --bs-light-rgb:     238, 240, 245;
  --bs-dark-rgb:      42, 49, 73;

  /* --- Base do documento --- */
  --bs-body-font-family: var(--font);
  --bs-body-font-size:   var(--fs-body);
  --bs-body-line-height: var(--lh-body);
  --bs-body-color:       var(--text-body);
  --bs-body-color-rgb:   86, 94, 112;
  --bs-body-bg:          var(--app-bg);
  --bs-emphasis-color:   var(--text-strong);
  --bs-heading-color:    var(--text-strong);

  /* .text-muted é usado como texto de apoio de verdade (>300 ocorrências), não
     só como legenda. O --text-muted da referência dá 2,7:1 sobre o branco, então
     aqui entra um tom mais escuro (4,9:1) — o token original segue valendo para
     rótulos e captions das tabelas. */
  --text-muted-strong: #6E717C;
  --bs-secondary-color: var(--text-muted-strong);
  --bs-tertiary-color:  var(--text-muted);

  /* --- Bordas, raios e foco --- */
  --bs-border-color:        var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-border-radius:       var(--radius-sm);
  --bs-border-radius-sm:    8px;
  --bs-border-radius-lg:    var(--radius-md);
  --bs-border-radius-xl:    var(--radius-lg);
  --bs-border-radius-2xl:   var(--radius-lg);
  --bs-border-radius-pill:  var(--radius-pill);
  --bs-focus-ring-color:    rgba(229, 130, 79, 0.25);
  --bs-focus-ring-width:    3px;

  /* --- Links --- */
  --bs-link-color:           var(--coral-700);
  --bs-link-color-rgb:       168, 85, 41;
  --bs-link-hover-color:     var(--coral-500);
  --bs-link-hover-color-rgb: 229, 130, 79;

  /* Tons escurecidos o bastante para carregar texto branco (≥4,5:1). */
  --success-solid: #3B7F60;
  --danger-solid:  #C0483C;
}

/* ---------------------------------------------------------------------------
   Tipografia
   --------------------------------------------------------------------------- */

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h2); }
h4, h5, h6, .h4, .h5, .h6 { color: var(--text-strong); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Botões — pílula, sem gradiente, com os estados do Bootstrap preservados
   (btn-sm, disabled e foco continuam funcionando porque tudo passa por --bs-btn-*)
   --------------------------------------------------------------------------- */

.btn {
  --bs-btn-font-family: var(--font);
  --bs-btn-font-size: var(--fs-label);
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--radius-pill);
  --bs-btn-padding-x: 18px;
  --bs-btn-padding-y: 9px;
  --bs-btn-focus-shadow-rgb: 229, 130, 79;
  --bs-btn-disabled-opacity: 0.5;
}

.btn-sm {
  --bs-btn-font-size: var(--fs-caption);
  --bs-btn-padding-x: 14px;
  --bs-btn-padding-y: 6px;
  --bs-btn-border-radius: var(--radius-pill);
}

.btn-lg {
  --bs-btn-font-size: var(--fs-body);
  --bs-btn-padding-x: 24px;
  --bs-btn-padding-y: 11px;
  --bs-btn-border-radius: var(--radius-pill);
}

.btn-primary {
  --bs-btn-color: var(--text-on-coral);
  --bs-btn-bg: var(--coral-400);
  --bs-btn-border-color: var(--coral-400);
  --bs-btn-hover-color: var(--text-on-coral);
  --bs-btn-hover-bg: var(--coral-500);
  --bs-btn-hover-border-color: var(--coral-500);
  --bs-btn-active-color: var(--text-on-coral);
  --bs-btn-active-bg: var(--coral-500);
  --bs-btn-active-border-color: var(--coral-500);
  --bs-btn-disabled-color: var(--text-on-coral);
  --bs-btn-disabled-bg: var(--coral-200);
  --bs-btn-disabled-border-color: var(--coral-200);
}

/* .btn-secondary é quase sempre "Cancelar": vira o neutro discreto. */
.btn-secondary {
  --bs-btn-color: var(--text-strong);
  --bs-btn-bg: var(--white);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--text-strong);
  --bs-btn-hover-bg: var(--navy-50);
  --bs-btn-hover-border-color: var(--navy-200);
  --bs-btn-active-color: var(--text-strong);
  --bs-btn-active-bg: var(--navy-50);
  --bs-btn-active-border-color: var(--navy-200);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-bg: var(--white);
  --bs-btn-disabled-border-color: var(--border);
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--success-solid);
  --bs-btn-border-color: var(--success-solid);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #336C51;
  --bs-btn-hover-border-color: #336C51;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #336C51;
  --bs-btn-active-border-color: #336C51;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--success);
  --bs-btn-disabled-border-color: var(--success);
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--danger-solid);
  --bs-btn-border-color: var(--danger-solid);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #A93C31;
  --bs-btn-hover-border-color: #A93C31;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #A93C31;
  --bs-btn-active-border-color: #A93C31;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--danger);
  --bs-btn-disabled-border-color: var(--danger);
}

/* Amarelo com texto escuro: branco sobre este tom não passa em contraste. */
.btn-warning {
  --bs-btn-color: var(--text-on-coral);
  --bs-btn-bg: var(--warning);
  --bs-btn-border-color: var(--warning);
  --bs-btn-hover-color: var(--text-on-coral);
  --bs-btn-hover-bg: #C28821;
  --bs-btn-hover-border-color: #C28821;
  --bs-btn-active-color: var(--text-on-coral);
  --bs-btn-active-bg: #C28821;
  --bs-btn-active-border-color: #C28821;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--navy-600);
  --bs-btn-border-color: var(--navy-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--navy-700);
  --bs-btn-hover-border-color: var(--navy-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--navy-700);
  --bs-btn-active-border-color: var(--navy-700);
}

.btn-light {
  --bs-btn-color: var(--text-strong);
  --bs-btn-bg: var(--navy-50);
  --bs-btn-border-color: var(--navy-50);
  --bs-btn-hover-color: var(--text-strong);
  --bs-btn-hover-bg: var(--navy-200);
  --bs-btn-hover-border-color: var(--navy-200);
}

.btn-outline-primary {
  --bs-btn-color: var(--coral-700);
  --bs-btn-border-color: var(--coral-300);
  --bs-btn-hover-color: var(--text-on-coral);
  --bs-btn-hover-bg: var(--coral-400);
  --bs-btn-hover-border-color: var(--coral-400);
  --bs-btn-active-color: var(--text-on-coral);
  --bs-btn-active-bg: var(--coral-500);
  --bs-btn-active-border-color: var(--coral-500);
  --bs-btn-disabled-color: var(--coral-300);
  --bs-btn-disabled-border-color: var(--coral-200);
}

.btn-outline-secondary {
  --bs-btn-color: var(--text-body);
  --bs-btn-border-color: var(--navy-200);
  --bs-btn-hover-color: var(--text-strong);
  --bs-btn-hover-bg: var(--navy-50);
  --bs-btn-hover-border-color: var(--navy-400);
  --bs-btn-active-color: var(--text-strong);
  --bs-btn-active-bg: var(--navy-50);
  --bs-btn-active-border-color: var(--navy-400);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-border-color: var(--border);
}

.btn-outline-success {
  --bs-btn-color: var(--success-solid);
  --bs-btn-border-color: var(--success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--success-solid);
  --bs-btn-hover-border-color: var(--success-solid);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--success-solid);
  --bs-btn-active-border-color: var(--success-solid);
}

.btn-outline-danger {
  --bs-btn-color: var(--danger-solid);
  --bs-btn-border-color: #E8A79F;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--danger-solid);
  --bs-btn-hover-border-color: var(--danger-solid);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--danger-solid);
  --bs-btn-active-border-color: var(--danger-solid);
}

.btn-outline-warning {
  --bs-btn-color: #8A6115;
  --bs-btn-border-color: var(--warning);
  --bs-btn-hover-color: var(--text-on-coral);
  --bs-btn-hover-bg: var(--warning);
  --bs-btn-hover-border-color: var(--warning);
  --bs-btn-active-color: var(--text-on-coral);
  --bs-btn-active-bg: var(--warning);
  --bs-btn-active-border-color: var(--warning);
}

.btn-outline-info {
  --bs-btn-color: var(--navy-600);
  --bs-btn-border-color: var(--navy-200);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--navy-600);
  --bs-btn-hover-border-color: var(--navy-600);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--navy-600);
  --bs-btn-active-border-color: var(--navy-600);
}

.btn-link {
  --bs-btn-color: var(--coral-700);
  --bs-btn-hover-color: var(--coral-500);
  --bs-btn-font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Formulários
   --------------------------------------------------------------------------- */

.form-label {
  color: var(--text-strong);
  font-size: var(--fs-label);
  font-weight: 500;
  margin-bottom: 6px;
}

.form-text { color: var(--text-muted-strong); font-size: var(--fs-caption); }

.form-control,
.form-select {
  font-family: var(--font);
  font-size: var(--fs-label);
  color: var(--text-body);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
}

/* O padding-right do select guarda o espaco da seta — shorthand aqui a cobriria. */
.form-select { padding-right: 36px; }

.form-control-sm,
.form-select-sm {
  font-size: var(--fs-caption);
  border-radius: 8px;
  padding: 6px 12px;
}

.form-select-sm { padding-right: 30px; }

.form-control::placeholder { color: var(--text-muted); }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--navy-200); }

.form-control:focus,
.form-select:focus {
  border-color: var(--coral-400);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
  color: var(--text-strong);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--navy-50);
  color: var(--text-muted-strong);
}

.form-check-input { border-color: var(--navy-200); }
.form-check-input:checked {
  background-color: var(--coral-400);
  border-color: var(--coral-400);
}
.form-check-input:focus {
  border-color: var(--coral-400);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}
.form-check-label { font-size: var(--fs-label); }

.input-group-text {
  background-color: var(--navy-50);
  border-color: var(--border);
  color: var(--text-muted-strong);
  font-size: var(--fs-label);
  border-radius: var(--radius-sm);
}

/* Estados de validação do Blazor (classes .valid/.invalid vêm do EditForm). */
.valid.modified:not([type=checkbox]) { outline: none; border-color: var(--success); }
.invalid { outline: none; border-color: var(--danger); }
.validation-message { color: var(--danger); font-size: var(--fs-caption); }

/* ---------------------------------------------------------------------------
   Tabelas — mesma linguagem do tables-acero.css, aplicada ao .table do Bootstrap

   border-collapse: separate permite arredondar o cabeçalho. .table-bordered
   volta para collapse, senão as bordas de células vizinhas dobram.
   --------------------------------------------------------------------------- */

.table {
  --bs-table-color: var(--text-body);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: rgba(238, 240, 245, 0.5);
  --bs-table-striped-color: var(--text-body);
  --bs-table-hover-bg: var(--navy-50);
  --bs-table-hover-color: var(--text-strong);
  --bs-table-active-bg: var(--coral-50);

  font-size: var(--fs-label);
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}

.table > thead > tr > th {
  background-color: var(--navy-50);
  color: var(--text-muted-strong);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  text-transform: none;
  border-bottom: none;
  padding: 10px var(--sp-4);
  white-space: nowrap;
}

.table > thead > tr > th:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.table > thead > tr > th:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.table > tbody > tr > td,
.table > tbody > tr > th {
  border-bottom: 1px solid var(--border);
  padding: 11px var(--sp-4);
}

.table > tbody > tr:last-child > td { border-bottom-color: transparent; }

.table-sm > thead > tr > th,
.table-sm > tbody > tr > td { padding: 7px 10px; }

.table-bordered { border-collapse: collapse; }
.table-bordered > :not(caption) > * > * { border-color: var(--border); }
.table-bordered > thead > tr > th:first-child,
.table-bordered > thead > tr > th:last-child { border-radius: 0; }

/* Rolagem horizontal sem cortar o arredondamento do cabeçalho. */
.table-responsive { border-radius: var(--radius-md); }

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.card {
  --bs-card-bg: var(--card-bg);
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-card-spacer-x: var(--sp-6);
  --bs-card-spacer-y: var(--sp-5);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-color: var(--text-strong);
  --bs-card-color: var(--text-body);
  box-shadow: var(--shadow-card);
}

.card-header {
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-strong);
}

.card-footer { border-top: 1px solid var(--border); background: transparent; }
.card-title { color: var(--text-strong); font-size: var(--fs-h2); }
.card-subtitle, .card-text small { color: var(--text-muted-strong); }

/* ---------------------------------------------------------------------------
   Modais — as telas montam o modal à mão (.modal.show.d-block + backdrop inline)
   --------------------------------------------------------------------------- */

.modal-content {
  --bs-modal-bg: var(--white);
  --bs-modal-border-color: transparent;
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-modal-padding: var(--sp-6);
  --bs-modal-header-padding: var(--sp-5) var(--sp-6);
  --bs-modal-header-border-color: var(--border);
  --bs-modal-footer-border-color: var(--border);
  box-shadow: var(--shadow-raised);
}

.modal-title { font-size: var(--fs-h2); color: var(--text-strong); font-weight: 600; }
.modal-footer { gap: var(--sp-2); }
.modal-footer > * { margin: 0; }

/* ---------------------------------------------------------------------------
   Abas (nav-tabs) — usadas nos cadastros de aluno, responsável e funcionário
   --------------------------------------------------------------------------- */

.nav-tabs {
  --bs-nav-tabs-border-color: var(--border);
  --bs-nav-tabs-border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  --bs-nav-tabs-link-hover-border-color: var(--border) var(--border) var(--border);
  --bs-nav-tabs-link-active-color: var(--text-strong);
  --bs-nav-tabs-link-active-bg: var(--card-bg);
  --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--card-bg);
  --bs-nav-link-color: var(--text-muted-strong);
  --bs-nav-link-hover-color: var(--text-strong);
  --bs-nav-link-font-size: var(--fs-label);
  --bs-nav-link-font-weight: 500;
}

.nav-tabs .nav-link.active { box-shadow: inset 0 2px 0 var(--coral-400); }

.nav-pills {
  --bs-nav-pills-border-radius: var(--radius-pill);
  --bs-nav-pills-link-active-color: var(--text-on-coral);
  --bs-nav-pills-link-active-bg: var(--coral-400);
  --bs-nav-link-color: var(--text-body);
  --bs-nav-link-hover-color: var(--text-strong);
}

/* ---------------------------------------------------------------------------
   Badges, alertas, listas e dropdowns
   --------------------------------------------------------------------------- */

.badge {
  --bs-badge-border-radius: var(--radius-pill);
  --bs-badge-font-size: var(--fs-caption);
  --bs-badge-font-weight: 500;
  --bs-badge-padding-x: 10px;
  --bs-badge-padding-y: 4px;
}

/* Badge de utilitário (.badge.bg-success e afins) precisa de tom sólido
   para o texto branco padrão do Bootstrap continuar legível. */
.badge.bg-success { background-color: var(--success-solid) !important; }
.badge.bg-danger  { background-color: var(--danger-solid)  !important; }
.badge.bg-warning { background-color: var(--warning) !important; color: var(--text-on-coral) !important; }
.badge.bg-primary { background-color: var(--coral-400) !important; color: var(--text-on-coral) !important; }
.badge.bg-secondary { background-color: var(--navy-400) !important; }
.badge.bg-info    { background-color: var(--navy-600) !important; }
.badge.bg-light   { background-color: var(--navy-50) !important; color: var(--text-strong) !important; }

.alert {
  --bs-alert-border-radius: var(--radius-md);
  --bs-alert-padding-x: var(--sp-5);
  --bs-alert-padding-y: var(--sp-4);
  font-size: var(--fs-label);
  border-width: 1px;
}

.alert-success { --bs-alert-color: #2E6349; --bs-alert-bg: var(--success-bg); --bs-alert-border-color: #C6E3D6; }
.alert-danger  { --bs-alert-color: #96382E; --bs-alert-bg: var(--danger-bg);  --bs-alert-border-color: #F2CFC9; }
.alert-warning { --bs-alert-color: #8A6115; --bs-alert-bg: var(--warning-bg); --bs-alert-border-color: #EFDCB4; }
.alert-info    { --bs-alert-color: var(--navy-700); --bs-alert-bg: var(--navy-50); --bs-alert-border-color: var(--navy-200); }

.list-group {
  --bs-list-group-bg: var(--card-bg);
  --bs-list-group-border-color: var(--border);
  --bs-list-group-border-radius: var(--radius-md);
  --bs-list-group-color: var(--text-body);
  --bs-list-group-action-hover-bg: var(--navy-50);
  --bs-list-group-active-bg: var(--coral-400);
  --bs-list-group-active-border-color: var(--coral-400);
  --bs-list-group-active-color: var(--text-on-coral);
  font-size: var(--fs-label);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--white);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--radius-md);
  --bs-dropdown-link-hover-bg: var(--navy-50);
  --bs-dropdown-link-active-bg: var(--coral-400);
  --bs-dropdown-link-active-color: var(--text-on-coral);
  --bs-dropdown-font-size: var(--fs-label);
  box-shadow: var(--shadow-raised);
}

.pagination {
  --bs-pagination-color: var(--text-body);
  --bs-pagination-bg: var(--white);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-border-radius: var(--radius-sm);
  --bs-pagination-hover-bg: var(--navy-50);
  --bs-pagination-hover-border-color: var(--navy-200);
  --bs-pagination-active-bg: var(--coral-400);
  --bs-pagination-active-border-color: var(--coral-400);
  --bs-pagination-active-color: var(--text-on-coral);
  --bs-pagination-font-size: var(--fs-caption);
}

.progress { --bs-progress-bg: var(--navy-50); --bs-progress-border-radius: var(--radius-pill); }
.progress-bar { background-color: var(--coral-400); font-size: var(--fs-caption); }

/* Mesma razao dos badges: a barra carrega texto branco por cima. */
.progress-bar.bg-success { background-color: var(--success-solid) !important; }
.progress-bar.bg-danger  { background-color: var(--danger-solid)  !important; }
.progress-bar.bg-warning { background-color: var(--warning) !important; color: var(--text-on-coral); }

.spinner-border, .spinner-grow { color: var(--coral-400); }

/* .bg-light do Bootstrap é usado como superfície neutra em algumas telas. */
.bg-light { background-color: var(--navy-50) !important; }

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