.texto-logo {
    font-family: 'Lato', sans-serif; 
    font-weight: 400;
    text-transform: uppercase; 
    letter-spacing: 2px;       
    color: #8e7d55;        
}

.texto-logo-bold {
    font-family: 'Lato', sans-serif; 
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;       
    color: #8e7d55;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;        
}

.texto-logo-bold::after {
    content: "by [ ] KUBEWINE"; /* Aquí insertamos el texto */
    font-size: 0.6em;   /* Mucho más pequeño que el título */
    font-weight: 400;   /* Menos grosor para que no compita */
    text-transform: lowercase;
    opacity: 0.7;       /* Un poco de transparencia para suavizar */
    vertical-align: middle;
}

.texto-logo-bold:hover {
    color: #b9b099 !important; 
    text-decoration: none; 
}

/* --- AJUSTES PARA MÓVIL --- */
@media (max-width: 576px) {
    .texto-logo-bold::after {
        content: "[ ] kubewine";    /* En móvil quitamos el "by" para ahorrar espacio */
        font-size: 0.5em;
        letter-spacing: 1px;
    }
    
    .texto-logo-bold {
        font-size: 1.1rem; /* Ajustamos el tamaño del título principal en móvil */
    }
}
/*sobreescritura de rojo kube*/

:root {
    --color-principal: #ff543e;        /* Color base (Vibrante) */
    --color-oscuro: #e64c38;           /* Borde y Hover (Ligeramente más profundo) */
    --color-muy-oscuro: #cc4332;       /* Estado activo / Click */
    
    --color-claro: #ffefed;
    
}

.btn-danger, .bg-danger, .alert-danger, .badge-danger {
    background-color: var(--color-principal) !important; /* Tu color personalizado (ej: Granate) */
    border-color: var(--color-oscuro) !important;
}

.text-danger {
    color: var(--color-principal) !important;
}

.btn-danger:hover {
    background-color: var(--color-oscuro) !important;
    border-color: var(--color-muy-oscuro) !important;
}

.is-invalid, .form-control:invalid {
    border-color: var(--color-principal) !important;
}
.invalid-feedback {
    color: var(--color-principal) !important;
}


.btn-check:checked + .btn-outline-danger {
    background-color: var(--color-principal) !important;
    border-color: var(--color-oscuro) !important;
    color: #ffffff !important; /* Texto blanco para que resalte en el granate */
}


.btn-outline-danger {
    color: var(--color-principal) !important;
    border-color: var(--color-principal) !important;
}


.btn-outline-danger:hover {
    background-color: var(--color-principal) !important;
    border-color: var(--color-oscuro) !important;
    color: #ffffff !important;
}

.border-danger {
    border-color: var(--color-principal) !important;
}

/* 1. Evitar que el color de fondo se quede "pegado" por el focus */
.btn-check:focus + .btn-outline-danger, 
.btn-check:active + .btn-outline-danger {
    box-shadow: none !important; /* Quita el resplandor azul/rojo de Bootstrap */
}

/* 2. Asegurar que si NO está checked, vuelva a su estado original inmediatamente */
.btn-check:not(:checked) + .btn-outline-danger {
    background-color: transparent !important;
    color: var(--color-principal) !important;
}

/* 3. Reforzar el estado checked para que no haya ambigüedad */
.btn-check:checked + .btn-outline-danger {
    background-color: var(--color-principal) !important;
    color: white !important;
    border-color: var(--color-oscuro) !important;
}