.icon { display: inline-block; width: var(--icon-size); height: var(--icon-size); background-color: currentColor; mask: var(--icon-url) no-repeat center / contain; -webkit-mask: var(--icon-url) no-repeat center / contain; flex-shrink: 0; vertical-align: middle; }
.button { min-height: var(--control-height); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 9px var(--space-4); font-size: var(--font-sm); font-weight: 600; white-space: nowrap; transition: background var(--duration), box-shadow var(--duration); }
.button .icon { --icon-size: 16px; }
.button--primary { background: var(--color-brand); color: white; box-shadow: 0 2px 3px #154f7d12; }
.button--primary:hover { background: var(--color-brand-hover); }
.button--secondary { background: var(--color-surface); color: var(--color-text); border-color: #dce3e7; }
.button--secondary:hover { background: var(--color-bg); border-color: #b9cbd0; }
.button--danger { background: var(--color-surface); color: var(--color-danger); border-color: #ecd4d5; }
.button--danger:hover { background: #fbefef; border-color: var(--color-danger); }
.button--full { width: 100%; }
.icon_button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--color-muted); flex-shrink: 0; }
.icon_button:hover { color: var(--color-brand); background: var(--color-brand-soft); }
.text_link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-brand); font-weight: 600; font-size: var(--font-sm); white-space: nowrap; }
.text_link:hover, .person_name:hover { text-decoration: underline; text-underline-offset: 3px; }
.text_link .icon { --icon-size: 15px; }
.row_actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: nowrap; }
.status_quick_change { margin: 0; }
.status_quick_change select { min-height: 34px; padding: 6px var(--space-6) 6px var(--space-3); font-size: var(--font-sm); border-color: #dce3e7; }
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-width: 0; }
.panel_header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6); }
.panel_header p { margin-top: 3px; font-size: var(--font-xs); color: var(--color-muted); }
.panel_header > .icon { color: var(--color-subtle); --icon-size: 18px; }
.subtle_tag { font-size: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 5px var(--space-2); color: var(--color-muted); white-space: nowrap; }
.count_pill { display: inline-flex; justify-content: center; align-items: center; min-width: 21px; padding: 2px 7px; font-size: 12px; color: var(--color-muted); background: #f0f4f5; border-radius: var(--radius-full); margin-left: var(--space-1); font-weight: 500; white-space: nowrap; }
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; font-size: 13px; border-radius: var(--radius-full); flex-shrink: 0; font-weight: 600; letter-spacing: -.2px; }
.avatar--small { width: 30px; height: 30px; font-size: 12px; }
.avatar--tiny { width: 23px; height: 23px; font-size: 10px; }
.avatar--large { width: 60px; height: 60px; font-size: 19px; }
.avatar--profile { background: #e7e2da; color: #5a665e; border: 3px solid #f6f3ed; }
.person, .employee_cell { display: inline-flex; align-items: center; gap: var(--space-3); }
.person_name { font-size: var(--font-sm); font-weight: 600; white-space: nowrap; }
.person small { display: block; color: var(--color-muted); font-size: 12px; margin-top: 3px; }
.employee_cell { gap: var(--space-2); white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-full); padding: 4px var(--space-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.badge .icon { --icon-size: 12px; }
.status_dot, .legend_dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.legend_dot { width: 7px; height: 7px; }
.tone_blue { color: #3d72a6; background: #ebf2fa; }
.tone_amber { color: #966d2e; background: #fcf4e5; }
.tone_teal { color: #23867d; background: #eaf5f1; }
.tone_green { color: #3a875c; background: #edf7ed; }
.tone_violet { color: #8164a5; background: #f2edfa; }
.tone_red { color: #ad5b60; background: #fbefef; }
.tone_slate { color: #697b8c; background: #edf1f5; }
.text_blue { color: #6b98c3; } .text_amber { color: #d0a054; } .text_teal { color: #5aa79a; } .text_violet { color: #a08abe; } .text_green { color: #75a885; } .text_red { color: #c78a90; } .text_slate { color: #95a6b5; }
.text_danger { color: var(--color-danger); }
.muted { color: var(--color-muted); }
.money { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.dropdown { position: relative; }
.dropdown summary { list-style: none; }
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown_panel { position: absolute; right: 0; top: calc(100% + 14px); z-index: 50; width: 330px; background: var(--color-surface); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.dropdown_panel > p { font-size: var(--font-xs); color: var(--color-muted); margin: var(--space-1) 0 var(--space-4); }
.dropdown_panel > a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); font-size: var(--font-sm); }
.dropdown_panel small { display: block; font-size: 12px; color: var(--color-muted); margin-top: 3px; }
.notification_dot { position: absolute; top: 6px; right: 7px; width: 5px; height: 5px; background: #cf9e64; border: 1px solid white; border-radius: 50%; }
.notification_badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-danger); color: white; font-size: 10px; font-weight: 700; border-radius: var(--radius-full); border: 1px solid white; line-height: 1; }
.dropdown_panel > a.is_unread { background: var(--color-brand-soft); margin: 0 calc(var(--space-5) * -1); padding-left: var(--space-5); padding-right: var(--space-5); border-radius: var(--radius-sm); }
.profile_menu .dropdown_panel { width: 270px; }
input, select, textarea { border: 1px solid #dce3e7; border-radius: var(--radius-sm); background: var(--color-surface); padding: 10px var(--space-3); color: var(--color-text); min-height: var(--control-height); font-size: var(--font-sm); }
input::placeholder, textarea::placeholder { color: #91a0aa; }
input:focus, select:focus, textarea:focus { border-color: var(--color-brand); }
select { padding-right: var(--space-7); }
textarea { resize: vertical; }
.filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: 0 var(--space-6) var(--space-5); }
.filter_search { position: relative; min-width: 180px; flex: 1; }
.filter_search > .icon { position: absolute; left: var(--space-3); top: 12px; color: var(--color-subtle); --icon-size: 16px; }
.filter_search input { padding-left: 37px; width: 100%; }
.filters select { max-width: 195px; }
.clear_filters { font-size: var(--font-xs); color: var(--color-muted); text-decoration: underline; }
.table_panel { overflow: hidden; }
.table_scroll { position: relative; width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #ccd9dd transparent; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: var(--font-sm); white-space: nowrap; }
th { color: var(--color-muted); font-size: var(--font-xs); font-weight: 600; background: #f8fafb; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: var(--space-4); }
td { padding: var(--space-5) var(--space-4); border-bottom: 1px solid #eff2f4; font-size: var(--font-sm); }
td:first-child, th:first-child { padding-left: var(--space-6); }
td:last-child, th:last-child { padding-right: var(--space-6); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f9fbfb; }
.destination { max-width: 160px; display: block; white-space: normal; }
.cell_note { display: block; font-size: var(--font-xs); margin-top: var(--space-2); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: var(--font-xs); }
.pagination nav { display: flex; gap: var(--space-1); }
.page_button { display: inline-grid; place-items: center; min-width: 31px; height: 31px; border: 1px solid var(--color-border); background: white; border-radius: var(--radius-sm); }
.page_button .icon { --icon-size: 14px; }
.page_button.is_active { color: var(--color-brand); border-color: #a9cbe3; background: var(--color-brand-soft); }
.empty_state { padding: var(--space-12) var(--space-6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); white-space: normal; }
.empty_state > .icon { --icon-size: 30px; color: #98b2b5; }
.empty_state p { color: var(--color-muted); }
.modal { width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: var(--space-7); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); color: var(--color-text); overflow-y: auto; }
.modal::backdrop { background: #0c273a80; backdrop-filter: blur(3px); }
.modal_header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-4); }
.modal_header h2 { font-size: 23px; }
.demo_notice { background: #f4f7f8; color: var(--color-muted); font-size: var(--font-xs); padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-5); }
.form_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); max-width: 760px; }
.table_panel > form > .form_grid { padding: var(--space-6) var(--space-6) 0; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label { font-size: var(--font-sm); font-weight: 500; }
.field small { color: var(--color-muted); font-size: 12px; }
.field input, .field select, .field textarea { width: 100%; }
.field--full { grid-column: 1 / -1; }
.required_mark { color: var(--color-brand); }
.modal_footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-6); margin-top: var(--space-6); border-top: 1px solid var(--color-border); }
.toast { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 100; max-width: min(460px, calc(100vw - 32px)); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); color: white; background: var(--color-sidebar); border: 1px solid #2c6a9c; box-shadow: var(--shadow-float); font-size: var(--font-sm); }
progress { display: block; width: 100%; height: 5px; border: 0; border-radius: var(--radius-full); accent-color: var(--color-brand); background: #edf2f2; overflow: hidden; }
progress::-webkit-progress-bar { background: #edf2f2; border-radius: var(--radius-full); }
progress::-webkit-progress-value { background: #5ba89c; border-radius: var(--radius-full); }
progress::-moz-progress-bar { background: #5ba89c; border-radius: var(--radius-full); }
@media (max-width: 760px) { .panel_header { padding: var(--space-4); flex-wrap: wrap; } .panel_header h2 { font-size: 15px; } .filters { padding: 0 var(--space-4) var(--space-4); gap: var(--space-2); } .filter_search { min-width: 100%; } .filters select { flex: 1; max-width: 100%; min-width: 120px; width: 120px; } .pagination { padding: var(--space-4); flex-wrap: wrap; } .notifications .dropdown_panel { position: fixed; top: 65px; right: 12px; max-width: calc(100vw - 24px); } .profile_menu .dropdown_panel { right: -5px; } td:first-child, th:first-child { padding-left: var(--space-4); } .form_grid { grid-template-columns: 1fr; gap: var(--space-4); } .modal { padding: var(--space-5); } .toast { right: var(--space-4); bottom: var(--space-4); } .icon_button { min-width: 36px; min-height: 36px; } }

/* ---- Formulários (sprint de estabilização) ----------------------------
   A regra global de input acima é para campos de TEXTO. Checkbox e radio
   não podem herdar padding, altura mínima nem largura de 100%: era isso
   que gerava as caixas gigantes e os textos longe dos campos. */
input[type="checkbox"], input[type="radio"],
.field input[type="checkbox"], .field input[type="radio"] {
  width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none;
  border-radius: 4px; accent-color: var(--color-brand); cursor: pointer;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.field input[type="file"] { min-height: 0; padding: var(--space-2); }
.field_label { font-size: var(--font-sm); font-weight: 500; padding: 0; }
.checkbox_label { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 400; cursor: pointer; line-height: 1.35; }
.field--checkbox { justify-content: center; }
.field--checkbox .checkbox_label { min-height: var(--control-height); }
.choice_fieldset { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.choice_grid > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-2); }
.choice_grid > div:empty::before { content: "Nenhuma opção cadastrada."; color: var(--color-muted); font-size: var(--font-sm); }
.choice_grid label {
  display: flex; align-items: center; gap: var(--space-2); min-height: 38px; padding: 7px var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface);
  font-weight: 400; font-size: var(--font-sm); cursor: pointer; line-height: 1.25;
}
.choice_grid label:hover { border-color: #c8d3da; }
.choice_grid label:has(input:checked) { border-color: var(--color-brand); background: var(--color-brand-soft); }
.choice_grid label:has(input:focus-visible) { outline: 2px solid var(--color-brand); outline-offset: 1px; }
.field--invalido input:not([type="checkbox"]):not([type="radio"]), .field--invalido select, .field--invalido textarea { border-color: var(--color-danger); }
.field--invalido .choice_grid label { border-color: #f0c4bf; }
.form_alert {
  margin: var(--space-6) var(--space-6) 0; padding: var(--space-4); max-width: 760px;
  border: 1px solid #f0c4bf; border-left: 4px solid var(--color-danger); border-radius: var(--radius-md);
  background: #fdf3f2; color: var(--color-text); font-size: var(--font-sm);
}
.form_alert:focus { outline: 2px solid var(--color-danger); outline-offset: 2px; }
.form_alert strong { display: block; color: var(--color-danger); margin-bottom: var(--space-2); }
.form_alert ul { margin: 0; padding-left: var(--space-5); display: grid; gap: 2px; }
.form_alert a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.form_section { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; border: 0; min-width: 0; }
.form_section + .form_section { padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.form_section > legend { grid-column: 1 / -1; float: left; width: 100%; padding: 0; margin-bottom: var(--space-1); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--color-text); }
.form_section > .field--wide { grid-column: 1 / -1; }
.form_section > .field--wide.field--multipla, .form_grid > .field--multipla { max-width: none; }
@media (max-width: 760px) {
  .form_alert { margin: var(--space-4) var(--space-4) 0; }
  .form_section { grid-template-columns: 1fr; gap: var(--space-4); }
  .choice_grid > div { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.detail_section_body > .form_alert, form.detail_section_body > .form_alert { margin: 0 0 var(--space-4); }
/* Tabelas com muitas colunas em espaço estreito: o texto quebra linha em
   vez de obrigar a rolagem lateral (valores e botões continuam inteiros). */
.table_scroll--wrap table { white-space: normal; }
.table_scroll--wrap th, .table_scroll--wrap td { padding-left: var(--space-3); padding-right: var(--space-3); }
.table_scroll--wrap td:first-child, .table_scroll--wrap th:first-child { padding-left: var(--space-5); }
.table_scroll--wrap td .badge, .table_scroll--wrap .button { white-space: nowrap; }
.table_scroll--wrap .row_actions { flex-wrap: wrap; min-width: 92px; }
.nowrap { white-space: nowrap; }
.cell_title { font-weight: 600; }