/* QuickFactu design system
   Este es el punto único de integración visual entre Bootstrap, MudBlazor y
   Telerik. Las librerías siguen presentes porque hay componentes activos de
   las tres, pero comparten color, tipografía, foco, radios y espaciado. */
:root {
    --qf-primary: #0078d4;
    --qf-primary-hover: #005a9e;
    --qf-success: #107c10;
    --qf-warning: #ca5010;
    --qf-danger: #d13438;
    --qf-surface: #ffffff;
    --qf-surface-muted: #f5f6f8;
    --qf-text: #1e293b;
    --qf-text-muted: #52606d;
    --qf-border: #d1d9e0;
    --qf-radius: 8px;
    --qf-radius-sm: 4px;
    --qf-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    --qf-font: "Montserrat", "Segoe UI", Arial, sans-serif;

    --bs-primary: var(--qf-primary);
    --bs-success: var(--qf-success);
    --bs-warning: var(--qf-warning);
    --bs-danger: var(--qf-danger);
    --bs-border-color: var(--qf-border);
    --bs-body-color: var(--qf-text);
    --bs-body-bg: var(--qf-surface-muted);

    --mud-palette-primary: var(--qf-primary);
    --mud-palette-success: var(--qf-success);
    --mud-palette-warning: var(--qf-warning);
    --mud-palette-error: var(--qf-danger);
    --mud-default-borderradius: var(--qf-radius);
    --mud-typography-default-family: var(--qf-font);

    --kendo-color-primary: var(--qf-primary);
    --kendo-color-primary-hover: var(--qf-primary-hover);
    --kendo-color-success: var(--qf-success);
    --kendo-color-warning: var(--qf-warning);
    --kendo-color-error: var(--qf-danger);
    --kendo-color-app-surface: var(--qf-surface-muted);
    --kendo-color-surface: var(--qf-surface);
    --kendo-color-on-app-surface: var(--qf-text);
    --kendo-color-border: var(--qf-border);
    --kendo-font-family: var(--qf-font);
    --kendo-border-radius-md: var(--qf-radius-sm);
    --kendo-border-radius-lg: var(--qf-radius);
}

html, body, button, input, select, textarea {
    font-family: var(--qf-font);
}

body {
    color: var(--qf-text);
    background: var(--qf-surface-muted);
}

.card, .editor-card, .k-card, .mud-paper {
    border-radius: var(--qf-radius);
}

.btn, .form-control, .form-select, .k-button, .mud-button-root {
    border-radius: var(--qf-radius-sm);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.k-focus,
.mud-input:focus-within {
    outline: 3px solid rgba(0, 120, 212, .35);
    outline-offset: 2px;
}

.btn-primary, .k-button-solid-primary {
    background-color: var(--qf-primary);
    border-color: var(--qf-primary);
}

.btn-primary:hover, .k-button-solid-primary:hover {
    background-color: var(--qf-primary-hover);
    border-color: var(--qf-primary-hover);
}