/* ========================================================= Controle de Entrevistas — UI Pro - Mantém compatibilidade com classes existentes - Suporta light/dark (auto e manual via [data-theme="dark"]) - Acessível (contraste, foco visível) - Mobile-first e responsivo ========================================================= */ /* ---------- Design tokens ---------- */ :root{ /* Cores base (light) */ --bg: #f6f7fb; --surface: #ffffff; --text: #0f172a; /* slate-900 */ --text-muted: #64748b; /* slate-500 */ --border: #e5e7eb; /* gray-200 */ --shadow: 0 8px 30px rgba(16,24,40,.06); /* Ação/Brand */ --brand: #111827; /* zinc-900 */ --brand-ink: #ffffff; --brand-weak: #1f2937; /* slate-800 */ --brand-weak-ink:#e5e7eb; /* Estados */ --success: #16a34a; --warning: #d97706; --danger: #b91c1c; --info: #2563eb; --ring: 2px solid rgba(37, 99, 235, .35); /* Badges de status */ --st-aguardando-bg:#fff7ed; --st-aguardando-bd:#fdba74; --st-aguardando-tx:#9a3412; --st-remarcado-bg:#eff6ff; --st-remarcado-bd:#93c5fd; --st-remarcado-tx:#1d4ed8; --st-gravado-bg:#ecfdf5; --st-gravado-bd:#86efac; --st-gravado-tx:#166534; --st-editado-bg:#f5f3ff; --st-editado-bd:#c4b5fd; --st-editado-tx:#6d28d9; /* Dimensões */ --radius: 12px; --radius-pill: 999px; --gap: 12px; --container: 1120px; /* Tipografia */ --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; /* Transitions */ --tr: 160ms ease; } /* Dark mode automático; para forçar, adicione */ @media (prefers-color-scheme: dark) { :root{ --bg: #0b1228; --surface: #0f172a; --text: #e5e7eb; --text-muted: #94a3b8; --border: rgba(255,255,255,.08); --shadow: 0 12px 40px rgba(0,0,0,.35); --brand: #60a5fa; --brand-ink: #0b1228; --brand-weak: #1e293b; --brand-weak-ink:#e5e7eb; --st-aguardando-bg:rgba(253,186,116,.1); --st-aguardando-bd:#fdba74; --st-aguardando-tx:#fdba74; --st-remarcado-bg: rgba(147,197,253,.1); --st-remarcado-bd:#93c5fd; --st-remarcado-tx:#93c5fd; --st-gravado-bg: rgba(134,239,172,.1); --st-gravado-bd:#86efac; --st-gravado-tx:#86efac; --st-editado-bg: rgba(196,181,253,.1); --st-editado-bd:#c4b5fd; --st-editado-tx:#c4b5fd; } } html[data-theme="dark"]{ --bg: #0b1228; --surface: #0f172a; --text: #e5e7eb; --text-muted: #94a3b8; --border: rgba(255,255,255,.08); --shadow: 0 12px 40px rgba(0,0,0,.35); --brand: #60a5fa; --brand-ink: #0b1228; --brand-weak: #1e293b; --brand-weak-ink:#e5e7eb; --st-aguardando-bg:rgba(253,186,116,.1); --st-aguardando-bd:#fdba74; --st-aguardando-tx:#fdba74; --st-remarcado-bg: rgba(147,197,253,.1); --st-remarcado-bd:#93c5fd; --st-remarcado-tx:#93c5fd; --st-gravado-bg: rgba(134,239,172,.1); --st-gravado-bd:#86efac; --st-gravado-tx:#86efac; --st-editado-bg: rgba(196,181,253,.1); --st-editado-bd:#c4b5fd; --st-editado-tx:#c4b5fd; } /* ---------- Base ---------- */ *{box-sizing:border-box} html, body{ height:100%; } body{ margin:0; font-family: var(--font); color: var(--text); background: var(--bg); font-size: var(--fs-16); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img{max-width:100%; height:auto; display:block; border-radius:8px} /* Links */ a{ color: var(--info); text-decoration: none; transition: color var(--tr), opacity var(--tr) } a:hover{ opacity:.95 } a:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.35) } /* Pequenos utilitários */ .small{ font-size: var(--fs-12); color: var(--text-muted) } .muted{ color: var(--text-muted) } .text-danger{ color: var(--danger) } .text-success{ color: var(--success) } /* ---------- Header ---------- */ header{ position:sticky; top:0; z-index:50; background: var(--brand); color: var(--brand-ink); padding: 14px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid rgba(255,255,255,.08); } header a{ color: var(--brand-ink); text-decoration:none; margin-left:12px; opacity:.95 } header a:hover{ opacity:1 } /* ---------- Layout ---------- */ .container{ max-width: var(--container); margin: 22px auto; padding: 0 16px; } /* ---------- Cards ---------- */ .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); } .card h2, .card h3{ margin:0 0 8px 0; font-weight:700 } .card h2{ font-size: 20px } .card h3{ font-size: 16px; color: var(--text) } /* ---------- Botões ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--brand); background: var(--brand); color: var(--brand-ink); text-decoration:none; cursor: pointer; transition: transform var(--tr), filter var(--tr), background var(--tr), color var(--tr), border-color var(--tr); min-height: 40px; line-height: 1; } .btn:hover{ filter: brightness(1.06) } .btn:active{ transform: translateY(1px) } .btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.35) } .btn.secondary{ background: var(--surface); color: var(--text); border-color: var(--border); } .btn.secondary:hover{ background: rgba(17,24,39,.06) } .btn.danger{ background: var(--danger); border-color: var(--danger); color: #fff; } .btn.success{ background: var(--success); border-color: var(--success); color: #fff; } .form-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; flex-wrap: wrap; } /* ---------- Badges ---------- */ .badge{ display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: rgba(0,0,0,.03); font-size: var(--fs-12); font-weight: 600; white-space: nowrap; } /* Badges de status semântico */ .status-aguardando{ background: var(--st-aguardando-bg); border-color: var(--st-aguardando-bd); color: var(--st-aguardando-tx) } .status-remarcado { background: var(--st-remarcado-bg); border-color: var(--st-remarcado-bd); color: var(--st-remarcado-tx) } .status-gravado { background: var(--st-gravado-bg); border-color: var(--st-gravado-bd); color: var(--st-gravado-tx) } .status-editado { background: var(--st-editado-bg); border-color: var(--st-editado-bd); color: var(--st-editado-tx) } /* ---------- Tabelas ---------- */ .table-responsive{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch } table{ width:100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow:hidden } thead th{ position: sticky; top:0; z-index:1; background: color-mix(in srgb, var(--surface) 94%, #fff 6%); color: var(--text); font-weight: 700; font-size: var(--fs-13); text-align:left; border-bottom: 1px solid var(--border); padding: 11px 10px; } tbody td{ padding: 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-14); color: var(--text); } tbody tr:last-child td{ border-bottom: none } /* Zebra */ .table-zebra tbody tr:nth-child(odd){ background: color-mix(in srgb, var(--surface) 98%, #000 2%) } .table-zebra tbody tr:nth-child(even){ background: color-mix(in srgb, var(--surface) 94%, #000 6%) } .table-zebra tbody tr:hover{ background: color-mix(in srgb, var(--surface) 88%, #2563eb 12%); transition: background var(--tr) } /* Estados vazios */ table .empty{ text-align:center; color: var(--text-muted); padding: 14px } /* ---------- Formulários ---------- */ label{ display:block; margin: 0 0 6px 2px; font-size: var(--fs-13); color: var(--text-muted) } input, select, textarea{ width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: var(--fs-14); transition: border-color var(--tr), box-shadow var(--tr), background var(--tr); } input::placeholder, textarea::placeholder{ color: color-mix(in srgb, var(--text-muted) 85%, var(--text) 15%) } input:focus, select:focus, textarea:focus{ outline: none; border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(147,197,253,.35); } /* Campos inválidos */ input:invalid, select:invalid, textarea:invalid{ border-color: color-mix(in srgb, var(--danger) 60%, var(--border) 40%); } /* Textarea */ textarea{ min-height: 96px; resize: vertical } /* ---------- Grid (mantendo suas classes) ---------- */ .row{ display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap) } .col-12{ grid-column: span 12 } .col-6{ grid-column: span 6 } .col-4{ grid-column: span 4 } .col-3{ grid-column: span 3 } /* ---------- Alerts (extras úteis) ---------- */ .alert{ padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 92%, #000 8%); font-size: var(--fs-14); } .alert.success{ border-color: color-mix(in srgb, var(--success) 40%, var(--border) 60%) } .alert.warning{ border-color: color-mix(in srgb, var(--warning) 40%, var(--border) 60%) } .alert.danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--border) 60%) } /* ---------- Responsivo ---------- */ @media (max-width: 1024px){ .container{ max-width: 920px } } @media (max-width: 900px){ .col-4{ grid-column: span 6 } .col-3{ grid-column: span 6 } .col-2{ grid-column: span 6 } .form-actions{ justify-content: flex-start } } @media (max-width: 720px){ .row{ grid-template-columns: repeat(6, 1fr) } .col-6, .col-4, .col-3, .col-2{ grid-column: span 6 } thead th, tbody td{ font-size: var(--fs-13); padding: 9px } .badge{ font-size: var(--fs-12) } /* Esconder colunas menos críticas na lista principal */ .table--interviews th:nth-child(4), .table--interviews td:nth-child(4), /* Cargo */ .table--interviews th:nth-child(5), .table--interviews td:nth-child(5), /* Stand */ .table--interviews th:nth-child(8), .table--interviews td:nth-child(8){ /* Histórico */ display:none; } } @media (max-width: 480px){ .form-actions{ flex-direction: column; align-items: stretch } .btn, .btn.secondary, .btn.danger{ width:100%; text-align:center } } /* ---------- Qualidade de vida ---------- */ /* Foco visível em tudo que for clicável */ a:focus-visible, .btn:focus-visible, [role="button"]:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.35); } /* Cursor consistente para botões como */ a.btn{ cursor: pointer } /* ---------- Extras opcionais ---------- */ /* Títulos principais dentro de cards com status badge */ .card h2 .badge{ margin-left: 8px } /* Ícones em botões (caso use) */ .btn [data-icon]{ display:inline-flex; } /* ---------- Table density toggle (se quiser compactar) ---------- */ /* .table-compact tbody td{ padding: 7px 8px } */