@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

/* ── Variables ── */
:root {
    --sta-bg:        #0d0b1a;
    --sta-bg2:       #13112a;
    --sta-bg3:       #1a1838;
    --sta-border:    #2a2850;
    --sta-accent:    #7b6fe0;
    --sta-text:      #e8e6f8;
    --sta-muted:     #8886aa;
    --sta-gold:      #f0be30;
    --sta-green:     #22c55e;
    --sta-red:       #ef4444;
    --sta-radius:    16px;
    --sta-radius-sm: 10px;
    --stac-wa:       #25d366;
    --stac-wa-dark:  #1da851;
}

/* ════════════════════════════════════════════
   FULLPAGE — ocultar header/footer del tema
════════════════════════════════════════════ */
body.sta-fullpage {
    margin: 0 !important; padding: 0 !important;
    overflow-x: hidden !important;
    background: #08061a !important;
    min-height: 100vh !important;
}
body.sta-fullpage header, body.sta-fullpage .site-header,
body.sta-fullpage #masthead, body.sta-fullpage .header-main,
body.sta-fullpage nav.navbar, body.sta-fullpage #navbar,
body.sta-fullpage .top-bar { display: none !important; }

body.sta-fullpage footer, body.sta-fullpage .site-footer,
body.sta-fullpage #colophon, body.sta-fullpage .footer-widgets,
body.sta-fullpage #footer { display: none !important; }

body.sta-fullpage #page, body.sta-fullpage .site,
body.sta-fullpage main, body.sta-fullpage #main,
body.sta-fullpage .site-content, body.sta-fullpage #content,
body.sta-fullpage #primary, body.sta-fullpage .content-area,
body.sta-fullpage article, body.sta-fullpage .entry-content,
body.sta-fullpage .post-content, body.sta-fullpage .page-content,
body.sta-fullpage .entry-header, body.sta-fullpage .page-header,
body.sta-fullpage .wp-block-group, body.sta-fullpage .wp-site-blocks,
body.sta-fullpage .is-layout-flow, body.sta-fullpage .container,
body.sta-fullpage .container-fluid {
    padding: 0 !important; margin: 0 !important;
    max-width: 100% !important; width: 100% !important;
}
body.sta-fullpage .sta-starfield {
    min-height: 100vh !important;
    min-height: 100dvh !important;
}

/* ════════════════════════════════════════════
   STARFIELD — fondo de estrellas
════════════════════════════════════════════ */
.sta-starfield {
    position: relative;
    background: #08061a;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    overflow: hidden;
}
.sta-starfield::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 8%  12%, rgba(255,255,255,.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 20%  5%, rgba(255,255,255,.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 35% 20%, rgba(255,255,255,.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 50%  3%, rgba(255,255,255,.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 16%, rgba(255,255,255,.6) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 80%  8%, rgba(255,255,255,.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 92% 22%, rgba(255,255,255,.5) 0%, transparent 100%),
        radial-gradient(1px 1px at  4% 32%, rgba(255,255,255,.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 17% 43%, rgba(255,255,255,.3) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 30% 55%, rgba(255,255,255,.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 40%, rgba(255,255,255,.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 62%, rgba(255,255,255,.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 73% 35%, rgba(255,255,255,.3) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 87% 48%, rgba(255,255,255,.7) 0%, transparent 100%),
        radial-gradient(1px 1px at  7% 68%, rgba(255,255,255,.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 22% 75%, rgba(255,255,255,.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 38% 82%, rgba(255,255,255,.3) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 54% 78%, rgba(255,255,255,.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 68% 88%, rgba(255,255,255,.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 82% 72%, rgba(255,255,255,.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 96% 80%, rgba(255,255,255,.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 12% 92%, rgba(255,255,255,.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 46% 95%, rgba(255,255,255,.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 97%, rgba(255,255,255,.3) 0%, transparent 100%),
        radial-gradient(2px 2px at 28% 28%, rgba(180,160,255,.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 63% 18%, rgba(180,160,255,.4) 0%, transparent 100%),
        radial-gradient(2px 2px at 85% 85%, rgba(180,160,255,.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 15% 60%, rgba(180,160,255,.3) 0%, transparent 100%),
        radial-gradient(2px 2px at 50% 50%, rgba(180,160,255,.2) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
.sta-starfield::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 40%, rgba(80,50,160,.35) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 50% 10%, rgba(120,80,220,.2) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.sta-starfield > * { position: relative; z-index: 1; }

/* ════════════════════════════════════════════
   CONTENEDOR PRINCIPAL
════════════════════════════════════════════ */
.stac-wrap {
    font-family: 'DM Sans', system-ui, sans-serif;
    color: var(--sta-text);
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
}

/* ════════════════════════════════════════════
   AVATAR
════════════════════════════════════════════ */
.stac-avatar {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
}
.stac-avatar-sm { width: 30px; height: 30px; }
.stac-avatar img, .stac-avatar-sm img {
    width: 100%; height: 100%;
    border-radius: 50%; object-fit: cover; display: block;
}

/* ════════════════════════════════════════════
   BUBBLE
════════════════════════════════════════════ */
.stac-bubble-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 20px;
}
.stac-bubble {
    max-width: 86%;
    padding: 12px 15px;
    border-radius: 16px 16px 16px 4px;
    line-height: 1.55;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(8px);
    flex: 1;
}
.stac-bubble p { margin: 0 0 6px; font-size: 14px; color: var(--sta-text); }
.stac-bubble p:last-child { margin: 0; }

/* ════════════════════════════════════════════
   INPUTS Y BOTONES
════════════════════════════════════════════ */
.stac-input-row {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.stac-input {
    flex: 1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--sta-radius-sm);
    color: var(--sta-text);
    font-family: inherit;
    font-size: 14px;
    padding: 10px 14px;
    outline: none;
    transition: border-color .2s;
    min-width: 0;
}
.stac-input:focus { border-color: var(--sta-accent); }
.stac-input::placeholder { color: var(--sta-muted); }

.stac-btn-primary {
    background: var(--sta-accent);
    color: #fff;
    border: none;
    border-radius: var(--sta-radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
}
.stac-btn-primary:hover    { background: #6358c8; }
.stac-btn-primary:disabled { opacity: .5; cursor: default; }

/* ════════════════════════════════════════════
   FORMULARIO DE DATOS (paso 2)
════════════════════════════════════════════ */
.stac-form-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--sta-radius-sm);
    padding: 16px;
    display: flex; flex-direction: column; gap: 14px;
}
.stac-field { display: flex; flex-direction: column; gap: 5px; }
.stac-label {
    font-size: 12px; font-weight: 600; color: var(--sta-muted);
    text-transform: uppercase; letter-spacing: .5px;
}
.stac-wa-found   { font-size: 12px; color: var(--stac-wa); margin-top: 4px; }
.stac-wa-missing { font-size: 12px; color: var(--sta-gold); margin-top: 4px; }

/* ════════════════════════════════════════════
   AVISO DE CUPO
════════════════════════════════════════════ */
.stac-cupo-notice {
    background: rgba(240,190,48,.08);
    border: 1px solid rgba(240,190,48,.25);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--sta-text);
    margin-bottom: 12px;
}
.stac-cupo-notice strong { color: var(--sta-gold); }

/* ════════════════════════════════════════════
   TARJETAS DE SLOT
════════════════════════════════════════════ */
.stac-slot {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--sta-radius-sm);
    padding: 14px 16px; margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.stac-slot:hover   { border-color: rgba(123,111,224,.5); background: rgba(255,255,255,.07); }
.stac-slot:focus   { outline: none; border-color: var(--sta-accent); }
.stac-slot.stac-selected { border-color: var(--stac-wa); background: rgba(37,211,102,.06); }

.stac-slot-icon {
    font-size: 22px; width: 40px; height: 40px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stac-selected .stac-slot-icon { border-color: var(--stac-wa); background: rgba(37,211,102,.1); }

.stac-slot-info   { flex: 1; min-width: 0; }
.stac-slot-main   { font-size: 14px; font-weight: 500; }
.stac-slot-sub    { font-size: 12px; color: var(--sta-muted); margin-top: 2px; }

.stac-slot-check  { flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.stac-slot-check svg { width: 18px; height: 18px; stroke: var(--stac-wa); }
.stac-selected .stac-slot-check { opacity: 1; }

/* ════════════════════════════════════════════
   BOTONES SECUNDARIOS Y LOADING
════════════════════════════════════════════ */
.stac-back-btn {
    background: none;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--sta-radius-sm);
    color: var(--sta-muted);
    font-family: inherit; font-size: 13px;
    padding: 8px 14px; cursor: pointer;
    transition: border-color .2s, color .2s;
    display: block; width: 100%; text-align: center; margin-top: 4px;
}
.stac-back-btn:hover { border-color: rgba(123,111,224,.5); color: var(--sta-text); }

.stac-btn-custom {
    background: rgba(123,111,224,.15);
    border: 1px solid rgba(123,111,224,.4);
    border-radius: 8px; color: var(--sta-text);
    font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 8px 16px; cursor: pointer; white-space: nowrap;
    transition: background .2s;
}
.stac-btn-custom:hover    { background: rgba(123,111,224,.25); }
.stac-btn-custom:disabled { opacity: .5; cursor: default; }

.stac-loading-pulse {
    color: var(--sta-muted); font-size: 13px; text-align: center;
    padding: 24px 0;
    animation: stac-pulse 1.4s ease-in-out infinite;
}
@keyframes stac-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.stac-error { color: var(--sta-red); font-size: 12px; margin-top: 8px; display: none; }

/* ════════════════════════════════════════════
   MINI-CALENDARIO
════════════════════════════════════════════ */
.stac-cal-wrap {
    margin-top: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--sta-radius-sm);
    padding: 16px;
}
.stac-cal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.stac-cal-nav {
    background: none; border: 1px solid rgba(255,255,255,.15); color: var(--sta-text);
    width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.stac-cal-nav:hover { background: rgba(255,255,255,.08); }
.stac-cal-nav-disabled, .stac-cal-nav:disabled { opacity: .25; cursor: not-allowed; pointer-events: none; }
.stac-cal-month-label { font-size: 14px; font-weight: 600; text-transform: capitalize; }

.stac-cal-grid {
    display: grid; grid-template-columns: repeat(7,1fr);
    gap: 3px; margin-bottom: 12px;
}
.stac-cal-dow {
    text-align: center; font-size: 10px; font-weight: 600;
    color: var(--sta-muted); padding-bottom: 4px;
    text-transform: uppercase; letter-spacing: .5px;
}
.stac-cal-days-inner { display: contents; }
.stac-cal-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 12px; border-radius: 7px; transition: background .15s; position: relative;
}
.stac-cal-empty   { background: transparent; }
.stac-cal-past    { color: rgba(255,255,255,.2); cursor: default; }
.stac-cal-unavail { color: rgba(255,255,255,.25); cursor: default; }
.stac-cal-avail {
    color: var(--sta-text); cursor: pointer; font-weight: 600;
    background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.25);
}
.stac-cal-avail::after {
    content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
    width:4px; height:4px; border-radius:50%; background: var(--stac-wa);
}
.stac-cal-avail:hover { background: rgba(37,211,102,.2); border-color: rgba(37,211,102,.5); }
.stac-cal-sel {
    background: var(--stac-wa) !important;
    border-color: var(--stac-wa) !important;
    color: #000 !important;
}
.stac-cal-sel::after { background: rgba(0,0,0,.4); }
.stac-cal-loading { grid-column:1/-1; text-align:center; color:var(--sta-muted); font-size:12px; padding:10px 0; }

.stac-cal-time-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
    animation: stac-fade-in .2s ease;
}
.stac-cal-time-label { font-size: 13px; color: var(--sta-muted); white-space: nowrap; }
.stac-time-input {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px; color: var(--sta-text); font-family: inherit;
    font-size: 13px; padding: 6px 10px; outline: none; color-scheme: dark;
}
.stac-time-input:focus { border-color: var(--sta-accent); }

@keyframes stac-fade-in { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }

/* ════════════════════════════════════════════
   CONFIRMACIÓN
════════════════════════════════════════════ */
.stac-confirm-label {
    font-weight: 700; font-size: 15px;
    color: var(--stac-wa); margin: 8px 0 !important;
}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width: 480px) {
    .sta-starfield { padding: 24px 16px; }
    .stac-input-row { flex-direction: column; }
    .stac-btn-primary { width: 100%; }
    .stac-cal-day { font-size: 11px; }
}