/* ════════════════════════════════════════════════════════════════ PEI Manager — Estilo ChatGPT iOS ════════════════════════════════════════════════════════════════ */ /* ── Variáveis ── */ /* Paleta baseada na bandeira do Rio Grande do Sul (design-system/tokens.css). Verde RS = marca; amarelo RS = destaque exclusivo de IA; vermelho RS = perigo. */ :root { /* Marca (bandeira do RS) */ --rs-green: #00963F; /* primária / marca */ --rs-green-dark: #00702F; /* hover / ativo */ --rs-green-soft: #E6F4EC; /* fundos suaves, badges, gradientes claros */ --rs-yellow: #FFCB00; /* destaque de IA */ --rs-yellow-soft: #FFF8DC; /* fundo de blocos de sugestão de IA */ --rs-red: #D52B1E; /* perigo / excluir */ --rs-red-soft: #FDECEA; /* fundo de estados de erro */ --bg-app: #f7f7f8; --bg-card: #ffffff; --bg-sidebar: #202123; --bg-sidebar-hover: #2a2b32; --color-primary: var(--rs-green); --color-primary-h: var(--rs-green-dark); --color-danger: var(--rs-red); --color-text: #202123; --color-muted: #6e6e80; --color-border: #e5e5e5; --shadow-sm: 0 1px 4px rgba(0,0,0,.08); --shadow-md: 0 4px 16px rgba(0,0,0,.10); --radius: 12px; --radius-sm: 8px; --sidebar-w: 260px; --sidebar-w-rail: 72px; /* sidebar recolhida: só ícones */ --sidebar-cur-w: var(--sidebar-w); /* largura efetiva — alternada pelo rail */ --bottom-nav-h: 70px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --transition: all .18s ease; } /* Estado "rail" (ícones apenas). O atributo é escrito em antes da pintura (script inline no ) para não piscar largura no carregamento. */ html[data-sidebar="collapsed"] { --sidebar-cur-w: var(--sidebar-w-rail); } /* ── Ícones do design system (PNG flat, paleta RS) ── Usados em fundo claro (cards, chips, formulário, empty states). .ds-icon = inline junto a texto; .ds-icon-lg = empty states. */ .ds-icon { width: 1.15em; height: 1.15em; object-fit: contain; vertical-align: -0.22em; flex-shrink: 0; } .ds-icon-btn { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; } .ds-icon-chip { width: 15px; height: 15px; object-fit: contain; vertical-align: -3px; flex-shrink: 0; } .ds-icon-section { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } .ds-icon-lg { width: 64px; height: 64px; object-fit: contain; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg-app); color: var(--color-text); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ════════════════════════════════════════════════════════════════ LAYOUT ════════════════════════════════════════════════════════════════ */ .app-layout { display: flex; min-height: 100vh; } .main-content { flex: 1; padding: 24px 20px; padding-bottom: calc(var(--bottom-nav-h) + 24px); max-width: 100%; overflow-x: hidden; } @media (min-width: 992px) { .main-content { margin-left: var(--sidebar-cur-w); padding-bottom: 32px; max-width: 900px; transition: margin-left .2s ease; } } @media (prefers-reduced-motion: reduce) { .main-content { transition: none; } } /* ════════════════════════════════════════════════════════════════ SIDEBAR (Desktop) ════════════════════════════════════════════════════════════════ */ .sidebar { width: var(--sidebar-cur-w); background: var(--bg-sidebar); color: #fff; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 200; padding: 16px 0; transition: width .2s ease; } /* Header */ .sidebar-header { display: flex; align-items: center; gap: 6px; padding: 4px 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; } .sidebar-logo { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: #fff; } /* Botão de recolher/expandir (rail) */ .sidebar-collapse-btn { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 7px; color: rgba(255,255,255,.45); cursor: pointer; transition: var(--transition); } .sidebar-collapse-btn:hover { background: var(--bg-sidebar-hover); color: #fff; } .sidebar-collapse-btn svg { width: 17px; height: 17px; transition: transform .2s ease; } .sidebar-logo-icon { width: 36px; height: 36px; background: var(--color-primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; color: #fff; flex-shrink: 0; } /* Logo do app (monograma) na sidebar */ .sidebar-logo-img { width: 36px; height: 36px; border-radius: 9px; object-fit: contain; flex-shrink: 0; } .sidebar-logo-text { font-size: 15px; font-weight: 600; } /* Nav items */ .sidebar-nav { flex: 1; padding: 0 8px; overflow-y: auto; overflow-x: hidden; } .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); } .sidebar-nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: rgba(255,255,255,.75); font-size: 14px; transition: var(--transition); margin-bottom: 2px; } .sidebar-nav-item:hover, .sidebar-nav-item.active { background: var(--bg-sidebar-hover); color: #fff; text-decoration: none; } .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Foco visível: os botões da sidebar não têm borda própria. */ .sidebar-nav-item:focus-visible, .nav-group-toggle:focus-visible, .sidebar-collapse-btn:focus-visible, .sidebar-logout:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: -2px; } .nav-icon { font-size: 15px; width: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .nav-icon svg { width: 18px; height: 18px; } /* Símbolo do app como ícone de grupo. O PNG é colorido (verde/amarelo da marca), então vai dessaturado — o brilho compensa o cinza-médio que o grayscale produz, senão pesa mais que os ícones de traço ao lado. */ .nav-icon-app { width: 18px; height: 18px; border-radius: 5px; object-fit: contain; filter: grayscale(1) brightness(1.2); opacity: .85; transition: var(--transition); } .nav-group-toggle:hover .nav-icon-app { opacity: 1; } /* Separador entre a seção solta do topo e os grupos */ .sidebar-divider { height: 1px; background: rgba(255,255,255,.09); margin: 12px 12px 10px; } /* ── Grupos recolhíveis (setinha) ── */ .nav-group { margin-bottom: 2px; } .nav-group-toggle { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; margin-bottom: 2px; background: none; border: none; border-radius: 8px; font: inherit; font-size: 14px; text-align: left; color: rgba(255,255,255,.75); cursor: pointer; transition: var(--transition); } .nav-group-toggle:hover { background: var(--bg-sidebar-hover); color: #fff; } .nav-group-chevron { width: 13px; height: 13px; margin-left: auto; flex-shrink: 0; opacity: .45; transition: transform .2s ease; } .nav-group.is-collapsed .nav-group-chevron { transform: rotate(-90deg); } /* Grupo fechado que contém a página atual: sinaliza sem precisar abrir. */ .nav-group.is-collapsed.has-active .nav-group-toggle { color: #fff; } .nav-group.is-collapsed.has-active .nav-group-chevron { opacity: .8; color: var(--color-primary); } /* Truque do grid 1fr→0fr: anima a altura sem precisar medi-la em JS. */ .nav-group-items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s ease; } .nav-group.is-collapsed .nav-group-items { grid-template-rows: 0fr; } .nav-group-inner { overflow: hidden; min-height: 0; } /* Filhos do grupo: recuo + trilho vertical alinhado ao ícone do grupo. */ .nav-group .sidebar-nav-item { margin-left: 21px; padding-left: 15px; border-left: 1px solid rgba(255,255,255,.10); border-radius: 0 8px 8px 0; } .nav-group .sidebar-nav-item:hover { border-left-color: rgba(255,255,255,.28); } .nav-group .sidebar-nav-item.active { border-left-color: var(--color-primary); } /* ── Estado recolhido (rail): só ícones ── Os cabeçalhos de grupo somem e os filhos viram uma lista plana de ícones, separada por linhas — abrir/fechar grupo não faz sentido sem rótulo. */ html[data-sidebar="collapsed"] .sidebar-collapse-btn svg { transform: rotate(180deg); } html[data-sidebar="collapsed"] .nav-label, html[data-sidebar="collapsed"] .sidebar-logo-text, html[data-sidebar="collapsed"] .sidebar-user-info { display: none; } html[data-sidebar="collapsed"] .sidebar-header { flex-direction: column; gap: 8px; padding: 4px 8px 12px; } html[data-sidebar="collapsed"] .sidebar-logo { flex: none; justify-content: center; } html[data-sidebar="collapsed"] .sidebar-nav-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } html[data-sidebar="collapsed"] .nav-group-toggle { display: none; } html[data-sidebar="collapsed"] .nav-group-items { grid-template-rows: 1fr; } html[data-sidebar="collapsed"] .nav-group .sidebar-nav-item { margin-left: 0; border-left: none; border-radius: 8px; } html[data-sidebar="collapsed"] .nav-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.09); } html[data-sidebar="collapsed"] .sidebar-nav > .nav-group:first-child { margin-top: 0; padding-top: 0; border-top: none; } html[data-sidebar="collapsed"] .sidebar-divider { display: none; } @media (prefers-reduced-motion: reduce) { .sidebar, .nav-group-items, .nav-group-chevron, .sidebar-collapse-btn svg { transition: none; } } /* Tooltip do rail — posicionado em `fixed` via JS para não ser cortado pelo overflow da nav. Só aparece com a sidebar recolhida. */ .sidebar-tip { position: fixed; z-index: 400; padding: 7px 10px; border-radius: 7px; background: #34353a; color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; box-shadow: var(--shadow-md); pointer-events: none; opacity: 0; transform: translateY(-50%) translateX(-4px); transition: opacity .12s ease, transform .12s ease; } .sidebar-tip.is-visible { opacity: 1; transform: translateY(-50%) translateX(0); } /* Footer */ .sidebar-footer { padding: 14px; border-top: 1px solid rgba(255,255,255,.08); } .sidebar-user { display: flex; align-items: center; gap: 10px; } .sidebar-avatar { width: 34px; height: 34px; background: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; } .sidebar-user-info { flex: 1; overflow: hidden; } .sidebar-user-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .sidebar-user-role { font-size: 11px; color: rgba(255,255,255,.5); } .sidebar-logout-form { display: flex; flex-shrink: 0; } .sidebar-logout { color: rgba(255,255,255,.4); cursor: pointer; transition: var(--transition); display: flex; align-items: center; background: none; border: none; padding: 0; } .sidebar-logout:hover { color: #fff; } /* Footer no rail: avatar e sair empilhados e centralizados */ html[data-sidebar="collapsed"] .sidebar-footer { padding: 12px 8px; } html[data-sidebar="collapsed"] .sidebar-user { flex-direction: column; gap: 8px; } html[data-sidebar="collapsed"] .sidebar-logout { justify-content: center; } /* ════════════════════════════════════════════════════════════════ BOTTOM NAV (Mobile) ════════════════════════════════════════════════════════════════ */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-h); background: var(--bg-card); border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-around; z-index: 200; padding: 0 4px; box-shadow: 0 -2px 12px rgba(0,0,0,.06); } /* Com `flex: 1 1 0` + padding enxuto, 5 itens + botão "+" cabem em 360px sem truncar nenhum rótulo (medido: "Professores" é o mais largo, 57px). A barra da coordenadora hoje tem 6 (Visão, PEIs, Professores, Estudantes, Escolas, Guias), então nas telas mais estreitas os rótulos truncam — min-width/overflow existem para que trunquem com reticências em vez de empurrar o layout da página. */ .bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--color-muted); font-size: 10px; font-weight: 500; transition: var(--transition); padding: 8px 2px; border-radius: 10px; flex: 1 1 0; min-width: 0; overflow: hidden; } .bottom-nav-item > span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bottom-nav-item:hover, .bottom-nav-item.active { color: var(--color-primary); } .bottom-nav-icon { font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .bottom-nav-icon svg { width: 23px; height: 23px; } .bottom-nav-create { width: 52px; height: 52px; background: var(--color-primary); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; box-shadow: 0 4px 14px rgba(0,150,63,.4); transition: var(--transition); flex-shrink: 0; } .bottom-nav-create:hover { background: var(--color-primary-h); color: #fff; transform: scale(1.06); } /* ════════════════════════════════════════════════════════════════ PAGE HEADER ════════════════════════════════════════════════════════════════ */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 12px; } .page-title { font-size: 22px; font-weight: 700; color: var(--color-text); } .page-subtitle { font-size: 13px; color: var(--color-muted); margin-top: 2px; } .back-link { font-size: 13px; color: var(--color-muted); text-decoration: none; transition: var(--transition); } .back-link:hover { color: var(--color-primary); } /* ════════════════════════════════════════════════════════════════ PEI CARDS (lista) ════════════════════════════════════════════════════════════════ */ .pei-grid { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 640px) { .pei-grid { grid-template-columns: repeat(2, 1fr); } } .pei-card { display: block; background: var(--bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: var(--transition); } .pei-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-primary); color: inherit; text-decoration: none; } .pei-card-header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .pei-student-name { font-size: 15px; font-weight: 600; } .pei-period-badge { font-size: 11px; white-space: nowrap; background: var(--rs-green-soft); color: var(--color-primary); padding: 3px 9px; border-radius: 20px; font-weight: 600; align-self: flex-start; flex-shrink: 0; } .pei-card-meta { display: flex; flex-wrap: wrap; gap: 10px; } .pei-meta-item { font-size: 12px; color: var(--color-muted); display: flex; align-items: center; gap: 3px; } .pei-componentes-count { font-size: 12px; color: var(--color-muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); } /* ════════════════════════════════════════════════════════════════ FORM SECTIONS ════════════════════════════════════════════════════════════════ */ .form-section { background: var(--bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .form-section-header { padding: 14px 18px; background: var(--bg-app); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; } .form-section-title { font-size: 14px; font-weight: 600; color: var(--color-text); display: flex; align-items: center; gap: 8px; } .section-toggle-icon { font-size: 12px; color: var(--color-muted); transition: var(--transition); } .section-collapsed .section-toggle-icon { transform: rotate(180deg); } .form-section-body { padding: 20px; } /* Form controls */ .form-label { font-size: 13px; font-weight: 500; color: var(--color-text); margin-bottom: 6px; display: block; } .form-control, .form-select { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; font-family: var(--font); color: var(--color-text); transition: var(--transition); background: #fff; width: 100%; } .form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,150,63,.14); outline: none; } .form-control::placeholder { color: #c0c0cc; } textarea.form-control { resize: vertical; min-height: 80px; } /* Valor definido pelo sistema, exibido no lugar de um input (ex.: ano letivo). Mesma caixa do .form-control, sem afordância de edição. */ .form-control-static { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--color-muted); background: var(--bg-app); width: 100%; } .form-hint { font-size: 12px; color: var(--color-muted); margin-top: 5px; } .form-hint a { color: var(--color-primary); } .form-error-text { font-size: 12px; color: var(--color-danger); margin-top: 4px; } .subsection-title { font-size: 12px; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .5px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); } /* Badge contador de meses */ .badge-count { font-size: 12px; font-weight: 600; background: var(--rs-green-soft); color: var(--color-primary); padding: 3px 10px; border-radius: 20px; } /* Badge "obrigatório para PDF" — pílula amarela (marca RS), texto escuro p/ contraste */ .badge-required { font-size: 11px; font-weight: 600; background: var(--rs-yellow-soft); color: #7a5a00; border: 1px solid var(--rs-yellow); padding: 2px 8px; border-radius: 20px; cursor: default; } /* ════════════════════════════════════════════════════════════════ MONTH CARD (no formulário) ════════════════════════════════════════════════════════════════ */ .componente-card { background: var(--bg-card); border: 1.5px solid var(--color-border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; transition: var(--transition); } .componente-card:hover { border-color: #a8d8bd; } .componente-card-header { padding: 12px 16px; background: linear-gradient(135deg, #f2fbf5, var(--rs-green-soft)); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; } .componente-card-title { font-size: 14px; font-weight: 600; color: var(--color-text); display: flex; align-items: center; gap: 8px; } .componente-card-body { padding: 16px; } .btn-toggle-componente { background: none; border: none; cursor: pointer; color: var(--color-muted); padding: 4px; border-radius: 6px; transition: var(--transition); display: flex; align-items: center; } .btn-toggle-componente:hover { background: rgba(0,0,0,.06); color: var(--color-text); } .componente-collapsed .btn-toggle-componente svg { transform: rotate(180deg); } .componente-collapsed .componente-card-body { display: none; } .btn-remove-componente { background: none; border: 1px solid #f5c4bf; color: var(--color-danger); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; transition: var(--transition); } .btn-remove-componente:hover { background: var(--rs-red-soft); } .btn-add-componente { width: 100%; padding: 12px; background: var(--bg-card); border: 2px dashed var(--color-border); border-radius: var(--radius); color: var(--color-muted); font-size: 14px; font-weight: 500; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); } .btn-add-componente:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--rs-green-soft); } /* ════════════════════════════════════════════════════════════════ BUTTONS ════════════════════════════════════════════════════════════════ */ .btn-primary-custom { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 11px 22px; font-size: 14px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: var(--transition); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; } .btn-primary-custom:hover { background: var(--color-primary-h); color: #fff; transform: translateY(-1px); text-decoration: none; } .btn-secondary-custom { background: var(--bg-card); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 11px 22px; font-size: 14px; font-weight: 500; font-family: var(--font); cursor: pointer; transition: var(--transition); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; } .btn-secondary-custom:hover { background: var(--bg-app); color: var(--color-text); text-decoration: none; } .btn-danger-custom { background: var(--bg-card); color: var(--color-danger); border: 1px solid #f5c4bf; border-radius: var(--radius-sm); padding: 11px 22px; font-size: 14px; font-weight: 500; font-family: var(--font); cursor: pointer; transition: var(--transition); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; } .btn-danger-custom:hover { background: var(--rs-red-soft); color: var(--color-danger); text-decoration: none; } /* Botão de confirmação de exclusão — vermelho sólido (tela confirm_delete) */ .btn-delete-confirm { background: var(--rs-red); color: #fff; border: none; border-radius: var(--radius-sm); padding: 11px 22px; font-size: 14px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: var(--transition); } .btn-delete-confirm:hover { background: #b8241a; color: #fff; transform: translateY(-1px); } .form-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 20px; } /* ════════════════════════════════════════════════════════════════ ACTION BAR (detalhe) ════════════════════════════════════════════════════════════════ */ .action-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } /* ════════════════════════════════════════════════════════════════ ALERTS ════════════════════════════════════════════════════════════════ */ .alert-custom { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 8px; } .alert-success { background: var(--rs-green-soft); color: var(--rs-green-dark); border: 1px solid #b6e0c6; } .alert-error { background: var(--rs-red-soft); color: var(--rs-red); border: 1px solid #f5c4bf; } /* Neutro: aviso de funcionamento (ex.: "quem imprime é o AEE"), não erro. */ .alert-info { background: var(--bg-app); color: var(--color-muted); border: 1px solid var(--color-border); } /* ════════════════════════════════════════════════════════════════ DETAIL VIEW ════════════════════════════════════════════════════════════════ */ .detail-section { background: var(--bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .detail-section-header { padding: 12px 18px; background: var(--bg-sidebar); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .3px; } .detail-section-body { padding: 18px; } .id-row { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--color-border); } .id-row:last-child { border-bottom: none; } .id-label { font-size: 13px; font-weight: 600; color: var(--color-muted); min-width: 130px; flex-shrink: 0; } .id-value { font-size: 14px; color: var(--color-text); } .componente-info-row { display: flex; flex-wrap: wrap; gap: 8px; } .componente-info-chip { font-size: 12px; font-weight: 500; background: var(--bg-app); border: 1px solid var(--color-border); padding: 4px 10px; border-radius: 20px; color: var(--color-text); } .table-label { font-size: 12px; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .4px; } .detail-table { width: 100%; border-collapse: collapse; } .detail-table th { background: var(--bg-app); padding: 9px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--color-muted); border: 1px solid var(--color-border); text-align: left; } .detail-table td { padding: 10px; font-size: 13px; border: 1px solid var(--color-border); vertical-align: top; } .pre-line { white-space: pre-line; } /* ════════════════════════════════════════════════════════════════ EMPTY STATE ════════════════════════════════════════════════════════════════ */ .empty-state { text-align: center; padding: 52px 20px; background: var(--bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); } .empty-state-icon { font-size: 48px; margin-bottom: 16px; } .empty-state-title { font-size: 19px; font-weight: 600; margin-bottom: 8px; } .empty-state-text { font-size: 14px; color: var(--color-muted); margin-bottom: 22px; } /* ════════════════════════════════════════════════════════════════ LOGIN ════════════════════════════════════════════════════════════════ */ .login-page { min-height: 100vh; background: linear-gradient(135deg, #f7f7f8 0%, var(--rs-green-soft) 100%); display: flex; align-items: center; justify-content: center; padding: 20px; } .login-card { background: var(--bg-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 36px 32px; width: 100%; max-width: 380px; box-shadow: var(--shadow-md); } .login-logo { width: 52px; height: 52px; background: var(--color-primary); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: #fff; margin: 0 auto 16px; } /* Logo do app (monograma) nas telas de login/registro */ .login-logo-img { display: block; width: 56px; height: 56px; border-radius: 14px; object-fit: contain; margin: 0 auto 16px; } .login-title { font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 4px; } .login-subtitle { font-size: 13px; color: var(--color-muted); text-align: center; margin-bottom: 28px; } .login-btn { width: 100%; padding: 13px; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: var(--transition); } .login-btn:hover { background: var(--color-primary-h); } .login-footer-text { font-size: 12px; color: var(--color-muted); text-align: center; margin-top: 20px; } /* ════════════════════════════════════════════════════════════════ LOGIN EM DUAS COLUNAS (card dividido: formulário + painel de marca) ════════════════════════════════════════════════════════════════ */ .auth-shell { width: 100%; max-width: 1000px; margin-inline: auto; } .auth-card { background: var(--bg-card); border: 1px solid var(--color-border); border-radius: 20px; box-shadow: var(--shadow-md); overflow: clip; /* O ponto de quebra segue a largura do CARD, não da janela: assim nunca desencontra se o card mudar de tamanho máximo. */ container-type: inline-size; container-name: authcard; } /* Colunas explícitas em vez de `auto-fit`: com auto-fit o ponto de colapso do grid e o da container query se desencontram quando o padding muda na query, e existe uma faixa de larguras em que o painel de marca cai na coluna ESQUERDA. Com um breakpoint só, o layout é determinístico. */ .auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 32px; align-items: stretch; } @container authcard (max-width: 640px) { .auth-grid { grid-template-columns: 1fr; gap: 22px; padding: 20px; } /* Empilhado, a marca vem primeiro — identifica a tela antes do formulário. */ .auth-brand { order: -1; min-height: 0; padding: 30px 22px; } .auth-brand-logo { width: 76px; height: 76px; } .auth-brand-name { font-size: 25px; } } /* ── Coluna do formulário ── */ .auth-form-col { display: flex; flex-direction: column; gap: 20px; padding: 8px 6px; } .auth-brandmark { display: flex; align-items: center; gap: 9px; } .auth-brandmark img { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; } .auth-brandmark span { font-size: 14px; font-weight: 700; letter-spacing: -.2px; } .auth-heading { display: flex; flex-direction: column; gap: 5px; } .auth-title { font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; } .auth-subtitle { font-size: 14px; color: var(--color-muted); } .auth-fields { display: flex; flex-direction: column; gap: 14px; } .auth-form-col .form-control { padding: 12px 14px; font-size: 15px; } .auth-actions { display: flex; flex-direction: column; gap: 14px; } .auth-footer { margin-top: auto; display: flex; flex-direction: column; gap: 9px; } .auth-footer-text { font-size: 13px; color: var(--color-muted); } .auth-footer-text a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .auth-footer-text a:hover { text-decoration: underline; } .auth-note { font-size: 12px; color: var(--color-muted); line-height: 1.55; } /* ── Painel de marca ── */ .auth-brand { position: relative; overflow: hidden; border-radius: 14px; padding: 44px 30px; min-height: 404px; background: linear-gradient(155deg, var(--rs-green) 0%, var(--rs-green-dark) 100%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; } /* Brilho de canto: dá profundidade sem depender de arquivo de imagem. */ .auth-brand::before { content: ''; position: absolute; top: -30%; right: -25%; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); pointer-events: none; } .auth-brand > * { position: relative; } .auth-brand-logo { width: 108px; height: 108px; border-radius: 27px; object-fit: contain; background: rgba(255,255,255,.14); padding: 12px; } .auth-brand-name { font-size: 31px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; margin: 0; } .auth-brand-desc { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.88); max-width: 32ch; margin: 0; } .auth-legal { margin-top: 16px; text-align: center; font-size: 12px; color: var(--color-muted); } /* ════════════════════════════════════════════════════════════════ UTILITIES & PRINT ════════════════════════════════════════════════════════════════ */ .text-muted-custom { color: var(--color-muted); } .fw-600 { font-weight: 600; } @media print { .no-print, .sidebar, .sidebar-tip, .bottom-nav, .action-bar { display: none !important; } .main-content { margin: 0; padding: 0; } body { background: #fff; } } /* Scrollbar */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #b0b0bc; } /* ════════════════════════════════════════════════════════════════ IA — BOTÕES, BADGES E CAMPOS DESTACADOS ════════════════════════════════════════════════════════════════ */ :root { --color-ia: var(--rs-yellow); /* #FFCB00 — amarelo RS, destaque de IA */ --color-ia-light: var(--rs-yellow-soft); /* #FFF8DC — fundo de blocos de IA */ --color-ia-border: #F0BE00; /* amarelo levemente escurecido p/ borda visível */ --color-ia-text: #7a5a00; /* texto sobre fundos claros de IA */ --color-ia-hover: #FFF3B8; /* hover dos botões pílula de IA */ --color-ia-solid-h:#E6B800; /* hover de botões com fundo amarelo sólido */ } /* Botão "Sugerir com IA" (support types) */ .btn-ia-suporte { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; background: var(--color-ia-light); border: 1.5px solid var(--color-ia-border); border-radius: 20px; color: var(--color-ia-text); font-size: 12px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn-ia-suporte:hover { background: var(--color-ia-hover); border-color: var(--color-ia); } .btn-ia-suporte:disabled { opacity: .5; cursor: not-allowed; } /* Botão "Otimizar" (card de componente) */ .btn-ia-componente { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; background: var(--color-ia-light); border: 1.5px solid var(--color-ia-border); border-radius: 20px; color: var(--color-ia-text); font-size: 11px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn-ia-componente:hover { background: var(--color-ia-hover); border-color: var(--color-ia); } /* Ícone ✦ IA */ .ia-icon { font-size: 12px; } /* Spinner de carregamento (ampulheta do design system) */ .ia-spinner { animation: ia-spin 1.1s linear infinite; } @keyframes ia-spin { to { transform: rotate(360deg); } } /* Ícone do design system dentro das pílulas de IA — reduz p/ acompanhar o texto 11px */ .btn-ia-campo .ds-icon-chip, .btn-ia-componente .ds-icon-chip, .btn-optimize .ds-icon-chip { width: 13px; height: 13px; vertical-align: -2px; } /* Wrapper do campo IA (apenas margem agora) */ .ia-field-wrapper { margin-bottom: 6px; } /* Cabeçalho do campo: label à esquerda, ações à direita */ .ia-field-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .ia-field-header .form-label { margin-bottom: 0; flex: 1; min-width: 0; } /* Grupo de ações (badge + botão) */ .ia-field-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* Botão "✦ Sugerir" por campo */ .btn-ia-campo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; background: var(--color-ia-light); border: 1.5px solid var(--color-ia-border); border-radius: 16px; color: var(--color-ia-text); font-size: 11px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn-ia-campo:hover { background: var(--color-ia-hover); border-color: var(--color-ia); } .btn-ia-campo:disabled { opacity: .5; cursor: not-allowed; } .ia-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--color-ia); color: #202123; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; letter-spacing: .3px; } /* Campo gerado pela IA — borda amarela (marca RS) */ .ia-generated { border-color: var(--color-ia) !important; box-shadow: 0 0 0 3px rgba(255,203,0,.22) !important; background: #fffdf2 !important; } /* Badge de campo criptografado no student_form */ .badge-criptografado { display: inline-flex; align-items: center; gap: 4px; background: var(--rs-green-soft); color: var(--color-primary); font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-left: 8px; vertical-align: middle; } /* ════════════════════════════════════════════════════════════════ MODAIS IA ════════════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; } .modal-card { background: #fff; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.20); width: 100%; max-width: 440px; animation: modal-in .18s ease; } .modal-card--wide { max-width: 560px; } @keyframes modal-in { from { opacity: 0; transform: scale(.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-card-header { padding: 18px 20px 14px; font-size: 15px; font-weight: 700; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 8px; color: var(--color-text); } .modal-card-body { padding: 18px 20px; font-size: 14px; color: #444; line-height: 1.6; } .modal-card-body p { margin-bottom: 10px; } .modal-card-body p:last-child { margin-bottom: 0; } .modal-aviso { background: var(--color-ia-light); border: 1px solid var(--color-ia-border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; color: #6b4e00; } .modal-card-footer { padding: 14px 20px; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: 10px; } .btn-ia-confirmar { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background: var(--color-ia); color: #202123; border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; font-family: var(--font); cursor: pointer; transition: var(--transition); } .btn-ia-confirmar:hover { background: var(--color-ia-solid-h); } .btn-ia-confirmar:disabled { opacity: .6; cursor: not-allowed; } /* Grid de campos no modal de otimização */ .modal-campos-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .campo-check-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--bg-app); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); } .campo-check-item:hover { border-color: var(--color-ia-border); background: var(--color-ia-light); } .campo-check-item.selecionado { border-color: var(--color-ia); background: var(--color-ia-light); } .campo-check-item.indisponivel { opacity: .55; cursor: not-allowed; } .campo-check-item.indisponivel:hover { border-color: var(--color-border); background: var(--bg-app); } .campo-check-item input[type=checkbox] { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--color-ia); } .campo-check-info { flex: 1; } .campo-check-nome { font-size: 13px; font-weight: 600; color: var(--color-text); } .campo-check-status { font-size: 11px; margin-top: 2px; color: var(--color-muted); } .campo-check-status.preenchido { color: var(--color-ia-text); } /* Toast de feedback IA */ .ia-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: var(--color-text); color: #fff; padding: 10px 18px; border-radius: 30px; font-size: 13px; font-weight: 500; z-index: 2000; animation: toast-in .2s ease; pointer-events: none; } @keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @media (min-width: 992px) { .ia-toast { bottom: 24px; } } /* ════════════════════════════════════════════════════════════════════════════ Otimização por IA — botão, modal de comparação, toast e CID (consolidado de optimize.css; índigo acidental `--accent` substituído pelos tokens da marca: âmbar p/ gatilho de IA, verde p/ ação primária) ════════════════════════════════════════════════════════════════════════════ */ /* Botão "✨ Otimizar" ao lado dos rótulos — gatilho de IA (pílula âmbar) */ .btn-optimize { display: inline-flex; align-items: center; gap: 4px; background: var(--color-ia-light); border: 1.5px solid var(--color-ia-border); color: var(--color-ia-text); border-radius: 16px; padding: 3px 9px; font-size: 11px; font-weight: 600; font-family: var(--font); cursor: pointer; margin-left: 6px; white-space: nowrap; transition: var(--transition); } .btn-optimize:hover { background: var(--color-ia-hover); border-color: var(--color-ia); } .btn-optimize:disabled { opacity: .5; cursor: wait; } /* Modal de comparação (rascunho × sugestão) — criado por optimize.js */ .optimize-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1050; } .optimize-modal { background: var(--bg-card); border-radius: var(--radius); padding: 24px; max-width: 900px; width: 90%; max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow-md); } .optimize-modal h3 { margin-top: 0; font-size: 1.1rem; } .optimize-modal .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 700px) { .optimize-modal .compare { grid-template-columns: 1fr; } } .optimize-modal pre { white-space: pre-wrap; word-break: break-word; background: var(--bg-app); padding: 12px; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.875rem; margin: 0; } .optimize-modal .compare > div strong { display: block; margin-bottom: 6px; font-size: 0.8rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; } .optimize-modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } .optimize-modal .btn-reject { background: var(--bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 14px; cursor: pointer; font-size: 14px; } .optimize-modal .btn-reject:hover { border-color: var(--color-muted); } .optimize-modal .btn-accept { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 14px; cursor: pointer; font-size: 14px; font-weight: 600; } .optimize-modal .btn-accept:hover { background: var(--color-primary-h); } /* Grupo de checkboxes CID no formulário de estudante (controle de formulário — verde) */ .cid-checkbox-group { padding: 10px 0; } .cid-group-label { font-size: 0.78rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; } .cid-option { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 0.9rem; } .cid-option input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--color-primary); } .cid-option label { cursor: pointer; margin: 0; } /* Toast de feedback do optimize.js */ .optimize-toast { position: fixed; bottom: 24px; right: 24px; z-index: 2000; background: var(--color-text); color: #fff; padding: 10px 18px; border-radius: var(--radius-sm); font-size: 14px; box-shadow: var(--shadow-md); animation: slideInUp .25s ease; } @keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ════════════════════════════════════════════════════════════════════ RODADA 3 — INTERFACE POR PAPEL Badge de status do PEI, listas agrupadas e ações inline. Dourado institucional (par do .badge-required) para "encaminhado"; o âmbar --color-ia continua EXCLUSIVO de sugestões de IA. ════════════════════════════════════════════════════════════════════ */ /* Badge de status do ciclo de vida (rascunho → encaminhado → finalizado → aprovado) */ .pei-status-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; vertical-align: middle; } .pei-status--rascunho { background: var(--bg-app); color: var(--color-muted); border: 1px solid var(--color-border); } .pei-status--encaminhado { background: var(--rs-yellow-soft); color: #7a5a00; border: 1px solid var(--rs-yellow); } .pei-status--finalizado { background: var(--rs-green-soft); color: var(--rs-green-dark); border: 1px solid #b6e0c6; } /* "Aprovado" é o fim da linha: verde sólido, para separar à distância do "finalizado" (verde suave) numa lista em que os dois estados convivem. */ .pei-status--aprovado { background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); } /* Lista agrupada (visão de PEIs por professor) */ .pei-group { margin-bottom: 28px; } .pei-group-header { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; } .pei-group-count { background: var(--rs-green-soft); color: var(--color-primary); border-radius: 20px; padding: 1px 8px; font-size: 11px; } /* Card estático (com ações inline dentro — não é âncora) */ .pei-card--static { cursor: default; } .pei-card--static:hover { transform: none; } .pei-card-link { color: inherit; text-decoration: none; } .pei-card-link:hover { color: var(--color-primary); } /* Ação inline: select de professor + botão (encaminhar/vincular) */ .encaminhar-inline { display: flex; gap: 8px; align-items: center; } .encaminhar-inline .form-select, .encaminhar-inline .form-control { flex: 1; min-width: 0; } .encaminhar-inline .btn-primary-custom { white-space: nowrap; } /* ════════════════════════════════════════════════════════════════ CONTEÚDO FORMATIVO — Guias e Artigos / Fluxo de Trabalho (app `conteudo`; páginas de leitura, visíveis a todos os papéis) ════════════════════════════════════════════════════════════════ */ /* ── Sub-navegação entre as três abas de conteúdo ── */ .sub-nav { display: flex; gap: 4px; background: var(--bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 4px; margin-bottom: 22px; box-shadow: var(--shadow-sm); /* Três rótulos não cabem lado a lado em tela estreita: rolagem em vez de quebra. */ overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sub-nav::-webkit-scrollbar { display: none; } .sub-nav-item { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--color-muted); text-decoration: none; text-align: center; white-space: nowrap; transition: var(--transition); } .sub-nav-item:hover { background: var(--bg-app); color: var(--color-text); } .sub-nav-item.active { background: var(--rs-green-soft); color: var(--color-primary-h); } /* Ícone inline (o "?" de Sobre o Projeto) alinhado aos PNGs .ds-icon-btn das outras abas. */ .sub-nav-icon { width: 16px; height: 16px; flex-shrink: 0; } @media (max-width: 560px) { .sub-nav-item { padding: 9px 10px; font-size: 12.5px; gap: 6px; } } /* ── Listagem de guias ── */ .guia-grid { display: grid; gap: 12px; } @media (min-width: 700px) { .guia-grid { grid-template-columns: repeat(2, 1fr); } } .guia-card { display: flex; flex-direction: column; gap: 10px; background: var(--bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: var(--transition); } .guia-card:hover { transform: translateY(-2px); border-color: var(--color-primary); box-shadow: var(--shadow-md); color: inherit; } .guia-card-top { display: flex; align-items: center; gap: 10px; } .guia-card-sigla { font-size: 11px; font-weight: 700; letter-spacing: .6px; background: var(--rs-green-soft); color: var(--color-primary-h); border-radius: 20px; padding: 3px 10px; white-space: nowrap; } .guia-card-tempo { margin-left: auto; font-size: 11px; color: var(--color-muted); white-space: nowrap; } .guia-card-title { font-size: 16px; font-weight: 700; line-height: 1.35; } .guia-card-kicker { font-size: 12px; color: var(--color-muted); margin-top: -6px; } .guia-card-desc { font-size: 13px; color: #4a4a58; line-height: 1.6; } .guia-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .guia-tag { font-size: 11px; font-weight: 500; background: var(--bg-app); border: 1px solid var(--color-border); color: var(--color-muted); border-radius: 20px; padding: 2px 9px; } /* Card de destaque (leva ao Fluxo de Trabalho a partir dos guias) */ .destaque-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--rs-green-soft), #f4fbf7); border: 1px solid #c9e7d6; border-radius: var(--radius); padding: 16px 18px; margin-bottom: 22px; text-decoration: none; color: inherit; transition: var(--transition); } .destaque-card:hover { border-color: var(--color-primary); color: inherit; } .destaque-card-icon { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; } .destaque-card-body { flex: 1; min-width: 0; } .destaque-card-title { font-size: 14px; font-weight: 700; } .destaque-card-desc { font-size: 12.5px; color: #4a4a58; line-height: 1.55; } .destaque-card-seta { color: var(--color-primary); flex-shrink: 0; font-size: 18px; } /* ── Artigo: cabeçalho ── */ .artigo-hero { background: var(--bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; box-shadow: var(--shadow-sm); } .artigo-kicker { font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--color-primary); margin-bottom: 8px; } .artigo-title { font-size: 25px; font-weight: 700; line-height: 1.25; } .artigo-lead { font-size: 14.5px; color: #4a4a58; line-height: 1.65; margin-top: 10px; } .artigo-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); } /* ── Artigo: sumário ── */ .artigo-toc { background: var(--bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm); } .artigo-toc-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--color-muted); margin-bottom: 10px; } .artigo-toc ol { margin: 0; padding-left: 20px; } .artigo-toc li { font-size: 13.5px; margin-bottom: 5px; } .artigo-toc a { color: var(--color-text); text-decoration: none; } .artigo-toc a:hover { color: var(--color-primary); text-decoration: underline; } /* ── Artigo: corpo (prosa) ── */ .artigo-body { background: var(--bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm); } .artigo-body > section { scroll-margin-top: 20px; } .artigo-body > section + section { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--color-border); } .artigo-body h2 { font-size: 19px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; } .artigo-body h3 { font-size: 15px; font-weight: 700; margin: 22px 0 8px; } .artigo-body p { font-size: 14.5px; line-height: 1.75; color: #33333d; margin-bottom: 12px; } .artigo-body ul, .artigo-body ol { margin: 0 0 14px; padding-left: 22px; } .artigo-body li { font-size: 14.5px; line-height: 1.7; color: #33333d; margin-bottom: 6px; } .artigo-body li > ul, .artigo-body li > ol { margin-top: 6px; margin-bottom: 4px; } .artigo-body strong { font-weight: 600; color: var(--color-text); } .artigo-body a { color: var(--color-primary-h); } .artigo-body > section > *:last-child { margin-bottom: 0; } .artigo-body blockquote { border-left: 3px solid var(--color-primary); background: var(--bg-app); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 12px 16px; margin: 0 0 14px; } .artigo-body blockquote p { margin-bottom: 6px; font-style: italic; } .artigo-body blockquote p:last-child { margin-bottom: 0; } .artigo-body blockquote cite { font-size: 12px; font-style: normal; color: var(--color-muted); } /* Tabela dentro de artigo — mesmo visual de .detail-table, com rolagem própria */ .artigo-table-wrap { overflow-x: auto; margin-bottom: 16px; } .artigo-table { width: 100%; border-collapse: collapse; min-width: 480px; } /* Matriz de pontuação (7 colunas): 480px esmagaria as colunas no celular. */ .artigo-table--wide { min-width: 680px; } .artigo-table th { background: var(--bg-app); padding: 9px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--color-muted); border: 1px solid var(--color-border); text-align: left; vertical-align: bottom; } .artigo-table td { padding: 10px; font-size: 13px; line-height: 1.6; color: #33333d; border: 1px solid var(--color-border); vertical-align: top; } .artigo-table tbody tr:nth-child(even) td { background: #fcfcfd; } .artigo-table .col-destaque { background: var(--rs-green-soft) !important; font-weight: 600; } .artigo-table caption { caption-side: bottom; font-size: 11.5px; color: var(--color-muted); text-align: left; padding-top: 8px; } .score { font-weight: 700; text-align: center; } .score--0 { color: var(--rs-red); } .score--1 { color: #b45309; } .score--2 { color: var(--color-primary-h); } /* ── Callouts ── */ .callout { border: 1px solid var(--color-border); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--bg-app); padding: 14px 16px; margin: 0 0 16px; } .callout-title { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 7px; } .callout p, .callout li { font-size: 13.5px; line-height: 1.7; margin-bottom: 8px; } .callout > *:last-child { margin-bottom: 0; } .callout ul, .callout ol { padding-left: 20px; margin-bottom: 8px; } .callout--lei { border-left-color: var(--color-primary); background: var(--rs-green-soft); } .callout--lei .callout-title { color: var(--color-primary-h); } .callout--ia { border-left-color: var(--rs-yellow); background: var(--rs-yellow-soft); } .callout--ia .callout-title { color: #92400e; } .callout--alerta { border-left-color: var(--rs-red); background: var(--rs-red-soft); } .callout--alerta .callout-title { color: #a32017; } .callout--copeilot { border-left-color: var(--bg-sidebar); background: #f4f4f6; } .callout--copeilot .callout-title { color: var(--bg-sidebar); } /* ── Grade de dados/evidências ── */ .fact-grid { display: grid; gap: 10px; margin-bottom: 16px; } @media (min-width: 620px) { .fact-grid { grid-template-columns: repeat(3, 1fr); } .fact-grid--2 { grid-template-columns: repeat(2, 1fr); } } .fact { background: var(--bg-app); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 14px; } .fact-num { font-size: 22px; font-weight: 700; color: var(--color-primary-h); line-height: 1.15; } .fact-label { font-size: 12.5px; color: #4a4a58; line-height: 1.5; margin-top: 4px; } /* Nota de fonte: vence `.artigo-body p` na cascata quando usada como parágrafo solto. */ .fact-fonte, .artigo-body p.fact-fonte { font-size: 11.5px; line-height: 1.6; color: var(--color-muted); margin-top: 6px; } /* ── Linha do tempo (fases da pesquisa) ── */ .timeline { position: relative; padding-left: 26px; } .timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); } .timeline-item { position: relative; padding-bottom: 22px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ''; position: absolute; left: -26px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-card); border: 3px solid var(--color-primary); } .timeline-fase { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--color-primary); } .timeline-title { font-size: 15px; font-weight: 700; margin: 2px 0 6px; } /* ── Amostra do dado que trafega em cada passo do pipeline de IA ── */ .pipeline-dado { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; color: var(--color-primary-h); background: var(--rs-green-soft); border: 1px dashed var(--color-primary); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; overflow-x: auto; white-space: nowrap; } /* ── Etapas do ciclo do PEI no app ── */ .fluxo-etapas { display: grid; gap: 10px; margin-bottom: 16px; } @media (min-width: 760px) { .fluxo-etapas { grid-template-columns: repeat(3, 1fr); } } .fluxo-etapa { background: var(--bg-app); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 14px; } .fluxo-etapa-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 700; margin-bottom: 8px; } .fluxo-etapa-title { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; } .fluxo-etapa-desc { font-size: 12.5px; color: #4a4a58; line-height: 1.6; } .fluxo-etapa-quem { font-size: 11px; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 8px; } /* ── Hierarquia cumulativa dos perfis ── */ .hierarquia { display: grid; gap: 8px; align-items: stretch; margin-bottom: 16px; } @media (min-width: 760px) { /* Três níveis com os "+" entre eles, em uma linha só. */ .hierarquia { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; } } .hierarquia-nivel { background: var(--bg-app); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm); padding: 12px 14px; } .hierarquia-papel { font-size: 13.5px; font-weight: 700; color: var(--color-primary-h); margin-bottom: 4px; } .hierarquia-desc { font-size: 12.5px; color: #4a4a58; line-height: 1.6; } .hierarquia-mais { display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--color-muted); line-height: 1; } /* ── Autores do projeto ── */ .autores { display: grid; gap: 12px; margin-bottom: 16px; } @media (min-width: 760px) { .autores { grid-template-columns: repeat(3, 1fr); } } .autor-card { background: var(--bg-app); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 16px; } .autor-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .5px; margin-bottom: 10px; } .autor-nome { font-size: 14px; font-weight: 700; line-height: 1.35; } .autor-papel { font-size: 11px; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .4px; margin: 3px 0 8px; } .autor-bio { font-size: 12.5px; color: #4a4a58; line-height: 1.65; } .autor-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .autor-links a { font-size: 12.5px; font-weight: 600; } /* Marca visualmente o que ainda falta escrever — sai junto com o texto real. */ .autor-vazio { color: var(--color-muted); font-style: italic; } /* ── Referências ── */ .ref-list { list-style: none; padding-left: 0 !important; } .ref-list li { font-size: 12.5px !important; line-height: 1.65 !important; color: #4a4a58 !important; padding-left: 18px; text-indent: -18px; margin-bottom: 9px !important; } /* ── Navegação anterior/próximo no pé do artigo ── */ .artigo-nav { display: grid; gap: 10px; margin-top: 18px; } @media (min-width: 620px) { .artigo-nav { grid-template-columns: repeat(2, 1fr); } } .artigo-nav-item { background: var(--bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: inherit; transition: var(--transition); } .artigo-nav-item:hover { border-color: var(--color-primary); color: inherit; } .artigo-nav-dir { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--color-muted); } .artigo-nav-title { font-size: 13.5px; font-weight: 600; margin-top: 3px; } .artigo-nav-item--proximo { text-align: right; }