/* design-system.css — componentes de conteúdo (forms, tables, sections, etc.) Tokens vêm de _BrandingStyles.cshtml. Chrome (sidebar/main-panel) está em floating-glass.css. */ /* ---------- Page head (renomeado de .head do redesign para não colidir com ) ---------- */ .page-head { padding: 0 26px 18px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border-subtle); } /* Alinha o cabeçalho à esquerda com o conteúdo abaixo (ex.: home do aluno). */ .page-head.flush-left { padding-left: 0; } .page-head .titlerow { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .page-head h1 { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -0.015em; } .page-head .sub { font-size: 13px; color: var(--fg-subtle); margin-top: 2px; } .page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } @media (max-width: 767px) { .page-head .actions.form-head-actions { display: none; } } /* ---------- Buttons ---------- */ .btn { height: 36px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); text-decoration: none; transition: all .12s; font-family: inherit; white-space: nowrap; } /* color tem que ser explicito aqui — bootstrap.css define --bs-btn-hover-color: #fff pra .btn (linha ~11864) e o seletor .btn:hover dele (especificidade 0,2,0) ganharia do nosso .btn { color } (0,1,0). Sem isso, qualquer .btn neutro (Cancelar, etc) fica com texto branco no hover, sumindo no fundo claro. Variants (.btn.primary, .btn.danger) tem regra propria depois e nao sao afetadas. */ .btn:hover { background: var(--surface-soft); color: var(--fg); } .btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; box-shadow: 0 1px 2px rgba(15,23,42,.10); } .btn.primary:hover { filter: brightness(1.08); } .btn.success { background: var(--success); color: #fff; border-color: transparent; } .btn.success:hover { filter: brightness(1.08); } .btn.danger { color: var(--danger); border-color: oklch(85% 0.10 25); } .btn.danger:hover { background: oklch(96% 0.04 25); } .btn.danger.ghost { border-color: transparent; background: transparent; } .btn.danger.ghost:hover { background: oklch(96% 0.04 25); border-color: oklch(85% 0.10 25); } .btn.sm { height: 30px; padding: 0 10px; font-size: 12px; } .btn.icon-only { width: 36px; padding: 0; justify-content: center; } .btn.icon-only.sm { width: 30px; } .btn.ghost { background: transparent; border-color: transparent; } .btn.ghost:hover { background: var(--surface-soft); } .btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; filter: none !important; box-shadow: none; } .btn:disabled:hover, .btn[disabled]:hover { background: var(--surface); filter: none; } .btn.primary:disabled, .btn.primary[disabled] { background: var(--accent); color: var(--accent-fg); } /* ---------- Toolbar + search ---------- */ .toolbar { padding: 14px 26px; margin: 14px 0 0; display: flex; gap: 12px; align-items: center; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); flex-wrap: wrap; } .search-wrap { position: relative; flex: 1; max-width: 460px; min-width: 240px; } .search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fg-subtle); pointer-events: none; } .search-wrap input { width: 100%; height: 38px; padding: 0 12px 0 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; color: var(--fg); outline: none; transition: all .12s; } .search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .toolbar .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; } /* ---------- Section ---------- */ .section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); } .section-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 8px; /* Light: tinta accent saturada pra dar contraste forte entre o cabecalho e o corpo da secao. Dark sobrescreve abaixo. */ background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-subtle)); } body.theme-dark .section-head { background: var(--surface-soft); } .section-head .ico { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .section-head .ico.danger { background: oklch(96% 0.04 25); color: var(--danger); } .section-head h2 { font-size: 14.5px; font-weight: 600; margin: 0; letter-spacing: -0.005em; } .section-head .desc { font-size: 12px; color: var(--fg-subtle); margin-top: 1px; } .section-head .actions { margin-left: auto; } .section-body { padding: 18px; } /* ---------- Form grid ---------- */ .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .fgrid.two { grid-template-columns: 1fr 1fr; padding: 18px; } .fgrid .full { grid-column: 1 / -1; } .form-page { padding: 0 10px; } @media (max-width: 767px) { .form-page { padding: 0 10px; overflow-x: clip; } .fgrid.two { padding: 14px; } } .field { display: flex; flex-direction: column; gap: 6px; /* Sem isso, grid items default a min-width: auto = min-content; selects/inputs com placeholder longo (ex: "— Sem recebedor cadastrado —") empurram a track do .fgrid pra além do viewport, criando scroll horizontal em mobile. */ min-width: 0; } .field > label { font-size: 12.5px; font-weight: 500; color: var(--fg-muted); } .field > label .req { color: var(--danger); margin-left: 2px; } .field > .hint { font-size: 11.5px; color: var(--fg-subtle); } .input, .select, textarea.input { height: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; color: var(--fg); outline: none; transition: all .12s; width: 100%; /* min-width:0 deixa o input encolher dentro de flex/grid (default em inputs e auto, baseado no placeholder/value, o que estoura grids em mobile). */ min-width: 0; font-family: inherit; } .input-group { min-width: 0; } textarea.input { height: auto; padding: 10px 12px; min-height: 80px; resize: vertical; line-height: 1.5; } /* Variante de textarea que ocupa todo o espaço do card body (usada no card "Observações" do Lead/Form quando não há label/desc lateral). */ textarea.input.observacoes-fill { min-height: 240px; height: 240px; } .input:focus, .select:focus, textarea.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; cursor: pointer; } .input-group { position: relative; } .input-group .prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--fg-subtle); pointer-events: none; display: inline-flex; } .input-group .input { padding-left: 34px; } .input-group .suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--fg-subtle); } /* Par de campos "de X até Y" (ex.: faixa etária) — uma linha no desktop */ .range-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; } .range-pair .between { font-size: 12px; color: var(--fg-subtle); } .input-group .input.with-suffix { padding-right: 50px; } /* ---------- Toggle (checkbox custom) ---------- */ .toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--fg); } .toggle input[type=checkbox] { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--accent); } /* ---------- Table ---------- */ .table-wrap { overflow-x: auto; } /* Scroll fino com a cor do .section-head (accent 22%, mesmo padrao da sidebar). */ .table-wrap { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 22%, var(--surface)) transparent; } .table-wrap::-webkit-scrollbar { height: 6px; width: 6px; } .table-wrap::-webkit-scrollbar-track { background: transparent; } .table-wrap::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border-radius: 999px; } .table-wrap::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 40%, var(--surface)); } .table { width: 100%; border-collapse: collapse; /* Neutraliza tokens do Bootstrap (.table > :not(caption) > * > * aplica bg/color com especificidade maior que .table td). Sem isso, em dark mode as linhas ficam brancas porque --bs-table-bg vem de --bs-body-bg = #fff. */ --bs-table-bg: transparent; --bs-table-color: inherit; --bs-table-color-type: initial; --bs-table-bg-type: initial; --bs-table-color-state: initial; --bs-table-bg-state: initial; --bs-table-border-color: var(--border-subtle); color: var(--fg); } .table th { font-size: 11.5px; font-weight: 600; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-soft); } .table th.right { text-align: right; } .table td { padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); font-size: 13.5px; vertical-align: middle; } .table td.right { text-align: right; } .table tr:last-child td { border-bottom: none; } .table tr:hover td { background: var(--surface-soft); } /* ---------- Avatar ---------- */ .avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; flex-shrink: 0; } .avatar.lg { width: 40px; height: 40px; font-size: 13px; } /* ---------- Badges ---------- */ .badge { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: .04em; } .badge.dot::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: currentColor; } .badge.ok { background: oklch(96% 0.04 145); color: oklch(38% 0.13 145); } .badge.warn { background: oklch(96% 0.06 70); color: oklch(40% 0.13 70); } .badge.danger { background: oklch(96% 0.04 25); color: oklch(40% 0.16 25); } .badge.info { background: var(--accent-soft); color: var(--accent); } .badge.muted { background: var(--surface-soft); color: var(--fg-muted); border: 1px solid var(--border-subtle); } /* Theme dark — fundos coloridos das badges precisam de override porque oklch(96% ...) é claro demais sobre surface escuro. */ body.theme-dark .badge.ok { background: color-mix(in srgb, var(--success) 22%, var(--surface)); color: color-mix(in srgb, var(--success) 80%, var(--fg)); } body.theme-dark .badge.warn { background: color-mix(in srgb, var(--warning) 22%, var(--surface)); color: color-mix(in srgb, var(--warning) 80%, var(--fg)); } body.theme-dark .badge.danger { background: color-mix(in srgb, var(--danger) 22%, var(--surface)); color: color-mix(in srgb, var(--danger) 80%, var(--fg)); } body.theme-dark .badge.info { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: color-mix(in srgb, var(--accent) 80%, var(--fg)); } /* ---------- Pag + footbar + alert + empty ---------- */ .pag { padding: 14px 26px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border-subtle); background: var(--surface-soft); font-size: 13px; color: var(--fg-muted); } .footbar { padding: 14px 26px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border-subtle); background: var(--surface-soft); z-index: 10; } .footbar .left, .footbar .right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .footbar .left:empty { display: none; } /* Botões de ação sempre à direita, mesmo quando .left está vazio/oculto (sem isso, justify-content:space-between joga o grupo único para a esquerda). */ .footbar .right { margin-left: auto; } .alert { padding: 12px 14px; border-radius: 10px; display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; margin-bottom: 14px; } .alert.warn, .alert.warning { background: oklch(96% 0.06 70); border: 1px solid oklch(88% 0.08 70); color: oklch(35% 0.13 70); } .alert.info { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-subtle)); color: var(--accent); } .alert.danger { background: oklch(96% 0.04 25); border: 1px solid oklch(88% 0.08 25); color: oklch(40% 0.16 25); } .alert.success { background: oklch(96% 0.06 145); border: 1px solid oklch(88% 0.10 145); color: oklch(38% 0.14 145); } .alert svg { flex-shrink: 0; margin-top: 1px; } .empty { padding: 60px 26px; text-align: center; } .empty .ico { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .empty h3, .empty .title { font-size: 17px; font-weight: 600; margin: 0; } .empty p, .empty .sub { font-size: 13.5px; color: var(--fg-muted); margin: 4px 0 18px; } /* ---------- Filter chip (botão tipo .pill, mas com nome alternativo usado em Pagamento) ---------- */ .chip { background: var(--surface); border: 1px solid var(--border); color: var(--fg-muted); font-size: 12px; font-weight: 500; height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-family: inherit; transition: all .12s; } .chip:hover { background: var(--surface-soft); color: var(--fg); } .chip.active { background: var(--accent); border-color: transparent; color: var(--accent-fg); } .chip .count { font-size: 10.5px; font-weight: 700; background: rgba(0,0,0,.08); color: inherit; padding: 1px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; } .chip.active .count { background: rgba(255,255,255,.20); } /* Variantes coloridas dos chips (cor de estado, mesmo quando não-active) */ .chip.ok { background: oklch(96% 0.04 145); color: oklch(38% 0.13 145); border-color: oklch(88% 0.08 145); } .chip.ok:hover { background: oklch(94% 0.06 145); } .chip.ok.active { background: oklch(38% 0.13 145); color: #fff; border-color: transparent; } .chip.warn { background: oklch(96% 0.06 70); color: oklch(40% 0.13 70); border-color: oklch(88% 0.08 70); } .chip.warn:hover { background: oklch(94% 0.08 70); } .chip.warn.active { background: oklch(40% 0.13 70); color: #fff; border-color: transparent; } .chip.danger { background: oklch(96% 0.04 25); color: oklch(40% 0.16 25); border-color: oklch(88% 0.08 25); } .chip.danger:hover { background: oklch(94% 0.06 25); } .chip.danger.active { background: oklch(40% 0.16 25); color: #fff; border-color: transparent; } /* ---------- Mobile ---------- */ @media (max-width: 767px) { .fgrid { grid-template-columns: 1fr; } .range-pair { grid-template-columns: 1fr; gap: 6px; } .range-pair .between { text-align: center; padding: 2px 0; } .table-wrap .table { min-width: 720px; } /* Tabelas de poucas colunas estreitas: dispensam o min-width de 720px (que joga a ultima coluna para fora da tela) e usam padding horizontal reduzido. */ .table-wrap .table.table--compact { min-width: 0; } .table.table--compact th, .table.table--compact td { padding: 12px 10px; } /* Padrão mobile: botões de ação empilhados, centralizados e preenchendo a largura. Sem zerar o margin-left:auto e esticar .left/.right, os grupos flex (row) não ocupam a largura toda e os botões não preenchem o card. */ .footbar { flex-direction: column; align-items: stretch; gap: 8px; } .footbar .left, .footbar .right { width: 100%; margin-left: 0; flex-direction: column; gap: 8px; } .footbar .btn { width: 100%; justify-content: center; } .page-head { padding: 0 16px 14px; } .toolbar { padding: 12px 16px; } .section { margin-bottom: 10px; border-radius: 10px; } .section-head { padding: 12px 14px; flex-wrap: wrap; gap: 10px; } .section-head h2 { font-size: 13.5px; } .section-head .desc { font-size: 11.5px; } .section-head .actions { /* Em telas estreitas, os botoes do head viram pra linha de baixo em vez de empurrar o titulo pra fora do card. */ margin-left: 0; flex-basis: 100%; } .section-body { padding: 12px; } .pag { padding: 12px 16px; } } /* ---------- Grid de cards (3-col desktop, 2-col tablet, 1-col mobile) ---------- */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px 0; } @media (max-width: 1199px) and (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .grid { grid-template-columns: 1fr; padding: 14px 16px; } } /* ---------- Card de modalidade ---------- */ .card-modalidade { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 18px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .12s, box-shadow .12s, transform .12s; } .card-modalidade:hover { border-color: var(--accent); box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 16px rgba(15,23,42,.06); transform: translateY(-1px); } .card-modalidade-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; flex-shrink: 0; } .card-modalidade h3 { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -0.01em; color: var(--fg); } .card-modalidade .resumo { font-size: 12.5px; color: var(--fg-muted); margin: 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; } .card-modalidade .stats-inline { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-subtle); width: 100%; } .card-modalidade .stats-inline strong { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; } .card-modalidade .stats-inline .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--fg-subtle); } .card-modalidade .btn { align-self: stretch; justify-content: center; } /* ---------- Card de unidade ---------- */ .card-unidade { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .12s, box-shadow .12s, transform .12s; } .card-unidade:hover { border-color: var(--accent); box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 16px rgba(15,23,42,.06); transform: translateY(-1px); } .card-unidade .cover { height: 70px; position: relative; } .card-unidade .gps-badge { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.92); /* Cor fixa em ambos os temas: o fundo é sempre branco semi-transparente, então usar var(--fg) deixava o texto branco-no-branco em dark mode. */ color: #1c1917; text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 1px 2px rgba(15,23,42,.10); text-decoration: none; transition: transform .12s, box-shadow .12s; } a.gps-badge:hover { background: #fff; box-shadow: 0 2px 6px rgba(15,23,42,.18); transform: translateY(-1px); } .card-unidade .body { padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 4px; } .card-unidade .body h3 { font-size: 15.5px; font-weight: 600; margin: 0; letter-spacing: -0.01em; color: var(--fg); } .card-unidade .body .endereco { font-size: 12.5px; color: var(--fg-muted); margin: 0; display: flex; align-items: flex-start; gap: 5px; line-height: 1.4; } .card-unidade .body .endereco svg { color: var(--fg-subtle); flex-shrink: 0; margin-top: 2px; } .card-unidade .lock-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--success); margin-top: 2px; } .card-unidade .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-subtle); margin: 6px 0 0; } .card-unidade .stats-grid.two-col { grid-template-columns: repeat(2, 1fr); } .card-unidade .stats-grid .stat { background: var(--surface-soft); padding: 10px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; } .card-unidade .stats-grid .stat .num { font-size: 17px; font-weight: 700; color: var(--fg); line-height: 1.1; font-variant-numeric: tabular-nums; } .card-unidade .stats-grid .stat .lbl { font-size: 10.5px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; } .card-unidade .actions-row { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-top: 1px solid var(--border-subtle); } .card-unidade .actions-row .grow { flex: 1; justify-content: center; } /* ---------- Card de turma ---------- */ .card-turma { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color .12s, box-shadow .12s; } .card-turma:hover { border-color: var(--border); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.04); } .card-turma .top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .card-turma h3 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; } .card-turma .meta-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-muted); } .card-turma .meta-row svg { color: var(--fg-subtle); flex-shrink: 0; } .card-turma .horarios { display: flex; gap: 4px; flex-wrap: wrap; } .horario { background: var(--surface-soft); border: 1px solid var(--border-subtle); color: var(--fg-muted); font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 500; } .alunos-bar { background: var(--accent-soft); color: var(--accent); border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .alunos-bar .num { font-size: 22px; font-weight: 700; line-height: 1; } .alunos-bar .lbl { font-size: 11px; opacity: .85; margin-top: 2px; } .card-turma .actions-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; border-top: 1px solid var(--border-subtle); padding-top: 10px; flex-wrap: wrap; } .card-turma .actions-row .grow { flex: 1; } /* ---------- Filter pills ---------- */ .filter-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .pill { background: var(--surface); border: 1px solid var(--border); color: var(--fg-muted); font-size: 12px; font-weight: 500; height: 30px; padding: 0 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-family: inherit; transition: all .12s; } .pill:hover { background: var(--surface-soft); border-color: var(--border); color: var(--fg); } .pill.on { background: var(--accent); border-color: transparent; color: var(--accent-fg); } .pill .count { font-size: 10.5px; font-weight: 700; background: rgba(0,0,0,.10); color: inherit; padding: 1px 5px; border-radius: 999px; font-variant-numeric: tabular-nums; } .pill.on .count { background: rgba(255,255,255,.20); } /* ---------- Icon button (circular pequeno) ---------- */ .icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--surface); color: var(--fg-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-family: inherit; transition: all .12s; } .icon-btn:hover { background: var(--surface-soft); color: var(--fg); border-color: var(--border); } .icon-btn.wa { color: var(--whatsapp); } .icon-btn.wa:hover { background: oklch(96% 0.12 145); border-color: var(--whatsapp); } /* ---------- Ghost link (texto+icone) ---------- */ .ghost-link { background: transparent; border: none; color: var(--accent); font-size: 12px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; text-decoration: none; font-family: inherit; transition: background .12s; } .ghost-link:hover { background: var(--accent-soft); } /* ---------- Menu dropdown via
---------- */ .menu-wrap { position: relative; display: inline-block; } .menu-wrap > summary { list-style: none; cursor: pointer; } .menu-wrap > summary::-webkit-details-marker { display: none; } .menu-wrap[open] > summary > .icon-btn { background: var(--surface-soft); color: var(--fg); } .menu-wrap .menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 4px 16px rgba(15,23,42,.10), 0 8px 32px rgba(15,23,42,.08); padding: 6px; z-index: 20; display: flex; flex-direction: column; } .menu-wrap .menu button, .menu-wrap .menu a { background: transparent; border: none; color: var(--fg); font-size: 13px; font-weight: 400; text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: inherit; } .menu-wrap .menu button:hover, .menu-wrap .menu a:hover { background: var(--surface-soft); } .menu-wrap .menu hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 6px 0; } .menu-wrap .menu .danger { color: var(--danger); } .menu-wrap .menu .danger:hover { background: oklch(96% 0.04 25); } /* ---------- Modal form (Bootstrap modal customizado) ---------- */ .modal .modal-form .fgrid { gap: 12px 14px; } .modal .modal-form .field > label { font-size: 12.5px; } .modal .modal-content { border-radius: 14px; border: 1px solid var(--border-subtle); } .modal .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); } .modal .modal-title { font-size: 15px; font-weight: 600; } .modal .modal-body { padding: 18px 22px; } .modal .modal-footer { padding: 14px 22px; border-top: 1px solid var(--border-subtle); background: var(--surface-soft); } /* ---------- Stat cards (KPI grids para Details/Relatorios) ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .stat-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .stat-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 1199px) and (min-width: 768px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .stat-grid, .stat-grid-3, .stat-grid-2 { grid-template-columns: 1fr; } } .stat-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 11px; padding: 16px 18px; } .stat-card .label { font-size: 11.5px; color: var(--fg-subtle); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; } .stat-card .value { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; line-height: 1.1; } .stat-card .value.success { color: var(--success); } .stat-card .value.danger { color: var(--danger); } .stat-card .value.warning { color: var(--warning); } .stat-card .breakdown { display: flex; gap: 10px; margin-top: 8px; font-size: 11.5px; flex-wrap: wrap; color: var(--fg-muted); } .stat-card .breakdown span { display: inline-flex; align-items: center; gap: 4px; } .stat-card .breakdown .swatch { width: 7px; height: 7px; border-radius: 999px; } /* ---------- Info grid + info list (key/value details) ---------- */ .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 1023px) { .info-grid { grid-template-columns: 1fr; } } .info-list { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; } .info-list .row { display: grid; grid-template-columns: 130px 1fr; gap: 8px; align-items: baseline; font-size: 13px; } .info-list .row .lbl { font-size: 12px; color: var(--fg-subtle); } .info-list .row .val { color: var(--fg); word-break: break-word; } /* ---------- Section content (padding padronizado p/ corpo de section) ---------- */ .section-content { padding: 14px 18px; } .section-content.text { font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; } /* ---------- Media grid + media tile (galerias) ---------- */ .media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 18px; } @media (max-width: 1023px) and (min-width: 640px) { .media-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .media-grid { grid-template-columns: 1fr; } } .media-tile { aspect-ratio: 1 / 1; background: var(--surface-soft); border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; position: relative; } .media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .media-tile video { width: 100%; height: 100%; object-fit: contain; display: block; background: #0a0a0a; } .media-tile .placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fg-subtle); text-align: center; padding: 8px; } .media-meta { font-size: 11.5px; color: var(--fg-subtle); margin-top: 4px; } /* ---------- Post status pill (Instagram) ---------- */ .post-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; } .post-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; } .post-pill.publicado { background: color-mix(in srgb, var(--success) 16%, var(--surface)); color: var(--success); } .post-pill.agendado { background: color-mix(in srgb, var(--warning) 16%, var(--surface)); color: var(--warning); } .post-pill.falhapublicacao { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger); } .post-pill.publicando { background: color-mix(in srgb, var(--info, #2563eb) 16%, var(--surface)); color: var(--info, #2563eb); } .post-pill.draft { background: var(--surface-soft); color: var(--fg-subtle); } /* ---------- Marca do Instagram (gradiente literal da marca; NÃO usa o tema) ---------- */ .ig-grad { background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%); } .ig-mark { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .titlerow.ig { display: flex; align-items: center; gap: 13px; } /* ---------- Badge de tipo de post (single / carousel / reels) ---------- */ .ty { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; gap: 5px; } .ty svg { width: 11px; height: 11px; } .ty.single { background: var(--accent-soft); color: var(--accent); } .ty.carousel { background: oklch(95% 0.06 70); color: oklch(45% 0.13 70); } .ty.reels { background: oklch(95% 0.05 300); color: oklch(48% 0.16 300); } /* ---------- Toggle switch (substitui checkbox cru em listas/forms) ---------- */ .switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 999px; transition: .14s; } .switch .slider::before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; top: 2px; background: var(--surface); border-radius: 50%; border: 1px solid var(--border); transition: .14s; } .switch input:checked + .slider { background: var(--accent); border-color: var(--accent); } .switch input:checked + .slider::before { transform: translateX(16px); border-color: transparent; background: #fff; } .switch input:disabled + .slider { opacity: .55; cursor: not-allowed; } /* ---------- Utilitários ---------- */ .tabular { font-variant-numeric: tabular-nums; } .code-inline { font-size: 12px; padding: 2px 6px; background: var(--surface-soft); border: 1px solid var(--border-subtle); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .empty.compact { padding: 22px 18px; } .empty.compact .ico { width: 44px; height: 44px; margin-bottom: 10px; } .empty.compact h3, .empty.compact .title { font-size: 14px; } .empty.compact .sub { font-size: 12.5px; } /* ---------- Bootstrap btn-outline-* hover override ---------- A regra .btn:hover do design-system seta background: var(--surface-soft), o que sobrescreve o bg colorido do Bootstrap pros .btn-outline-* mas deixa intacto o color: #fff que o Bootstrap aplica no :hover. Resultado: texto branco sobre superfície quase branca = botão "transparente". Aqui restauramos o hover com bg sólido + texto contrastado pros tokens atuais do design-system. */ .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-light, .btn-outline-dark { background-color: transparent; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.active, .btn-outline-primary:active { background-color: var(--accent) !important; color: var(--accent-fg) !important; border-color: var(--accent) !important; } .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary.active, .btn-outline-secondary:active { background-color: var(--surface-soft) !important; color: var(--fg) !important; border-color: var(--border) !important; } .btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success.active, .btn-outline-success:active { background-color: var(--success) !important; color: #fff !important; border-color: var(--success) !important; } .btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger.active, .btn-outline-danger:active { background-color: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important; } .btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning.active, .btn-outline-warning:active { background-color: var(--warning) !important; color: #1a1a1a !important; border-color: var(--warning) !important; } .btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info.active, .btn-outline-info:active { background-color: var(--accent) !important; color: var(--accent-fg) !important; border-color: var(--accent) !important; } /* ---------- Bootstrap dropdown-menu / modal — bind nos tokens do tema ---------- Bootstrap usa --bs-body-bg / --bs-body-color como default desses containers, e nao trocamos os --bs-* no theme-dark. Sem isso, em dark theme: - dropdown-menu / modal-content ficam com bg branco (Bootstrap default). - .btn dentro deles continua com color: var(--fg) = branco do theme-dark. - Texto branco sobre fundo branco = botao "sumindo". Plugamos nos tokens do design-system pra esses containers seguirem o tema. */ .dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--fg); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-color: var(--fg); --bs-dropdown-link-hover-color: var(--fg); --bs-dropdown-link-hover-bg: var(--surface-soft); --bs-dropdown-link-active-color: var(--accent-fg); --bs-dropdown-link-active-bg: var(--accent); --bs-dropdown-divider-bg: var(--border-subtle); --bs-dropdown-header-color: var(--fg-subtle); } .dropdown-divider, .dropdown-menu hr { border-color: var(--border-subtle); } .modal-content { background-color: var(--surface); color: var(--fg); border-color: var(--border); } .modal-header, .modal-footer { border-color: var(--border-subtle); } /* Bootstrap usa --bs-body-color/--bs-body-bg como default em quase todo componente que herda body styles. No theme-dark nao trocavamos os --bs-*, entao h1/h2/p e qualquer texto sem color explicito ficava com cor light default do Bootstrap (#212529) sobre canvas escuro = quase invisivel. */ body { --bs-body-color: var(--fg); --bs-body-bg: var(--canvas); color: var(--fg); } /* ===== Painel Minha Matrícula (redesign) ===== */ /* Largura/alinhamento herdam do
do layout (sem max-width/centralização própria). */ /* Hero */ .painel-matricula .hero { display: flex; align-items: flex-start; gap: 18px; padding: 0 4px 22px; flex-wrap: wrap; } .painel-matricula .hero .badge-modal { width: 56px; height: 56px; border-radius: 15px; background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 75%, black)); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent); } .painel-matricula .hero .htext { flex: 1; min-width: 260px; } .painel-matricula .hero .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 600; margin-bottom: 5px; } .painel-matricula .hero h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .painel-matricula .hero h1 .status { font-size: 11px; padding: 4px 10px; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 5px; } .painel-matricula .hero h1 .status::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; } .painel-matricula .hero h1 .status.ok { background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: color-mix(in srgb, var(--success) 70%, black); } .painel-matricula .hero h1 .status.warn { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); color: color-mix(in srgb, var(--warning) 80%, black); } .painel-matricula .hero .meta { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--fg-muted); } .painel-matricula .hero .meta .m { display: inline-flex; align-items: center; gap: 7px; } .painel-matricula .hero .meta .m svg { color: var(--fg-subtle); } .painel-matricula .hero .meta .m b { color: var(--fg); font-weight: 500; } /* Layout grid */ .painel-matricula .grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; } .painel-matricula .col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* Card base */ .painel-matricula .card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); overflow: hidden; } .painel-matricula .card-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; } .painel-matricula .card-head .ico { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .painel-matricula .card-head h2 { font-size: 13.5px; font-weight: 600; margin: 0; letter-spacing: -0.005em; } .painel-matricula .card-head .right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } .painel-matricula .card-link { font-size: 12.5px; color: color-mix(in srgb, var(--accent) 78%, black); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .painel-matricula .card-link:hover { text-decoration: underline; color: color-mix(in srgb, var(--accent) 62%, black); } .painel-matricula .card-body { padding: 18px; } /* Payment (featured) */ .painel-matricula .pay { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); } .painel-matricula .pay .card-head { background: color-mix(in srgb, var(--warning) 8%, var(--surface)); border-bottom-color: color-mix(in srgb, var(--warning) 30%, var(--border-subtle)); } .painel-matricula .pay .card-head .ico { background: color-mix(in srgb, var(--warning) 18%, var(--surface)); color: var(--warning); } .painel-matricula .pay-top { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; } .painel-matricula .pay-amount { flex: 1; min-width: 180px; } .painel-matricula .pay-amount .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); font-weight: 600; } .painel-matricula .pay-amount .v { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; line-height: 1; } .painel-matricula .pay-amount .due { margin-top: 9px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; } .painel-matricula .pay-amount .due .chip { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--warning) 18%, var(--surface)); color: color-mix(in srgb, var(--warning) 80%, black); font-weight: 600; font-size: 11.5px; display: inline-flex; align-items: center; gap: 5px; } .painel-matricula .pay-amount .due .muted { color: var(--fg-muted); } .painel-matricula .pay-cta { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 170px; } .painel-matricula .pay-cta .btn { justify-content: center; } .painel-matricula .pay-cta .pix-note { font-size: 11px; color: var(--fg-subtle); text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .painel-matricula .pay-history { margin-top: 18px; border-top: 1px solid var(--border-subtle); padding-top: 4px; } .painel-matricula .pay-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; } .painel-matricula .pay-row:last-child { border-bottom: none; } .painel-matricula .pay-row .dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; } .painel-matricula .pay-row .dot.ok { background: var(--success); } .painel-matricula .pay-row .dot.wait { background: var(--warning); } .painel-matricula .pay-row .when { color: var(--fg); font-weight: 500; min-width: 96px; } .painel-matricula .pay-row .desc { color: var(--fg-muted); flex: 1; } .painel-matricula .pay-row .amt { font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 500; } .painel-matricula .pay-row .st { font-size: 11px; font-weight: 600; } .painel-matricula .pay-row .st.ok { color: color-mix(in srgb, var(--success) 70%, black); } .painel-matricula .pay-row .st.wait { color: color-mix(in srgb, var(--warning) 80%, black); } /* Attendance */ .painel-matricula .att-top { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .painel-matricula .att-stats { display: flex; gap: 22px; } .painel-matricula .att-stat .v { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .painel-matricula .att-stat .v.ok { color: color-mix(in srgb, var(--success) 80%, black); } .painel-matricula .att-stat .v.miss { color: color-mix(in srgb, var(--danger) 80%, black); } .painel-matricula .att-stat .l { font-size: 11.5px; color: var(--fg-muted); margin-top: 5px; } .painel-matricula .att-freq { margin-left: auto; min-width: 150px; } .painel-matricula .att-freq .top { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--fg-muted); margin-bottom: 6px; } .painel-matricula .att-freq .top b { font-size: 15px; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; } .painel-matricula .att-freq .bar { height: 6px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border-subtle); overflow: hidden; } .painel-matricula .att-freq .bar > span { display: block; height: 100%; background: var(--success); border-radius: 999px; } /* Mini calendar */ .painel-matricula .mini-cal { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-subtle); } .painel-matricula .mini-cal .mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .painel-matricula .mini-cal .mc-head h4 { margin: 0; font-size: 12.5px; font-weight: 600; } .painel-matricula .mini-cal .mc-legend { display: inline-flex; gap: 12px; font-size: 11px; color: var(--fg-muted); } .painel-matricula .mini-cal .mc-legend .lg { display: inline-flex; align-items: center; gap: 5px; } .painel-matricula .mini-cal .mc-legend .sw { width: 10px; height: 10px; border-radius: 3px; border: 1px solid; } .painel-matricula .mini-cal .mc-legend .sw.ok { background: color-mix(in srgb, var(--success) 20%, var(--surface)); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); } .painel-matricula .mini-cal .mc-legend .sw.miss { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); } .painel-matricula .mini-cal .mc-legend .sw.open { background: var(--surface); border-style: dashed; border-color: var(--border); } .painel-matricula .pres-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .painel-matricula .pres-cal .dn { font-size: 9.5px; color: var(--fg-muted); text-align: center; padding: 2px 0 4px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .painel-matricula .pres-cal .d { height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--fg-muted); border: 1px solid var(--border-subtle); font-variant-numeric: tabular-nums; } .painel-matricula .pres-cal .d.pad { border: none; } .painel-matricula .pres-cal .d.none { color: var(--fg-subtle); } .painel-matricula .pres-cal .d.ok { background: color-mix(in srgb, var(--success) 20%, var(--surface)); color: color-mix(in srgb, var(--success) 80%, black); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); font-weight: 600; } .painel-matricula .pres-cal .d.miss { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: color-mix(in srgb, var(--danger) 80%, black); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); font-weight: 600; } .painel-matricula .pres-cal .d.open { border-style: dashed; border-color: var(--border); color: var(--fg-subtle); } .painel-matricula .pres-cal .d.today { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); } /* Definition list (matrícula info) */ .painel-matricula .dl { display: flex; flex-direction: column; } .painel-matricula .dl .r { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; } .painel-matricula .dl .r:last-child { border-bottom: none; } .painel-matricula .dl .r dt { color: var(--fg-muted); } .painel-matricula .dl .r dd { margin: 0; color: var(--fg); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; } /* Actions */ .painel-matricula .actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 8px; } .painel-matricula .actions .btn { width: 100%; justify-content: flex-start; gap: 10px; } .painel-matricula .actions .btn.danger { color: var(--danger); } .painel-matricula .actions .btn.danger:hover { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); } .painel-matricula .actions .note { font-size: 11.5px; color: var(--fg-subtle); margin-top: 2px; line-height: 1.5; } /* Documentos */ .painel-matricula .docs { display: flex; flex-direction: column; } .painel-matricula .docs .doc { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); } .painel-matricula .docs .doc:last-child { border-bottom: none; } .painel-matricula .docs .doc .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-soft); border: 1px solid var(--border-subtle); color: var(--fg-muted); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .painel-matricula .docs .doc .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; } .painel-matricula .docs .doc .nm .sub { font-size: 11.5px; color: var(--fg-subtle); font-weight: 400; margin-top: 1px; } /* Responsive */ @media (max-width: 880px) { .painel-matricula .grid { grid-template-columns: 1fr; } .painel-matricula .actions .btn { min-height: 44px; } .painel-matricula .card-link { min-height: 44px; display: inline-flex; align-items: center; } } @media (max-width: 520px) { .painel-matricula .hero h1 { font-size: 22px; } .painel-matricula .pay-cta { width: 100%; } }