/* Rev. 2.9 — Etapa 03 (parte 1). Carregado depois de compact.css. */

/* Portal: cabeçalho com logotipo, nome da central e empresa do cliente espaçados (item 9).
   Linha 1: marca + ações; linha 2: menu — os elementos não se espremem quando há logotipo. */
.portal-top-v29 .inner { flex-wrap: wrap; row-gap: 6px; padding-top: 12px; padding-bottom: 6px; }
.portal-top-v29 .brand { gap: 14px; min-width: 0; flex: 1 1 auto; padding: 0; }
.portal-top-v29 .brand-logo { height: 40px; max-width: 170px; padding: 4px 8px; }
.portal-top-v29 .brand-logo img { max-height: 32px; max-width: 154px; }
.portal-top-v29 .brand-logo + .brand-name { padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--nav-text, #fff) 22%, transparent); }
.portal-top-v29 .brand-name { min-width: 0; line-height: 1.25; letter-spacing: 0; }
.portal-top-v29 .brand-title { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-top-v29 .brand-name small { display: block; margin-top: 3px; font-size: 12px; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-top-v29 .topbar-actions { margin-left: auto; gap: 8px; flex: 0 0 auto; }
.portal-top-v29 nav { order: 3; flex: 1 0 100%; margin: 0 -12px; overflow-x: auto; scrollbar-width: none; }
.portal-top-v29 nav::-webkit-scrollbar { display: none; }
/* ícones do topo do portal sempre visíveis no tema claro e no escuro (sino, tema) */
.portal-top .icon-btn { color: var(--nav-text, #cfe3e3); }
@media (max-width: 720px) {
  .portal-top-v29 .inner { padding: 10px 14px 4px; }
  .portal-top-v29 .brand { gap: 10px; }
  .portal-top-v29 .brand-logo { height: 34px; max-width: 110px; }
  .portal-top-v29 .brand-logo img { max-height: 26px; max-width: 96px; }
  .portal-top-v29 .brand-logo + .brand-name { padding-left: 10px; }
  .portal-top-v29 .brand-title { font-size: 14px; }
  .portal-top-v29 .topbar-actions { gap: 2px; }
}

/* Portal: campo de busca — lupa centralizada verticalmente (item 10) */
.portal-search .ic { top: 50%; left: 12px; transform: translateY(-50%); pointer-events: none; }
.portal-search input { padding-left: 38px; }

/* Ações destrutivas em linha (excluir link) */
.btn-danger-text { color: var(--coral, #c0392b); }
.btn-danger-text:hover { background: color-mix(in srgb, var(--coral, #c0392b) 10%, transparent); }

/* Agenda: texto do dia para WhatsApp */
.dlg-agenda-day { width: min(620px, calc(100vw - 32px)); }
.dlg-agenda-day textarea { min-height: 260px; white-space: pre-wrap; line-height: 1.45; }

/* Visitas: colunas VT / SD separadas e acesso à página de campo (itens 12 e 20) */
.visit-list td.vt-col, .visit-list td.sd-col { white-space: nowrap; }
.visit-list .field-link { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; color: var(--petrol, #0b5563); border: 1px solid var(--line, #dce3e2); }
.visit-list .field-link:hover { background: var(--hover); }
.visit-list .field-link.is-off { opacity: .35; pointer-events: none; }
.visit-list th.fl-col, .visit-list td.fl-col { width: 44px; text-align: center; padding-left: 4px; padding-right: 4px; }

/* Página de campo: solicitações internas (item 8) e fotos — câmera ou várias da galeria (item 19) */
.field-photo-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field-photo-pick .field-btn { margin: 0; }
.field-internal { border-left: 3px solid var(--signal, #f2b632); }
.field-internal .field-list li { display: block; }
.field-internal .field-list .meta { display: block; font-size: 12px; color: var(--ink-4, #6b7f87); margin-top: 2px; }
.internal-req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.internal-req-list li { border: 1px solid var(--line, #dce3e2); border-radius: 8px; padding: 10px 12px; }
.internal-req-list .meta { font-size: 12px; color: var(--ink-4, #6b7f87); margin-bottom: 4px; }

/* Rev. 3.0 (item 16): ações padronizadas das tabelas — última coluna, só ícones, mesma ordem e tamanho em todo o sistema */
th.col-actions, td.col-actions { width: 1%; white-space: nowrap; text-align: right; padding-left: 6px; }
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.row-actions form.inline { display: inline-flex; margin: 0; }
.ra-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--ink-3, #4b5a64); cursor: pointer; padding: 0; text-decoration: none; }
.ra-btn:hover, .ra-btn:focus-visible { background: var(--hover); border-color: var(--line, #dce3e2); color: var(--petrol, #0b5563); text-decoration: none; }
.ra-btn.ra-danger { color: var(--coral, #c0392b); }
.ra-btn.ra-danger:hover, .ra-btn.ra-danger:focus-visible { background: color-mix(in srgb, var(--coral, #c0392b) 10%, transparent); border-color: color-mix(in srgb, var(--coral, #c0392b) 30%, transparent); color: var(--coral, #c0392b); }
.ra-btn.is-on { color: var(--leaf, #198754); }
.ra-btn[disabled] { opacity: .35; cursor: default; }

/* Rev. 3.1 (item 17): janela de confirmação antes de gerar relatórios */
dialog.report-confirm { width: min(460px, calc(100vw - 32px)); }
.report-confirm .rc-name { font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.report-confirm .rc-info { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 10px; font-size: 13px; }
.report-confirm .rc-info dt { color: var(--ink-4, #6b7f87); }
.report-confirm .rc-info dd { margin: 0; }
.report-confirm .rc-note { margin: 4px 0 0; }

/* Rev. 3.1 (item 18): relatórios por área e filtros extras */
.report-groups { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.report-groups a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line, #dce3e2); color: var(--ink-2, #2b3a42); font-size: 13px; font-weight: 500; text-decoration: none; background: var(--surface, #fff); }
/* Rev. 3.2.1: área ativa com a cor dos botões principais do sistema (cinza no tema claro) */
.report-groups a:hover { border-color: var(--action, #68686c); text-decoration: none; }
.report-groups a.active { background: var(--action, #68686c); border-color: var(--action, #68686c); color: #fff; }
.report-more { position: relative; }
.report-more > summary { list-style: none; }
.report-more > summary::-webkit-details-marker { display: none; }
.report-more[open] > summary { background: var(--hover); }
.report-more-body { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; flex-basis: 100%; }
.toolbar .report-more[open] { flex-basis: 100%; order: 10; }
.kpi .kpi-foot { margin-top: 4px; }

/* Rev. 3.2: linha de totais dos relatórios */
.table tfoot tr.report-total td { border-top: 2px solid var(--line); background: color-mix(in srgb, var(--line-2) 70%, var(--panel)); color: var(--ink); }

/* Rev. 3.2.1: edição da solicitação interna na página de campo */
.field-internal .field-list li { display: block; }
.ir-edit { margin-top: 6px; }
.ir-edit > summary { list-style: none; display: inline-flex; }
.ir-edit > summary::-webkit-details-marker { display: none; }
.ir-edit textarea { width: 100%; margin-top: 6px; }

/* Rev. 3.2.1: coluna Visita técnica na lista de chamados */
.visit-flag { display: inline-flex; flex-direction: column; align-items: flex-start; font-size: 12.5px; color: var(--ink-3, #4b5a64); text-decoration: none; }
.visit-flag.is-open { color: #7a4fb5; font-weight: 600; }
.visit-flag .cell-sub { font-weight: 400; }
.visit-flag .vf-n { display: inline-flex; align-items: center; gap: 4px; }

/* Rev. 3.2.1: senha com gerador e confirmação */
.pw-row { display: flex; gap: 6px; align-items: center; }
.pw-row input { flex: 1 1 auto; min-width: 0; }
.pw-row .btn { flex: 0 0 auto; }

/* Rev. 3.3.0: horário de acesso do usuário */
.access-rule .access-block { padding: 12px 0; border-top: 1px solid var(--line-2); }
.access-rule .access-block:first-of-type { border-top: 0; }
.access-rule .access-title { display: block; font-weight: 600; margin-bottom: 8px; }
.access-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 28px; }
.access-day { display: inline-flex; cursor: pointer; }
.access-day input { position: absolute; opacity: 0; pointer-events: none; }
.access-day span { min-width: 46px; text-align: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2, var(--ink)); background: var(--panel); }
.access-day input:checked + span { background: var(--action, #68686c); border-color: var(--action, #68686c); color: #fff; }
.access-day input:focus-visible + span { outline: 2px solid var(--action, #68686c); outline-offset: 2px; }
.access-day input:disabled + span { opacity: .6; cursor: not-allowed; }
.access-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted, #6b7280); }

/* Rev. 3.3.2: tela do perfil em abas */
.role-form > .role-tabs { padding: 0 20px; margin: 0; border-bottom: 1px solid var(--line); }
.role-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.role-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.role-sum { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; }
.role-sum:hover, .role-sum:focus-visible { background: var(--hover); }
.role-sum-l { font-size: 12px; color: var(--muted, #6b7280); }
.role-sum b { font-size: 20px; font-weight: 600; line-height: 1.2; }
.role-sum-s { font-size: 12.5px; color: var(--ink-2, var(--ink)); }
.role-form #role-permissoes .perm-toolbar { border-top: 0; }
@media (max-width: 760px) { .role-summary { grid-template-columns: minmax(0, 1fr); } .role-form > .role-tabs { padding: 0 8px; overflow-x: auto; white-space: nowrap; } }
.perm-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; }
.perm-nav { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 14px 14px; border-right: 1px solid var(--line-2); max-height: calc(100vh - 130px); overflow-y: auto; }
.perm-nav button { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2, var(--ink)); font: inherit; font-size: 13px; cursor: pointer; }
.perm-nav button:hover { background: var(--hover); }
.perm-nav button.active { background: var(--action, #68686c); color: #fff; }
.perm-nav button span { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted, #6b7280); }
.perm-nav button span.all { color: var(--leaf, #16a34a); font-weight: 600; }
.perm-nav button.active span { color: inherit; opacity: .85; }
@media (max-width: 900px) { .perm-layout { grid-template-columns: minmax(0, 1fr); } .perm-nav { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--line-2); padding: 8px; } .perm-nav button { white-space: nowrap; } }
.perm-modules.one { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
/* Rev. 3.3.2: em todo o sistema, o atributo hidden sempre esconde (display:flex/grid de componentes não vence o hidden) */
[hidden] { display: none !important; }
/* Rev. 3.3.2: seções em abas */
.sections-nav { margin: 0 0 2px; display: flex; flex-wrap: wrap; grid-column: 1 / -1; }
.sections-nav button { display: inline-flex; align-items: center; gap: 6px; }
.sections-nav .sections-all { margin-left: auto; color: var(--muted, #6b7280); }
.sections-one > section.panel:not([hidden]) { grid-column: 1 / -1; }
.grid.sections-one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .sections-nav { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } }

/* ---------- 3.3.3 — padronização (auditoria) ---------- */
/* data e hora: largura mínima para exibir DD/MM/AAAA HH:mm sem cortar */
.sd-dt-date { min-width: 128px; }
.sd-dt-datetime { min-width: 158px; }
.sd-dt-time { min-width: 84px; }
/* códigos e protocolos não quebram no meio */
.table td.mono, .table .protocol, .table .cell-sub.protocol, .table .mono.small { white-space: nowrap; }
/* combobox de busca ocupa a coluna dentro de grades e linhas de regras */
.repeater-row .sd-search-select, .form-grid .sd-search-select, .field > .sd-search-select { width: 100%; max-width: 100%; flex: 1 1 auto; }
/* telas estreitas: bloco "span-2" não cria uma segunda coluna na grade de uma coluna */
@media (max-width: 680px) { .grid > .span-2, .form-grid > .span-2 { grid-column: 1 / -1; } }
/* linha de ações do chamado quebra em telas estreitas */
.tabs > button, .tabs > a { flex: 0 0 auto; }
@media (max-width: 680px) { .input-group { flex-wrap: wrap; } .input-group > * { min-width: 0; } }