/** * modal.css — Classes base do sistema de modais Comly * * Nomenclatura: prefixo `cm-` (Comly Modal) * Depende de tokens definidos em tokens.css (--radius-*, --shadow-*, --space-*, etc.) * * Carregar após tokens.css, antes de Alpine inicializar. * * Classes estruturais: * .cm-overlay Backdrop + posicionamento do painel * .cm-panel Painel centralizado (base) * .cm-panel--{sm|md|lg|xl|full} Tamanhos * .cm-panel--bottom-sheet Comportamento mobile de baixo para cima * .cm-panel--fullscreen Tela inteira em mobile * .cm-header Cabeçalho (título + botão fechar) * .cm-title Título do modal * .cm-close Botão fechar padrão * .cm-body Área de conteúdo (scroll interno) * .cm-footer Rodapé com ações * * Classes de estado: * .cm-state-loading Exibe skeleton / spinner, oculta conteúdo * .cm-state-error Exibe bloco de erro * .cm-state-empty Exibe mensagem de vazio * * Botões padrão do ConfirmModal: * .cm-btn Base * .cm-btn--primary Azul * .cm-btn--secondary Cinza outline * .cm-btn--danger Vermelho */ /* ─── SCROLL LOCK ──────────────────────────────────────────────────────────── */ /* * Adicionada ao quando ao menos um modal está aberto. * position: fixed + width: 100% evita o salto de scroll no iOS Safari. * O scroll Y é salvo em modal.js e restaurado ao remover esta classe. */ .cm-body-locked { position: fixed; width: 100%; overflow-y: scroll; /* mantém a largura da scrollbar para evitar CLS */ } /* ─── OVERLAY ──────────────────────────────────────────────────────────────── */ /* * O z-index é controlado via CSS custom property --cm-z, que o * stack manager define em cada instância via el.style.setProperty('--cm-z', z). * Valor padrão 1000: não conflita com modais existentes (z-60 a z-200). */ .cm-overlay { display: flex; /* Alpine x-show remove display:none quando aberto */ position: fixed; inset: 0; z-index: var(--cm-z, 1000); align-items: center; justify-content: center; padding: var(--space-4, 1rem); background: rgba(0, 0, 0, 0.5); /* Transitions são declaradas via x-transition no HTML (Alpine) ou via propriedades inline no ConfirmModal (JS puro). */ } /* Acessibilidade: remove interação quando oculto */ .cm-overlay[style*="display: none"] { pointer-events: none; } /* ─── PAINEL ───────────────────────────────────────────────────────────────── */ .cm-panel { position: relative; background: #fff; border-radius: var(--radius-xl, 0.875rem); box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10)); display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); width: 100%; outline: none; /* foco vai para botão/input, não para o painel */ overflow: hidden; /* garante que border-radius corta o conteúdo */ } /* Tamanhos */ .cm-panel--sm { max-width: 24rem; } /* 384px */ .cm-panel--md { max-width: 32rem; } /* 512px */ .cm-panel--lg { max-width: 48rem; } /* 768px */ .cm-panel--xl { max-width: 64rem; } /* 1024px */ .cm-panel--full { max-width: 100%; height: 100%; max-height: 100dvh; border-radius: 0; /* iOS notch / home indicator (WCAG 2.1 AA — Fase 9 item 9.10). */ /* Em desktop env() retorna 0 — efeito nulo. */ padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); } /* ─── BOTTOM SHEET MOBILE ─────────────────────────────────────────────────── */ /* * Quando a classe .cm-panel--bottom-sheet está no painel, * em telas pequenas o overlay muda para flex-end e o painel * aparece deslizando de baixo para cima. * * O HTML do overlay deve ter a classe .cm-overlay--sheet para habilitar. */ .cm-overlay--sheet { padding: 0; } .cm-overlay--sheet .cm-panel--bottom-sheet { border-radius: var(--radius-xl, 0.875rem) var(--radius-xl, 0.875rem) 0 0; max-height: 92dvh; width: 100%; max-width: 100%; } @media (max-width: 640px) { .cm-overlay { align-items: flex-end; padding: 0; } .cm-overlay:not(.cm-overlay--centered) .cm-panel:not(.cm-panel--full) { border-radius: var(--radius-xl, 0.875rem) var(--radius-xl, 0.875rem) 0 0; max-height: 92dvh; max-width: 100%; } } @media (min-width: 641px) { .cm-overlay { align-items: center; padding: var(--space-4, 1rem); } } /* Fullscreen override (mobile) */ @media (max-width: 640px) { .cm-panel--fullscreen { border-radius: 0 !important; max-height: 100dvh !important; height: 100dvh !important; max-width: 100% !important; } } /* Handle visual de arrasto (bottom-sheet) */ .cm-sheet-handle { width: 2.5rem; height: 0.25rem; background: #d1d5db; border-radius: 9999px; margin: 0.625rem auto 0; flex-shrink: 0; } /* ─── ESTRUTURA INTERNA ────────────────────────────────────────────────────── */ .cm-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 0.75rem); padding: var(--space-4, 1rem) var(--space-6, 1.5rem); border-bottom: 1px solid #f3f4f6; flex-shrink: 0; } .cm-title { font-size: 1rem; font-weight: 600; color: #111827; line-height: var(--line-height-snug, 1.25); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cm-close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-md, 0.5rem); border: none; background: transparent; color: #9ca3af; cursor: pointer; flex-shrink: 0; transition: background var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease; font-size: 1rem; line-height: 1; } .cm-close:hover { background: #f3f4f6; color: #374151; } .cm-close:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .cm-body { flex: 1; overflow-y: auto; padding: var(--space-6, 1.5rem); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .cm-body--no-pad { padding: 0; } .cm-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2, 0.5rem); padding: var(--space-4, 1rem) var(--space-6, 1.5rem); border-top: 1px solid #f3f4f6; flex-shrink: 0; } /* ─── BOTÕES PADRÃO (usados pelo ConfirmModal e shell) ─────────────────────── */ .cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; border-radius: var(--radius-md, 0.5rem); border: 1px solid transparent; cursor: pointer; transition: background var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease, box-shadow var(--duration-fast, 150ms) ease; white-space: nowrap; user-select: none; } .cm-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .cm-btn:disabled { opacity: 0.5; cursor: not-allowed; } .cm-btn--primary { background: #2563eb; color: #fff; border-color: #2563eb; } .cm-btn--primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; } .cm-btn--secondary { background: #fff; color: #374151; border-color: #d1d5db; } .cm-btn--secondary:hover:not(:disabled) { background: #f9fafb; border-color: #9ca3af; } .cm-btn--danger { background: #dc2626; color: #fff; border-color: #dc2626; } .cm-btn--danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; } .cm-btn--ghost { background: transparent; color: #6b7280; border-color: transparent; } .cm-btn--ghost:hover:not(:disabled) { background: #f3f4f6; color: #374151; } /* ─── ESTADOS VISUAIS ──────────────────────────────────────────────────────── */ /* Loading: skeleton */ .cm-state-loading .cm-content { display: none; } .cm-state-loading .cm-skeleton { display: block; } .cm-skeleton { display: none; } /* oculto por padrão */ /* Spinner centralizado */ .cm-spinner { display: flex; align-items: center; justify-content: center; padding: var(--space-8, 2rem); color: #9ca3af; } .cm-spinner-icon { width: 1.75rem; height: 1.75rem; border: 2px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: cm-spin 0.65s linear infinite; flex-shrink: 0; } @keyframes cm-spin { to { transform: rotate(360deg); } } /* Bloco de erro inline */ .cm-error-block { display: flex; align-items: flex-start; gap: var(--space-3, 0.75rem); background: #fef2f2; border: 1px solid #fee2e2; border-radius: var(--radius-lg, 0.75rem); padding: var(--space-4, 1rem); font-size: 0.875rem; color: #991b1b; } .cm-error-icon { color: #ef4444; font-size: 1rem; flex-shrink: 0; margin-top: 1px; } /* Estado vazio */ .cm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3, 0.75rem); padding: var(--space-10, 2.5rem) var(--space-6, 1.5rem); text-align: center; color: #9ca3af; } .cm-empty-icon { font-size: 1.75rem; opacity: 0.5; } .cm-empty-text { font-size: 0.875rem; color: #6b7280; } /* Skeleton bars reutilizáveis */ .cm-skel { height: 0.875rem; background: linear-gradient(90deg, #f3f4f6 25%, #e9ebef 50%, #f3f4f6 75%); background-size: 200% 100%; border-radius: var(--radius-sm, 0.375rem); animation: cm-skel-shimmer 1.4s ease-in-out infinite; } @keyframes cm-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ─── INPUT INTERNO DO CONFIRM/PROMPT ──────────────────────────────────────── */ .cm-confirm-input { display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: #111827; background: #fff; border: 1px solid #d1d5db; border-radius: var(--radius-md, 0.5rem); outline: none; transition: border-color 150ms ease, box-shadow 150ms ease; font-family: inherit; } .cm-confirm-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } .cm-confirm-msg { font-size: 0.875rem; color: #4b5563; line-height: 1.6; margin: 0; } /* ─── CONFIRM OVERLAY (z-9000, pure-JS) ────────────────────────────────────── */ .cm-confirm-overlay { z-index: 9000; /* sempre no topo */ } /* ─── RESPONSIVIDADE DO PAINEL ─────────────────────────────────────────────── */ /* Garantir scroll seguro em iOS com teclado virtual */ @supports (height: 100dvh) { .cm-panel { max-height: calc(100dvh - 2rem); } @media (max-width: 640px) { .cm-panel:not(.cm-panel--full) { max-height: 92dvh; } } } /* ═══════════════════════════════════════════════════════════════════════════ CLASSES LEGADAS — extraídas de produtos/index.html na Fase 2 Compartilhadas entre produtos/index.html e cotacao/analise.html. Serão progressivamente convertidas para cm-* nas Fases 3–5. Escalonamento de z-index do projeto (referência): z-[40..50] — dropdowns, toasts (tokens.css: --z-dropdown, --z-toast) z-[60..200] — modais legados (classes Tailwind inline nas páginas) z-1000+ — sistema cm-* gerenciado (modal.js stack manager) z-9000 — ConfirmModal / PromptModal (sempre no topo) ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Handle de arrasto — bottom-sheet mobile/portrait ──────────────────── */ .modal-handle { display: none; /* oculto por padrão; ativado via media query */ width: 36px; height: 4px; background: #d1d5db; border-radius: 2px; margin: 8px auto 0; flex-shrink: 0; cursor: grab; touch-action: none; user-select: none; } /* ─── Painel bottom-sheet — clipping correto em qualquer viewport ──────── * overflow:hidden faz o flex container respeitar o max-height mesmo quando * filhos flex não têm min-height:0, evitando transbordamento para cima. */ .m-fs { overflow: hidden; } /* Mobile (≤639px): bottom-sheet ocupa tela inteira */ @media (max-width: 639px) { .m-fs { border-radius: 1rem 1rem 0 0 !important; max-width: 100% !important; width: 100% !important; height: auto !important; max-height: 92vh !important; } .modal-handle { display: flex; } /* Tabela de entradas — otimizações mobile */ .modal-entradas-header { padding: 10px 14px !important; } .modal-entradas-header p { font-size: 13px !important; } .modal-entradas-table td { font-size: 11px !important; padding: 7px 8px !important; } .modal-entradas-table th { font-size: 9px !important; padding: 7px 8px !important; } /* Tabela "vindo" — otimizações mobile */ .modal-vindo-header { padding: 10px 14px !important; } .modal-vindo-header p { font-size: 13px !important; } .modal-vindo-table td { font-size: 11px !important; padding: 7px 8px !important; } .modal-vindo-table th { font-size: 9px !important; padding: 7px 8px !important; } /* Tabela "vindo nota" — otimizações mobile */ .modal-vindo-nota-header { padding: 10px 14px !important; } .modal-vindo-nota-header p, .modal-vindo-nota-header div { font-size: 12px !important; } .modal-vindo-nota-table td { font-size: 11px !important; padding: 7px 8px !important; } .modal-vindo-nota-table th { font-size: 9px !important; padding: 7px 8px !important; } /* Cards mobile para conteúdo de modal */ .modal-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; background: #fff; } .modal-card-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; } .modal-card-label { color: #9ca3af; font-weight: 500; } .modal-card-value { color: #374151; font-weight: 500; } } /* Tablet/desktop landscape — max-height seguro com dvh */ @media (min-width: 640px) and (orientation: landscape) { .m-fs { max-height: 86vh; } } @supports (height: 1dvh) { @media (min-width: 640px) and (orientation: landscape) { .m-fs { max-height: 86dvh; } } } /* Portrait tablet — bottom-sheet com ≈24% de espaço visível acima * 76vh/dvh → ~900px num tablet de ~1200px de viewport → ~300px acima */ @media (min-width: 640px) and (orientation: portrait) { .modal-outer { align-items: flex-end !important; padding: 0 !important; } .m-fs { border-radius: 1.25rem 1.25rem 0 0 !important; max-width: 100% !important; width: 100% !important; max-height: 76vh !important; } .modal-handle { display: flex !important; } } @supports (height: 1dvh) { @media (min-width: 640px) and (orientation: portrait) { .m-fs { max-height: 76dvh !important; } } }