/* ============================================================
   TOKENS
   ============================================================ */
:root{
    /* Superficies */
    --bg:#070b12;
    --bg-2:#0a1019;
    --surface:#0d141e;
    --surface-2:#111a26;
    --surface-3:#151f2d;

    /* Bordes */
    --border:rgba(148,163,184,.13);
    --border-2:rgba(148,163,184,.20);
    --border-strong:rgba(96,165,250,.28);

    /* Texto */
    --text:#f3f6fa;
    --muted:#8794a7;
    --dim:#5d6a7d;

    /* Acentos */
    --green:#27c987;
    --green-2:#2ee0a0;
    --green-dark:#18a271;
    --green-soft:rgba(39,201,135,.12);
    --green-line:rgba(39,201,135,.22);

    --blue:#4b9cff;
    --blue-2:#2f7fe0;
    --blue-soft:rgba(75,156,255,.10);
    --blue-line:rgba(75,156,255,.22);

    --danger:#f05d68;

    /* Inputs */
    --input:rgba(255,255,255,.035);
    --input-hover:rgba(255,255,255,.055);
    --input-focus:rgba(39,201,135,.045);

    /* Radios */
    --radius:20px;
    --radius-sm:12px;
    --radius-pill:999px;

    /* Sombras */
    --shadow-card:
        0 30px 80px rgba(0,0,0,.45),
        0 8px 22px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.025);
    --shadow-cta:0 10px 30px rgba(39,201,135,.22);
}

/* ============================================================
   RESET
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}

html,body{width:100%;min-height:100%}

html{
    background:var(--bg);
    color-scheme:dark;
    -webkit-text-size-adjust:100%;
}

body{
    min-height:100vh;
    color:var(--text);
    font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

    background:
        radial-gradient(900px 480px at 50% -220px, rgba(39,201,135,.10), transparent 62%),
        radial-gradient(700px 400px at 95% 100%, rgba(75,156,255,.07), transparent 60%),
        linear-gradient(180deg, #070b12 0%, #080d14 100%);

    display:flex;
    align-items:center;
    justify-content:center;

    overflow-x:hidden;
}

button,input,select{font-family:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}

::selection{background:rgba(39,201,135,.22);color:#fff}

/* Scrollbar sutil (para modales largos) */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
    background:rgba(148,163,184,.16);
    border-radius:99px;
}
*::-webkit-scrollbar-thumb:hover{
    background:rgba(148,163,184,.28);
}

/* ============================================================
   BACKGROUND
   ============================================================ */
.background-grid{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;

    opacity:.18;

    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:48px 48px;

    mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
}

.orb{
    position:fixed;
    border-radius:50%;
    filter:blur(110px);
    pointer-events:none;
    z-index:0;
    opacity:.14;
}

.orb-green{
    width:340px;height:340px;
    top:-180px;left:50%;
    transform:translateX(-50%);
    background:var(--green);
}

.orb-blue{
    width:320px;height:320px;
    bottom:-200px;right:-120px;
    background:var(--blue);
}

/* ============================================================
   APP CONTAINER
   ============================================================ */
.app{
    width:100%;
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:32px 24px;

    position:relative;
    z-index:2;
}

.auth-container{
    width:100%;
    max-width:420px;
}

/* ============================================================
   BRAND
   ============================================================ */
.brand{
    text-align:center;
    margin-bottom:30px;
}

.brand-icon{
    position:relative;

    width:60px;height:60px;
    margin:0 auto 16px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:
        radial-gradient(120% 120% at 50% 0%, rgba(39,201,135,.28), rgba(39,201,135,.05) 70%),
        linear-gradient(145deg, #101a26, #0a1018);

    border:1px solid var(--green-line);

    box-shadow:
        0 0 0 1px rgba(39,201,135,.05),
        0 0 45px rgba(39,201,135,.14),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.brand-icon::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(39,201,135,.22), transparent 55%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    padding:1px;
    pointer-events:none;
}

.brand-icon svg{
    width:28px;height:28px;
    display:block;
    position:relative;
    z-index:1;
}

.brand-name{
    text-align:center;
    font-size:22px;
    font-weight:800;
    letter-spacing:-1px;
    color:var(--text);
}

.logo{
    display:inline-block;
    max-width:70%;
    height:auto;
}

/* ============================================================
   AUTH CARD
   ============================================================ */
.card{
    position:relative;
    overflow:hidden;

    padding:30px;

    background:
        radial-gradient(120% 90% at 50% -10%, rgba(39,201,135,.055), transparent 60%),
        linear-gradient(180deg, rgba(17,26,37,.92), rgba(10,16,24,.92));

    border:1px solid var(--border);
    border-radius:var(--radius);

    backdrop-filter:blur(22px) saturate(130%);
    -webkit-backdrop-filter:blur(22px) saturate(130%);

    box-shadow:var(--shadow-card);
}

.card::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:1px;
    background:linear-gradient(90deg,
        transparent,
        rgba(39,201,135,.55),
        rgba(75,156,255,.35),
        transparent);
    pointer-events:none;
}

.card-title{
    font-size:21px;
    font-weight:750;
    letter-spacing:-.55px;
    line-height:1.2;
    margin-bottom:8px;
    color:var(--text);
}

.card-description{
    color:var(--muted);
    font-size:13.5px;
    line-height:1.6;
    margin-bottom:24px;
}

/* ============================================================
   GOOGLE BUTTON
   ============================================================ */
.google-button{
    position:relative;
    overflow:hidden;

    width:100%;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;

    border:1px solid var(--border-2);
    border-radius:13px;

    background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
    color:var(--text);

    font-size:14px;
    font-weight:600;
    letter-spacing:.1px;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .18s ease,
        box-shadow .2s ease;
}

.google-button::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    pointer-events:none;
}

.google-button:hover{
    background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
    border-color:var(--border-strong);
    transform:translateY(-1px);
    box-shadow:
        0 10px 26px rgba(0,0,0,.32),
        0 0 0 3px rgba(75,156,255,.05);
}

.google-button:active{
    transform:translateY(0);
    box-shadow:0 4px 12px rgba(0,0,0,.24);
}

.google-button:disabled{
    opacity:.55;
    cursor:wait;
    transform:none;
    box-shadow:none;
}

.google-icon{
    width:19px;height:19px;
    flex-shrink:0;
}

/* ============================================================
   FEATURES
   ============================================================ */
.features{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    margin-top:22px;

    padding-top:20px;
    border-top:1px solid rgba(148,163,184,.08);
}

.feature{
    position:relative;
    height:64px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:8px 6px;

    border:1px solid rgba(148,163,184,.07);
    border-radius:11px;

    background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.008));

    text-align:center;

    transition:border-color .18s ease, background .18s ease;
}

.feature:hover{
    border-color:rgba(148,163,184,.14);
    background:rgba(255,255,255,.035);
}

.feature-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:16px;
    line-height:1;

    margin-bottom:5px;

    color:var(--green);
    filter:drop-shadow(0 0 8px rgba(39,201,135,.18));
}

.feature-text{
    font-size:9.5px;
    font-weight:650;
    color:var(--muted);
    letter-spacing:.15px;
    line-height:1.25;
}

/* ============================================================
   TERMS
   ============================================================ */
.terms{
    margin-top:22px;

    color:var(--dim);
    font-size:11px;
    line-height:1.65;
    text-align:center;
}

.terms a{
    color:var(--muted);
    text-decoration:none;
    border-bottom:1px dashed rgba(148,163,184,.25);
    padding-bottom:1px;
    transition:color .18s ease, border-color .18s ease;
}

.terms a:hover{
    color:var(--green-2);
    border-color:rgba(39,201,135,.5);
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay{
    position:fixed;
    inset:0;
    z-index:100;

    display:none;
    align-items:center;
    justify-content:center;

    padding:20px;

    background:rgba(2,5,9,.74);

    backdrop-filter:blur(10px) saturate(115%);
    -webkit-backdrop-filter:blur(10px) saturate(115%);
}

.modal-overlay.active{
    display:flex;
    animation:fadeIn .2s ease both;
}

@keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}

.profile-modal{
    position:relative;
    overflow:hidden;

    width:100%;
    max-width:460px;
    max-height:calc(100vh - 40px);

    overflow-y:auto;

    padding:28px;

    background:
        radial-gradient(120% 80% at 50% -10%, rgba(39,201,135,.065), transparent 60%),
        linear-gradient(180deg, #111a26, #0a1018);

    border:1px solid var(--border);
    border-radius:22px;

    box-shadow:
        0 40px 100px rgba(0,0,0,.62),
        inset 0 1px 0 rgba(255,255,255,.02);

    animation:modalIn .28s cubic-bezier(.22,1,.36,1) both;
}

.profile-modal::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:1px;
    background:linear-gradient(90deg,
        transparent,
        rgba(39,201,135,.5),
        transparent);
    pointer-events:none;
}

@keyframes modalIn{
    from{opacity:0;transform:translateY(14px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

.profile-header{
    display:flex;
    align-items:center;
    gap:14px;

    padding-bottom:18px;
    margin-bottom:20px;

    border-bottom:1px solid rgba(148,163,184,.08);
}

.profile-avatar{
    width:54px;height:54px;
    border-radius:50%;
    object-fit:cover;

    border:2px solid rgba(39,201,135,.35);
    box-shadow:0 0 0 3px rgba(39,201,135,.08);
}

.profile-welcome{
    font-size:12.5px;
    color:var(--muted);
    letter-spacing:.1px;
}

.profile-user-name{
    font-size:16px;
    font-weight:750;
    letter-spacing:-.2px;
    margin-top:3px;
    color:var(--text);
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group{
    margin-bottom:15px;
}

.form-label{
    display:block;
    margin-bottom:7px;

    color:var(--muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.form-input,
.form-select{
    width:100%;
    height:48px;

    padding:0 14px;

    border:1px solid var(--border);
    border-radius:var(--radius-sm);

    background:var(--input);
    color:var(--text);

    font-size:14px;
    font-weight:500;

    outline:none;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.form-input::placeholder{
    color:var(--dim);
    font-weight:500;
}

.form-input:hover,
.form-select:hover{
    background:var(--input-hover);
    border-color:var(--border-2);
}

.form-input:focus,
.form-select:focus{
    background:var(--input-focus);
    border-color:rgba(39,201,135,.5);
    box-shadow:0 0 0 3px rgba(39,201,135,.09);
}

.form-select{
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    padding-right:40px;

    background-image:
        linear-gradient(45deg, transparent 50%, #738090 50%),
        linear-gradient(135deg, #738090 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 21px,
        calc(100% - 13px) 21px;
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
}

.form-select option{
    background:#0f1620;
    color:var(--text);
}

/* ============================================================
   SUBMIT BUTTON
   ============================================================ */
.submit-button{
    position:relative;
    overflow:hidden;

    width:100%;
    height:50px;

    margin-top:10px;

    border:1px solid rgba(39,201,135,.35);
    border-radius:13px;

    background:linear-gradient(180deg, var(--green-2), var(--green));
    color:#04130d;

    font-size:14px;
    font-weight:800;
    letter-spacing:.15px;

    box-shadow:var(--shadow-cta);

    transition:
        transform .18s ease,
        box-shadow .2s ease,
        background .18s ease,
        filter .18s ease;
}

.submit-button::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    pointer-events:none;
}

.submit-button:hover{
    filter:brightness(1.06);
    transform:translateY(-1px);
    box-shadow:
        0 14px 34px rgba(39,201,135,.30),
        0 0 0 4px rgba(39,201,135,.08);
}

.submit-button:active{
    transform:translateY(0);
    box-shadow:0 6px 16px rgba(39,201,135,.22);
}

.submit-button:disabled{
    opacity:.55;
    cursor:wait;
    transform:none;
    box-shadow:none;
}

/* ============================================================
   ERROR
   ============================================================ */
.error-message{
    display:none;
    margin-top:14px;
    padding:11px 13px;

    border:1px solid rgba(240,93,104,.22);
    border-radius:11px;

    background:rgba(240,93,104,.07);
    color:#ff8995;

    font-size:12px;
    line-height:1.5;
}

.error-message.active{
    display:block;
    animation:shake .35s ease;
}

@keyframes shake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-4px)}
    75%{transform:translateX(4px)}
}

/* ============================================================
   MISC ICONS (location, repu, flag)
   ============================================================ */
.flag-mini{
    width:25px;
    height:auto;
    border-radius:2px;
    margin-bottom:8px;
margin-top: 10px;
    display:block;
}

.location-icon{
    width:38px;height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    font-size:17px;
    color:#e0e0db;
}

.repu-icon{
    width:38px;height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    font-size:17px;
    color:#e0e0db;
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */
#loadingScreen{
    position:fixed;
    inset:0;
    z-index:9999;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        radial-gradient(500px 300px at 50% 40%,rgba(59,130,246,.07),transparent 70%),
        #070b12;


    transition:opacity .35s ease, visibility .35s ease;
}

#loadingScreen.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.loading-content{
    text-align:center;
}

.loading-logo{
    font-size:38px;
    font-weight:800;
    letter-spacing:-2px;
    margin-bottom:24px;
}

.loading-logo span{color:var(--blue)}

.loading-brand{
    display:block;
    height:70px;
    width:auto;
    margin:0 auto;
}

.loading-spinner {
            width: 30px;
            height: 30px;
            border-radius: 50%;

            border: 3px solid rgba(255,255,255,.08);
            border-top-color: #358615;

            animation: spin .8s linear infinite;
            margin: auto;
        }

@keyframes spin{
    to{transform:rotate(360deg)}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:520px){
    .app{
        padding:22px 18px;
    }

    .brand{
        margin-bottom:24px;
    }

    .brand-icon{
        width:54px;height:54px;
        border-radius:16px;
    }

    .card{
        padding:24px 20px;
        border-radius:18px;
    }

    .profile-modal{
        padding:24px 20px;
        border-radius:20px;
    }

    .card-title{font-size:19px}
    .card-description{font-size:13px}
}

@media (max-height:700px){
    .app{
        align-items:flex-start;
        padding-top:38px;
        padding-bottom:38px;
    }

    .brand{
        margin-bottom:20px;
    }

    .brand-icon{
        margin-bottom:10px;
    }

    .features{
        margin-top:16px;
    }
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }
}
/* ============================================================
   SOCIAL LINK (Facebook)
   ============================================================ */
.social-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    margin:18px auto 0;
    padding:9px 16px;

    border:1px solid rgba(148,163,184,.13);
    border-radius:11px;

    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
    color:#a9b5c5;

    font-size:12px;
    font-weight:650;
    letter-spacing:.15px;
    text-decoration:none;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.social-link:hover{
    background:linear-gradient(180deg, rgba(75,156,255,.08), rgba(75,156,255,.03));
    border-color:rgba(75,156,255,.32);
    color:#e6edf5;

    transform:translateY(-1px);

    box-shadow:
        0 8px 22px rgba(0,0,0,.28),
        0 0 0 3px rgba(75,156,255,.05);
}

.social-link:active{
    transform:translateY(0);
    box-shadow:none;
}

.social-icon{
    display:block;
    flex-shrink:0;
    color:#4b9cff;
    transition:color .18s ease, filter .18s ease;
}

.social-link:hover .social-icon{
    color:#6db1ff;
    filter:drop-shadow(0 0 6px rgba(75,156,255,.45));
}
/* Si usás wrapper: sacá el margin del link y dejá solo gap en el wrapper */
.social-wrapper{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;              /* ← separación entre los dos links */
    margin-top:18px;
}

.social-link{
    /* ...todo igual que antes... */
    margin:0;              /* ← quitar el margin-top individual */
}