/* =====================================================================================================================
   AUDITORIA UX/UI (2026-10) - correcoes concretas, sem redesenho. Tokens, acessibilidade, toque, mobile.
   ===================================================================================================================== */

/* -- Tokens: contraste >= 4.5:1 do texto de estado/secundario sobre os fundos claros (antes 3.2 a 4.4) -- */
:root:not([data-theme="dark"]){--muted:#5b6b7f;--success-text:#0f6b3a;--warning-text:#8f4d00;--danger-text:#b32d23;--info-text:#1a56d6}
:root{--text-2xs:11px;--touch:44px}
.badge.qr-badge{color:#5b21b6}
small{font-size:12px}

/* -- Foco visivel por teclado em todos os controlos (WCAG 2.4.7 / 2.4.11); regras existentes com outline:0 mantem o seu proprio realce -- */
:where(a[href],button,input,select,textarea,summary,[role="button"],[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--brand);outline-offset:2px}
:where(.sidebar,.topbar,.login-brand-panel) :where(a[href],button,[role="button"]):focus-visible{outline-color:#fff}
:where(input,select,textarea):focus-visible{outline-offset:0}

/* -- Toque: sem atraso de duplo-toque nem realce cinzento do iOS -- */
html{-webkit-tap-highlight-color:transparent}
:where(a,button,input,select,textarea,label,summary,[role="button"]){touch-action:manipulation}

/* -- Movimento reduzido (preferencia do sistema) -- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* -- Alvos de toque >= 44px em ecras tateis e em telemovel/tablet (WCAG 2.5.8 / HIG) -- */
@media (pointer:coarse),(max-width:900px){
  .icon-button,.user-chip,.calendar-nav-btn,.evidence-button,.qr-wallet-action,.row-menu-toggle{min-width:var(--touch);min-height:var(--touch)}
  input[type="checkbox"],input[type="radio"]{width:22px;height:22px}
  .check-row,.permission-item{min-height:var(--touch)}
  .badge,.attendance-inference-pill{font-size:var(--text-xs)}
}

/* -- Telemovel: indicadores (KPI) em 2 colunas e compactos em vez de uma coluna de cartoes altos -- */
@media (max-width:700px){
  .kpi-grid,.kpi-grid.kpi-grid-compact,.dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .metric{min-height:0;padding:12px}
  .metric span{margin-bottom:6px;font-size:var(--text-sm)}
  .metric strong{font-size:24px}
  .metric small{margin-top:6px;font-size:var(--text-sm)}
}

/* -- Tabelas em telemovel: cada linha passa a cartao (etiqueta + valor); acima de 640px mantem-se a tabela com scroll -- */
@media (max-width:640px){
  .table-wrap:has(> table.rt){overflow:visible;border:0;background:transparent;box-shadow:none}
  .table-wrap table.rt{display:block;width:100%;min-width:0!important;border:0}
  .table-wrap table.rt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table-wrap table.rt tbody{display:block}
  .table-wrap table.rt tr{display:block;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:4px 14px;margin:0 0 10px;box-shadow:var(--shadow)}
  .table-wrap table.rt td{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;width:auto;padding:9px 0!important;border:0!important;border-bottom:1px solid var(--line)!important;text-align:right;white-space:normal!important;word-break:break-word}
  .table-wrap table.rt td:last-child{border-bottom:0!important}
  .table-wrap table.rt td::before{content:attr(data-label);flex:0 0 36%;max-width:44%;color:var(--muted);font-size:var(--text-sm);font-weight:700;text-align:left}
  .table-wrap table.rt td[data-title]{display:block;padding:10px 0 8px!important;font-size:15px;font-weight:800;text-align:left}
  .table-wrap table.rt td[data-title]::before,.table-wrap table.rt td[data-kind]::before,.table-wrap table.rt td:not([data-label])::before{display:none}
  .table-wrap table.rt td[data-kind="actions"]{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;padding:10px 0 6px!important}
  .table-wrap table.rt td[data-kind="select"]{position:absolute;top:8px;right:10px;width:auto;padding:0!important;border:0!important}
}

/* -- Ligacao "Saltar para o conteudo" (so visivel com o foco do teclado) -- */
.skip-link{position:fixed;left:12px;top:-60px;z-index:100000;padding:10px 14px;border-radius:var(--radius-md);background:var(--brand);color:#fff;font-weight:700;text-decoration:none;transition:top .15s}
.skip-link:focus{top:max(12px,env(safe-area-inset-top,0px))}
#content:focus{outline:0}

/* -- Auditoria, 2.a volta: tamanhos que escaparam (cabecalho 42px, campos/botoes 34-38px, texto 14px em campos, contraste do QR) -- */
.topbar .icon-button{height:var(--touch,44px);min-width:var(--touch,44px);width:var(--touch,44px)}
.qr-wallet-action{color:#005f46}
@media (pointer:coarse),(max-width:900px){
  input[type="checkbox"],input[type="radio"]{width:24px;height:24px}
  input:not([type="checkbox"],[type="radio"],[type="file"],[type="range"],[type="hidden"]),select,textarea{font-size:max(16px,1em);min-height:var(--touch,44px)}
  .primary-action,.secondary-action,.danger-action,.tab-button{min-height:var(--touch,44px)}
}

/* -- Barra de navegacao inferior (area do colaborador, telemovel) -- */
.bottom-nav{display:none}
@media (max-width:780px){
  .bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:12;background:var(--surface);border-top:1px solid var(--line);padding:4px 6px max(6px,env(safe-area-inset-bottom));box-shadow:0 -10px 28px rgba(7,26,34,.08)}
  .bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:6px 2px;background:transparent;border:0;border-radius:var(--radius-md);color:var(--muted);font:inherit;font-size:var(--text-xs);font-weight:700;cursor:pointer;position:relative}
  .bottom-nav-icon{display:inline-flex;height:24px;width:24px;align-items:center;justify-content:center}
  .bottom-nav-icon svg{height:22px;width:22px}
  .bottom-nav-label{line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bottom-nav-item.active{color:var(--brand)}
  .bottom-nav-item.active::before{content:'';position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}
  body.has-bottom-nav .workspace{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}

/* -- Pormenores da 2.a volta: filtro do banco de horas, accoes do organograma, alvos de toque restantes -- */
.time-bank-filter label,.time-bank-filter select{min-width:0;max-width:100%}
@media (max-width:1100px){.orgchart-header-actions{align-items:stretch}}
@media (pointer:coarse),(max-width:900px){
  :is(.primary-action,.secondary-action,.danger-action,.tab-button,.icon-action){min-height:var(--touch,44px)!important}
  .icon-action{min-width:var(--touch,44px)}
  input:not([type="checkbox"],[type="radio"],[type="file"],[type="range"],[type="hidden"]),select,textarea{min-height:var(--touch,44px)!important}
}

/* -- Auditoria (3.a volta): tablet/portatil pequeno e alvos minimos em desktop (WCAG 2.5.8: 24px) -- */
@media (max-width:1100px){
  .orgchart-workspace{grid-template-columns:1fr}
  .orgchart-department-nav,.orgchart-manager-sidebar{max-height:none}
  .orgchart-department-list{display:grid;overflow:visible;padding-bottom:0}
  .orgchart-department-nav-item{width:100%}
  .orgchart-summary-strip{grid-template-columns:1fr}
  .orgchart-detail-header{display:grid}
  .orgchart-header-actions{align-items:stretch}
  .orgchart-department-employee{grid-template-columns:auto minmax(0,1fr)}
  .orgchart-employee-actions{grid-column:1 / -1;justify-content:flex-start}
}
@media (pointer:fine) and (min-width:901px){.evidence-button,.qr-wallet-action,.icon-action,.calendar-nav-btn{min-height:24px}}
@media (pointer:fine) and (min-width:901px){input[type="checkbox"],input[type="radio"]{width:18px;height:18px}}

/* -- Tema escuro: texto branco sobre o verde de marca dava 3.08:1; fundo mais fundo nestes botoes (>=4.5:1); QR volta a usar a cor de marca -- */
:root[data-theme="dark"] :is(.primary-action,.tab-button.active,.notification-bell-mark,.login-submit){background:#00855a}
:root[data-theme="dark"] .qr-wallet-action{color:var(--brand)}
:root[data-theme="dark"] :is(.evidence-button,.qr-wallet-action){color:#3ddc9c}

.modal:focus{outline:0}

/* -- Login em telemovel: botoes do seletor e Entrar com 44px (alvo de toque), mantendo tudo no ecra -- */
@media(max-width:700px),(display-mode:standalone) and (max-width:900px){
  .login-screen .login-card .login-type-toggle button{height:44px!important;min-height:44px!important}
  .login-screen .login-card .login-submit{height:44px!important;min-height:44px!important}
}
.user-chip-meta{font-size:max(11px,var(--text-xs))}

/* -- 2.a auditoria: acertos finais -- */
input[type="checkbox"],input[type="radio"]{flex:none}
.config-card-actions{flex-wrap:wrap}
.config-card-actions>:is(button,a){flex:1 1 120px;min-width:0;width:auto}
.kiosk-config-card{grid-template-columns:minmax(0,1fr)}
.kiosk-card-grid>*{min-width:0}
td a:not(.primary-action,.secondary-action,.danger-action,.action-link){display:inline-flex;align-items:center;min-height:24px}
.login-alert.warning{color:var(--warning-text)}
:root[data-theme="dark"] .skip-link{background:#00855a;color:#fff}
@media (pointer:coarse),(max-width:900px){
  .tab-button{min-width:var(--touch,44px)}
  .nav-submenu-toggle{height:var(--touch,44px);width:var(--touch,44px)}
  td a:not(.primary-action,.secondary-action,.danger-action,.action-link){min-height:var(--touch,44px)}
  .punch-form-checks .check-row input[type=checkbox]{flex:0 0 24px;width:24px!important;height:24px!important}
}

/* -- Carteira QR / ecras de feedback a ecra inteiro no telemovel: sem o afastamento de 72px das mensagens -- */
@media(max-width:640px){
  .modal.feedback-modal:is(.qr-pass-modal,.punch-feedback-modal){align-self:stretch;margin-top:0}
}
.qr-pass-close{height:44px;width:44px}
.qr-pass .empty-state{color:#5b6b7f}

/* -- Login no telemovel: textos minimos de 11px e, em ecras com altura para isso, alvos de toque de 44px.
   Em ecras baixos (iPhone SE, 360x640) mantem-se a versao compacta para o formulario caber sem scroll. -- */
@media(max-width:700px),(display-mode:standalone) and (max-width:900px){
  .login-card .field span{font-size:11px!important}
  .login-company-name{font-size:11px!important}
  .login-card .login-privacy-link{padding:5px 6px!important}
}
@media(max-width:700px) and (min-height:760px){
  .login-card .field input{height:44px!important;min-height:44px!important}
  .login-card .login-privacy-link{align-items:center;display:flex!important;justify-content:center;min-height:44px;padding:0 6px!important}
  .login-card .login-type-toggle button{height:44px!important;min-height:44px!important}
}
@media(display-mode:standalone) and (max-width:900px) and (min-height:760px){
  .login-card .field input{height:44px!important;min-height:44px!important}
  .login-card .login-privacy-link{align-items:center;display:flex!important;justify-content:center;min-height:44px;padding:0 6px!important}
  .login-card .login-type-toggle button{height:44px!important;min-height:44px!important}
}
:root[data-theme="dark"] .login-screen .login-card .login-type-toggle button.active{background:#00855a!important;border-color:#00855a!important}

/* -- Kiosk: contraste (branco sobre #10b981 dava 2.5:1; sobre #047857 da 5.5:1), telemovel e alvos de toque -- */
.kiosk-punch-types button.active,.kiosk-submit,.kiosk-qr-toggle.active{background:#047857}
.kiosk-result.success>div{background:#047857f0}
.kiosk-screensaver-hint .kiosk-screensaver-en{font-size:clamp(11px,1.2vw,13px)}
.kiosk-lang-toggle{min-height:44px;min-width:44px}
@media(max-width:600px){
  .kiosk-camera-overlay{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:20px 16px 70px}
  .kiosk-clock strong{font-size:clamp(34px,12vw,48px)}
}
/* -- Login: em ecras baixos a ligacao de privacidade fica com 24px (minimo WCAG) sem empurrar o formulario -- */
@media(max-width:700px) and (max-height:759px){
  .login-card .login-privacy-link{padding:0 6px!important;min-height:24px;display:flex!important;align-items:center;justify-content:center}
}
@media(display-mode:standalone) and (max-width:900px) and (max-height:759px){
  .login-card .login-privacy-link{padding:0 6px!important;min-height:24px;display:flex!important;align-items:center;justify-content:center}
}

.login-privacy-link{align-items:center;display:flex;justify-content:center;min-height:24px}

@media (pointer:coarse),(max-width:900px){.nav-submenu-toggle{flex:none}}
@media (pointer:coarse),(max-width:900px){.nav-parent-row{grid-template-columns:minmax(0,1fr) var(--touch,44px)}}

/* -- Identidade: marca da ePlataforma no topo; brasao da organizacao junto ao nome no rodape do login -- */
.login-company-crest{display:inline-block;height:26px;margin-right:10px;vertical-align:middle}
.login-company-crest:not(.has-logo){display:none}
.login-company-crest img{display:block;height:100%;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
@media(max-width:700px),(display-mode:standalone) and (max-width:900px){
  .login-company-crest{height:22px;margin-right:8px}
}
@media(max-width:700px) and (max-height:640px){.login-company-crest{display:none}}
@media(display-mode:standalone) and (max-width:900px) and (max-height:640px){.login-company-crest{display:none}}

/* -- Confirmacao de picagem em ecra inteiro: o verde enche o ecra (antes ficava um cartao arredondado no meio de um fundo branco) -- */
.modal.punch-feedback-modal{border:0;box-shadow:none;overflow:hidden;background:transparent}
.modal.punch-feedback-modal #modalBody{align-items:stretch}
.modal.punch-feedback-modal .punch-feedback{border-radius:0;min-height:100%;width:100%}
@keyframes punchFeedbackIn{from{opacity:0}to{opacity:1}}
@keyframes punchFeedbackPop{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes punchFeedbackRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal-backdrop-punch .modal.punch-feedback-modal{animation:punchFeedbackIn .22s ease-out both}
.modal.punch-feedback-modal .punch-feedback-icon{animation:punchFeedbackPop .55s cubic-bezier(.22,1,.36,1) .08s both}
.modal.punch-feedback-modal .punch-feedback h2,.modal.punch-feedback-modal .punch-feedback p,.modal.punch-feedback-modal .punch-feedback small{animation:punchFeedbackRise .45s ease-out .22s both}
@media(prefers-reduced-motion:reduce){
  .modal-backdrop-punch .modal.punch-feedback-modal,.modal.punch-feedback-modal .punch-feedback-icon,.modal.punch-feedback-modal .punch-feedback h2,.modal.punch-feedback-modal .punch-feedback p,.modal.punch-feedback-modal .punch-feedback small{animation:none}
}

img[data-auth-src]:not([src]){visibility:hidden}