:root {

    --superior: #F4a60f;
    --menu: #009edd;
    --submenu: #2337C7;

}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.hover {

    background-color: var(--superior) !important;
}

.box.box-success {

    border-top-color: var(--superior);
}

.skin-green .main-header .navbar {
    background-color: var(--superior);
}

.skin-green .main-header .logo {
    background-color: var(--superior);
    color: #fff;
    border-bottom: 0 solid transparent
}

.skin-green .main-header .logo:hover {
    background-color: var(--superior);
}

.skin-green .sidebar-menu>li:hover>a,
.skin-green .sidebar-menu>li.active>a {
    color: #ffffff;
    background: var(--superior);
    border-left-color: #ffffff
}

.box.box-primary {
    border-top-color: var(--menu)
}

.btn-default:hover,
.btn-default:active,
.btn-default.hover {
    background-color: #e7e7e7 !important
}

.btn-primary {
    background-color: var(--menu);
    border-color: #367fa9
}

.skin-green .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--menu)
}

.skin-green .main-header li.user-header {
    background-color: var(--menu);
}

.skin-green .wrapper,
.skin-green .main-sidebar,
.skin-green .left-side {
    background-color: var(--menu);
}

.skin-green .sidebar-menu>li>.treeview-menu {
    margin: 0 1px;
    background: var(--submenu);
}

.skin-green .treeview-menu>li>a {
    color: #8aa4af
}

/* Estilo para el contenedor de la ventana de información del cliente */

#customer-info {
    padding: 20px;
}

#customer-info-content {
    padding: 15px;
    /* Ajusta el margen interior para que coincida con el resto de la interfaz */
    margin: 10px 0;
    /* Margen superior e inferior para separación */
    border: 1px solid #ddd;
    /* Borde sutil */
    border-radius: 4px;
    /* Bordes redondeados */
}

/* Estilo para la tabla de información del cliente */
.customer-info-table {
    padding: 15px;
    width: 100%;
}

/* Estilo para las celdas de la tabla */
.customer-info-table td {
    padding: 5px 0;
}

/* Estilo para las etiquetas (Nombre, Total de compras, etc.) */
.customer-info-table .info-label {
    font-weight: bold;
    text-align: left;
}

/* Estilo para los valores */
.customer-info-table .info-value {
    text-align: left;
}

.info-points {
    font-weight: bold;
}