/**
 * MegaTecno Gamification — Frontend Styles
 * Tema futurista: Blanco + Naranja + Gris Oscuro
 */

:root {
    --mt-orange:      #FF6B2B;
    --mt-orange-lt:   #FF8F5E;
    --mt-orange-pale: #FFF0EB;
    --mt-dark:        #1E1E2E;
    --mt-dark-mid:    #2A2A3E;
    --mt-dark-soft:   #3A3A52;
    --mt-white:       #FFFFFF;
    --mt-gray:        #6B7280;
    --mt-gray-lt:     #F3F4F6;
    --mt-success:     #22C55E;
    --mt-radius:      16px;
}

/* ═══════ MODALES ═══════ */
.mt-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(30, 30, 46, 0.75);
    backdrop-filter: blur(8px);
}
.mt-modal.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
    animation: mt-fadeIn 0.25s ease;
}
@keyframes mt-fadeIn { from { opacity: 0; } to { opacity: 1; } }

.mt-modal-content {
    background: var(--mt-white);
    border-radius: 24px;
    max-width: 500px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: mt-slideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 24px 60px rgba(30,30,46,0.3);
}
@keyframes mt-slideUp {
    from { transform: translateY(40px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.mt-modal-close {
    position: absolute;
    top: 18px; right: 18px;
    background: var(--mt-gray-lt);
    border: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    color: var(--mt-dark);
    transition: all 0.2s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mt-modal-close:hover { background: #FEE2E2; color: #EF4444; transform: rotate(90deg); }

/* ═══════ BOTONES FLOTANTES ═══════ */
.mt-floating-btn {
    position: fixed;
    width: 64px; height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 9998;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 6px 24px rgba(30,30,46,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mt-wheel-btn {
    bottom: 110px; right: 24px;
    background: linear-gradient(135deg, var(--mt-orange) 0%, var(--mt-orange-lt) 100%);
    animation: mt-bounce 2.5s ease infinite;
}
.mt-chat-btn {
    bottom: 24px; right: 24px;
    background: linear-gradient(135deg, var(--mt-dark) 0%, var(--mt-dark-mid) 100%);
}
.mt-floating-btn:hover { transform: scale(1.12); }

.mt-pulse-ring {
    position: absolute;
    inset: -6px;
    border: 3px solid var(--mt-orange);
    border-radius: 50%;
    animation: mt-pulse 2s infinite;
    opacity: 0.5;
}
@keyframes mt-pulse {
    0% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 0.15; }
    100% { transform: scale(0.9); opacity: 0.6; }
}
@keyframes mt-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.mt-notification-badge {
    position: absolute;
    top: 2px; right: 2px;
    background: var(--mt-orange);
    color: var(--mt-white);
    border-radius: 50%;
    width: 22px; height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    animation: mt-badge-pop 0.4s ease;
}
@keyframes mt-badge-pop {
    0% { transform: scale(0); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ═══════ RULETA ═══════ */
.mt-wheel-container {
    padding: 36px 28px;
    text-align: center;
    background: linear-gradient(180deg, var(--mt-gray-lt) 0%, var(--mt-white) 40%);
}
.mt-wheel-header h2 {
    font-size: 24px;
    margin: 0 0 8px;
    color: var(--mt-dark);
    font-weight: 800;
}
.mt-wheel-header p { color: var(--mt-gray); margin: 0 0 16px; font-size: 14px; }

.mt-spins-counter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mt-dark);
    color: var(--mt-white);
    padding: 10px 22px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 4px 16px rgba(30,30,46,0.3);
}
.mt-spins-icon { font-size: 20px; }
#mt-spins-remaining { font-size: 22px; font-weight: 800; color: var(--mt-orange); }

.mt-wheel-wrapper {
    position: relative;
    margin: 32px auto;
    width: 340px; height: 340px;
}
.mt-wheel-pointer {
    position: absolute;
    top: -24px; left: 50%;
    transform: translateX(-50%);
    font-size: 48px;
    z-index: 10;
    color: var(--mt-orange);
    filter: drop-shadow(0 3px 6px rgba(30,30,46,0.3));
}
#mt-wheel-canvas {
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 8px 24px rgba(30,30,46,0.15));
}

.mt-spin-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90px; height: 90px;
    border-radius: 50%;
    border: 5px solid var(--mt-white);
    background: linear-gradient(135deg, var(--mt-orange), var(--mt-orange-lt));
    color: var(--mt-white);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 6px 20px rgba(255,107,43,0.45);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.mt-spin-btn:hover:not(:disabled) { transform: translate(-50%,-50%) scale(1.08); }
.mt-spin-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mt-spin-btn.spinning { animation: mt-btn-pulse 0.5s infinite; }
@keyframes mt-btn-pulse {
    0%, 100% { transform: translate(-50%,-50%) scale(1); }
    50% { transform: translate(-50%,-50%) scale(1.06); }
}

/* Email form */
.mt-wheel-form {
    margin-top: 24px;
    padding: 22px;
    background: var(--mt-gray-lt);
    border-radius: 16px;
}
.mt-wheel-form h3 { margin: 0 0 14px; color: var(--mt-dark); font-size: 17px; }
#mt-user-email {
    width: 100%;
    padding: 13px 18px;
    border: 2px solid #E5E7EB;
    border-radius: 40px;
    font-size: 15px;
    outline: none;
    margin-bottom: 12px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
#mt-user-email:focus { border-color: var(--mt-orange); box-shadow: 0 0 0 3px rgba(255,107,43,0.12); }

.mt-primary-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--mt-orange), var(--mt-orange-lt));
    color: var(--mt-white);
    border: none;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 5px 18px rgba(255,107,43,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mt-primary-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,107,43,0.55); }

/* Prize result */
.mt-prize-display {
    margin-top: 24px;
    padding: 32px 24px;
    background: linear-gradient(135deg, #FFF7ED, #FFF0EB);
    border: 2px solid var(--mt-orange-pale);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.mt-prize-display h3 { font-size: 28px; margin: 0 0 10px; color: var(--mt-orange); }
.mt-prize-display p { font-size: 15px; color: var(--mt-dark); margin: 0 0 20px; line-height: 1.6; }

/* ═══════ CHATBOT ═══════ */
.mt-chat-modal .mt-modal-content {
    max-width: 420px;
    height: 580px;
    display: flex;
    flex-direction: column;
}
.mt-chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
}
.mt-chat-header {
    padding: 22px;
    background: linear-gradient(135deg, var(--mt-dark) 0%, var(--mt-dark-mid) 100%);
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--mt-white);
}
.mt-chat-avatar {
    width: 50px; height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.25);
    flex-shrink: 0;
}
.mt-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mt-chat-info h3 { margin: 0; font-size: 17px; font-weight: 700; }
.mt-chat-status { display: flex; align-items: center; gap: 5px; font-size: 12px; margin-top: 3px; opacity: 0.8; }
.mt-status-dot { width: 7px; height: 7px; background: var(--mt-success); border-radius: 50%; animation: mt-status-pulse 2s infinite; }
@keyframes mt-status-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.mt-chat-messages {
    flex: 1;
    padding: 18px;
    overflow-y: auto;
    background: #FAFAFA;
}
.mt-chat-messages::-webkit-scrollbar { width: 5px; }
.mt-chat-messages::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 3px; }

.mt-message { display: flex; gap: 10px; margin-bottom: 16px; animation: mt-msg-slide 0.25s ease; }
@keyframes mt-msg-slide { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.mt-user-message { flex-direction: row-reverse; }
.mt-message-avatar { font-size: 22px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mt-message-content { max-width: 72%; }
.mt-bot-message .mt-message-content {
    background: var(--mt-white);
    padding: 10px 14px;
    border-radius: 16px 16px 16px 4px;
    box-shadow: 0 2px 6px rgba(30,30,46,0.08);
}
.mt-user-message .mt-message-content {
    background: linear-gradient(135deg, var(--mt-orange), var(--mt-orange-lt));
    color: var(--mt-white);
    padding: 10px 14px;
    border-radius: 16px 16px 4px 16px;
    box-shadow: 0 2px 6px rgba(255,107,43,0.3);
}
.mt-message-content p { margin: 0; font-size: 14px; line-height: 1.5; }

/* Quick replies */
.mt-quick-replies { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.mt-quick-reply {
    padding: 6px 13px;
    background: var(--mt-orange-pale);
    color: var(--mt-orange);
    border: 1px solid rgba(255,107,43,0.2);
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}
.mt-quick-reply:hover { background: var(--mt-orange); color: var(--mt-white); }

/* Chat input */
.mt-chat-input-wrapper {
    padding: 14px;
    background: var(--mt-white);
    border-top: 1px solid #F3F4F6;
    display: flex;
    gap: 8px;
    align-items: center;
}
.mt-voice-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--mt-orange-pale);
    color: var(--mt-orange);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mt-voice-btn:hover { background: var(--mt-orange); color: var(--mt-white); }
.mt-voice-btn.recording { animation: mt-recording 1.2s infinite; }
@keyframes mt-recording { 0%,100% { background: var(--mt-orange); color: var(--mt-white); } 50% { background: #EF4444; } }

#mt-chat-input {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid #E5E7EB;
    border-radius: 22px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}
#mt-chat-input:focus { border-color: var(--mt-orange); }

.mt-send-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--mt-dark), var(--mt-dark-mid));
    color: var(--mt-white);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mt-send-btn:hover { transform: scale(1.1); background: linear-gradient(135deg, var(--mt-orange), var(--mt-orange-lt)); }

/* Typing */
.mt-typing-indicator { padding: 10px 18px; }
.mt-typing-indicator span {
    display: inline-block;
    width: 7px; height: 7px;
    background: #D1D5DB;
    border-radius: 50%;
    margin: 0 2px;
    animation: mt-typing 1.4s infinite;
}
.mt-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.mt-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes mt-typing { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }

/* ═══════ BANNERS FLOTANTES ═══════ */
.mt-floating-promos {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9997;
    background: linear-gradient(135deg, var(--mt-dark) 0%, var(--mt-dark-mid) 100%);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 2px 12px rgba(30,30,46,0.25);
}
.mt-promo-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mt-white);
    font-weight: 600;
    font-size: 14px;
}
.mt-promo-icon { font-size: 20px; }
.mt-promo-close {
    background: rgba(255,255,255,0.12);
    border: none;
    color: var(--mt-white);
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    margin-left: 8px;
}
.mt-promo-close:hover { background: rgba(255,255,255,0.25); }

/* ═══════ SOCIAL PROOF ═══════ */
.mt-social-proof {
    position: fixed;
    bottom: 100px; left: 18px;
    z-index: 9996;
    background: var(--mt-white);
    padding: 14px 18px;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(30,30,46,0.15);
    max-width: 280px;
    border-left: 3px solid var(--mt-orange);
    animation: mt-proof-slide 0.4s ease;
}
@keyframes mt-proof-slide { from { transform: translateX(-110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.mt-proof-content { display: flex; gap: 10px; align-items: flex-start; }
.mt-proof-icon { width: 26px; height: 26px; flex-shrink: 0; }
.mt-proof-text { font-size: 13px; line-height: 1.4; color: var(--mt-dark); }
.mt-proof-text strong { font-weight: 700; }
.mt-proof-time { color: var(--mt-gray); font-size: 11px; display: block; margin-top: 3px; }

/* ═══════ BARRA ENVÍO GRATIS ═══════ */
.mt-shipping-bar {
    position: fixed;
    top: 38px; left: 0; right: 0;
    background: linear-gradient(135deg, var(--mt-success), #4ADE80);
    color: var(--mt-white);
    z-index: 9995;
    padding: 8px 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(34,197,94,0.3);
}
.mt-shipping-content p { margin: 0 0 5px; font-weight: 600; font-size: 13px; }
.mt-progress-bar { height: 5px; background: rgba(255,255,255,0.3); border-radius: 3px; overflow: hidden; }
.mt-progress-fill { height: 100%; background: var(--mt-white); border-radius: 3px; transition: width 0.5s; }

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 768px) {
    .mt-wheel-wrapper, #mt-wheel-canvas { width: 280px !important; height: 280px !important; }
    .mt-chat-modal .mt-modal-content { width: 100%; height: 100vh; border-radius: 0; max-height: 100vh; }
    .mt-floating-btn { width: 56px; height: 56px; }
    .mt-wheel-btn { bottom: 90px; right: 16px; }
    .mt-chat-btn { bottom: 16px; right: 16px; }
    .mt-social-proof { left: 10px; bottom: 80px; max-width: calc(100% - 90px); }
}