/* Orchard · componentes do app. Os valores vêm dos tokens (tokens.css); o segundo valor de cada var() só vale se os tokens não carregarem. */
@font-face { font-family: "Overused Grotesk"; src: url("../fonts/OverusedGrotesk-VF.ttf") format("truetype"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Libre Caslon Condensed"; src: url("../fonts/LibreCaslonCondensed-VF.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

body { margin: 0; font-family: var(--font-texto, "Overused Grotesk", "Helvetica Neue", Arial, sans-serif); color: var(--tinta, #0B0B0B); }
.or-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; }
.or-coluna { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
:focus-visible { outline: 2px solid var(--azul, #2F5BFF); outline-offset: 2px; }
:root { --degrade: linear-gradient(120deg, var(--azul, #2F5BFF), var(--ceu-claro, #8BBEFF) 38%, var(--pessego, #FFC98A) 64%, var(--laranja, #FF6B1A)); }

/* Ícone: pontos que fazem uma onda no hover e encolhem no clique */
.or-icone { display: inline-flex; flex: none; }
.or-icone svg { width: 100%; height: 100%; overflow: visible; }
.or-icone--vivo rect { transform-box: fill-box; transform-origin: center; }
*:hover > .or-icone--vivo rect, .or-icone--vivo:hover rect { animation: or-onda var(--tempo-medio, 420ms) var(--curva-suave, cubic-bezier(0.4, 0, 0.2, 1)); animation-delay: calc(var(--i, 0) * 14ms); }
*:active > .or-icone--vivo, .or-icone--vivo:active { transform: scale(0.88); transition: transform var(--tempo-rapido, 160ms); }
@keyframes or-onda { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-1.5px) scale(1.25); } }

/* Botão: cápsula. No hover aparece a trama de pontos (a mesma dos ícones) e os pontos do ícone acendem nas cores céu → fruto */
.or-botao { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid transparent; border-radius: var(--raio-pilula, 999px); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; transition: transform var(--tempo-rapido, 160ms) var(--curva-estica, cubic-bezier(0.2, 0.8, 0.2, 1)), background-color var(--tempo-rapido, 160ms), color var(--tempo-rapido, 160ms); }
.or-botao::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background-image: radial-gradient(circle, currentColor 1px, transparent 1.5px); background-size: 6px 6px; background-position: 0 0; transition: opacity var(--tempo-medio, 420ms), background-position var(--tempo-lento, 640ms) var(--curva-estica, cubic-bezier(0.2, 0.8, 0.2, 1)); }
.or-botao:hover { transform: translateY(-1px); }
.or-botao:hover::before { opacity: 0.16; background-position: 3px -3px; }
.or-botao:active { transform: translateY(0) scale(0.97); }
.or-botao:hover .or-icone rect:nth-child(4n+1) { fill: var(--azul, #2F5BFF); }
.or-botao:hover .or-icone rect:nth-child(4n+2) { fill: var(--ceu-claro, #8BBEFF); }
.or-botao:hover .or-icone rect:nth-child(4n+3) { fill: var(--pessego, #FFC98A); }
.or-botao:hover .or-icone rect:nth-child(4n) { fill: var(--laranja, #FF6B1A); }
.or-botao--m { height: 44px; padding: 0 20px; font-size: 15px; }
.or-botao--p { height: 34px; padding: 0 14px; font-size: 13px; }
.or-botao--primario { background: var(--tinta, #0B0B0B); color: var(--papel, #FFFFFF); }
.or-botao--primario:hover { background: var(--tinta-2, #2B2A26); }
.or-botao--cor { background: var(--azul, #2F5BFF); color: var(--papel, #FFFFFF); }
.or-botao--cor:hover { background: var(--cliente-texto, #1E46D6); }
.or-botao--cor:hover .or-icone rect { fill: var(--papel, #FFFFFF) !important; }
.or-botao--cor:hover .or-icone rect:nth-child(3n) { fill: var(--pessego, #FFC98A) !important; }
.or-botao--secundario { background: linear-gradient(var(--papel, #FFFFFF), var(--papel, #FFFFFF)) padding-box, linear-gradient(var(--linha-forte, #CFD6E2), var(--linha-forte, #CFD6E2)) border-box; color: var(--tinta, #0B0B0B); }
.or-botao--secundario:hover { background: linear-gradient(var(--papel, #FFFFFF), var(--papel, #FFFFFF)) padding-box, var(--degrade) border-box; }
.or-botao--fantasma { background: transparent; color: var(--tinta, #0B0B0B); }
.or-botao--fantasma:hover { background: var(--papel-2, #F5F7FB); }
.or-botao--vidro { background: rgba(255, 255, 255, 0.82); color: var(--tinta, #0B0B0B); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.or-botao--vidro:hover { background: var(--papel, #FFFFFF); }
.or-botao:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.or-botao:disabled::before { display: none; }

/* Campo de busca: a borda acende no degradê céu → fruto e a lupa pisca em cor */
.or-campo { display: inline-flex; align-items: center; gap: 10px; height: 42px; min-width: 340px; padding: 0 8px 0 14px; box-sizing: border-box; border: 1.5px solid transparent; border-radius: var(--raio-pilula, 999px); background: linear-gradient(var(--papel, #FFFFFF), var(--papel, #FFFFFF)) padding-box, linear-gradient(var(--linha-forte, #CFD6E2), var(--linha-forte, #CFD6E2)) border-box; color: var(--cinza-suave, #6E6B62); transition: box-shadow var(--tempo-medio, 420ms); }
.or-campo:hover, .or-campo:focus-within { background: linear-gradient(var(--papel, #FFFFFF), var(--papel, #FFFFFF)) padding-box, var(--degrade) border-box; }
.or-campo:focus-within { box-shadow: 0 6px 24px rgba(47, 91, 255, 0.14); }
.or-campo:hover .or-icone rect:nth-child(odd), .or-campo:focus-within .or-icone rect:nth-child(odd) { fill: var(--azul, #2F5BFF); }
.or-campo:hover .or-icone rect:nth-child(even), .or-campo:focus-within .or-icone rect:nth-child(even) { fill: var(--laranja, #FF6B1A); }
.or-campo__entrada { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--tinta, #0B0B0B); }
.or-campo__entrada::placeholder { color: var(--cinza-suave, #6E6B62); }
.or-campo__atalho { padding: 3px 8px; border-radius: var(--raio-p, 8px); background-color: var(--papel-2, #F5F7FB); background-image: radial-gradient(circle, rgba(11, 11, 11, 0.12) 0.8px, transparent 1.1px); background-size: 4px 4px; font: inherit; font-size: 11px; font-weight: 500; color: var(--tinta, #0B0B0B); }

/* Status: a etiqueta em pastel, com o ponto e a palavra. A cor nunca vem sozinha */
.or-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 2px; border-radius: var(--raio-etiqueta, 7px); box-sizing: border-box; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; flex: none; }
.or-status__ponto { width: 6px; height: 6px; border-radius: 999px; flex: none; }
.or-status--cliente { background: var(--cliente-fundo, #E8EEFF); color: var(--cliente-texto, #1E46D6); } .or-status--cliente .or-status__ponto { background: var(--cliente, #2F5BFF); }
.or-status--atrasada { background: var(--atraso-fundo, #FFE4E6); color: var(--atraso-texto, #C81E14); } .or-status--atrasada .or-status__ponto { background: var(--atraso, #F23A2F); }
.or-status--ajuste { background: var(--ajuste-fundo, #FFF3D6); color: var(--ajuste-texto, #8A5800); } .or-status--ajuste .or-status__ponto { background: var(--ajuste, #F5A300); }
.or-status--agencia { background: var(--agencia-fundo, #F0F1F3); color: var(--agencia-texto, #0B0B0B); } .or-status--agencia .or-status__ponto { background: var(--agencia, #0B0B0B); }
.or-status--pronta { background: var(--pronta-fundo, #FFEDE0); color: var(--pronta-texto, #B4470A); } .or-status--pronta .or-status__ponto { width: 12px; background: var(--pronta, #FF6B1A); }

/* Trilha: 9 pontos. A cada etapa feita, o ponto estica e amadurece */
.or-trilha { display: inline-flex; align-items: center; gap: 4px; }
.or-trilha__ponto { width: 8px; height: 8px; border-radius: 999px; background: var(--linha, #ECEEF3); box-shadow: inset 0 0 0 1px var(--linha-forte, #CFD6E2); transition: width var(--tempo-lento, 640ms) var(--curva-estica, cubic-bezier(0.2, 0.8, 0.2, 1)); }
.or-trilha__ponto--feita, .or-trilha__ponto--agora { box-shadow: none; }
.or-trilha__ponto--feita.is-pronta { width: 18px; }
.or-trilha__ponto--agora.is-pronta { width: 26px; }
.or-trilha--g { gap: 6px; } .or-trilha--g .or-trilha__ponto { height: 12px; width: 12px; } .or-trilha--g .or-trilha__ponto--feita.is-pronta { width: 34px; } .or-trilha--g .or-trilha__ponto--agora.is-pronta { width: 48px; }

/* Cartão de peça */
.or-peca { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--raio-miolo, 13px); background: var(--papel, #FFFFFF); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), inset 0 0 0 1px var(--linha, #ECECEE); min-width: 0; box-sizing: border-box; }
.or-peca__topo { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.or-peca__cliente { font-size: 12px; color: var(--cinza-suave, #6E6B62); }
.or-peca__titulo { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; }
.or-peca__trilha { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.or-peca__etapa { font-size: 12px; color: var(--cinza-suave, #6E6B62); white-space: nowrap; }

/* Monograma e contador */
.or-monograma { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--papel-2, #F5F7FB); color: var(--tinta, #0B0B0B); font-size: 11px; font-weight: 600; flex: none; }
.or-monograma--escuro { background: var(--tinta, #0B0B0B); color: var(--papel, #FFFFFF); }
.or-contador { position: relative; display: inline-flex; }
.or-contador__numero { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--tinta, #0B0B0B); color: var(--papel, #FFFFFF); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--papel, #FFFFFF); }
.or-contador__numero--atraso { background: var(--atraso, #F23A2F); }

/* Trilho escuro de ícones (a barra do app na direção B) */
.or-trilho { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; width: 68px; padding: 16px 0; box-sizing: border-box; border-radius: var(--raio-gg, 24px); background: var(--tinta, #0B0B0B); min-height: 420px; }
.or-trilho__marca { width: 40px; height: 40px; border-radius: 12px; background: var(--papel, #FFFFFF); display: flex; align-items: center; justify-content: center; }
.or-trilho__marca img { width: 26px; }
.or-trilho__lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.or-trilho__item { width: 44px; height: 44px; border: 0; border-radius: 14px; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--tempo-rapido, 160ms); }
.or-trilho__item:hover { background: rgba(255, 255, 255, 0.1); }
.or-trilho__item.is-ativo { background: rgba(255, 255, 255, 0.18); }
.or-trilho__item:focus-visible { outline-color: var(--papel, #FFFFFF); }
.or-trilho__item .or-contador__numero { box-shadow: 0 0 0 2px var(--tinta, #0B0B0B); background: var(--papel, #FFFFFF); color: var(--tinta, #0B0B0B); }
.or-trilho__pessoa { margin-top: auto; }

/* Saudação: o único cartão de vidro, sempre por cima da pintura */
.or-saudacao { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px 26px; border-radius: var(--raio-gg, 24px); background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.or-saudacao__texto { display: flex; flex-direction: column; gap: 6px; }
.or-saudacao__contexto { font-size: 13px; color: var(--cinza-texto, #4D4B44); }
.or-saudacao__titulo { margin: 0; font-family: var(--font-titulo, "Libre Caslon Condensed", Georgia, serif); font-weight: 400; font-size: 46px; line-height: 1; }
.or-saudacao__resumo { margin: 0; font-size: 15px; color: var(--cinza-texto, #4D4B44); }
.or-saudacao__acoes { display: flex; gap: 8px; }

/* Para hoje: borda no degradê céu → fruto; o feito é o ícone de aprovação em pontos, num círculo laranja */
.or-hoje { padding: 2px; border-radius: var(--raio-gg, 24px); background: var(--degrade); }
.or-hoje__dentro { padding: 20px 22px; border-radius: 22px; background: var(--papel, #FFFFFF); display: flex; flex-direction: column; gap: 4px; }
.or-hoje__contexto { font-size: 13px; color: var(--cinza-suave, #6E6B62); }
.or-hoje__titulo { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
.or-hoje__lista { list-style: none; margin: 0; padding: 0; }
.or-hoje__item input { position: absolute; opacity: 0; pointer-events: none; }
.or-hoje__item label { display: flex; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; font-size: 14px; }
.or-hoje__marca { width: 24px; height: 24px; box-sizing: border-box; border-radius: 999px; border: 1.5px dashed var(--linha-forte, #CFD6E2); flex: none; display: flex; align-items: center; justify-content: center; transition: background-color var(--tempo-rapido, 160ms), border-color var(--tempo-rapido, 160ms), transform var(--tempo-medio, 420ms) var(--curva-estica, cubic-bezier(0.2, 0.8, 0.2, 1)); }
.or-hoje__marca .or-icone { opacity: 0; transform: scale(0.5); transition: opacity var(--tempo-rapido, 160ms), transform var(--tempo-medio, 420ms) var(--curva-estica, cubic-bezier(0.2, 0.8, 0.2, 1)); }
.or-hoje__item label:hover .or-hoje__marca { border-color: var(--azul, #2F5BFF); }
.or-hoje__item input:focus-visible + label .or-hoje__marca { outline: 2px solid var(--azul, #2F5BFF); outline-offset: 2px; }
.or-hoje__item.is-feito .or-hoje__marca { background: var(--pronta, #FF6B1A); border-color: var(--pronta, #FF6B1A); transform: scale(1.06); }
.or-hoje__item.is-feito .or-hoje__marca .or-icone { opacity: 1; transform: none; }
.or-hoje__item.is-feito label { color: var(--cinza-suave, #6E6B62); text-decoration: line-through; text-decoration-color: var(--pessego, #FFC98A); text-decoration-thickness: 2px; }

/* Aviso: entra de baixo; a marca da esquerda diz o tom (aprovado: o ícone de pontos num círculo laranja) */
.or-aviso { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: var(--raio-m, 14px); background: var(--tinta, #0B0B0B); color: var(--papel, #FFFFFF); font-size: 14px; box-shadow: var(--sombra-aviso, 0 20px 40px rgba(11, 11, 11, 0.18)); animation: or-entra var(--tempo-medio, 420ms) var(--curva-estica, cubic-bezier(0.2, 0.8, 0.2, 1)) both; }
.or-aviso__marca { width: 28px; height: 28px; border-radius: 999px; background: var(--agencia, #0B0B0B); flex: none; display: flex; align-items: center; justify-content: center; }
.or-aviso--aprovado .or-aviso__marca { background: var(--pronta, #FF6B1A); }
.or-aviso--atraso .or-aviso__marca { background: var(--atraso, #F23A2F); }
.or-aviso__texto { display: flex; flex-direction: column; gap: 2px; }
.or-aviso__texto b { font-weight: 500; }
.or-aviso__texto span { font-size: 12px; color: #C9C6BD; }
.or-aviso__quando { margin-left: 8px; font-size: 12px; color: #C9C6BD; }
@keyframes or-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Carregando: os 9 pontos acendem em sequência, do verde ao laranja */
.or-carregando { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: var(--cinza-texto, #4D4B44); }
.or-carregando__pontos { display: inline-flex; gap: 4px; }
.or-carregando__pontos span { width: 8px; height: 8px; border-radius: 999px; opacity: 0.2; animation: or-acende 1.4s var(--curva-suave, cubic-bezier(0.4, 0, 0.2, 1)) infinite; }
@keyframes or-acende { 0%, 100% { opacity: 0.2; width: 8px; } 30% { opacity: 1; width: 16px; } 60% { opacity: 0.2; width: 8px; } }

/* Pintura: a imagem de fundo (gerada fora). Sem imagem, o lugar reservado */
.or-pintura { position: relative; overflow: hidden; border-radius: var(--raio-gg, 24px); min-height: 180px; background: var(--ceu-reservado, #C9D6E8); }
.or-pintura__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.or-pintura__px { image-rendering: pixelated; }
.or-pintura__px--pontos { -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 66%); mask-image: radial-gradient(circle, #000 60%, transparent 66%); -webkit-mask-size: 6px 6px; mask-size: 6px 6px; }
.or-pintura__vazia { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.55) 1.2px, transparent 1.6px); background-size: 12px 12px; }
.or-pintura__vazia span { padding: 6px 12px; border-radius: 999px; background: var(--papel, #FFFFFF); font-size: 12px; color: var(--cinza-texto, #4D4B44); }
.or-pintura__por-cima { position: relative; z-index: 1; height: 100%; }


/* Menu: a barra lateral clara. Ícones pretos com o nome, o item aberto num azul bem claro, a pessoa no pé. Recolhe para só os ícones */
.or-menu { display: flex; flex-direction: column; gap: 2px; width: 232px; min-height: 100%; height: 100%; box-sizing: border-box; padding: 26px 14px; border-right: 1px solid var(--linha, #ECEEF3); background: var(--papel, #FFFFFF); color: var(--tinta, #0B0B0B); font-family: var(--font-texto, "Overused Grotesk", system-ui, sans-serif); }
.or-menu--recolhido { width: 72px; align-items: center; padding: 26px 10px; }
.or-menu__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 0 10px; }
.or-menu__logo { width: 100px; }
.or-menu__marca-agencia { display: flex; align-items: center; gap: 10px; min-width: 0; }
.or-menu__marca-agencia b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.or-menu__topo:has(.or-menu__marca-agencia) { padding-bottom: 18px; }
.or-menu__simbolo { width: 28px; margin-bottom: 6px; }
.or-menu__alternar { width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; display: flex; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
.or-menu__alternar:hover { background: var(--hover, #F5F7FB); }
.or-menu__alternar span { width: 3px; height: 13px; border-radius: 999px; background: var(--tinta, #0B0B0B); }
.or-menu__alternar span + span { background: var(--linha-forte, #CFD6E2); }
.or-menu--recolhido .or-menu__alternar { width: 40px; margin-bottom: 16px; }
.or-menu--recolhido .or-menu__alternar span { background: var(--linha-forte, #CFD6E2); }
.or-menu--recolhido .or-menu__alternar span + span { background: var(--tinta, #0B0B0B); }
.or-menu__agencia { padding: 6px 10px 16px; font-size: 13px; color: var(--cinza-suave, #6E6B62); }
.or-menu__passos { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; padding: 10px; border-radius: 14px; color: var(--tinta, #0B0B0B); text-decoration: none; }
.or-menu__passos img { height: 44px; }
.or-menu__passos > span { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; font-size: 12px; color: var(--cinza-suave, #6E6B62); }
.or-menu__passos b { font-size: 13px; font-weight: 500; color: var(--tinta, #0B0B0B); }
.or-menu__item { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; font-size: 14px; color: var(--tinta, #0B0B0B); text-decoration: none; transition: background-color var(--tempo-rapido, 160ms); }
.or-menu__item:hover, .or-menu__cliente:hover, .or-menu__passos:hover, .or-menu__pessoa:hover { background: var(--hover, #F5F7FB); }
.or-menu__item.is-ativo { background: var(--azul-fundo, #F2F5FF); color: var(--cliente-texto, #1E46D6); font-weight: 500; }
.or-menu__rotulo { flex: 1; }
.or-menu__numero { font-size: 13px; color: var(--cinza-suave, #6E6B62); }
.or-menu__numero.is-destaque { color: var(--cliente-texto, #1E46D6); font-weight: 500; }
.or-menu--recolhido .or-menu__item { width: 44px; height: 40px; padding: 0; justify-content: center; }
.or-menu__marca { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 999px; background: var(--azul, #2F5BFF); }
.or-menu__secao { margin: 24px 10px 6px; font-size: 12px; color: var(--cinza-suave, #6E6B62); }
.or-menu__cliente { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; font-size: 14px; color: var(--tinta, #0B0B0B); text-decoration: none; }
.or-menu__alerta { font-size: 12px; color: var(--atraso-texto, #C81E14); }
.or-menu__pessoa { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 10px; border-radius: 14px; color: var(--tinta, #0B0B0B); text-decoration: none; }
.or-menu__pessoa > span:last-child:not(.or-menu__avatar) { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.or-menu__pessoa b { font-weight: 500; }
.or-menu__pessoa > span:last-child:not(.or-menu__avatar) span { font-size: 12px; color: var(--cinza-suave, #6E6B62); }
.or-menu--recolhido .or-menu__pessoa { padding: 0; }
.or-menu__avatar { flex: none; width: 40px; height: 40px; border-radius: 999px; background-color: var(--azul-fundo, #F2F5FF); background-image: radial-gradient(circle, rgba(47, 91, 255, 0.22) 1px, transparent 1.4px); background-size: 7px 7px; box-shadow: inset 0 0 0 1.5px #D6E0FF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: var(--cliente-texto, #1E46D6); }
.or-menu__avatar--foto { background-size: cover; background-position: center; }

/* Pontos: cada peça é um ponto, com o status escrito ao lado. Nunca uma legenda separada */
.or-pontos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.or-pontos__grupo { display: inline-flex; align-items: center; gap: 7px; }
.or-pontos__fila { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.or-pontos__ponto { width: 10px; height: 10px; border-radius: 999px; box-sizing: border-box; flex: none; }
.or-pontos__ponto--entregue { width: 18px; background: var(--laranja, #FF6B1A); }
.or-pontos__ponto--cliente { background: var(--cliente, #2F5BFF); }
.or-pontos__ponto--agencia { background: var(--tinta, #0B0B0B); }
.or-pontos__ponto--atrasada { background: var(--atraso, #F23A2F); }
.or-pontos__ponto--falta { border: 1.5px solid #B5BFCF; }
.or-pontos__texto { font-size: 13px; white-space: nowrap; }
.or-pontos__texto--entregue { font-weight: 500; color: var(--pronta-texto, #B4470A); }
.or-pontos__texto--cliente { font-weight: 500; color: var(--cliente-texto, #1E46D6); }
.or-pontos__texto--agencia { color: var(--tinta, #0B0B0B); }
.or-pontos__texto--atrasada { font-weight: 500; color: var(--atraso-texto, #C81E14); }
.or-pontos__texto--falta { color: var(--cinza-suave, #6E6B62); }

/* Alerta: o aviso do que saiu do caminho, com a ilustração por cima e a ação embaixo */
.or-alerta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.or-alerta__imagem { width: 56px; }
.or-alerta__titulo { font-family: var(--font-titulo, "Libre Caslon Condensed", Georgia, serif); font-weight: 400; font-size: 30px; line-height: 1.04; color: var(--atraso-texto, #C81E14); }
.or-alerta--cliente .or-alerta__titulo { color: var(--cliente-texto, #1E46D6); }
.or-alerta--neutro .or-alerta__titulo { color: var(--tinta, #0B0B0B); }
.or-alerta__texto { margin: 0; font-size: 14px; line-height: 21px; color: var(--tinta-2, #2B2A26); }
.or-alerta__acoes { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .or-trilha__ponto, .or-botao, 
  .or-aviso, .or-carregando__pontos span, .or-icone--vivo rect { animation: none !important; }
  .or-carregando__pontos span { opacity: 1; }
}

/* Abas: a navegação do portal no celular, embaixo, ao alcance do polegar */
.or-abas { display: flex; box-sizing: border-box; padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); background: var(--papel, #FFFFFF); box-shadow: 0 -12px 28px rgba(16, 24, 40, 0.06); font-family: var(--font-texto, "Overused Grotesk", system-ui, sans-serif); }
.or-abas__item { flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--tinta, #0B0B0B); text-decoration: none; }
.or-abas__item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-abas__icone { position: relative; width: 56px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: background-color var(--tempo-rapido, 160ms); }
.or-abas__item:hover .or-abas__icone { background: var(--hover, #F5F7FB); }
.or-abas__item.is-ativo { color: var(--cliente-texto, #1E46D6); font-weight: 500; }
.or-abas__item.is-ativo .or-abas__icone { background: var(--azul-fundo, #F2F5FF); }
.or-abas__item:focus-visible { outline: none; }
.or-abas__item:focus-visible .or-abas__icone { outline: 2px solid var(--azul, #2F5BFF); outline-offset: 2px; }
.or-abas__numero { position: absolute; top: -5px; right: 6px; min-width: 18px; height: 18px; box-sizing: border-box; padding: 0 5px; border-radius: 999px; background: var(--azul, #2F5BFF); box-shadow: 0 0 0 2px var(--papel, #FFFFFF); color: var(--papel, #FFFFFF); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* Fundo: a pintura do pomar em trama de pontos atrás de tudo. O pai precisa de position: relative; o que vai por cima, também */
.or-fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--fundo-app, #2F5FB3); }
.or-fundo__img { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
.or-fundo__veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 22, 64, 0.62) 0%, rgba(10, 22, 64, 0.44) 280px, rgba(10, 22, 64, 0.14) 520px, rgba(10, 22, 64, 0) 700px); }

/* Vidro: a moldura translúcida. Painel com o conteúdo em branco por dentro; halo só em volta do cartão em destaque */
.or-vidro { position: relative; box-sizing: border-box; background: var(--vidro, rgba(255, 255, 255, 0.34)); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid var(--vidro-borda, rgba(255, 255, 255, 0.62)); box-shadow: var(--sombra-vidro, 0 10px 30px rgba(10, 24, 60, 0.12)); }
.or-vidro--painel { padding: 6px; border-radius: var(--raio-painel, 22px); }
.or-vidro__dentro { height: 100%; box-sizing: border-box; border-radius: calc(var(--raio-painel, 22px) - 5px); background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.9); overflow: hidden; }
.or-vidro--halo { padding: 9px; border-radius: var(--raio-halo, 27px); }
.or-vidro--halo > .or-cartao { box-shadow: none; }
.or-vidro .or-menu { height: 100%; background: transparent; border-right: 0; }

/* Cartão: casca cinza translúcida com o cabeçalho, miolo branco com linhas finas */
.or-cartao { position: relative; box-sizing: border-box; padding: 0 6px 6px; border-radius: var(--raio-cartao, 18px); background: var(--casca, rgba(246, 247, 249, 0.9)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--sombra-cartao, 0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 28px rgba(10, 24, 60, 0.10)); color: var(--texto, #17181B); }
.or-cartao__cab { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 8px 8px 10px; box-sizing: border-box; }
.or-cartao__titulo { flex: 1; min-width: 0; margin: 0; font-family: var(--font-titulo, "Libre Caslon Condensed", Georgia, serif); font-weight: 400; font-size: 23px; line-height: 1.05; }
.or-cartao--p .or-cartao__titulo { font-family: var(--font-texto, "Overused Grotesk", system-ui, sans-serif); font-size: 14px; font-weight: 600; line-height: 20px; }
.or-cartao__selo { width: 30px; height: 30px; flex: none; border-radius: var(--raio-selo, 9px); background: var(--papel, #FFFFFF); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.or-cartao__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cliente-texto, #1E46D6); white-space: nowrap; text-decoration: none; }
.or-cartao__miolo { position: relative; background: var(--papel, #FFFFFF); border: 1px solid var(--linha, #ECECEE); border-radius: var(--raio-miolo, 13px); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); overflow: hidden; }
.or-cartao__miolo--respiro { padding: 14px 16px; }
.or-cartao__linha { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: inherit; text-decoration: none; }
.or-cartao__linha + .or-cartao__linha { border-top: 1px solid var(--divisoria, #F0F1F3); }
a.or-cartao__linha:hover { background: var(--hover, #F8F9FA); }
.or-cartao__rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--divisoria, #F0F1F3); font-size: 13px; color: var(--cinza-texto, #4B5160); }

/* Ilustração com movimento: cada ponto e cada cápsula é um <i> posicionado */
.or-ilustracao { position: relative; display: inline-block; flex: none; overflow: hidden; }
.or-ilustracao i { position: absolute; border-radius: 999px; }