/* CRM / Matrículas — implementado a partir do design em
   claude.ai/design (Matriculas.dc.html). Cores exatas do mockup (oklch,
   suportado nativamente pelos navegadores usados aqui). Namespace .mat-
   próprio pra não herdar nada do resto do Passo 365. */

.mat { font-family: 'Inter', sans-serif; color: oklch(0.25 0.01 90); }

.mat-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.mat-toolbar input[type="text"], .mat-toolbar input[type="search"] {
  flex: 1; min-width: 220px; padding: 9px 14px; border: 1px solid oklch(0.88 0.006 90);
  border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; color: inherit;
}
.mat-toolbar select, .mat-toolbar input[type="date"] {
  padding: 9px 12px; border: 1px solid oklch(0.88 0.006 90); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff; color: inherit;
}
.mat-toolbar__clear {
  padding: 9px 14px; border: 1px solid oklch(0.88 0.006 90); border-radius: 8px; background: #fff;
  font-size: 13px; font-weight: 600; color: oklch(0.5 0.01 90); cursor: pointer; font-family: inherit;
}
.mat-toolbar__new {
  background: oklch(0.32 0.08 250); color: #fff; border: none; border-radius: 8px;
  padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap;
}

.mat-resumo { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.mat-resumo__card { flex: 1; min-width: 150px; background: #fff; border: 1px solid oklch(0.92 0.006 90); border-radius: 10px; padding: 14px 16px; border-top: 3px solid var(--c); }
.mat-resumo__total { font-size: 26px; font-weight: 800; color: var(--c); }
.mat-resumo__label { font-size: 12.5px; color: oklch(0.5 0.01 90); font-weight: 600; margin-top: 2px; }

.mat-board { display: flex; gap: 10px; overflow-x: auto; overflow-y: visible; padding-bottom: 8px; }
.mat-col { min-width: 205px; width: 205px; flex: none; background: oklch(0.97 0.004 90); border-radius: 10px; display: flex; flex-direction: column; }
.mat-col__head { padding: 10px 10px 8px; border-bottom: 2px solid var(--c); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mat-col__label { font-size: 11px; font-weight: 800; letter-spacing: .01em; color: var(--c); text-transform: uppercase; }
.mat-col__count { background: var(--cc); color: var(--c); font-weight: 700; font-size: 11px; border-radius: 20px; padding: 1px 7px; flex: none; }
.mat-col__body { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mat-col__empty { text-align: center; padding: 20px 6px; font-size: 11.5px; color: oklch(0.65 0.01 90); }

.mat-card { background: #fff; border: 1px solid oklch(0.92 0.006 90); border-radius: 8px; padding: 9px; cursor: pointer; box-shadow: 0 1px 2px oklch(0.2 0 0 / 0.04); }
.mat-card:hover { border-color: oklch(0.75 0.01 90); }
.mat-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 5px; }
.mat-card__nome { font-weight: 700; font-size: 12.5px; color: oklch(0.25 0.01 90); }
.mat-nome-bloqueado { display: inline-block; border: 2px solid var(--danger); border-radius: 6px; padding: 0 5px; }
.mat-card__atrasado { background: oklch(0.6 0.19 25 / 0.12); color: oklch(0.5 0.19 25); font-size: 9.5px; font-weight: 700; border-radius: 6px; padding: 1px 5px; white-space: nowrap; flex: none; }
.mat-card__meta { font-size: 11px; color: oklch(0.5 0.01 90); margin-top: 4px; }
.mat-card__tags { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; margin-top: 6px; }
.mat-card__tag { background: oklch(0.55 0.15 250 / 0.1); color: oklch(0.4 0.15 250); font-size: 9px; font-weight: 700; border-radius: 5px; padding: 1px 5px; white-space: nowrap; }
.mat-card__tag--more { background: oklch(0.9 0.006 90); color: oklch(0.5 0.01 90); }

.mat-overlay { position: fixed; inset: 0; background: oklch(0.2 0.01 90 / 0.45); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 500; }
.mat-modal { background: #fff; border-radius: 16px; max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px oklch(0.2 0 0 / 0.25); }
.mat-modal--sm { max-width: 440px; }
.mat-modal__head { padding: 22px 26px; border-bottom: 1px solid oklch(0.92 0.006 90); display: flex; justify-content: space-between; align-items: flex-start; position: sticky; top: 0; background: #fff; }
.mat-modal__title { font-size: 19px; font-weight: 800; }
.mat-modal__sub { font-size: 13px; color: oklch(0.5 0.01 90); margin-top: 3px; }
.mat-modal__close { border: none; background: oklch(0.95 0.004 90); width: 30px; height: 30px; border-radius: 8px; font-size: 16px; cursor: pointer; color: oklch(0.4 0.01 90); }
.mat-modal__body { padding: 22px 26px; display: flex; flex-direction: column; gap: 20px; }

.mat-etapa { display: flex; align-items: center; gap: 10px; }
.mat-etapa__label { font-size: 12.5px; font-weight: 700; color: oklch(0.5 0.01 90); min-width: 70px; }
.mat-etapa select { padding: 7px 12px; border-radius: 8px; border: 1px solid oklch(0.88 0.006 90); font-size: 13.5px; font-weight: 600; font-family: inherit; background: #fff; }

.mat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mat-tag-chip { display: inline-flex; align-items: center; gap: 5px; background: oklch(0.55 0.15 250 / 0.1); color: oklch(0.4 0.15 250); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 6px 4px 10px; }
.mat-tag-chip button { border: none; background: oklch(0.55 0.15 250 / 0.18); color: inherit; width: 16px; height: 16px; border-radius: 50%; font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.mat-tag-chip button:hover { background: oklch(0.55 0.15 250 / 0.3); }

.mat-checkbox-box { border-radius: 10px; padding: 14px 16px; }
.mat-checkbox-box--doc { background: oklch(0.75 0.15 85 / 0.1); border: 1px solid oklch(0.75 0.15 85 / 0.3); }
.mat-checkbox-box--doc .mat-checkbox-box__title { color: oklch(0.5 0.13 80); }
.mat-checkbox-box--pen { background: oklch(0.6 0.14 145 / 0.08); border: 1px solid oklch(0.6 0.14 145 / 0.3); }
.mat-checkbox-box--pen .mat-checkbox-box__title { color: oklch(0.42 0.13 145); }
.mat-checkbox-box--transf { background: oklch(0.65 0.16 55 / 0.1); border: 1px solid oklch(0.65 0.16 55 / 0.3); }
.mat-checkbox-box--transf .mat-checkbox-box__title { color: oklch(0.48 0.15 55); }
.mat-checkbox-box__title { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.mat-checkbox-box label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 4px 0; cursor: pointer; }
.mat-checkbox-box .done { text-decoration: line-through; color: oklch(0.55 0.01 90); }

.mat-section-title { font-size: 12.5px; font-weight: 800; color: oklch(0.5 0.01 90); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.mat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 13.5px; }
.mat-grid .full { grid-column: 1 / -1; }
.mat-grid .k { color: oklch(0.55 0.01 90); }
.mat-grid input, .mat-grid select { width: 100%; padding: 7px 10px; border: 1px solid oklch(0.88 0.006 90); border-radius: 7px; font-size: 13px; font-family: inherit; }

.mat-btn-remove { align-self: flex-start; border: 1px solid oklch(0.6 0.19 25 / 0.4); background: oklch(0.6 0.19 25 / 0.06); color: oklch(0.5 0.19 25); padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.mat-btn-secondary { border: 1px solid oklch(0.88 0.006 90); background: #fff; color: oklch(0.4 0.01 90); padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.mat-btn-primary { background: oklch(0.32 0.08 250); color: #fff; border: none; border-radius: 8px; padding: 10px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; }

.mat-form { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.mat-form input, .mat-form select { padding: 10px 12px; border: 1px solid oklch(0.88 0.006 90); border-radius: 8px; font-size: 14px; font-family: inherit; }

/* Tipo de matrícula — botões que marcam mais de um ao mesmo tempo (ex: aluno
   matriculado no Regular e no Bilíngue simultaneamente), não um select único. */
.mat-tipo-toggle { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mat-tipo-toggle__btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; border: 1.5px solid oklch(0.88 0.006 90); color: oklch(0.4 0.01 90); cursor: pointer; user-select: none; transition: background .12s, border-color .12s, color .12s; }
.mat-tipo-toggle__btn input { display: none; }
.mat-tipo-toggle__btn:has(input:checked) { background: var(--c); border-color: var(--c); color: #fff; }

@media (max-width: 700px) {
  .mat-grid { grid-template-columns: 1fr; }
}