/* Estilos exclusivos del listado y el detalle de Incidencias. */

.incident-row {
  grid-template-columns: var(--table-columns, minmax(8rem, .75fr) minmax(14rem, 1.7fr) minmax(9rem, 1fr) minmax(8rem, .8fr) minmax(10rem, .9fr) minmax(6.5rem, auto) minmax(7rem, auto));
  min-height: var(--layout-row-height);
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: var(--color-surface);
  text-align: left;
  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), color var(--motion-duration-base) var(--motion-ease-standard);
}

.incident-list-head,
.incident-row {
  display: grid;
  align-items: center;
  gap: var(--space-3);
}

.incident-list {
  overflow: clip;
}

.incident-list-head {
  grid-template-columns: var(--table-columns, minmax(8rem, .75fr) minmax(14rem, 1.7fr) minmax(9rem, 1fr) minmax(8rem, .8fr) minmax(10rem, .9fr) minmax(6.5rem, auto) minmax(7rem, auto));
}

.incident-list-head .data-table-column-head {
  padding-inline: 0;
}

.incident-list-head .data-table-column-head > .table-sort {
  padding-inline: var(--space-2);
}

.incident-row > [data-column-key] {
  padding-inline: var(--space-2);
}

.incident-row .incident-inline-field > .client-detail-value {
  padding-inline: 0;
}

.incident-row.is-unread {
  background: var(--color-selected-surface);
}

.incident-row.is-unread:hover,
.incident-row.is-unread:focus-visible {
  background: var(--color-selected-bg);
}

.page-incidents {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

.incident-page-heading p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
}

.incident-type-badge--operational {
  border-color: var(--color-status-warning-border);
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning-text);
}

.incident-type-badge--application {
  border-color: var(--color-status-review-border);
  background: var(--color-status-review-bg);
  color: var(--color-status-review-text);
}

.incident-kpis ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.incident-kpi {
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.incident-kpi-icon {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  place-items: center;
}

.incident-kpi--open .incident-kpi-icon {
  background: var(--color-status-info-bg);
  color: var(--color-status-info-text);
}

.incident-kpi--progress .incident-kpi-icon {
  background: var(--color-status-review-bg);
  color: var(--color-status-review-text);
}

.incident-kpi--critical .incident-kpi-icon {
  background: var(--color-status-danger-bg);
  color: var(--color-status-danger-text);
}

.incident-kpi--unread .incident-kpi-icon {
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning-text);
}

.incident-kpi small,
.incident-kpi strong {
  display: block;
}

.incident-kpi small {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.incident-kpi strong {
  margin-top: var(--space-1);
  color: var(--color-text-primary);
  font-size: var(--font-size-2xl);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.incident-filter-bar .search-field {
  flex: 1 1 22rem;
  width: auto;
  min-width: 18rem;
  max-width: none;
}

.incident-filter-bar .filter-bar__segments {
  display: flex;
  flex: 0 1 auto;
}

.incident-filter-bar .multi-filter {
  min-width: 8rem;
}

.incident-sort-trigger {
  margin-left: auto;
}

.page-incidents .incident-row :is(.planning-status, .status) {
  display: inline-flex;
  min-height: 1.625rem;
  gap: var(--space-1);
  padding-inline: var(--space-2);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.page-incidents .incident-row :is(.status-backlog, .status-pending, .status-preparation) {
  border-color: var(--color-status-neutral-border);
  color: var(--color-status-neutral-text);
}

.page-incidents .incident-row :is(.status-in_progress, .status-active) {
  border-color: var(--color-status-info-border);
  color: var(--color-status-info-text);
}

.page-incidents .incident-row .status-completed {
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.page-incidents .incident-row :is(.status-waiting, .status-forwarded_internal, .status-forwarded_external) {
  border-color: var(--color-status-waiting-border);
  color: var(--color-status-waiting-text);
}

.page-incidents .incident-row .status-rejected,
.page-incidents .incident-row .task-priority-status-urgent {
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-text);
}

.page-incidents .incident-row .task-priority-status-high {
  border-color: var(--color-status-warning-border);
  color: var(--color-status-warning-text);
}

.page-incidents .incident-row .task-priority-status-medium {
  border-color: var(--color-status-info-border);
  color: var(--color-status-info-text);
}

.page-incidents .incident-row .task-priority-status-low {
  border-color: var(--color-status-neutral-border);
  color: var(--color-status-neutral-text);
}

.page-incidents .incident-row :is(.planning-status, .status) {
  background: var(--color-surface);
}

.page-incidents .incident-row .incident-priority-icon {
  display: inline-grid;
}

.page-incidents .incident-row .priority-arrow {
  display: none;
}


.incident-summary {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.incident-unread-label {
  display: none;
}

.incident-mobile-meta-label,
.incident-priority-icon {
  display: none;
}

.incident-summary .incident-ref {
  display: block;
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: 1.1;
}

.incident-reporter-desktop,
.incident-date-desktop {
  display: flex;
  align-items: center;
}

.incident-reporter-desktop {
  gap: var(--space-2);
}

.incident-reporter-desktop > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.incident-reporter-mobile,
.incident-date-mobile {
  display: none;
}

.incident-date-desktop {
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-1);
}

.incident-date-desktop strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.incident-date-desktop small {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.incident-mobile-meta-copy {
  display: contents;
}

.incident-inline-field {
  min-width: 0;
}

.incident-inline-field > .client-detail-value {
  width: 100%;
}

.incident-inline-field strong,
.incident-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
}

.page-incidents .incident-summary strong {
  display: -webkit-box;
  line-height: 1.3;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.incident-row.is-unread .incident-summary strong {
  font-weight: var(--font-weight-bold);
}

.incident-reporter {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incident-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.incident-cell,
.incident-status-cell {
  min-width: 0;
  overflow: visible;
}

.incident-status-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.incident-inline-editor {
  width: 100%;
}

.incident-inline-editor .client-detail-input,
.incident-inline-editor select,
.incident-inline-editor textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height-md);
  padding: 0 var(--control-padding-inline);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
}

.incident-inline-editor textarea {
  min-height: 5rem;
  padding-block: var(--space-2);
  resize: vertical;
}

.incident-inline-editor .client-detail-input:focus,
.incident-inline-editor select:focus,
.incident-inline-editor textarea:focus {
  border-color: var(--color-focus-ring);
}

.incident-detail-body {
  padding-bottom: var(--space-4);
}

.incident-outcome {
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-subtle);
}

.incident-outcome > div {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.incident-outcome strong,
.incident-outcome small {
  display: block;
}

.incident-outcome strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.incident-outcome small {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.incident-rejection {
  border-color: var(--color-status-danger-border);
  background: var(--color-status-danger-bg);
}

.incident-rejection > div > .icon {
  color: var(--color-status-danger-solid);
}

.incident-forwarding {
  border-color: var(--color-status-waiting-border);
  background: var(--color-status-waiting-bg);
}

.incident-forwarding > div > .icon {
  color: var(--color-status-waiting-solid);
}

.incident-footer > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.incident-reject-action {
  border-color: var(--color-action-danger);
  background: var(--color-surface);
  color: var(--color-action-danger);
}

.incident-reject-action:hover {
  border-color: var(--color-action-danger-hover);
  background: var(--color-status-danger-bg);
  color: var(--color-action-danger-hover);
}

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

.incident-type-choice {
  padding: 0;
  border: 0;
}

.incident-type-choice legend {
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.incident-type-choice__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.incident-type-choice__grid label {
  position: relative;
}

.incident-type-choice__grid input {
  position: absolute;
  opacity: 0;
}

.incident-type-choice__card {
  display: grid;
  min-height: 8.5rem;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
}

.incident-type-choice__card small,
.incident-department-field small,
.incident-process-note small,
.incident-audience-warning small {
  color: var(--color-text-secondary);
  line-height: 1.45;
}

.incident-type-choice__grid input:checked + .incident-type-choice__card {
  border-color: var(--color-selected);
  box-shadow: 0 0 0 2px var(--color-selected-bg);
}

.incident-type-choice__grid input:focus-visible + .incident-type-choice__card {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.incident-type-choice__card--operational > .icon {
  color: var(--color-status-warning-text);
}

.incident-type-choice__card--application > .icon {
  color: var(--color-status-review-text);
}

.incident-process-note,
.incident-audience-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.incident-process-note {
  border: 0;
  border-left: 3px solid var(--color-selected);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-selected-surface);
}

.incident-process-note > .icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--color-selected);
}

.incident-process-note strong {
  font-size: var(--font-size-sm);
}

.incident-process-note small {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
}

.incident-audience-warning {
  border: 1px solid var(--color-status-review-border);
  background: var(--color-status-review-bg);
}

.incident-process-note[hidden],
.incident-department-field[hidden] {
  display: none;
}

.incident-audience-warning {
  border-color: var(--color-status-warning-border);
  background: var(--color-status-warning-bg);
}

.incident-process-note strong,
.incident-process-note small,
.incident-audience-warning strong,
.incident-audience-warning small {
  display: block;
}

.incident-create-toolbar {
  justify-content: flex-end;
  margin-bottom: 0;
}

.incident-create-panel {
  overflow-y: auto;
}

.incident-create-form-grid {
  gap: var(--space-4);
  padding-top: var(--space-4);
}

.incident-create-form-grid .field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-height: 0;
  padding: 0;
  border-bottom: 0;
}

.incident-create-form-grid .field > input:not([type="hidden"]),
.incident-create-form-grid .select-field,
.incident-create-form-grid .select-field select {
  width: 100%;
  padding-inline: var(--control-padding-inline);
  border-color: var(--color-border-strong);
  background: var(--color-surface);
}

.incident-create-form-grid .description-surface {
  height: 12rem;
  min-height: 12rem;
}

.incident-detail-static-value {
  justify-content: flex-start;
  cursor: default;
  font-weight: var(--font-weight-regular);
}

.incident-detail-static-value:hover {
  background: transparent;
}

.mobile-filter-toolbar.incident-mobile-toolbar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 62rem) {
  .incident-kpis ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .incident-filter-bar .filter-bar__segments {
    display: grid;
  }

  .incident-filter-bar .search-field {
    flex-basis: 14rem;
    min-width: 0;
  }

  .incident-list-head,
  .incident-row {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .65fr) minmax(0, .7fr);
  }

  .page-support-requests :is(.incident-list-head, .incident-row) {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .9fr);
  }

  :is(.incident-list-head, .incident-row) > :is([data-column-key="reporter"], [data-column-key="created"]) {
    display: none;
  }
}

@media (max-width: 340px) {
  .incident-sort-trigger .mobile-sort-trigger {
    width: var(--target-size-touch);
    max-width: var(--target-size-touch);
    padding: 0;
  }

  .incident-sort-trigger .mobile-sort-trigger span {
    display: none;
  }
}

@media (max-width: 46rem) {
  .incident-list-head {
    display: none;
  }

  .page-incidents,
  .page-incidents .incident-list,
  .page-incidents .incident-list > [role="list"] {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .page-incidents {
    padding-top: var(--space-4);
    padding-inline: var(--space-4);
  }

  .incident-page-heading p {
    font-size: var(--font-size-md);
    line-height: 1.45;
  }

  .incident-kpis ul {
    gap: var(--space-2);
  }

  .incident-kpi {
    min-height: 3.25rem;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
  }

  .incident-kpi-icon {
    width: 2rem;
    height: 2rem;
  }

  .incident-kpi strong {
    font-size: var(--font-size-xl);
  }

  .incident-filter-bar .filter-bar__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "search"
      "toolbar";
    align-items: stretch;
  }

  .incident-filter-bar .search-field {
    grid-area: search;
    width: 100%;
    min-width: 0;
    min-height: var(--target-size-touch);
  }

  .incident-filter-bar .filter-bar__segments {
    display: none;
  }

  .incident-filter-bar .incident-sort-trigger {
    display: none;
  }

  .incident-filter-bar .incident-mobile-toolbar {
    grid-area: toolbar;
  }

  .page-incidents .incident-list {
    display: grid;
    gap: var(--space-3);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .page-incidents .incident-list > [role="list"] {
    display: grid;
    gap: var(--space-3);
  }

  .page-incidents .data-table-mobile-sort {
    gap: var(--space-2);
    min-height: 0;
    padding: 0;
    border: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
  }

  .page-incidents .data-table-mobile-sort-control {
    width: 100%;
  }

  .page-incidents .data-table-mobile-sort select {
    min-height: var(--target-size-touch);
    padding-inline: 2.75rem var(--space-8);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
  }

  .page-incidents .incident-sort-icon {
    position: absolute;
    z-index: 1;
    left: var(--space-3);
    display: inline-grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    color: var(--color-selected-text);
    pointer-events: none;
  }

  .page-incidents .incident-row {
    display: flex;
    flex-wrap: wrap;
    min-height: 0;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    width: 100%;
    max-width: 100%;
  }

  .page-incidents .incident-row:last-child {
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .page-incidents .incident-row.is-unread {
    border-inline-start: 3px solid var(--color-selected);
    background: var(--color-surface);
  }

  .page-incidents .incident-row.is-unread:hover,
  .page-incidents .incident-row.is-unread:focus-visible {
    background: var(--color-surface-hover);
  }

  .page-incidents .incident-unread-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: var(--space-1);
    color: var(--color-selected-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
  }

  .page-incidents .incident-unread-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-selected);
  }

  .page-incidents .incident-summary {
    display: grid;
    flex: 1 0 100%;
    order: 1;
    gap: var(--space-1);
    padding: 0;
  }

  .page-incidents .incident-type-cell {
    flex: 0 0 100%;
    order: 0;
    padding: 0;
  }

  .page-incidents .incident-type-cell small {
    display: inline;
  }

  .page-incidents .incident-summary strong {
    overflow: visible;
    font-size: var(--font-size-md);
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
  }

  .page-incidents .incident-ref {
    display: block;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
  }

  .page-incidents .incident-priority-cell {
    order: 2;
  }

  .page-incidents .incident-status-cell {
    order: 2;
  }

  .page-incidents .incident-row > :is(.incident-priority-cell, .incident-status-cell) {
    display: flex;
    grid-column: auto;
    justify-self: start;
    padding: 0;
  }

  .page-incidents .incident-status-cell {
    justify-self: start;
  }

  .page-incidents .incident-row::after {
    flex: 0 0 100%;
    order: 3;
    height: 0;
    content: "";
  }

  .page-incidents .incident-row > :is(.incident-priority-cell, .incident-status-cell)::before {
    display: none;
  }

  .page-incidents .incident-row .status-dot,
  .page-incidents .incident-priority-icon {
    display: inline-grid;
  }

  .page-incidents .incident-row .priority-arrow {
    display: none;
  }

  .page-incidents .incident-reporter {
    flex: 1.6 1 0;
    order: 4;
  }

  .page-incidents .incident-row > [data-column-key="created"] {
    flex: .7 1 0;
    order: 4;
  }

  .page-incidents .incident-row > [data-column-key="updated"] {
    flex: .7 1 0;
    order: 4;
  }

  .page-incidents .incident-row > :is(.incident-reporter, [data-column-key="created"], [data-column-key="updated"]) {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    align-items: start;
    gap: var(--space-1);
    min-width: 0;
    min-height: 3.75rem;
    padding: var(--space-2) 0 0;
    border-top: 1px solid var(--color-border-subtle);
  }

  .page-incidents .incident-row > :is(.incident-reporter, [data-column-key="created"], [data-column-key="updated"])::before {
    display: none;
  }

  .page-incidents .incident-reporter-desktop,
  .page-incidents .incident-date-desktop {
    display: none;
  }

  .page-incidents .incident-reporter-mobile,
  .page-incidents .incident-date-mobile {
    display: contents;
  }

  .page-incidents .planning-mobile-field-icon {
    display: inline-grid;
    grid-column: 1;
    grid-row: 2;
    width: 1rem;
    height: 1rem;
    place-items: center;
    color: var(--color-selected-text);
  }

  .page-incidents .planning-mobile-field-icon .icon {
    width: 1rem;
    height: 1rem;
  }

  .page-incidents .incident-mobile-meta-copy {
    display: contents;
  }

  .page-incidents .incident-mobile-meta-label {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: start;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
  }

  .page-incidents .incident-mobile-meta-value {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-incidents .data-table-footer {
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-3);
    border: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .page-incidents .data-table-footer strong {
    color: inherit;
    font-weight: var(--font-weight-regular);
  }

  .topbar .incidents-topbar-primary {
    display: inline-grid;
    width: var(--target-size-touch);
    height: var(--target-size-touch);
    min-width: var(--target-size-touch);
    min-height: var(--target-size-touch);
    padding: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    place-items: center;
  }

  .topbar .incidents-topbar-primary:hover {
    background: transparent;
  }

  .topbar .incidents-topbar-primary .icon {
    box-sizing: border-box;
    width: var(--control-height-md);
    height: var(--control-height-md);
    padding: 0.625rem;
    border-radius: var(--radius-lg);
    background: var(--color-action-primary);
  }

  .topbar .incidents-topbar-primary:hover .icon {
    background: var(--color-action-primary-hover);
  }

}

@media (max-width: 46rem) {
  .incident-type-choice__grid {
    grid-template-columns: 1fr;
  }

  .incident-type-choice__card {
    min-height: 0;
  }
}