.code-cell {
    display: inline-block;
    width: 120px;
    text-align: center;
    font-family: monospace;
    background-color: #6c757d;
    color: white;
    padding: 4px;
    border-radius: 5px;
}

.status-cell {
    display: inline-block;
    width: 100px;
    text-align: center;
    padding: 4px;
    border-radius: 5px;
    font-weight: bold;
}

.status-finalizada {
    background-color: #28a745;
    color: white;
}

.status-en-curso {
    background-color: #00c853;
    color: white;
}

.status-pagada {
    background-color: #28a745;
    color: white;
}

.status-pendiente-devolucion {
    background-color: #ffc107;
    color: black;
}

.status-pendiente-seleccionar {
    background-color: #17a2b8;
    color: white;
}

.status-cancelada {
    background-color: #dc3545;
    color: white;
}

.status-suspendida {
    background-color: #ffc107;
    color: black;
}

table.table td, table.table th {
    vertical-align: middle;
    text-align: center;
}

/* Estilos generales para los estados */
.estado-box {
    display: inline-block;
    padding: 10px 15px;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    width: fit-content;
    border: 1px solid transparent;
}

/* Estado Finalizada */
.estado-finalizada {
    background-color: #d4edda; /* Verde claro */
    color: #155724; /* Verde oscuro */
    border-color: #c3e6cb; /* Borde verde */
}

/* Estado Cancelada */
.estado-cancelada {
    background-color: #f8d7da; /* Rojo claro */
    color: #721c24; /* Rojo oscuro */
    border-color: #f5c6cb;
}

/* Estado Pendiente de Cancelación */
.estado-pendiente {
    background-color: #fff3cd; /* Amarillo claro */
    color: #856404; /* Amarillo oscuro */
    border-color: #ffeeba;
}

/* Estado Caducada */
.estado-caducada {
    background-color: #f8d7da; /* Rojo claro */
    color: #721c24; /* Rojo oscuro */
    border-color: #f5c6cb;
}

/* Íconos */
.estado-box i {
    margin-right: 8px;
}

/* Ajusta el estilo del mensaje de visibilidad */
.visibility-status {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre icono y texto */
    font-weight: bold;
}

/* Asegura que los íconos se vean correctamente */
.text-success {
    color: #28a745; /* Verde */
}

.text-danger {
    color: #dc3545; /* Rojo */
}