/* =====================================================================
   Protótipo do Portal · Cores de etapa, topo e tela de entrada
   Cores validadas para daltonismo no portal real.
   ===================================================================== */

.proto-portal {
    --o-entrada: #c77700; --o-entrada-claro: #fff4e0;
    --o-rota: #2f6fd6; --o-rota-claro: #e9f0fc;
    --o-transito: #86198f; --o-transito-claro: #f3e8f4;
    --o-concluido: #0d6e3b; --o-concluido-claro: #e6f9ee;
}

/* ---------- Pílula de etapa e selo de avaria ---------- */
.o-pilula {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .15rem .6rem; border-radius: 999px;
    font-size: .7rem; font-weight: 700; white-space: nowrap;
    background: var(--o-entrada-claro); color: #9a5c00;
}
.o-pilula::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--o-entrada); }
.o-pilula.rota { background: var(--o-rota-claro); color: var(--o-rota); }
.o-pilula.rota::before { background: var(--o-rota); }
.o-pilula.transito { background: var(--o-transito-claro); color: var(--o-transito); }
.o-pilula.transito::before { background: var(--o-transito); }
.o-pilula.concluido { background: var(--o-concluido-claro); color: var(--o-concluido); }
.o-pilula.concluido::before { background: var(--o-concluido); }
.o-selo-avaria {
    display: inline-block; padding: .05rem .45rem; border-radius: 4px;
    background: var(--p-vermelho-claro); color: var(--p-vermelho); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- Topo: cliente atual ---------- */
.o-cliente-atual { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; color: var(--p-cinza); }
.o-cliente-atual select {
    max-width: 210px; padding: .35rem .5rem; border: 1px solid var(--p-borda-forte); border-radius: 6px;
    background: #fff; font-family: inherit; font-size: .78rem; font-weight: 600; color: var(--p-preto);
}
.o-chip-cliente {
    display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem .25rem .3rem;
    border: 1px solid var(--p-borda-forte); border-radius: 999px; font-size: .76rem; font-weight: 600; color: var(--p-preto); white-space: nowrap;
}
.o-chip-cliente b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--p-preto); color: #fff; font-size: .68rem; }

/* ---------- Entrar ---------- */
.o-entrar { display: grid; grid-template-columns: 1.05fr 1fr; height: 100%; }
.o-entrar-marca {
    position: relative; overflow: hidden;
    background: var(--p-preto); color: #fff;
    padding: 2rem; display: flex; flex-direction: column; justify-content: center; gap: .7rem;
}
.o-entrar-marca::after {
    content: ""; position: absolute; right: -30%; bottom: -45%; width: 90%; aspect-ratio: 1;
    border-radius: 50%; border: 36px solid rgba(181, 8, 8, .3); pointer-events: none;
}
.o-entrar-marca img { width: 180px; }
.o-entrar-marca h4 { color: #fff; font-size: 1.5rem; font-weight: 800; margin-top: .4rem; }
.o-entrar-marca p { color: rgba(255, 255, 255, .72); max-width: 32ch; font-size: .82rem; }
.o-entrar-marca .o-entrar-transito { font-size: .72rem; position: relative; z-index: 1; }
.o-entrar-transito strong { color: #e7b3ec; }
.o-entrar-form { display: flex; flex-direction: column; justify-content: center; gap: .75rem; padding: 1.6rem; background: #fff; overflow: auto; }
.o-entrar-form h5 { margin: 0; font-size: 1.3rem; color: var(--p-preto); font-weight: 800; }
.o-senha { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.o-senha .p-link { font-size: .72rem; }
.o-entrar-botao { padding: .7rem 1rem; font-size: .82rem; }
.o-entrar-nota { font-size: .7rem; color: var(--p-cinza); }

/* Ilustração: a carga anda pelas três etapas, em laço */
.o-ilustracao { width: 100%; max-width: 320px; position: relative; z-index: 1; overflow: visible; }
.o-ilustracao text { fill: rgba(255, 255, 255, .75); font-size: 11px; font-family: inherit; font-weight: 600; }
.o-il-trilho { stroke: rgba(255, 255, 255, .2); stroke-width: 3; }
.o-il-feito { stroke: #e7a23a; stroke-width: 3; stroke-dasharray: 220; stroke-dashoffset: 220; animation: o-il-feito 5s ease-in-out infinite; }
@keyframes o-il-feito { 0%, 8% { stroke-dashoffset: 220; } 70%, 100% { stroke-dashoffset: 0; } }
.o-il-etapa circle { fill: #1e1e1e; stroke: rgba(255, 255, 255, .3); stroke-width: 2; }
.o-il-etapa path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.o-il-etapa.entrada circle { stroke: var(--o-entrada); fill: rgba(199, 119, 0, .25); }
.o-il-etapa.rota circle { animation: o-il-rota 5s infinite; }
.o-il-etapa.concluido circle { animation: o-il-fim 5s infinite; }
@keyframes o-il-rota { 0%, 35% { stroke: rgba(255, 255, 255, .3); fill: #1e1e1e; } 40%, 100% { stroke: var(--o-rota); fill: rgba(47, 111, 214, .3); } }
@keyframes o-il-fim { 0%, 68% { stroke: rgba(255, 255, 255, .3); fill: #1e1e1e; } 72%, 100% { stroke: #19b562; fill: rgba(25, 181, 98, .3); } }
.o-il-caminhao { fill: #fff; animation: o-il-caminhao 5s ease-in-out infinite; }
.o-il-caminhao circle { fill: #1e1e1e; stroke: #fff; stroke-width: 1.5; }
@keyframes o-il-caminhao { 0%, 8% { transform: translate(40px, 36px); } 70%, 100% { transform: translate(260px, 36px); } }

@container (max-width: 760px) {
    .o-entrar { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow: auto; }
    .o-entrar-marca { padding: 1.3rem; }
    .o-entrar-marca img { width: 140px; }
    .o-entrar-marca h4 { font-size: 1.2rem; }
    .o-entrar-form { padding: 1.3rem; overflow: visible; }
    .o-cliente-atual span { display: none; }
    .o-cliente-atual select { max-width: 140px; }
    .o-chip-cliente { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
    .o-il-feito, .o-il-caminhao, .o-il-etapa circle { animation: none; }
    .o-il-feito { stroke-dashoffset: 0; }
}