/* 
#6F08D3 primario
#4261EF secundario
#DA20A5 terciario 
#18A5F7 cuaternario

debe haber color dark, color light

primaria roboto
secundaria poppins */
/* Definición de variables CSS para tus colores */
:root {
    --bs-primary: #6f08d3; /* Tu color Primario */
    --bs-primary-rgb: 111, 8, 211;
    --bs-secondary: #4261ef; /* Tu color Secundario */
    --bs-secondary-rgb: 66, 97, 239;
    --bs-info: #18a5f7; /* Usamos info para tu cuaternario */
    --bs-info-rgb: 24, 165, 247;
    --bs-tertiary: #da20a5; /* Color terciario personalizado */
    --bs-tertiary-rgb: 218, 32, 165;

    /* Variantes Light y Dark para algunos colores (ajusta según necesites) */
    --bs-primary-light: #9b3ef4; /* Un poco más claro que el primario */
    --bs-primary-dark: #4f0597; /* Un poco más oscuro que el primario */
    --bs-dark-custom: #212529; /* Un negro oscuro para fondos/texto */
    --bs-light-custom: #f0f0f0; /* Un gris claro para fondos/texto */
    --bs-soft-custom: #f8f6f6;

    /* tonos suaves */
    --bs-primary-emphasis: #9c4fe3;
    --bs-secondary-emphasis: #7a8ffe;
    --bs-info-emphasis: #66c7ff;

    /* Color acento */
    --bs-accent: #da20a5;
    --bs-accent-rgb: 218, 32, 165;
}

/* textos */
.text-primary {
    color: var(--bs-primary) !important;
}
.text-primary-emphasis {
    color: var(--bs-primary-emphasis) !important;
}

.text-secondary {
    color: var(--bs-secondary) !important;
}
.text-secondary-emphasis {
    color: var(--bs-secondary-emphasis) !important;
}

.text-info {
    color: var(--bs-info) !important;
}
.text-info-emphasis {
    color: var(--bs-info-emphasis) !important;
}

.text-accent {
    color: var(--bs-accent) !important;
}
/* backgrounds */
.bg-primary {
    background-color: var(--bs-primary) !important;
}
.bg-secondary {
    background-color: var(--bs-secondary) !important;
}
.bg-info {
    background-color: var(--bs-info) !important;
}
.bg-accent {
    background-color: var(--bs-accent) !important;
}

/* Opacidades */
.bg-primary-subtle {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
}
.bg-secondary-subtle {
    background-color: rgba(var(--bs-secondary-rgb), 0.15) !important;
}
.bg-info-subtle {
    background-color: rgba(var(--bs-info-rgb), 0.15) !important;
}
.bg-accent-subtle {
    background-color: rgba(var(--bs-accent-rgb), 0.15) !important;
}

/* bordes */
.border-primary {
    border-color: var(--bs-primary) !important;
}
.border-secondary {
    border-color: var(--bs-secondary) !important;
}
.border-info {
    border-color: var(--bs-info) !important;
}
.border-accent {
    border-color: var(--bs-accent) !important;
}

/* botones */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-primary:hover {
    background-color: #5a06ad;
    border-color: #5a06ad;
}

.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}
.btn-secondary:hover {
    background-color: #314ad1;
    border-color: #314ad1;
}

.btn-info {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}
.btn-info:hover {
    background-color: #1190d8;
    border-color: #1190d8;
}

.btn-accent {
    background-color: var(--bs-accent);
    border-color: var(--bs-accent);
    color: #fff;
}
.btn-accent:hover {
    background-color: #b71888;
    border-color: #b71888;
}

/* OUTLINE */
.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-outline-primary:hover {
    background-color: var(--bs-primary);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}
.btn-outline-secondary:hover {
    background-color: var(--bs-secondary);
    color: #fff;
}

.btn-outline-info {
    color: var(--bs-info);
    border-color: var(--bs-info);
}
.btn-outline-info:hover {
    background-color: var(--bs-info);
    color: #fff;
}

.btn-outline-accent {
    color: var(--bs-accent);
    border-color: var(--bs-accent);
}
.btn-outline-accent:hover {
    background-color: var(--bs-accent);
    color: #fff;
}

/* bagdes */
.badge-primary {
    background-color: var(--bs-primary);
}
.badge-secondary {
    background-color: var(--bs-secondary);
}
.badge-info {
    background-color: var(--bs-info);
}
.badge-accent {
    background-color: var(--bs-accent);
}

/* Alertas */
.alert-primary {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
}

.alert-secondary {
    background: rgba(var(--bs-secondary-rgb), 0.12);
    color: var(--bs-secondary);
    border-color: rgba(var(--bs-secondary-rgb), 0.3);
}

.alert-info {
    background: rgba(var(--bs-info-rgb), 0.12);
    color: var(--bs-info);
    border-color: rgba(var(--bs-info-rgb), 0.3);
}

.alert-accent {
    background: rgba(var(--bs-accent-rgb), 0.12);
    color: var(--bs-accent);
    border-color: rgba(var(--bs-accent-rgb), 0.3);
}

/* links */

/* Sobrescribe los colores de Bootstrap */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-dark);
    --bs-btn-hover-border-color: var(--bs-primary-dark);
    --bs-btn-active-bg: var(--bs-primary-dark);
    --bs-btn-active-border-color: var(--bs-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.text-primary {
    color: var(--bs-primary) !important;
}
.bg-primary {
    background-color: var(--bs-primary) !important;
}
/* 
.btn-secondary {
} */

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}
.text-secondary {
    color: var(--bs-secondary) !important;
}
.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-outline-primary:hover {
    background: var(--bs-primary);
    color: #fff;
}

.btn-outline-tertiary {
    color: var(--bs-tertiary);
    border-color: var(--bs-tertiary);
}
.btn-outline-tertiary:hover {
    background: var(--bs-tertiary);
    color: #fff;
}

.btn-outline-info {
    color: var(--bs-info);
    border-color: var(--bs-info);
}
.btn-outline-info:hover {
    background: var(--bs-info);
    color: #fff;
    border: 1px solid var(--bs-info);
}

.btn-outline-accent {
    color: var(--bs-accent);
    border-color: var(--bs-accent);
}
.btn-outline-accent:hover {
    background-color: var(--bs-accent);
    color: #fff;
}

/* Cards */
.list-group-item-primary {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

.list-group-item-secondary {
    background: rgba(var(--bs-secondary-rgb), 0.1);
    color: var(--bs-secondary);
}

.list-group-item-info {
    background: rgba(var(--bs-info-rgb), 0.1);
    color: var(--bs-info);
}

.list-group-item-accent {
    background: rgba(var(--bs-accent-rgb), 0.1);
    color: var(--bs-accent);
}
/* links */
a {
    color: var(--bs-secondary);
}
a:hover {
    color: var(--bs-primary);
}
/* Estilos personalizados */
/* .full-page-hero {
    min-height: 100vh;
} */
.dropdown-item-custom:hover {
    color: var(--bs-secondary) !important;
    font-weight: 600;
}

.dropdown-item-custom .plus-icon {
    color: var(--bs-primary) !important;
    font-size: 1rem;
    font-weight: bold;
}

.nav-tabs .nav-link.active {
    color: var(--bs-primary) !important;
    border-bottom: 3px solid var(--bs-primary) !important;
}
.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
}
.image-column {
    /* background-color: var(--bs-light-custom, #f8f9fa); */
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-bg-dark {
    background-color: var(--bs-dark-custom) !important;
    color: white;
}
.header-bg-dark .text-primary {
    color: white !important; /* Asegura que el texto "FACTURACION ATARAXIAPP" sea blanco */
}
.header-bg-dark .btn-outline-primary {
    --bs-btn-color: white;
    --bs-btn-border-color: white;
    --bs-btn-hover-color: var(--bs-dark-custom);
    --bs-btn-hover-bg: white;
    --bs-btn-hover-border-color: white;
}

.cards-productos .btn-btw {
    color: white;
    padding: 0.25rem 1.2rem;
    font-weight: 600;
}

.nav-icon:hover {
    background-color: transparent;
}
.auth-card {
    border: none;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background-color: white;
    overflow: hidden;
    max-width: 960px;
}

#loginCard .auth-image-half {
    background-size: cover;
    background-position: center;
    min-height: 300px;
    background-color: #f8f6f6; /* Fondo oscuro */
    display: flex;
    align-items: center;
    justify-content: center;
}

#loginCard .auth-form-half {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-control-fact-underline {
    /* border: none; */
    border: 1px solid #ced4da;
    border-radius: 0.4rem;
    padding: 0.75rem 0.5rem;
    box-shadow: none !important;
    transition: border-color 0.2s ease;
}

.form-control-fact-underline:focus {
    border-bottom-color: var(--bs-primary);
}

.form-control-fact-underline.is-invalid {
    border-bottom-color: var(--bs-primary);
}

.auth-link,
.auth-switch-link {
    color: var(--bs-secondary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.auth-link:hover,
.auth-switch-link:hover {
    color: var(--bs-primary); /* Primario en hover para destacar */
    text-decoration: underline;
}

.auth-fine-print strong {
    color: var(--bs-primary); /* Primario en texto destacado */
}

.auth-page-wrapper {
    min-height: 100vh;
    background-color: var(--bs-light-custom, #f8f9fa);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    flex-direction: column;
    overflow: hidden;
}

.auth-logo {
    width: 250px;
    height: auto;
    margin-bottom: 0.5rem;
}

/* .auth-card {
    border: none;
    border-radius: 1.5rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    background-color: white;
    overflow: hidden;
    max-width: 600px;
    width: 100%;
    padding: 3rem 2.5rem;
    z-index: 1;
} */

.btn-fact-primary {
    background-color: var(--bs-primary-dark);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    border: none;
}

.btn-fact-primary:hover {
    background-color: var(--bs-primary-light);
    color: white;
}

.btn-fact-light {
    background-color: var(--fact-light-red);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    border: none;
}

.btn-fact-light:hover {
    background-color: #007bff;
    color: white;
}

.auth-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--bs-dark-custom);
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.auth-title strong {
    color: var(--bs-primary);
    font-weight: 700;
}

.auth-subtitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-primary);
    margin-bottom: 2rem;
}

.password-eye {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--fact-placeholder-text);
}

.auth-input {
    border-radius: 12px;
    border: 1px solid #ced4da;
}

.auth-form-half h5 {
    font-size: 12px;
    margin-top: 14px;
    color: var(--bs-primary);
}

.auth-form-half h3 {
    font-size: 24px;
    margin-top: 14px;
    color: var(--bs-secondary);
}

.auth-form-half button {
    background-color: var(--bs-primary-dark);
    border: 1px solid var(--bs-primary-dark);
}

.auth-form-half button:hover {
    background-color: var(--bs-primary-light);
    border: 1px solid var(--bs-primary-light);
}

#registerCard {
    max-width: 600px;
}

.form-control-full-border {
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    padding: 0.8rem 1rem;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control-full-border:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(111, 8, 211, 0.25);
}

.form-control-full-border.is-invalid {
    border-color: var(--bs-danger);
}

.password-field-container {
    position: relative;
}

.password-field-container .form-control {
    padding-right: 3.5rem;
}

.password-eye {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #0a3967;
    z-index: 2;
    font-size: 1.1rem;
}

.password-eye:hover {
    color: var(--bs-primary);
}

.password-eye.bi-exclamation-circle-fill {
    color: var(--bs-danger);
}

.text-existing-account {
    font-size: 1rem;
    color: #6c757d;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.text-existing-account .auth-link {
    color: var(--bs-primary);
    font-weight: 600;
    text-decoration: none;
}

.text-existing-account .auth-link:hover {
    text-decoration: underline;
}

.form-check-label a {
    color: var(--bs-primary);
    font-weight: 600;
    text-decoration: none;
}

.form-check-label a:hover {
    text-decoration: underline;
}

.btn-register {
    background-color: var(--bs-tertiary);
    color: white;
    font-weight: 600;
    padding: 0.85rem 2rem;
    border-radius: 0.75rem;
    transition: background-color 0.2s ease;
    border: none;
    font-size: 1.15rem;
}

.btn-register:hover {
    background-color: darken(var(--bs-tertiary), 10%);
    color: white;
}

select {
    height: auto;
}

.badge-sin-acceso {
    background-color: var(--bs-primary);
}

@media (max-width: 575.98px) {
    .auth-card {
        padding: 2rem 1rem;
    }

    .auth-logo {
        width: 120px;
    }

    .auth-title {
        font-size: 1.5rem;
    }

    .auth-subtitle {
        font-size: 1.25rem;
    }

    .btn-register {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}
@media (max-width: 991.98px) {
    .full-page-hero {
        min-height: auto;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .text-content-column {
        padding: 1.5rem !important;
    }
    .hero-title {
        font-size: 2.2rem;
    }
    .header-nav-buttons {
        margin-bottom: 2rem;
    }
    /* En móvil, si la columna de texto está sobre un fondo oscuro, ajusta el texto */
    .header-bg-dark .text-content-column h1,
    .header-bg-dark .text-content-column p {
        color: white !important;
    }
}