/**
 * Sirius – botones y acentos (cargar después de app.css / tailwind / web.css)
 */

.border-accent { border-color: var(--color-accent) !important; }
.bg-accent { background-color: var(--color-accent) !important; color: var(--color-accent-text) !important; }
.hover\:bg-accent:hover { background-color: var(--color-accent-hover) !important; }
.text-accent { color: var(--color-accent) !important; }
.hover\:text-accent:hover { color: var(--color-accent-hover) !important; }
.focus\:ring-accent:focus { --tw-ring-color: var(--color-accent); border-color: var(--color-accent); }

.btn-submit,
.btn-verificacion,
.btn-ancho,
.btn-adoptar,
.btn-orange,
.filter-button-ad,
.add-button,
.admin .btn-orange {
    background-color: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
    border-color: var(--color-accent) !important;
}

.btn-submit:hover,
.btn-verificacion:hover,
.btn-ancho:hover,
.btn-adoptar:hover,
.btn-orange:hover,
.filter-button-ad:hover,
.add-button:hover,
.admin .btn-orange:hover {
    background-color: var(--color-accent-hover) !important;
    color: var(--color-accent-text) !important;
}

.styled-button {
    border-color: var(--color-accent) !important;
    color: #111 !important;
}

.styled-button:hover {
    background-color: var(--color-accent-soft) !important;
    color: #111 !important;
}

.button-icon {
    color: var(--color-accent) !important;
}

.btn-regist,
.btn-nueva {
    color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

.support-button {
    border-color: var(--color-accent) !important;
}

.support-button:hover {
    background-color: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
}

.btn-planes,
.btn-registro {
    color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

.btn-rojo2,
.cookie-button.primary {
    background-color: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
    border-color: var(--color-accent) !important;
}

.btn-rojo2:hover,
.cookie-button.primary:hover {
    background-color: var(--color-accent-hover) !important;
}

.cookie-switch input:checked + .slider {
    background: var(--color-accent) !important;
}

.btn-sirius {
    display: inline-block;
    background: linear-gradient(to right, var(--color-accent), var(--color-accent-hover)) !important;
    color: #ffffff !important;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-decoration: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: opacity 0.2s;
}

.btn-sirius:hover {
    opacity: 0.92;
    color: var(--color-accent-text) !important;
}

.btn-sirius-outline {
    background: transparent !important;
    border: 2px solid var(--color-accent) !important;
    color: var(--color-accent) !important;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-decoration: none !important;
}

.test-btn-next {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
}

.test-btn-next:hover {
    background: var(--color-accent-hover) !important;
}

.test-option.selected,
.test-checkbox-item.selected {
    border-color: var(--color-accent) !important;
    background: var(--color-accent-soft) !important;
}

.test-checkbox-item:hover {
    border-color: var(--color-accent) !important;
    background: rgba(135, 206, 235, 0.05) !important;
}

.test-form-group select:focus {
    border-color: var(--color-accent) !important;
}

.btn-sirius.border-0 {
    border: none;
}

.btn-sirius.cursor-pointer,
button.btn-sirius {
    cursor: pointer;
}

/* Login con fondo de mar */
html:has(.login-sea-page),
.login-sea-page {
    min-height: 100vh;
    background: transparent !important;
    background-color: transparent !important;
}

.login-sea-page .main-container {
    position: relative;
    z-index: 0;
    min-height: 100vh;
    width: 100%;
    padding: 1.5rem 1rem 2rem;
    background: transparent !important;
    overflow: hidden;
}

.login-sea-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #5a8fa8;
    background-size: cover;
    background-position: center 68%;
    background-repeat: no-repeat;
}

.login-sea-content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-sea-page .logo-login {
    margin-top: 0rem;
}

.login-sea-page .logo-login img {
    filter: brightness(0) invert(1);
}

.login-sea-page .main-container > .login-sea-content > .mb-5 p,
.login-sea-page .login-sea-content > .mb-5 p {
    color: #ffffff;
    font-size: 1.05rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.login-sea-page .form-box {
    background-color: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 40px rgba(15, 59, 92, 0.18);
}

.login-sea-page .form-box .form-control {
    background-color: #ffffff !important;
    border-color: #cccccc !important;
    color: #1f2937 !important;
}

.login-sea-page .form-box .form-control:focus {
    background-color: #ffffff !important;
    border-color: #999999 !important;
}

.login-sea-page .form-box .btn-submit {
    opacity: 1 !important;
}

@media (max-width: 767.98px) {
    .login-sea-bg {
        background-position: center 62%;
    }

    .login-sea-page .logo-login {
        margin-top: 0.5rem;
    }
}