/* /static/css/custom_styles.css */

/*
  Paleta de Colores Koalavox
  Principal: #333e50 (Azul oscuro del logo)
  Secundario: #2b63a0 (Azul medio)
  Opcional: #255691 (Azul oscuro alternativo)
  Decorativo: #ff3300 (Naranja/Rojo del logo)
*/

:root {
    --kv-principal: #333e50;
    --kv-secundario: #2b63a0;
    --kv-opcional: #255691;
    --kv-decorativo: #ff3300;
    --kv-light: #f8f9fa;
    --kv-white: #ffffff;
    --kv-text-light: #adb5bd;
}

/* Sobreescritura de variables de Bootstrap */
body {
    --bs-primary: var(--kv-secundario);
    --bs-primary-rgb: 43, 99, 160;
    --bs-secondary: var(--kv-principal);
    --bs-secondary-rgb: 51, 62, 80;
    --bs-danger: var(--kv-decorativo);
    --bs-danger-rgb: 255, 51, 0;
    --bs-link-color: var(--kv-secundario);
    --bs-link-hover-color: var(--kv-opcional);
}

/* Estilos para la plantilla base (panel) */

/* Sidebar */
#sidebar-wrapper {
    background-color: var(--kv-principal);
}

#sidebar-wrapper .sidebar-heading {
    color: var(--kv-white);
}

#sidebar-wrapper .list-group-item {
    background-color: var(--kv-principal);
    color: var(--kv-text-light);
    border: none;
}

#sidebar-wrapper .list-group-item:hover {
    background-color: var(--kv-opcional);
    color: var(--kv-white);
}

#sidebar-wrapper .list-group-item.active {
    background-color: var(--kv-secundario);
    color: var(--kv-white);
    border-left: 4px solid var(--kv-decorativo);
}

/* Submenu Mi Empresa */
#empresaSubmenu .list-group-item {
    padding-left: 2.5rem !important;
}

#empresaSubmenu .list-group-item.active {
    font-weight: bold;
    background-color: transparent;
    color: var(--kv-white);
    border-left: none; /* El borde principal ya está en el padre */
}

/* Navbar superior */
.navbar {
    background-color: var(--kv-white) !important;
    border-bottom: 1px solid #dee2e6;
}

/* Botones */
.btn-primary {
    background-color: var(--kv-secundario);
    border-color: var(--kv-secundario);
}

.btn-primary:hover {
    background-color: var(--kv-opcional);
    border-color: var(--kv-opcional);
}

.btn-danger {
    background-color: var(--kv-decorativo);
    border-color: var(--kv-decorativo);
}

/* Estilos para la página de Login */
.login-page body {
    background-color: var(--kv-light);
}

.login-page .card-title {
    color: var(--kv-principal);
    font-weight: 600;
}

.login-page .form-label i {
    color: var(--kv-secundario);
}

.login-page .alert-danger {
    background-color: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}