/* ============================================================ Carteirinha — design tokens + layout base Tema claro/escuro via [data-theme="dark"] no . ============================================================ */ :root { /* Cores — tema claro */ --bg: #f6f8fb; --surface: #ffffff; --surface-2: #f1f4f9; --border: #e1e6ee; --text: #1a2233; --text-muted: #5a6478; --primary: #2563eb; --primary-700: #1d4ed8; --primary-50: #eff4ff; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0284c7; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 4px 16px rgba(15, 23, 42, .08); --shadow-lg: 0 12px 40px rgba(15, 23, 42, .14); --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --sidebar-w: 250px; --header-h: 60px; --transition: .2s ease; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } [data-theme="dark"] { --bg: #0f1320; --surface: #161b2c; --surface-2: #1d2438; --border: #2a3148; --text: #e8ebf3; --text-muted: #98a1b8; --primary: #4f7eff; --primary-700: #3a66e6; --primary-50: #1c2540; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 6px 22px rgba(0, 0, 0, .45); --shadow-lg: 0 14px 50px rgba(0, 0, 0, .55); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background var(--transition), color var(--transition); } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ========================================================================== TABELAS RESPONSIVAS — scroll horizontal automático em qualquer .table ========================================================================== - Qualquer .card ou .form-card que contém uma ganha scroll horizontal AUTOMATICAMENTE (sobrescreve o inline overflow:hidden). - Tabelas "soltas" (sem wrapper) podem ser envolvidas em
. - O scroll só APARECE quando a tabela é mais larga que o container — em desktop largo, nenhuma barra é visível. ============================================================================ */ .card:has(table.table):not(.no-table-scroll), .form-card:has(table.table):not(.no-table-scroll), .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .table-wrap { border-radius: var(--radius, 8px); border: 1px solid var(--border); background: var(--surface); } /* Links que envolvem componentes de UI (cards, botões, linhas de lista, chips, etc) NUNCA devem ganhar sublinhado no hover. Selecionamos por padrões de classe pra não precisar marcar um por um. Se algum componente novo aparecer com sublinhado indesejado, basta incluir um padrão aqui ou adicionar a classe ".no-underline" no . */ a.btn, a.btn:hover, a[class*="-card"], a[class*="-card"]:hover, a[class*="-row"], a[class*="-row"]:hover, a[class*="-btn"], a[class*="-btn"]:hover, a[class*="-chip"], a[class*="-chip"]:hover, a[class*="-tab"], a[class*="-tab"]:hover, a.no-underline, a.no-underline:hover, a.qa-btn, a.qa-btn:hover, a.msg-row, a.msg-row:hover, a.recent-row, a.recent-row:hover, a.assignment-row, a.assignment-row:hover, a.trip-row, a.trip-row:hover, a.student-card, a.student-card:hover, a.ms-result, a.ms-result:hover, a.alert-card, a.alert-card:hover, a.stat-card, a.stat-card:hover { text-decoration: none; } /* Mesma regra pra qualquer descendente do que herde o sublinhado por causa do hover propagado (ex:
Texto
) */ a.btn *, a[class*="-card"] *, a[class*="-row"] *, a[class*="-btn"] *, a.qa-btn *, a.msg-row *, a.recent-row *, a.assignment-row *, a.trip-row *, a.student-card *, a.ms-result *, a.no-underline * { text-decoration: inherit; } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; color: var(--text); } h1 { font-size: 1.6rem; font-weight: 700; } h2 { font-size: 1.3rem; font-weight: 600; } h3 { font-size: 1.1rem; font-weight: 600; } p { margin: 0 0 1em; color: var(--text); } code, pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .15em .4em; font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ===================== Layout ===================== */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--header-h) 1fr; grid-template-areas: "sidebar header" "sidebar main"; min-height: 100vh; } .app-header { grid-area: header; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 10; } .app-header .crumbs { color: var(--text-muted); font-size: .92rem; } .app-header .header-actions { display: flex; align-items: center; gap: .5rem; } .app-sidebar { grid-area: sidebar; background: var(--surface); border-right: 1px solid var(--border); padding: 1rem 0; overflow-y: auto; } .app-sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: 0 1.25rem 1rem; border-bottom: 1px solid var(--border); } .app-sidebar .brand-mark { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--primary-700)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.1rem; } .app-sidebar .brand-name { font-weight: 700; font-size: 1.05rem; } .app-sidebar .brand-tag { font-size: .75rem; color: var(--text-muted); } .app-sidebar nav { padding: 1rem .75rem; } .app-sidebar nav .nav-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); padding: 1rem .75rem .5rem; } .app-sidebar nav a { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: var(--radius-sm); color: var(--text); font-weight: 500; margin-bottom: 2px; position: relative; /* p/ a barrinha lateral do active */ transition: background-color .15s, color .15s; } .app-sidebar nav a:hover { background: var(--surface-2); text-decoration: none; } .app-sidebar nav a.active { background: var(--primary-50); color: var(--primary); font-weight: 600; } .app-sidebar nav a.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--primary); border-radius: 0 3px 3px 0; } .app-sidebar nav a.active .ic { opacity: 1; } [data-theme="dark"] .app-sidebar nav a.active { background: rgba(37,99,235,.18); color: #93c5fd; } .app-sidebar nav a .ic { width: 18px; text-align: center; opacity: .8; } .app-main { grid-area: main; padding: 1.5rem; overflow-x: hidden; } @media (max-width: 768px) { .app-shell { grid-template-columns: 1fr; grid-template-areas: "header" "main"; } .app-sidebar { display: none; } } /* ===================== Components ===================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem; } .card + .card { margin-top: 1rem; } .card-header { display: flex; align-items: center; justify-content: space-between; margin: -1.25rem -1.25rem 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .card-header h2, .card-header h3 { margin: 0; } .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--surface-2); color: var(--text); font-weight: 500; font-family: inherit; font-size: .9rem; cursor: pointer; transition: all var(--transition); } .btn:hover { background: var(--border); } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-700); } .btn-success { background: var(--success); color: #fff; } .btn-warning { background: var(--warning); color: #fff; } .btn-danger { background: var(--danger); color: #fff; } .btn-ghost { background: transparent; border-color: var(--border); } .btn-sm { padding: .35rem .7rem; font-size: .85rem; } .form-group { margin-bottom: 1rem; } .form-label { display: block; font-weight: 500; font-size: .9rem; margin-bottom: .35rem; color: var(--text); } .form-label .req { color: var(--danger); } .form-control { width: 100%; padding: .55rem .75rem; font-family: inherit; font-size: .95rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border var(--transition), box-shadow var(--transition); } .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); } .form-control.is-invalid { border-color: var(--danger); } .form-error { color: var(--danger); font-size: .85rem; margin-top: .3rem; } .form-help { color: var(--text-muted); font-size: .85rem; margin-top: .3rem; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .alert { padding: .75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 1rem; } .alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; } .alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; } [data-theme="dark"] .alert-success { background: #052e1f; color: #6ee7b7; } [data-theme="dark"] .alert-warning { background: #2c1d05; color: #fcd34d; } [data-theme="dark"] .alert-danger { background: #2d0b0b; color: #fca5a5; } [data-theme="dark"] .alert-info { background: #0a1c3a; color: #93c5fd; } .badge { display: inline-block; padding: .2rem .55rem; font-size: .75rem; font-weight: 600; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .badge-success { background: var(--success); color: #fff; border-color: transparent; } .badge-warning { background: var(--warning); color: #fff; border-color: transparent; } .badge-danger { background: var(--danger); color: #fff; border-color: transparent; } .table { width: 100%; border-collapse: collapse; font-size: .92rem; } .table th, .table td { padding: .65rem .85rem; text-align: left; border-bottom: 1px solid var(--border); } .table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 600; background: var(--surface-2); } .table tbody tr:hover { background: var(--surface-2); } .theme-toggle { background: transparent; border: 1px solid var(--border); width: 36px; height: 36px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition); } .theme-toggle:hover { background: var(--surface-2); } /* ===================== Stats ===================== */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; } .stat-card .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .stat-card .value { font-size: 1.6rem; font-weight: 700; margin-top: .35rem; } .stat-card .delta { font-size: .85rem; color: var(--success); } /* ===================== List toolbar / pagination ===================== */ .list-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .65rem .85rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .list-search { position: relative; flex: 1; min-width: 220px; } .list-search .ic { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .list-search input { width: 100%; padding: .5rem .75rem .5rem 2.1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: .9rem; outline: none; } .list-search input:focus { border-color: var(--primary); background: var(--surface); } .list-search .list-clear { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); background: var(--border); color: var(--text); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; line-height: 1; text-decoration: none; } .list-search .list-clear:hover { background: var(--danger); color: #fff; } .list-filter { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .65rem; color: var(--text); font-family: inherit; font-size: .9rem; cursor: pointer; } .list-filter:focus { border-color: var(--primary); outline: none; } .list-count { margin-left: auto; color: var(--text-muted); font-size: .85rem; } .pagination { display: flex; gap: .25rem; justify-content: center; margin: 1.5rem 0; } .page-btn { min-width: 34px; height: 34px; padding: 0 .65rem; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); text-decoration: none; font-size: .88rem; font-weight: 500; } .page-btn:hover { background: var(--surface-2); text-decoration: none; } .page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } .page-btn.disabled { opacity: .35; cursor: not-allowed; pointer-events: none; } /* ===================== Confirm Modal ===================== */ .cm-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(4px); z-index: 2000; display: grid; place-items: center; padding: 1rem; } .cm-backdrop.opening { animation: cm-fade-in .2s ease forwards; } .cm-backdrop.closing { animation: cm-fade-out .18s ease forwards; } @keyframes cm-fade-in { from { opacity: 0 } } @keyframes cm-fade-out { to { opacity: 0 } } .cm-card { background: var(--surface); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); width: min(92vw, 420px); padding: 1.75rem 1.5rem 1.25rem; text-align: center; transform: scale(.95); animation: cm-pop .25s cubic-bezier(.34, 1.56, .64, 1) forwards; } @keyframes cm-pop { to { transform: scale(1) } } .cm-backdrop.closing .cm-card { animation: cm-pop-out .15s ease forwards; } @keyframes cm-pop-out { to { transform: scale(.95); opacity: 0 } } .cm-icon { font-size: 3rem; line-height: 1; margin-bottom: .35rem; } .cm-title { margin: 0 0 .35rem; font-size: 1.15rem; color: var(--text); font-weight: 600; } .cm-message { color: var(--text-muted); font-size: .92rem; line-height: 1.5; margin: 0 0 1.25rem; white-space: pre-wrap; } /* Se não houver título, a mensagem fica mais em destaque */ .cm-title[hidden] + .cm-message { color: var(--text); font-size: 1.05rem; font-weight: 500; margin-top: .25rem; } .cm-actions { display: flex; gap: .5rem; justify-content: center; } .cm-actions .btn { min-width: 110px; justify-content: center; } /* ===================== Global Search (Cmd+K) ===================== */ [hidden] { display: none !important; } .gs-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); backdrop-filter: blur(4px); z-index: 1000; display: grid; align-items: flex-start; justify-items: center; padding-top: 12vh; animation: gs-fade .15s ease; } @keyframes gs-fade { from { opacity: 0 } } .gs-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); width: min(90vw, 640px); max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; } .gs-search { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); } .gs-icon { color: var(--text-muted); font-size: 1.1rem; } .gs-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 1rem; font-family: inherit; } .gs-esc { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: .72rem; color: var(--text-muted); font-family: ui-monospace, monospace; } .gs-results { overflow-y: auto; flex: 1; } .gs-empty { padding: 2.5rem 1.5rem; text-align: center; color: var(--text-muted); font-size: .9rem; } .gs-group + .gs-group { border-top: 1px solid var(--border); margin-top: .25rem; padding-top: .25rem; } .gs-group-head { font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); padding: .5rem 1rem .25rem; background: var(--surface-2); display: flex; gap: .35rem; align-items: center; } .gs-item { display: block; padding: .55rem 1rem; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); transition: background .1s; } .gs-item:last-child { border-bottom: none; } .gs-item:hover, .gs-item.focus { background: var(--primary-50); color: var(--primary); text-decoration: none; } .gs-item-title { font-weight: 600; font-size: .92rem; } .gs-item-sub { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; } .gs-item:hover .gs-item-sub, .gs-item.focus .gs-item-sub { color: var(--primary); opacity: .8; } .gs-foot { padding: .55rem 1rem; display: flex; gap: 1rem; background: var(--surface-2); border-top: 1px solid var(--border); font-size: .72rem; color: var(--text-muted); } .gs-foot kbd { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; font-family: ui-monospace, monospace; font-size: .7rem; } /* =================================================== * Combobox (busca com autocomplete) — reutilizável. * Estrutura HTML esperada: *
* * * *
* =================================================== */ .combobox { position: relative; } .combobox-input[disabled] { background:#f1f5f9; cursor:not-allowed; color:#94a3b8; } .combobox-input.has-selection { font-weight: 600; } .combobox-input.combobox-loading { background-image: linear-gradient(90deg, transparent, rgba(59,130,246,.12), transparent); background-size: 200% 100%; background-position: 0 0; animation: cb-shimmer 1.1s ease-in-out infinite; } @keyframes cb-shimmer { 100% { background-position: -200% 0; } } .combobox-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; max-height: 300px; overflow-y: auto; box-shadow: 0 8px 24px rgba(15,23,42,.12); z-index: 100; } .combobox-list li[role="option"] { padding: .55rem .75rem; cursor: pointer; font-size: .9rem; border-bottom: 1px solid #f1f5f9; line-height: 1.35; } .combobox-list li[role="option"]:last-child { border-bottom: none; } .combobox-list li.is-active, .combobox-list li[role="option"]:hover { background: rgba(59,130,246,.08); } .combobox-list mark { background: rgba(59,130,246,.22); color: inherit; padding: 0 1px; border-radius: 2px; font-weight: 600; } .combobox-list .secondary { color: #64748b; font-size: .78rem; display: block; margin-top: .15rem; } .combobox-list li.suggest-row { background: #fef3c7; font-weight: 600; border-top: 2px solid #fcd34d; color:#92400e; } .combobox-list li.suggest-row.is-active, .combobox-list li.suggest-row:hover { background: #fde68a; } .combobox-list li.any-row { background: #f8fafc; font-weight: 600; color:#475569; border-bottom: 2px solid #e2e8f0; } .combobox-list li.any-row.is-active, .combobox-list li.any-row:hover { background: #e2e8f0; } .combobox-list .empty { padding: .85rem; color: #64748b; text-align: center; font-size: .85rem; cursor: default; font-style: italic; } .combobox-error { margin-top: .35rem; font-size: .78rem; color: #b45309; background: #fef3c7; padding: .4rem .6rem; border-radius: 6px; border-left: 3px solid #f59e0b; }