/* ============================================================================ onda-12-backup.css , Aba "Backup" (admin ยท cap backup.manage) ---------------------------------------------------------------------------- Camada minima sobre a Onda 8 (editorial-luxo). Reusa tokens semanticos (--color-accent, --bg-surface, --text-*, --border-*, --radius-*) e classes ja existentes (.card.card-7d, .table, .btn, .empty-state, .page-header). Aqui so o layout do cartao-hero de gerar backup + ajustes de linha da lista. Carregado por ultimo no pra ganhar especificidade de ordem. ============================================================================ */ /* ---- Cartao hero: gerar backup agora -------------------------------------- */ .bkp-hero { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.5rem; margin-bottom: 1.75rem; } .bkp-hero__icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-md, 6px); color: var(--color-accent); background: var(--color-accent-10, rgba(196, 154, 108, 0.10)); border: 1px solid var(--color-accent-20, rgba(196, 154, 108, 0.20)); } .bkp-hero__icon svg { width: 26px; height: 26px; } .bkp-hero__body { flex: 1 1 auto; min-width: 0; } .bkp-hero__title { margin: 0 0 0.35rem; font-size: 1.0625rem; font-weight: 600; color: var(--text-primary); line-height: 1.25; } .bkp-hero__text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-secondary); max-width: 56ch; } .bkp-hero__action { flex: 0 0 auto; align-self: center; } /* ---- Cabecalho da lista --------------------------------------------------- */ .bkp-list-head { align-items: center; } /* Nome do arquivo discreto sob a data, na celula. */ .bkp-row__name { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; word-break: break-all; } /* Botao "Atualizar" e os "Baixar" ficam compactos sem perder touch target. */ .bkp-hero .btn, .bkp-list-head .btn { display: inline-flex; align-items: center; gap: 0.4rem; } /* ---- Foco visivel (a11y) -------------------------------------------------- */ .bkp-hero .btn:focus-visible, .bkp-list-head .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ---- Responsivo ----------------------------------------------------------- */ @media (max-width: 640px) { .bkp-hero { flex-direction: column; align-items: stretch; gap: 1rem; } .bkp-hero__action { align-self: stretch; } .bkp-hero__action .btn { width: 100%; justify-content: center; } }