/* ============================================================================ * ec-table-density — Modo compacto da tabela * ---------------------------------------------------------------------------- * Story 4.10 / EPIC-004 * * Permite ao operador alternar a densidade visual das tabelas entre * "confortável" (default) e "compacta". A preferência é persistida em * localStorage e aplicada via classe no . * * Modos: * .ec-density--comfortable — padding 8px 12px nas células (~15 linhas) * .ec-density--compact — padding 6px 12px nas células (~25 linhas) * * Aplicação automática: o JS (table-density.js) lê localStorage e * adiciona a classe ao antes do primeiro paint. * ========================================================================= */ /* Comfortable (padrão) */ body.ec-density--comfortable .table > :not(caption) > * > * { padding: var(--ec-space-2) var(--ec-space-3); font-size: 14px; } /* Compacta */ body.ec-density--compact .table > :not(caption) > * > * { padding: 6px var(--ec-space-3); font-size: 13px; line-height: 1.4; } body.ec-density--compact .table th { font-size: 10px; } body.ec-density--compact .form-control, body.ec-density--compact .form-select { font-size: 13px; padding: var(--ec-space-1) var(--ec-space-2); min-height: 32px; } body.ec-density--compact .ec-badge-status { font-size: 10px; padding: 2px 8px; } /* Toggle UI */ .ec-density-toggle { display: inline-flex; align-items: center; gap: var(--ec-space-1); background: var(--ec-gray-50); border: 0.5px solid var(--ec-gray-100); border-radius: var(--ec-radius-pill); padding: 2px; font-family: var(--ec-font-sans); } .ec-density-toggle__btn { background: transparent; border: none; font-size: 11px; font-weight: 500; color: var(--ec-gray-600); padding: 4px 12px; border-radius: var(--ec-radius-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .ec-density-toggle__btn[aria-pressed="true"] { background: var(--ec-white); color: var(--ec-black); box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06); } .ec-density-toggle__btn:focus-visible { outline: 2px solid var(--ec-yellow); outline-offset: 2px; } @media (max-width: 575px) { .ec-density-toggle__btn { font-size: 10px; padding: 4px 8px; } }