@layer pages {
  #sicom_gerencial.app-sicom-planning #sicomPlanningPanel,
  #sicom_gerencial.app-sicom-planning .sicom-planning-layout,
  #sicom_gerencial.app-sicom-planning .sicom-planning-main,
  #sicom_gerencial.app-sicom-planning .sicom-planning-primary-grid,
  #sicom_gerencial.app-sicom-planning .sicom-planning-support {
    display: grid;
    gap: var(--space-4);
    min-inline-size: 0;
  }

  #sicom_gerencial.app-sicom-planning .sicom-planning-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-3);
  }

  #sicom_gerencial.app-sicom-planning .sicom-planning-metric-card {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-block-size: 0;
  }

  #sicom_gerencial.app-sicom-planning .sicom-planning-metric-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  #sicom_gerencial.app-sicom-planning .sicom-planning-metric-card__head [data-lh7-icon] { color: var(--color-accent, #e3bb53); }
  #sicom_gerencial.app-sicom-planning .sicom-planning-metric-card__status { color: var(--color-text-muted, #aebed0); font-size: .78rem; font-weight: 700; }
  #sicom_gerencial.app-sicom-planning .sicom-planning-metric-card small { color: var(--color-text-muted, #aebed0); line-height: 1.4; }
  #sicom_gerencial.app-sicom-planning .sicom-planning-metric-card details > div { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-2); }
  #sicom_gerencial.app-sicom-planning .sicom-planning-metric-card details { inline-size: 100%; margin-block-start: auto; }
  #sicom_gerencial.app-sicom-planning .sicom-planning-metric-card summary { display: block; color: var(--color-text-muted, #aebed0); font-size: .72rem; font-weight: 700; white-space: nowrap; }
  #sicom_gerencial.app-sicom-planning .sicom-planning-progress { overflow: hidden; block-size: .55rem; border-radius: 999px; background: color-mix(in srgb, var(--color-accent, #e3bb53) 18%, transparent); }
  #sicom_gerencial.app-sicom-planning .sicom-planning-progress i { display: block; block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary, #0ea5a6), var(--color-accent, #e3bb53)); }
  #sicom_gerencial.app-sicom-planning .sicom-planning-support-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  #sicom_gerencial.app-sicom-planning .sicom-planning-support-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding-block-end: var(--space-2); border-block-end: 1px solid var(--color-border, #314459); color: var(--color-text-muted, #aebed0); }
  #sicom_gerencial.app-sicom-planning .sicom-planning-support-list strong { color: var(--color-text, #eaf1f7); }

  @media (min-width: 70rem) {
    #sicom_gerencial.app-sicom-planning .sicom-planning-layout { grid-template-columns: minmax(0, 3fr) minmax(18rem, 1fr); align-items: start; }
    #sicom_gerencial.app-sicom-planning .sicom-planning-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #sicom_gerencial.app-sicom-planning .sicom-planning-support { position: sticky; inset-block-start: var(--space-3); }
  }
}