/* * casa.css — design system do Casa Logiccos (frontend web). * * Regras do projeto: nenhuma cor hex fora deste bloco de variáveis; tema claro/escuro * via prefers-color-scheme + toggle manual persistido (data-tema no ); responsivo; * foco sempre visível; contraste mínimo AA. Zero dependência externa. */ /* ===== Reset mínimo ===== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; } /* ===== Paleta — tema claro (padrão) ===== */ :root { color-scheme: light; --cor-fundo: #f3f4f7; --cor-fundo-alt: #e8eaef; --cor-superficie: #ffffff; --cor-superficie-hover: #f6f7f9; --cor-borda: #dde1e8; --cor-borda-forte: #c3c9d4; --cor-texto: #171a21; --cor-texto-secundario: #5b6270; --cor-texto-fraco: #8890a0; --cor-texto-sobre-primaria: #ffffff; --cor-primaria: #2f6feb; --cor-primaria-hover: #2559c4; --cor-primaria-fraca: #e7effd; --cor-sucesso: #157a4a; --cor-sucesso-fraca: #e2f5ec; --cor-perigo: #c22a1f; --cor-perigo-fraca: #fbeae8; --cor-aviso: #915600; --cor-aviso-fraca: #fdf0d8; --cor-info: #2f6feb; --cor-info-fraca: #e7effd; --cor-online: #157a4a; --cor-offline: #7b8291; --cor-foco: #2f6feb; --cor-overlay: rgba(15, 17, 23, 0.45); --sombra-1: 0 1px 2px rgba(20, 22, 30, 0.07); --sombra-2: 0 4px 16px rgba(20, 22, 30, 0.12); --raio-sm: 6px; --raio-md: 12px; --raio-lg: 18px; --raio-pill: 999px; --espaco-1: 4px; --espaco-2: 8px; --espaco-3: 12px; --espaco-4: 16px; --espaco-5: 24px; --espaco-6: 32px; --espaco-7: 48px; --fonte: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --largura-conteudo: 1180px; } /* ===== Tema escuro — automático pelo sistema ===== */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; --cor-fundo: #14161b; --cor-fundo-alt: #1b1e25; --cor-superficie: #1e2129; --cor-superficie-hover: #262a33; --cor-borda: #333947; --cor-borda-forte: #454c5c; --cor-texto: #edeef2; --cor-texto-secundario: #a8afbf; --cor-texto-fraco: #757c8c; --cor-texto-sobre-primaria: #ffffff; --cor-primaria: #5a90f2; --cor-primaria-hover: #79a4f5; --cor-primaria-fraca: #1e2c4a; --cor-sucesso: #4cbf8b; --cor-sucesso-fraca: #17332a; --cor-perigo: #f0685c; --cor-perigo-fraca: #3a2020; --cor-aviso: #e0ac4a; --cor-aviso-fraca: #3a2e14; --cor-info: #5a90f2; --cor-info-fraca: #1e2c4a; --cor-online: #4cbf8b; --cor-offline: #8991a3; --cor-foco: #79a4f5; --cor-overlay: rgba(0, 0, 0, 0.6); --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.35); --sombra-2: 0 8px 24px rgba(0, 0, 0, 0.45); } } /* ===== Tema escuro — forçado manualmente (toggle) ===== */ :root[data-tema="escuro"] { color-scheme: dark; --cor-fundo: #14161b; --cor-fundo-alt: #1b1e25; --cor-superficie: #1e2129; --cor-superficie-hover: #262a33; --cor-borda: #333947; --cor-borda-forte: #454c5c; --cor-texto: #edeef2; --cor-texto-secundario: #a8afbf; --cor-texto-fraco: #757c8c; --cor-texto-sobre-primaria: #ffffff; --cor-primaria: #5a90f2; --cor-primaria-hover: #79a4f5; --cor-primaria-fraca: #1e2c4a; --cor-sucesso: #4cbf8b; --cor-sucesso-fraca: #17332a; --cor-perigo: #f0685c; --cor-perigo-fraca: #3a2020; --cor-aviso: #e0ac4a; --cor-aviso-fraca: #3a2e14; --cor-info: #5a90f2; --cor-info-fraca: #1e2c4a; --cor-online: #4cbf8b; --cor-offline: #8991a3; --cor-foco: #79a4f5; --cor-overlay: rgba(0, 0, 0, 0.6); --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.35); --sombra-2: 0 8px 24px rgba(0, 0, 0, 0.45); } /* ===== Base ===== */ body { background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; } :focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; border-radius: var(--raio-sm); } /* elimina outline só quando o próprio elemento já desenha um anel de foco custom */ .sem-outline-proprio:focus-visible { outline-offset: -2px; } /* ===== Utilitários ===== */ .somente-leitor-de-tela { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .oculto { display: none !important; } .pular-para-conteudo { position: absolute; left: var(--espaco-3); top: -100px; background: var(--cor-superficie); color: var(--cor-texto); padding: var(--espaco-2) var(--espaco-4); border-radius: var(--raio-sm); box-shadow: var(--sombra-2); z-index: 1000; transition: top 0.15s ease; } .pular-para-conteudo:focus { top: var(--espaco-3); } /* ===== Layout geral ===== */ .pagina { min-height: 100vh; display: flex; flex-direction: column; } .conteudo { flex: 1; width: 100%; max-width: var(--largura-conteudo); margin: 0 auto; padding: var(--espaco-5) var(--espaco-4) var(--espaco-7); } .conteudo-estreito { max-width: 480px; } .cabecalho-titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4); flex-wrap: wrap; margin-bottom: var(--espaco-5); } .cabecalho-titulo h1 { font-size: 1.5rem; font-weight: 700; } .cabecalho-titulo p { color: var(--cor-texto-secundario); margin-top: var(--espaco-1); } /* ===== Cabeçalho / navegação (montado por componentes.js) ===== */ .app-cabecalho { position: sticky; top: 0; z-index: 50; background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); } .app-cabecalho__barra { max-width: var(--largura-conteudo); margin: 0 auto; padding: var(--espaco-3) var(--espaco-4); display: flex; align-items: center; gap: var(--espaco-4); } .app-cabecalho__marca { display: flex; align-items: center; gap: var(--espaco-2); font-weight: 700; font-size: 1.05rem; white-space: nowrap; text-decoration: none; color: var(--cor-texto); } .app-cabecalho__marca .icone { color: var(--cor-primaria); } .app-cabecalho__nav { display: flex; gap: var(--espaco-1); flex: 1; flex-wrap: wrap; } .app-cabecalho__link { display: inline-flex; align-items: center; gap: var(--espaco-2); padding: var(--espaco-2) var(--espaco-3); border-radius: var(--raio-sm); color: var(--cor-texto-secundario); text-decoration: none; font-size: 0.92rem; font-weight: 500; white-space: nowrap; } .app-cabecalho__link:hover { background: var(--cor-superficie-hover); color: var(--cor-texto); } .app-cabecalho__link[aria-current="page"] { background: var(--cor-primaria-fraca); color: var(--cor-primaria); } .app-cabecalho__acoes { display: flex; align-items: center; gap: var(--espaco-2); } .app-cabecalho__conexao { display: inline-flex; align-items: center; gap: var(--espaco-2); padding: var(--espaco-1) var(--espaco-3); border-radius: var(--raio-pill); font-size: 0.82rem; font-weight: 600; background: var(--cor-sucesso-fraca); color: var(--cor-sucesso); white-space: nowrap; } .app-cabecalho__conexao[data-conectado="false"] { background: var(--cor-perigo-fraca); color: var(--cor-perigo); } .app-cabecalho__ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .app-cabecalho__botao-icone { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--raio-sm); border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--cor-texto-secundario); } .app-cabecalho__botao-icone:hover { background: var(--cor-superficie-hover); color: var(--cor-texto); } .app-cabecalho__usuario { display: flex; align-items: center; gap: var(--espaco-2); padding-left: var(--espaco-2); border-left: 1px solid var(--cor-borda); font-size: 0.85rem; } .app-cabecalho__usuario-nome { font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-cabecalho__hamburguer { display: none; } @media (max-width: 880px) { .app-cabecalho__nav { display: none; order: 10; width: 100%; flex-direction: column; gap: 2px; padding-top: var(--espaco-2); border-top: 1px solid var(--cor-borda); margin-top: var(--espaco-2); } .app-cabecalho__nav.esta-aberto { display: flex; } .app-cabecalho__barra { flex-wrap: wrap; } .app-cabecalho__hamburguer { display: inline-flex; } .app-cabecalho__usuario-nome { display: none; } } /* ===== Aviso de conexão perdida (offline first) ===== */ .aviso-offline { display: flex; align-items: center; gap: var(--espaco-3); background: var(--cor-aviso-fraca); color: var(--cor-aviso); border: 1px solid var(--cor-aviso); border-radius: var(--raio-md); padding: var(--espaco-3) var(--espaco-4); margin-bottom: var(--espaco-4); font-size: 0.9rem; } .aviso-offline .icone { flex-shrink: 0; } /* ===== Botões ===== */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2); padding: var(--espaco-2) var(--espaco-4); border-radius: var(--raio-sm); border: 1px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto); font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease; } .botao:hover { background: var(--cor-superficie-hover); } .botao:active { transform: translateY(1px); } .botao:disabled, .botao[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; } .botao--primaria { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-texto-sobre-primaria); } .botao--primaria:hover { background: var(--cor-primaria-hover); border-color: var(--cor-primaria-hover); } .botao--perigo { background: var(--cor-perigo-fraca); border-color: var(--cor-perigo); color: var(--cor-perigo); } .botao--perigo:hover { background: var(--cor-perigo); color: #fff; } .botao--fantasma { background: transparent; border-color: transparent; } .botao--fantasma:hover { background: var(--cor-superficie-hover); } .botao--pequeno { padding: var(--espaco-1) var(--espaco-3); font-size: 0.82rem; } .botao--bloco { width: 100%; } .botao--somente-icone { padding: var(--espaco-2); } /* ===== Cartões ===== */ .cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); padding: var(--espaco-4); } .grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--espaco-4); } .grade-cartoes--largo { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .secao { margin-bottom: var(--espaco-6); } .secao__titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); margin-bottom: var(--espaco-3); } .secao__titulo h2 { font-size: 1.05rem; font-weight: 700; } /* ===== Cartão de cômodo (dashboard) ===== */ .cartao-comodo { display: flex; flex-direction: column; gap: var(--espaco-3); } .cartao-comodo__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-2); } .cartao-comodo__nome { display: flex; align-items: center; gap: var(--espaco-2); font-weight: 700; } .cartao-comodo__nome .icone { color: var(--cor-primaria); } .cartao-comodo__contagem { color: var(--cor-texto-fraco); font-size: 0.8rem; } /* ===== Cartão de dispositivo ===== */ .cartao-dispositivo { display: flex; align-items: center; gap: var(--espaco-3); padding: var(--espaco-3); border-radius: var(--raio-md); border: 1px solid var(--cor-borda); background: var(--cor-fundo-alt); } .cartao-dispositivo__icone { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--raio-md); background: var(--cor-primaria-fraca); color: var(--cor-primaria); flex-shrink: 0; } .cartao-dispositivo[data-ligado="true"] .cartao-dispositivo__icone { background: var(--cor-primaria); color: var(--cor-texto-sobre-primaria); } .cartao-dispositivo__corpo { flex: 1; min-width: 0; } .cartao-dispositivo__nome { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cartao-dispositivo__meta { display: flex; align-items: center; gap: var(--espaco-2); font-size: 0.78rem; color: var(--cor-texto-fraco); margin-top: 2px; } .cartao-dispositivo[data-online="false"] { opacity: 0.72; } /* ===== Indicador online/offline ===== */ .indicador-status { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600; color: var(--cor-online); } .indicador-status[data-online="false"] { color: var(--cor-offline); } .indicador-status__ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ===== Interruptor (toggle) ===== */ .interruptor { position: relative; display: inline-flex; align-items: center; width: 46px; height: 26px; flex-shrink: 0; } .interruptor input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .interruptor__trilho { position: absolute; inset: 0; background: var(--cor-borda-forte); border-radius: var(--raio-pill); transition: background 0.15s ease; pointer-events: none; } .interruptor__trilho::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-1); transition: transform 0.15s ease; } .interruptor input:checked + .interruptor__trilho { background: var(--cor-primaria); } .interruptor input:checked + .interruptor__trilho::before { transform: translateX(20px); } .interruptor input:focus-visible + .interruptor__trilho { outline: 3px solid var(--cor-foco); outline-offset: 2px; } .interruptor input:disabled + .interruptor__trilho { opacity: 0.5; cursor: not-allowed; } /* ===== Badges / selos ===== */ .selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--raio-pill); font-size: 0.75rem; font-weight: 600; background: var(--cor-fundo-alt); color: var(--cor-texto-secundario); } .selo--sucesso { background: var(--cor-sucesso-fraca); color: var(--cor-sucesso); } .selo--perigo { background: var(--cor-perigo-fraca); color: var(--cor-perigo); } .selo--aviso { background: var(--cor-aviso-fraca); color: var(--cor-aviso); } .selo--info { background: var(--cor-info-fraca); color: var(--cor-info); } /* ===== Formulários ===== */ .campo { display: flex; flex-direction: column; gap: var(--espaco-1); margin-bottom: var(--espaco-4); } .campo label { font-size: 0.85rem; font-weight: 600; color: var(--cor-texto-secundario); } .campo .dica { font-size: 0.78rem; color: var(--cor-texto-fraco); } .campo .erro-campo { font-size: 0.8rem; color: var(--cor-perigo); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="time"], input[type="date"], select, textarea { width: 100%; padding: var(--espaco-2) var(--espaco-3); border-radius: var(--raio-sm); border: 1px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 1px; } textarea { resize: vertical; min-height: 80px; } input[type="range"] { width: 100%; accent-color: var(--cor-primaria); } input[type="color"] { width: 48px; height: 36px; padding: 2px; border-radius: var(--raio-sm); border: 1px solid var(--cor-borda); background: var(--cor-superficie); } .linha-campos { display: flex; gap: var(--espaco-3); flex-wrap: wrap; } .linha-campos > .campo { flex: 1; min-width: 160px; } /* ===== Tabela ===== */ .tabela-wrapper { overflow-x: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio-md); background: var(--cor-superficie); } table.tabela { width: 100%; border-collapse: collapse; font-size: 0.88rem; white-space: nowrap; } .tabela th, .tabela td { text-align: left; padding: var(--espaco-3); border-bottom: 1px solid var(--cor-borda); } .tabela th { color: var(--cor-texto-secundario); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; background: var(--cor-fundo-alt); } .tabela tbody tr { cursor: pointer; } .tabela tbody tr:hover { background: var(--cor-superficie-hover); } .tabela tbody tr[aria-selected="true"] { background: var(--cor-primaria-fraca); } .tabela tbody tr:last-child td { border-bottom: none; } /* ===== Layout com painel lateral (dispositivos.html) ===== */ .layout-com-painel { display: grid; grid-template-columns: 1fr; gap: var(--espaco-4); } @media (min-width: 960px) { .layout-com-painel[data-painel-aberto="true"] { grid-template-columns: 1.4fr 1fr; align-items: start; } } .painel-lateral { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); padding: var(--espaco-4); position: sticky; top: 76px; } .painel-lateral__cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espaco-2); margin-bottom: var(--espaco-4); } /* ===== Filtros ===== */ .barra-filtros { display: flex; gap: var(--espaco-2); flex-wrap: wrap; margin-bottom: var(--espaco-4); align-items: center; } .barra-filtros select, .barra-filtros input { width: auto; min-width: 140px; } .barra-filtros input[type="search"] { flex: 1; min-width: 180px; } /* ===== Modal ===== */ .camada-modal { position: fixed; inset: 0; background: var(--cor-overlay); display: flex; align-items: center; justify-content: center; padding: var(--espaco-4); z-index: 200; } .modal { background: var(--cor-superficie); border-radius: var(--raio-lg); box-shadow: var(--sombra-2); max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; padding: var(--espaco-5); } .modal__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); margin-bottom: var(--espaco-4); } .modal__cabecalho h2 { font-size: 1.1rem; font-weight: 700; } .modal__rodape { display: flex; justify-content: flex-end; gap: var(--espaco-2); margin-top: var(--espaco-5); } /* ===== Toasts ===== */ .area-toasts { position: fixed; bottom: var(--espaco-4); right: var(--espaco-4); left: var(--espaco-4); display: flex; flex-direction: column; align-items: flex-end; gap: var(--espaco-2); z-index: 300; pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--espaco-2); max-width: 380px; width: 100%; padding: var(--espaco-3) var(--espaco-4); border-radius: var(--raio-md); background: var(--cor-superficie); border: 1px solid var(--cor-borda); box-shadow: var(--sombra-2); font-size: 0.88rem; animation: toast-entrar 0.15s ease; } @keyframes toast-entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .toast--sucesso { border-left: 4px solid var(--cor-sucesso); } .toast--erro { border-left: 4px solid var(--cor-perigo); } .toast--aviso { border-left: 4px solid var(--cor-aviso); } .toast--info { border-left: 4px solid var(--cor-info); } .toast__fechar { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--cor-texto-fraco); flex-shrink: 0; } /* ===== Skeleton (carregando) ===== */ .skeleton { background: linear-gradient( 90deg, var(--cor-fundo-alt) 25%, var(--cor-superficie-hover) 37%, var(--cor-fundo-alt) 63% ); background-size: 400% 100%; animation: skeleton-pulso 1.4s ease infinite; border-radius: var(--raio-sm); } @keyframes skeleton-pulso { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .skeleton-linha { height: 14px; margin-bottom: var(--espaco-2); } .skeleton-cartao { height: 92px; border-radius: var(--raio-lg); } /* ===== Estado vazio ===== */ .estado-vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--espaco-3); padding: var(--espaco-7) var(--espaco-4); color: var(--cor-texto-secundario); } .estado-vazio .icone { color: var(--cor-texto-fraco); } /* ===== Login ===== */ .tela-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--espaco-4); background: linear-gradient(160deg, var(--cor-fundo) 0%, var(--cor-fundo-alt) 100%); } .cartao-login { width: 100%; max-width: 380px; } .cartao-login__marca { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-2); margin-bottom: var(--espaco-5); text-align: center; } .cartao-login__marca .icone { color: var(--cor-primaria); } /* ===== Cenas em destaque ===== */ .lista-cenas-destaque { display: flex; gap: var(--espaco-3); overflow-x: auto; padding-bottom: var(--espaco-2); } .botao-cena { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-2); min-width: 108px; padding: var(--espaco-4) var(--espaco-3); border-radius: var(--raio-lg); border: 1px solid var(--cor-borda); background: var(--cor-superficie); cursor: pointer; font-weight: 600; font-size: 0.85rem; flex-shrink: 0; } .botao-cena:hover { background: var(--cor-primaria-fraca); border-color: var(--cor-primaria); } .botao-cena .icone { color: var(--cor-primaria); } .botao-cena:disabled { opacity: 0.6; cursor: wait; } /* ===== Assistente (chat) ===== */ .chat-assistente { display: flex; flex-direction: column; gap: var(--espaco-3); max-width: 720px; margin: 0 auto; } .chat-mensagens { display: flex; flex-direction: column; gap: var(--espaco-3); min-height: 240px; } .chat-bolha { max-width: 80%; padding: var(--espaco-3) var(--espaco-4); border-radius: var(--raio-lg); background: var(--cor-fundo-alt); font-size: 0.92rem; } .chat-bolha--usuario { align-self: flex-end; background: var(--cor-primaria); color: var(--cor-texto-sobre-primaria); } .chat-bolha--assistente { align-self: flex-start; } .chat-bolha__proveniencia { display: block; margin-top: var(--espaco-2); font-size: 0.72rem; opacity: 0.75; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .chat-entrada { display: flex; gap: var(--espaco-2); } .chat-entrada input { flex: 1; } /* ===== Utilitário de rolagem para blocos largos (código, JSON) ===== */ .bloco-rolavel { overflow-x: auto; background: var(--cor-fundo-alt); border-radius: var(--raio-sm); padding: var(--espaco-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; } /* ===== Responsivo geral ===== */ @media (max-width: 600px) { .conteudo { padding: var(--espaco-4) var(--espaco-3) var(--espaco-6); } .cabecalho-titulo { flex-direction: column; align-items: flex-start; } .modal { padding: var(--espaco-4); } .area-toasts { left: var(--espaco-3); right: var(--espaco-3); align-items: stretch; } .toast { max-width: none; } }