// Quasar SCSS (& Sass) Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.

// Check documentation for full list of Quasar variables

// Your own variables (that are declared here) and Quasar's own
// ones will be available out of the box in your .vue/.scss/.sass files

// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.
// Tip: to add new colors https://quasar.dev/style/color-palette/#adding-your-own-colors
$dark-theme: true !default;
$light-theme: true !default;
$primary: #ec8916;
$secondary: $primary;
$positive: #21ba45;
$negative: #c10015;
$info: #31ccec;
$warning: #f2c037;
// Pendiente de cuadrar con la base de datos
$success: $positive;
$alert: $negative;
$white: #fff;
$dark: #3c3b3b;
// custom
$color-link: #66bfff;

.tx-color-link {
    color: $color-link !important;
}

.bg-success {
    background-color: $positive;
}

.bg-notice {
    background-color: $info;
}
.text-notice {
    color: $info;
}
.bg-alert {
    background-color: $negative;
}

body.body--light {
    --fount-color: black;
    --vn-sectionColor: #ffffff;
    background-color: #e0e0e0;
    .q-header .q-toolbar {
        color: var(--fount-color);
    }
    --vn-text: var(--fount-color);
    --vn-gray: var(--vn-sectionColor);
    --vn-label: #5f5f5f;
    --vn-dark: var(--vn-sectionColor);
    --vn-light-gray: #e7e3e3;
}

body.body--dark {
    --vn-pageColor: #222;
    --vn-SectionColor: #3c3b3b;
    background-color: var(--vn-pageColor);
    --vn-text: white;
    --vn-gray: var(--vn-SectionColor);
    --vn-label: #a8a8a8;
    --vn-dark: var(--vn-SectionColor);
    --vn-light-gray: #424242;
}

$color-spacer-light: rgba(255, 255, 255, 0.12);
$color-spacer: rgba(255, 255, 255, 0.3);
$border-thin-light: 1px solid $color-spacer-light;

$dark-shadow-color: black;
$layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
$spacing-md: 16px;