/* =====================================================================
   BoxOps — complementos ao visual do mockup (app.css)
   ===================================================================== */
:root {
  --sem-verde: var(--box-green);
  --sem-amarelo: var(--box-amber);
  --sem-vermelho: var(--box-red);
}

a.nav-item, a.sidebar-foot { text-decoration: none; }
.sidebar-foot .name { display: flex; flex-direction: column; line-height: 1.2; }
.papel-mini { font-size: 11px; color: var(--box-text-3); }
.cor-amber { color: var(--box-amber); }
.cor-red { color: var(--box-red); }
.cor-green { color: var(--box-green); }
.muted { color: var(--box-text-3); }
.mt16 { margin-top: 16px; }
.mb16 { margin-bottom: 16px; }

/* ---------- formulários ---------- */
.field input, .field select, .field textarea { font-family: var(--box-font); }
.field.tem-erro input, .field.tem-erro select, .field.tem-erro .select-wrap select { border-color: var(--box-red) !important; }
.field-erro { font-size: 12px; color: var(--box-red); margin-top: 6px; }
.btn-primary:disabled, .btn-confirm:disabled, .btn-login:disabled { opacity: .55; cursor: wait; }
.btn-danger {
  height: 40px; padding: 0 18px; background: transparent; border: 0.5px solid var(--box-red);
  border-radius: var(--box-radius-sm); color: var(--box-red); font-size: 14px; cursor: pointer;
  font-family: var(--box-font); display: inline-flex; align-items: center; gap: 8px;
}
.btn-danger:hover { background: var(--box-red-tint); }
.btn-link { background: none; border: none; color: var(--box-text-2); cursor: pointer; font-family: var(--box-font); font-size: 13px; text-decoration: underline; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--box-text-2); cursor: pointer; margin-top: 4px; }
.check-row input { width: 18px; height: 18px; accent-color: var(--box-green); }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.photo-btn { text-decoration: none; }
input[type="file"].oculto { display: none; }
.time-input { max-width: 160px; }
textarea.campo {
  width: 100%; min-height: 70px; background: var(--box-elev); border: 0.5px solid var(--box-border);
  border-radius: var(--box-radius-sm); padding: 10px 14px; font-size: 14px; color: var(--box-text); resize: vertical;
}

/* ---------- toast ---------- */
.toast.erro { border-color: var(--box-red); }
.toast.erro i { color: var(--box-red); }

/* ---------- papéis ---------- */
.role-badge.admin { background: var(--box-green-tint); color: var(--box-green); }
.role-badge.basico { background: var(--box-elev); color: var(--box-text-2); }
.segmented.tres { grid-template-columns: repeat(3, 1fr); }

/* ---------- semáforo ---------- */
.sem { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.sem::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--box-text-3); flex-shrink: 0; }
.sem.verde::before { background: var(--sem-verde); }
.sem.amarelo::before { background: var(--sem-amarelo); }
.sem.vermelho::before { background: var(--sem-vermelho); }
.saldo-cell.amarelo .saldo-main { color: var(--box-amber); }
.saldo-cell.vermelho .saldo-main { color: var(--box-red); }
.metric.ok .metric-value, .metric.ok .metric-label i { color: var(--box-green); }
.metrics.g4 { grid-template-columns: repeat(4, 1fr); }
.inativo-row td { opacity: .5; }
.vazio { padding: 40px 20px; text-align: center; color: var(--box-text-3); font-size: 14px; }
.carregando { padding: 30px; text-align: center; color: var(--box-text-3); }
.tag-mini { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--box-elev); color: var(--box-text-2); margin-left: 6px; white-space: nowrap; }
.link-box {
  display: flex; gap: 8px; align-items: center; background: var(--box-elev); border: 0.5px solid var(--box-border);
  border-radius: var(--box-radius-sm); padding: 10px 12px; font-size: 13px; word-break: break-all; margin-top: 12px;
}
.link-box code { flex: 1; color: var(--box-green); }
.periodo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.periodo input[type="date"] {
  height: 38px; background: var(--box-card); border: 0.5px solid var(--box-border); border-radius: var(--box-radius-sm);
  padding: 0 10px; color: var(--box-text); font-family: var(--box-font); color-scheme: dark;
}
input[type="date"], input[type="time"] { color-scheme: dark; }
.tabela-simples td, .tabela-simples th { padding: 10px 14px; }
.num-col { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- login ---------- */
.login-erro { display: none; background: var(--box-red-tint); color: var(--box-red); border-radius: var(--box-radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 16px; }
.login-erro.on { display: block; }

/* ---------- mobile ---------- */
.menu-mobile { display: none; }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: -260px; z-index: 50; transition: left .2s; }
  .sidebar.aberta { left: 0; box-shadow: 0 0 0 100vmax rgba(0,0,0,.5); }
  .menu-mobile {
    display: flex; position: fixed; left: 12px; top: 12px; z-index: 40; width: 42px; height: 42px;
    align-items: center; justify-content: center; border-radius: var(--box-radius-sm);
    background: var(--box-elev); border: 0.5px solid var(--box-border); color: var(--box-text); font-size: 22px;
  }
  .page { padding: 64px 16px 24px; }
  .page-head { flex-direction: column; }
  .toolbar { flex-wrap: wrap; }
  .search-box, .toolbar .select-wrap { width: 100%; }
  .metrics.g3, .metrics.g4 { grid-template-columns: 1fr 1fr; }
  .table-card { overflow-x: auto; }
  .table-card table { min-width: 640px; }
  .grid-2, .grid-3, .grid-nome-cat, .id-grid, .segmented.tres { grid-template-columns: 1fr !important; }
  .topbar { padding-left: 64px; flex-wrap: wrap; }
}

/* ====================== APONTAMENTO (página própria) ====================== */
body.tela-apontamento #apontamento, body.tela-farol #farol { display: flex; }
#apontamento .op-card { position: relative; }
#apontamento .op-card .cadeado { position: absolute; top: 10px; right: 12px; font-size: 18px; color: var(--box-text-3); }
#apontamento .op-card-tasks.verm { color: var(--box-red); }
#apontamento .t-card.vermelho { border-left-color: var(--box-red); }
#apontamento .t-card.amarelo { border-left-color: var(--box-amber); }
#apontamento .t-card.verde { border-left-color: var(--box-green); cursor: default; }
#apontamento .t-card.verde .t-name { color: var(--box-text-2); }
#apontamento .t-chip.vermelho { background: var(--box-red-tint); color: var(--box-red); }
#apontamento .t-chip.amarelo { background: var(--box-amber-tint); color: var(--box-amber); }
#apontamento .t-chip.verde { background: var(--box-green-tint); color: var(--box-green); }
#apontamento .t-meta { font-size: 13px; color: var(--box-text-3); margin-left: 6px; }
#apontamento .ap-top {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 0; font-size: 13px; color: var(--box-text-3);
}
#apontamento .ap-top a, #apontamento .ap-top button { color: var(--box-text-3); background: none; border: none; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; font-family: var(--box-font); }
#apontamento .pin-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 22px; }
#apontamento .pin-dots { display: flex; gap: 16px; }
#apontamento .pin-dots span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--box-text-3); }
#apontamento .pin-dots span.on { background: var(--box-green); border-color: var(--box-green); }
#apontamento .pin-wrap .keys { width: 100%; max-width: 360px; }
#apontamento .pin-msg { min-height: 24px; color: var(--box-red); font-size: 16px; }
#apontamento .e-erro { color: var(--box-red); font-size: 16px; margin-top: 12px; min-height: 22px; }
#apontamento .offline-bar { display: none; }
#apontamento .offline-bar.on { display: flex; }

/* larguras de coluna (substituem style="" bloqueado pela CSP) */
.w5 { width: 5%; } .w6 { width: 6%; } .w8 { width: 8%; } .w10 { width: 10%; } .w11 { width: 11%; } .w12 { width: 12%; } .w13 { width: 13%; } .w14 { width: 14%; } .w15 { width: 15%; } .w16 { width: 16%; } .w18 { width: 18%; } .w20 { width: 20%; } .w22 { width: 22%; } .w24 { width: 24%; } .w26 { width: 26%; } .w28 { width: 28%; } .w30 { width: 30%; } .w34 { width: 34%; } .w36 { width: 36%; } .w40 { width: 40%; } .w44 { width: 44%; } .w46 { width: 46%; } .w50 { width: 50%; } 
.pad-h { padding: 0 16px; }
.pad-all { margin: 16px; }
.switch-group { flex-wrap: wrap; }
.td-det { padding: 0 !important; height: auto; }
.inline-form { display: inline; margin-left: 14px; }
#apontamento .key-ok { background: var(--box-green); color: var(--box-on-green); border-color: transparent; }
a.btn-login { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ====================== APONTAMENTO: rolagem ====================== */
/* A tela ocupa a altura do aparelho e só a lista rola (antes o conteúdo era cortado). */
#apontamento .tablet { height: 100%; min-height: 0; }
#apontamento .scr { min-height: 0; }
#apontamento .task-list, #apontamento .op-grid, #apontamento .e-body {
  min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
#apontamento .key.invisivel { visibility: hidden; }

/* ====================== PRODUTO: unidade ====================== */
.un-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.un-opt {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px;
  background: var(--box-elev); border: 1.5px solid var(--box-border); border-radius: var(--box-radius-sm);
  color: var(--box-text-2); font-family: var(--box-font); cursor: pointer;
}
.un-opt b { font-size: 20px; font-weight: 600; color: var(--box-text); }
.un-opt span { font-size: 12.5px; }
.un-opt:hover { border-color: var(--box-border-strong); }
.un-opt.on { border-color: var(--box-green); background: var(--box-green-tint); }
.un-opt.on b { color: var(--box-green); }
.un-grid.bloqueado .un-opt { cursor: not-allowed; opacity: .45; }
.un-grid.bloqueado .un-opt.on { opacity: 1; }
.un-rapida select { height: 34px; padding: 0 30px 0 10px; font-size: 13px; }
@media (max-width: 700px) { .un-grid { grid-template-columns: repeat(3, 1fr); } }

/* ====================== FAROL (TV) ====================== */
#farol { font-size: 2.2vh; }
#farol .fx-top {
  display: flex; align-items: center; gap: 2vw; padding: 1.4vh 2vw;
  border-bottom: 1px solid var(--box-border); flex-shrink: 0;
}
#farol .fx-brand { display: flex; align-items: center; gap: .6em; text-decoration: none; color: var(--box-text); font-size: 3.4vh; }
#farol .fx-brand .f-mark { font-size: 1em; }
#farol .fx-brand .f-brand-txt { font-size: 1.2em; }
#farol .fx-tabs { flex: 1; display: flex; justify-content: center; gap: 1vw; }
#farol .fx-tab {
  display: inline-flex; align-items: center; gap: .5em; font-size: 3.4vh; font-weight: 600;
  padding: .35em 1em; border-radius: 999px; border: 2px solid transparent; background: none;
  color: var(--box-text-3); font-family: var(--box-font); cursor: pointer;
}
#farol .fx-tab.on { color: var(--box-text); background: var(--box-elev); border-color: var(--box-border-strong); }
#farol .fx-tab-num { color: var(--box-green); font-variant-numeric: tabular-nums; }
#farol .fx-relogio { text-align: right; }
#farol .fx-clock { font-size: 5vh; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
#farol .fx-date { font-size: 1.9vh; color: var(--box-text-2); margin-top: .2em; text-transform: capitalize; }
#farol .fx-timer { height: .5vh; background: var(--box-card); flex-shrink: 0; }
#farol .fx-timer-fill { height: 100%; width: 0; background: var(--box-text-3); }
#farol .fx-timer-fill.run { animation: fxTimer 20s linear forwards; }
@keyframes fxTimer { from { width: 0; } to { width: 100%; } }

#farol .fx-tela { display: none; flex: 1; min-height: 0; grid-template-columns: repeat(3, 1fr); gap: 1.2vw; padding: 1.4vh 1.2vw 1.6vh; }
#farol .fx-tela.on { display: grid; }
#farol .fx-col { display: flex; flex-direction: column; min-height: 0; border-radius: 1.2vh; background: var(--box-card); overflow: hidden; }
#farol .fx-head {
  display: flex; align-items: center; gap: .45em; padding: .45em .7em;
  font-size: .9em; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; flex-shrink: 0;
}
#farol .fx-head i { font-size: 1.1em; }
#farol .fx-head-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#farol .fx-count { font-size: 1.5em; font-variant-numeric: tabular-nums; line-height: 1; }
#farol .fx-col.vermelho .fx-head { background: var(--sem-vermelho); color: #fff; }
#farol .fx-col.amarelo .fx-head { background: var(--sem-amarelo); color: var(--box-on-amber); }
#farol .fx-col.verde .fx-head { background: var(--sem-verde); color: var(--box-on-green); }
#farol .fx-list { flex: 1; min-height: 0; overflow: hidden; padding: .3em .55em; display: flex; flex-direction: column; }
#farol .fx-item { padding: .45em .2em; border-bottom: 1px solid var(--box-border); }
#farol .fx-item:last-of-type { border-bottom: none; }
#farol .fx-item.oculto { display: none; }
#farol .fx-nome {
  font-size: 1em; font-weight: 600; line-height: 1.15; color: var(--box-text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#farol .fx-info { font-size: .74em; color: var(--box-text-2); margin-top: .25em; display: flex; flex-wrap: wrap; align-items: center; gap: .3em; }
#farol .fx-info i { font-size: 1.05em; }
#farol .fx-sep { color: var(--box-text-3); }
#farol .fx-pessoa { display: inline-flex; align-items: center; gap: .3em; }
#farol .fx-av {
  width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--box-elev); overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; font-size: .75em;
}
#farol .fx-av img { width: 100%; height: 100%; object-fit: cover; }
#farol .fx-col.vermelho .fx-info { color: var(--sem-vermelho); }
#farol .fx-col.amarelo .fx-info { color: var(--sem-amarelo); }
#farol .fx-col.verde .fx-nome { color: var(--box-text-2); font-weight: 500; }
#farol .fx-prod { display: grid; grid-template-columns: 1fr auto; column-gap: .5em; align-items: baseline; }
#farol .fx-prod .fx-nome { -webkit-line-clamp: 1; }
#farol .fx-prod .fx-info { grid-column: 1 / -1; margin-top: 0; color: var(--box-text-3) !important; }
#farol .fx-val { font-size: 1.05em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#farol .fx-val small { font-size: .62em; font-weight: 500; margin-left: .2em; color: var(--box-text-2); }
#farol .fx-col.vermelho .fx-val { color: var(--sem-vermelho); }
#farol .fx-col.amarelo .fx-val { color: var(--sem-amarelo); }
#farol .fx-vazio { margin: auto; text-align: center; color: var(--box-text-3); font-size: .85em; display: flex; flex-direction: column; align-items: center; gap: .3em; }
#farol .fx-vazio i { font-size: 2em; }
#farol .fx-mais { margin-top: auto; padding: .35em .2em 0; font-size: .7em; display: flex; align-items: center; gap: .35em; font-weight: 600; color: var(--box-text-2); flex-shrink: 0; }
#farol .f-aviso {
  position: fixed; left: 50%; bottom: 1.2em; transform: translateX(-50%); background: var(--box-red-tint);
  color: var(--box-red); padding: .5em 1.2em; border-radius: 999px; font-size: 1em; display: none;
}
#farol .f-aviso.on { display: block; }
#farol .f-erro-total { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--box-text-2); font-size: 1.6em; text-align: center; padding: 2em; }
@media (max-width: 900px) and (orientation: portrait) {
  #farol { overflow: auto; }
  #farol .fx-tela.on { grid-template-columns: 1fr; }
  #farol .fx-top { flex-wrap: wrap; }
}

/* ====================== APONTAMENTO: fixar tela ====================== */
#apontamento .ap-acoes { display: inline-flex; align-items: center; gap: 18px; }
#apontamento .ap-top .ap-fixar { color: var(--box-green); }
#apontamento .ap-fixada {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; padding: 3px 10px;
  border-radius: 999px; background: var(--box-green-tint); color: var(--box-green); font-size: 12px;
}
#apontamento .ap-modal {
  position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.72);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
#apontamento .ap-modal.on { display: flex; }
#apontamento .ap-modal-box {
  width: 100%; max-width: 440px; background: var(--box-card); border: 1px solid var(--box-border-strong);
  border-radius: var(--box-radius); padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
#apontamento .ap-modal-ic { font-size: 34px; color: var(--box-text-2); }
#apontamento .ap-senha {
  width: 100%; height: 60px; margin-top: 8px; padding: 0 16px; font-size: 22px; text-align: center;
  background: var(--box-elev); border: 1px solid var(--box-border-strong); border-radius: var(--box-radius-sm);
  color: var(--box-text); font-family: var(--box-font); outline: none;
}
#apontamento .ap-senha:focus { border-color: var(--box-green); }
#apontamento .ap-modal-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
#apontamento .ap-btn {
  height: 60px; border-radius: var(--box-radius-sm); border: 1px solid var(--box-border-strong);
  background: var(--box-elev); color: var(--box-text); font-size: 18px; font-family: var(--box-font); cursor: pointer;
}
#apontamento .ap-btn.ok { background: var(--box-green); color: var(--box-on-green); border-color: transparent; font-weight: 600; }
#apontamento .ap-btn:disabled { opacity: .6; }