/* =========================================================
   UBICACIÓN:
   frontend/src/pages/gobernanza/objetivos/objetivos.css

   WIRTZ HUB · GOBERNANZA · OBJETIVOS
   PARTE 1 DE 2
   ========================================================= */

/* =========================================================
   PAGE
   ========================================================= */

.objectives-page {
  display: flex;
  flex-direction: column;
  gap: 12px;

  width: 100%;
  min-width: 0;

  color: var(--text);
}

/* =========================================================
   HEADER
   ========================================================= */

.objectives-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;

  padding: 16px;

  border: 1px solid var(--border);
  border-radius: 16px;

  background: var(--panel);
}

.objectives-brand {
  display: flex;
  align-items: center;
  gap: 12px;

  min-width: 0;
}

.objectives-brand__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--surface);
}

.objectives-brand__icon .icon {
  width: 20px;
  height: 20px;
}

.objectives-brand__copy {
  min-width: 0;
}

.objectives-brand__copy > span {
  display: block;

  margin-bottom: 2px;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;

  color: var(--text-muted);
}

.objectives-brand__copy h1 {
  margin: 0;

  font-size: 24px;
  line-height: 1.05;
  font-weight: 800;
}

.objectives-brand__copy p {
  margin: 5px 0 0;

  max-width: 700px;

  font-size: 12px;
  line-height: 1.45;

  color: var(--text-muted);
}

.objectives-head__status {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.objectives-head-status {
  display: flex;
  align-items: center;
  gap: 9px;

  min-width: 126px;
  padding: 9px 11px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--surface);
}

.objectives-head-status > .icon {
  width: 18px;
  height: 18px;
}

.objectives-head-status > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.objectives-head-status small {
  font-size: 9px;
  font-weight: 700;

  color: var(--text-muted);
}

.objectives-head-status strong {
  font-size: 15px;
  line-height: 1;
}

.objectives-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.objectives-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 36px;
  padding: 0 12px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--panel);
  color: var(--text);

  font: inherit;
  font-size: 12px;
  font-weight: 750;

  cursor: pointer;

  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    opacity 0.16s ease,
    transform 0.16s ease;
}

.objectives-btn:hover:not(:disabled) {
  background: var(--surface);
  transform: translateY(-1px);
}

.objectives-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.objectives-btn .icon {
  width: 15px;
  height: 15px;
}

.objectives-btn--dark {
  background: var(--text);
  color: var(--panel);
  border-color: var(--text);
}

.objectives-btn--dark:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 88%, transparent);
}

.objectives-btn--compact {
  min-height: 32px;
  padding-inline: 10px;
}

.objectives-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  flex: 0 0 32px;

  padding: 0;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: var(--panel);
  color: var(--text);

  cursor: pointer;

  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.objectives-icon-btn:hover {
  background: var(--surface);
  transform: translateY(-1px);
}

.objectives-icon-btn .icon {
  width: 14px;
  height: 14px;
}

.objectives-icon-btn--danger {
  color: var(--danger, #b42318);
}

/* =========================================================
   METRICS
   ========================================================= */

.objectives-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.objectives-metric {
  display: flex;
  align-items: center;
  gap: 9px;

  min-width: 0;
  padding: 11px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--panel);

  animation: objectivesMetricIn 0.18s ease both;
  animation-delay: calc(var(--objectives-index, 0) * 20ms);
}

.objectives-metric__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: var(--surface);
}

.objectives-metric__icon .icon {
  width: 16px;
  height: 16px;
}

.objectives-metric__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;

  min-width: 0;
}

.objectives-metric__copy small {
  overflow: hidden;

  font-size: 10px;
  font-weight: 700;

  color: var(--text-muted);

  text-overflow: ellipsis;
  white-space: nowrap;
}

.objectives-metric__copy strong {
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
}

/* =========================================================
   CONTROL METRICS
   ========================================================= */

.objectives-control-metrics {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px;
}

.objectives-control-card {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
  padding: 9px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--surface);
}

.objectives-control-card > .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.objectives-control-card > span {
  min-width: 0;
}

.objectives-control-card small {
  display: block;

  overflow: hidden;

  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;

  color: var(--text-muted);

  white-space: nowrap;
  text-overflow: ellipsis;
}

.objectives-control-card strong {
  display: block;

  margin-top: 2px;

  font-size: 14px;
  line-height: 1;
}

/* =========================================================
   PANEL
   ========================================================= */

.objectives-panel {
  min-width: 0;

  border: 1px solid var(--border);
  border-radius: 16px;

  background: var(--panel);

  overflow: hidden;
}

/* =========================================================
   FILTERS
   ========================================================= */

.objectives-filters {
  border-bottom: 1px solid var(--border);
}

.objectives-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 14px;

  border-bottom: 1px solid var(--border);
}

.objectives-filters__title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.objectives-filters__title > .icon {
  width: 17px;
  height: 17px;
}

.objectives-filters__title > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.objectives-filters__title span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;

  color: var(--text-muted);
}

.objectives-filters__title strong {
  font-size: 13px;
}

.objectives-filters__summary {
  display: flex;
  align-items: center;
}

.objectives-filters__summary > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.objectives-filters__summary small {
  font-size: 10px;
  font-weight: 700;

  color: var(--text-muted);
}

.objectives-filters__summary strong {
  font-size: 15px;
}

.objectives-filters__body {
  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 12px 14px;
}

.objectives-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.objectives-search {
  display: flex;
  align-items: center;
  gap: 8px;

  min-height: 38px;
  padding: 0 11px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--surface);
}

.objectives-search .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;

  color: var(--text-muted);
}

.objectives-search input {
  width: 100%;
  min-width: 0;

  border: 0;
  outline: 0;

  background: transparent;
  color: var(--text);

  font: inherit;
  font-size: 12px;
}

.objectives-search input::placeholder {
  color: var(--text-muted);
}

.objectives-filters-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.objectives-filter-field,
.objectives-field {
  display: flex;
  flex-direction: column;
  gap: 5px;

  min-width: 0;
}

.objectives-filter-field > span,
.objectives-field > span {
  font-size: 10px;
  font-weight: 750;

  color: var(--text-muted);
}

.objectives-filter-field input,
.objectives-filter-field select,
.objectives-field input,
.objectives-field select,
.objectives-field textarea {
  width: 100%;
  min-width: 0;

  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;

  background: var(--surface);
  color: var(--text);

  font: inherit;
  font-size: 12px;

  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}

.objectives-filter-field input,
.objectives-filter-field select,
.objectives-field input,
.objectives-field select {
  min-height: 36px;
  padding: 0 9px;
}

.objectives-field textarea {
  resize: vertical;

  min-height: 76px;
  padding: 9px;

  line-height: 1.45;
}

.objectives-filter-field input:focus,
.objectives-filter-field select:focus,
.objectives-field input:focus,
.objectives-field select:focus,
.objectives-field textarea:focus {
  border-color: var(--text-muted);
}

.objectives-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.objectives-field--span-2 {
  grid-column: span 2;
}

.objectives-field--span-3 {
  grid-column: span 3;
}

/* =========================================================
   TABLE
   ========================================================= */

.objectives-list {
  min-width: 0;
}

.objectives-table-wrap {
  width: 100%;
  min-width: 0;

  overflow-x: auto;
}

.objectives-table {
  width: 100%;
  min-width: 1320px;

  border-collapse: collapse;

  font-size: 11px;
}

.objectives-table th,
.objectives-table td {
  padding: 9px 10px;

  border-bottom: 1px solid var(--border);

  text-align: left;
  vertical-align: middle;
}

.objectives-table th {
  position: sticky;
  top: 0;
  z-index: 1;

  background: var(--surface);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  color: var(--text-muted);
}

.objectives-table tbody tr {
  transition: background 0.14s ease;
}

.objectives-table tbody tr:hover {
  background: var(--surface);
}

.objectives-table tbody tr:last-child td {
  border-bottom: 0;
}

/* =========================================================
   NAME
   ========================================================= */

.objectives-name {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 210px;
  max-width: 310px;

  padding: 0;

  border: 0;
  background: transparent;
  color: inherit;

  text-align: left;

  cursor: pointer;
}

.objectives-name__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  flex: 0 0 32px;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: var(--surface);
}

.objectives-name__icon .icon {
  width: 15px;
  height: 15px;
}

.objectives-name__copy {
  display: flex;
  flex-direction: column;
  gap: 1px;

  min-width: 0;
}

.objectives-name__copy small {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;

  color: var(--text-muted);
}

.objectives-name__copy strong {
  overflow: hidden;

  font-size: 11px;
  line-height: 1.25;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.objectives-name__copy > span {
  overflow: hidden;

  font-size: 9px;

  color: var(--text-muted);

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   TABLE CELLS
   ========================================================= */

.objectives-strategy,
.objectives-period,
.objectives-target {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.objectives-strategy small,
.objectives-period small,
.objectives-target small {
  font-size: 9px;

  color: var(--text-muted);
}

.objectives-strategy strong,
.objectives-period strong,
.objectives-target strong {
  font-size: 10px;
  font-weight: 750;
}

.objectives-owner,
.objectives-deadline {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  white-space: nowrap;
}

.objectives-owner .icon,
.objectives-deadline .icon {
  width: 13px;
  height: 13px;

  color: var(--text-muted);
}

/* =========================================================
   TABLE PROGRESS
   ========================================================= */

.objectives-table-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;

  min-width: 76px;
}

.objectives-table-progress > strong {
  font-size: 10px;
}

.objectives-table-progress > span {
  display: block;

  height: 4px;

  border-radius: 99px;

  background: var(--border);

  overflow: hidden;
}

.objectives-table-progress > span > span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: currentColor;
}

/* =========================================================
   STATE / PRIORITY
   ========================================================= */

.objectives-state,
.objectives-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  min-height: 24px;
  padding: 0 7px;

  border: 1px solid var(--border);
  border-radius: 999px;

  background: var(--surface);

  font-size: 9px;
  line-height: 1;
  font-weight: 750;

  white-space: nowrap;
}

.objectives-state .icon {
  width: 11px;
  height: 11px;
}

.objectives-state--active,
.objectives-state--completed {
  border-color: color-mix(
    in srgb,
    currentColor 35%,
    var(--border)
  );
}

.objectives-state--risk,
.objectives-state--delayed,
.objectives-state--failed {
  font-weight: 800;
}

.objectives-priority--critica,
.objectives-priority--alta {
  font-weight: 850;
}

/* =========================================================
   ROW ACTIONS
   ========================================================= */

.objectives-row-actions,
.objectives-child-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* =========================================================
   PROGRESS COMPONENT
   ========================================================= */

.objectives-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.objectives-progress__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.objectives-progress__head span {
  font-size: 10px;
  font-weight: 700;

  color: var(--text-muted);
}

.objectives-progress__head strong {
  font-size: 12px;
}

.objectives-progress__track {
  height: 6px;

  border-radius: 999px;

  background: var(--border);

  overflow: hidden;
}

.objectives-progress__track > span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: currentColor;

  transition: width 0.25s ease;
}

.objectives-progress--compact {
  gap: 4px;
}

.objectives-progress--compact .objectives-progress__track {
  height: 4px;
}

/* =========================================================
   EMPTY / LOADING
   ========================================================= */

.objectives-empty,
.objectives-loading,
.objectives-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 220px;
  padding: 30px;

  text-align: center;
}

.objectives-empty .icon,
.objectives-loading .icon,
.objectives-detail-empty .icon {
  width: 25px;
  height: 25px;

  color: var(--text-muted);
}

.objectives-empty strong,
.objectives-loading strong,
.objectives-detail-empty strong {
  font-size: 13px;
}

.objectives-empty span,
.objectives-loading span,
.objectives-detail-empty span {
  max-width: 420px;

  font-size: 11px;
  line-height: 1.45;

  color: var(--text-muted);
}

/* =========================================================
   PAGINATION
   ========================================================= */

.objectives-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-height: 52px;
  padding: 9px 14px;

  border-top: 1px solid var(--border);
}

.objectives-pagination__info,
.objectives-pagination__page {
  font-size: 10px;

  color: var(--text-muted);
}

.objectives-pagination__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* =========================================================
   MOBILE CARDS
   ========================================================= */

.objectives-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;

  padding: 10px;
}

.objectives-card {
  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 11px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--panel);
}

.objectives-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.objectives-card__head > button {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
  padding: 0;

  border: 0;

  background: transparent;
  color: inherit;

  text-align: left;

  cursor: pointer;
}

.objectives-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: var(--surface);
}

.objectives-card__icon .icon {
  width: 16px;
  height: 16px;
}

.objectives-card__head button > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;

  min-width: 0;
}

.objectives-card__head small {
  font-size: 8px;
  font-weight: 800;

  color: var(--text-muted);
}

.objectives-card__head strong {
  font-size: 12px;
  line-height: 1.25;
}

.objectives-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.objectives-card__meta > span {
  display: flex;
  align-items: center;
  gap: 5px;

  min-width: 0;

  font-size: 10px;

  color: var(--text-muted);
}

.objectives-card__meta .icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

.objectives-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.objectives-card__stats > span {
  display: flex;
  flex-direction: column;
  gap: 2px;

  padding: 7px;

  border: 1px solid var(--border);
  border-radius: 8px;

  font-size: 9px;

  color: var(--text-muted);
}

.objectives-card__stats strong {
  font-size: 13px;

  color: var(--text);
}

.objectives-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* =========================================================
   MODAL
   ========================================================= */

.objectives-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;

  background: rgba(0, 0, 0, 0.56);
}

.objectives-modal-backdrop--nested {
  z-index: 1010;
}

.objectives-modal {
  display: flex;
  flex-direction: column;

  width: min(1100px, 100%);
  max-height: calc(100vh - 36px);

  border: 1px solid var(--border);
  border-radius: 16px;

  background: var(--panel);
  color: var(--text);

  overflow: hidden;

  animation: objectivesModalIn 0.16s ease both;
}

.objectives-modal--form {
  width: min(980px, 100%);
}

.objectives-modal--detail {
  width: min(1240px, 100%);
}

.objectives-modal--child {
  width: min(780px, 100%);
}

.objectives-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 16px;

  border-bottom: 1px solid var(--border);
}

.objectives-modal__head > div {
  min-width: 0;
}

.objectives-modal__head span {
  display: block;

  margin-bottom: 2px;

  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.1em;

  color: var(--text-muted);
}

.objectives-modal__head h2 {
  margin: 0;

  font-size: 18px;
  line-height: 1.15;
}

.objectives-modal__body {
  flex: 1;
  min-height: 0;

  padding: 14px 16px;

  overflow-y: auto;
  overflow-x: hidden;
}

.objectives-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  padding: 11px 16px;

  border-top: 1px solid var(--border);
}

/* =========================================================
   DETAIL HERO
   ========================================================= */

.objectives-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;

  padding: 15px 16px;

  border-bottom: 1px solid var(--border);
}

.objectives-detail-hero__main {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  min-width: 0;
}

.objectives-detail-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: var(--surface);
}

.objectives-detail-hero__icon .icon {
  width: 19px;
  height: 19px;
}

.objectives-detail-hero__copy {
  min-width: 0;
}

.objectives-detail-hero__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;

  margin-bottom: 5px;
}

.objectives-detail-hero__eyebrow > span:first-child {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;

  color: var(--text-muted);
}

.objectives-detail-hero__copy h2 {
  margin: 0;

  font-size: 20px;
  line-height: 1.15;
}

.objectives-detail-hero__copy p {
  margin: 5px 0 0;

  max-width: 760px;

  font-size: 11px;
  line-height: 1.5;

  color: var(--text-muted);
}

.objectives-detail-hero__actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* =========================================================
   DETAIL PROGRESS
   ========================================================= */

.objectives-detail-progress {
  padding: 10px 16px;

  border-bottom: 1px solid var(--border);

  background: var(--surface);
}

/* =========================================================
   TABS
   ========================================================= */

.objectives-detail-tabs {
  display: flex;
  align-items: center;
  gap: 4px;

  padding: 7px 10px;

  border-bottom: 1px solid var(--border);

  overflow-x: auto;
  scrollbar-width: thin;
}

.objectives-detail-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  flex: 0 0 auto;

  min-height: 31px;
  padding: 0 9px;

  border: 1px solid transparent;
  border-radius: 8px;

  background: transparent;
  color: var(--text-muted);

  font: inherit;
  font-size: 10px;
  font-weight: 750;

  cursor: pointer;
}

.objectives-detail-tabs button:hover {
  background: var(--surface);
  color: var(--text);
}

.objectives-detail-tabs button.is-active {
  border-color: var(--border);

  background: var(--surface);
  color: var(--text);
}

.objectives-detail-tabs .icon {
  width: 13px;
  height: 13px;
}

/* =========================================================
   DETAIL CONTENT
   ========================================================= */

.objectives-detail-content {
  flex: 1;
  min-height: 0;

  padding: 14px 16px;

  overflow-y: auto;
  overflow-x: hidden;
}

.objectives-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 16px;

  border-top: 1px solid var(--border);

  font-size: 10px;

  color: var(--text-muted);
}

.objectives-detail-footer strong {
  color: var(--text);
}

/* =========================================================
   SUMMARY
   ========================================================= */

.objectives-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.objectives-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.objectives-summary-card {
  min-width: 0;
  padding: 11px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: var(--surface);
}

.objectives-summary-card > header,
.objectives-text-block > header {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-bottom: 9px;
}

.objectives-summary-card > header .icon,
.objectives-text-block > header .icon {
  width: 14px;
  height: 14px;
}

.objectives-summary-card > header span {
  font-size: 10px;
  font-weight: 800;
}

.objectives-detail-list {
  display: flex;
  flex-direction: column;
  gap: 7px;

  margin: 0;
}

.objectives-detail-list > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;

  padding-bottom: 6px;

  border-bottom: 1px solid var(--border);
}

.objectives-detail-list > div:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}

.objectives-detail-list dt {
  font-size: 9px;

  color: var(--text-muted);
}

.objectives-detail-list dd {
  margin: 0;

  max-width: 60%;

  font-size: 10px;
  font-weight: 700;

  text-align: right;
}

.objectives-summary-text-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.objectives-text-block {
  padding: 11px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: var(--panel);
}

.objectives-text-block header strong {
  font-size: 10px;
}

.objectives-text-block p {
  margin: 0;

  font-size: 10px;
  line-height: 1.55;

  color: var(--text-muted);

  white-space: pre-wrap;
}

/* =========================================================
   TAB HEADER
   ========================================================= */

.objectives-tab-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.objectives-tab-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.objectives-tab-head > div {
  min-width: 0;
}

.objectives-tab-head > div > span {
  display: block;

  margin-bottom: 2px;

  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.1em;

  color: var(--text-muted);
}

.objectives-tab-head h3 {
  margin: 0;

  font-size: 16px;
}

.objectives-tab-head p {
  margin: 4px 0 0;

  font-size: 10px;
  line-height: 1.4;

  color: var(--text-muted);
}

/* =========================================================
   INDICATORS
   ========================================================= */

.objectives-indicators-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.objectives-indicator-card,
.objectives-record-card {
  min-width: 0;
  padding: 11px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: var(--surface);
}

.objectives-indicator-card > header,
.objectives-record-card > header {
  display: flex;
  align-items: center;
  gap: 7px;
}

.objectives-record-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;
  flex: 0 0 30px;

  border: 1px solid var(--border);
  border-radius: 8px;

  background: var(--panel);
}

.objectives-record-icon .icon {
  width: 14px;
  height: 14px;
}

.objectives-indicator-card > header > div:nth-child(2),
.objectives-record-title {
  display: flex;
  flex-direction: column;
  gap: 1px;

  min-width: 0;
  flex: 1;
}

.objectives-indicator-card > header small,
.objectives-record-title small {
  font-size: 8px;
  font-weight: 800;

  color: var(--text-muted);
}

.objectives-indicator-card > header strong,
.objectives-record-title strong {
  overflow: hidden;

  font-size: 11px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.objectives-indicator-card > p,
.objectives-record-card > p {
  margin: 9px 0;

  font-size: 10px;
  line-height: 1.45;

  color: var(--text-muted);
}

.objectives-indicator-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;

  margin-bottom: 9px;
}

.objectives-indicator-values > span {
  display: flex;
  flex-direction: column;
  gap: 2px;

  padding: 7px;

  border: 1px solid var(--border);
  border-radius: 8px;

  background: var(--panel);
}

.objectives-indicator-values small {
  font-size: 8px;

  color: var(--text-muted);
}

.objectives-indicator-values strong {
  font-size: 11px;
}

.objectives-indicator-card > footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;

  margin-top: 8px;

  font-size: 9px;

  color: var(--text-muted);
}

/* =========================================================
   RECORDS
   ========================================================= */

.objectives-record-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.objectives-record-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;

  margin: 8px 0;
}

.objectives-record-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  font-size: 9px;

  color: var(--text-muted);
}

.objectives-record-meta .icon {
  width: 12px;
  height: 12px;
}

/* =========================================================
   TIMELINE
   ========================================================= */

.objectives-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.objectives-timeline-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
}

.objectives-timeline-item__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  border: 1px solid var(--border);
  border-radius: 50%;

  background: var(--surface);
}

.objectives-timeline-item__marker .icon {
  width: 13px;
  height: 13px;
}

.objectives-timeline-item__body {
  padding: 10px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--surface);
}

.objectives-timeline-item__body > header {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 8px;
}

.objectives-timeline-item__body > header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 1px;

  min-width: 0;
  flex: 1;
}

.objectives-timeline-item__body > header small {
  font-size: 8px;

  color: var(--text-muted);
}

.objectives-timeline-item__body > header strong {
  font-size: 10px;
}

.objectives-timeline-text {
  margin-top: 8px;
}

.objectives-timeline-text strong {
  display: block;

  margin-bottom: 2px;

  font-size: 9px;
}

.objectives-timeline-text p {
  margin: 0;

  font-size: 10px;
  line-height: 1.5;

  color: var(--text-muted);

  white-space: pre-wrap;
}

.objectives-timeline-item__body > footer {
  margin-top: 9px;
  padding-top: 8px;

  border-top: 1px solid var(--border);

  font-size: 9px;

  color: var(--text-muted);
}

/* =========================================================
   HISTORY
   ========================================================= */

.objectives-history {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.objectives-history-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;

  padding: 9px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--surface);
}

.objectives-history-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  border: 1px solid var(--border);
  border-radius: 8px;

  background: var(--panel);
}

.objectives-history-item__icon .icon {
  width: 13px;
  height: 13px;
}

.objectives-history-item > div > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.objectives-history-item > div > header strong {
  font-size: 10px;
}

.objectives-history-item time {
  font-size: 8px;

  color: var(--text-muted);
}

.objectives-history-item p {
  margin: 5px 0 0;

  font-size: 9px;
  line-height: 1.45;

  color: var(--text-muted);
}

.objectives-history-change {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-top: 6px;

  font-size: 9px;
}

.objectives-history-change .icon {
  width: 11px;
  height: 11px;
}

/* =========================================================
   TOAST
   ========================================================= */

.objectives-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;

  display: flex;
  align-items: center;
  gap: 8px;

  max-width: min(420px, calc(100vw - 36px));

  padding: 10px 12px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--panel);
  color: var(--text);

  font-size: 11px;
  font-weight: 650;

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;

  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.objectives-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.objectives-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.objectives-toast__icon .icon {
  width: 16px;
  height: 16px;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

.objectives-spin {
  animation: objectivesSpin 0.8s linear infinite;
}

@keyframes objectivesSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes objectivesModalIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes objectivesMetricIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   CONTINÚA EN PARTE 2
   ========================================================= */
   /* =========================================================
   WIRTZ HUB · GOBERNANZA · OBJETIVOS
   PARTE 2 DE 2
   ========================================================= */

/* =========================================================
   DESKTOP AJUSTES
   ========================================================= */

@media (
  max-width: 1500px
) {
  .objectives-control-metrics {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );
  }

  .objectives-metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .objectives-filters-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .objectives-summary-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .objectives-indicators-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width: 1100px
) {
  .objectives-head {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    align-items:
      flex-start;
  }

  .objectives-head__status {
    grid-column:
      1 / -1;

    width:
      100%;
  }

  .objectives-head-status {
    flex:
      1;
  }

  .objectives-head__actions {
    align-self:
      center;
  }

  .objectives-summary-text-grid {
    grid-template-columns:
      1fr;
  }

  .objectives-detail-hero {
    flex-direction:
      column;
  }

  .objectives-detail-hero__actions {
    width:
      100%;

    justify-content:
      flex-end;
  }

  .objectives-form-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .objectives-field--span-3 {
    grid-column:
      span 2;
  }

  .objectives-modal--detail {
    width:
      min(
        1000px,
        100%
      );
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 820px
) {
  .objectives-page {
    gap:
      9px;
  }

  .objectives-head {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      10px;

    padding:
      12px;

    border-radius:
      12px;
  }

  .objectives-brand {
    align-items:
      flex-start;
  }

  .objectives-brand__icon {
    width:
      38px;

    height:
      38px;

    flex-basis:
      38px;

    border-radius:
      10px;
  }

  .objectives-brand__icon .icon {
    width:
      18px;

    height:
      18px;
  }

  .objectives-brand__copy h1 {
    font-size:
      21px;
  }

  .objectives-brand__copy p {
    font-size:
      11px;
  }

  .objectives-head__status {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      6px;
  }

  .objectives-head-status {
    min-width:
      0;

    padding:
      8px 9px;
  }

  .objectives-head__actions {
    width:
      100%;
  }

  .objectives-head__actions .objectives-btn {
    flex:
      1;
  }

  .objectives-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      6px;
  }

  .objectives-metric {
    padding:
      9px;
  }

  .objectives-metric__icon {
    width:
      30px;

    height:
      30px;

    flex-basis:
      30px;
  }

  .objectives-metric__copy strong {
    font-size:
      16px;
  }

  .objectives-control-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      6px;
  }

  .objectives-control-card {
    padding:
      8px;
  }

  .objectives-panel {
    border-radius:
      12px;
  }

  .objectives-filters__head {
    padding:
      10px 11px;
  }

  .objectives-filters__body {
    padding:
      10px 11px;
  }

  .objectives-search-row {
    grid-template-columns:
      1fr;
  }

  .objectives-filters-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      7px;
  }

  .objectives-filter-field:nth-last-child(-n + 2) {
    grid-column:
      span 1;
  }

  .objectives-pagination {
    flex-direction:
      column;

    align-items:
      stretch;

    padding:
      10px;
  }

  .objectives-pagination__info,
  .objectives-pagination__page {
    text-align:
      center;
  }

  .objectives-pagination__actions {
    display:
      grid;

    grid-template-columns:
      1fr auto 1fr;

    align-items:
      center;
  }

  .objectives-card-list {
    padding:
      8px;
  }

  .objectives-card {
    padding:
      10px;
  }

  .objectives-card__meta {
    grid-template-columns:
      1fr;
  }

  .objectives-card__stats {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .objectives-modal-backdrop {
    align-items:
      flex-end;

    padding:
      0;
  }

  .objectives-modal {
    width:
      100%;

    max-height:
      94vh;

    border-radius:
      14px 14px 0 0;

    border-left:
      0;

    border-right:
      0;

    border-bottom:
      0;
  }

  .objectives-modal--form,
  .objectives-modal--detail,
  .objectives-modal--child {
    width:
      100%;
  }

  .objectives-modal__head {
    padding:
      12px;
  }

  .objectives-modal__body {
    padding:
      12px;
  }

  .objectives-modal__footer {
    padding:
      10px 12px;
  }

  .objectives-form-grid {
    grid-template-columns:
      1fr;
  }

  .objectives-field--span-2,
  .objectives-field--span-3 {
    grid-column:
      span 1;
  }

  .objectives-detail-hero {
    padding:
      12px;

    gap:
      10px;
  }

  .objectives-detail-hero__main {
    gap:
      9px;
  }

  .objectives-detail-hero__icon {
    width:
      36px;

    height:
      36px;

    flex-basis:
      36px;
  }

  .objectives-detail-hero__copy h2 {
    font-size:
      18px;
  }

  .objectives-detail-hero__actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      6px;
  }

  .objectives-detail-hero__actions .objectives-icon-btn {
    grid-column:
      1 / -1;

    justify-self:
      end;
  }

  .objectives-detail-progress {
    padding:
      9px 12px;
  }

  .objectives-detail-tabs {
    padding:
      6px 8px;
  }

  .objectives-detail-tabs button {
    min-height:
      30px;

    padding:
      0 8px;
  }

  .objectives-detail-content {
    padding:
      11px;
  }

  .objectives-detail-footer {
    padding:
      9px 11px;
  }

  .objectives-summary-grid {
    grid-template-columns:
      1fr;
  }

  .objectives-summary-text-grid {
    grid-template-columns:
      1fr;
  }

  .objectives-indicators-grid {
    grid-template-columns:
      1fr;
  }

  .objectives-indicator-card,
  .objectives-record-card {
    padding:
      10px;
  }

  .objectives-record-card > header {
    align-items:
      flex-start;

    flex-wrap:
      wrap;
  }

  .objectives-record-title {
    min-width:
      calc(
        100% - 42px
      );
  }

  .objectives-record-card > header .objectives-state,
  .objectives-record-card > header .objectives-priority {
    margin-top:
      4px;
  }

  .objectives-record-card > header .objectives-child-actions {
    margin-left:
      auto;
  }

  .objectives-timeline-item {
    grid-template-columns:
      24px
      minmax(0, 1fr);

    gap:
      6px;
  }

  .objectives-timeline-item__marker {
    width:
      24px;

    height:
      24px;
  }

  .objectives-timeline-item__marker .icon {
    width:
      11px;

    height:
      11px;
  }

  .objectives-timeline-item__body {
    padding:
      9px;
  }

  .objectives-timeline-item__body > header {
    align-items:
      flex-start;

    flex-wrap:
      wrap;
  }

  .objectives-history-item {
    grid-template-columns:
      26px
      minmax(0, 1fr);

    gap:
      6px;

    padding:
      8px;
  }

  .objectives-history-item__icon {
    width:
      26px;

    height:
      26px;
  }

  .objectives-toast {
    right:
      10px;

    bottom:
      10px;

    max-width:
      calc(
        100vw - 20px
      );
  }
}

/* =========================================================
   MOBILE SMALL
   ========================================================= */

@media (
  max-width: 560px
) {
  .objectives-head__status {
    grid-template-columns:
      1fr;
  }

  .objectives-head__actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .objectives-metrics {
    grid-template-columns:
      1fr 1fr;
  }

  .objectives-control-metrics {
    grid-template-columns:
      1fr 1fr;
  }

  .objectives-filters__head {
    align-items:
      flex-start;
  }

  .objectives-filters__summary {
    flex:
      0 0 auto;
  }

  .objectives-filters-grid {
    grid-template-columns:
      1fr;
  }

  .objectives-filter-field:nth-last-child(-n + 2) {
    grid-column:
      auto;
  }

  .objectives-pagination__actions {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .objectives-pagination__page {
    grid-column:
      1 / -1;

    grid-row:
      1;

    margin-bottom:
      3px;
  }

  .objectives-card__head {
    flex-direction:
      column;
  }

  .objectives-card__head > button {
    width:
      100%;
  }

  .objectives-card__stats {
    gap:
      5px;
  }

  .objectives-card__stats > span {
    padding:
      6px;
  }

  .objectives-card__footer {
    align-items:
      flex-end;
  }

  .objectives-row-actions {
    gap:
      4px;
  }

  .objectives-indicator-values {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap:
      4px;
  }

  .objectives-indicator-values > span {
    padding:
      6px 5px;
  }

  .objectives-detail-hero__main {
    flex-direction:
      column;
  }

  .objectives-detail-hero__eyebrow {
    gap:
      4px;
  }

  .objectives-detail-hero__actions {
    grid-template-columns:
      1fr;
  }

  .objectives-detail-hero__actions .objectives-icon-btn {
    grid-column:
      auto;
  }

  .objectives-detail-tabs {
    gap:
      3px;
  }

  .objectives-tab-head {
    flex-direction:
      column;
  }

  .objectives-tab-head > .objectives-btn {
    width:
      100%;
  }

  .objectives-record-meta {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      5px;
  }

  .objectives-timeline-item__body > header {
    gap:
      5px;
  }

  .objectives-history-item > div > header {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      2px;
  }

  .objectives-modal__footer {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .objectives-modal__footer .objectives-btn {
    width:
      100%;
  }
}

/* =========================================================
   VERY SMALL
   ========================================================= */

@media (
  max-width: 420px
) {
  .objectives-metrics {
    grid-template-columns:
      1fr;
  }

  .objectives-control-metrics {
    grid-template-columns:
      1fr;
  }

  .objectives-head__actions {
    grid-template-columns:
      1fr;
  }

  .objectives-card__stats {
    grid-template-columns:
      1fr;
  }

  .objectives-indicator-values {
    grid-template-columns:
      1fr;
  }

  .objectives-card__footer {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .objectives-card__footer .objectives-state {
    align-self:
      flex-start;
  }

  .objectives-card__footer .objectives-row-actions {
    justify-content:
      flex-end;
  }

  .objectives-modal__footer {
    grid-template-columns:
      1fr;
  }
}

/* =========================================================
   DARK MODE
   ========================================================= */

:root[data-theme="dark"]
  .objectives-btn--dark {
  background:
    #ffffff;

  color:
    #000000;

  border-color:
    #ffffff;
}

:root[data-theme="dark"]
  .objectives-btn--dark:hover:not(:disabled) {
  background:
    #e9e9e9;
}

:root[data-theme="dark"]
  .objectives-modal-backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.74
    );
}

:root[data-theme="dark"]
  .objectives-state,
:root[data-theme="dark"]
  .objectives-priority {
  background:
    #111111;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.objectives-btn:focus-visible,
.objectives-icon-btn:focus-visible,
.objectives-detail-tabs button:focus-visible,
.objectives-name:focus-visible,
.objectives-card__head > button:focus-visible,
.objectives-search input:focus-visible,
.objectives-filter-field input:focus-visible,
.objectives-filter-field select:focus-visible,
.objectives-field input:focus-visible,
.objectives-field select:focus-visible,
.objectives-field textarea:focus-visible {
  outline:
    2px solid
    currentColor;

  outline-offset:
    2px;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .objectives-btn,
  .objectives-icon-btn,
  .objectives-table tbody tr,
  .objectives-progress__track > span,
  .objectives-toast,
  .objectives-modal,
  .objectives-metric {
    animation:
      none !important;

    transition:
      none !important;
  }
}

/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .objectives-head__actions,
  .objectives-filters,
  .objectives-pagination,
  .objectives-row-actions,
  .objectives-child-actions,
  .objectives-toast,
  .objectives-modal-backdrop {
    display:
      none !important;
  }

  .objectives-page,
  .objectives-head,
  .objectives-panel,
  .objectives-metric,
  .objectives-control-card {
    border-color:
      #bdbdbd !important;

    background:
      #ffffff !important;

    color:
      #000000 !important;
  }

  .objectives-table-wrap {
    overflow:
      visible;
  }

  .objectives-table {
    min-width:
      0;
  }
}/* =========================================================
   FIX · OBJETIVOS
   MODALES DEBAJO DEL TOPBAR
   ========================================================= */

.objectives-modal-backdrop {
  top:
    var(
      --topbar-height,
      54px
    ) !important;

  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  height:
    calc(
      100dvh -
      var(
        --topbar-height,
        54px
      )
    ) !important;

  padding: 12px !important;
}

/* =========================================================
   ALTURA REAL DISPONIBLE
   ========================================================= */

.objectives-modal,
.objectives-modal--form,
.objectives-modal--detail,
.objectives-modal--child {
  max-height:
    calc(
      100dvh -
      var(
        --topbar-height,
        54px
      )
      -
      24px
    ) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 820px) {
  .objectives-modal-backdrop {
    top:
      var(
        --topbar-height,
        54px
      ) !important;

    height:
      calc(
        100dvh -
        var(
          --topbar-height,
          54px
        )
      ) !important;

    padding: 0 !important;

    align-items: flex-end !important;
  }

  .objectives-modal,
  .objectives-modal--form,
  .objectives-modal--detail,
  .objectives-modal--child {
    max-height:
      calc(
        100dvh -
        var(
          --topbar-height,
          54px
        )
      ) !important;
  }
}