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

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

   RESPONSABILIDAD:
   - Layout
   - Header
   - Métricas
   - Filtros
   - Listado
   - Detalle
   - Estado personal
   - Cronograma
   - Comentarios / avisos
   - Cumplimiento
   - Responsive
   ========================================================= */


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

.mi-gestion-mis-tareas-page {
  --mgm-panel:
    var(
      --panel,
      #ffffff
    );

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

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

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

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

  --mgm-subtle:
    #9ca3af;

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

  --mgm-line-strong:
    #d1d5db;

  --mgm-danger:
    #b91c1c;

  --mgm-success:
    #15803d;

  --mgm-warning:
    #a16207;

  --mgm-blue:
    #2563eb;

  --mgm-orange:
    #c2410c;

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  color:
    var(
      --mgm-text
    );

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


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

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

  height:
    16px;

  flex:
    0
    0
    auto;

  stroke-width:
    1.8;
}


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


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


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

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

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    16px;

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

  border-radius:
    14px;

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


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

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


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

  height:
    44px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

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

  border-radius:
    12px;

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


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

  height:
    20px;
}


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


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

  margin-bottom:
    3px;

  color:
    var(
      --mgm-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.09em;
}


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

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

  line-height:
    1.05;

  letter-spacing:
    -0.035em;
}


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

  max-width:
    720px;

  color:
    var(
      --mgm-muted
    );

  font-size:
    12px;

  line-height:
    1.5;
}


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

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex:
    0
    0
    auto;
}


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

.mi-gestion-mis-tareas-btn {
  appearance:
    none;

  min-height:
    36px;

  padding:
    0
    12px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

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

  border-radius:
    9px;

  background:
    var(
      --mgm-panel
    );

  color:
    var(
      --mgm-text
    );

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    750;

  white-space:
    nowrap;

  cursor:
    pointer;

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


.mi-gestion-mis-tareas-btn:hover:not(:disabled) {
  border-color:
    var(
      --mgm-text
    );

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


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

  cursor:
    not-allowed;
}


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

  opacity:
    0.7;
}


.mi-gestion-mis-tareas-btn.is-complete {
  min-height:
    42px;

  border-color:
    var(
      --mgm-success
    );

  background:
    var(
      --mgm-success
    );

  color:
    #ffffff;

  font-size:
    11px;

  font-weight:
    800;
}


.mi-gestion-mis-tareas-btn.is-complete:hover:not(:disabled) {
  background:
    color-mix(
      in srgb,
      var(
        --mgm-success
      )
      88%,
      #000000
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --mgm-success
      )
      88%,
      #000000
    );
}


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

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

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

  gap:
    10px;
}


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

  min-height:
    92px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    12px;

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

  border-radius:
    12px;

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


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

  height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

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

  border-radius:
    10px;

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


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

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


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

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


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

  line-height:
    1.1;

  letter-spacing:
    -0.04em;
}


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

  color:
    var(
      --mgm-muted
    );

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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


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


.mi-gestion-mis-tareas-metric.is-today
.mi-gestion-mis-tareas-metric__icon {
  color:
    var(
      --mgm-warning
    );
}


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

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

  grid-template-columns:
    minmax(
      260px,
      1.6fr
    )
    minmax(
      150px,
      0.75fr
    )
    minmax(
      150px,
      0.75fr
    )
    minmax(
      150px,
      0.8fr
    )
    auto;

  gap:
    8px;

  align-items:
    center;

  padding:
    10px;

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

  border-radius:
    12px;

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


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

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    0
    10px;

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

  border-radius:
    9px;

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


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


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

  width:
    100%;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(
      --mgm-text
    );

  font:
    inherit;

  font-size:
    11px;
}


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

  height:
    38px;

  padding:
    0
    10px;

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

  border-radius:
    9px;

  outline:
    0;

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

  color:
    var(
      --mgm-text
    );

  font:
    inherit;

  font-size:
    11px;
}


.mi-gestion-mis-tareas-search:focus-within,
.mi-gestion-mis-tareas-toolbar > select:focus,
.mi-gestion-mis-tareas-toolbar > input:focus {
  border-color:
    var(
      --mgm-text
    );
}


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

.mi-gestion-mis-tareas-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-mis-tareas-list-panel {
  min-width:
    0;

  overflow:
    hidden;

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

  border-radius:
    14px;

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


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

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    12px;

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


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

  color:
    var(
      --mgm-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.07em;
}


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

  margin-top:
    2px;

  font-size:
    13px;
}


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

  height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    8px;

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

  border-radius:
    8px;

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

  color:
    var(
      --mgm-muted
    );

  font-size:
    10px;

  font-weight:
    800;
}


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

  flex-direction:
    column;

  gap:
    7px;

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

  padding:
    8px;

  overflow:
    auto;
}


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

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

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    9px;

  padding:
    11px;

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

  border-radius:
    10px;

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

  color:
    var(
      --mgm-text
    );

  text-align:
    left;

  font:
    inherit;

  cursor:
    pointer;

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


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

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


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

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


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


.mi-gestion-mis-tareas-request.is-completed {
  border-left:
    3px solid
    var(
      --mgm-success
    );
}


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

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


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

  overflow:
    hidden;

  font-size:
    12px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

  font-size:
    9px;

  font-weight:
    700;
}


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

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;
}


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

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0
    7px;

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

  border-radius:
    7px;

  background:
    var(
      --mgm-panel
    );

  color:
    var(
      --mgm-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


.mi-gestion-mis-tareas-request__meta > span.is-danger {
  color:
    var(
      --mgm-danger
    );
}


.mi-gestion-mis-tareas-request__meta > span.is-today {
  color:
    var(
      --mgm-warning
    );
}


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

  height:
    12px;
}


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

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

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0
    7px;

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

  border-radius:
    7px;

  background:
    var(
      --mgm-panel
    );

  font-size:
    9px;

  font-weight:
    800;

  white-space:
    nowrap;
}


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

  height:
    12px;
}


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


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


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


.mi-gestion-mis-tareas-priority.is-urgent {
  color:
    var(
      --mgm-danger
    );

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


.mi-gestion-mis-tareas-status {
  color:
    var(
      --mgm-muted
    );
}


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


.mi-gestion-mis-tareas-status.is-cancelled {
  color:
    var(
      --mgm-danger
    );
}


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

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

  overflow:
    hidden;

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

  border-radius:
    14px;

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


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

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    14px;

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


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

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.mi-gestion-mis-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(
      --mgm-line
    );

  border-radius:
    10px;

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


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


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

  margin-bottom:
    2px;

  color:
    var(
      --mgm-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.06em;
}


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

  overflow:
    hidden;

  font-size:
    17px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

  color:
    var(
      --mgm-muted
    );

  font-size:
    10px;
}


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

  align-items:
    center;

  gap:
    6px;

  flex:
    0
    0
    auto;
}


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

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  padding:
    12px;
}


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

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

  height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    11px;

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

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


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


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

  margin:
    0;

  color:
    var(
      --mgm-muted
    );

  font-size:
    10px;

  line-height:
    1.5;
}


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

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.08em;
}


/* =========================================================
   ESTADO PERSONAL
   ========================================================= */

.mi-gestion-mis-tareas-personal-status {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    11px;

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

  border-radius:
    11px;

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


.mi-gestion-mis-tareas-personal-status.is-completed {
  border-color:
    color-mix(
      in srgb,
      var(
        --mgm-success
      )
      44%,
      var(
        --mgm-line
      )
    );
}


.mi-gestion-mis-tareas-personal-status.is-overdue {
  border-color:
    color-mix(
      in srgb,
      var(
        --mgm-danger
      )
      48%,
      var(
        --mgm-line
      )
    );
}


.mi-gestion-mis-tareas-personal-status.is-today {
  border-color:
    color-mix(
      in srgb,
      var(
        --mgm-warning
      )
      48%,
      var(
        --mgm-line
      )
    );
}


.mi-gestion-mis-tareas-personal-status__icon {
  width:
    40px;

  height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

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

  border-radius:
    10px;

  background:
    var(
      --mgm-panel
    );

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


.mi-gestion-mis-tareas-personal-status.is-completed
.mi-gestion-mis-tareas-personal-status__icon {
  color:
    var(
      --mgm-success
    );
}


.mi-gestion-mis-tareas-personal-status.is-overdue
.mi-gestion-mis-tareas-personal-status__icon {
  color:
    var(
      --mgm-danger
    );
}


.mi-gestion-mis-tareas-personal-status.is-today
.mi-gestion-mis-tareas-personal-status__icon {
  color:
    var(
      --mgm-warning
    );
}


.mi-gestion-mis-tareas-personal-status > div {
  min-width:
    0;
}


.mi-gestion-mis-tareas-personal-status > div > span {
  display:
    block;

  color:
    var(
      --mgm-muted
    );

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


.mi-gestion-mis-tareas-personal-status strong {
  display:
    block;

  margin-top:
    2px;

  font-size:
    12px;
}


.mi-gestion-mis-tareas-personal-status p {
  margin:
    3px
    0
    0;

  color:
    var(
      --mgm-muted
    );

  font-size:
    9px;

  line-height:
    1.5;
}


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

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

  display:
    grid;

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

  gap:
    10px;
}


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

  padding:
    11px;

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

  border-radius:
    11px;

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


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

  margin-bottom:
    8px;

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


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

  color:
    var(
      --mgm-muted
    );

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


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

  font-size:
    12px;
}


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

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

  gap:
    7px;
}


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

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    8px;

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

  border-radius:
    9px;

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


.mi-gestion-mis-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(
      --mgm-line
    );

  border-radius:
    8px;

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


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


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

  color:
    var(
      --mgm-muted
    );

  font-size:
    8px;

  font-weight:
    700;
}


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

  margin-top:
    1px;

  overflow:
    hidden;

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

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

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

  --mgm-panel-strong:
    #111111;

  --mgm-text:
    #f5f5f5;

  --mgm-muted:
    #9ca3af;

  --mgm-subtle:
    #71717a;

  --mgm-line:
    #1f1f1f;

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

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

  display:
    grid;

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

  gap:
    10px;
}


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

  padding:
    11px;

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

  border-radius:
    11px;

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


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

  margin-bottom:
    8px;

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


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

  color:
    var(
      --mgm-text
    );

  font-size:
    10px;

  line-height:
    1.6;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}


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

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


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

  color:
    var(
      --mgm-muted
    );

  font-size:
    9px;

  line-height:
    1.5;
}


/* =========================================================
   SCHEDULE
   ========================================================= */

.mi-gestion-mis-tareas-schedule-section,
.mi-gestion-mis-tareas-messages-section {
  min-width:
    0;

  padding:
    11px;

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

  border-radius:
    11px;

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


.mi-gestion-mis-tareas-schedule {
  display:
    grid;

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

  gap:
    8px;
}


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

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    10px;

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

  border-radius:
    9px;

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


.mi-gestion-mis-tareas-schedule-item.is-overdue {
  border-color:
    color-mix(
      in srgb,
      var(
        --mgm-danger
      )
      50%,
      var(
        --mgm-line
      )
    );
}


.mi-gestion-mis-tareas-schedule-item.is-today {
  border-color:
    color-mix(
      in srgb,
      var(
        --mgm-warning
      )
      50%,
      var(
        --mgm-line
      )
    );
}


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

  height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

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

  border-radius:
    8px;

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

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


.mi-gestion-mis-tareas-schedule-item.is-overdue
.mi-gestion-mis-tareas-schedule-item__icon {
  color:
    var(
      --mgm-danger
    );
}


.mi-gestion-mis-tareas-schedule-item.is-today
.mi-gestion-mis-tareas-schedule-item__icon {
  color:
    var(
      --mgm-warning
    );
}


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

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.mi-gestion-mis-tareas-schedule-item small {
  color:
    var(
      --mgm-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.06em;
}


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

  font-size:
    11px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mi-gestion-mis-tareas-schedule-item__alert,
.mi-gestion-mis-tareas-schedule-item__today {
  width:
    fit-content;

  margin-top:
    2px;

  padding:
    2px
    6px;

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

  border-radius:
    6px;

  font-size:
    8px;

  font-weight:
    800;
}


.mi-gestion-mis-tareas-schedule-item__alert {
  color:
    var(
      --mgm-danger
    );

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


.mi-gestion-mis-tareas-schedule-item__today {
  color:
    var(
      --mgm-warning
    );

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


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

.mi-gestion-mis-tareas-messages {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.mi-gestion-mis-tareas-message {
  min-width:
    0;

  display:
    grid;

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

  gap:
    9px;

  padding:
    9px;

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

  border-radius:
    9px;

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


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


.mi-gestion-mis-tareas-message.is-alert.is-importante {
  border-left-color:
    var(
      --mgm-orange
    );
}


.mi-gestion-mis-tareas-message.is-alert.is-urgente {
  border-left-color:
    var(
      --mgm-danger
    );
}


.mi-gestion-mis-tareas-message__icon {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    8px;

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

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


.mi-gestion-mis-tareas-message.is-alert
.mi-gestion-mis-tareas-message__icon {
  color:
    var(
      --mgm-warning
    );
}


.mi-gestion-mis-tareas-message.is-alert.is-importante
.mi-gestion-mis-tareas-message__icon {
  color:
    var(
      --mgm-orange
    );
}


.mi-gestion-mis-tareas-message.is-alert.is-urgente
.mi-gestion-mis-tareas-message__icon {
  color:
    var(
      --mgm-danger
    );
}


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


.mi-gestion-mis-tareas-message__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;
}


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


.mi-gestion-mis-tareas-message__head small {
  display:
    block;

  color:
    var(
      --mgm-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.05em;
}


.mi-gestion-mis-tareas-message__head strong {
  display:
    block;

  margin-top:
    1px;

  font-size:
    10px;
}


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

  color:
    var(
      --mgm-muted
    );

  font-size:
    8px;
}


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

  font-size:
    10px;

  line-height:
    1.55;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}


.mi-gestion-mis-tareas-message footer {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;
}


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

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0
    6px;

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

  border-radius:
    6px;

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

  color:
    var(
      --mgm-muted
    );

  font-size:
    8px;
}


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

  height:
    10px;
}


/* =========================================================
   COMPLETION
   ========================================================= */

.mi-gestion-mis-tareas-completion {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    13px;

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

  border-radius:
    11px;

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


.mi-gestion-mis-tareas-completion.is-completed {
  border-color:
    color-mix(
      in srgb,
      var(
        --mgm-success
      )
      48%,
      var(
        --mgm-line
      )
    );
}


.mi-gestion-mis-tareas-completion.is-cancelled {
  border-color:
    color-mix(
      in srgb,
      var(
        --mgm-danger
      )
      44%,
      var(
        --mgm-line
      )
    );
}


.mi-gestion-mis-tareas-completion__main {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.mi-gestion-mis-tareas-completion__icon {
  width:
    42px;

  height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

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

  border-radius:
    10px;

  background:
    var(
      --mgm-panel
    );

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


.mi-gestion-mis-tareas-completion.is-completed
.mi-gestion-mis-tareas-completion__icon {
  color:
    var(
      --mgm-success
    );
}


.mi-gestion-mis-tareas-completion.is-cancelled
.mi-gestion-mis-tareas-completion__icon {
  color:
    var(
      --mgm-danger
    );
}


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


.mi-gestion-mis-tareas-completion__content > span {
  display:
    block;

  color:
    var(
      --mgm-muted
    );

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


.mi-gestion-mis-tareas-completion__content h3 {
  margin:
    2px
    0
    0;

  font-size:
    13px;
}


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

  color:
    var(
      --mgm-muted
    );

  font-size:
    9px;

  line-height:
    1.5;
}


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

.mi-gestion-mis-tareas-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-mis-tareas-toast.is-visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(
      0
    );
}


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

  color:
    #15803d;
}


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

  color:
    #b91c1c;
}


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

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

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


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


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

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


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

html[data-theme="dark"]
.mi-gestion-mis-tareas-head,
html[data-theme="dark"]
.mi-gestion-mis-tareas-toolbar,
html[data-theme="dark"]
.mi-gestion-mis-tareas-list-panel,
html[data-theme="dark"]
.mi-gestion-mis-tareas-detail-panel,
html[data-theme="dark"]
.mi-gestion-mis-tareas-personal-status,
html[data-theme="dark"]
.mi-gestion-mis-tareas-info-card,
html[data-theme="dark"]
.mi-gestion-mis-tareas-text-card,
html[data-theme="dark"]
.mi-gestion-mis-tareas-schedule-section,
html[data-theme="dark"]
.mi-gestion-mis-tareas-messages-section,
html[data-theme="dark"]
.mi-gestion-mis-tareas-completion {
  border-color:
    #2a2a2a;
}


html[data-theme="dark"]
.mi-gestion-mis-tareas-request,
html[data-theme="dark"]
.mi-gestion-mis-tareas-info-item,
html[data-theme="dark"]
.mi-gestion-mis-tareas-schedule-item,
html[data-theme="dark"]
.mi-gestion-mis-tareas-message,
html[data-theme="dark"]
.mi-gestion-mis-tareas-search,
html[data-theme="dark"]
.mi-gestion-mis-tareas-toolbar > select,
html[data-theme="dark"]
.mi-gestion-mis-tareas-toolbar > input {
  border-color:
    #222222;
}


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


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


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

  background:
    #050505;

  color:
    #f5f5f5;
}


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

  color:
    #4ade80;
}


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

  color:
    #f87171;
}


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

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


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


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


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

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


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


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

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

    flex-direction:
      column;
  }


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

    justify-content:
      flex-start;
  }


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


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


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


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


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

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


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


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


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


  .mi-gestion-mis-tareas-completion {
    align-items:
      stretch;

    flex-direction:
      column;
  }


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


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

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


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


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


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


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

    flex-direction:
      column;
  }


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

    flex-wrap:
      wrap;
  }


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

    flex-direction:
      column;
  }


  .mi-gestion-mis-tareas-personal-status {
    align-items:
      flex-start;
  }


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


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


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


  .mi-gestion-mis-tareas-completion__main {
    align-items:
      flex-start;
  }
}


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

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

    transition:
      none !important;

    animation-duration:
      0.01ms !important;

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

.mi-gestion-mis-tareas-page {
  --mgm-line:
    #c7ccd2;

  --mgm-line-strong:
    #9da4ad;

  --mgm-text:
    #0d0f12;

  --mgm-muted:
    #454b53;

  --mgm-subtle:
    #666d76;
}

html[data-theme="dark"]
.mi-gestion-mis-tareas-page {
  --mgm-line:
    #343941;

  --mgm-line-strong:
    #555c66;

  --mgm-text:
    #ffffff;

  --mgm-muted:
    #d7dbe0;

  --mgm-subtle:
    #aeb4bc;
}


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

.mi-gestion-mis-tareas-head,
.mi-gestion-mis-tareas-metric,
.mi-gestion-mis-tareas-toolbar,
.mi-gestion-mis-tareas-list-panel,
.mi-gestion-mis-tareas-detail-panel,
.mi-gestion-mis-tareas-request,
.mi-gestion-mis-tareas-personal-status,
.mi-gestion-mis-tareas-info-card,
.mi-gestion-mis-tareas-info-item,
.mi-gestion-mis-tareas-text-card,
.mi-gestion-mis-tareas-schedule-section,
.mi-gestion-mis-tareas-schedule-item,
.mi-gestion-mis-tareas-messages-section,
.mi-gestion-mis-tareas-message,
.mi-gestion-mis-tareas-completion {
  transition:
    none;
}


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

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

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

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

.mi-gestion-mis-tareas-head p,
.mi-gestion-mis-tareas-detail-head p,
.mi-gestion-mis-tareas-personal-status p,
.mi-gestion-mis-tareas-empty p,
.mi-gestion-mis-tareas-detail-empty p,
.mi-gestion-mis-tareas-section-head p,
.mi-gestion-mis-tareas-completion__content p {
  font-weight:
    650;
}

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


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

.mi-gestion-mis-tareas-head {
  border-color:
    var(
      --mgm-line-strong
    );

  border-bottom-width:
    2px;
}

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


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

.mi-gestion-mis-tareas-btn {
  border-color:
    var(
      --mgm-line-strong
    );

  font-weight:
    800;

  transition:
    none;
}


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

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

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

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

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

  font-weight:
    850;
}

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

.mi-gestion-mis-tareas-metric__content > span {
  color:
    var(
      --mgm-muted
    );

  font-weight:
    650;
}


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

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

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

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


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

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


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

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

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

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


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

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

.mi-gestion-mis-tareas-request:not(:last-child) {
  border-bottom-width:
    2px;
}

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

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

  font-weight:
    750;
}

.mi-gestion-mis-tareas-request__meta > span {
  border-color:
    var(
      --mgm-line-strong
    );

  color:
    var(
      --mgm-muted
    );

  font-weight:
    700;
}

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

.mi-gestion-mis-tareas-request.is-completed {
  border-left:
    4px solid
    var(
      --mgm-success
    );
}


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

.mi-gestion-mis-tareas-priority,
.mi-gestion-mis-tareas-status {
  border-color:
    var(
      --mgm-line-strong
    );

  font-weight:
    850;
}


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

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

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

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


/* =========================================================
   ESTADO PERSONAL
   ========================================================= */

.mi-gestion-mis-tareas-personal-status {
  border-color:
    var(
      --mgm-line-strong
    );
}

.mi-gestion-mis-tareas-personal-status__icon {
  border-color:
    var(
      --mgm-line-strong
    );
}

.mi-gestion-mis-tareas-personal-status strong {
  font-weight:
    850;
}


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

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

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

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

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

.mi-gestion-mis-tareas-info-item small {
  color:
    var(
      --mgm-muted
    );

  font-weight:
    750;
}

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


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

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

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

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


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

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


/* =========================================================
   CRONOGRAMA
   ========================================================= */

.mi-gestion-mis-tareas-schedule-section {
  border-color:
    var(
      --mgm-line-strong
    );
}

.mi-gestion-mis-tareas-schedule-item {
  border-color:
    var(
      --mgm-line-strong
    );
}

.mi-gestion-mis-tareas-schedule-item__icon {
  border-color:
    var(
      --mgm-line-strong
    );
}

.mi-gestion-mis-tareas-schedule-item small {
  color:
    var(
      --mgm-muted
    );

  font-weight:
    850;
}

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


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

.mi-gestion-mis-tareas-messages-section {
  border-color:
    var(
      --mgm-line-strong
    );
}

.mi-gestion-mis-tareas-message {
  border-color:
    var(
      --mgm-line-strong
    );
}

.mi-gestion-mis-tareas-message__icon {
  border-color:
    var(
      --mgm-line-strong
    );
}

.mi-gestion-mis-tareas-message__head small {
  color:
    var(
      --mgm-muted
    );

  font-weight:
    850;
}

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

.mi-gestion-mis-tareas-message__head time {
  color:
    var(
      --mgm-muted
    );

  font-weight:
    650;
}

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

.mi-gestion-mis-tareas-message footer span {
  border-color:
    var(
      --mgm-line-strong
    );

  color:
    var(
      --mgm-muted
    );

  font-weight:
    700;
}


/* =========================================================
   CUMPLIMIENTO
   ========================================================= */

.mi-gestion-mis-tareas-completion {
  border-color:
    var(
      --mgm-line-strong
    );
}

.mi-gestion-mis-tareas-completion__icon {
  border-color:
    var(
      --mgm-line-strong
    );
}


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

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

  .mi-gestion-mis-tareas-head {
    gap:
      12px;

    padding:
      14px;
  }

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

  .mi-gestion-mis-tareas-toolbar {
    gap:
      7px;

    padding:
      9px;
  }

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

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

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

    padding:
      10px;
  }
}


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

@media (max-width: 520px) {
  .mi-gestion-mis-tareas-page {
    gap:
      8px;

    overflow-x:
      hidden;
  }

  .mi-gestion-mis-tareas-head {
    gap:
      10px;

    padding:
      11px;

    border-radius:
      12px;
  }

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

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

    height:
      34px;
  }

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

    height:
      16px;
  }

  .mi-gestion-mis-tareas-head h1 {
    font-size:
      20px;

    font-weight:
      900;
  }

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

    font-weight:
      850;
  }

  .mi-gestion-mis-tareas-head p {
    font-size:
      10.5px;

    font-weight:
      650;
  }

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

  .mi-gestion-mis-tareas-btn {
    min-height:
      34px;

    font-size:
      10.5px;

    font-weight:
      800;
  }

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

    gap:
      6px;
  }

  .mi-gestion-mis-tareas-metric {
    min-height:
      78px;

    gap:
      7px;

    padding:
      9px;
  }

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

    height:
      29px;
  }

  .mi-gestion-mis-tareas-metric small {
    font-size:
      8.5px;

    font-weight:
      850;
  }

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

    font-weight:
      900;
  }

  .mi-gestion-mis-tareas-metric__content > span {
    font-size:
      9px;

    font-weight:
      700;
  }

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

    gap:
      6px;

    padding:
      8px;

    border-radius:
      10px;
  }

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

  .mi-gestion-mis-tareas-search input,
  .mi-gestion-mis-tareas-toolbar > select,
  .mi-gestion-mis-tareas-toolbar > input {
    font-size:
      10.5px;

    font-weight:
      700;
  }

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

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

  .mi-gestion-mis-tareas-list-panel__head {
    padding:
      9px;

    border-bottom:
      2px solid
      var(
        --mgm-line-strong
      );
  }

  .mi-gestion-mis-tareas-list-panel__head strong {
    font-size:
      12px;

    font-weight:
      850;
  }

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

    padding:
      6px;
  }

  .mi-gestion-mis-tareas-request {
    gap:
      7px;

    padding:
      9px;

    border-color:
      var(
        --mgm-line-strong
      );
  }

  .mi-gestion-mis-tareas-request__top strong {
    font-size:
      11px;

    font-weight:
      850;
  }

  .mi-gestion-mis-tareas-request__code {
    font-size:
      8.5px;

    font-weight:
      750;
  }

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

  .mi-gestion-mis-tareas-request__meta > span,
  .mi-gestion-mis-tareas-priority,
  .mi-gestion-mis-tareas-status {
    min-height:
      22px;

    font-size:
      8.5px;

    font-weight:
      800;
  }

  .mi-gestion-mis-tareas-detail-head {
    gap:
      9px;

    padding:
      10px;

    border-bottom:
      2px solid
      var(
        --mgm-line-strong
      );
  }

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

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

    height:
      34px;
  }

  .mi-gestion-mis-tareas-detail-head h2 {
    font-size:
      15px;

    font-weight:
      900;
  }

  .mi-gestion-mis-tareas-detail-head__eyebrow {
    font-size:
      8.5px;

    font-weight:
      850;
  }

  .mi-gestion-mis-tareas-detail-head p {
    font-size:
      9px;

    font-weight:
      700;
  }

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

    padding:
      8px;
  }

  .mi-gestion-mis-tareas-personal-status,
  .mi-gestion-mis-tareas-info-card,
  .mi-gestion-mis-tareas-text-card,
  .mi-gestion-mis-tareas-schedule-section,
  .mi-gestion-mis-tareas-messages-section,
  .mi-gestion-mis-tareas-completion {
    padding:
      9px;

    border-color:
      var(
        --mgm-line-strong
      );
  }

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

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

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

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

    height:
      25px;
  }

  .mi-gestion-mis-tareas-info-item small {
    font-size:
      7.5px;

    font-weight:
      800;
  }

  .mi-gestion-mis-tareas-info-item strong {
    font-size:
      9.5px;

    font-weight:
      800;
  }

  .mi-gestion-mis-tareas-section-head {
    margin-bottom:
      8px;

    padding-bottom:
      7px;

    border-bottom:
      2px solid
      var(
        --mgm-line-strong
      );
  }

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

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

  .mi-gestion-mis-tareas-message {
    gap:
      7px;

    padding:
      8px;
  }

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