@import url('./variables.css');

body {
    height: auto;
}
.tituloOrden {
    text-align: center;
}

.textData {
    width: max-content;
    padding: 20px 10px;
}

.containerData {
    flex-direction: column;
    align-items: flex-start;
}

.valor {
    color: black;
}

.btnRechazado {
    background: red;
    box-shadow: 0 10px 30px 0px rgba(184, 70, 70, 0.5);
    -moz-box-shadow: 0 10px 30px 0px rgba(184, 70, 70, 0.5);
    -webkit-box-shadow: 0 10px 30px 0px rgba(184, 70, 70, 0.5);
    -o-box-shadow: 0 10px 30px 0px rgba(184, 70, 70, 0.5);
    -ms-box-shadow: 0 10px 30px 0px rgba(184, 70, 70, 0.5);
  
}

.btnsGenerarOrden {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.documentosAdjuntos {
    width: 100%;
}

.documentosAdjuntos .wrap-input100{
    margin: auto;
} 

.imagenAdjunta {
    width: 200PX;
    margin: 10px;
    /* border: 2px solid red; */
    border-radius: 10px;
    box-shadow: 1px 2px 14px 0px #999999;

}

.containerImg {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-bottom: 20px;
    width: 100%;
    margin: 20px  auto;
}

.ordenContainer {
    width: 80vw;
    margin-top: 20px;
    max-width: 800px;
    height: min-content;
}

.comentarios,.grupos {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid #999999;
    margin: 20px 0;
    box-shadow: 2px 2px 14px 0px #999999;
    resize: none;
    padding: 20px;

    font-family: Poppins-Medium;
    font-size: 16px;
    color: #999999;

    white-space: pre-wrap; /* conserva saltos de línea y espacios, y permite wrap */
    word-wrap: break-word;
}
.containerEstadoOrden{
    text-align: center;
}

.orden-aprobada,.orden-rechazada,.orden-pendienteSinOP{
    font-size: 30px;
    font-weight: 700;
    margin: 0 auto;
}

.orden-aprobada {
    color: #57b846;
}

.orden-rechazada {
    color: #ff0000;
}

.orden-pendienteSinOP {
    color: #666666;
  }

.orden-pendiente{
    font-size: 25px;
    margin: 0 auto;
    padding: 10px;
    font-weight: 600;
    color: #999999;
}
/* =========================================================
   SUP-TES-1.2 — IDENTIDAD VISUAL NUEVA / CORRECCIÓN
========================================================= */

.op-clasificacion {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.op-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .45px;
    line-height: 1;
}

.op-badge--nueva {
    background: #edf4ff;
    color: #315f9b;
    border: 1px solid #cfe0f7;
}

.op-badge--correccion {
    background: #f2edff;
    color: #6145a8;
    border: 1px solid #d9cff7;
}

.op-referencia-correccion {
    color: #625a76;
    font-size: 11px;
    line-height: 1.35;
}

.ordenStyle.orden-correccion {
    border-top: 4px solid #7c5cc4;
}

.op-correccion-detalle {
    width: min(100%, 720px);
    margin: 0 auto 18px;
    padding: 14px 16px;
    border: 1px solid #d8cff3;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8f5ff 0%, #ffffff 100%);
    color: #51466b;
}

.op-correccion-detalle__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #6145a8;
    font-weight: 700;
}

.op-correccion-detalle__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    font-size: 12px;
}

.op-correccion-detalle__grid span {
    color: #7a718d;
}

.op-correccion-detalle__form {
    margin-top: 14px;
}

.op-correccion-detalle__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #bdaee7;
    border-radius: 9px;
    background: #fff;
    color: #6145a8;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.op-correccion-detalle__link:hover,
.op-correccion-detalle__link:focus-visible {
    background: #efe9fc;
    outline-color: #6145a8;
}

.op-comentario-decision {
    max-width: 100%;
}

.op-comentario-decision .comentarios {
    color: #484848;
}

@media (max-width: 640px) {
    .op-correccion-detalle__grid {
        grid-template-columns: 1fr;
    }
}

.ordenStyle {
    min-height: 260px;
    height: auto;
}