/* Auditoria Diária de Conformidade, Hotel Rotorua Inn. Rework visual de 16/09/2026, na mesma família da Governança e da Manutenção (guia aprovado em 15/09/2026): Plus Jakarta Sans, grade de 4 px, escala de texto 1,2, hierarquia por peso e espaço, cor 60-30-10, situação sempre com cor + ícone + palavra, contraste AA. TEMAS. Tudo que tem cor lê de uma variável. O modo (claro/escuro) troca os neutros; o acento troca só a cor viva. Os dois vêm de atributos no : data-tema="claro|escuro" data-acento="turquesa|ambar|indigo|esmeralda|coral" e são guardados no navegador. */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonte-jakarta.woff2") format("woff2"); } /* ============================================================ tokens */ :root { --f: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; /* neutros, modo claro */ --bg: #F3F6F9; --sup: #FFFFFF; --sup-2: #F8FAFC; --sup-3: #EBF0F5; /* --tx-3 era #687C91, que dava 4,0:1 no fundo claro. Texto miúdo (rótulo, dica) pede 4,5:1 no mínimo. Escurecido em 21/09/2026 depois de medir. */ --tx: #0B1E33; --tx-2: #41566D; --tx-3: #586C81; --ln: #E2E8EF; --ln-2: #CCD6E0; --nav: #0B1E33; --nav-2: #10294A; --nav-tx: #BFCFDE; --nav-tx-2: #7B92A9; --nav-ln: rgba(255,255,255,.07); --pri: #0B1E33; --pri-h: #16395E; --sobre-pri: #FFFFFF; /* situação */ --ok: #16A34A; --ok-bg: #E9F7EE; --ok-tx: #166534; --at: #EA580C; --at-bg: #FFF3EA; --at-tx: #9A3412; --er: #DC2626; --er-bg: #FEEEEE; --er-tx: #991B1B; --info: #2563EB; --info-bg: #EAF1FE; --info-tx: #1E40AF; /* acento padrão: turquesa, o aprovado da casa */ --ac: #06B6D4; --ac-vivo: #22D3EE; --ac-esc: #0E7490; --ac-suave: #CFFAFE; --ac-50: #ECFEFF; --sobre-ac: #062033; --nav-at: rgba(34,211,238,.14); --sombra-1: 0 1px 2px rgba(11,30,51,.06), 0 4px 14px rgba(11,30,51,.06); --sombra-2: 0 12px 40px rgba(11,30,51,.16); --r-b: 12px; --r-c: 16px; --r-g: 20px; --nav-larg: 232px; } html[data-acento="ambar"] { --ac: #F59E0B; --ac-vivo: #FBBF24; --ac-esc: #B45309; --ac-suave: #FEF3C7; --ac-50: #FFFBEB; --sobre-ac: #1C1B19; --nav-at: rgba(245,158,11,.16); } html[data-acento="indigo"] { --ac: #6366F1; --ac-vivo: #818CF8; --ac-esc: #4338CA; --ac-suave: #E0E7FF; --ac-50: #EEF2FF; --sobre-ac: #FFFFFF; --nav-at: rgba(129,140,248,.16); } html[data-acento="esmeralda"] { --ac: #10B981; --ac-vivo: #34D399; --ac-esc: #047857; --ac-suave: #D1FAE5; --ac-50: #ECFDF5; --sobre-ac: #052E22; --nav-at: rgba(52,211,153,.16); } html[data-acento="coral"] { --ac: #F43F5E; --ac-vivo: #FB7185; --ac-esc: #BE123C; --ac-suave: #FFE4E6; --ac-50: #FFF1F2; --sobre-ac: #FFFFFF; --nav-at: rgba(251,113,133,.16); } html[data-tema="escuro"] { --bg: #07111D; --sup: #0E1B2B; --sup-2: #112236; --sup-3: #17293F; --tx: #E5EDF5; --tx-2: #AEBDCC; --tx-3: #7F93A7; --ln: #1D3148; --ln-2: #2A425C; --nav: #040B14; --nav-2: #081524; --nav-tx: #BFCFDE; --nav-tx-2: #7B92A9; --pri: #E5EDF5; --pri-h: #FFFFFF; --sobre-pri: #0B1E33; --ok: #4ADE80; --ok-bg: #0B2618; --ok-tx: #86EFAC; --at: #FB923C; --at-bg: #2B170C; --at-tx: #FDBA74; --er: #F87171; --er-bg: #2E1216; --er-tx: #FCA5A5; --info: #60A5FA; --info-bg: #0F2140; --info-tx: #93C5FD; --ac-esc: var(--ac-vivo); --sombra-1: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.25); --sombra-2: 0 12px 40px rgba(0,0,0,.55); } html[data-tema="escuro"] { --ac-suave: #0B3440; --ac-50: #082A33; --sobre-ac: #062033; } html[data-tema="escuro"][data-acento="ambar"] { --ac-suave: #3A2A08; --ac-50: #2A1F07; --sobre-ac: #1C1B19; } html[data-tema="escuro"][data-acento="indigo"] { --ac-suave: #1E1B4B; --ac-50: #181643; --sobre-ac: #FFFFFF; } html[data-tema="escuro"][data-acento="esmeralda"] { --ac-suave: #064E3B; --ac-50: #053A2E; --sobre-ac: #052E22; } html[data-tema="escuro"][data-acento="coral"] { --ac-suave: #4C0519; --ac-50: #3B0A17; --sobre-ac: #FFFFFF; } /* nomes antigos, para nada que ainda os cite quebrar */ :root { --fonte: var(--f); --fonte-titulo: var(--f); --tinta: var(--tx); --tinta-suave: var(--tx-2); --tinta-fraca: var(--tx-3); --ambar: var(--ac); --verde: var(--ok); --vermelho: var(--er); } /* ============================================================ base */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--tx); font-family: var(--f); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; } h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.015em; } h1 { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; } h2 { font-size: 20px; } h3 { font-size: 15px; } h4 { font-size: 15px; } a { color: var(--ac-esc); } code { font-family: var(--mono); font-size: .92em; background: var(--sup-3); padding: 1px 6px; border-radius: 6px; } .oculto { display: none !important; } .mono { font-family: var(--mono); } .dica { color: var(--tx-3); font-size: 13px; } .explica { color: var(--tx-2); font-size: 13px; margin: 4px 0 12px; } svg.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============================================================ casca */ .app { display: grid; grid-template-columns: var(--nav-larg) minmax(0, 1fr); min-height: 100vh; } .nav { background: var(--nav); color: var(--nav-tx); display: flex; flex-direction: column; gap: 8px; padding: 20px 14px; position: sticky; top: 0; height: 100vh; } .marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px 16px; border-bottom: 1px solid var(--nav-ln); margin-bottom: 8px; } .marca-icone { width: 40px; height: 40px; border-radius: 12px; background: var(--ac); color: var(--sobre-ac); display: grid; place-items: center; } .marca-icone svg.ic { width: 22px; height: 22px; stroke-width: 2; } .marca b { display: block; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -.01em; line-height: 1.2; } .marca small { color: var(--nav-tx-2); font-size: 12px; } .nav .abas { display: flex; flex-direction: column; gap: 2px; } .aba { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; color: var(--nav-tx); font-size: 14px; font-weight: 600; text-align: left; min-height: 44px; transition: background .15s, color .15s; } .aba svg.ic { color: var(--nav-tx-2); } .aba:hover { background: rgba(255,255,255,.05); color: #fff; } .aba[aria-selected="true"] { background: var(--nav-at); color: #fff; } .aba[aria-selected="true"] svg.ic { color: var(--ac-vivo); } .aba .conta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--nav-tx-2); background: rgba(255,255,255,.06); padding: 1px 7px; border-radius: 999px; } .nav-rodape { margin-top: auto; border-top: 1px solid var(--nav-ln); padding-top: 14px; display: grid; gap: 10px; } .nav-rodape .rotulo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--nav-tx-2); font-weight: 700; padding: 0 4px; } .modos { display: flex; gap: 4px; background: rgba(255,255,255,.05); padding: 4px; border-radius: 10px; } .modos button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; border-radius: 8px; color: var(--nav-tx-2); font-size: 13px; font-weight: 600; } .modos button[aria-pressed="true"] { background: var(--nav-2); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .acentos { display: flex; gap: 8px; padding: 2px 4px; } .acentos button { width: 26px; height: 26px; border-radius: 999px; border: 2px solid transparent; background: var(--cor); position: relative; transition: transform .15s; } .acentos button:hover { transform: scale(1.12); } .acentos button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--cor); } .nav-versao { font-family: var(--mono); font-size: 10.5px; color: var(--nav-tx-2); padding: 0 4px; } .conteudo { min-width: 0; padding: 28px 32px 64px; max-width: 1240px; } /* ============================================================ cabeça e KPIs */ .cabeca { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; } .chapeu { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); font-weight: 700; margin-bottom: 6px; } .subtitulo { color: var(--tx-2); font-size: 14px; margin: 6px 0 0; max-width: 560px; } .cabeca-campos { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; } .campo-rotulo { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 4px; } .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; } .kpi { background: var(--sup); border-radius: var(--r-c); padding: 14px 16px; box-shadow: var(--sombra-1); display: flex; align-items: center; gap: 14px; } .kpi-icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sup-3); color: var(--tx-2); flex: none; } .kpi .campo-rotulo { margin-bottom: 2px; } .kpi .valor { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .kpi .valor.zero { color: var(--ok); } .kpi .valor.alerta { color: var(--at); } .kpi .valor.grave { color: var(--er); } .kpi .valor.vazio { color: var(--tx-3); } .kpi.k-ok .kpi-icone { background: var(--ok-bg); color: var(--ok); } .kpi.k-nc .kpi-icone { background: var(--er-bg); color: var(--er); } .kpi.k-pt .kpi-icone { background: var(--at-bg); color: var(--at); } .kpi.k-fi .kpi-icone { background: var(--ac-suave); color: var(--ac-esc); } /* ============================================================ formulários e botões */ input[type="text"], input[type="password"], input[type="date"], input[type="number"], select, textarea { background: var(--sup); border: 1px solid var(--ln-2); border-radius: 10px; padding: 8px 12px; color: var(--tx); outline: none; min-height: 40px; transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-suave); } input::placeholder { color: var(--tx-3); } input:disabled, select:disabled, textarea:disabled { background: var(--sup-3); color: var(--tx-3); } html[data-tema="escuro"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); } input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; } .botao { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ln-2); border-radius: var(--r-b); padding: 8px 14px; min-height: 40px; background: var(--sup); color: var(--tx); font-size: 14px; font-weight: 600; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; } .botao:hover { border-color: var(--tx-3); background: var(--sup-2); } .botao:active { transform: translateY(1px); } .botao.ambar, .botao.principal { background: var(--pri); border-color: var(--pri); color: var(--sobre-pri); } .botao.ambar:hover, .botao.principal:hover { background: var(--pri-h); border-color: var(--pri-h); } .botao.acento { background: var(--ac); border-color: var(--ac); color: var(--sobre-ac); } .botao.acento:hover { background: var(--ac-vivo); border-color: var(--ac-vivo); } .botao.sumido { border-color: transparent; background: transparent; color: var(--tx-2); } .botao.sumido:hover { background: var(--sup-3); color: var(--tx); } .botao.pequeno { min-height: 32px; padding: 4px 10px; font-size: 13px; border-radius: 9px; } .botao:disabled { opacity: .45; cursor: not-allowed; transform: none; } .botao.quadrado { border-radius: var(--r-b); } /* ============================================================ seções e painéis */ .secao { margin-top: 32px; } .secao-cabeca { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .secao-cabeca .meta { font-size: 13px; color: var(--tx-3); } .secao-cabeca .direita { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .painel { background: var(--sup); border-radius: var(--r-c); padding: 18px 20px; box-shadow: var(--sombra-1); } .painel.hospedin { display: grid; gap: 4px; } .grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .linha-campo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .linha-campo label { flex: 1; font-size: 14px; color: var(--tx); } .linha-campo input[type="text"] { flex: 1.5; } .linha-campo input[type="number"] { width: 84px; } table.placar { width: 100%; border-collapse: collapse; font-size: 14px; } table.placar th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); font-weight: 700; padding: 0 8px 8px 0; border-bottom: 1px solid var(--ln); } table.placar td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--ln); vertical-align: middle; } table.placar tr:last-child td { border-bottom: 0; } table.placar td.n, table.placar th.n { text-align: right; } .vazio-tabela { color: var(--tx-3); font-size: 14px; padding: 14px 0; } .selo { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .selo.conforme { background: var(--ok-bg); color: var(--ok-tx); } .selo.atencao { background: var(--at-bg); color: var(--at-tx); } .selo.critico, .selo.apuracao { background: var(--er-bg); color: var(--er-tx); } .barra { height: 6px; background: var(--sup-3); border-radius: 999px; overflow: hidden; margin-top: 6px; } .barra span { display: block; height: 100%; width: 0; background: var(--ac); transition: width .3s ease; } /* ============================================================ ficha */ .ficha { background: var(--sup); border-radius: var(--r-g); padding: 16px 18px; box-shadow: var(--sombra-1); margin-top: 12px; border: 1px solid transparent; transition: box-shadow .2s; } .ficha:hover { box-shadow: var(--sombra-1), 0 0 0 1px var(--ln); } .ficha-cabeca { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ficha-cabeca .num { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ac-esc); background: var(--ac-50); padding: 4px 8px; border-radius: 8px; } .ficha-cabeca input.reserva { width: 110px; font-family: var(--mono); } .ficha-cabeca input.hospede { flex: 1 1 120px; min-width: 120px; } .ficha-cabeca input.uh { width: 76px; } .ficha-cabeca input.data { width: 142px; } .ficha-cabeca select.responsavel { min-width: 150px; } .ficha-cabeca .placar { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--tx-2); padding: 5px 10px; background: var(--sup-3); border-radius: 999px; } .ficha-cabeca .placar.completa { color: var(--ok-tx); background: var(--ok-bg); } .ficha-cabeca .remover { margin-left: auto; font-size: 18px; line-height: 1; min-width: 32px; justify-content: center; } @media (max-width: 1240px) { .ficha-cabeca input.data { width: 136px; } .ficha-cabeca select.responsavel { min-width: 140px; } } .homonimo { margin-top: 12px; padding: 9px 12px; background: var(--at-bg); color: var(--at-tx); border-radius: 10px; font-size: 13px; display: flex; gap: 8px; align-items: flex-start; } .corpo-ficha { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; } .corpo-ficha.com-foto { grid-template-columns: minmax(0, 1fr) minmax(280px, 36%); } /* ------------------------------------------------------------ pontos */ .pontos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .ponto { display: flex; align-items: flex-start; gap: 8px; width: 100%; background: var(--sup-2); border: 1px solid var(--ln); border-radius: 12px; padding: 9px 10px; text-align: left; min-height: 48px; transition: border-color .15s, background .15s, transform .1s; } .ponto:hover { border-color: var(--ln-2); transform: translateY(-1px); } .ponto .n { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--tx-3); min-width: 16px; padding-top: 2px; } .ponto .rot { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--tx); } .ponto .nivel { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--tx-3); padding-top: 3px; } .ponto .nota { display: block; font-size: 11.5px; font-weight: 400; color: var(--tx-2); margin-top: 3px; line-height: 1.35; } .ponto .marca { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--sup-3); color: var(--tx-3); flex: none; } .ponto .marca svg.ic { width: 14px; height: 14px; stroke-width: 2.2; } .ponto.conforme { background: var(--ok-bg); border-color: transparent; } .ponto.conforme .marca { background: var(--ok); color: #fff; } .ponto.conforme .nivel, .ponto.conforme .n { color: var(--ok-tx); } .ponto.nao_conforme { background: var(--er-bg); border-color: transparent; } .ponto.nao_conforme .marca { background: var(--er); color: #fff; } .ponto.nao_conforme .nivel, .ponto.nao_conforme .n { color: var(--er-tx); } .ponto.apontado { background: var(--at-bg); border-color: var(--at); } .ponto.apontado .marca { background: var(--at); color: #fff; } .ponto.fora { border-style: dashed; opacity: .75; } .ponto.fora .marca { background: transparent; border: 1px dashed var(--ln-2); } .revisoes { display: grid; gap: 8px; margin-top: 10px; } .revisar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--at-bg); border-radius: 12px; font-size: 13px; color: var(--at-tx); } .revisar .botao { min-height: 32px; padding: 4px 12px; font-size: 13px; border-radius: 9px; } .acoes-ponto { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } /* ------------------------------------------------------------ menu de ponto */ .menu-ponto { position: absolute; z-index: 40; background: var(--sup); border: 1px solid var(--ln); border-radius: 14px; padding: 6px; min-width: 300px; box-shadow: var(--sombra-2); } .menu-ponto button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--tx); } .menu-ponto button:hover { background: var(--sup-3); } .menu-ponto button .expl { display: block; font-size: 12px; font-weight: 400; color: var(--tx-3); } .menu-ponto .separador { height: 1px; background: var(--ln); margin: 4px 8px; } /* ------------------------------------------------------------ foto */ .painel-foto { background: var(--sup-2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 240px; } .ferramentas-foto { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .moldura { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--sup-3); border: 1px dashed var(--ln-2); border-radius: 12px; overflow: hidden; min-height: 180px; } .moldura img { max-width: 100%; max-height: 480px; display: block; cursor: zoom-in; } .moldura .vazio { color: var(--tx-3); font-size: 13px; text-align: center; padding: 24px; line-height: 1.5; } .painel-foto .aviso { font-size: 11.5px; color: var(--tx-3); line-height: 1.4; } .lente { position: fixed; inset: 0; z-index: 90; background: rgba(4,11,20,.92); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; } .lente img { max-width: 100%; max-height: 100%; border-radius: 8px; } /* ------------------------------------------------------------ campos lidos */ .campos { margin-top: 14px; border-top: 1px solid var(--ln); padding-top: 14px; } .campos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .campo label { display: block; font-size: 12px; font-weight: 600; color: var(--tx-2); margin-bottom: 4px; } .campo input, .campo select { width: 100%; } .campo.ilegivel input { border-color: var(--at); background: var(--at-bg); } .campo .marcar-ilegivel { font-size: 11.5px; color: var(--tx-3); padding: 3px 0; text-decoration: underline; } .acoes-campos { display: flex; gap: 10px; margin-top: 12px; align-items: center; flex-wrap: wrap; } .acoes-campos label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tx-2); } .resultado-cadastro { margin-top: 14px; } .comparacao { background: var(--sup-2); border-radius: 14px; padding: 14px 16px; } table.comparar td.mono { font-family: var(--mono); font-size: 12px; color: var(--tx-2); word-break: break-word; } .acao { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .acao.bom { background: var(--ok-bg); color: var(--ok-tx); } .acao.alerta { background: var(--at-bg); color: var(--at-tx); } .acao.grave { background: var(--er-bg); color: var(--er-tx); } .acao.neutro { background: var(--sup-3); color: var(--tx-3); } /* ============================================================ boletim e arquivar */ .boletim textarea { width: 100%; min-height: 220px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; background: var(--sup-2); resize: vertical; border-radius: 12px; } .rodape-boletim { display: flex; gap: 12px; align-items: center; margin-top: 12px; flex-wrap: wrap; } .aviso-ambar { color: var(--at-tx); font-size: 13px; } .arquivar { background: var(--sup); border-radius: var(--r-c); padding: 18px 20px; box-shadow: var(--sombra-1); border-left: 4px solid var(--ac); } .impedimentos { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--sup-2); font-size: 13px; color: var(--tx-2); } .impedimentos.pode { background: var(--ok-bg); color: var(--ok-tx); } .impedimentos ul { margin: 4px 0 0; padding-left: 18px; } .impedimentos li { margin: 3px 0; } details.secao summary { cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 15px; color: var(--tx-2); list-style: none; display: flex; align-items: center; gap: 8px; } details.secao summary::-webkit-details-marker { display: none; } details.secao summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; } details.secao[open] summary::before { transform: rotate(45deg); } .rodape { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--ln); font-size: 12px; color: var(--tx-3); line-height: 1.6; } .recado { position: fixed; right: 24px; bottom: 24px; z-index: 80; background: var(--nav); color: #fff; border-left: 4px solid var(--ac-vivo); border-radius: 12px; padding: 12px 16px; font-size: 14px; box-shadow: var(--sombra-2); max-width: 360px; } .recado.erro { border-left-color: var(--er); } .recado.bom { border-left-color: var(--ok); } /* ============================================================ dia fechado */ .dia-fechado .ficha { opacity: .8; } .dia-fechado .ponto { cursor: default; } .dia-fechado .ponto:hover { transform: none; } .dia-fechado h2.titulo-do-dia::after { content: "Arquivado"; margin-left: 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-esc); background: var(--ac-suave); padding: 3px 9px; border-radius: 999px; vertical-align: middle; } /* ============================================================ telas menores */ @media (max-width: 1000px) { .app { grid-template-columns: 1fr; } .nav { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 8px; } .marca { border: 0; margin: 0; padding: 0 12px 0 0; } .nav .abas { flex-direction: row; flex-wrap: wrap; flex: 1; } .aba { width: auto; min-height: 40px; padding: 8px 12px; } .nav-rodape { margin: 0; border: 0; padding: 0; display: flex; align-items: center; gap: 10px; } .nav-rodape .rotulo, .nav-versao { display: none; } .conteudo { padding: 20px 16px 48px; } .kpis { grid-template-columns: repeat(2, 1fr); } .grade-2 { grid-template-columns: 1fr; } .corpo-ficha.com-foto { grid-template-columns: 1fr; } .cabeca-campos { margin-left: 0; width: 100%; } } /* ============================================================ ajudas de operação (21/09/2026) */ /* ------------------------------------------------------------ PIN e modo leitura */ .cadeado { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); color: var(--nav-tx); font-size: 13px; font-weight: 700; min-height: 44px; } .cadeado:hover { background: rgba(255,255,255,.1); color: #fff; } .cadeado.liberado { background: var(--nav-at); color: #fff; } .cadeado.liberado svg.ic { color: var(--ac-vivo); } .leitura-aviso { display: none; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--info-bg); color: var(--info-tx); font-size: 14px; } .so-leitura .leitura-aviso { display: flex; } .dialogo { border: 0; border-radius: var(--r-g); padding: 24px; width: min(400px, calc(100vw - 32px)); background: var(--sup); color: var(--tx); box-shadow: var(--sombra-2); } .dialogo::backdrop { background: rgba(4,11,20,.6); backdrop-filter: blur(2px); } .dialogo h3 { font-size: 20px; } .dialogo-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } /* ------------------------------------------------------------ passo a passo */ .passos { background: var(--sup); border-radius: var(--r-c); box-shadow: var(--sombra-1); padding: 14px 16px; margin-bottom: 16px; } /* São 8 passos desde que a Ronda entrou, em 22/09/2026. */ .passos ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; } .passos li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--tx-3); cursor: pointer; padding: 6px 4px; border-radius: 10px; position: relative; line-height: 1.25; } .passos li:hover { background: var(--sup-2); } .passos li::before { content: ""; position: absolute; top: 19px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; background: var(--ln-2); } .passos li:first-child::before { display: none; } .passos li.feito::before, .passos li.atual::before { background: var(--ok); } .passos .bola { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--sup-3); color: var(--tx-3); font-size: 12px; font-weight: 800; position: relative; z-index: 1; } .passos .bola svg.ic { width: 15px; height: 15px; stroke-width: 2.4; } .passos li.feito { color: var(--tx-2); } .passos li.feito .bola { background: var(--ok); color: #fff; } .passos li.atual { color: var(--tx); } .passos li.atual .bola { background: var(--ac); color: var(--sobre-ac); box-shadow: 0 0 0 4px var(--ac-suave); } .agora { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--ac-50); color: var(--tx); } .agora > svg.ic { color: var(--ac-esc); width: 20px; height: 20px; } .agora div { flex: 1; min-width: 0; } .agora b { display: block; font-size: 14px; } .agora span { font-size: 13px; color: var(--tx-2); } .agora.pronto { background: var(--ok-bg); } .agora.pronto > svg.ic { color: var(--ok); } /* ------------------------------------------------------------ hospedin */ .mais-opcoes { margin-top: 8px; } .mais-opcoes summary { cursor: pointer; font-size: 13px; color: var(--tx-3); list-style: none; } .mais-opcoes summary::-webkit-details-marker { display: none; } .mais-opcoes summary:hover { color: var(--tx); text-decoration: underline; } #hospedin-estado.com-erro { color: var(--er-tx); background: var(--er-bg); padding: 10px 12px; border-radius: 10px; } /* ------------------------------------------------------------ filtro, lote, recolher */ .barra-filtro { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .filtro { display: inline-flex; gap: 4px; background: var(--sup-3); padding: 4px; border-radius: 12px; } .filtro button { padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--tx-2); min-height: 36px; } .filtro button span { font-family: var(--mono); font-size: 11px; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--sup); color: var(--tx-3); } .filtro button[aria-pressed="true"] { background: var(--sup); color: var(--tx); box-shadow: var(--sombra-1); } .filtro button[aria-pressed="true"] span { background: var(--ac-suave); color: var(--ac-esc); } .lote { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--at-bg); color: var(--at-tx); font-size: 13px; font-weight: 600; margin-bottom: 4px; } .lote select { min-height: 34px; padding: 4px 10px; } .ficha.recolhida .corpo-ficha, .ficha.recolhida .homonimo { display: none; } .ficha.recolhida { padding-top: 10px; padding-bottom: 10px; } .ficha.pronta { border-left: 4px solid var(--ok); } .ficha .alternar svg.ic { transition: transform .15s; } .ficha:not(.recolhida) .alternar svg.ic { transform: rotate(180deg); } .ficha-cabeca .alternar { margin-left: auto; min-width: 32px; justify-content: center; } .ficha-cabeca .alternar + .remover { margin-left: 0; } /* ------------------------------------------------------------ ajuda do ponto */ .ponto .ajuda { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--tx-3); border: 1px solid var(--ln-2); flex: none; background: var(--sup); } .ponto .ajuda:hover { color: var(--ac-esc); border-color: var(--ac); background: var(--ac-50); } .ajuda-ponto { padding: 14px 16px; max-width: 330px; } .ajuda-ponto h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; } .ajuda-ponto p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; } /* ------------------------------------------------------------ guia rápido */ .guia ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; line-height: 1.5; } .legenda { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; } .legenda li { position: relative; padding-left: 28px; line-height: 1.45; } .marca-legenda { width: 18px; height: 18px; border-radius: 6px; position: absolute; left: 0; top: 2px; } .marca-legenda.ok { background: var(--ok); } .marca-legenda.er { background: var(--er); } .marca-legenda.at { background: var(--at); } .marca-legenda.pe { background: var(--sup-3); border: 1px solid var(--ln-2); } .marca-legenda.fo { border: 1.5px dashed var(--tx-3); } .saude { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .saude li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); color: var(--ok-tx); } .saude li.falta { background: var(--at-bg); color: var(--at-tx); } .saude li b { display: block; font-size: 14px; color: var(--tx); } .saude li span { font-size: 13px; color: var(--tx-2); } @media (max-width: 1000px) { .passos ol { grid-template-columns: repeat(4, 1fr); row-gap: 10px; } .passos li::before { display: none; } } .dialogo-larga { width: min(640px, calc(100vw - 32px)); } .dialogo-larga textarea { width: 100%; min-height: 320px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; margin-top: 10px; } /* ------------------------------------------------------------ conduta da equipe */ /* Fardamento e comportamento não vêm do POP: são da casa, e do turno, não da reserva. A borda tracejada em âmbar diz isso sem precisar de legenda. */ .ponto.da-casa:not(.conforme):not(.nao_conforme):not(.apontado) { border-style: dashed; border-color: var(--ac-linha, var(--ln-2)); background: var(--ac-50); } .ponto.da-casa .n { color: var(--ac-esc); } /* ------------------------------------------------------------ aviso de NC4 */ /* NC4 é a falha mais grave da régua, e pela invariante 8 a gerência sabe na hora. Por isso este bloco fica no topo do dia, em vermelho, e não some com o tempo: só sai quando alguém da gerência dá ciência. */ .avisos-nc4 { display: grid; gap: 10px; margin: 0 0 18px; padding: 14px 16px 16px; border: 1px solid var(--er); border-left: 5px solid var(--er); border-radius: var(--r-c); background: var(--er-bg); box-shadow: var(--sombra-1); } .avisos-cabeca { display: flex; gap: 10px; align-items: flex-start; } .avisos-cabeca .ic { width: 22px; height: 22px; color: var(--er); flex: 0 0 auto; margin-top: 1px; } .avisos-cabeca b { display: block; color: var(--er-tx); font-size: 15px; } .avisos-cabeca span { display: block; color: var(--tx-2); font-size: 13px; line-height: 1.5; } .avisos-sem-canal { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--at-bg); color: var(--at-tx); font-size: 13px; line-height: 1.5; } .avisos-sem-canal .ic { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; } .aviso-nc4 { background: var(--sup); border: 1px solid var(--ln); border-radius: var(--r-b); padding: 12px 14px; } .aviso-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .aviso-topo .ic { width: 18px; height: 18px; color: var(--er); } .aviso-topo b { font-size: 14px; color: var(--tx); } .aviso-selo { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--er-bg); color: var(--er-tx); } .aviso-selo.espera { background: var(--at-bg); color: var(--at-tx); } .aviso-selo.ok { background: var(--ok-bg); color: var(--ok-tx); } .aviso-corpo { margin: 8px 0 0; font-size: 13.5px; color: var(--tx); line-height: 1.55; } .aviso-detalhe { margin: 6px 0 0; font-size: 12.5px; color: var(--tx-3); line-height: 1.5; } .aviso-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } /* ============================================================ a Ronda (22/09/2026) */ /* Feita para o celular primeiro: nada de tabela, nada de menu flutuante, e cada estado é um botão com o nome escrito. No computador vira duas colunas. */ .ronda-titulo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; } .ronda-titulo h3 { flex: 1 1 auto; margin: 0; } .ronda-pessoa, .ronda-area { border: 1px solid var(--ln); border-radius: var(--r-c); background: var(--sup); padding: 12px 14px; margin-bottom: 12px; } .ronda-pessoa.trabalhou { border-left: 4px solid var(--ac); } .ronda-area.com-problema { border-color: var(--at); background: var(--at-bg); } .ronda-pessoa > header, .ronda-area > header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .ronda-pessoa > header .ic, .ronda-area > header .ic { width: 18px; height: 18px; color: var(--tx-3); } .ronda-pessoa > header b, .ronda-area > header b { font-size: 15px; } .ronda-pessoa > header .meta, .ronda-area > header .meta { font-size: 12.5px; color: var(--tx-3); } .ronda-pessoa > header .selo, .ronda-area > header .selo { margin-left: auto; } .ronda-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ln); } .ronda-item.pendente .ronda-item-nome b::after { content: "falta conferir"; margin-left: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--at-tx); background: var(--at-bg); padding: 2px 8px; border-radius: 999px; } .ronda-item-nome b { font-size: 14px; } .ronda-item-nome .nivel { font-family: var(--mono); font-size: 11px; color: var(--tx-3); margin-left: 6px; } .ronda-criterio { display: block; font-size: 12.5px; color: var(--tx-2); line-height: 1.45; margin-top: 2px; } .ronda-item-nome .nota { display: block; font-size: 12.5px; color: var(--tx-2); margin-top: 4px; } .ronda-item-nome .nota.problema { color: var(--at-tx); font-weight: 600; } .ronda-botoes { display: flex; gap: 8px; flex-wrap: wrap; } .botao-estado { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 14px; border: 1px solid var(--ln-2); border-radius: 999px; background: var(--sup); color: var(--tx-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .botao-estado .ic { width: 16px; height: 16px; } .botao-estado:hover { border-color: var(--tx-3); } .botao-estado.ligado.bom { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-tx); } .botao-estado.ligado.ruim { background: var(--er-bg); border-color: var(--er); color: var(--er-tx); } .botao-estado:disabled { opacity: .45; cursor: not-allowed; } .conta.alerta { background: var(--er); color: #fff; } /* ============================================================ celular (22/09/2026) */ /* O Luis Miguel vai usar isto no telefone, andando pelo hotel. Alvo grande, uma coisa embaixo da outra, e nada de rolagem para o lado. */ @media (max-width: 640px) { .conteudo { padding: 16px 12px 56px; } .cabeca { gap: 12px; margin-bottom: 16px; } .cabeca h1 { font-size: 22px; } .subtitulo { display: none; } .cabeca-campos { gap: 8px; } .cabeca-campos > div { flex: 1 1 140px; } .cabeca-campos input { width: 100% !important; } .nav { padding: 10px 12px; } .nav .abas { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; } .aba { white-space: nowrap; } .marca small { display: none; } .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; } .kpi { padding: 10px 12px; gap: 10px; } .kpi .valor { font-size: 22px; } /* A ficha vira uma coluna: no telefone, campo do lado de campo não se lê. */ .ficha-cabeca { gap: 6px; } .ficha-cabeca input.reserva, .ficha-cabeca input.hospede, .ficha-cabeca input.uh, .ficha-cabeca input.data, .ficha-cabeca select.responsavel { width: 100%; min-width: 0; flex: 1 1 100%; } .ficha-cabeca .num { order: -1; } .pontos { grid-template-columns: 1fr; } .ponto { min-height: 52px; } .ronda-item { grid-template-columns: 1fr; gap: 8px; } .ronda-botoes { width: 100%; } .botao-estado { flex: 1 1 0; justify-content: center; min-height: 46px; } .secao-cabeca { flex-wrap: wrap; } .secao-cabeca .direita { width: 100%; display: flex; gap: 8px; } .secao-cabeca .direita .botao { flex: 1 1 0; justify-content: center; } .dialogo { width: calc(100vw - 24px); } .aviso-acoes .botao { flex: 1 1 140px; justify-content: center; } .rodape { font-size: 11px; } } /* A coluna do app precisa PODER encolher. Sem o minmax(0,1fr) e o min-width:0, a barra de abas com rolagem lateral (flex-wrap: nowrap) vira a largura mínima da página inteira: no celular o conteúdo ficava 450px mais largo que a tela e tudo rolava para o lado. Achado medindo, não olhando. */ @media (max-width: 1000px) { .app { grid-template-columns: minmax(0, 1fr); } .nav, .conteudo { min-width: 0; } .nav .abas { min-width: 0; } } @media (max-width: 640px) { /* Cadeado, tema e cores não cabem numa linha só num telefone. */ .nav-rodape { flex-wrap: wrap; row-gap: 8px; } .nav-rodape .cadeado { flex: 1 1 100%; } } @media (max-width: 640px) { /* Oito passos não cabem numa linha de telefone: viram duas de quatro. */ .passos ol { grid-template-columns: repeat(4, 1fr); row-gap: 12px; } } /* ============================================================ entrar (22/09/2026) */ /* Cobre a tela inteira: com o sistema na internet, ninguém vê reserva, nome de hóspede nem apontamento antes de entrar. */ .tela-de-entrar { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--nav); background-image: radial-gradient(circle at 20% 20%, rgba(34,211,238,.10), transparent 45%), radial-gradient(circle at 85% 75%, rgba(34,211,238,.07), transparent 40%); } .cartao-entrar { width: min(400px, 100%); background: var(--sup); border-radius: var(--r-g); padding: 26px 26px 22px; box-shadow: var(--sombra-2); } .cartao-entrar h2 { margin: 0 0 4px; font-size: 22px; } .cartao-entrar input { width: 100%; } .marca-entrar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .marca-entrar img { border-radius: 12px; } .marca-entrar b { display: block; font-size: 15px; color: var(--tx); } .marca-entrar small { color: var(--tx-3); font-size: 12.5px; } /* O botão de quem está usando, no rodapé da barra. */ .cadeado small { display: block; font-size: 11px; font-weight: 600; opacity: .7; text-transform: uppercase; letter-spacing: .04em; } /* ============================================================ usuários */ .usuario-linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--ln); } .usuario-linha:first-child { border-top: 0; } .usuario-linha .quem { flex: 1 1 200px; min-width: 0; } .usuario-linha .quem b { display: block; font-size: 14px; } .usuario-linha .quem span { font-size: 12.5px; color: var(--tx-3); } .usuario-linha.inativo { opacity: .55; } .selo.perfil { background: var(--info-bg); color: var(--info-tx); } .selo.perfil.auditor { background: var(--ac-50); color: var(--ac-esc); } @media (max-width: 640px) { .cartao-entrar { padding: 20px 18px 18px; } .usuario-linha .botao { flex: 1 1 auto; justify-content: center; } }