/*
 * ============================================================================
 * LOJEXA UTILITY COMPONENTS — lx-components.css
 * ============================================================================
 *
 * Componentes utilitários reutilizáveis com prefixo lx-*.
 * Dependem exclusivamente de variáveis declaradas em lx-tokens.css.
 * Compatíveis com Bootstrap 5.3 — nunca sobrescrevem classes bs nativas.
 *
 * COMO INCLUIR
 * ------------
 * Carregar APÓS lx-tokens.css e APÓS bootstrap.min.css, ANTES de app.css:
 *
 *   <link rel="stylesheet" href="/assets/css/lx-tokens.css">
 *   <link rel="stylesheet" href="/assets/css/lx-components.css">
 *
 * CATÁLOGO DE COMPONENTES
 * -----------------------
 *   lx-card            — card de superfície padrão
 *   lx-card-icon       — ícone circular dentro de card
 *   lx-badge           — badge semântico (success/warning/danger/info/neutral/primary)
 *   lx-btn             — botão primário standalone independente de Bootstrap
 *   lx-btn--ghost      — variante contorno/ghost
 *   lx-btn--sm / --lg  — tamanhos
 *   lx-empty           — estado vazio genérico
 *   lx-toolbar         — barra de ação horizontal (filtros, botões, busca)
 *   lx-divider         — separador horizontal com rótulo opcional
 *   lx-spinner         — indicador de carregamento acessível
 *   lx-tag             — rótulo inline compacto (taxonomy/filtro)
 *   lx-section-title   — título de seção com ícone-acento
 *   lx-skeleton        — placeholder de carregamento (shimmer)
 *   lx-help-tooltip    — círculo de ajuda "?"
 *   lx-filter-bar      — barra de filtros (wrapper)
 *   lx-status-badge    — badge de status operacional
 *
 * ACESSIBILIDADE
 * --------------
 *   • Todos os elementos interativos herdam :focus-visible de lx-tokens.
 *   • lx-spinner inclui role="status" e aria-label no HTML sugerido.
 *   • lx-empty inclui role="status" por convenção.
 *   • prefers-reduced-motion: animações desativadas quando solicitado.
 *
 * ============================================================================
 */

/* ============================================================================
   1. LX-CARD — card de superfície padrão
   Uso: <div class="lx-card p-3"> ... </div>
   Variantes adicionais: lx-card--flat (sem sombra), lx-card--bordered
   ============================================================================ */

.lx-card {
    background: var(--lx-surface);
    border: 1px solid var(--lx-border);
    border-radius: var(--lx-radius-lg);
    box-shadow: var(--lx-shadow-sm);
    transition: transform var(--lx-transition-normal),
                box-shadow var(--lx-transition-normal);
}

.lx-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--lx-shadow-md);
}

.lx-card--flat {
    box-shadow: none;
}

.lx-card--flat:hover {
    transform: none;
    box-shadow: none;
}

.lx-card--bordered {
    border-color: var(--lx-border-strong);
}

/* Cabeçalho de card */
.lx-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lx-space-2);
    padding: var(--lx-space-3) var(--lx-space-4);
    border-bottom: 1px solid var(--lx-border);
    background: var(--lx-surface-soft);
    border-radius: var(--lx-radius-lg) var(--lx-radius-lg) 0 0;
}

.lx-card-header-title {
    margin: 0;
    font-size: var(--lx-font-xl);
    font-weight: var(--lx-weight-bold);
    color: var(--lx-text-primary);
}

/* Ícone de card */
.lx-card-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lx-radius-md);
    background: var(--lx-primary-soft);
    color: var(--lx-primary);
    font-size: 1.05rem;
}

.lx-card-icon--success { background: var(--lx-success-soft); color: var(--lx-success); }
.lx-card-icon--warning { background: var(--lx-warning-soft); color: var(--lx-warning); }
.lx-card-icon--danger  { background: var(--lx-danger-soft);  color: var(--lx-danger);  }
.lx-card-icon--info    { background: var(--lx-info-soft);    color: var(--lx-info);    }
.lx-card-icon--neutral { background: var(--lx-neutral-soft); color: var(--lx-neutral); }
.lx-card-icon--accent  { background: var(--lx-accent-soft);  color: var(--lx-accent);  }
.lx-card-icon--lg      { width: 48px; height: 48px; flex-basis: 48px; font-size: 1.3rem; }
.lx-card-icon--sm      { width: 28px; height: 28px; flex-basis: 28px; font-size: .85rem; border-radius: var(--lx-radius-sm); }

/* ============================================================================
   2. LX-BADGE — badge semântico
   Uso: <span class="lx-badge lx-badge--success">Aprovado</span>
   ============================================================================ */

.lx-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--lx-space-1);
    padding: 2px 9px;
    border-radius: var(--lx-radius-pill);
    font-size: var(--lx-font-xs);
    font-weight: var(--lx-weight-bold);
    white-space: nowrap;
    letter-spacing: .01em;
    line-height: 1.5;
}

.lx-badge--primary { background: var(--lx-primary-soft); color: var(--lx-primary); }
.lx-badge--success { background: var(--lx-success-soft); color: var(--lx-success); }
.lx-badge--warning { background: var(--lx-warning-soft); color: var(--lx-warning); }
.lx-badge--danger  { background: var(--lx-danger-soft);  color: var(--lx-danger);  }
.lx-badge--info    { background: var(--lx-info-soft);    color: var(--lx-info);    }
.lx-badge--neutral { background: var(--lx-neutral-soft); color: var(--lx-neutral); }
.lx-badge--accent  { background: var(--lx-accent-soft);  color: var(--lx-accent);  }

/* Variante com borda */
.lx-badge--outline-primary { background: transparent; color: var(--lx-primary); border: 1px solid var(--lx-primary); }
.lx-badge--outline-danger  { background: transparent; color: var(--lx-danger);  border: 1px solid var(--lx-danger);  }

/* Ponto de status antes do texto */
.lx-badge::before {
    content: none;
}
.lx-badge--dot::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 6px;
}

/* ============================================================================
   3. LX-BTN — botão standalone (complementa Bootstrap, não substitui)
   Uso: <button class="lx-btn">Ação</button>
        <button class="lx-btn lx-btn--ghost">Cancelar</button>
        <button class="lx-btn lx-btn--sm">Pequeno</button>
   ============================================================================ */

.lx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lx-space-2);
    padding: 8px 16px;
    border-radius: var(--lx-radius-md);
    border: 1px solid transparent;
    background: var(--lx-primary);
    color: var(--lx-text-inverse);
    font-size: var(--lx-font-sm);
    font-weight: var(--lx-weight-semibold);
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--lx-transition-fast),
                box-shadow var(--lx-transition-fast),
                background var(--lx-transition-fast),
                border-color var(--lx-transition-fast);
    box-shadow: 0 2px 8px rgba(7, 87, 216, .14);
}

.lx-btn:hover,
.lx-btn:focus-visible {
    background: var(--lx-primary-hover);
    border-color: var(--lx-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(7, 87, 216, .22);
    color: var(--lx-text-inverse);
    text-decoration: none;
}

.lx-btn:active {
    transform: translateY(0) scale(.985);
    box-shadow: none;
}

.lx-btn:focus-visible {
    outline: 3px solid rgba(7, 87, 216, .3);
    outline-offset: 2px;
}

/* Variante ghost / contorno */
.lx-btn--ghost {
    background: transparent;
    color: var(--lx-primary);
    border-color: rgba(7, 87, 216, .38);
    box-shadow: none;
}

.lx-btn--ghost:hover,
.lx-btn--ghost:focus-visible {
    background: var(--lx-primary-soft);
    border-color: var(--lx-primary);
    color: var(--lx-primary);
    box-shadow: none;
}

/* Variante danger */
.lx-btn--danger {
    background: var(--lx-danger);
    border-color: var(--lx-danger);
    box-shadow: 0 2px 8px rgba(200, 30, 58, .14);
}

.lx-btn--danger:hover {
    background: #a8172f;
    border-color: #a8172f;
    color: var(--lx-text-inverse);
}

/* Variante secundária (cinza neutro) */
.lx-btn--secondary {
    background: var(--lx-neutral-soft);
    color: var(--lx-text-secondary);
    border-color: var(--lx-border);
    box-shadow: none;
}

.lx-btn--secondary:hover {
    background: var(--lx-border);
    color: var(--lx-text-primary);
    border-color: var(--lx-border-strong);
    box-shadow: none;
}

/* Tamanhos */
.lx-btn--sm {
    padding: 5px 11px;
    font-size: var(--lx-font-xs);
    border-radius: var(--lx-radius-sm);
}

.lx-btn--lg {
    padding: 11px 22px;
    font-size: var(--lx-font-md);
    border-radius: var(--lx-radius-lg);
}

/* Estado desabilitado */
.lx-btn:disabled,
.lx-btn[aria-disabled="true"] {
    opacity: .5;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* ============================================================================
   4. LX-TOOLBAR — barra de ação/filtros horizontal
   Uso: <div class="lx-toolbar"> <input...> <button...> </div>
   ============================================================================ */

.lx-toolbar {
    display: flex;
    align-items: center;
    gap: var(--lx-space-2);
    flex-wrap: wrap;
    padding: var(--lx-space-3) var(--lx-space-4);
    background: var(--lx-surface);
    border: 1px solid var(--lx-border);
    border-radius: var(--lx-radius-lg);
    box-shadow: var(--lx-shadow-xs);
}

/* Separador vertical dentro da toolbar */
.lx-toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--lx-border);
    flex: 0 0 1px;
    align-self: center;
}

/* Grupo que empurra itens para a direita */
.lx-toolbar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--lx-space-2);
}

/* ============================================================================
   5. LX-EMPTY — estado vazio genérico
   Uso:
     <div class="lx-empty" role="status">
       <i class="bi bi-inbox"></i>
       <strong>Nenhum resultado</strong>
       <p>Tente outros filtros.</p>
     </div>
   ============================================================================ */

.lx-empty {
    display: grid;
    place-items: center;
    text-align: center;
    gap: var(--lx-space-2);
    padding: var(--lx-space-10) var(--lx-space-4);
    color: var(--lx-text-muted);
}

.lx-empty > i,
.lx-empty > .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--lx-radius-lg);
    background: var(--lx-primary-soft);
    color: var(--lx-primary);
    font-size: 1.4rem;
    animation: lxFloat 3.4s ease-in-out infinite;
}

.lx-empty strong {
    color: var(--lx-text-primary);
    font-size: var(--lx-font-md);
    font-weight: var(--lx-weight-bold);
}

.lx-empty p {
    margin: 0;
    max-width: 480px;
    font-size: var(--lx-font-base);
}

/* Variante compacta (dentro de tabela/painel pequeno) */
.lx-empty--sm {
    padding: var(--lx-space-5) var(--lx-space-4);
}

.lx-empty--sm > i,
.lx-empty--sm > .bi {
    width: 32px;
    height: 32px;
    font-size: 1rem;
}

/* ============================================================================
   6. LX-DIVIDER — separador horizontal com rótulo opcional
   Uso: <div class="lx-divider">ou</div>
        <div class="lx-divider lx-divider--strong"></div>
   ============================================================================ */

.lx-divider {
    display: flex;
    align-items: center;
    gap: var(--lx-space-3);
    color: var(--lx-text-muted);
    font-size: var(--lx-font-xs);
    font-weight: var(--lx-weight-medium);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: var(--lx-space-4) 0;
}

.lx-divider::before,
.lx-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--lx-border);
}

.lx-divider--strong::before,
.lx-divider--strong::after {
    background: var(--lx-border-strong);
}

/* Divider sem rótulo: linha simples */
.lx-divider:empty {
    margin: var(--lx-space-3) 0;
}

.lx-divider:empty::after {
    flex: 1;
}

/* ============================================================================
   7. LX-SPINNER — indicador de carregamento acessível
   Uso:
     <span class="lx-spinner" role="status" aria-label="Carregando..."></span>
   Variantes de tamanho: lx-spinner--sm, lx-spinner--lg
   ============================================================================ */

.lx-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--lx-border-strong);
    border-top-color: var(--lx-primary);
    border-radius: 50%;
    animation: lxSpin .7s linear infinite;
    flex-shrink: 0;
}

.lx-spinner--sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.lx-spinner--lg {
    width: 30px;
    height: 30px;
    border-width: 3px;
}

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

/* ============================================================================
   8. LX-TAG — rótulo inline compacto (taxonomy / filtro / keyword)
   Uso: <span class="lx-tag">Shopee</span>
        <span class="lx-tag lx-tag--removable">Shopee <button aria-label="Remover">×</button></span>
   ============================================================================ */

.lx-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--lx-space-1);
    padding: 2px 8px;
    border-radius: var(--lx-radius-pill);
    background: var(--lx-neutral-soft);
    color: var(--lx-text-secondary);
    font-size: var(--lx-font-xs);
    font-weight: var(--lx-weight-medium);
    white-space: nowrap;
    border: 1px solid var(--lx-border);
    transition: background var(--lx-transition-fast),
                border-color var(--lx-transition-fast);
}

/* Botão de remoção dentro do tag */
.lx-tag button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 50%;
    line-height: 1;
    font-size: .85em;
    opacity: .65;
    transition: opacity var(--lx-transition-fast), background var(--lx-transition-fast);
}

.lx-tag button:hover { opacity: 1; background: var(--lx-border-strong); }

/* Variantes coloridas */
.lx-tag--primary { background: var(--lx-primary-soft); color: var(--lx-primary); border-color: rgba(7, 87, 216, .2); }
.lx-tag--success { background: var(--lx-success-soft); color: var(--lx-success); border-color: rgba(17, 129, 61, .2); }
.lx-tag--warning { background: var(--lx-warning-soft); color: var(--lx-warning); border-color: rgba(180, 83, 9, .2);  }
.lx-tag--danger  { background: var(--lx-danger-soft);  color: var(--lx-danger);  border-color: rgba(200, 30, 58, .2); }

/* ============================================================================
   9. LX-SECTION-TITLE — título de seção com ícone-acento
   Uso:
     <h2 class="lx-section-title">
       <i class="bi bi-box-seam"></i> Estoque
     </h2>
   ============================================================================ */

.lx-section-title {
    display: flex;
    align-items: center;
    gap: var(--lx-space-2);
    margin: 0 0 var(--lx-space-4);
    color: var(--lx-text-primary);
    font-size: var(--lx-font-xl);
    font-weight: var(--lx-weight-bold);
}

.lx-section-title > i,
.lx-section-title > .bi {
    color: var(--lx-primary);
    font-size: 1.1em;
}

/* Variante compacta: usada em subsections */
.lx-section-title--sm {
    font-size: var(--lx-font-lg);
    font-weight: var(--lx-weight-semibold);
    margin-bottom: var(--lx-space-3);
}

/* ============================================================================
   10. LX-SKELETON — placeholder shimmer de carregamento
   Uso: <div class="lx-skeleton" style="height: 18px; width: 60%;"></div>
        <div class="lx-skeleton lx-skeleton--circle" style="width: 38px; height: 38px;"></div>
   ============================================================================ */

.lx-skeleton {
    position: relative;
    overflow: hidden;
    background: #eef2f7;
    border-radius: var(--lx-radius-sm);
}

.lx-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .64),
        transparent
    );
    animation: lxSkeletonShimmer 1.4s infinite;
}

.lx-skeleton--circle {
    border-radius: 50%;
}

.lx-skeleton--text {
    height: 14px;
    margin-bottom: var(--lx-space-2);
}

@keyframes lxSkeletonShimmer {
    to { transform: translateX(100%); }
}

/* ============================================================================
   11. LX-HELP-TOOLTIP — círculo de ajuda contextual "?"
   Uso:
     <span class="lx-help-tooltip" data-bs-toggle="tooltip" title="Explicação">?</span>
   ============================================================================ */

.lx-help-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--lx-primary);
    background: var(--lx-primary-soft);
    font-size: var(--lx-font-xs);
    font-weight: var(--lx-weight-bold);
    cursor: help;
    line-height: 1;
    transition: background var(--lx-transition-fast),
                color var(--lx-transition-fast);
}

.lx-help-tooltip:hover {
    background: var(--lx-primary);
    color: var(--lx-text-inverse);
}

/* ============================================================================
   12. LX-FILTER-BAR — barra de filtros
   (alias semântico do lx-toolbar; comportamento idêntico,
    nome diferente por legibilidade em contexto de listagens)
   Uso: <div class="lx-filter-bar"> ... </div>
   ============================================================================ */

.lx-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--lx-space-2);
    flex-wrap: wrap;
    padding: var(--lx-space-3) var(--lx-space-4);
    background: var(--lx-surface);
    border: 1px solid var(--lx-border);
    border-radius: var(--lx-radius-lg);
    box-shadow: var(--lx-shadow-xs);
}

/* ============================================================================
   13. LX-STATUS-BADGE — badge de status operacional (NF-e, pedido, etc.)
   Uso: <span class="lx-status-badge lx-status-badge--success">Emitida</span>
   ============================================================================ */

.lx-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: var(--lx-radius-pill);
    font-size: var(--lx-font-xs);
    font-weight: var(--lx-weight-bold);
    white-space: nowrap;
    letter-spacing: .01em;
}

/* Variantes BEM (novas) */
.lx-status-badge--primary { background: var(--lx-primary-soft); color: var(--lx-primary); }
.lx-status-badge--success { background: var(--lx-success-soft); color: var(--lx-success); }
.lx-status-badge--warning { background: var(--lx-warning-soft); color: var(--lx-warning); }
.lx-status-badge--danger  { background: var(--lx-danger-soft);  color: var(--lx-danger);  }
.lx-status-badge--info    { background: var(--lx-info-soft);    color: var(--lx-info);    }
.lx-status-badge--neutral { background: var(--lx-neutral-soft); color: var(--lx-neutral); }

/* Aliases de retrocompat (app.css usa: .lx-status-badge.success, sem BEM) */
.lx-status-badge.success { background: var(--lx-success-soft); color: var(--lx-success); }
.lx-status-badge.warning { background: var(--lx-warning-soft); color: var(--lx-warning); }
.lx-status-badge.danger  { background: var(--lx-danger-soft);  color: var(--lx-danger);  }
.lx-status-badge.info    { background: var(--lx-info-soft);    color: var(--lx-info);    }
.lx-status-badge.neutral { background: var(--lx-neutral-soft); color: var(--lx-neutral); }

/* ============================================================================
   14. KEYFRAMES COMPARTILHADOS
   (Referenciados pelos componentes acima; centralizados para evitar duplicação)
   ============================================================================ */

@keyframes lxFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}

@keyframes lxPulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.06); opacity: .85; }
}

/* ============================================================================
   15. REDUÇÃO DE MOVIMENTO — acessibilidade WCAG 2.4.4
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .lx-spinner,
    .lx-skeleton::after,
    .lx-empty > i,
    .lx-empty > .bi {
        animation: none !important;
    }

    .lx-btn,
    .lx-card,
    .lx-tag,
    .lx-help-tooltip {
        transition: none !important;
    }
}

/* ============================================================================
   16. UTILITÁRIOS RESPONSIVOS — QA visual mobile/tablet (APPEND)
   ============================================================================
   Adicionados pela auditoria de QA responsivo (card 39bcfa00-…).
   Utilitários genéricos, opt-in e seguros — NÃO sobrescrevem classes Bootstrap
   nem nada acima neste arquivo. Baseiam-se nos tokens lx-* e nos breakpoints
   Bootstrap 5.3 (sm 576px · md 768px · lg 992px).

   Disponibilizados aqui; a aplicação nas views é responsabilidade do agente de
   frontend. Ver docs/qa/responsive-audit.md para onde usar cada um.

   CATÁLOGO
   --------
     lx-table-responsive  — wrapper de tabela com scroll horizontal (alias seguro)
     lx-scroll-x          — faixa com scroll horizontal genérico
     lx-stack-sm/-md      — empilha filhos em coluna abaixo do breakpoint
     lx-toolbar-responsive— toolbar que empilha e estica filhos no mobile
     lx-truncate/-2       — truncamento de 1 ou 2 linhas com reticências
     lx-touch             — alvo de toque mínimo 44×44px no mobile
     lx-hide-sm/lx-show-sm— visibilidade condicional ≤576px
     lx-grid-auto         — grid auto-fit responsivo sem media query manual
     lx-full-sm           — largura total no mobile (ex.: botão de submit)
   ============================================================================ */

/* 16.1 — Tabelas: wrapper com scroll horizontal seguro.
   Alias semântico de .table-responsive do Bootstrap; use em listagens novas
   quando quiser garantir o comportamento independentemente de Bootstrap. */
.lx-table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lx-table-responsive > .table,
.lx-table-responsive > table {
    margin-bottom: 0;
}

/* 16.2 — Faixa com scroll horizontal genérico (KPIs, chips, abas largas).
   Esconde a barra de rolagem mas mantém o gesto de arraste/scroll. */
.lx-scroll-x {
    display: flex;
    gap: var(--lx-space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.lx-scroll-x > * {
    flex: 0 0 auto;
}

/* 16.3 — Empilhar filhos em coluna abaixo do breakpoint.
   Acima do breakpoint mantém o layout horizontal natural (não força nada). */
.lx-stack-sm,
.lx-stack-md {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lx-space-2);
}

@media (max-width: 575.98px) {
    .lx-stack-sm {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 767.98px) {
    .lx-stack-md {
        flex-direction: column;
        align-items: stretch;
    }
}

/* 16.4 — Toolbar responsiva: horizontal no desktop, empilhada no mobile.
   Complementa .lx-toolbar; use quando os controles precisarem ocupar 100%. */
.lx-toolbar-responsive {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lx-space-2);
}

@media (max-width: 575.98px) {
    .lx-toolbar-responsive {
        flex-direction: column;
        align-items: stretch;
    }

    .lx-toolbar-responsive > * {
        width: 100%;
    }
}

/* 16.5 — Truncamento de texto com reticências (1 linha). */
.lx-truncate {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Truncamento em 2 linhas (clamp). */
.lx-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 16.6 — Alvo de toque mínimo 44×44px (WCAG 2.5.5 / 2.5.8) no mobile.
   Aplicar em botões de ação densos dentro de linhas de tabela. */
@media (max-width: 767.98px) {
    .lx-touch {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* 16.7 — Visibilidade condicional no mobile (≤576px). */
@media (max-width: 575.98px) {
    .lx-hide-sm { display: none !important; }
}

@media (min-width: 576px) {
    .lx-show-sm { display: none !important; }
}

/* 16.8 — Grid auto-fit responsivo sem media query manual.
   Colunas com largura mínima de 220px que se reflowam sozinhas.
   Ajuste a mínima via --lx-grid-min se necessário. */
.lx-grid-auto {
    display: grid;
    gap: var(--lx-space-3);
    grid-template-columns: repeat(auto-fit, minmax(var(--lx-grid-min, 220px), 1fr));
}

/* 16.9 — Largura total no mobile (ex.: botão de submit empilhado). */
@media (max-width: 575.98px) {
    .lx-full-sm {
        width: 100% !important;
        display: block;
    }
}