/* GUI - Fase 12.7 - o que a 12.7 acrescenta ao layout B homologado. Nada aqui pinta, contorna ou rotula area clicavel: o mapa continua limpo. O que muda e o cabecalho (voltar + acesso ao plano), o pino colorido do drawer e as telas de detalhe e de planejamento. */ /* ---- cabecalho: agora carrega voltar e o acesso ao planejamento ---- */ .topo{align-items:center;gap:8px;flex-wrap:nowrap} .topo-txt{flex:1 1 auto;min-width:0} .topo-txt h1{margin:0;font-size:1.12rem;line-height:1.2;letter-spacing:-.01em} .topo-txt p{margin:0;color:var(--tinta-fraca);font-size:.8rem;line-height:1.25} .voltar-destino{ flex:0 0 auto;border:0;background:none;padding:6px 8px 6px 0; font:600 .88rem/1 inherit;color:var(--acento);cursor:pointer; } .voltar-destino[hidden]{display:none} .btn-meu-plano{ flex:0 0 auto;position:relative;border:1px solid var(--linha);background:var(--papel-2); width:38px;height:38px;border-radius:12px;font-size:1.05rem;line-height:1; color:var(--tinta-fraca);cursor:pointer; } .btn-meu-plano .conta{ position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px; border-radius:10px;background:var(--acento);color:#fff; font:700 .68rem/19px ui-monospace,Menlo,monospace; } /* ---- pino numerado: a cor vem do dado, medida no disco que a arte desenha ---- */ .pin{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:50%; font:700 .82rem/1 ui-monospace,Menlo,monospace; } .pin.vazio{background:transparent;box-shadow:inset 0 0 0 1.5px var(--linha)} /* ---- pino da atividade ADICIONAL ---- Principal e numerada como qualquer outra, mas fora da ilustracao do mapa. O tom claro sai da MESMA cor da regiao (calculado no motor: 0.80 de branco no fundo, 0.45 de preto no texto), entao a familia cromatica se mantem e o contraste minimo medido nas 12 regioes e 5.67 - acima dos 4.5 do WCAG AA. O anel usa a cor do proprio texto, para o pino nao sumir sobre fundo claro. */ .pin.adicional{box-shadow:inset 0 0 0 1.5px currentColor} /* dois digitos: 10..17 continuam cabendo no mesmo circulo */ .pin{font-variant-numeric:tabular-nums;letter-spacing:-.02em} .cab-reg{display:flex;align-items:center;gap:10px} .cab-ativ{display:flex;align-items:center;gap:10px;margin:.5rem 0 .1rem} .cab-ativ h3{margin:0;font-size:1.06rem;line-height:1.25} /* ---- lista de atividades ---- */ .lista .item{display:flex;align-items:center;gap:10px;width:100%;text-align:left} .lista .item .nome{flex:1 1 auto;min-width:0} .lista .item .tmp{ flex:0 0 auto;color:var(--tinta-clara);font-size:.75rem; font-variant-numeric:tabular-nums; } .nota-reg{ margin:.6rem 0 0;padding:8px 10px;border-radius:10px; background:#f4efe4;color:var(--tinta-fraca);font-size:.78rem;line-height:1.45; } /* ---- detalhe da atividade ---- */ .onde{margin:.15rem 0 .6rem;color:var(--tinta-fraca);font-size:.82rem} .desc-ativ{margin:.2rem 0 .35rem;line-height:1.5} .aviso-desc{ margin:0 0 .6rem;color:var(--tinta-clara);font-size:.73rem;font-style:italic; } .acoes{display:flex;flex-direction:column;gap:8px;margin:.6rem 0 .4rem} .btn-plano{ border:1px solid var(--acento);background:var(--papel-2);color:var(--acento); border-radius:12px;padding:11px 14px;font:600 .92rem/1.2 inherit;cursor:pointer; text-align:center; } .btn-plano.dentro{background:var(--acento);color:#fff} .btn-off{ border:1px dashed var(--linha);border-radius:12px;padding:11px 14px; color:var(--tinta-clara);font-size:.84rem;text-align:center; } .escolher-dia{margin:.5rem 0 0;display:flex;flex-direction:column;gap:5px} .lbl-dia{color:var(--tinta-fraca);font-size:.76rem} .sel-dia{ border:1px solid var(--linha);border-radius:10px;padding:8px 10px; background:var(--papel-2);color:var(--tinta);font:inherit;font-size:.85rem; } /* ---- meu planejamento ---- */ .dia{margin:0 0 1.1rem} .dia h4{ margin:0 0 .4rem;font-size:.9rem;display:flex;align-items:baseline;gap:8px; padding-bottom:.3rem;border-bottom:1px solid var(--linha); } .qtd-dia{color:var(--tinta-clara);font-size:.74rem;font-weight:400} .plano-item{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 0} .plano-item .nome{flex:1 1 140px;min-width:0;font-size:.92rem} .plano-item .tmp{color:var(--tinta-clara);font-size:.75rem} .plano-item .sel-dia{flex:0 0 auto;padding:5px 7px;font-size:.76rem} .btn-rem{ flex:0 0 auto;border:1px solid var(--linha);background:var(--papel-2); width:30px;height:30px;border-radius:9px;color:var(--tinta-fraca);cursor:pointer; } .total-dia{margin:.25rem 0 0;color:var(--tinta-clara);font-size:.74rem;line-height:1.4} /* ================= Fase 12.7R ================= */ /* Quatro coisas que a revisao humana no iPhone pediu, e nada alem disso: o botao que abre a lista, a nota de contagem sob o mapa, a linha de filhos na lista e o bloco de experiencias internas no detalhe. */ /* ---- botao da lista: flutua sobre o mapa, discreto, sem competir com ele ---- */ .btn-lista{ position:absolute;right:10px;bottom:10px;z-index:2; display:inline-flex;align-items:center;gap:7px; min-height:44px;padding:0 15px 0 13px; /* alvo de toque confortavel no mobile */ border:1px solid var(--linha);border-radius:22px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(1.6) blur(6px);backdrop-filter:saturate(1.6) blur(6px); color:var(--tinta);font:600 .86rem/1 inherit;cursor:pointer; box-shadow:0 2px 10px rgba(40,30,20,.16); } .btn-lista[hidden]{display:none} .btn-lista .ic{font-size:1.05rem;line-height:1;color:var(--acento)} .btn-lista:active{transform:translateY(1px)} /* ---- nota sob o mapa: numeros vindos dos dados, nunca digitados ---- */ .nota-mapa{ flex:0 0 auto;margin:6px 16px 0;text-align:center; color:var(--tinta-fraca);font-size:.73rem;line-height:1.45; } .nota-mapa[hidden]{display:none} .nota-mapa strong{color:var(--tinta)} /* ---- filhos na lista: moram sob a mae, sem numero e sem virar irmao ---- */ .filhos{ margin:-2px 0 0;padding:0 10px 8px 46px; color:var(--tinta-clara);font-size:.75rem;line-height:1.3; } /* ---- experiencias internas no detalhe da mae ---- */ .internas{ margin:.5rem 0 .2rem;border:1px solid var(--linha);border-radius:12px; background:#faf6ec;overflow:hidden; } .internas summary{ padding:11px 13px;cursor:pointer;font-size:.87rem;list-style:none; display:flex;align-items:center;gap:6px; } .internas summary::-webkit-details-marker{display:none} .internas summary::before{content:"▸";color:var(--acento);font-size:.8rem} .internas[open] summary::before{content:"▾"} .lista-internas{list-style:none;margin:0;padding:0 13px 4px} .lista-internas li{ display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; padding:6px 0;border-top:1px solid var(--linha);font-size:.85rem; } .lista-internas .nome{flex:1 1 auto;min-width:0} .lista-internas .tmp{color:var(--tinta-clara);font-size:.74rem;white-space:nowrap} .lista-internas .opc{ color:var(--tinta-clara);font-size:.68rem;border:1px solid var(--linha); border-radius:5px;padding:1px 5px; } .internas .aviso-desc{margin:.1rem 13px .7rem} /* ================================================================ Fase 12.12 - o que o nivel PAIS acrescenta. Nada aqui muda o comportamento regional homologado na 12.7R: sao estilos de uma tela que nao existia, mais o rotulo de LIST_ONLY. ================================================================ */ /* ---- nivel pais: cartoes de cidade, sem mapa nacional ---- */ .paises{ flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:8px 16px calc(24px + var(--seguro-b)); } .pais{margin:0 0 22px} .pais > h2{ margin:0 0 10px;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase; color:var(--tinta-clara);font-weight:700; } .cidades{list-style:none;margin:0;padding:0;display:grid;gap:10px} .cidade{ display:flex;align-items:center;gap:12px;width:100%;text-align:left; background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--raio); padding:14px 14px;font:inherit;color:inherit;cursor:pointer; } .cidade:disabled{opacity:.55;cursor:default} .cidade .nome{flex:1 1 auto;min-width:0;font-weight:600} .cidade .sub{display:block;font-weight:400;font-size:.78rem;color:var(--tinta-fraca);margin-top:2px} .cidade .seta{flex:0 0 auto;color:var(--tinta-clara)} .cidade .selo{ flex:0 0 auto;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase; color:var(--tinta-clara);border:1px solid var(--linha);border-radius:999px;padding:3px 8px; } .marca-pais{ flex:0 0 auto;width:34px;height:34px;border-radius:11px; display:inline-flex;align-items:center;justify-content:center; background:var(--papel);border:1px solid var(--linha); font:700 .74rem/1 ui-monospace,Menlo,monospace;color:var(--tinta-fraca); } /* ---- lista: a atividade adicional se distingue pelo pino, nao por uma frase ---- Ate a 12.13R o nome vinha esmaecido e uma linha de texto explicava, item a item, que aquilo nao estava desenhado. Na 12.13R2 a atividade adicional deixou de ser um item de segunda: ela e principal, tem numero e o nome vem com a mesma tinta das outras. Quem carrega a diferenca e o pino claro, e o cabecalho da regiao. */ /* ---- o mapa tem que caber na ALTURA tambem, e o SVG tem que colar na arte ---- Dois defeitos medidos no layout herdado, ambos fora do retrato de celular: em 768x1024 a arte saia com 1024px de altura num palco de 972 e dois hotspots ficavam abaixo da dobra; em 320x568 a caixa .mapa era cortada por `max-height:100%` e a imagem nao. O SVG de hotspots, colado em inset:0 na caixa, deixava de coincidir com a arte, e o botao "Atividades", ancorado na caixa, subia para dentro do desenho e tapava um hotspot. Correcao em duas partes. 1. a caixa nunca mais e cortada: sem max-height, ela envolve exatamente a imagem, entao caixa, SVG e botao sao sempre o mesmo retangulo da arte. 2. quando quem limita passa a ser a altura - tablet em retrato, monitor, celular deitado - a imagem passa a ser dimensionada pela altura. O corte e por proporcao de viewport, nao por largura: largura nao diz nada sobre a altura disponivel. Nada disso toca o retrato de celular, que e o caso homologado: 390x844 continua dando 390x520 e 320x568 continua dando 320x427. */ .mapa{max-height:none} @media (min-aspect-ratio: 3/5){ .palco{align-items:center} .mapa{height:100%} .mapa img{height:100%;width:auto;max-width:100%;max-height:100%} } /* ---- tela baixa: o controle sai de cima da arte ---- Num celular deitado (844x390) o mapa retrato 3:4 cabe com 201px de largura, e o botao "Atividades", com 44px de alvo de toque, ocupava 54% da largura da arte - medido - e tapava o hotspot 9 de Shibuya. Encolher o botao resolveria a colisao e quebraria o alvo de toque. Entao ele sai da arte e vai para o canto da tela, onde nao tapa nada e continua do mesmo tamanho. Acima de 520px de altura - todo celular em retrato - nada muda. */ @media (max-height: 520px){ .mapa > .btn-lista{ position:fixed;right:12px;bottom:calc(10px + var(--seguro-b));z-index:6; } } /* ---- esconder de verdade ---- `.palco` declara display:flex, e regra de classe vence o display:none que o navegador aplica a [hidden]. Sem isto, o convite "Toque numa região" continuava aparecendo na tela de país, onde não há mapa nem região para tocar. */ .palco[hidden],.paises[hidden]{display:none} /* ================================================================ Fase 12.13 — resumo público, agenda temporal e alerta de conflito. Nada aqui toca o mapa nem o comportamento regional da 12.7R/12.12. ================================================================ */ /* ---- resumo público: 1–2 linhas de leitura rápida ---- O texto guardado já é curto (limite de 180 caracteres, validado). O clamp é defesa visual, não a régua: truncar não conserta um texto escrito longo. */ .resumo-publico{ margin:.55em 0 .5em;font-size:.87rem;line-height:1.4;color:var(--tinta); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .tempo-editorial{ margin:0 0 .7em;font-size:.79rem;color:var(--tinta-fraca); } .tempo-editorial strong{color:var(--tinta-fraca);font-weight:600} /* ---- aviso de horário: discreto, e não é erro ---- O GUI não guarda horário de funcionamento das atrações. Em vez de afirmar o que não pode sustentar, orienta a confirmar. */ .aviso-horario{ margin:1.1em 0 .2em;padding:8px 11px;border-radius:10px; background:var(--papel);border:1px solid var(--linha); font-size:.76rem;line-height:1.4;color:var(--tinta-fraca); } /* ---- editor da agenda: três decisões independentes ---- */ .agenda-edit{ margin:.9em 0 0;padding:11px;border:1px solid var(--linha);border-radius:12px; background:var(--papel); display:grid;grid-template-columns:1fr 1fr;gap:9px 10px; } .agenda-edit .campo{display:flex;flex-direction:column;gap:4px;min-width:0} .agenda-edit .campo:first-child{grid-column:1 / -1} .agenda-edit label{ font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-clara); } .agenda-edit select{ width:100%;min-height:44px;padding:0 10px; /* alvo de toque no mobile */ border:1px solid var(--linha);border-radius:10px;background:var(--papel-2); font:inherit;color:var(--tinta); } .agenda-resumo{ grid-column:1 / -1;margin:1px 0 0;font-size:.82rem;color:var(--tinta-fraca); font-variant-numeric:tabular-nums; } /* ---- alerta de conflito: informa e respeita a decisão ---- Âmbar, não vermelho: a agenda não está quebrada, está sobreposta, e manter a sobreposição é uma escolha legítima de quem viaja. */ .conflito{ margin:.8em 0 0;padding:11px 12px;border-radius:12px; background:#fff8ec;border:1px solid #e8c98a; } .conflito-topo{margin:0 0 .35em;font-size:.87rem;color:#7a4c00} .conflito-txt{margin:0 0 .45em;font-size:.82rem;line-height:1.45;color:#6b4a15} .conflito-lista{list-style:none;margin:0 0 .7em;padding:0;display:grid;gap:4px} .conflito-lista li{ font-size:.82rem;line-height:1.4;color:#6b4a15; font-variant-numeric:tabular-nums; } .conflito-acoes{display:flex;gap:8px;flex-wrap:wrap} .conflito-acoes button{ flex:1 1 auto;min-height:44px;padding:0 14px;border-radius:11px; font:600 .85rem/1 inherit;cursor:pointer; } .btn-conf-alterar{background:#7a4c00;color:#fff;border:1px solid #7a4c00} .btn-conf-manter{background:var(--papel-2);color:#7a4c00;border:1px solid #e8c98a} /* ---- linha da agenda em "Meu planejamento" ---- NOME e DURAÇÃO na mesma faixa; DATA + INTERVALO logo abaixo. O nome pode quebrar em duas linhas sem esmagar a duração, que fica com largura própria. */ .lista.agenda li{display:flex;align-items:flex-start;gap:6px} .plano-item{ flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px; width:100%;text-align:left;background:none;border:0;padding:10px 2px; font:inherit;color:inherit;cursor:pointer; /* o navegador aplica align-items:center a