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

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

   RESPONSABILIDAD:
   - Layout
   - Header
   - Métricas
   - Filtros
   - Listado
   - Detalle
   - Cards
   - Estados
   - Prioridades
   - Responsive
   ========================================================= */


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

.mi-gestion-tareas-page {
  --mgt-bg:
    var(
      --bg,
      #f5f5f4
    );

  --mgt-panel:
    var(
      --panel,
      #ffffff
    );

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

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

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

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

  --mgt-subtle:
    var(
      --subtle,
      #9ca3af
    );

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

  --mgt-line-strong:
    #d1d5db;

  --mgt-danger:
    #b91c1c;

  --mgt-success:
    #15803d;

  --mgt-warning:
    #a16207;

  --mgt-urgent:
    #b91c1c;

  --mgt-high:
    #c2410c;

  --mgt-medium:
    #a16207;

  --mgt-low:
    #2563eb;

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  color:
    var(
      --mgt-text
    );

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


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

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

  height:
    16px;

  flex:
    0
    0
    auto;

  stroke-width:
    1.8;
}


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


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


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

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

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    16px;

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

  border-radius:
    14px;

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


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

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


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

  height:
    44px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

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

  border-radius:
    12px;

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


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

  height:
    20px;
}


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


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

  margin-bottom:
    3px;

  color:
    var(
      --mgt-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.09em;
}


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

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

  line-height:
    1.05;

  letter-spacing:
    -0.035em;
}


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

  max-width:
    720px;

  color:
    var(
      --mgt-muted
    );

  font-size:
    12px;

  line-height:
    1.5;
}


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

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex:
    0
    0
    auto;
}


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

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

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

  background:
    var(
      --mgt-panel
    );

  color:
    var(
      --mgt-text
    );

  font:
    inherit;

  cursor:
    pointer;

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


.mi-gestion-tareas-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-tareas-btn:hover:not(:disabled),
.mi-gestion-tareas-icon-btn:hover:not(:disabled) {
  background:
    var(
      --mgt-panel-strong
    );

  border-color:
    var(
      --mgt-text
    );
}


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

  cursor:
    not-allowed;
}


.mi-gestion-tareas-btn.is-primary {
  background:
    var(
      --mgt-text
    );

  border-color:
    var(
      --mgt-text
    );

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


.mi-gestion-tareas-btn.is-primary:hover:not(:disabled) {
  opacity:
    0.88;
}


.mi-gestion-tareas-btn.is-danger {
  color:
    var(
      --mgt-danger
    );

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


.mi-gestion-tareas-btn.is-danger:hover:not(:disabled) {
  border-color:
    var(
      --mgt-danger
    );

  background:
    color-mix(
      in srgb,
      var(
        --mgt-danger
      )
      7%,
      var(
        --mgt-panel
      )
    );
}


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

  opacity:
    0.7;
}


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

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border-radius:
    9px;
}


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

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

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

  gap:
    10px;
}


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

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-height:
    92px;

  padding:
    12px;

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

  border-radius:
    12px;

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


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

  height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

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

  border-radius:
    10px;

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


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

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.mi-gestion-tareas-metric small {
  color:
    var(
      --mgt-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


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

  line-height:
    1.1;

  letter-spacing:
    -0.04em;
}


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

  color:
    var(
      --mgt-muted
    );

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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


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


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

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

  grid-template-columns:
    minmax(
      220px,
      1.5fr
    )
    minmax(
      145px,
      0.7fr
    )
    minmax(
      170px,
      0.8fr
    )
    minmax(
      130px,
      0.6fr
    )
    minmax(
      175px,
      0.8fr
    )
    minmax(
      175px,
      0.8fr
    )
    auto;

  align-items:
    end;

  gap:
    8px;

  padding:
    10px;

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

  border-radius:
    12px;

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


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

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    0
    10px;

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

  border-radius:
    9px;

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


.mi-gestion-tareas-search .icon {
  color:
    var(
      --mgt-muted
    );
}


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

  width:
    100%;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(
      --mgt-text
    );

  font:
    inherit;

  font-size:
    11px;
}


.mi-gestion-tareas-toolbar > select,
.mi-gestion-tareas-toolbar > input,
.mi-gestion-tareas-date-filter input {
  width:
    100%;

  height:
    38px;

  padding:
    0
    10px;

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

  border-radius:
    9px;

  outline:
    0;

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

  color:
    var(
      --mgt-text
    );

  font:
    inherit;

  font-size:
    11px;
}


.mi-gestion-tareas-date-filter {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.mi-gestion-tareas-date-filter > span {
  color:
    var(
      --mgt-muted
    );

  font-size:
    9px;

  font-weight:
    750;
}


/* =========================================================
   FOCUS
   ========================================================= */

.mi-gestion-tareas-search:focus-within,
.mi-gestion-tareas-toolbar > select:focus,
.mi-gestion-tareas-toolbar > input:focus,
.mi-gestion-tareas-date-filter input:focus,
.mi-gestion-tareas-field input:focus,
.mi-gestion-tareas-field select:focus,
.mi-gestion-tareas-field textarea:focus {
  border-color:
    var(
      --mgt-text
    );
}


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

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

  display:
    grid;

  grid-template-columns:
    minmax(
      300px,
      0.72fr
    )
    minmax(
      0,
      1.65fr
    );

  gap:
    12px;

  align-items:
    stretch;
}


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

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

  overflow:
    hidden;

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

  border-radius:
    14px;

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


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

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    12px;

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


.mi-gestion-tareas-list-panel__head > div {
  min-width:
    0;
}


.mi-gestion-tareas-list-panel__head span {
  display:
    block;

  color:
    var(
      --mgt-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.07em;
}


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

  margin-top:
    2px;

  font-size:
    13px;
}


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

  height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    8px;

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

  border-radius:
    8px;

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

  color:
    var(
      --mgt-muted
    );

  font-size:
    10px;

  font-weight:
    800;
}


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

  flex-direction:
    column;

  gap:
    7px;

  padding:
    8px;

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

  overflow:
    auto;
}


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

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

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    9px;

  padding:
    11px;

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

  border-radius:
    10px;

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

  color:
    var(
      --mgt-text
    );

  text-align:
    left;

  font:
    inherit;

  cursor:
    pointer;

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


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

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


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

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


.mi-gestion-tareas-request.is-overdue {
  border-left:
    3px solid
    var(
      --mgt-danger
    );
}


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

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


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

  overflow:
    hidden;

  font-size:
    12px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mi-gestion-tareas-request__code {
  color:
    var(
      --mgt-muted
    );

  font-size:
    9px;

  font-weight:
    700;
}


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

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    5px;
}


.mi-gestion-tareas-request__meta > span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  min-height:
    24px;

  padding:
    0
    7px;

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

  border-radius:
    7px;

  background:
    var(
      --mgt-panel
    );

  color:
    var(
      --mgt-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


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

  height:
    12px;
}


/* =========================================================
   PRIORIDADES
   ========================================================= */

.mi-gestion-tareas-priority {
  min-height:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0
    7px;

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

  border-radius:
    7px;

  background:
    var(
      --mgt-panel
    );

  font-size:
    9px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.mi-gestion-tareas-priority .icon {
  width:
    12px;

  height:
    12px;
}


.mi-gestion-tareas-priority.is-low {
  color:
    var(
      --mgt-low
    );
}


.mi-gestion-tareas-priority.is-medium {
  color:
    var(
      --mgt-medium
    );
}


.mi-gestion-tareas-priority.is-high {
  color:
    var(
      --mgt-high
    );
}


.mi-gestion-tareas-priority.is-urgent {
  color:
    var(
      --mgt-urgent
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --mgt-urgent
      )
      34%,
      var(
        --mgt-line
      )
    );
}


/* =========================================================
   ESTADOS
   ========================================================= */

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

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0
    7px;

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

  border-radius:
    7px;

  background:
    var(
      --mgt-panel
    );

  color:
    var(
      --mgt-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.mi-gestion-tareas-status .icon {
  width:
    12px;

  height:
    12px;
}


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


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


.mi-gestion-tareas-status.is-assigned {
  color:
    var(
      --mgt-low
    );
}


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

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

  overflow:
    hidden;

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

  border-radius:
    14px;

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


.mi-gestion-tareas-detail {
  min-width:
    0;
}


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

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    14px;

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


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

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


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

  height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

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

  border-radius:
    10px;

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


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


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

  margin-bottom:
    2px;

  color:
    var(
      --mgt-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.06em;
}


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

  overflow:
    hidden;

  font-size:
    17px;

  letter-spacing:
    -0.02em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

  color:
    var(
      --mgt-muted
    );

  font-size:
    10px;
}


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

  align-items:
    center;

  gap:
    6px;

  flex:
    0
    0
    auto;
}


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

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  padding:
    12px;
}


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

.mi-gestion-tareas-empty,
.mi-gestion-tareas-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-tareas-empty__icon,
.mi-gestion-tareas-detail-empty__icon {
  width:
    42px;

  height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    11px;

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

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


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


.mi-gestion-tareas-empty p,
.mi-gestion-tareas-detail-empty p {
  max-width:
    420px;

  margin:
    0;

  color:
    var(
      --mgt-muted
    );

  font-size:
    10px;

  line-height:
    1.5;
}


.mi-gestion-tareas-detail-empty__eyebrow {
  color:
    var(
      --mgt-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.08em;
}


/* =========================================================
   INFO GRID
   ========================================================= */

.mi-gestion-tareas-info-grid {
  min-width:
    0;

  display:
    grid;

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

  gap:
    10px;
}


.mi-gestion-tareas-info-card {
  min-width:
    0;

  padding:
    11px;

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

  border-radius:
    11px;

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


.mi-gestion-tareas-info-card > header {
  padding-bottom:
    8px;

  margin-bottom:
    8px;

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


.mi-gestion-tareas-info-card > header span,
.mi-gestion-tareas-text-card > header span,
.mi-gestion-tareas-section-head > div > span {
  display:
    block;

  color:
    var(
      --mgt-muted
    );

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


.mi-gestion-tareas-info-card > header h3,
.mi-gestion-tareas-text-card > header h3,
.mi-gestion-tareas-section-head h3 {
  margin:
    2px
    0
    0;

  font-size:
    12px;
}


.mi-gestion-tareas-info-list {
  display:
    grid;

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

  gap:
    7px;
}


.mi-gestion-tareas-info-item {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    8px;

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

  border-radius:
    9px;

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


.mi-gestion-tareas-info-item__icon {
  width:
    28px;

  height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

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

  border-radius:
    8px;

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


.mi-gestion-tareas-info-item__icon .icon {
  width:
    13px;

  height:
    13px;
}


.mi-gestion-tareas-info-item > div {
  min-width:
    0;
}


.mi-gestion-tareas-info-item small {
  display:
    block;

  color:
    var(
      --mgt-muted
    );

  font-size:
    8px;

  font-weight:
    700;
}


.mi-gestion-tareas-info-item strong {
  display:
    block;

  margin-top:
    1px;

  overflow:
    hidden;

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

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

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

  --mgt-panel-strong:
    #111111;

  --mgt-text:
    #f5f5f5;

  --mgt-muted:
    #9ca3af;

  --mgt-subtle:
    #71717a;

  --mgt-line:
    #1f1f1f;

  --mgt-line-strong:
    #2b2b2b;
}/* =========================================================
   TEXT CARDS
   ========================================================= */

.mi-gestion-tareas-text-grid {
  min-width:
    0;

  display:
    grid;

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

  gap:
    10px;
}


.mi-gestion-tareas-text-card {
  min-width:
    0;

  padding:
    11px;

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

  border-radius:
    11px;

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


.mi-gestion-tareas-text-card > header {
  padding-bottom:
    8px;

  margin-bottom:
    8px;

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


.mi-gestion-tareas-text-card p {
  margin:
    0;

  color:
    var(
      --mgt-text
    );

  font-size:
    10px;

  line-height:
    1.6;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}


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

.mi-gestion-tareas-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(
      --mgt-line
    );
}


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

  color:
    var(
      --mgt-muted
    );

  font-size:
    9px;

  line-height:
    1.5;
}


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

.mi-gestion-tareas-timeline-section {
  min-width:
    0;

  padding:
    11px;

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

  border-radius:
    11px;

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


.mi-gestion-tareas-timeline {
  display:
    grid;

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

  gap:
    8px;
}


.mi-gestion-tareas-timeline-item {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    10px;

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

  border-radius:
    9px;

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


.mi-gestion-tareas-timeline-item.is-overdue {
  border-color:
    color-mix(
      in srgb,
      var(
        --mgt-danger
      )
      55%,
      var(
        --mgt-line
      )
    );
}


.mi-gestion-tareas-timeline-item__icon {
  width:
    32px;

  height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

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

  border-radius:
    8px;

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

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


.mi-gestion-tareas-timeline-item.is-overdue
.mi-gestion-tareas-timeline-item__icon {
  color:
    var(
      --mgt-danger
    );
}


.mi-gestion-tareas-timeline-item > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.mi-gestion-tareas-timeline-item small {
  color:
    var(
      --mgt-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.06em;
}


.mi-gestion-tareas-timeline-item strong {
  overflow:
    hidden;

  font-size:
    11px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mi-gestion-tareas-timeline-item__warning {
  width:
    fit-content;

  margin-top:
    2px;

  padding:
    2px
    6px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(
        --mgt-danger
      )
      45%,
      var(
        --mgt-line
      )
    );

  border-radius:
    6px;

  color:
    var(
      --mgt-danger
    );

  font-size:
    8px;

  font-weight:
    800;
}


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

.mi-gestion-tareas-actions-section {
  min-width:
    0;

  padding:
    11px;

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

  border-radius:
    11px;

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


.mi-gestion-tareas-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;
}


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

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


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

  inset:
    0;

  z-index:
    10000;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;
}


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


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

  inset:
    0;

  width:
    100%;

  height:
    100%;

  padding:
    0;

  border:
    0;

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

  cursor:
    default;
}


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

  z-index:
    1;

  width:
    min(
      760px,
      100%
    );

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

  display:
    grid;

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

  overflow:
    hidden;

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

  border-radius:
    14px;

  background:
    var(
      --mgt-panel
    );

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


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

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    14px;

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


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


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

  margin-bottom:
    3px;

  color:
    var(
      --mgt-muted
    );

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


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

  font-size:
    18px;

  letter-spacing:
    -0.025em;
}


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

  color:
    var(
      --mgt-muted
    );

  font-size:
    10px;

  line-height:
    1.5;
}


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

  overflow:
    auto;

  padding:
    14px;
}


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

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    11px
    14px;

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

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


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

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

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

  gap:
    10px;
}


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

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


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


.mi-gestion-tareas-field > span {
  color:
    var(
      --mgt-muted
    );

  font-size:
    9px;

  font-weight:
    750;
}


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

  min-width:
    0;

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

  border-radius:
    9px;

  outline:
    0;

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

  color:
    var(
      --mgt-text
    );

  font:
    inherit;

  font-size:
    11px;
}


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

  padding:
    0
    10px;
}


.mi-gestion-tareas-field textarea {
  min-height:
    88px;

  padding:
    10px;

  resize:
    vertical;

  line-height:
    1.5;
}


.mi-gestion-tareas-field input::placeholder,
.mi-gestion-tareas-field textarea::placeholder,
.mi-gestion-tareas-search input::placeholder,
.mi-gestion-tareas-toolbar > input::placeholder {
  color:
    var(
      --mgt-subtle
    );
}


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

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

  right:
    18px;

  bottom:
    18px;

  z-index:
    12000;

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

  padding:
    10px
    12px;

  border:
    1px solid
    var(
      --mgt-line-strong,
      #d1d5db
    );

  border-radius:
    9px;

  background:
    var(
      --mgt-panel,
      #ffffff
    );

  color:
    var(
      --mgt-text,
      #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-tareas-toast.is-visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(
      0
    );
}


.mi-gestion-tareas-toast.is-success {
  border-color:
    color-mix(
      in srgb,
      var(
        --mgt-success,
        #15803d
      )
      55%,
      #d1d5db
    );

  color:
    var(
      --mgt-success,
      #15803d
    );
}


.mi-gestion-tareas-toast.is-error {
  border-color:
    color-mix(
      in srgb,
      var(
        --mgt-danger,
        #b91c1c
      )
      55%,
      #d1d5db
    );

  color:
    var(
      --mgt-danger,
      #b91c1c
    );
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

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

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


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


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

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


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

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


html[data-theme="dark"]
.mi-gestion-tareas-toolbar,
html[data-theme="dark"]
.mi-gestion-tareas-head,
html[data-theme="dark"]
.mi-gestion-tareas-list-panel,
html[data-theme="dark"]
.mi-gestion-tareas-detail-panel,
html[data-theme="dark"]
.mi-gestion-tareas-info-card,
html[data-theme="dark"]
.mi-gestion-tareas-text-card,
html[data-theme="dark"]
.mi-gestion-tareas-timeline-section,
html[data-theme="dark"]
.mi-gestion-tareas-actions-section,
html[data-theme="dark"]
.mi-gestion-tareas-modal__dialog {
  border-color:
    #2a2a2a;
}


html[data-theme="dark"]
.mi-gestion-tareas-request,
html[data-theme="dark"]
.mi-gestion-tareas-info-item,
html[data-theme="dark"]
.mi-gestion-tareas-timeline-item,
html[data-theme="dark"]
.mi-gestion-tareas-priority,
html[data-theme="dark"]
.mi-gestion-tareas-status,
html[data-theme="dark"]
.mi-gestion-tareas-search,
html[data-theme="dark"]
.mi-gestion-tareas-toolbar > select,
html[data-theme="dark"]
.mi-gestion-tareas-toolbar > input,
html[data-theme="dark"]
.mi-gestion-tareas-date-filter input,
html[data-theme="dark"]
.mi-gestion-tareas-field input,
html[data-theme="dark"]
.mi-gestion-tareas-field select,
html[data-theme="dark"]
.mi-gestion-tareas-field textarea {
  border-color:
    #222222;
}


html[data-theme="dark"]
.mi-gestion-tareas-request:hover {
  border-color:
    #3a3a3a;
}


html[data-theme="dark"]
.mi-gestion-tareas-request.is-selected {
  border-color:
    #707070;
}


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

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


  .mi-gestion-tareas-toolbar {
    grid-template-columns:
      minmax(
        220px,
        2fr
      )
      repeat(
        3,
        minmax(
          140px,
          1fr
        )
      );

    align-items:
      end;
  }


  .mi-gestion-tareas-date-filter {
    min-width:
      150px;
  }
}


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

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


  .mi-gestion-tareas-info-list {
    grid-template-columns:
      1fr;
  }


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


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


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

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

    flex-direction:
      column;
  }


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

    justify-content:
      flex-start;
  }


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


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


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


  .mi-gestion-tareas-info-grid,
  .mi-gestion-tareas-text-grid {
    grid-template-columns:
      1fr;
  }
}


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

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


  .mi-gestion-tareas-head {
    padding:
      12px;
  }


  .mi-gestion-tareas-head__actions {
    display:
      grid;

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


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


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


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


  .mi-gestion-tareas-timeline {
    grid-template-columns:
      1fr;
  }


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


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


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


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


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

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


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


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


  .mi-gestion-tareas-head__actions {
    grid-template-columns:
      1fr;
  }


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

    flex-direction:
      column;
  }


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

    flex-wrap:
      wrap;
  }


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

    flex-direction:
      column;
  }


  .mi-gestion-tareas-actions {
    flex-direction:
      column;
  }


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


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

    grid-template-columns:
      1fr;
  }


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


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

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

    transition:
      none !important;

    animation-duration:
      0.01ms !important;

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

.mi-gestion-tareas-page {
  --mgt-line: #c7ccd2;
  --mgt-line-strong: #9da4ad;

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

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

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


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

.mi-gestion-tareas-head,
.mi-gestion-tareas-metric,
.mi-gestion-tareas-toolbar,
.mi-gestion-tareas-list-panel,
.mi-gestion-tareas-detail-panel,
.mi-gestion-tareas-request,
.mi-gestion-tareas-info-card,
.mi-gestion-tareas-info-item,
.mi-gestion-tareas-text-card,
.mi-gestion-tareas-timeline-section,
.mi-gestion-tareas-timeline-item,
.mi-gestion-tareas-actions-section,
.mi-gestion-tareas-modal__dialog {
  transition: none;
}


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

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

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

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

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

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


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

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

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


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

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


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

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

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

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

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

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

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


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

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

.mi-gestion-tareas-search,
.mi-gestion-tareas-toolbar > select,
.mi-gestion-tareas-toolbar > input,
.mi-gestion-tareas-date-filter input {
  border-color: var(--mgt-line-strong);
}

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

.mi-gestion-tareas-date-filter > span {
  color: var(--mgt-muted);
  font-weight: 800;
}


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

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


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

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

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

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


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

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

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

.mi-gestion-tareas-request__code {
  color: var(--mgt-muted);
  font-weight: 750;
}

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

.mi-gestion-tareas-request.is-overdue {
  border-left: 4px solid var(--mgt-danger);
}


/* =========================================================
   PRIORIDADES / ESTADOS
   ========================================================= */

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


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

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

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

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


/* =========================================================
   INFO
   ========================================================= */

.mi-gestion-tareas-info-card {
  border-color: var(--mgt-line-strong);
}

.mi-gestion-tareas-info-card > header {
  border-bottom: 2px solid var(--mgt-line-strong);
}

.mi-gestion-tareas-info-item {
  border-color: var(--mgt-line-strong);
}

.mi-gestion-tareas-info-item__icon {
  border-color: var(--mgt-line-strong);
}

.mi-gestion-tareas-info-item small {
  color: var(--mgt-muted);
  font-weight: 750;
}

.mi-gestion-tareas-info-item strong {
  font-weight: 800;
}


/* =========================================================
   TEXT CARDS
   ========================================================= */

.mi-gestion-tareas-text-card {
  border-color: var(--mgt-line-strong);
}

.mi-gestion-tareas-text-card > header {
  border-bottom: 2px solid var(--mgt-line-strong);
}

.mi-gestion-tareas-text-card p {
  font-weight: 650;
}


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

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


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

.mi-gestion-tareas-timeline-section {
  border-color: var(--mgt-line-strong);
}

.mi-gestion-tareas-timeline-item {
  border-color: var(--mgt-line-strong);
}

.mi-gestion-tareas-timeline-item__icon {
  border-color: var(--mgt-line-strong);
}

.mi-gestion-tareas-timeline-item small {
  color: var(--mgt-muted);
  font-weight: 850;
}

.mi-gestion-tareas-timeline-item strong {
  font-weight: 800;
}

.mi-gestion-tareas-timeline-item__warning {
  font-weight: 850;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.mi-gestion-tareas-actions-section {
  border-color: var(--mgt-line-strong);
}


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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

    gap: 6px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .mi-gestion-tareas-request__code {
    font-size: 8.5px;
    font-weight: 750;
  }

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

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

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

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

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

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

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

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

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

  .mi-gestion-tareas-info-card,
  .mi-gestion-tareas-text-card,
  .mi-gestion-tareas-timeline-section,
  .mi-gestion-tareas-actions-section {
    padding: 9px;
    border-color: var(--mgt-line-strong);
  }

  .mi-gestion-tareas-info-grid,
  .mi-gestion-tareas-text-grid {
    gap: 7px;
  }

  .mi-gestion-tareas-info-list {
    gap: 6px;
  }

  .mi-gestion-tareas-info-item {
    padding: 7px;
  }

  .mi-gestion-tareas-info-item__icon {
    width: 25px;
    height: 25px;
  }

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

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

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

  .mi-gestion-tareas-timeline {
    gap: 6px;
  }

  .mi-gestion-tareas-timeline-item {
    padding: 8px;
  }

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

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

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