/* Claymorphism Theme - Sistema de Beneficios */
/* Colores: azul #05126E, naranja #fd7c00 */

:root {
    --clay-blue: #05126E;
    --clay-blue-light: #1a2d8a;
    --clay-blue-dark: #030d4d;
    --clay-orange: #fd7c00;
    --clay-orange-light: #ff9a3d;
    --clay-orange-dark: #e06d00;
    --clay-bg: #f0f0f3;
    --clay-surface: #ffffff;
    --clay-shadow-light: rgba(255, 255, 255, 0.8);
    --clay-shadow-dark: rgba(5, 18, 110, 0.12);
}

/* Base */
body {
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecf2 100%);
    padding-bottom: 0;
}

/* Claymorphism Cards */
.card {
    background: var(--clay-surface);
    border-radius: 24px;
    border: none;
    box-shadow:
        8px 8px 20px var(--clay-shadow-dark),
        -8px -8px 20px var(--clay-shadow-light);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow:
        12px 12px 28px var(--clay-shadow-dark),
        -12px -12px 28px var(--clay-shadow-light);
}

.card-header {
    background: linear-gradient(135deg, var(--clay-blue) 0%, var(--clay-blue-light) 100%);
    color: #ffffff;
    border-radius: 24px 24px 0 0 !important;
    padding: 1.25rem 1.5rem;
}

.card-header h2,
.card-header h3,
.card-title {
    color: var(--clay-blue);
    font-weight: 700;
}

.card-header .card-title,
.card-header h2,
.card-header h3 {
    color: #ffffff;
}

/* Claymorphism Buttons */
.btn {
    border-radius: 16px;
    border: none;
    font-weight: 600;
    box-shadow:
        4px 4px 10px rgba(5, 18, 110, 0.15),
        -4px -4px 10px rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow:
        6px 6px 14px rgba(5, 18, 110, 0.2),
        -6px -6px 14px rgba(255, 255, 255, 0.9);
}

.btn:active {
    transform: translateY(1px);
    box-shadow:
        inset 3px 3px 6px rgba(0, 0, 0, 0.15),
        inset -3px -3px 6px rgba(255, 255, 255, 0.6);
}

.btn-primary {
    background: linear-gradient(135deg, var(--clay-blue) 0%, var(--clay-blue-light) 100%);
    color: #ffffff;
}

.btn-secondary {
    background: linear-gradient(135deg, var(--clay-orange) 0%, var(--clay-orange-light) 100%);
    color: #ffffff;
}

.btn-success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #ffffff;
}

.btn-danger {
    background: linear-gradient(135deg, #ba1a1a 0%, #e53935 100%);
    color: #ffffff;
}

.btn-warning {
    background: linear-gradient(135deg, var(--clay-orange-dark) 0%, var(--clay-orange) 100%);
    color: #ffffff;
}

.btn-small {
    border-radius: 12px;
}

/* Claymorphism Inputs */
.form-control,
.form-group input,
.form-group select,
.form-group textarea {
    background: var(--clay-bg);
    border-radius: 16px;
    border: 2px solid transparent;
    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.06),
        inset -4px -4px 8px rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--clay-blue);
    box-shadow:
        inset 4px 4px 8px rgba(5, 18, 110, 0.08),
        inset -4px -4px 8px rgba(255, 255, 255, 0.8),
        0 0 0 4px rgba(5, 18, 110, 0.1);
    outline: none;
}

/* Claymorphism Navbar */
.navbar {
    background: linear-gradient(135deg, var(--clay-blue) 0%, var(--clay-blue-light) 100%);
    border-radius: 0 0 24px 24px;
    box-shadow:
        0 8px 20px rgba(5, 18, 110, 0.25),
        0 -4px 10px rgba(255, 255, 255, 0.1) inset;
    top: 0;
}

.nav-brand a {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.nav-link {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    margin: 0 0.25rem;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.18);
}

.btn-logout {
    background: var(--clay-orange);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

/* Claymorphism Alerts */
.alert {
    border-radius: 20px;
    border: none;
    box-shadow:
        4px 4px 12px rgba(0, 0, 0, 0.08),
        -4px -4px 12px rgba(255, 255, 255, 0.8);
}

.alert-success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #065f46;
}

.alert-error {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #ba1a1a;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    color: #e65100;
}

.alert-info {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1565c0;
}

/* Claymorphism Tables */
.table-responsive {
    border-radius: 20px;
    box-shadow:
        4px 4px 12px rgba(0, 0, 0, 0.06),
        -4px -4px 12px rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

table {
    border-radius: 20px;
    overflow: hidden;
}

table thead {
    background: linear-gradient(135deg, var(--clay-blue) 0%, var(--clay-blue-light) 100%);
    color: #ffffff;
}

table tbody tr:hover {
    background: rgba(5, 18, 110, 0.04);
}

/* Badges */
.badge {
    border-radius: 12px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.badge-success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.badge-danger {
    background: linear-gradient(135deg, #ba1a1a 0%, #e53935 100%);
}

.badge-warning {
    background: linear-gradient(135deg, var(--clay-orange) 0%, var(--clay-orange-light) 100%);
}

.badge-info {
    background: linear-gradient(135deg, var(--clay-blue-light) 0%, #3d4db8 100%);
}

/* Bottom Menu */
.bottom-menu {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: linear-gradient(135deg, var(--clay-surface) 0%, var(--clay-bg) 100%);
    border-radius: 24px 24px 0 0;
    box-shadow:
        0 -8px 24px rgba(5, 18, 110, 0.15),
        0 -4px 10px rgba(255, 255, 255, 0.8) inset;
    padding: 0.75rem 0;
}

.bottom-menu-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 600px;
    margin: 0 auto;
}

.bottom-menu-item {
    flex: 1;
    text-align: center;
}

.bottom-menu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--clay-blue);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 0.25rem;
    border-radius: 16px;
    transition: all 0.2s ease;
}

.bottom-menu-link:hover,
.bottom-menu-link.active {
    color: var(--clay-orange);
    background: rgba(253, 124, 0, 0.1);
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.05),
        inset -2px -2px 4px rgba(255, 255, 255, 0.8);
}

.bottom-menu-link i {
    font-size: 1.35rem;
}

/* Footer */
.footer {
    background: transparent;
    color: var(--clay-blue);
    padding: 1.5rem 0;
    margin-bottom: 0;
}

/* Responsive Bottom Menu */
@media (max-width: 768px) {
    body.user-logged-in {
        padding-bottom: 80px;
    }

    .bottom-menu {
        display: block;
    }

    body.user-logged-in .footer {
        margin-bottom: 80px;
    }

    /* Adjust chatbot so it doesn't overlap with the bottom menu */
    #botty-chatbot {
        bottom: 100px !important;
        right: 16px !important;
    }

    #botty-window {
        bottom: 75px !important;
        right: 0 !important;
        width: calc(100vw - 32px) !important;
        max-width: 360px !important;
    }

    .navbar {
        border-radius: 0 0 20px 20px;
    }

    .nav-menu {
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.15);
    }
}

/* Desktop: no bottom menu, keep chat in normal position */
@media (min-width: 769px) {
    #botty-chatbot {
        bottom: 20px;
        right: 20px;
    }
}

/* Tramite pages: hide bottom menu and chatbot so wizard buttons are visible */
body.tramite-page,
body.tramite-page.user-logged-in {
    padding-bottom: 0 !important;
}

body.tramite-page .bottom-menu,
body.tramite-page #botty-chatbot {
    display: none !important;
}

body.tramite-page .footer {
    margin-bottom: 0 !important;
}

/* Home page claymorphism */
.hero-btn {
    border-radius: 16px;
    border: none;
    font-weight: 600;
    box-shadow:
        4px 4px 10px rgba(5, 18, 110, 0.15),
        -4px -4px 10px rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.hero-btn-primary {
    background: linear-gradient(135deg, var(--clay-blue) 0%, var(--clay-blue-light) 100%);
    color: #ffffff;
}

.hero-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        6px 6px 14px rgba(5, 18, 110, 0.2),
        -6px -6px 14px rgba(255, 255, 255, 0.9);
}

.hero-btn:active {
    transform: translateY(1px);
}

.how-it-works {
    background: var(--clay-surface);
    border-radius: 24px;
    border: none;
    box-shadow:
        8px 8px 20px var(--clay-shadow-dark),
        -8px -8px 20px var(--clay-shadow-light);
}

.step-card {
    background: var(--clay-bg);
    border-radius: 20px;
    border: none;
    box-shadow:
        4px 4px 10px rgba(5, 18, 110, 0.08),
        -4px -4px 10px rgba(255, 255, 255, 0.9);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step-card:hover {
    transform: translateY(-3px);
    box-shadow:
        6px 6px 14px rgba(5, 18, 110, 0.12),
        -6px -6px 14px rgba(255, 255, 255, 0.95);
}

.step-number {
    background: var(--clay-blue);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.step-icon {
    color: var(--clay-blue);
}

/* Login/Auth clay */
.auth-card,
.login-container,
.register-container {
    border-radius: 28px;
    box-shadow:
        12px 12px 30px rgba(5, 18, 110, 0.12),
        -12px -12px 30px rgba(255, 255, 255, 0.9);
}

/* Wizard claymorphism */
.beneficio-wizard .card,
.tramite-wizard .card {
    border-radius: 24px;
    box-shadow:
        8px 8px 20px var(--clay-shadow-dark),
        -8px -8px 20px var(--clay-shadow-light);
}

/* Form checks */
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    accent-color: var(--clay-blue);
}

/* Pagination or small elements */
.pagination .page-link,
.page-link {
    border-radius: 12px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08);
}