/*---------------------------------------------------------------------------------------------------------------
   AUTOR          : DIEGO BUSTOS PEÑA
   FECHA CREACIÓN : 19-06-2026
   DESCRIPCIÓN    : CSS CON LOS ESTILOS DE LOS ESTADOS DE LOS DOCUMENTOS
----------------------------------------------------------------------------------------------------------------*/

/* TARJETAS DOCUMENTOS */
.card-documento {
    background    : #fff;
    border-radius : 16px;
    border-left   : 5px solid #0d4ca3;
    box-shadow    : 0 8px 18px rgba(0,0,0,.08);
    padding       : 22px;
    margin-bottom : 25px;
    transition    : all .35s ease;
}

.card-documento:hover {
    transform  : translateY(-2px);
    box-shadow : 0 12px 30px rgba(0,0,0,.12);
}

/* HEADER */
.card-documento-header {
    display     : flex;
    align-items : center;
}

.card-documento-icono {
    width           : 58px;
    height          : 58px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    margin-right    : 18px;
    font-size       : 28px;
    background      : #eef4fc;
    color           : #0d4ca3;
    transition      : all .35s ease;
}

.card-documento-info {
    flex : 1;
}

.card-documento-info h5 {
    margin      : 0;
    font-size   : 21px;
    font-weight : 700;
    color       : #0d2b5e;
}

.card-documento-info span {
    display    : block;
    margin-top : 3px;
    color      : #6b7280;
    font-size  : 14px;
}

/* ESTADOS */
.estado-documento {
    padding       : 8px 18px;
    border-radius : 30px;
    font-weight   : 600;
    font-size     : 14px;
    transition    : all .35s ease;
}

.card-documento.normal {
    border-left : 5px solid #0d4ca3;
}

.card-documento.cargado {
    border-left : 5px solid #18680A;
}

.card-documento.pendiente {
    border-left : 5px solid #f5a800;
}

.card-documento.eliminad o{
    border-left : 5px solid #dc3545;
}

.estado-documento.normal {
    background : #eef4fc;
    color      : #0d4ca3;
}

.estado-documento.cargado {
    background : #e9f8ef;
    color      : #18680A;
}

.estado-documento.pendiente {
    background : #fff8e6;
    color      : #b37a00;
}

.estado-documento.eliminado {
    background : #fdecec;
    color      : #dc3545;
}

/* SEPARADOR */
.card-documento hr {
    margin     : 22px 0;
    border     : 0;
    border-top : 1px dashed #d8dde5;
}

/* BODY */
.card-documento-body {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    gap             : 25px;
}

.archivo-info {
    display     : flex;
    align-items : flex-start;
    flex        : 1;
}

.archivo-info i {
    font-size    : 22px;
    color        : #6b7280;
    margin-right : 14px;
}

.archivo-info small {
    display       : block;
    color         : #777;
    margin-bottom : 5px;
}

.archivo-info div:last-child {
    color       : #0d4ca3;
    font-weight : 600;
}

/* TEXTO PENDIENTE */
.texto-pendiente {
    color       : #dc3545;
    font-weight : 600;
    line-height : 23px;
}

/* BOTONES */
.acciones-documento {
    display   : flex;
    gap       : 12px;
    flex-wrap : wrap;
}

.btn-doc {
    border-radius : 10px;
    padding       : 12px 22px;
    cursor        : pointer;
    font-weight   : 600;
    font-size     : 15px;
    transition    : all .25s ease;
    background    : #fff;
}

.btn-doc i {
    margin-right : 6px;
}

/* VER */
.btn-ver {
    color  : #0d4ca3;
    border : 1px solid #0d4ca3;
}

.btn-ver:hover {
    background : #0d4ca3;
    color      : #fff;
}

/* ELIMINAR */
.btn-eliminar {
    color  : #dc3545;
    border : 1px solid #dc3545;
}

.btn-eliminar:hover {
    background : #dc3545;
    color      : #fff;
}

/* GUARDAR / UPDATE */
.btn-actualiza {
    color  : #18680A;
    border : 1px solid #18680A;
}

.btn-actualiza:hover {
    background : #18680A;
    color      : #fff;
}

/* ICONO SEGÚN ESTADO */
.card-documento.cargado .card-documento-icono {
    background : #edf8ef;
    color      : #18680A;
}

.card-documento.pendiente .card-documento-icono {
    background : #fff7e3;
    color      : #f5a800;
}

.card-documento.normal .card-documento-icono {
    background : #eef4fc;
    color      : #0d4ca3;
}

.card-documento.eliminado .card-documento-icono {
    background : #fdecec;
    color      : #dc3545;
}

/* RESPONSIVE */
@media(max-width:768px) {

    .card-documento-body {
        flex-direction : column;
        align-items    : flex-start;
    }

    .acciones-documento {
        width      : 100%;
        margin-top : 15px;
    }

    .btn-doc {
        flex       : 1;
        text-align : center;
    }

}