/* Auth Layout Styles */

.auth-background {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.auth-background main {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Card Styles */
.card {
    border: none;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    animation: slideInUp 0.5s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-body {
    padding: 2rem;
}

.card-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
}

.card-title i {
    margin-right: 0.5rem;
    color: #667eea;
}

/* Form Styles */
.form-label {
    font-weight: 500;
    color: #555;
    margin-bottom: 0.5rem;
}

.form-label i {
    margin-right: 0.5rem;
    color: #667eea;
    width: 18px;
}

.form-control {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.form-control::placeholder {
    color: #aaa;
}

.form-check-label {
    color: #555;
    margin-left: 0.25rem;
}

.input-group .btn-outline-secondary {
    border-color: #ddd;
    color: #667eea;
}

.input-group .btn-outline-secondary:hover {
    border-color: #667eea;
    background-color: #667eea;
    color: white;
}

/* Button Styles */
.btn-primary {
    background-color: #667eea;
    border-color: #667eea;
    font-weight: 500;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #5568d3;
    border-color: #5568d3;
}

.btn-primary:disabled {
    background-color: #aaa;
    border-color: #aaa;
    opacity: 0.6;
}

/* Alert Styles */
.alert {
    border-radius: 8px;
    border: none;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.alert-danger {
    background-color: #ffe5e5;
    color: #d32f2f;
}

.alert-success {
    background-color: #e5ffe5;
    color: #388e3c;
}

.alert-info {
    background-color: #e5f2ff;
    color: #1976d2;
}

.alert-warning {
    background-color: #fff9e5;
    color: #f57f17;
}

/* Text Styles */
a.text-decoration-none {
    color: #667eea;
    font-weight: 500;
    transition: color 0.3s ease;
}

a.text-decoration-none:hover {
    color: #5568d3;
    text-decoration: underline !important;
}

.text-danger {
    color: #d32f2f;
}

.text-muted {
    color: #888 !important;
}

/* Spinner */
.spinner-border {
    color: #667eea !important;
}

/* Validation Messages */
.invalid-feedback,
.text-danger.small {
    font-size: 0.85rem;
    display: block;
    margin-top: 0.25rem;
}

/* Responsive */
@media (max-width: 576px) {
    .card {
        margin: 20px;
    }

    .card-body {
        padding: 1.5rem;
    }

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

/* Min Height Container */
.min-vh-100 {
    min-height: 100vh;
}

hr {
    margin: 1.5rem 0;
    border-color: #ddd;
}

/* Specific Auth Card Classes */
.auth-page-title {
    font-weight: 800;
    color: #008000;
    transition: color 0.3s ease;
}

.auth-card-container {
    background-image: url('/img-static/fondo_25.jpg');
    background-position: center;
    background-size: cover;
    padding: 1rem;
    border: 1px solid #008000;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.auth-subtitle-primary {
    color: #006400;
    font-weight: 600;
}

.auth-subtitle-secondary {
    color: #212529;
    font-weight: 500;
}

.auth-highlight-text {
    color: #006400;
    font-weight: 600;
}

.auth-divider {
    border-color: #008000;
    opacity: 0.3;
}

.auth-navbar {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

/* ============================================
   TEMA OSCURO - PAGINAS DE LOGIN Y REGISTRO
   ============================================ */
html.dark-mode,
body.dark-mode,
html.dark-mode .auth-background,
body.dark-mode .auth-background,
html.dark-mode .auth-layout-body,
body.dark-mode .auth-layout-body,
[data-bs-theme="dark"] .auth-layout-body {
    background-color: #090d16 !important;
    color: #f4f4f5 !important;
}

.dark-mode .auth-navbar,
[data-bs-theme="dark"] .auth-navbar {
    background-color: #0f172a !important;
    border-bottom-color: #334155 !important;
}

.dark-mode .footer,
[data-bs-theme="dark"] .footer {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
    border-top-color: #334155 !important;
}

.dark-mode .auth-page-title,
[data-bs-theme="dark"] .auth-page-title {
    color: #22c55e !important;
}

.dark-mode .auth-card-container,
[data-bs-theme="dark"] .auth-card-container {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.94)), url('/img-static/fondo_25.jpg') !important;
    background-position: center !important;
    background-size: cover !important;
    border: 1px solid #10b981 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

.dark-mode .auth-subtitle-primary,
[data-bs-theme="dark"] .auth-subtitle-primary,
.dark-mode .auth-highlight-text,
[data-bs-theme="dark"] .auth-highlight-text {
    color: #10b981 !important;
}

.dark-mode .auth-subtitle-secondary,
[data-bs-theme="dark"] .auth-subtitle-secondary {
    color: #f8fafc !important;
}

.dark-mode .auth-divider,
[data-bs-theme="dark"] .auth-divider {
    border-color: #334155 !important;
    opacity: 0.8;
}

.dark-mode .card,
[data-bs-theme="dark"] .card {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
}

.dark-mode .card-body,
[data-bs-theme="dark"] .card-body {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

.dark-mode .card-footer,
[data-bs-theme="dark"] .card-footer {
    background-color: #1e293b !important;
    border-top: 1px solid #334155 !important;
    color: #94a3b8 !important;
}

.dark-mode .card-title,
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5,
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5 {
    color: #f8fafc !important;
}

.dark-mode .card-title i,
.dark-mode .form-label i,
[data-bs-theme="dark"] .form-label i {
    color: #10b981 !important;
}

.dark-mode .form-label,
.dark-mode .form-check-label,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-check-label {
    color: #e2e8f0 !important;
}

.dark-mode .form-control,
[data-bs-theme="dark"] .form-control {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

.dark-mode .form-control:focus,
[data-bs-theme="dark"] .form-control:focus {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25) !important;
}

.dark-mode .form-floating > label,
[data-bs-theme="dark"] .form-floating > label {
    color: #94a3b8 !important;
}

.dark-mode .form-floating > .form-control:focus ~ label,
.dark-mode .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-bs-theme="dark"] .form-floating > .form-control:focus ~ label,
[data-bs-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #34d399 !important;
    background-color: transparent !important;
}

.dark-mode .form-control::placeholder,
[data-bs-theme="dark"] .form-control::placeholder {
    color: #64748b !important;
}

.dark-mode .input-group .btn-outline-secondary,
[data-bs-theme="dark"] .input-group .btn-outline-secondary {
    border-color: #334155 !important;
    color: #10b981 !important;
    background-color: #1e293b !important;
}

.dark-mode .input-group .btn-outline-secondary:hover,
[data-bs-theme="dark"] .input-group .btn-outline-secondary:hover {
    border-color: #10b981 !important;
    background-color: #10b981 !important;
    color: white !important;
}

.dark-mode .btn-primary,
[data-bs-theme="dark"] .btn-primary,
.dark-mode .btn-success,
[data-bs-theme="dark"] .btn-success {
    background-color: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

.dark-mode .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:hover,
.dark-mode .btn-success:hover,
[data-bs-theme="dark"] .btn-success:hover {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
}

.dark-mode a.text-decoration-none,
.dark-mode a.text-success,
[data-bs-theme="dark"] a.text-decoration-none,
[data-bs-theme="dark"] a.text-success {
    color: #34d399 !important;
}

.dark-mode a.text-decoration-none:hover,
.dark-mode a.text-success:hover,
[data-bs-theme="dark"] a.text-decoration-none:hover,
[data-bs-theme="dark"] a.text-success:hover {
    color: #6ee7b7 !important;
}

.dark-mode a.text-secondary,
[data-bs-theme="dark"] a.text-secondary {
    color: #94a3b8 !important;
}

.dark-mode a.text-secondary:hover,
[data-bs-theme="dark"] a.text-secondary:hover {
    color: #cbd5e1 !important;
}

.dark-mode .text-muted,
[data-bs-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}

.dark-mode hr,
[data-bs-theme="dark"] hr {
    border-color: #334155 !important;
}