/* =====================================================================
   Protótipo do Portal · Detalhe da carga (etapas, dados, anexos)
   ===================================================================== */

.o-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.o-cabeca h3 { font-size: 1.35rem; font-weight: 800; }
.o-cabeca p { color: var(--p-cinza); font-size: .78rem; }
.o-cabeca-selos { display: flex; align-items: center; gap: .4rem; }
.o-cabeca .o-pilula { font-size: .76rem; padding: .3rem .8rem; }

.o-etapas {
    --feito: 0;
    position: relative;
    display: grid; grid-template-columns: repeat(3, 1fr);
    margin-bottom: 1rem; padding: 1rem .5rem .9rem;
    background: #fff; border: 1px solid var(--p-borda); border-radius: var(--p-raio); box-shadow: var(--p-sombra);
}
.o-etapas::before, .o-etapas::after {
    content: ""; position: absolute; top: calc(1rem + 19px); left: calc(100% / 6); height: 3px; border-radius: 3px; width: calc(100% * 2 / 3);
}
.o-etapas::before { background: var(--p-borda); }
.o-etapas::after {
    background: linear-gradient(90deg, var(--o-entrada), var(--o-rota) 55%, var(--o-concluido));
    transform-origin: left; transform: scaleX(var(--feito));
    transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}
.o-etapa { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: .05rem; padding: 0 .3rem; }
.o-etapa-bola {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; margin-bottom: .35rem;
    background: #fff; border: 2px solid var(--p-borda-forte); color: var(--p-cinza-claro);
    transition: background-color .3s, border-color .3s, color .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.o-etapa strong { font-size: .8rem; color: var(--p-cinza); }
.o-etapa > span:not(.o-etapa-bola) { font-size: .72rem; font-weight: 600; color: var(--p-preto); }
.o-etapa small { font-size: .64rem; color: var(--p-cinza); line-height: 1.3; }
.o-etapa.feita .o-etapa-bola, .o-etapa.atual .o-etapa-bola { background: var(--cor); border-color: var(--cor); color: #fff; }
.o-etapa.feita strong, .o-etapa.atual strong { color: var(--p-preto); }
.o-etapa.pendente > span:not(.o-etapa-bola) { color: var(--p-cinza-claro); }
.o-etapa.atual .o-etapa-bola { transform: scale(1.1); animation: o-pulso 2s ease-out infinite; }
@keyframes o-pulso {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor) 45%, transparent); }
    70%, 100% { box-shadow: 0 0 0 10px transparent; }
}
.o-etapa.entrada { --cor: var(--o-entrada); }
.o-etapa.rota { --cor: var(--o-rota); }
.o-etapa.transito { --cor: var(--o-transito); }
.o-etapa.concluido { --cor: var(--o-concluido); }

.o-acoes-admin { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.o-nota-cliente { margin-bottom: 1rem; padding: .55rem .75rem; background: var(--p-azul-claro); border-radius: var(--p-raio); color: #1f4f9f; }
.o-nota-cliente .p-icone { color: var(--p-azul); }

.o-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.o-dados { padding: .2rem .95rem .5rem; }
.o-dados > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--p-borda); font-size: .78rem; }
.o-dados > div:last-child { border-bottom: 0; }
.o-dados dt { color: var(--p-cinza); flex: 0 0 auto; }
.o-dados dd { font-weight: 600; color: var(--p-preto); text-align: right; }

/* Galeria de anexos */
.o-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .7rem; }
.o-galeria li { display: grid; gap: .2rem; align-content: start; font-size: .68rem; min-width: 0; }
.o-miniatura {
    position: relative; aspect-ratio: 4 / 3; width: 100%; padding: 0; overflow: hidden;
    border: 1px solid var(--p-borda); border-radius: 6px; background: var(--p-sup-2); cursor: zoom-in;
    display: grid; place-items: center; color: var(--p-vermelho); transition: transform .2s, box-shadow .2s;
}
.o-miniatura:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(18, 18, 18, .12); }
.o-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.o-miniatura.pdf { cursor: pointer; gap: .1rem; align-content: center; font-weight: 700; }
.o-miniatura.pdf .p-icone { width: 26px; height: 26px; }
.o-anexo-legenda { color: var(--p-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-anexo-legenda b { font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; padding: 0 .3rem; border-radius: 3px; background: var(--o-concluido-claro); color: var(--o-concluido); }
.o-anexo-legenda b.avaria { background: var(--p-vermelho-claro); color: var(--p-vermelho); }
.o-anexo-legenda b.foto { background: var(--p-fundo); color: var(--p-cinza); }
.o-galeria small { color: var(--p-cinza); font-size: .62rem; }
.o-anexo-acoes { display: flex; gap: .6rem; }
.o-anexo-acoes .p-link { font-size: .68rem; }
.o-canhoto-vazio { font-size: .76rem; color: var(--p-cinza); padding: .3rem 0; }
.o-removidos { margin-top: .8rem; font-size: .74rem; }
.o-removidos summary { cursor: pointer; color: var(--p-cinza); font-weight: 600; }
.o-removidos ul { display: grid; gap: .4rem; margin-top: .5rem; }
.o-removidos li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem .55rem; background: var(--p-sup-2); border-radius: 6px; }
.o-removidos li > span { display: grid; min-width: 0; }
.o-removidos small { color: var(--p-cinza); }

.o-observacoes, .o-historico { padding: .4rem .95rem .8rem; display: grid; gap: .1rem; }
.o-observacoes li, .o-historico li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; position: relative; font-size: .76rem; }
.o-observacoes li > span:last-child, .o-historico li > span:last-child { display: grid; min-width: 0; }
.o-historico li + li::before { content: ""; position: absolute; left: 14px; top: -10px; height: 18px; width: 2px; background: var(--p-borda); }
.o-historico strong, .o-observacoes strong { color: var(--p-preto); }
.o-historico small, .o-observacoes small { color: var(--p-cinza); font-size: .66rem; }
.o-historico li > span:last-child > span { color: var(--p-cinza); }
.o-historico li.novo { animation: o-novo 1.4s ease-out; border-radius: 6px; }
@keyframes o-novo { 0%, 35% { background: var(--p-ambar-claro); } }

.o-simulacao {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: 1rem; padding: .8rem .95rem;
    border: 1px dashed var(--p-cinza-claro); border-radius: var(--p-raio);
    background: repeating-linear-gradient(135deg, #fff 0 10px, var(--p-sup-2) 10px 20px);
}
.o-simulacao p { flex: 1; min-width: 200px; font-size: .74rem; color: var(--p-cinza); }
.o-simulacao strong { color: var(--p-preto); }

/* Envio simulado e ampliação de foto */
.o-progresso { position: relative; height: 22px; border-radius: 6px; background: var(--p-fundo); overflow: hidden; }
.o-progresso span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--o-concluido); transition: width .1s linear; }
.o-progresso b { position: relative; display: block; text-align: center; font-size: .72rem; line-height: 22px; color: var(--p-preto); mix-blend-mode: multiply; }
.p-campo input[type="file"] { padding: .35rem; font-size: .76rem; background: var(--p-sup-2); }
.o-lightbox { margin: 0; display: grid; gap: .5rem; justify-items: center; }
.o-lightbox img { max-width: 100%; max-height: 52vh; border-radius: 6px; background: #000; }
.o-lightbox figcaption { font-size: .72rem; color: var(--p-cinza); }

@container (max-width: 760px) {
    .o-grade { grid-template-columns: 1fr; }
    .o-etapa small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .o-etapa.atual .o-etapa-bola { animation: none; }
}