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

/* ---------- Mockup: panel de mantenimiento del hero ---------- */
.maint-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;
}
.maint-window:hover { transform: rotateY(0) rotateX(0); }

.maint-body {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1rem;
}

.maint-equip {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--radius-sm);
    padding: .7rem .8rem;
}

.maint-equip-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(37, 170, 225, .14);
    border: 1px solid rgba(37, 170, 225, .35);
    color: var(--cyan);
}

.maint-equip-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex: 1;
}

.me-name {
    font-size: .78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .92);
    line-height: 1.3;
}

.me-meta {
    font-size: .66rem;
    color: rgba(255, 255, 255, .55);
}

.me-status {
    flex-shrink: 0;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7EE2A8;
    background: rgba(64, 195, 123, .12);
    border: 1px solid rgba(64, 195, 123, .4);
    border-radius: 999px;
    padding: .18rem .6rem;
}

.maint-meter {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius-sm);
    padding: .7rem .8rem;
}

.meter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .68rem;
    color: rgba(255, 255, 255, .6);
}
.meter-head strong {
    font-family: var(--mono);
    font-weight: 500;
    color: var(--yellow);
}

.meter-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
.meter-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan), var(--yellow));
}

.meter-note {
    font-size: .64rem;
    color: rgba(254, 205, 8, .85);
}

.maint-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.maint-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: .55rem .7rem;
    transition: transform .2s ease, border-color .2s ease;
}
.maint-item:hover { transform: translateY(-2px); border-color: rgba(37, 170, 225, .5); }

.mi-badge {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: .6rem;
    font-weight: 500;
    border-radius: 6px;
    padding: .14rem .45rem;
    letter-spacing: .03em;
}
.mi-badge.plan {
    color: var(--cyan);
    background: rgba(37, 170, 225, .12);
    border: 1px solid rgba(37, 170, 225, .38);
}
.mi-badge.order {
    color: var(--yellow);
    background: rgba(254, 205, 8, .1);
    border: 1px solid rgba(254, 205, 8, .35);
}
.mi-badge.dispatch {
    color: #B9C2FF;
    background: rgba(120, 134, 255, .12);
    border: 1px solid rgba(120, 134, 255, .38);
}

.mi-text {
    flex: 1;
    min-width: 0;
    font-size: .72rem;
    color: rgba(255, 255, 255, .88);
    line-height: 1.35;
}

.mi-when, .mi-cost {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: .64rem;
    color: rgba(255, 255, 255, .55);
}
.mi-cost { color: var(--yellow); }

.mi-state {
    flex-shrink: 0;
    font-size: .6rem;
    font-weight: 700;
    color: var(--cyan);
    background: rgba(37, 170, 225, .12);
    border-radius: 999px;
    padding: .12rem .5rem;
}

.maint-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);
}
.maint-foot strong { color: var(--yellow); font-family: var(--mono); font-weight: 500; }

/* ---------- 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;
}

/* ---------- Ciclo de trabajo ---------- */
.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); }

/* ---------- Estados de la orden ---------- */
.status-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: 2.2rem;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    font-size: .8rem;
    font-weight: 700;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem 1.1rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.status-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.status-chip.st-open { color: var(--blue); border-color: rgba(40, 54, 141, .35); background: rgba(40, 54, 141, .06); }
.status-chip.st-inprocess { color: var(--cyan); border-color: rgba(37, 170, 225, .4); background: rgba(37, 170, 225, .07); }
.status-chip.st-revision { color: #B78E00; border-color: rgba(254, 205, 8, .45); background: rgba(254, 205, 8, .1); }
.status-chip.st-closed { color: #1E8E52; border-color: rgba(64, 195, 123, .45); background: rgba(64, 195, 123, .09); }

.status-arrow { color: var(--muted); flex-shrink: 0; }

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

@media (max-width: 680px) {
    .flow { flex-direction: column; align-items: stretch; }
    .flow-step { flex-basis: auto; }
    .flow-arrow { transform: rotate(90deg); padding: .1rem 0; }
    .mi-when, .mi-cost { display: none; }
}