/* Hierarquia semântica compartilhada por todos os hubs.
   Este arquivo fica por último para unificar componentes que nasceram
   em folhas de estilo diferentes durante a migração. */

.prototype-body {
  --semantic-control: #dfe6eb;
  --semantic-control-strong: #c7d4dc;
  --semantic-stat: #f1e5c4;
  --semantic-content: #fbfaf6;
  --semantic-current: #fff3c4;
  --semantic-success: #a7dfbb;
  --semantic-success-soft: #def1e4;
  --semantic-danger: #f3a6c6;
  --semantic-danger-soft: #f8dce8;
  --semantic-data: #748b98;
}

.screen:not([data-screen$="-legacy"]) .dark-action {
  border: 2px solid var(--ink) !important;
  background: var(--yellow) !important;
  color: var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  font-weight: 950;
}

.screen:not([data-screen$="-legacy"]) .dark-action:hover {
  background: #ffd65a !important;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink) !important;
}

.screen:not([data-screen$="-legacy"]) .dark-action:active {
  transform: translate(4px, 4px);
  box-shadow: none !important;
}

.screen:not([data-screen$="-legacy"]) .dark-action:disabled {
  background: #dedbd3 !important;
  color: #77736b !important;
  box-shadow: none !important;
  transform: none;
}

.screen:not([data-screen$="-legacy"]) .outline-action {
  border: 2px solid var(--ink) !important;
  background: var(--semantic-content) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.screen:not([data-screen$="-legacy"]) .outline-action:hover {
  background: var(--semantic-control) !important;
  transform: none;
}

.screen:not([data-screen$="-legacy"]) :is(.outline-action.danger, button.danger) {
  background: var(--semantic-danger-soft) !important;
}

.screen:not([data-screen$="-legacy"]) :is(.outline-action.danger, button.danger):hover {
  background: var(--semantic-danger) !important;
}

.screen:not([data-screen$="-legacy"]) .test-card {
  border-width: 2px;
  border-radius: var(--ui-radius-card);
  box-shadow: 5px 5px 0 var(--ink);
}

:is(
  .notice-summary,
  .bank-summary,
  .lists-summary,
  .xray-scope-strip,
  .sim-summary-strip,
  .red-summary-strip,
  .rev-summary-strip,
  .anno-summary-strip,
  .graphx-context-strip,
  .timex-summary-strip,
  .crx-summary,
  .arx-summary,
  .fbx-summary,
  .admx-summary
) {
  background: var(--semantic-stat) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
}

:is(
  .notice-summary,
  .bank-summary,
  .lists-summary,
  .xray-scope-strip,
  .sim-summary-strip,
  .red-summary-strip,
  .rev-summary-strip,
  .anno-summary-strip,
  .graphx-context-strip,
  .timex-summary-strip,
  .crx-summary,
  .arx-summary,
  .fbx-summary
) > div,
.admx-summary > article {
  background: transparent !important;
}

:is(
  .performance-metric,
  .errors-metric,
  .sim-history-metrics > div,
  .red-history-metrics > div,
  .graphx-toolbar-count,
  .graphx-toolbar-period,
  .admx-metric
) {
  background: var(--semantic-stat) !important;
}

:is(
  .performance-controls,
  .performance-external-entry,
  .errors-controls,
  .errors-filter-panel,
  .bank-filter-panel,
  .bank-list-panel,
  .list-generator-panel,
  .list-create-bar,
  .xray-filter-panel,
  .sim-register-card,
  .sim-models-card,
  .sim-history-toolbar,
  .red-register-card,
  .red-history-toolbar,
  .rev-create-card,
  .rev-plans-toolbar,
  .anno-create-card,
  .anno-axis-card,
  .anno-library-toolbar,
  .anno-library-filters,
  .graphx-toolbar,
  .timex-new-subject-card,
  .crx-editor,
  .arx-upload,
  .cfgx-nav,
  .fbx-form,
  .admx-system,
  .admx-notices
) {
  background: var(--semantic-control) !important;
}

:is(
  .notice-card,
  .question-card,
  .list-preview-panel,
  .lists-manager,
  .list-selected-detail,
  .xray-distribution-card,
  .xray-incidence-card,
  .xray-detail-card,
  .sim-history-list,
  .sim-history-detail,
  .red-history-list,
  .red-history-detail,
  .rev-plan-card,
  .anno-repertory-card,
  .graphx-main-card,
  .graphx-subject-card,
  .graphx-comparison-card,
  .timex-subject-card,
  .timex-history-card,
  .crx-board,
  .crx-load,
  .arx-browser,
  .cfgx-section,
  .fbx-guide,
  .fbx-history,
  .admx-activity,
  .admx-feedbacks,
  .admx-report,
  .admx-pdf,
  .admx-permissions
) {
  background: var(--semantic-content) !important;
}

/* As partes de um mesmo formulário herdam a superfície do card-pai. */
:is(
  .list-generator-heading,
  .list-generator-body,
  .list-generator-footer,
  .sim-register-fields,
  .sim-subject-heading,
  .sim-subject-table,
  .sim-optional-block,
  .sim-observation-field,
  .sim-register-footer,
  .sim-models-heading,
  .red-register-heading,
  .red-competence-heading,
  .red-competence-grid,
  .red-feedback-layout,
  .red-register-footer,
  .rev-create-fields,
  .rev-interval-heading,
  .rev-interval-editor,
  .rev-timeline-preview,
  .rev-create-footer,
  .anno-create-fields,
  .anno-create-footer,
  .anno-axis-heading
) {
  background: transparent !important;
}

[data-screen="avisos"] .notice-card.is-new,
[data-screen="dashboard"] .session-card,
[data-screen="dashboard"] .inline-card,
[data-screen="banco"] .bank-progress {
  background: var(--semantic-control) !important;
}

:is(
  .performance-goal-card,
  .timex-active-card,
  .crx-today,
  .rev-plan-featured
) {
  background: var(--semantic-current) !important;
}

:is(
  .sim-mode-tabs,
  .red-mode-tabs,
  .anno-mode-tabs,
  .graphx-mode-tabs
) {
  background: var(--semantic-content) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
}

:is(
  .sim-mode-tabs,
  .red-mode-tabs,
  .anno-mode-tabs,
  .graphx-mode-tabs
) > button.is-active,
.xray-year-options > button.is-active,
.xray-detail-tabs > button.is-active,
.list-strategy.is-selected,
.list-distribution.is-selected,
.sim-model-list > button.is-selected,
.sim-history-list > button.is-selected,
.red-history-list > button.is-selected,
.rev-status-tabs > button.is-active,
.anno-axis-list > button.is-active,
.anno-library-filters > button.is-active,
.graphx-record-list > .is-current,
.timex-history-tabs > button.is-active,
.cfgx-nav button.is-active,
.cfgx-nav nav a.is-active,
.fbx-history-filters > button.is-active,
.admx-tabs > button.is-active {
  border-color: var(--ink) !important;
  background: var(--semantic-control-strong) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.cfgx-nav > header,
.fbx-guide > header {
  background: var(--semantic-control-strong) !important;
}

.cfgx-nav nav a.is-active > span {
  background: var(--semantic-content) !important;
}

.fbx-types button.is-selected {
  background: var(--semantic-control-strong) !important;
  box-shadow: none !important;
}

.fbx-types button.is-selected:first-of-type {
  background: var(--semantic-danger-soft) !important;
}

.fbx-types button.is-selected:first-of-type > span {
  background: var(--semantic-danger) !important;
}

:is(
  .performance-date-nav .today,
  .errors-date-nav .today,
  .bank-choice-row .is-today,
  .crx-day.is-today,
  .crx-item.is-current
) {
  background: var(--yellow) !important;
  color: var(--ink) !important;
}

:is(
  .rev-cycle-steps .is-done,
  .rev-compact-steps .is-done,
  .crx-item.is-done,
  .timex-subject-card.is-complete
) {
  background: var(--semantic-success-soft) !important;
}

:is(
  .performance-goal-track > i,
  .weekly-progress > i,
  .rev-plan-progress b,
  .sim-subject-table i > em,
  .sim-history-list i > em,
  .red-competence-card i > em,
  .red-history-list i > em,
  .timex-subject-card i > b,
  .crx-load i > b
) {
  background: var(--semantic-success) !important;
}

:is(
  .error-badge,
  .wrong-badge,
  .errors-recurring > #errorsRecurringList > div > b,
  .admx-status.is-error
) {
  background: var(--semantic-danger) !important;
  color: var(--ink) !important;
}

:is(
  .xray-incidence-list i > b,
  .performance-bars span,
  .graphx-subject-bars i > b,
  .graphx-comparison-bars i > b
) {
  background: var(--semantic-data) !important;
}

[data-screen="graficos"] .graphx-area-fill {
  fill: #dce4e8 !important;
}

[data-screen="graficos"] .graphx-main-line {
  stroke: var(--semantic-data) !important;
}

[data-screen="graficos"] .graphx-points circle {
  fill: var(--semantic-content) !important;
  stroke: var(--semantic-data) !important;
}

:is(
  .sim-history-metrics > div,
  .red-history-metrics > div,
  .red-competence-card,
  .arx-folder,
  .arx-file
) {
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .screen:not([data-screen$="-legacy"]) :is(.dark-action, .outline-action) {
    transition: none;
  }
}