/* ============================================================
   CARTA ASTRAL — Estilos
   Misma paleta oscura-dorada, trío de tarjetas de planetas
   ============================================================ */
:root {
    --bg-deep:       #0d1117;
    --bg-card:       #141b2d;
    --border:        rgba(201,168,76,0.18);
    --border-bright: rgba(201,168,76,0.55);
    --gold:          #c9a84c;
    --gold-light:    #e8c96a;
    --gold-dim:      #8a6f2e;
    --white:         #f0ead8;
    --white-dim:     rgba(240,234,216,0.75);
    --white-faint:   rgba(240,234,216,0.22);
    --red-err:       #cc4444;
    --font-title:    'Cinzel', serif;
    --font-body:     'IM Fell English', serif;
    --font-ui:       'Crimson Pro', serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg-deep);color:var(--white);font-family:var(--font-body);min-height:100vh;}

#ca-app {
    position:relative; min-height:100vh; overflow:hidden;
    background:
        radial-gradient(ellipse at 15% 8%,  rgba(201,168,76,0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 88%, rgba(85,119,204,0.07) 0%, transparent 55%),
        var(--bg-deep);
}
#ca-app::before {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.3)  0%,transparent 100%),
        radial-gradient(1px 1px at 30% 55%, rgba(255,255,255,0.2)  0%,transparent 100%),
        radial-gradient(1.5px 1.5px at 62% 12%, rgba(255,255,255,0.28) 0%,transparent 100%),
        radial-gradient(1px 1px at 74% 40%, rgba(255,255,255,0.22) 0%,transparent 100%),
        radial-gradient(1px 1px at 89% 70%, rgba(255,255,255,0.18) 0%,transparent 100%),
        radial-gradient(1px 1px at 46% 82%, rgba(255,255,255,0.15) 0%,transparent 100%),
        radial-gradient(1px 1px at 22% 90%, rgba(255,255,255,0.17) 0%,transparent 100%),
        radial-gradient(1px 1px at 93% 25%, rgba(255,255,255,0.21) 0%,transparent 100%);
}

.ca-container {position:relative;z-index:1;max-width:680px;margin:0 auto;padding:48px 24px 80px;}

/* ── Header ─────────────────────────────────────────────────── */
.ca-header{text-align:center;margin-bottom:40px;}
.ca-deco{display:block;font-size:18px;letter-spacing:8px;color:var(--gold-dim);margin-bottom:14px;opacity:.7;}
.ca-title{font-family:var(--font-title);font-size:clamp(22px,5vw,38px);font-weight:700;letter-spacing:5px;color:var(--gold);text-transform:uppercase;line-height:1.15;text-align:center;text-shadow:0 0 40px rgba(201,168,76,.3);}
.ca-subtitle{font-family:var(--font-body);font-style:italic;font-size:15px;color:var(--white-dim);letter-spacing:2px;margin-top:10px;text-align:center;}
.header-rule{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);margin:14px auto 0;}

/* ── Steps ─────────────────────────────────────────────────── */
.ca-step{display:none;}
.ca-step.active{display:block;animation:stepIn .45s ease both;}
@keyframes stepIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ── Ornament ───────────────────────────────────────────────── */
.ornament{text-align:center;color:var(--gold-dim);font-size:18px;letter-spacing:6px;margin:24px 0;opacity:.6;}

/* ── Form card ─────────────────────────────────────────────── */
.form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:28px 28px 24px;margin-bottom:20px;}
.form-section-title{font-family:var(--font-title);font-size:11px;letter-spacing:3px;color:var(--gold-light);text-transform:uppercase;margin-bottom:22px;}
.form-group{margin-bottom:22px;}
.form-row{display:grid;gap:14px;margin-bottom:22px;}
.form-row.three{grid-template-columns:1fr 1fr 1.4fr;}
.form-row.two{grid-template-columns:1fr 1fr;}
.field-wrap{display:flex;flex-direction:column;gap:6px;}
.field-label{font-family:var(--font-title);font-size:10px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;}
.field-group-label{font-family:var(--font-title);font-size:10px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:10px;display:block;}

/* ── Selects ────────────────────────────────────────────────── */
.date-select{width:100%;background:rgba(201,168,76,.05);border:1px solid var(--border-bright);border-radius:8px;color:var(--white);font-family:var(--font-ui);font-size:16px;text-align:center;/*padding:11px 28px 11px 8px*/;cursor:pointer;appearance:none;-webkit-appearance:none;transition:border-color .2s,box-shadow .2s,background .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a6f2e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
.date-select option{background:#1a2238;color:var(--white);font-size:15px;}
.date-select:focus{outline:none;border-color:var(--gold);background-color:rgba(201,168,76,.09);box-shadow:0 0 0 3px rgba(201,168,76,.14);}
.date-select.field-error{border-color:var(--red-err);box-shadow:0 0 0 3px rgba(204,68,68,.14);}

/* ── City search ─────────────────────────────────────────────── */
.city-search-wrap{position:relative;}
.city-input{width:100%;background:rgba(201,168,76,.05);border:1px solid var(--border-bright);border-radius:8px;color:var(--white);font-family:var(--font-ui);font-size:16px;padding:11px 36px 11px 14px;transition:border-color .2s,box-shadow .2s,background .2s;}
.city-input::placeholder{color:var(--white-faint);}
.city-input:focus{outline:none;border-color:var(--gold);background:rgba(201,168,76,.09);box-shadow:0 0 0 3px rgba(201,168,76,.14);}
.city-input.field-error{border-color:var(--red-err);box-shadow:0 0 0 3px rgba(204,68,68,.14);}
.city-search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--gold-dim);font-size:16px;pointer-events:none;}
.city-list{display:none;position:absolute;z-index:100;width:100%;top:calc(100% + 4px);background:#1a2238;border:1px solid var(--border-bright);border-radius:8px;max-height:240px;overflow-y:auto;list-style:none;box-shadow:0 8px 32px rgba(0,0,0,.6);}
.city-list.open{display:block;animation:listIn .15s ease;}
@keyframes listIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.city-option{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;cursor:pointer;font-family:var(--font-ui);font-size:15px;color:var(--white);border-bottom:1px solid rgba(201,168,76,.08);transition:background .12s;}
.city-option:last-child{border-bottom:none;}
.city-option:hover{background:rgba(201,168,76,.1);}
.city-option.city-no-results{color:var(--white-dim);font-style:italic;cursor:default;}
.city-name{flex:1;}
.city-utc{font-size:12px;color:var(--gold-dim);letter-spacing:1px;font-family:var(--font-title);margin-left:10px;}

/* ── DST note ────────────────────────────────────────────────── */
.dst-note{font-family:var(--font-ui);font-style:italic;font-size:13px;color:rgba(240,200,100,.7);margin-top:14px;line-height:1.5;padding:10px 14px;background:rgba(201,168,76,.06);border-left:2px solid var(--gold-dim);border-radius:0 6px 6px 0;}

/* ── Error msg ───────────────────────────────────────────────── */
.form-error-msg{font-family:var(--font-ui);font-style:italic;font-size:13px;color:#e07070;margin-top:12px;text-align:center;min-height:18px;opacity:0;transition:opacity .2s;}
.form-error-msg.visible{opacity:1;}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-oracle{display:block;width:100%;background:linear-gradient(135deg,#b8932a 0%,#d4aa44 50%,#b8932a 100%);color:#1a1200;font-family:var(--font-title);font-size:12px;letter-spacing:4px;text-transform:uppercase;border:none;border-radius:6px;padding:16px 24px;cursor:pointer;transition:opacity .2s,transform .15s,box-shadow .2s;box-shadow:0 4px 20px rgba(201,168,76,.25);}
.btn-oracle:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 6px 28px rgba(201,168,76,.35);}
.btn-secondary{display:inline-block;background:transparent;color:var(--gold);font-family:var(--font-title);font-size:11px;letter-spacing:3px;text-transform:uppercase;border:1px solid var(--border-bright);border-radius:6px;padding:12px 28px;cursor:pointer;transition:background .2s,box-shadow .2s,transform .15s;}
.btn-secondary:hover{background:rgba(201,168,76,.08);box-shadow:0 0 16px rgba(201,168,76,.15);transform:translateY(-1px);}

/* ── Loading ─────────────────────────────────────────────────── */
.loading-area{text-align:center;padding:60px 0;}
.loading-spinner{width:52px;height:52px;border:2px solid rgba(201,168,76,.15);border-top-color:var(--gold);border-radius:50%;margin:0 auto 24px;animation:spin 1.2s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-family:var(--font-body);font-style:italic;font-size:16px;color:var(--white-dim);}

/* ── Resultado ───────────────────────────────────────────────── */
.result-section-title{font-family:var(--font-title);font-size:clamp(20px,5vw,34px);font-weight:700;letter-spacing:5px;color:var(--gold);text-transform:uppercase;text-align:center;margin-bottom:28px;text-shadow:0 0 30px rgba(201,168,76,.3);}

/* Trío de planetas */
.planets-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px;}
.planet-card{background:var(--bg-card);border:1px solid var(--border);border-top:3px solid var(--pc,var(--gold));border-radius:10px;padding:18px 12px 14px;text-align:center;animation:cardIn .4s ease both;}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.planet-card:nth-child(1){animation-delay:.05s}
.planet-card:nth-child(2){animation-delay:.15s}
.planet-card:nth-child(3){animation-delay:.25s}
.planet-symbol{font-size:22px;margin-bottom:4px;filter:drop-shadow(0 0 6px var(--pc,var(--gold)));}
.planet-label{font-family:var(--font-title);font-size:9px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:8px;}
.planet-sign-sym{font-size:28px;line-height:1;margin-bottom:4px;animation:symGlow 3s ease-in-out infinite;}
@keyframes symGlow{0%,100%{filter:drop-shadow(0 0 8px var(--pc,var(--gold)))}50%{filter:drop-shadow(0 0 22px var(--pc,var(--gold)))}}
.planet-sign-name{font-family:var(--font-title);font-size:clamp(11px,2.5vw,14px);letter-spacing:2px;color:var(--gold-light);text-transform:uppercase;margin-bottom:4px;}
.planet-degree{font-family:var(--font-ui);font-size:12px;color:var(--white-dim);}

/* Tarjetas interpretación */
.info-cards{display:grid;gap:14px;margin-bottom:28px;}
.info-card{background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--gold-dim);border-radius:10px;padding:20px 22px;opacity:0;transform:translateY(14px);animation:cardIn .4s ease forwards;}
.info-card-title{font-family:var(--font-title);font-size:10px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:10px;}
.info-card-body{font-family:var(--font-body);font-size:16px;color:var(--white);line-height:1.8;}
.result-actions{text-align:center;}

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:520px){
    .ca-container{padding:28px 14px 60px;}
    .form-row.three{grid-template-columns:1fr 1fr;}
    .form-card{padding:20px 16px;}
    .planet-label{font-size:8px;letter-spacing:2px;}
    .planet-sign-name{font-size:11px;}
}