/* =========================================================
   WIRTZ HUB · MI GESTIÓN · SUPERVISIÓN DE TAREAS

   UBICACIÓN:
   frontend/src/pages/mi-gestion/tareas-supervision/
   tareas-supervision.css

   RESPONSABILIDAD:
   - Layout
   - Header
   - Métricas
   - Filtros
   - Listado
   - Detalle
   - Prioridad
   - Asignaciones
   - Usuarios
   - Comentarios / avisos
   - Historial
   - Modal
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

.mi-gestion-supervision-page {
  --mgs-panel:
    var(
      --panel,
      #ffffff
    );

  --mgs-panel-soft:
    var(
      --panel-soft,
      #fafafa
    );

  --mgs-panel-strong:
    var(
      --panel-strong,
      #f3f4f6
    );

  --mgs-text:
    var(
      --text,
      #111111
    );

  --mgs-muted:
    var(
      --muted,
      #6b7280
    );

  --mgs-subtle:
    #9ca3af;

  --mgs-line:
    var(
      --line,
      #e5e7eb
    );

  --mgs-line-strong:
    #d1d5db;

  --mgs-danger:
    #b91c1c;

  --mgs-success:
    #15803d;

  --mgs-warning:
    #a16207;

  --mgs-blue:
    #2563eb;

  --mgs-orange:
    #c2410c;

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  color:
    var(
      --mgs-text
    );

  font-family:
    "DM Sans",
    system-ui,
    sans-serif;
}


/* =========================================================
   ICONOS
   ========================================================= */

.mi-gestion-supervision-page .icon {
  width:
    16px;

  height:
    16px;

  flex:
    0
    0
    auto;

  stroke-width:
    1.8;
}


.mi-gestion-supervision-page .is-spinning {
  animation:
    miGestionSupervisionSpin
    0.8s
    linear
    infinite;
}


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


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

.mi-gestion-supervision-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    16px;

  border:
    1px solid
    var(
      --mgs-line-strong
    );

  border-radius:
    14px;

  background:
    var(
      --mgs-panel
    );
}


.mi-gestion-supervision-head__brand {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


.mi-gestion-supervision-head__icon {
  width:
    44px;

  height:
    44px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

  border:
    1px solid
    var(
      --mgs-line-strong
    );

  border-radius:
    12px;

  background:
    var(
      --mgs-panel-soft
    );
}


.mi-gestion-supervision-head__icon .icon {
  width:
    20px;

  height:
    20px;
}


.mi-gestion-supervision-head__brand > div {
  min-width:
    0;
}


.mi-gestion-supervision-head__brand > div > span {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(
      --mgs-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.09em;
}


.mi-gestion-supervision-head h1 {
  margin:
    0;

  font-size:
    clamp(
      22px,
      2vw,
      30px
    );

  line-height:
    1.05;

  letter-spacing:
    -0.035em;
}


.mi-gestion-supervision-head p {
  margin:
    5px
    0
    0;

  max-width:
    720px;

  color:
    var(
      --mgs-muted
    );

  font-size:
    12px;

  line-height:
    1.5;
}


.mi-gestion-supervision-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex:
    0
    0
    auto;
}


/* =========================================================
   BOTONES
   ========================================================= */

.mi-gestion-supervision-btn,
.mi-gestion-supervision-icon-btn,
.mi-gestion-supervision-priority-btn {
  appearance:
    none;

  border:
    1px solid
    var(
      --mgs-line-strong
    );

  background:
    var(
      --mgs-panel
    );

  color:
    var(
      --mgs-text
    );

  font:
    inherit;

  cursor:
    pointer;

  transition:
    background
    140ms
    ease,
    border-color
    140ms
    ease,
    color
    140ms
    ease,
    opacity
    140ms
    ease;
}


.mi-gestion-supervision-btn {
  min-height:
    36px;

  padding:
    0
    12px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border-radius:
    9px;

  font-size:
    11px;

  font-weight:
    750;

  white-space:
    nowrap;
}


.mi-gestion-supervision-btn:hover:not(:disabled),
.mi-gestion-supervision-icon-btn:hover:not(:disabled),
.mi-gestion-supervision-priority-btn:hover:not(:disabled) {
  border-color:
    var(
      --mgs-text
    );

  background:
    var(
      --mgs-panel-strong
    );
}


.mi-gestion-supervision-btn:disabled,
.mi-gestion-supervision-icon-btn:disabled,
.mi-gestion-supervision-priority-btn:disabled {
  opacity:
    0.42;

  cursor:
    not-allowed;
}


.mi-gestion-supervision-btn.is-primary {
  border-color:
    var(
      --mgs-text
    );

  background:
    var(
      --mgs-text
    );

  color:
    var(
      --mgs-panel
    );
}


.mi-gestion-supervision-btn.is-danger {
  color:
    var(
      --mgs-danger
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --mgs-danger
      )
      35%,
      var(
        --mgs-line
      )
    );
}


.mi-gestion-supervision-btn.is-warning {
  color:
    var(
      --mgs-warning
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --mgs-warning
      )
      38%,
      var(
        --mgs-line
      )
    );
}


.mi-gestion-supervision-btn.is-loading {
  pointer-events:
    none;

  opacity:
    0.7;
}


.mi-gestion-supervision-icon-btn {
  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border-radius:
    9px;
}


/* =========================================================
   MÉTRICAS
   ========================================================= */

.mi-gestion-supervision-metrics {
  display:
    grid;

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

  gap:
    10px;
}


.mi-gestion-supervision-metric {
  min-width:
    0;

  min-height:
    92px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    12px;

  border:
    1px solid
    var(
      --mgs-line-strong
    );

  border-radius:
    12px;

  background:
    var(
      --mgs-panel
    );
}


.mi-gestion-supervision-metric__icon {
  width:
    36px;

  height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    10px;

  background:
    var(
      --mgs-panel-soft
    );
}


.mi-gestion-supervision-metric__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.mi-gestion-supervision-metric small {
  color:
    var(
      --mgs-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


.mi-gestion-supervision-metric strong {
  font-size:
    23px;

  line-height:
    1.1;

  letter-spacing:
    -0.04em;
}


.mi-gestion-supervision-metric__content > span {
  overflow:
    hidden;

  color:
    var(
      --mgs-muted
    );

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mi-gestion-supervision-metric.is-urgent
.mi-gestion-supervision-metric__icon,
.mi-gestion-supervision-metric.is-expired
.mi-gestion-supervision-metric__icon {
  color:
    var(
      --mgs-danger
    );
}


.mi-gestion-supervision-metric.is-completed
.mi-gestion-supervision-metric__icon {
  color:
    var(
      --mgs-success
    );
}


.mi-gestion-supervision-metric.is-assigned
.mi-gestion-supervision-metric__icon {
  color:
    var(
      --mgs-blue
    );
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.mi-gestion-supervision-toolbar {
  display:
    grid;

  grid-template-columns:
    minmax(
      240px,
      1.6fr
    )
    minmax(
      150px,
      0.75fr
    )
    minmax(
      165px,
      0.8fr
    )
    minmax(
      140px,
      0.7fr
    )
    minmax(
      170px,
      0.85fr
    )
    auto;

  gap:
    8px;

  align-items:
    center;

  padding:
    10px;

  border:
    1px solid
    var(
      --mgs-line-strong
    );

  border-radius:
    12px;

  background:
    var(
      --mgs-panel
    );
}


.mi-gestion-supervision-search {
  min-width:
    0;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    0
    10px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    9px;

  background:
    var(
      --mgs-panel-soft
    );
}


.mi-gestion-supervision-search .icon {
  color:
    var(
      --mgs-muted
    );
}


.mi-gestion-supervision-search input {
  min-width:
    0;

  width:
    100%;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(
      --mgs-text
    );

  font:
    inherit;

  font-size:
    11px;
}


.mi-gestion-supervision-toolbar > select,
.mi-gestion-supervision-toolbar > input {
  width:
    100%;

  height:
    38px;

  padding:
    0
    10px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    9px;

  outline:
    0;

  background:
    var(
      --mgs-panel-soft
    );

  color:
    var(
      --mgs-text
    );

  font:
    inherit;

  font-size:
    11px;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.mi-gestion-supervision-workspace {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      320px,
      0.72fr
    )
    minmax(
      0,
      1.7fr
    );

  gap:
    12px;

  align-items:
    stretch;
}


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

.mi-gestion-supervision-list-panel {
  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --mgs-line-strong
    );

  border-radius:
    14px;

  background:
    var(
      --mgs-panel
    );
}


.mi-gestion-supervision-list-panel__head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    12px;

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


.mi-gestion-supervision-list-panel__head > div > span {
  display:
    block;

  color:
    var(
      --mgs-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.07em;
}


.mi-gestion-supervision-list-panel__head strong {
  display:
    block;

  margin-top:
    2px;

  font-size:
    13px;
}


.mi-gestion-supervision-count {
  min-width:
    30px;

  height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    8px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    8px;

  background:
    var(
      --mgs-panel-soft
    );

  color:
    var(
      --mgs-muted
    );

  font-size:
    10px;

  font-weight:
    800;
}


.mi-gestion-supervision-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  max-height:
    calc(
      100vh -
      365px
    );

  padding:
    8px;

  overflow:
    auto;
}


/* =========================================================
   TAREA · ITEM
   ========================================================= */

.mi-gestion-supervision-request {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    9px;

  padding:
    11px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    10px;

  background:
    var(
      --mgs-panel-soft
    );

  color:
    var(
      --mgs-text
    );

  text-align:
    left;

  font:
    inherit;

  cursor:
    pointer;

  transition:
    border-color
    140ms
    ease,
    background
    140ms
    ease;
}


.mi-gestion-supervision-request:hover {
  border-color:
    var(
      --mgs-line-strong
    );

  background:
    var(
      --mgs-panel-strong
    );
}


.mi-gestion-supervision-request.is-selected {
  border-color:
    var(
      --mgs-text
    );

  background:
    var(
      --mgs-panel-strong
    );
}


.mi-gestion-supervision-request__main {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.mi-gestion-supervision-request__top {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


.mi-gestion-supervision-request__top strong {
  min-width:
    0;

  overflow:
    hidden;

  font-size:
    12px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mi-gestion-supervision-request__main > small {
  color:
    var(
      --mgs-muted
    );

  font-size:
    9px;
}


.mi-gestion-supervision-request__meta {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    5px;
}


.mi-gestion-supervision-request__meta > span {
  min-height:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0
    7px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    7px;

  background:
    var(
      --mgs-panel
    );

  color:
    var(
      --mgs-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


.mi-gestion-supervision-request__meta .icon {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   PRIORIDAD BADGE
   ========================================================= */

.mi-gestion-supervision-priority,
.mi-gestion-supervision-status {
  min-height:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0
    7px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    7px;

  background:
    var(
      --mgs-panel
    );

  font-size:
    9px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.mi-gestion-supervision-priority .icon,
.mi-gestion-supervision-status .icon {
  width:
    12px;

  height:
    12px;
}


.mi-gestion-supervision-priority.is-low {
  color:
    var(
      --mgs-blue
    );
}


.mi-gestion-supervision-priority.is-medium {
  color:
    var(
      --mgs-warning
    );
}


.mi-gestion-supervision-priority.is-high {
  color:
    var(
      --mgs-orange
    );
}


.mi-gestion-supervision-priority.is-urgent {
  color:
    var(
      --mgs-danger
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --mgs-danger
      )
      36%,
      var(
        --mgs-line
      )
    );
}


.mi-gestion-supervision-status {
  color:
    var(
      --mgs-muted
    );
}


.mi-gestion-supervision-status.is-assigned {
  color:
    var(
      --mgs-blue
    );
}


.mi-gestion-supervision-status.is-completed {
  color:
    var(
      --mgs-success
    );
}


.mi-gestion-supervision-status.is-expired,
.mi-gestion-supervision-status.is-cancelled {
  color:
    var(
      --mgs-danger
    );
}


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

.mi-gestion-supervision-detail-panel {
  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --mgs-line-strong
    );

  border-radius:
    14px;

  background:
    var(
      --mgs-panel
    );
}


.mi-gestion-supervision-detail-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    14px;

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


.mi-gestion-supervision-detail-head__identity {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.mi-gestion-supervision-detail-head__icon {
  width:
    40px;

  height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    10px;

  background:
    var(
      --mgs-panel-soft
    );
}


.mi-gestion-supervision-detail-head__identity > div {
  min-width:
    0;
}


.mi-gestion-supervision-detail-head__eyebrow {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --mgs-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.06em;
}


.mi-gestion-supervision-detail-head h2 {
  margin:
    0;

  overflow:
    hidden;

  font-size:
    17px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mi-gestion-supervision-detail-head p {
  margin:
    3px
    0
    0;

  color:
    var(
      --mgs-muted
    );

  font-size:
    10px;
}


.mi-gestion-supervision-detail-head__status {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  flex:
    0
    0
    auto;
}


.mi-gestion-supervision-detail__body {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  padding:
    12px;
}


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

.mi-gestion-supervision-empty,
.mi-gestion-supervision-detail-empty {
  min-height:
    220px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    24px;

  text-align:
    center;
}


.mi-gestion-supervision-empty__icon,
.mi-gestion-supervision-detail-empty__icon {
  width:
    42px;

  height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    11px;

  background:
    var(
      --mgs-panel-soft
    );

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


.mi-gestion-supervision-empty strong,
.mi-gestion-supervision-detail-empty strong {
  font-size:
    13px;
}


.mi-gestion-supervision-empty p,
.mi-gestion-supervision-detail-empty p {
  max-width:
    440px;

  margin:
    0;

  color:
    var(
      --mgs-muted
    );

  font-size:
    10px;

  line-height:
    1.5;
}


.mi-gestion-supervision-detail-empty__eyebrow {
  color:
    var(
      --mgs-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.08em;
}


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

.mi-gestion-supervision-summary-grid {
  min-width:
    0;

  display:
    grid;

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

  gap:
    10px;
}


.mi-gestion-supervision-summary-card {
  min-width:
    0;

  padding:
    11px;

  border:
    1px solid
    var(
      --mgs-line-strong
    );

  border-radius:
    11px;

  background:
    var(
      --mgs-panel-soft
    );
}


.mi-gestion-supervision-summary-card.is-full {
  grid-column:
    1 /
    -1;
}


.mi-gestion-supervision-summary-card > header {
  padding-bottom:
    8px;

  margin-bottom:
    8px;

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


.mi-gestion-supervision-summary-card > header span,
.mi-gestion-supervision-section-head > div > span {
  display:
    block;

  color:
    var(
      --mgs-muted
    );

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


.mi-gestion-supervision-summary-card > header h3,
.mi-gestion-supervision-section-head h3 {
  margin:
    2px
    0
    0;

  font-size:
    12px;
}


.mi-gestion-supervision-summary-list {
  display:
    grid;

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

  gap:
    7px;
}


.mi-gestion-supervision-summary-item {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    8px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    9px;

  background:
    var(
      --mgs-panel
    );
}


.mi-gestion-supervision-summary-item__icon {
  width:
    28px;

  height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    8px;

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


.mi-gestion-supervision-summary-item > div {
  min-width:
    0;
}


.mi-gestion-supervision-summary-item small {
  display:
    block;

  color:
    var(
      --mgs-muted
    );

  font-size:
    8px;
}


.mi-gestion-supervision-summary-item strong {
  display:
    block;

  margin-top:
    1px;

  overflow:
    hidden;

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mi-gestion-supervision-long-text {
  margin:
    0;

  font-size:
    10px;

  line-height:
    1.6;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}


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

.mi-gestion-supervision-progress {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.mi-gestion-supervision-progress__numbers {
  display:
    flex;

  align-items:
    baseline;

  gap:
    4px;
}


.mi-gestion-supervision-progress__numbers strong {
  font-size:
    28px;

  line-height:
    1;
}


.mi-gestion-supervision-progress__numbers span {
  color:
    var(
      --mgs-muted
    );

  font-size:
    14px;

  font-weight:
    700;
}


.mi-gestion-supervision-progress__bar {
  width:
    100%;

  height:
    7px;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    999px;

  background:
    var(
      --mgs-panel
    );
}


.mi-gestion-supervision-progress__bar > span {
  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(
      --mgs-success
    );
}


.mi-gestion-supervision-progress small {
  color:
    var(
      --mgs-muted
    );

  font-size:
    9px;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.mi-gestion-supervision-section-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

  padding-bottom:
    9px;

  margin-bottom:
    10px;

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


.mi-gestion-supervision-section-head p {
  margin:
    4px
    0
    0;

  color:
    var(
      --mgs-muted
    );

  font-size:
    9px;

  line-height:
    1.5;
}


/* =========================================================
   PRIORITY SECTION
   ========================================================= */

.mi-gestion-supervision-priority-section,
.mi-gestion-supervision-assignments-section,
.mi-gestion-supervision-users-section,
.mi-gestion-supervision-messages-section,
.mi-gestion-supervision-history-section {
  min-width:
    0;

  padding:
    11px;

  border:
    1px solid
    var(
      --mgs-line-strong
    );

  border-radius:
    11px;

  background:
    var(
      --mgs-panel-soft
    );
}


.mi-gestion-supervision-priority-actions {
  display:
    grid;

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

  gap:
    7px;
}


.mi-gestion-supervision-priority-btn {
  min-height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    0
    10px;

  border-radius:
    9px;

  font-size:
    10px;

  font-weight:
    800;
}


.mi-gestion-supervision-priority-btn.is-low {
  color:
    var(
      --mgs-blue
    );
}


.mi-gestion-supervision-priority-btn.is-medium {
  color:
    var(
      --mgs-warning
    );
}


.mi-gestion-supervision-priority-btn.is-high {
  color:
    var(
      --mgs-orange
    );
}


.mi-gestion-supervision-priority-btn.is-urgent {
  color:
    var(
      --mgs-danger
    );
}


.mi-gestion-supervision-priority-btn.is-selected {
  border-color:
    currentColor;

  background:
    var(
      --mgs-panel-strong
    );
}


/* =========================================================
   DARK BASE
   ========================================================= */

html[data-theme="dark"]
.mi-gestion-supervision-page {
  --mgs-panel:
    #050505;

  --mgs-panel-soft:
    #0a0a0a;

  --mgs-panel-strong:
    #111111;

  --mgs-text:
    #f5f5f5;

  --mgs-muted:
    #9ca3af;

  --mgs-subtle:
    #71717a;

  --mgs-line:
    #1f1f1f;

  --mgs-line-strong:
    #2b2b2b;
}/* =========================================================
   ASIGNACIONES
   ========================================================= */

.mi-gestion-supervision-assignments {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.mi-gestion-supervision-assignment {
  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    9px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    9px;

  background:
    var(
      --mgs-panel
    );
}


.mi-gestion-supervision-assignment.is-completed {
  border-color:
    color-mix(
      in srgb,
      var(
        --mgs-success
      )
      45%,
      var(
        --mgs-line
      )
    );
}


.mi-gestion-supervision-assignment__identity {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.mi-gestion-supervision-assignment__avatar,
.mi-gestion-supervision-user__avatar {
  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    9px;

  background:
    var(
      --mgs-panel-soft
    );

  color:
    var(
      --mgs-text
    );

  font-size:
    11px;

  font-weight:
    850;
}


.mi-gestion-supervision-assignment__identity > div,
.mi-gestion-supervision-user__identity {
  min-width:
    0;
}


.mi-gestion-supervision-assignment__identity strong,
.mi-gestion-supervision-user__identity strong {
  display:
    block;

  overflow:
    hidden;

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mi-gestion-supervision-assignment__identity small,
.mi-gestion-supervision-user__identity small {
  display:
    block;

  margin-top:
    2px;

  overflow:
    hidden;

  color:
    var(
      --mgs-muted
    );

  font-size:
    8px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mi-gestion-supervision-assignment__state {
  min-width:
    125px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    3px;
}


.mi-gestion-supervision-assignment-status {
  min-height:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0
    7px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    7px;

  background:
    var(
      --mgs-panel-soft
    );

  color:
    var(
      --mgs-muted
    );

  font-size:
    8px;

  font-weight:
    800;
}


.mi-gestion-supervision-assignment-status .icon {
  width:
    11px;

  height:
    11px;
}


.mi-gestion-supervision-assignment-status.is-completed {
  color:
    var(
      --mgs-success
    );
}


.mi-gestion-supervision-assignment-status.is-cancelled {
  color:
    var(
      --mgs-danger
    );
}


.mi-gestion-supervision-assignment__state > small {
  color:
    var(
      --mgs-muted
    );

  font-size:
    8px;
}


/* =========================================================
   USERS SEARCH
   ========================================================= */

.mi-gestion-supervision-user-search {
  height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    0
    10px;

  margin-bottom:
    8px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    9px;

  background:
    var(
      --mgs-panel
    );
}


.mi-gestion-supervision-user-search .icon {
  color:
    var(
      --mgs-muted
    );
}


.mi-gestion-supervision-user-search input {
  min-width:
    0;

  width:
    100%;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(
      --mgs-text
    );

  font:
    inherit;

  font-size:
    10px;
}


/* =========================================================
   USERS
   ========================================================= */

.mi-gestion-supervision-users {
  display:
    grid;

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

  gap:
    7px;

  max-height:
    280px;

  overflow:
    auto;
}


.mi-gestion-supervision-user {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    8px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    9px;

  background:
    var(
      --mgs-panel
    );

  color:
    var(
      --mgs-text
    );

  text-align:
    left;

  font:
    inherit;

  cursor:
    pointer;

  transition:
    background
    140ms
    ease,
    border-color
    140ms
    ease;
}


.mi-gestion-supervision-user:hover {
  border-color:
    var(
      --mgs-line-strong
    );

  background:
    var(
      --mgs-panel-strong
    );
}


.mi-gestion-supervision-user.is-selected {
  border-color:
    var(
      --mgs-text
    );

  background:
    var(
      --mgs-panel-strong
    );
}


.mi-gestion-supervision-user__check {
  color:
    var(
      --mgs-muted
    );
}


.mi-gestion-supervision-user.is-selected
.mi-gestion-supervision-user__check {
  color:
    var(
      --mgs-success
    );
}


.mi-gestion-supervision-users__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding-top:
    9px;

  margin-top:
    9px;

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


.mi-gestion-supervision-users__footer > span {
  color:
    var(
      --mgs-muted
    );

  font-size:
    9px;
}


.mi-gestion-supervision-users__footer strong {
  color:
    var(
      --mgs-text
    );

  font-size:
    11px;
}


/* =========================================================
   BLOCKED
   ========================================================= */

.mi-gestion-supervision-blocked {
  min-height:
    44px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    10px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    9px;

  background:
    var(
      --mgs-panel
    );

  color:
    var(
      --mgs-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


/* =========================================================
   MESSAGE ACTIONS
   ========================================================= */

.mi-gestion-supervision-message-actions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-bottom:
    10px;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.mi-gestion-supervision-messages {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.mi-gestion-supervision-message {
  min-width:
    0;

  display:
    grid;

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

  gap:
    9px;

  padding:
    9px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    9px;

  background:
    var(
      --mgs-panel
    );
}


.mi-gestion-supervision-message.is-alert {
  border-left:
    3px solid
    var(
      --mgs-warning
    );
}


.mi-gestion-supervision-message.is-alert.is-importante {
  border-left-color:
    var(
      --mgs-orange
    );
}


.mi-gestion-supervision-message.is-alert.is-urgente {
  border-left-color:
    var(
      --mgs-danger
    );
}


.mi-gestion-supervision-message__icon {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    8px;

  background:
    var(
      --mgs-panel-soft
    );

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


.mi-gestion-supervision-message.is-alert
.mi-gestion-supervision-message__icon {
  color:
    var(
      --mgs-warning
    );
}


.mi-gestion-supervision-message.is-alert.is-importante
.mi-gestion-supervision-message__icon {
  color:
    var(
      --mgs-orange
    );
}


.mi-gestion-supervision-message.is-alert.is-urgente
.mi-gestion-supervision-message__icon {
  color:
    var(
      --mgs-danger
    );
}


.mi-gestion-supervision-message__content {
  min-width:
    0;
}


.mi-gestion-supervision-message__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;
}


.mi-gestion-supervision-message__head > div {
  min-width:
    0;
}


.mi-gestion-supervision-message__head small {
  display:
    block;

  color:
    var(
      --mgs-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.05em;
}


.mi-gestion-supervision-message__head strong {
  display:
    block;

  margin-top:
    1px;

  font-size:
    10px;
}


.mi-gestion-supervision-message__head time {
  flex:
    0
    0
    auto;

  color:
    var(
      --mgs-muted
    );

  font-size:
    8px;
}


.mi-gestion-supervision-message p {
  margin:
    7px
    0;

  font-size:
    10px;

  line-height:
    1.55;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}


.mi-gestion-supervision-message footer {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;
}


.mi-gestion-supervision-message footer span {
  min-height:
    22px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0
    6px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    6px;

  background:
    var(
      --mgs-panel-soft
    );

  color:
    var(
      --mgs-muted
    );

  font-size:
    8px;
}


.mi-gestion-supervision-message footer .icon {
  width:
    10px;

  height:
    10px;
}


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

.mi-gestion-supervision-history {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.mi-gestion-supervision-history__hint {
  margin:
    0;

  padding:
    10px;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    8px;

  background:
    var(
      --mgs-panel
    );

  color:
    var(
      --mgs-muted
    );

  font-size:
    9px;
}


.mi-gestion-supervision-history-item {
  position:
    relative;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    14px
    minmax(
      0,
      1fr
    );

  gap:
    8px;

  padding:
    8px
    0;
}


.mi-gestion-supervision-history-item:not(:last-child) {
  border-bottom:
    1px solid
    var(
      --mgs-line
    );
}


.mi-gestion-supervision-history-item__dot {
  width:
    8px;

  height:
    8px;

  margin-top:
    4px;

  border:
    2px solid
    var(
      --mgs-line-strong
    );

  border-radius:
    50%;

  background:
    var(
      --mgs-panel
    );
}


.mi-gestion-supervision-history-item > div {
  min-width:
    0;
}


.mi-gestion-supervision-history-item__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    8px;
}


.mi-gestion-supervision-history-item__head strong {
  font-size:
    9px;

  letter-spacing:
    0.03em;
}


.mi-gestion-supervision-history-item__head time {
  color:
    var(
      --mgs-muted
    );

  font-size:
    8px;

  white-space:
    nowrap;
}


.mi-gestion-supervision-history-item p {
  margin:
    4px
    0;

  color:
    var(
      --mgs-text
    );

  font-size:
    9px;

  line-height:
    1.5;
}


.mi-gestion-supervision-history-item > div > small {
  color:
    var(
      --mgs-muted
    );

  font-size:
    8px;
}


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

html.mi-gestion-supervision-modal-open,
html.mi-gestion-supervision-modal-open body {
  overflow:
    hidden;
}


.mi-gestion-supervision-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    10000;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;
}


.mi-gestion-supervision-modal.is-open {
  display:
    flex;
}


.mi-gestion-supervision-modal__backdrop {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  padding:
    0;

  border:
    0;

  background:
    rgba(
      0,
      0,
      0,
      0.68
    );

  cursor:
    default;
}


.mi-gestion-supervision-modal__dialog {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      660px,
      100%
    );

  max-height:
    calc(
      100vh -
      40px
    );

  display:
    grid;

  grid-template-rows:
    auto
    minmax(
      0,
      1fr
    )
    auto;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --mgs-line-strong
    );

  border-radius:
    14px;

  background:
    var(
      --mgs-panel
    );

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


.mi-gestion-supervision-modal__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    14px;

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


.mi-gestion-supervision-modal__head > div {
  min-width:
    0;
}


.mi-gestion-supervision-modal__head > div > span {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(
      --mgs-muted
    );

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


.mi-gestion-supervision-modal__head h2 {
  margin:
    0;

  font-size:
    18px;

  letter-spacing:
    -0.025em;
}


.mi-gestion-supervision-modal__head p {
  margin:
    4px
    0
    0;

  color:
    var(
      --mgs-muted
    );

  font-size:
    10px;

  line-height:
    1.5;
}


.mi-gestion-supervision-modal__body {
  min-height:
    0;

  overflow:
    auto;

  padding:
    14px;
}


.mi-gestion-supervision-modal__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    11px
    14px;

  border-top:
    1px solid
    var(
      --mgs-line-strong
    );

  background:
    var(
      --mgs-panel-soft
    );
}


/* =========================================================
   FORM
   ========================================================= */

.mi-gestion-supervision-form-grid {
  display:
    grid;

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

  gap:
    10px;
}


.mi-gestion-supervision-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.mi-gestion-supervision-field.is-full {
  grid-column:
    1 /
    -1;
}


.mi-gestion-supervision-field[hidden] {
  display:
    none;
}


.mi-gestion-supervision-field > span {
  color:
    var(
      --mgs-muted
    );

  font-size:
    9px;

  font-weight:
    750;
}


.mi-gestion-supervision-field input,
.mi-gestion-supervision-field select,
.mi-gestion-supervision-field textarea {
  width:
    100%;

  min-width:
    0;

  border:
    1px solid
    var(
      --mgs-line
    );

  border-radius:
    9px;

  outline:
    0;

  background:
    var(
      --mgs-panel-soft
    );

  color:
    var(
      --mgs-text
    );

  font:
    inherit;

  font-size:
    11px;
}


.mi-gestion-supervision-field input,
.mi-gestion-supervision-field select {
  height:
    39px;

  padding:
    0
    10px;
}


.mi-gestion-supervision-field textarea {
  min-height:
    110px;

  padding:
    10px;

  resize:
    vertical;

  line-height:
    1.5;
}


.mi-gestion-supervision-field input:focus,
.mi-gestion-supervision-field select:focus,
.mi-gestion-supervision-field textarea:focus,
.mi-gestion-supervision-user-search:focus-within,
.mi-gestion-supervision-toolbar > input:focus,
.mi-gestion-supervision-toolbar > select:focus,
.mi-gestion-supervision-search:focus-within {
  border-color:
    var(
      --mgs-text
    );
}


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

.mi-gestion-supervision-toast {
  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    12000;

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

  padding:
    10px
    12px;

  border:
    1px solid
    #d1d5db;

  border-radius:
    9px;

  background:
    #ffffff;

  color:
    #111111;

  font-family:
    "DM Sans",
    system-ui,
    sans-serif;

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.4;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(
      8px
    );

  transition:
    opacity
    160ms
    ease,
    transform
    160ms
    ease,
    visibility
    160ms
    ease;
}


.mi-gestion-supervision-toast.is-visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(
      0
    );
}


.mi-gestion-supervision-toast.is-success {
  border-color:
    #15803d;

  color:
    #15803d;
}


.mi-gestion-supervision-toast.is-error {
  border-color:
    #b91c1c;

  color:
    #b91c1c;
}


html[data-theme="dark"]
.mi-gestion-supervision-toast {
  border-color:
    #2b2b2b;

  background:
    #050505;

  color:
    #f5f5f5;
}


html[data-theme="dark"]
.mi-gestion-supervision-toast.is-success {
  border-color:
    #15803d;

  color:
    #4ade80;
}


html[data-theme="dark"]
.mi-gestion-supervision-toast.is-error {
  border-color:
    #b91c1c;

  color:
    #f87171;
}


/* =========================================================
   SCROLL
   ========================================================= */

.mi-gestion-supervision-list,
.mi-gestion-supervision-users,
.mi-gestion-supervision-modal__body {
  scrollbar-width:
    thin;

  scrollbar-color:
    var(
      --mgs-line-strong
    )
    transparent;
}


.mi-gestion-supervision-list::-webkit-scrollbar,
.mi-gestion-supervision-users::-webkit-scrollbar,
.mi-gestion-supervision-modal__body::-webkit-scrollbar {
  width:
    7px;
}


.mi-gestion-supervision-list::-webkit-scrollbar-thumb,
.mi-gestion-supervision-users::-webkit-scrollbar-thumb,
.mi-gestion-supervision-modal__body::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(
      --mgs-line-strong
    );
}


/* =========================================================
   DARK · REFINADO
   ========================================================= */

html[data-theme="dark"]
.mi-gestion-supervision-modal__backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.84
    );
}


html[data-theme="dark"]
.mi-gestion-supervision-head,
html[data-theme="dark"]
.mi-gestion-supervision-toolbar,
html[data-theme="dark"]
.mi-gestion-supervision-list-panel,
html[data-theme="dark"]
.mi-gestion-supervision-detail-panel,
html[data-theme="dark"]
.mi-gestion-supervision-summary-card,
html[data-theme="dark"]
.mi-gestion-supervision-priority-section,
html[data-theme="dark"]
.mi-gestion-supervision-assignments-section,
html[data-theme="dark"]
.mi-gestion-supervision-users-section,
html[data-theme="dark"]
.mi-gestion-supervision-messages-section,
html[data-theme="dark"]
.mi-gestion-supervision-history-section,
html[data-theme="dark"]
.mi-gestion-supervision-modal__dialog {
  border-color:
    #2a2a2a;
}


html[data-theme="dark"]
.mi-gestion-supervision-assignment,
html[data-theme="dark"]
.mi-gestion-supervision-user,
html[data-theme="dark"]
.mi-gestion-supervision-message,
html[data-theme="dark"]
.mi-gestion-supervision-summary-item,
html[data-theme="dark"]
.mi-gestion-supervision-history__hint,
html[data-theme="dark"]
.mi-gestion-supervision-user-search,
html[data-theme="dark"]
.mi-gestion-supervision-toolbar > select,
html[data-theme="dark"]
.mi-gestion-supervision-toolbar > input,
html[data-theme="dark"]
.mi-gestion-supervision-field input,
html[data-theme="dark"]
.mi-gestion-supervision-field select,
html[data-theme="dark"]
.mi-gestion-supervision-field textarea {
  border-color:
    #222222;
}


/* =========================================================
   RESPONSIVE · 1500
   ========================================================= */

@media (
  max-width:
    1500px
) {
  .mi-gestion-supervision-metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .mi-gestion-supervision-toolbar {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .mi-gestion-supervision-search {
    grid-column:
      span
      2;
  }
}


/* =========================================================
   RESPONSIVE · 1180
   ========================================================= */

@media (
  max-width:
    1180px
) {
  .mi-gestion-supervision-workspace {
    grid-template-columns:
      minmax(
        290px,
        0.85fr
      )
      minmax(
        0,
        1.4fr
      );
  }


  .mi-gestion-supervision-summary-list {
    grid-template-columns:
      1fr;
  }


  .mi-gestion-supervision-users {
    grid-template-columns:
      1fr;
  }


  .mi-gestion-supervision-assignment {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      auto;
  }


  .mi-gestion-supervision-assignment__state {
    grid-column:
      1 /
      -1;

    align-items:
      flex-start;
  }
}


/* =========================================================
   RESPONSIVE · 920
   ========================================================= */

@media (
  max-width:
    920px
) {
  .mi-gestion-supervision-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .mi-gestion-supervision-head__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .mi-gestion-supervision-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .mi-gestion-supervision-workspace {
    grid-template-columns:
      1fr;
  }


  .mi-gestion-supervision-list {
    max-height:
      390px;
  }


  .mi-gestion-supervision-summary-grid {
    grid-template-columns:
      1fr;
  }


  .mi-gestion-supervision-summary-card.is-full {
    grid-column:
      auto;
  }
}


/* =========================================================
   RESPONSIVE · 720
   ========================================================= */

@media (
  max-width:
    720px
) {
  .mi-gestion-supervision-page {
    gap:
      10px;
  }


  .mi-gestion-supervision-toolbar {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .mi-gestion-supervision-search {
    grid-column:
      1 /
      -1;
  }


  .mi-gestion-supervision-priority-actions {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .mi-gestion-supervision-form-grid {
    grid-template-columns:
      1fr;
  }


  .mi-gestion-supervision-field.is-full {
    grid-column:
      auto;
  }


  .mi-gestion-supervision-modal {
    padding:
      10px;
  }


  .mi-gestion-supervision-modal__dialog {
    max-height:
      calc(
        100vh -
        20px
      );
  }
}


/* =========================================================
   RESPONSIVE · 520
   ========================================================= */

@media (
  max-width:
    520px
) {
  .mi-gestion-supervision-metrics {
    grid-template-columns:
      1fr;
  }


  .mi-gestion-supervision-toolbar {
    grid-template-columns:
      1fr;
  }


  .mi-gestion-supervision-search {
    grid-column:
      auto;
  }


  .mi-gestion-supervision-head__actions,
  .mi-gestion-supervision-head__actions
  .mi-gestion-supervision-btn {
    width:
      100%;
  }


  .mi-gestion-supervision-detail-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .mi-gestion-supervision-detail-head__status {
    width:
      100%;

    flex-wrap:
      wrap;
  }


  .mi-gestion-supervision-request__top {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .mi-gestion-supervision-assignment {
    grid-template-columns:
      1fr;
  }


  .mi-gestion-supervision-assignment__state {
    grid-column:
      auto;

    align-items:
      flex-start;
  }


  .mi-gestion-supervision-assignment
  .mi-gestion-supervision-btn {
    width:
      100%;
  }


  .mi-gestion-supervision-users__footer {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .mi-gestion-supervision-users__footer
  .mi-gestion-supervision-btn {
    width:
      100%;
  }


  .mi-gestion-supervision-message__head {
    flex-direction:
      column;
  }


  .mi-gestion-supervision-message__head time {
    white-space:
      normal;
  }


  .mi-gestion-supervision-section-head {
    flex-direction:
      column;
  }


  .mi-gestion-supervision-message-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .mi-gestion-supervision-message-actions
  .mi-gestion-supervision-btn {
    width:
      100%;
  }


  .mi-gestion-supervision-modal__footer {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .mi-gestion-supervision-modal__footer
  .mi-gestion-supervision-btn {
    width:
      100%;
  }
}


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

@media (
  prefers-reduced-motion:
    reduce
) {
  .mi-gestion-supervision-page *,
  .mi-gestion-supervision-toast {
    scroll-behavior:
      auto !important;

    transition:
      none !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }
}/* =========================================================
   SUPERVISIÓN DE TAREAS · MÁS RÁPIDA /
   DIVISIONES MARCADAS / TIPOGRAFÍA MÁS FUERTE
   ========================================================= */

.mi-gestion-supervision-page {
  --mgs-line: #c7ccd2;
  --mgs-line-strong: #9da4ad;

  --mgs-text: #0d0f12;
  --mgs-muted: #454b53;
  --mgs-subtle: #666d76;
}

html[data-theme="dark"]
.mi-gestion-supervision-page {
  --mgs-line: #343941;
  --mgs-line-strong: #555c66;

  --mgs-text: #ffffff;
  --mgs-muted: #d7dbe0;
  --mgs-subtle: #aeb4bc;
}


/* =========================================================
   RENDIMIENTO VISUAL
   ========================================================= */

.mi-gestion-supervision-head,
.mi-gestion-supervision-metric,
.mi-gestion-supervision-toolbar,
.mi-gestion-supervision-list-panel,
.mi-gestion-supervision-detail-panel,
.mi-gestion-supervision-request,
.mi-gestion-supervision-summary-card,
.mi-gestion-supervision-summary-item,
.mi-gestion-supervision-priority-section,
.mi-gestion-supervision-assignments-section,
.mi-gestion-supervision-users-section,
.mi-gestion-supervision-messages-section,
.mi-gestion-supervision-history-section,
.mi-gestion-supervision-assignment,
.mi-gestion-supervision-user,
.mi-gestion-supervision-message,
.mi-gestion-supervision-history-item,
.mi-gestion-supervision-modal__dialog {
  transition: none;
}


/* =========================================================
   TIPOGRAFÍA GENERAL MÁS MARCADA
   ========================================================= */

.mi-gestion-supervision-page {
  font-weight: 600;
}

.mi-gestion-supervision-head h1,
.mi-gestion-supervision-detail-head h2,
.mi-gestion-supervision-list-panel__head strong,
.mi-gestion-supervision-summary-card > header h3,
.mi-gestion-supervision-section-head h3,
.mi-gestion-supervision-modal__head h2,
.mi-gestion-supervision-empty strong,
.mi-gestion-supervision-detail-empty strong {
  font-weight: 850;
}

.mi-gestion-supervision-head__brand > div > span,
.mi-gestion-supervision-list-panel__head > div > span,
.mi-gestion-supervision-detail-head__eyebrow,
.mi-gestion-supervision-summary-card > header span,
.mi-gestion-supervision-section-head > div > span,
.mi-gestion-supervision-modal__head > div > span {
  font-weight: 850;
}

.mi-gestion-supervision-head p,
.mi-gestion-supervision-detail-head p,
.mi-gestion-supervision-section-head p,
.mi-gestion-supervision-modal__head p,
.mi-gestion-supervision-empty p,
.mi-gestion-supervision-detail-empty p {
  font-weight: 650;
}

.mi-gestion-supervision-btn,
.mi-gestion-supervision-icon-btn,
.mi-gestion-supervision-priority-btn,
.mi-gestion-supervision-priority,
.mi-gestion-supervision-status,
.mi-gestion-supervision-count {
  font-weight: 800;
}


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

.mi-gestion-supervision-head {
  border-color: var(--mgs-line-strong);
  border-bottom-width: 2px;
}

.mi-gestion-supervision-head__icon {
  border-color: var(--mgs-line-strong);
}


/* =========================================================
   BOTONES
   ========================================================= */

.mi-gestion-supervision-btn,
.mi-gestion-supervision-icon-btn,
.mi-gestion-supervision-priority-btn {
  border-color: var(--mgs-line-strong);
  transition: none;
}


/* =========================================================
   MÉTRICAS
   ========================================================= */

.mi-gestion-supervision-metrics {
  gap: 8px;
}

.mi-gestion-supervision-metric {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-metric__icon {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-metric small {
  color: var(--mgs-muted);
  font-weight: 850;
}

.mi-gestion-supervision-metric strong {
  font-weight: 900;
}

.mi-gestion-supervision-metric__content > span {
  color: var(--mgs-muted);
  font-weight: 650;
}


/* =========================================================
   TOOLBAR / FILTROS
   ========================================================= */

.mi-gestion-supervision-toolbar {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-search,
.mi-gestion-supervision-toolbar > select,
.mi-gestion-supervision-toolbar > input {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-search input,
.mi-gestion-supervision-toolbar > select,
.mi-gestion-supervision-toolbar > input {
  font-weight: 700;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.mi-gestion-supervision-workspace {
  gap: 10px;
}


/* =========================================================
   LISTADO
   ========================================================= */

.mi-gestion-supervision-list-panel {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-list-panel__head {
  border-bottom: 2px solid var(--mgs-line-strong);
}

.mi-gestion-supervision-count {
  border-color: var(--mgs-line-strong);
}


/* =========================================================
   TAREAS
   ========================================================= */

.mi-gestion-supervision-request {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-request__top strong {
  font-weight: 850;
}

.mi-gestion-supervision-request__main > small {
  color: var(--mgs-muted);
  font-weight: 700;
}

.mi-gestion-supervision-request__meta > span {
  border-color: var(--mgs-line-strong);
  color: var(--mgs-muted);
  font-weight: 700;
}


/* =========================================================
   PRIORIDAD / ESTADO
   ========================================================= */

.mi-gestion-supervision-priority,
.mi-gestion-supervision-status {
  border-color: var(--mgs-line-strong);
  font-weight: 850;
}


/* =========================================================
   DETALLE
   ========================================================= */

.mi-gestion-supervision-detail-panel {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-detail-head {
  border-bottom: 2px solid var(--mgs-line-strong);
}

.mi-gestion-supervision-detail-head__icon {
  border-color: var(--mgs-line-strong);
}


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

.mi-gestion-supervision-summary-card {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-summary-card > header {
  border-bottom: 2px solid var(--mgs-line-strong);
}

.mi-gestion-supervision-summary-item {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-summary-item__icon {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-summary-item small {
  color: var(--mgs-muted);
  font-weight: 750;
}

.mi-gestion-supervision-summary-item strong {
  font-weight: 800;
}

.mi-gestion-supervision-long-text {
  font-weight: 650;
}


/* =========================================================
   PROGRESO
   ========================================================= */

.mi-gestion-supervision-progress__numbers strong {
  font-weight: 900;
}

.mi-gestion-supervision-progress__numbers span {
  font-weight: 800;
}

.mi-gestion-supervision-progress__bar {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-progress small {
  color: var(--mgs-muted);
  font-weight: 650;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.mi-gestion-supervision-section-head {
  border-bottom: 2px solid var(--mgs-line-strong);
}


/* =========================================================
   SECCIONES PRINCIPALES
   ========================================================= */

.mi-gestion-supervision-priority-section,
.mi-gestion-supervision-assignments-section,
.mi-gestion-supervision-users-section,
.mi-gestion-supervision-messages-section,
.mi-gestion-supervision-history-section {
  border-color: var(--mgs-line-strong);
}


/* =========================================================
   ASIGNACIONES
   ========================================================= */

.mi-gestion-supervision-assignment {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-assignment__avatar,
.mi-gestion-supervision-user__avatar {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-assignment__identity strong,
.mi-gestion-supervision-user__identity strong {
  font-weight: 850;
}

.mi-gestion-supervision-assignment__identity small,
.mi-gestion-supervision-user__identity small {
  color: var(--mgs-muted);
  font-weight: 650;
}

.mi-gestion-supervision-assignment-status {
  border-color: var(--mgs-line-strong);
  font-weight: 850;
}

.mi-gestion-supervision-assignment__state > small {
  color: var(--mgs-muted);
  font-weight: 650;
}


/* =========================================================
   USUARIOS
   ========================================================= */

.mi-gestion-supervision-user-search {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-user-search input {
  font-weight: 700;
}

.mi-gestion-supervision-user {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-users__footer {
  border-top: 2px solid var(--mgs-line-strong);
}

.mi-gestion-supervision-users__footer > span {
  color: var(--mgs-muted);
  font-weight: 700;
}

.mi-gestion-supervision-users__footer strong {
  font-weight: 850;
}


/* =========================================================
   BLOQUEADO
   ========================================================= */

.mi-gestion-supervision-blocked {
  border-color: var(--mgs-line-strong);
  color: var(--mgs-muted);
  font-weight: 700;
}


/* =========================================================
   MENSAJES
   ========================================================= */

.mi-gestion-supervision-message {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-message__icon {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-message__head small {
  color: var(--mgs-muted);
  font-weight: 850;
}

.mi-gestion-supervision-message__head strong {
  font-weight: 850;
}

.mi-gestion-supervision-message__head time {
  color: var(--mgs-muted);
  font-weight: 650;
}

.mi-gestion-supervision-message p {
  font-weight: 650;
}

.mi-gestion-supervision-message footer span {
  border-color: var(--mgs-line-strong);
  color: var(--mgs-muted);
  font-weight: 700;
}


/* =========================================================
   HISTORIAL
   ========================================================= */

.mi-gestion-supervision-history__hint {
  border-color: var(--mgs-line-strong);
  color: var(--mgs-muted);
  font-weight: 650;
}

.mi-gestion-supervision-history-item:not(:last-child) {
  border-bottom: 2px solid var(--mgs-line);
}

.mi-gestion-supervision-history-item__dot {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-history-item__head strong {
  font-weight: 850;
}

.mi-gestion-supervision-history-item__head time {
  color: var(--mgs-muted);
  font-weight: 650;
}

.mi-gestion-supervision-history-item p {
  font-weight: 650;
}

.mi-gestion-supervision-history-item > div > small {
  color: var(--mgs-muted);
  font-weight: 700;
}


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

.mi-gestion-supervision-modal__dialog {
  border-color: var(--mgs-line-strong);
}

.mi-gestion-supervision-modal__head {
  border-bottom: 2px solid var(--mgs-line-strong);
}

.mi-gestion-supervision-modal__footer {
  border-top: 2px solid var(--mgs-line-strong);
}

.mi-gestion-supervision-field > span {
  color: var(--mgs-muted);
  font-weight: 800;
}

.mi-gestion-supervision-field input,
.mi-gestion-supervision-field select,
.mi-gestion-supervision-field textarea {
  border-color: var(--mgs-line-strong);
  font-weight: 700;
}


/* =========================================================
   RESPONSIVE · TABLET
   ========================================================= */

@media (max-width: 920px) {
  .mi-gestion-supervision-page {
    gap: 10px;
  }

  .mi-gestion-supervision-head {
    gap: 12px;
    padding: 14px;
  }

  .mi-gestion-supervision-metrics {
    gap: 7px;
  }

  .mi-gestion-supervision-toolbar {
    gap: 7px;
    padding: 9px;
  }

  .mi-gestion-supervision-workspace {
    gap: 9px;
  }

  .mi-gestion-supervision-list-panel__head,
  .mi-gestion-supervision-detail-head {
    padding: 11px;
  }

  .mi-gestion-supervision-detail__body {
    gap: 10px;
    padding: 10px;
  }
}


/* =========================================================
   RESPONSIVE · MOBILE
   ========================================================= */

@media (max-width: 520px) {
  .mi-gestion-supervision-page {
    gap: 8px;
    overflow-x: hidden;
  }

  .mi-gestion-supervision-head {
    gap: 10px;
    padding: 11px;
    border-radius: 12px;
  }

  .mi-gestion-supervision-head__brand {
    gap: 8px;
  }

  .mi-gestion-supervision-head__icon {
    width: 34px;
    height: 34px;
  }

  .mi-gestion-supervision-head__icon .icon {
    width: 16px;
    height: 16px;
  }

  .mi-gestion-supervision-head h1 {
    font-size: 20px;
    font-weight: 900;
  }

  .mi-gestion-supervision-head__brand > div > span {
    font-size: 9px;
    font-weight: 850;
  }

  .mi-gestion-supervision-head p {
    font-size: 10.5px;
    font-weight: 650;
  }

  .mi-gestion-supervision-head__actions {
    gap: 6px;
  }

  .mi-gestion-supervision-btn {
    min-height: 34px;
    font-size: 10.5px;
    font-weight: 800;
  }

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

    gap: 6px;
  }

  .mi-gestion-supervision-metric {
    min-height: 78px;
    gap: 7px;
    padding: 9px;
  }

  .mi-gestion-supervision-metric__icon {
    width: 29px;
    height: 29px;
  }

  .mi-gestion-supervision-metric small {
    font-size: 8.5px;
    font-weight: 850;
  }

  .mi-gestion-supervision-metric strong {
    font-size: 20px;
    font-weight: 900;
  }

  .mi-gestion-supervision-metric__content > span {
    font-size: 9px;
    font-weight: 700;
  }

  .mi-gestion-supervision-toolbar {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
  }

  .mi-gestion-supervision-search,
  .mi-gestion-supervision-toolbar > select,
  .mi-gestion-supervision-toolbar > input {
    height: 35px;
  }

  .mi-gestion-supervision-search input,
  .mi-gestion-supervision-toolbar > select,
  .mi-gestion-supervision-toolbar > input {
    font-size: 10.5px;
    font-weight: 700;
  }

  .mi-gestion-supervision-workspace {
    gap: 8px;
  }

  .mi-gestion-supervision-list-panel,
  .mi-gestion-supervision-detail-panel {
    border-radius: 11px;
  }

  .mi-gestion-supervision-list-panel__head {
    padding: 9px;
    border-bottom: 2px solid var(--mgs-line-strong);
  }

  .mi-gestion-supervision-list-panel__head strong {
    font-size: 12px;
    font-weight: 850;
  }

  .mi-gestion-supervision-list {
    gap: 6px;
    padding: 6px;
  }

  .mi-gestion-supervision-request {
    gap: 7px;
    padding: 9px;
  }

  .mi-gestion-supervision-request__top strong {
    font-size: 11px;
    font-weight: 850;
  }

  .mi-gestion-supervision-request__main > small {
    font-size: 8.5px;
    font-weight: 700;
  }

  .mi-gestion-supervision-request__meta {
    gap: 4px;
  }

  .mi-gestion-supervision-request__meta > span,
  .mi-gestion-supervision-priority,
  .mi-gestion-supervision-status {
    min-height: 22px;
    font-size: 8.5px;
    font-weight: 800;
  }

  .mi-gestion-supervision-detail-head {
    gap: 9px;
    padding: 10px;
    border-bottom: 2px solid var(--mgs-line-strong);
  }

  .mi-gestion-supervision-detail-head__identity {
    gap: 8px;
  }

  .mi-gestion-supervision-detail-head__icon {
    width: 34px;
    height: 34px;
  }

  .mi-gestion-supervision-detail-head h2 {
    font-size: 15px;
    font-weight: 900;
  }

  .mi-gestion-supervision-detail-head__eyebrow {
    font-size: 8.5px;
    font-weight: 850;
  }

  .mi-gestion-supervision-detail-head p {
    font-size: 9px;
    font-weight: 700;
  }

  .mi-gestion-supervision-detail__body {
    gap: 8px;
    padding: 8px;
  }

  .mi-gestion-supervision-summary-card,
  .mi-gestion-supervision-priority-section,
  .mi-gestion-supervision-assignments-section,
  .mi-gestion-supervision-users-section,
  .mi-gestion-supervision-messages-section,
  .mi-gestion-supervision-history-section {
    padding: 9px;
    border-color: var(--mgs-line-strong);
  }

  .mi-gestion-supervision-summary-grid {
    gap: 7px;
  }

  .mi-gestion-supervision-summary-list {
    gap: 6px;
  }

  .mi-gestion-supervision-summary-item {
    padding: 7px;
  }

  .mi-gestion-supervision-summary-item__icon {
    width: 25px;
    height: 25px;
  }

  .mi-gestion-supervision-summary-item small {
    font-size: 7.5px;
    font-weight: 800;
  }

  .mi-gestion-supervision-summary-item strong {
    font-size: 9.5px;
    font-weight: 800;
  }

  .mi-gestion-supervision-section-head {
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--mgs-line-strong);
  }

  .mi-gestion-supervision-priority-actions {
    gap: 6px;
  }

  .mi-gestion-supervision-priority-btn {
    min-height: 34px;
    font-size: 9.5px;
  }

  .mi-gestion-supervision-assignment {
    gap: 7px;
    padding: 8px;
  }

  .mi-gestion-supervision-user {
    gap: 7px;
    padding: 7px;
  }

  .mi-gestion-supervision-message {
    gap: 7px;
    padding: 8px;
  }

  .mi-gestion-supervision-history-item {
    padding: 7px 0;
  }

  .mi-gestion-supervision-modal__head {
    padding: 11px;
  }

  .mi-gestion-supervision-modal__body {
    padding: 10px;
  }

  .mi-gestion-supervision-modal__footer {
    padding: 9px 10px;
  }
}