/* Padrão visual do Portal. Decisões do titular: 22/10/2026.
   Carregar DEPOIS do CSS do módulo. Módulos definem layout, não novas variantes. */
html:root {
  --portal-font: Arial, Helvetica, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --control-height: 48px; --control-radius: 14px; --panel-radius: 16px;
  --primary: #39b54a; --primary-hover: #329e41;
  --bg: #f3f5f8; --surface: #fff; --border: #d9e0e7;
  --text: #1f2937; --text-soft: #5b6573; --brand-neutral: #2f3a4a;
  --accent: #e4005a; --shadow: 0 10px 30px rgb(15 23 42 / 8%);
  --danger-bg: #fff2f5; --danger-border: #f3b8c9; --danger-text: #8f1239;
  color-scheme: light;
}
body { font-family: var(--portal-font); color: var(--text); font-size: 16px; line-height: 1.5; }
/* O cabeçalho/identidade continuam em style.css: logo, hero, grid e container. */
:root .hero { padding: 0; }
:root .hero__content { text-align: center; }
:root .hero__logo-wrap { justify-content: center; }
:root .hero__logo { max-width: 500px; height: auto; }
:root .page-actions { gap: var(--space-3); }

/* Base de botões: cards clicáveis mantêm as dimensões de card. */
:root :is(button:where(:not(.card):not(.permission-modal__backdrop)), .btn, .btn-link, .btn-outline, .btn-secondary, .btn-primary, .btn-submit, .btn-save, .btn-logout, .btn-danger, .btn-remove, .button, .glpi-btn, .link-button, .row-action) {
  box-sizing: border-box; min-height: var(--control-height); min-width: var(--control-height);
  border-radius: var(--control-radius); padding: 10px 20px;
  font-family: var(--portal-font); font-size: 1rem; font-weight: 700; line-height: 1.4;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
:root :is(.btn-submit, .btn-primary, .btn--primary, .btn-save, button:where([type=submit]:not(.secondary):not(.btn-secondary):not(.btn-outline):not(.btn-link):not(.btn--secondary):not(.btn-danger):not(.btn-remove))) {
  display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2);
  background: var(--primary); border: 1px solid var(--primary); color: #fff;
}
:root :is(.btn-link, .btn-outline, .btn-secondary, .btn--secondary, .btn-logout, .secondary, .glpi-btn, .link-button, .row-action) {
  display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2);
  background: var(--surface); border: 1px solid var(--border); color: var(--brand-neutral);
}
:root :is(.btn-danger, .btn-remove) { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-text); }
:root :is(.btn-submit, .btn-primary, .btn--primary, .btn-save):hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); filter: none; }
:root :is(.btn-link, .btn-outline, .btn-secondary, .btn--secondary, .btn-logout, .secondary, .glpi-btn, .link-button, .row-action):hover:not(:disabled) {
  background: #f3f6fa; border-color: #bac6d3; transform: none; box-shadow: var(--shadow);
}
:root :is(button, .btn, .btn-link, .button):disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
:root :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Mesmas medidas e tipografia em formulários, filtros e cadastros. */
html:root :is(input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset])), select, textarea) {
  box-sizing: border-box; min-height: var(--control-height); max-width: 100%;
  border: 1px solid #cfd7e3; border-radius: var(--control-radius); padding: 12px 14px;
  background: var(--surface); color: var(--text);
  font-family: var(--portal-font); font-size: 1rem; font-weight: 400; line-height: 1.375;
}
:root textarea { resize: vertical; }
:root input[type=file] { padding: 0; border: 0; background: transparent; }
:root input[type=file]::file-selector-button { min-height: var(--control-height); margin-right: var(--space-3); padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--control-radius); background: var(--surface); color: var(--brand-neutral); font: inherit; cursor: pointer; }
:root :is(input, textarea)::placeholder { color: var(--text-soft); opacity: 1; }
:root :is(input, select, textarea):disabled { background: #f3f6fa; color: var(--text-soft); cursor: not-allowed; }
:root :is(input[type=checkbox], input[type=radio]) { accent-color: var(--primary); width: 18px; height: 18px; min-height: 18px; flex-shrink: 0; }
:root :is(.field, .form-grid, .login-form, .atas-form) { gap: var(--space-4); }
:root :is(form label, .field label, .atas-form label, .atas-unificadas label) { gap: var(--space-2); font-weight: 700; color: var(--brand-neutral); }
:root :is(.actions, .form-actions, .atas-actions, .atas-inline-actions, .atas-step-actions, .confirm-actions, .report-tools) { gap: var(--space-3); }

/* Superfícies e separação de seções, preservando as grades de cada módulo. */
:root :is(.panel, .atas-card, .atas-note, .atas-guidance, .inventory-form, .inventory-list, .software-panel, .form-card, .auth-card, .login-card, .chart-panel, .report-section) {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--panel-radius);
  padding: var(--space-6); margin-bottom: var(--space-6); box-shadow: var(--shadow);
}
:root :is(.category, .report-section) + :is(.category, .report-section) { margin-top: var(--space-6); }
:root :is(.grid, .charts-grid, .software-grid) { gap: var(--space-6); }
:root :is(.panel, .category, .report-section) > h2 { margin-bottom: var(--space-4); color: var(--brand-neutral); }
:root :is(.muted, .help-text, .field-help) { color: var(--text-soft); line-height: 1.6; }
:root :is(.badge, .software-badge, .status-badge) { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 8px; border-radius: 999px; font-size: .8125rem; line-height: 1.4; font-weight: 700; }
:root table :is(th, td) { padding: 12px 16px; border-color: var(--border); vertical-align: top; }
:root table th { background: #f3f6fa; color: var(--brand-neutral); font-weight: 700; }
:root .portal-table { width: 100%; border-collapse: collapse; }
:root .portal-table :is(th, td) { text-align: left; border-bottom: 1px solid var(--border); }
:root summary { min-height: var(--control-height); padding-block: var(--space-3); cursor: pointer; }
:root :is(.atas-tabs, [role=tablist]) { gap: var(--space-3); }
:root :is(.atas-tabs, [role=tablist]) button { min-height: var(--control-height); border-radius: var(--control-radius); }
:root :is(.atas-tabs button.active, [role=tab][aria-selected=true]) { background: var(--brand-neutral); border-color: var(--brand-neutral); color: #fff; }

/* Mesma moldura e centralização; larguras específicas de vídeo/tabelas são mantidas. */
:root :is(.report-modal, .atas-modal, .software-modal, .modal-backdrop) { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-6); background: rgb(15 23 42 / 48%); }
:root .permission-modal { place-items: center; padding: var(--space-6); }
:root :is(.report-modal__dialog, .atas-modal__box, .software-modal__box, .permission-modal__dialog, .modal-card, .video-dialog, dialog) {
  box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--panel-radius);
  padding: var(--space-6); color: var(--text); background: var(--surface);
  max-width: calc(100vw - 48px); max-height: calc(100dvh - 48px); overflow: auto;
}
:root dialog { margin: auto; }
:root dialog::backdrop { background: rgb(15 23 42 / 48%); }
:root :is(.form-message--error, .report-message--error, .atas-message--error) { color: var(--danger-text); }
:root :is(.form-message--success, .report-message--success, .atas-message--success) { color: #166534; }
[hidden], .is-hidden { display: none !important; }

@media (max-width: 640px) {
  :root :is(.panel, .atas-card, .atas-note, .atas-guidance, .inventory-form, .inventory-list, .software-panel, .form-card, .auth-card, .login-card, .chart-panel, .report-section) { padding: var(--space-4); margin-bottom: var(--space-4); }
  :root :is(.report-modal, .atas-modal, .software-modal, .modal-backdrop, .permission-modal) { padding: var(--space-3); }
  :root :is(.report-modal__dialog, .atas-modal__box, .software-modal__box, .permission-modal__dialog, .modal-card, .video-dialog, dialog) { padding: var(--space-4); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  :root :is(button, .btn, .btn-link, .button, .card) { transition: none; transform: none; }
}

/* Shared tab navigation. Mobile wrapping follows the owner's explicit choice. */
html:root :is(.portal-tabs, .atas-tabs.module-tabs) {
  display: flex; flex-wrap: nowrap; gap: var(--space-3); overflow-x: auto;
  max-width: 100%; margin: 0 0 var(--space-6); padding: 4px 4px 8px;
}
html:root :is(.portal-tabs, .atas-tabs.module-tabs) > button {
  flex: 0 0 auto; width: auto; white-space: nowrap;
  background: var(--surface); color: var(--brand-neutral); border: 1px solid var(--border);
}
html:root :is(.portal-tabs, .atas-tabs.module-tabs) > [aria-selected=true] {
  background: var(--brand-neutral); border-color: var(--brand-neutral); color: white;
}
html:root .portal-tab-panel { min-width: 0; }
html:root .portal-tab-panel > :first-child { margin-top: 0; }
html:root .portal-tab-panel > :last-child { margin-bottom: 0; }
html:root .atas-unificadas :is(.row, .actions) { margin: 0; gap: var(--space-3); }
html:root .atas-unificadas .row { display: flex; align-items: start; flex-wrap: wrap; }
html:root .atas-unificadas .row > label { flex: 1; min-width: min(220px, 100%); }
html:root .atas-unificadas label { margin: 0; gap: var(--space-2); }
html:root .atas-unificadas :is(.portal-tab-panel, #employeeForm, #sectorForm, #signerPicker, #addPerson, #preview, #questionnaireEditor) { display: grid; gap: var(--space-4); }
html:root .atas-unificadas :is(#documentForm, #editor) { display: grid; gap: var(--space-6); }
html:root .atas-unificadas #documentForm > .portal-tabs { margin: 0; }
html:root .atas-unificadas :is(h2, h3, p) { margin: 0; }
html:root .atas-unificadas :is(#trackingPanel, #trackingList, #createPanel, #registryPanel, #modelsPanel, #sectorsPanel) { display: grid; gap: var(--space-6); }
html:root .atas-unificadas :is(.people, .selected) { margin: 0; }
html:root .atas-unificadas :is(#questionnaireEditor fieldset, #documentForm section[aria-label]) { margin: 0; }
html:root .atas-unificadas details { padding: var(--space-4) 0; }
html:root .atas-unificadas details:not([open]) > :not(summary) { display: none; }
html:root .atas-unificadas details:not([open]) { display: block; }
html:root .atas-unificadas summary { margin: 0; }
html:root .atas-unificadas #body { min-height: 240px; }
html:root .atas-unificadas #source:empty { display: none; }
html:root .atas-unificadas #message:empty { display: none; }
html:root .portal-tab-panel { display: grid; gap: var(--space-6); }
html:root .portal-tab-panel :is(.panel, .software-panel, .video-categories, .inventory-band) { margin: 0; }
html:root .portal-tab-panel :is(.video-categories, .video-form, #meetingForm, #roomForm) { display: grid; gap: var(--space-4); }
html:root .portal-tab-panel :is(.video-form, #meetingForm, #roomForm) label { display: grid; gap: var(--space-2); margin: 0; }
html:root .portal-tab-panel :is(.row, .video-actions, .software-actions) { gap: var(--space-3); margin: 0; }
html:root .portal-tab-panel :is(#meetingForm, #roomForm) :is(input, select, textarea) { width: 100%; }
html:root .portal-tab-panel .check-label { display: flex; align-items: center; }
html:root .portal-tab-panel :is(h2, h3, p) { margin-block: 0; }
html:root .atas-unificadas #modelsPanel > .portal-tab-panel { border: 0; padding-top: 0; }
html:root .atas-unificadas .portal-tab-panel > form { display: grid; gap: var(--space-4); }
html:root #createPanel:has(#editor:not([hidden])) > .actions { display: none; }
html:root .atas-unificadas label:has(> input:is([type=checkbox], [type=radio])) { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; }
html:root .atas-unificadas #questions fieldset > :not(legend) { margin-top: var(--space-4); }
html:root .atas-unificadas #questions fieldset { padding: var(--space-4); }
html:root .atas-unificadas #questions { display: grid; gap: var(--space-4); }
html:root .portal-tab-panel > :is(.panel, .software-panel) { display: grid; gap: var(--space-6); }
html:root .portal-tab-panel :is(.report-tools, .pending-filter, .form-grid, .filter-bar) { gap: var(--space-4); }
html:root .portal-tab-panel > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
html:root .portal-tab-panel :is(.table-wrap, .report-table-wrap, .software-table-wrap) { min-width: 0; max-width: 100%; overflow-x: auto; }
/* Populated records need explicit space between identity, metadata and actions. */
html:root .atas-unificadas .registry-row { display: grid; gap: var(--space-4); padding: var(--space-4) 0; min-width: 0; overflow-wrap: anywhere; }
html:root .atas-unificadas .registry-row > :is(strong, p, h3) { margin: 0; }
html:root .atas-unificadas .registry-row > button { justify-self: start; }
html:root .atas-unificadas .registry-row button { margin: 0; }
html:root .atas-unificadas .registry-row .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
html:root .atas-unificadas #sectorList > p { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
html:root .atas-unificadas #sectorList button { margin: 0; }
html:root .atas-unificadas #documents > .panel { display: grid; gap: var(--space-4); overflow-wrap: anywhere; }
html:root .atas-unificadas #documents > .panel > button { justify-self: start; }
html:root .atas-unificadas #questionnaireModels { display: grid; gap: var(--space-4); margin: 0; }
html:root .atas-unificadas .portal-tabs { margin: 0; }
html:root :is(#meetings, #invitedMeetings) > .panel { display: grid; gap: var(--space-4); overflow-wrap: anywhere; }
html:root :is(#meetings, #invitedMeetings) > .panel > :is(h3, p, .actions) { margin: 0; }
html:root .portal-tab-panel > section:has(> :is(#meetings, #invitedMeetings)) { display: grid; gap: var(--space-4); }
html:root .video-actions { gap: var(--space-3); }
html:root .video-library .card__body { gap: var(--space-4); }
html:root .video-library .card__body > :is(h3, p) { margin: 0; }
html:root .atas-unificadas #signatures li { display: grid; gap: var(--space-4); overflow-wrap: anywhere; }
html:root .atas-unificadas #signatures li button { margin-left: 0; justify-self: start; }
@media (max-width: 480px) {
  html:root .atas-unificadas .registry-row .actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  html:root .atas-unificadas .registry-row .actions > button { width: 100%; }
}
/* Owner's choice: all tabs visible in rows on mobile, on every screen. */
@media (max-width: 720px) {
  html:root :is(.portal-tabs, .atas-tabs.module-tabs, .atas-tabs, .module-tabs, .dashboard-tabs, [role=tablist]) {
    display: flex; flex-wrap: wrap; overflow: visible; max-width: 100%; gap: var(--space-3);
  }
  html:root :is(.portal-tabs, .atas-tabs.module-tabs, .atas-tabs, .module-tabs, .dashboard-tabs, [role=tablist]) > :is(button, [role=tab]) {
    flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%;
    white-space: normal; overflow-wrap: anywhere; min-height: var(--control-height);
  }
}
/* Owner's choice: each table record becomes a card on mobile. */
@media (max-width: 720px) {
  html:root table[data-portal-cards] { display: block; width: 100%; min-width: 0; max-width: 100%; border: 0; border-spacing: 0; }
  html:root table[data-portal-cards] > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  html:root table[data-portal-cards] tr[data-portal-header] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  html:root table[data-portal-cards] > :is(tbody, tfoot) { display: grid; width: 100%; gap: var(--space-4); }
  html:root table[data-portal-cards] > :is(tbody, tfoot) > tr,
  html:root table[data-portal-cards] > tr { display: grid; width: 100%; min-width: 0; box-sizing: border-box; padding: var(--space-4); margin: 0; border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--surface); }
  html:root table[data-portal-cards] > :is(tbody, tfoot) > tr > :is(td, th),
  html:root table[data-portal-cards] > tr > :is(td, th) { display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  html:root table[data-portal-cards] :is(td, th)[data-portal-label]::before { content: attr(data-portal-label); display: block; margin-bottom: var(--space-2); font-size: .875rem; font-weight: 700; color: var(--text-soft); text-transform: none; }
  html:root table[data-portal-cards] :is(td, th)[data-portal-label=""]::before { display: none; }
  html:root table[data-portal-cards] :is(td, th):last-child { border-bottom: 0; }
  html:root table[data-portal-cards] td:has(button, .actions, .software-actions, .btn-submit, .btn-secondary, .btn-link) { order: 1; }
  html:root table[data-portal-cards] td :is(.actions, .software-actions, .atas-inline-actions, .row-actions) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); width: 100%; }
  html:root table[data-portal-cards] td :is(button, .btn-secondary, .btn-submit, .btn-outline, .btn-link, .row-action) { width: 100%; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}