/* =========================================
   SISTEMA DE DISEÑO: GUARDIANES DE LA TIERRA
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&family=Jost:wght@300;400;600&display=swap');

/* --- 1. VARIABLES (PALETA PASTEL) --- */
:root {
    --btn-green: #b7e4c7;    /* Verde Menta */
    --btn-peach: #ffdfba;    /* Durazno */
    --btn-blue:  #a8dadc;    /* Celeste */
    --btn-sage:  #b4bcaf;    /* Salvia */
    --btn-purple: #cbaacb;   /* Lila */
    --btn-rose:  #e0aba0;    /* Terracota/Rosa */
    
    --stone: #4a5759;        /* Color principal para textos (Legibilidad) */
    --white: #ffffff;
    --radius-lg: 40px;       /* Bordes muy redondeados y orgánicos */
}

/* --- 2. RESET Y BASE --- */
html, body {
    margin: 0; 
    padding: 0;
    width: 100%; 
    height: 100%;
    background-color: var(--white);
    font-family: 'Quicksand', sans-serif;
    color: var(--stone);
    overflow-x: hidden;
    overscroll-behavior-y: none; /* Evita rebotes al hacer scroll en el celular */
}

.hidden { 
    display: none !important; 
}

/* --- 3. ESTRUCTURA Y CONTENEDORES --- */
#app-viewport {
    display: flex; 
    justify-content: center; 
    align-items: flex-start;
    width: 100%; 
    min-height: 100vh; 
    position: relative;
    z-index: 10; 
    padding-bottom: 40px; 
    box-sizing: border-box;
}

.screen-wrapper {
    width: 90%; 
    max-width: 420px; 
    margin-top: 80px;
    display: flex; 
    flex-direction: column; 
    align-items: center;
}

.logo-header {
    width: 100%; 
    text-align: center; 
    margin-bottom: 25px;
    position: relative; 
    z-index: 20;
}

/* Tarjeta Blanca Principal */
.container { 
    width: 100%; 
    background: rgba(255, 255, 255, 0.9); 
    padding: 40px 30px; 
    border-radius: var(--radius-lg); 
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05); 
    box-sizing: border-box;
}

/* --- 4. TIPOGRAFÍA --- */
h1, h2, h3, h4 { 
    font-family: 'Jost', sans-serif; 
    color: var(--stone); 
    margin-top: 0; 
}

h2 { 
    font-weight: 600; 
    font-size: 22px; 
    margin-bottom: 15px; 
}

p {
    line-height: 1.5;
}

/* --- 5. COMPONENTES DE INTERFAZ --- */

/* Botones Principales */
button { 
    border: none; 
    padding: 16px 25px; 
    border-radius: 25px; 
    font-family: 'Jost', sans-serif; 
    font-weight: 600; 
    font-size: 14px; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 8px;
    color: var(--stone); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

button:hover { 
    transform: translateY(-2px); 
    filter: brightness(0.95); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); 
}

button:active { 
    transform: translateY(0); 
}

button:disabled { 
    opacity: 0.6; 
    cursor: not-allowed; 
}

/* Campos de Texto (Inputs) */
input { 
    width: 100%; 
    padding: 16px 20px; 
    margin-bottom: 15px; 
    background: rgba(255,255,255,0.8);
    border: 2px solid #d1d5db; 
    border-radius: 20px; 
    font-family: inherit; 
    font-size: 15px;
    transition: 0.3s; 
    box-sizing: border-box; 
    color: var(--stone);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

input:focus { 
    outline: none; 
    border-color: var(--btn-blue); 
    background: white; 
    box-shadow: 0 4px 12px rgba(180, 188, 175, 0.2); 
}

input::placeholder { 
    color: #999; 
}

/* Selector de Idioma Flotante */
.top-bar {
    position: fixed; 
    top: 20px; 
    left: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    z-index: 1000;
}

.lang-btn {
    background: rgba(74, 87, 89, 0.1); 
    color: var(--stone); 
    border: none;
    padding: 8px 0; 
    border-radius: 12px; 
    cursor: pointer;
    font-family: 'Jost', sans-serif; 
    font-weight: 600; 
    width: 45px; 
    transition: all 0.2s ease;
}

.lang-btn.active { 
    background: var(--stone); 
    color: var(--white); 
}

/* Tarjetas de Misiones (Dashboard) */
.challenge-card {
    background: rgba(255, 255, 255, 0.6); 
    border-radius: 30px; 
    padding: 25px;
    margin-bottom: 15px; 
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
    transition: all 0.3s ease;
    position: relative; 
    overflow: hidden;
}

.challenge-card::before {
    content: ''; 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateX(-100%); 
    transition: 0.6s;
}

.challenge-card:hover { 
    transform: translateY(-3px); 
    border-color: var(--sage); 
    box-shadow: 0 8px 25px rgba(180, 188, 175, 0.15); 
}

.challenge-card:hover::before { 
    transform: translateX(100%); 
}

/* --- 6. CONTROLES DE CÁMARA (AJUSTE NATIVO) --- */
/* Forzamos que los botones dentro del video ignoren los estilos globales de botones gigantes */
.ai-camera-container div[onclick], 
#webcam-container div[onclick] {
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Asegura que el video llene el contenedor sin deformarse */
video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* --- 7. UTILIDADES SVG E ICONOS --- */
svg { 
    stroke-width: 1.5; 
    stroke: currentColor; 
    fill: none; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    vertical-align: middle; 
}

/* --- 8. CLASES UTILITARIAS Y COMPONENTES (LAS QUE SE HABÍAN PERDIDO) --- */

.flex-col { display: flex; flex-direction: column; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.m-0 { margin: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mt-10 { margin-top: 10px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-35 { margin-top: 35px; }
.ml-8 { margin-left: 8px; }
.p-15 { padding: 15px; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.block { display: block; }

.font-jost { font-family: 'Jost', sans-serif; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-muted { opacity: 0.8; }
.text-sm { font-size: 14px; }
.text-base { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-white { color: white; }
.text-stone { color: var(--stone); }
.text-green { color: var(--btn-green); }
.text-rose { color: var(--btn-rose); }
.text-blue { color: var(--btn-blue); }
.text-sky { color: var(--btn-blue); }
.opacity-100 { opacity: 1; }
.opacity-80 { opacity: 0.8; }
.opacity-50 { opacity: 0.5; }

.bg-green { background: var(--btn-green); }
.bg-peach { background: var(--btn-peach); }
.bg-blue { background: var(--btn-blue); }
.bg-sage { background: var(--btn-sage); }
.bg-purple { background: var(--btn-purple); }
.bg-rose { background: var(--btn-rose); }
.bg-sky { background: var(--btn-blue); } 
.bg-yellow { background: #f2cc8f; }

.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 18px; height: 18px; }
.icon-md { width: 28px; height: 28px; }
.icon-lg { width: 35px; height: 35px; }
.icon-xl { width: 40px; height: 40px; }

.input-icon-wrapper { position: relative; margin-bottom: 10px; }
.input-icon { position: absolute; left: 18px; top: 17px; color: var(--stone); opacity: 0.4; width: 18px; height: 18px; }
.input-with-icon { padding-left: 48px; margin-bottom: 0; }

.btn-back { background: transparent; color: var(--stone); width: auto; padding: 0; margin-bottom: 20px; box-shadow: none; justify-content: flex-start; opacity: 0.7; }
.btn-logout { position: absolute; top: -10px; right: 0; width: auto; background: white; color: var(--stone); padding: 6px 12px; font-size: 11px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 1px solid var(--btn-rose); border-radius: 12px; text-transform: none; }
.btn-outline { border: 2px solid var(--sage); box-shadow: none; padding: 12px 20px; font-size: 13px; }
.btn-pill { width: auto; padding: 8px 18px; font-size: 12px; color: var(--stone); box-shadow: none; border-radius: 15px; }
.btn-dashed { background: transparent; border: 2px dashed var(--btn-blue); box-shadow: none; padding: 14px; }
.btn-action { color: var(--stone); font-weight: 800; border: 2px solid rgba(0,0,0,0.1); }
.btn-marker { color: var(--stone); font-weight: 800; padding: 15px; font-size: 12px; flex-direction: column; gap: 8px; border-radius: 20px; border: 2px solid rgba(0,0,0,0.1); }
.btn-icon { width: auto; padding: 10px; font-size: 12px; box-shadow: none; border-radius: 50%; }

.section-title { font-weight: 700; font-size: 15px; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; color: var(--stone); }
.story-box { padding: 20px; border-radius: 20px; margin-bottom: 25px; border: 1px dashed rgba(255,255,255,0.6); display: flex; gap: 15px; align-items: center; }
.story-box.border-solid { border: 2px solid rgba(0,0,0,0.05); }
.story-icon { color: var(--stone); width: 28px; height: 28px; flex-shrink: 0; opacity: 0.6; }
.story-text { margin: 0; font-style: italic; font-size: 14px; color: var(--stone); line-height: 1.5; }

/* Dashboard Components */
.dashboard-title { margin: 0; font-size: 26px; line-height: 1.2; }
.dashboard-date { color: var(--stone); opacity: 0.6; font-size: 14px; font-weight: 500; }
.score-card { padding: 25px; border-radius: 30px; margin-bottom: 25px; text-align: center; box-shadow: 0 15px 30px rgba(168, 218, 220, 0.2); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.5); }
.score-icon-bg { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; opacity: 0.3; }
.score-title { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; opacity: 0.7; font-weight: 700; }
.score-number { font-size: 60px; font-family: 'Jost'; font-weight: 700; margin: 10px 0; line-height: 1; display: flex; justify-content: center; align-items: center; min-height: 60px; }
.score-badge { background: white; border-radius: 15px; padding: 6px 15px; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

/* Mapa y Stats */
.map-container { border-radius: 25px; overflow: hidden; border: 3px solid var(--btn-blue); box-shadow: 0 10px 20px rgba(0,0,0,0.05); height: 350px; position: relative; }
.stats-bar { background: white; padding: 15px; border-radius: 20px; font-size: 14px; display: flex; justify-content: space-around; border: 2px solid rgba(0,0,0,0.05); }
.stat-item { display: flex; align-items: center; gap: 8px; color: var(--stone); font-weight: 600; }

/* Fotos */
.photo-area { background: rgba(255,255,255,0.5); border-radius: 30px; height: 250px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; overflow: hidden; border: 3px dashed var(--btn-blue); position: relative; box-shadow: 0 10px 20px rgba(0,0,0,0.02); }
.photo-preview { width: 100%; height: 100%; object-fit: cover; display: none; }
.photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 15px; pointer-events: none; }
.icon-circle { background: white; padding: 20px; border-radius: 50%; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

/* Checklist */
.checklist-container { background: white; border-radius: 30px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); margin-bottom: 25px; }

/* AI Scanner */
.ai-camera-container { position: relative; width: 100%; height: 400px; background: #000; border-radius: 35px; overflow: hidden; border: 4px solid var(--btn-blue); box-shadow: 0 20px 40px rgba(0,0,0,0.1); margin-bottom: 25px; }
.ai-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.ai-overlay-top { position: absolute; top: 20px; left: 20px; right: 20px; }
.ai-overlay-bottom { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); padding: 40px 30px 30px; text-align: center; color: white; }
.ai-result-icon { background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; border: 2px solid rgba(255,255,255,0.3); }
.ai-result-text { font-size: 20px; display: block; margin-bottom: 5px; font-family: 'Jost', sans-serif; font-weight: 700; color: white; }
.ai-advice-text { font-size: 15px; margin: 0; opacity: 0.9; font-weight: 500; }
.ai-raw-text { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 8px; }

/* Ranking Tabs */
.tab-container { background: rgba(255,255,255,0.5); padding: 5px; border-radius: 25px; display: flex; justify-content: center; gap: 5px; margin-bottom: 25px; border: 1px solid rgba(255,255,255,0.5); }
.tab-btn { background: transparent; color: var(--stone); padding: 10px 25px; border-radius: 20px; width: auto; font-size: 13px; margin: 0; border: none; box-shadow: none; opacity: 0.7; flex: 1; }
.tab-btn.active { background: var(--white); opacity: 1; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

/* Modal de Éxito */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(10px); 
    z-index: 100000;
    display: none; 
    justify-content: center;
    align-items: center;
}
.modal-content {
    background: white;
    padding: 35px 25px;
    border-radius: 35px;
    width: 85%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-icon-bg {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}
.modal-title { margin: 0 0 10px 0; font-family: 'Jost'; font-size: 22px; color: var(--stone); }
.modal-body { font-size: 14px; color: var(--stone); opacity: 0.8; line-height: 1.5; margin-bottom: 25px; }

/* --- 9. ANIMACIONES Y BLOBS (LAS QUE FALTABAN) --- */
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }

.blob-wrapper {
    position: fixed; 
    z-index: 0; 
    pointer-events: none; 
    will-change: transform;
}
.blob { width: 100%; height: 100%; opacity: 0.85; }

@keyframes float1 { to { transform: translate(60px, 50px) rotate(35deg) scale(1.1); } }
@keyframes float2 { to { transform: translate(-60px, -40px) rotate(-45deg) scale(1.05); } }
@keyframes float3 { to { transform: translate(40px, 70px) rotate(90deg) scale(1.15); } }
@keyframes float4 { to { transform: translate(-50px, 30px) rotate(-20deg) scale(1.1); } }

.blob-1 { top: 15%; left: 10%; width: 100px; height: 90px; }
.blob-1 .blob { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; animation: float1 30s infinite alternate ease-in-out; }

.blob-2 { top: 70%; right: 10%; width: 120px; height: 110px; }
.blob-2 .blob { border-radius: 40% 60% 60% 40% / 55% 65% 35% 45%; animation: float2 35s infinite alternate ease-in-out; }

.blob-3 { top: 40%; right: 5%; width: 70px; height: 80px; }
.blob-3 .blob { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; animation: float3 28s infinite alternate ease-in-out; }

.blob-4 { top: 25%; right: 25%; width: 90px; height: 100px; }
.blob-4 .blob { border-radius: 30% 70% 70% 30% / 30% 52% 48% 70%; animation: float4 40s infinite alternate ease-in-out; }

.blob-5 { bottom: 25%; left: 15%; width: 65px; height: 70px; }
.blob-5 .blob { border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; animation: float1 32s infinite alternate ease-in-out; }

.blob-6 { top: 60%; left: 8%; width: 55px; height: 60px; }
.blob-6 .blob { border-radius: 50% 50% 60% 40% / 60% 40% 50% 50%; animation: float3 25s infinite alternate ease-in-out; }

.blob-7 { top: 50%; left: 45%; width: 80px; height: 80px; }
.blob-7 .blob { border-radius: 60% 40% 50% 50%; opacity: 0.5; animation: float2 45s infinite alternate ease-in-out; }

/* Optimizaciones Móviles */
@media (max-width: 768px) {
    .desktop-hidden { display: none !important; }
}