/* Altokeapp Ciudades — Selector CSS */

:root {
    --ak-bg: #0f1923;
    --ak-card: #1a2733;
    --ak-accent: #ff6b35;
    --ak-accent-glow: rgba(255,107,53,.25);
    --ak-text: #e8edf2;
    --ak-muted: #7a8fa0;
    --ak-success: #2dd4a0;
}

/* ── Selector Wrapper ────────────────────────── */
.ak-selector-wrap {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--ak-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ak-text);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* Fondo decorativo */
.ak-selector-wrap::before {
    content:''; position:fixed;
    width:340px; height:340px;
    background: radial-gradient(circle, var(--ak-accent-glow) 0%, transparent 70%);
    top:-80px; right:-100px; border-radius:50%;
    animation: akFloat 8s ease-in-out infinite;
    pointer-events:none;
}
.ak-selector-wrap::after {
    content:''; position:fixed;
    width:260px; height:260px;
    background: radial-gradient(circle, rgba(45,212,160,.12) 0%, transparent 70%);
    bottom:-60px; left:-80px; border-radius:50%;
    animation: akFloat 10s ease-in-out infinite reverse;
    pointer-events:none;
}

.ak-selector-inner {
    position: relative;
    z-index: 1;
    max-width: 420px;
    width: 100%;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Logo ────────────────────────────────────── */
.ak-sel-logo {
    text-align: center;
    margin-bottom: 12px;
    animation: akFadeDown .6s ease-out;
}
.ak-sel-icon {
    width: 72px; height: 72px;
    background: linear-gradient(135deg, var(--ak-accent), #ff8f5e);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    margin: 0 auto 14px;
    box-shadow: 0 8px 32px var(--ak-accent-glow);
}
.ak-sel-brand {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #fff 30%, var(--ak-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Pregunta ────────────────────────────────── */
.ak-sel-question {
    text-align: center;
    margin-bottom: 32px;
    animation: akFadeDown .6s ease-out .15s backwards;
}
.ak-sel-question h2 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 8px;
    line-height: 1.25;
    color: var(--ak-text);
}
.ak-sel-question p {
    font-size: 14px;
    color: var(--ak-muted);
    line-height: 1.5;
    margin: 0;
}

/* ── Cards de ciudad ─────────────────────────── */
.ak-sel-cities {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}
.ak-sel-card {
    background: var(--ak-card);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
    animation: akFadeUp .5s ease-out backwards;
    -webkit-tap-highlight-color: transparent;
}
.ak-sel-card:nth-child(1) { animation-delay: .25s; }
.ak-sel-card:nth-child(2) { animation-delay: .35s; }
.ak-sel-card:nth-child(3) { animation-delay: .45s; }
.ak-sel-card:nth-child(4) { animation-delay: .55s; }

.ak-sel-card::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(135deg, var(--ak-accent-glow), transparent);
    opacity:0; transition: opacity .25s;
}
.ak-sel-card:hover::before,
.ak-sel-card:active::before { opacity:1; }

.ak-sel-card:hover,
.ak-sel-card:active {
    border-color: var(--ak-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.ak-sel-card.selected {
    border-color: var(--ak-success) !important;
    background: rgba(45,212,160,.08);
}
.ak-sel-card.selected .ak-sel-check {
    opacity: 1;
    transform: scale(1);
}

.ak-sel-emoji {
    width: 52px; height: 52px;
    background: rgba(255,255,255,.06);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    position: relative; z-index: 1;
}
.ak-sel-info {
    flex: 1;
    position: relative; z-index: 1;
}
.ak-sel-name {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 3px;
}
.ak-sel-desc {
    font-size: 12.5px;
    color: var(--ak-muted);
    line-height: 1.4;
}
.ak-sel-check {
    width: 28px; height: 28px;
    background: var(--ak-success);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    color: #fff;
    font-weight: 900;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(.5);
    transition: all .25s ease;
    position: relative; z-index: 1;
}

/* ── Botón continuar ─────────────────────────── */
.ak-sel-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all .25s ease;
    animation: akFadeUp .5s ease-out .55s backwards;
}
.ak-sel-btn.disabled {
    background: rgba(255,255,255,.06);
    color: var(--ak-muted);
    pointer-events: none;
}
.ak-sel-btn.active {
    background: linear-gradient(135deg, var(--ak-accent), #ff8f5e);
    color: #fff;
    box-shadow: 0 6px 24px var(--ak-accent-glow);
}
.ak-sel-btn.active:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px var(--ak-accent-glow);
}
.ak-sel-btn.active:active {
    transform: scale(.98);
}

/* ── Footer ──────────────────────────────────── */
.ak-sel-footer {
    text-align: center;
    font-size: 12px;
    color: var(--ak-muted);
    margin-top: 20px;
    animation: akFadeUp .5s ease-out .65s backwards;
    line-height: 1.5;
}
.ak-sel-footer span {
    color: var(--ak-accent);
}

/* ── Welcome screen ──────────────────────────── */
.ak-welcome {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: var(--ak-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ak-text);
    transition: opacity .4s, transform .4s;
}
.ak-welcome.hiding {
    opacity: 0;
    transform: scale(1.05);
    pointer-events: none;
}
.ak-welcome-emoji { font-size: 56px; margin-bottom: 16px; }
.ak-welcome-city {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--ak-success), #6ee7b7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ak-welcome-sub {
    font-size: 15px;
    color: var(--ak-muted);
    line-height: 1.5;
}
.ak-welcome-loader {
    margin-top: 28px;
    width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,.1);
    border-top-color: var(--ak-success);
    border-radius: 50%;
    animation: akSpin .8s linear infinite;
}

/* ── Cambiar ciudad (inline) ─────────────────── */
.ak-cambiar-link {
    font-size: 13px;
    display: inline-block;
}
.ak-cambiar-link a {
    color: var(--ak-accent, #ff6b35);
    text-decoration: none;
}
.ak-cambiar-link a:hover {
    text-decoration: underline;
}
.ak-cambiar-btn {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255,107,53,.1);
    border: 1px solid rgba(255,107,53,.3);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}
.ak-cambiar-btn a {
    color: var(--ak-accent, #ff6b35);
    text-decoration: none;
}

/* ── Animaciones ─────────────────────────────── */
@keyframes akFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-20px); }
}
@keyframes akFadeDown {
    from { opacity:0; transform:translateY(-16px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes akFadeUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes akSpin {
    to { transform: rotate(360deg); }
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 380px) {
    .ak-sel-question h2 { font-size: 19px; }
    .ak-sel-card { padding: 16px 14px; gap: 12px; }
    .ak-sel-emoji { width: 44px; height: 44px; font-size: 22px; }
    .ak-sel-name { font-size: 15px; }
}