/* ============================================================
   Adm Cloud Manufactura — estilos adicionales de la página del
   módulo de Manufactura. Extiende site.css (misma paleta).
   ============================================================ */

/* ---------- Mockup: orden de producción del hero ---------- */
.po-window {
    background: rgba(16, 20, 58, .72);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(37, 170, 225, .08), 0 0 60px rgba(37, 170, 225, .12);
    backdrop-filter: blur(12px);
    overflow: hidden;
    transform: rotateY(-6deg) rotateX(2deg);
    transition: transform .4s ease;
}
.po-window:hover { transform: rotateY(0) rotateX(0); }

.po-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem .6rem;
}

.po-product {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.po-product strong {
    font-size: .86rem;
    color: rgba(255, 255, 255, .94);
    line-height: 1.3;
}

.po-product span {
    font-family: var(--mono);
    font-size: .66rem;
    color: rgba(255, 255, 255, .5);
}

.po-status {
    flex-shrink: 0;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--yellow);
    background: rgba(254, 205, 8, .1);
    border: 1px solid rgba(254, 205, 8, .35);
    border-radius: 999px;
    padding: .22rem .7rem;
}

.po-stages {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .5rem 1rem .8rem;
}

.po-stage {
    display: grid;
    grid-template-columns: 86px 1fr 38px;
    align-items: center;
    gap: .6rem;
    font-size: .68rem;
    color: rgba(255, 255, 255, .7);
}

.po-stage .pct { font-family: var(--mono); text-align: right; color: var(--cyan); }

.po-bar {
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.po-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sky), var(--cyan));
}
.po-bar-fill.done { background: linear-gradient(90deg, #28C840, #6BE585); }
.po-bar-fill.zero { background: transparent; }

.po-materials {
    margin: 0 1rem .9rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .03);
    overflow: hidden;
    font-size: .68rem;
}

.po-materials .po-row {
    display: grid;
    grid-template-columns: 1.6fr .7fr .7fr;
    gap: .5rem;
    padding: .42rem .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .78);
}
.po-materials .po-row:last-child { border-bottom: 0; }

.po-materials .po-row.head {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .04);
}

.po-materials .num { font-family: var(--mono); text-align: right; }
.po-materials .num.ok { color: #6BE585; }
.po-materials .num.warn { color: var(--yellow); }

.po-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    font-size: .68rem;
    color: rgba(255, 255, 255, .55);
}

.po-foot .po-cost { display: flex; flex-direction: column; }
.po-foot .po-cost strong { font-family: var(--mono); font-weight: 500; color: #fff; }
.po-foot .po-cost.real strong { color: #6BE585; }
.po-foot .po-cost span { font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }

.po-foot .po-delta {
    font-family: var(--mono);
    font-size: .72rem;
    color: #6BE585;
    background: rgba(40, 200, 64, .1);
    border: 1px solid rgba(40, 200, 64, .35);
    border-radius: 999px;
    padding: .2rem .7rem;
}

/* ---------- Etiquetas de características (tarjetas oscuras) ---------- */
.cap-tags { display: flex; flex-wrap: wrap; gap: .4rem; }

.cap-tags span {
    font-size: .64rem;
    font-weight: 600;
    color: var(--yellow);
    background: rgba(254, 205, 8, .08);
    border: 1px solid rgba(254, 205, 8, .22);
    border-radius: 6px;
    padding: .12rem .5rem;
}

/* ---------- Flujo de producción ---------- */
.flow {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}

.flow-step {
    flex: 1 1 170px;
    max-width: 210px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.3rem 1.1rem;
    text-align: center;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.flow-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: rgba(37, 170, 225, .5);
}

.flow-icon {
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    margin: 0 auto .7rem;
    border-radius: 12px;
    background: rgba(37, 170, 225, .12);
    color: var(--cyan);
}
.flow-step:nth-child(1) .flow-icon { background: rgba(254, 205, 8, .16); color: #B78E00; }
.flow-step:nth-child(5) .flow-icon { background: rgba(40, 54, 141, .1); color: var(--blue); }
.flow-step:nth-child(9) .flow-icon { background: rgba(38, 34, 98, .1); color: var(--navy); }

.flow-step h3 { font-size: .92rem; margin-bottom: .35rem; }
.flow-step p { font-size: .76rem; color: var(--muted); }

.flow-arrow {
    align-self: center;
    flex: 0 0 auto;
    color: var(--cyan);
    display: grid;
    place-items: center;
    padding: 0 .1rem;
}

.flow-note {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    max-width: 720px;
    margin: 2.2rem auto 0;
    background: rgba(37, 170, 225, .07);
    border: 1px solid rgba(37, 170, 225, .3);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    font-size: .86rem;
    color: var(--ink);
}
.flow-note svg { flex-shrink: 0; color: var(--cyan); margin-top: .15rem; }
.flow-note strong { color: var(--blue); }

/* ---------- Componentes del BOM (chips) ---------- */
.bom-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: 2.2rem;
}

.bom-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--blue);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem 1rem;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bom-chip:hover { transform: translateY(-3px); border-color: rgba(37, 170, 225, .5); box-shadow: var(--shadow); }
.bom-chip svg { color: var(--cyan); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .flow-step { max-width: none; }
}

@media (max-width: 680px) {
    .po-stage { grid-template-columns: 72px 1fr 34px; }
    .flow { flex-direction: column; align-items: stretch; }
    .flow-step { flex-basis: auto; }
    .flow-arrow { transform: rotate(90deg); padding: .1rem 0; }
}