/* AMANCO · Companhia de Estágios */
:root {
  --font-family: 'Open Sans', sans-serif;
  --color-background: #F9FAFB;
  --color-card-bg: #FFFFFF;
  --color-card-border: #E5E7EB;
  --color-card-shadow: rgba(12,116,53,.08);
  --color-link: #0C7435;
  --color-header: #1F2937;
  --color-label: #374151;
  --color-input-border: #D1D5DB;
  --color-input-text: #111827;
  --color-submit-btn-bg: #0C7435;
  --color-submit-btn-hover: #095C2A;
  --color-error: #DC2626;
  --color-header-subtext: #6B7280;
  --border-radius-card: 8px;
  font-family: var(--font-family);
  color: var(--color-label);
  background: var(--color-background);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 12px; line-height: 1.6; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #0C74353D; outline-offset: 3px; }
button:disabled { cursor: default; opacity: .55; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--color-header); }
h1 { font-size: 28px; font-weight: 600; letter-spacing: -.8px; line-height: 1.3; }
h2 { font-size: 16px; font-weight: 600; line-height: 1.4; }
.icon { width: 20px; height: 20px; display: inline-block; flex: 0 0 auto; vertical-align: middle; }
[hidden] { display: none !important; }
.topbar { background: white; border-top: 3px solid #0C7435; border-bottom: 1px solid #E5E7EB; }
.topbar-inner { max-width: 1440px; margin: auto; padding: 20px 48px; display: flex; align-items: center; justify-content: space-between; }
.product-brand { display: flex; align-items: center; gap: 12px; color: #1F2937; font-size: 14px; font-weight: 600; line-height: 1.35; }
.product-brand > .icon { width: 36px; height: 36px; padding: 6px; background: #ECFDF5; border: 1px solid #D4ECDD; border-radius: 8px; color: #0C7435; }
.brand-sub { display: block; color: #7D8780; font-size: 10px; letter-spacing: 1.6px; margin-top: 3px; font-weight: 500; }
.header-right { display: flex; align-items: center; gap: 22px; }
.logo { display: block; width: 183px; height: 45px; object-fit: contain; }
.header-divider { height: 26px; width: 1px; background: #E5E7EB; }
.logout-button { padding: 8px; display: flex; background: transparent; color: #7C827E; border: 0; border-radius: 6px; }
.logout-button:hover { color: #0C7435; background: #ECFDF5; }
.dashboard { max-width: 1440px; margin: auto; padding: 0 48px 32px; }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #8A9290; padding: 24px 0 28px; font-size: 11px; }
.breadcrumb span { color: #BDC2BF; }
.breadcrumb b { font-weight: 500; color: #53645B; }
.page-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 24px; }
.page-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.client-pill { color: #0C7435; font-weight: 700; letter-spacing: 1.2px; font-size: 11px; }
.view-pill { font-size: 10px; display: flex; align-items: center; gap: 5px; border: 1px solid #DEE4E0; padding: 2px 7px; border-radius: 5px; color: #68766B; }
.view-pill .icon { height: 11px; width: 11px; }
.page-heading p { color: #7C8480; font-size: 13px; margin-top: 8px; }
.page-actions { display: flex; gap: 10px; flex: 0 0 auto; padding-bottom: 2px; }
.btn { border-radius: 6px; padding: 10px 16px; height: 42px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, border-color .15s; white-space: nowrap; }
.btn .icon { width: 16px; height: 16px; }
.btn-primary { background: #0C7435; color: white; border: 1px solid #0C7435; box-shadow: 0 2px 3px #0C743510; }
.btn-primary:hover { background: #095C2A; border-color: #095C2A; }
.btn-secondary { background: white; color: #4B5750; border: 1px solid #D8DFDA; }
.btn-secondary:hover { border-color: #0C7435; color: #0C7435; }
.sync-banner { display: flex; align-items: center; gap: 9px; border: 1px solid #DAEADF; background: #F0F8F3; color: #536F5F; padding: 12px 16px; border-radius: 6px; margin-bottom: 24px; font-size: 10px; flex-wrap: wrap; }
.sync-banner b { font-weight: 600; color: #0C7435; }
.sync-dot { height: 6px; width: 6px; background: #2A9A58; border-radius: 50%; box-shadow: 0 0 0 3px #2A9A5810; }
.period-label { margin-left: auto; color: #78877C; font-size: 10px; }
.sync-banner.warning { background: #FFF9EC; border-color: #F3E3BD; }
.sync-feedback { padding: 12px 16px; margin-bottom: 20px; background: #ECFDF5; color: #0C7435; border: 1px solid #A7F3D0; border-radius: 6px; }
.kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.kpi { background: white; border: 1px solid #E5E7EB; border-radius: 8px; padding: 19px 20px 18px; box-shadow: 0 3px 12px #0C743504; }
.kpi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.kpi h2 { font-size: 12px; font-weight: 600; color: #69746B; }
.metric-icon { display: inline-flex; border-radius: 6px; color: #6C8575; background: #F4F7F5; padding: 7px; }
.metric-icon .icon { width: 17px; height: 17px; }
.kpi > strong { color: #263B2D; font-size: 34px; font-weight: 600; letter-spacing: -1px; line-height: 1.2; display: block; margin-bottom: 8px; }
.kpi-note { font-size: 10px; color: #909892; }
.completed-kpi { border-top: 2px solid #0C7435; padding-top: 18px; }
.completed-kpi > strong { color: #0C7435; }
.completed-kpi .metric-icon { color: #0C7435; background: #EAF5EF; }
.pending-kpi .metric-icon { color: #A88434; background: #FAF6EC; }
.metric-date { font-size: 20px; letter-spacing: -.3px; display: block; }
.metric-date small { display: block; font-size: 15px; color: #617568; font-weight: 400; margin-top: 4px; }
.metric-date small span { font-size: 10px; letter-spacing: 0; color: #99A19B; }
.panel { border: 1px solid #E5E7EB; border-radius: 8px; background: white; box-shadow: 0 4px 16px #0C743504; }
.status-panel { padding: 22px 24px 26px; margin-bottom: 24px; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; }
.section-note { color: #949B96; font-size: 10px; }
.status-bars { display: flex; gap: 40px; flex-wrap: wrap; }
.status-bar { flex: 1 1 240px; max-width: 430px; }
.bar-label { display: flex; align-items: center; justify-content: space-between; color: #65746A; font-size: 11px; margin-bottom: 9px; }
.bar-label > span { display: flex; align-items: center; gap: 7px; }
.bar-label strong { color: #435E4C; font-size: 12px; }
.bar-label small { color: #9AA39C; font-size: 10px; margin-left: 10px; font-weight: 400; }
.bar-dot { height: 7px; width: 7px; border-radius: 2px; background: #82B791; }
.archived-dot { background: #0C7435; }
.bar-track { height: 6px; background: #F0F4F1; border-radius: 10px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 10px; background: #82B791; }
.archived-fill { background: #0C7435; }
.table-heading { padding: 24px 24px 20px; display: flex; justify-content: space-between; align-items: flex-start; }
.table-heading p { color: #89928C; font-size: 11px; margin-top: 5px; }
.table-total { color: #738579; font-size: 10px; border: 1px solid #E3E9E5; border-radius: 5px; padding: 3px 8px; }
.filterbar { padding: 0 24px 22px; display: flex; align-items: center; gap: 10px; }
.searchbox { display: flex; align-items: center; border: 1px solid #DCE3DE; background: #FAFCFA; border-radius: 6px; height: 39px; flex: 1; min-width: 160px; padding: 0 12px; gap: 8px; }
.searchbox .icon { width: 16px; height: 16px; color: #9AA99F; }
.searchbox input { width: 100%; padding: 0; outline: 0; border: 0; background: transparent; color: #374151; font-size: 11px; }
.searchbox:focus-within { border-color: #0C7435; box-shadow: 0 0 0 2px #0C743515; }
.filterbar select { border: 1px solid #DCE3DE; border-radius: 6px; background: white; color: #67736B; padding: 0 28px 0 12px; height: 39px; font-size: 11px; max-width: 240px; }
.text-button { border: 0; background: transparent; color: #86928A; font-size: 10px; padding: 8px 4px; white-space: nowrap; }
.text-button:hover { color: #0C7435; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 740px; text-align: left; }
thead { background: #F7F9F7; }
th { font-size: 10px; text-transform: uppercase; font-weight: 600; letter-spacing: .7px; color: #8A968E; border-top: 1px solid #EAF0EA; border-bottom: 1px solid #EAF0EA; padding: 12px 20px; white-space: nowrap; }
th:first-child, td:first-child { padding-left: 24px; }
td { padding: 22px 20px; border-bottom: 1px solid #EFF2EF; vertical-align: middle; font-size: 11px; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #FBFDFC; }
.person { display: flex; align-items: center; gap: 12px; min-width: 190px; }
.avatar { height: 33px; width: 33px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; background: #EDF5EF; color: #649376; font-size: 10px; font-weight: 600; border-radius: 50%; }
.person-name { display: block; font-size: 11px; font-weight: 600; color: #3A4D40; max-width: 230px; }
.trello-link { display: block; font-size: 9px; color: #96A39A; margin-top: 4px; }
.trello-link:hover { color: #0C7435; }
.collaborator { color: #727D76; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 115px; max-width: 240px; }
.tag { display: inline-block; border-radius: 4px; padding: 3px 7px; border: 1px solid #D8ECDC; background: #F0F8F2; color: #4D8A60; font-size: 9px; font-weight: 600; white-space: nowrap; }
.tag.archived { color: #0C7435; background: #E5F4EA; border-color: #CAE5D3; }
.tag.pending { background: #FBF6E9; border-color: #F2E5C2; color: #A58A48; }
.tag.neutral { background: #F5F6F5; border-color: #E5E7EB; color: #88918B; }
.activity { white-space: nowrap; color: #64796C; font-size: 11px; }
.activity small { display: block; color: #A0A8A2; font-size: 9px; margin-top: 4px; }
.updates-button { display: flex; align-items: center; gap: 6px; color: #0C7435; border: 0; background: #F3F9F5; border-radius: 5px; padding: 8px 10px; font-size: 10px; white-space: nowrap; }
.updates-button .icon { width: 13px; height: 13px; }
.updates-button .icon:last-child { width: 11px; height: 11px; margin-left: 4px; }
.updates-button:hover { background: #E7F4EC; }
.table-footer { padding: 14px 24px; border-top: 1px solid #EDF1EE; display: flex; justify-content: space-between; align-items: center; color: #9AA39C; font-size: 10px; gap: 12px; }
.table-footer span:last-child { display: flex; gap: 5px; align-items: center; font-size: 9px; }
.table-footer .icon { width: 11px; height: 11px; }
.empty-state { text-align: center; padding: 44px 20px; color: #88978D; }
.empty-state > .icon { width: 28px; height: 28px; }
.empty-state h3 { font-size: 14px; margin: 12px 0 5px; }
.empty-state p { font-size: 12px; margin-bottom: 16px; }
.rules-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; color: #96A098; font-size: 10px; max-width: 1000px; }
.rules-note .icon { width: 15px; height: 15px; margin-top: 1px; color: #7C9A86; }
.rules-note b { font-weight: 600; color: #7D8C82; }
.automation-note { display: flex; justify-content: space-between; gap: 20px; color: #8F9D94; font-size: 10px; margin-top: 16px; }
.automation-note .icon { width: 13px; height: 13px; margin-right: 4px; }
.site-footer { max-width: 1440px; margin: auto; padding: 20px 48px; border-top: 1px solid #E5E7EB; color: #A0A9A3; display: flex; justify-content: space-between; gap: 20px; font-size: 10px; }
.sep { margin: 0 10px; color: #CAD0CC; }
.eyebrow { color: #0C7435; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
.muted { color: #8B958E; }
/* Password gates are normal forms; no browser HTTP Basic dialogue. */
.login-main { max-width: 1100px; margin: auto; min-height: calc(100vh - 152px); display: flex; align-items: center; justify-content: space-between; padding: 80px 48px; gap: 80px; }
.login-story { flex: 1; }
.login-story h1 { font-size: 40px; line-height: 1.25; margin: 20px 0; color: #244632; letter-spacing: -1.5px; }
.title-dot { color: #0C7435; }
.login-story p { font-size: 14px; line-height: 1.8; color: #84958B; }
.story-line { height: 2px; width: 46px; background: #0C7435; margin: 40px 0 25px; }
.story-sign { color: #567663; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.story-sign span { color: #A0ADA5; display: block; font-size: 10px; letter-spacing: 0; font-weight: 400; margin-top: 4px; }
.login-card { flex: 0 0 375px; padding: 34px; border: 1px solid #E0E8E2; border-radius: 8px; box-shadow: 0 12px 40px #0C743507; background: white; }
.lock-symbol { display: flex; align-items: center; justify-content: center; color: #0C7435; background: #EAF6EE; border: 1px solid #D8EBDD; height: 44px; width: 44px; border-radius: 9px; margin-bottom: 22px; }
.login-card h2 { font-size: 24px; margin: 8px 0; letter-spacing: -.5px; }
.login-card > p { color: #8C9890; font-size: 11px; margin-bottom: 27px; }
.login-card label { display: block; margin-bottom: 7px; font-size: 11px; color: #606F65; font-weight: 600; }
.password-wrap { display: flex; align-items: center; border: 1px solid #D1D5DB; border-radius: 6px; height: 46px; }
.password-wrap input { border: 0; padding: 12px; font-size: 12px; color: #374151; border-radius: 6px; width: 100%; outline: 0; min-width: 0; }
.password-wrap:focus-within { border-color: #0C7435; box-shadow: 0 0 0 2px #0C743515; }
.show-password { border: 0; background: none; color: #94A097; padding: 9px 12px; font-size: 10px; }
.login-submit { margin-top: 16px; width: 100%; justify-content: space-between; height: 46px; }
.login-note { padding-top: 18px; border-top: 1px solid #EEF2EF; margin-top: 24px; color: #9CA69F; font-size: 9px; display: flex; align-items: center; gap: 5px; }
.login-note .icon { height: 12px; width: 12px; }
.form-error { color: #DC2626; font-size: 11px; margin-top: 10px; }
.access-main { max-width: 1040px; min-height: calc(100vh - 153px); margin: auto; padding: 66px 48px; }
.access-intro h1 { font-size: 36px; line-height: 1.3; color: #244632; margin: 14px 0 18px; }
.access-intro p { color: #91A096; font-size: 13px; }
.access-options { margin-top: 38px; display: flex; gap: 20px; }
.access-option { flex: 1; border: 1px solid #E0E8E2; border-radius: 8px; padding: 26px; background: white; transition: border-color .15s, transform .15s; }
.access-option:hover { border-color: #0C7435; transform: translateY(-2px); }
.option-icon { display: inline-flex; padding: 8px; background: #EFF7F1; color: #0C7435; border-radius: 6px; margin-bottom: 16px; }
.access-option .eyebrow { display: block; font-size: 9px; }
.access-option h2 { font-size: 20px; margin: 6px 0 10px; }
.access-option p { color: #93A198; font-size: 12px; }
.option-link { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; font-size: 11px; font-weight: 600; }
.option-link .icon { width: 16px; height: 16px; }
.access-security { display: flex; gap: 6px; align-items: center; font-size: 10px; color: #A5AFA8; margin-top: 24px; }
.access-security .icon { width: 13px; height: 13px; }
/* Accessible updates drawer */
.drawer-backdrop { position: fixed; inset: 0; background: #13261B4D; z-index: 20; }
.updates-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px,100vw); background: white; z-index: 21; padding: 28px; box-shadow: -8px 0 36px #112A251A; overflow-y: auto; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.icon-button { border: 0; background: #F4F7F5; border-radius: 50%; width: 32px; height: 32px; color: #6C8775; }
.icon-button .icon { width: 16px; height: 16px; }
.updates-drawer h2 { font-size: 20px; margin-bottom: 6px; }
.timeline { margin-top: 30px; }
.timeline-item { position: relative; margin-left: 6px; border-left: 1px solid #DCECDF; padding: 0 0 28px 22px; }
.timeline-item:before { content: ''; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; background: #0C7435; border-radius: 50%; }
.timeline-item h3 { font-size: 11px; color: #45855C; margin-bottom: 7px; }
.timeline-item p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; color: #7D8B82; }
.drawer-note { padding-top: 16px; border-top: 1px solid #E5E7EB; font-size: 10px; color: #A1ADA5; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 1100px) {
  .topbar-inner, .site-footer { padding-left: 28px; padding-right: 28px; }
  .dashboard { padding-left: 28px; padding-right: 28px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .kpi { padding: 16px; }
  .kpi h2 { font-size: 11px; }
  .login-main { gap: 40px; }
  .login-story h1 { font-size: 34px; }
}
@media (max-width: 760px) {
  .topbar-inner { padding: 15px 18px; }
  .product-brand { font-size: 11px; gap: 7px; }
  .product-brand > .icon { width: 30px; height: 30px; }
  .logo { width: 130px; height: 34px; }
  .header-right { gap: 10px; }
  .header-divider { display: none; }
  .dashboard { padding: 0 16px 24px; }
  .breadcrumb { padding: 18px 0 20px; font-size: 9px; gap: 7px; }
  h1 { font-size: 24px; }
  .page-heading p { font-size: 11px; }
  .page-actions { gap: 8px; width: 100%; flex-wrap: wrap; }
  .page-actions .btn { padding: 10px 13px; font-size: 11px; }
  .period-label { width: 100%; margin: 2px 0 0 15px; }
  .sync-message { font-size: 9px; }
  .kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
  .kpi { padding: 14px; }
  .kpi h2 { font-size: 10px; }
  .metric-icon { padding: 5px; }
  .metric-icon .icon { width: 14px; height: 14px; }
  .kpi > strong { font-size: 29px; }
  .kpi-note { font-size: 9px; }
  .metric-date { font-size: 18px; }
  .status-panel { padding: 18px; margin-bottom: 18px; }
  .status-bars { gap: 18px; }
  .status-bar { max-width: none; }
  .section-note { font-size: 9px; }
  .table-heading { padding: 18px; }
  .filterbar { padding: 0 18px 18px; flex-wrap: wrap; }
  .searchbox { flex: 1 1 100%; }
  .filterbar select { max-width: none; min-width: 0; width: calc(50% - 5px); font-size: 10px; }
  .table-footer { padding: 12px 18px; font-size: 9px; }
  .table-footer span:last-child { display: none; }
  .automation-note { flex-direction: column; gap: 5px; font-size: 9px; }
  .site-footer { padding: 16px; font-size: 9px; }
  .site-footer > span:last-child { display: none; }
  .login-main { padding: 40px 24px; min-height: calc(100vh - 130px); justify-content: center; }
  .login-story { display: none; }
  .login-card { flex: 0 1 390px; padding: 30px; }
  .access-main { padding: 40px 24px; }
  .access-intro h1 { font-size: 28px; }
  .access-options { flex-direction: column; gap: 14px; }
  .access-option { padding: 22px; }
}

/* ZITADEL SSO: visual preservado, identidade discreta e saída local. */
.signed-in-user { color: #7C8B81; font-size: 10px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-button { align-items: center; gap: 6px; font-size: 11px; }
.logout-button span { color: #6B7F72; }
.denied-detail { margin: 12px 0 20px; color: #87968C; font-size: 11px; }
@media (max-width: 760px) { .signed-in-user { display: none; } .logout-button span { display: none; } }