/* =====================================================
   WanderJoy - Estilos Globales (header, footer, variables)
   ===================================================== */

:root {
    --primary: #d24539;
    --primary-dk: #b83a2f;
    --primary-lt: #fae9e8;
    --secondary: #ffdb28;
    --secondary-dk: #fad20a;
    --text: #111827;
    --muted: #6B7280;
    --border: #E5E7EB;
    --bg: #F9FAFB;
    --white: #F7FAFC;
    --yellow: #ffdb28;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text);
    background: var(--white);
}

/* TOPBAR */
.topbar {
    background: #d24539;
    padding: 8px 0;
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
}
.topbar a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
}
.topbar a:hover { color: #fff; }

/* NAV */
.navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    padding-top: 15px;
    padding-bottom: 15px;
}
.navbar-brand {
    font-size: 24px;
    font-weight: 800;
    color: #d24539 !important;
}
.navbar-brand span { color: #ffdb28 !important; }
.navbar-brand span:last-child { color: #6e6e6e !important; }
.nav-link {
    font-weight: 600;
    color: var(--muted) !important;
    padding: 0.5rem 1rem;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}
.nav-link:hover, .nav-link.active {
    color: var(--yellow) !important;
    border-bottom-color: #fad20a;
}

/* BUTTONS CUSTOM */
.btn-outline-custom {
    border: 2px solid var(--border);
    color: var(--text);
    font-weight: 600;
    border-radius: 10px;
    transition: all .2s;
}
.btn-outline-custom:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: transparent;
}
.btn-primary-custom {
    background: var(--primary);
    color: #fff;
    border: none;
    font-weight: 700;
    border-radius: 10px;
    transition: background .2s;
}
.btn-primary-custom:hover {
    background: var(--primary-dk);
    color: #fff;
}

/* BADGES GLOBALES */
.badge-orange { background: var(--secondary); color: #fff; }
.badge-blue { background: var(--primary); color: #fff; }

/* ALERTAS AUTO-DISMISS */
.alert-auto {
    animation: fadeOut 0.5s ease 3s forwards;
}
@keyframes fadeOut {
    to { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
}

/* ESTADOS (badges cotización/reservación) */
.est-badge { padding: 4px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.est-pendiente { background: #FEF3C7; color: #92400E; }
.est-convertida { background: #D1FAE5; color: #065F46; }
.est-rechazada { background: #FEE2E2; color: #991B1B; }
.est-aprobada { background: #DBEAFE; color: #1E40AF; }
.est-confirmada { background: #D1FAE5; color: #065F46; }
.est-en_curso { background: #DBEAFE; color: #1E40AF; }
.est-completada { background: #D1FAE5; color: #065F46; }
.est-cancelada { background: #FEE2E2; color: #991B1B; }
.est-pago_enviado { background: #E0E7FF; color: #3730A3; }

/* ========== FOOTER ========== */
footer {
    background: var(--text);
    color: #d24539;
    padding: 60px 0 30px;
    margin-top: 40px;
}
.ft-logo { font-size: 24px; font-weight: 800; margin-bottom: 12px; }
.ft-logo span { color: #ffdb28; }
.ft-desc { font-size: 15px; color: rgba(255, 255, 255, .6); line-height: 1.7; }
.ft-col h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, .4); margin-bottom: 20px; }
.ft-col a { display: block; font-size: 15px; color: rgba(255, 255, 255, .7); text-decoration: none; margin-bottom: 12px; transition: color .2s; }
.ft-col a:hover { color: #fff; }
.ft-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px; margin-top: 40px; display: flex; justify-content: space-between; }
.ft-bottom p { font-size: 14px; color: rgba(255, 255, 255, .4); }

/* FAB WhatsApp */
.fab {
    position: fixed; bottom: 28px; right: 28px; z-index: 999;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff; border: none;
    font-size: 28px; cursor: pointer;
    box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s; text-decoration: none;
}
.fab:hover { transform: scale(1.1); color: white; }

/* ========== AUTH FORMS ========== */
.auth-wrapper {
    min-height: 70vh; display: flex; align-items: center; justify-content: center;
    padding: 60px 20px; background: var(--bg);
}
.auth-card {
    background: #fff; border-radius: 24px; padding: 48px;
    max-width: 520px; width: 100%;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .06); border: 1px solid var(--border);
}
.auth-card h2 { font-weight: 800; margin-bottom: 8px; }
.auth-card .sub { color: var(--muted); margin-bottom: 32px; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(210, 69, 57, .15); }
.btn-login, .btn-register {
    background: var(--primary); color: #fff; border: none;
    font-weight: 700; border-radius: 12px; padding: 14px;
    font-size: 16px; width: 100%; transition: background .2s;
}
.btn-login:hover, .btn-register:hover { background: var(--primary-dk); color: #fff; }

/* ========== NOSOTROS ========== */
.about-section { padding: 80px 0; }
.about-icon {
    width: 64px; height: 64px; border-radius: 16px;
    background: var(--primary-lt); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin-bottom: 16px;
}
.about-stat-card {
    text-align: center; padding: 32px 16px; border-radius: 20px;
    background: var(--primary); color: #fff;
}
.about-stat-card h3 { font-size: 2.5rem; font-weight: 800; margin-bottom: 4px; }
.about-stat-card p { font-size: 14px; opacity: .8; margin: 0; }