:root {
    --qard-bg: #F5F6F8;
    --qard-white: #FFFFFF;
    /* Marca toqer */
    --qard-primary: #241C57;
    --qard-primary-hover: #3C2F8F;
    --qard-primary-active: #2E246E;
    --qard-secondary-accent: #7EC09F;
    --qard-text-dark: #0F0F0F;
    --qard-text-muted: #4A4A4A;
    --qard-text-inverse: #FFFFFF;
    --qard-border: #E5E7EB;
    --qard-radius: 14px;
    --qard-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --qard-shadow-lg: 0 10px 30px rgba(36, 28, 87, 0.22);
}

body {
    font-family: Avenir, "Avenir Next", "Segoe UI", Arial, sans-serif;
}

.qard-btn-primary {
    background-color: var(--qard-primary);
    color: var(--qard-text-inverse);
    border-radius: var(--qard-radius);
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qard-btn-primary:hover {
    background-color: var(--qard-primary-hover);
}

.qard-btn-primary:active {
    background-color: var(--qard-primary-active);
}

.qard-btn-secondary {
    background-color: transparent;
    color: var(--qard-primary);
    border: 1px solid var(--qard-border);
    border-radius: var(--qard-radius);
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qard-btn-secondary:hover {
    background-color: rgba(36, 28, 87, 0.08);
}

/* Botón sólido estándar (login, instalador, panel, etc.) */
.qard-btn-solid {
    display: inline-block;
    background-color: var(--qard-primary);
    color: var(--qard-text-inverse) !important;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    border-radius: 0.75rem;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    box-shadow: var(--qard-shadow-lg);
}

.qard-btn-solid:hover {
    background-color: var(--qard-primary-hover);
    opacity: 0.95;
}

.qard-btn-solid:active {
    background-color: var(--qard-primary-active);
}

.qard-btn-outline {
    display: inline-block;
    background-color: transparent;
    color: var(--qard-primary) !important;
    font-weight: 700;
    border: 2px solid var(--qard-border);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    border-radius: 0.75rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.qard-btn-outline:hover {
    background-color: rgba(36, 28, 87, 0.06);
    border-color: var(--qard-primary);
}

input:focus:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--qard-primary);
}