:root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: dark;
    --enigma-bg: #090d16;
    --enigma-surface: #111827;
    --enigma-surface-soft: #172033;
    --enigma-text: #f4fbff;
    --enigma-muted: #b7c5d1;
    --enigma-border: #2b3a4e;
    --enigma-cyan: #00d1ff;
    --enigma-cyan-dark: #006f89;
    --enigma-magenta: #ea159f;
    --enigma-magenta-dark: #a30d70;
    --enigma-danger: #ffb4b4;
    --enigma-success: #b7f7ca;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 0%, rgb(0 209 255 / 14%), transparent 34rem),
        radial-gradient(circle at 85% 8%, rgb(234 21 159 / 13%), transparent 32rem),
        var(--enigma-bg);
    color: var(--enigma-text);
}
a { color: #72e7ff; }
a:hover { color: #b8f4ff; }
.public-wrap { width: min(100% - 2rem, 860px); margin: 0 auto; padding: 1.2rem 0 3rem; }
.brand-banner {
    display: flex;
    justify-content: center;
    margin: .35rem auto 1rem;
}
.brand-banner img {
    display: block;
    width: min(100%, 660px);
    max-height: 245px;
    object-fit: cover;
    border-radius: 1rem;
    border: 1px solid rgb(0 209 255 / 40%);
    box-shadow: 0 0 24px rgb(0 209 255 / 14%), 0 0 34px rgb(234 21 159 / 10%);
}
.brand-wordmark {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--enigma-text);
}
.panel {
    background: rgb(17 24 39 / 96%);
    border: 1px solid var(--enigma-border);
    border-radius: .9rem;
    padding: clamp(1rem, 2.8vw, 1.6rem);
    box-shadow: 0 14px 40px rgb(0 0 0 / 24%);
}
.panel + .panel { margin-top: 1rem; }
h1, h2, h3 { line-height: 1.16; }
h1 { margin: 0 0 .55rem; font-size: clamp(1.65rem, 4vw, 2.2rem); }
h2 { font-size: 1.15rem; }
.lead { color: #d5e4ec; max-width: 68ch; }
.muted { color: var(--enigma-muted); font-size: .93rem; }
.service-guide {
    margin: 1rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, rgb(0 209 255 / 8%), rgb(234 21 159 / 8%));
    border: 1px solid rgb(0 209 255 / 30%);
    border-radius: .7rem;
}
.service-guide h2 { margin: 0 0 .55rem; color: #dff9ff; }
.service-guide ul { margin: .45rem 0 .2rem 1.2rem; padding: 0; }
.service-guide li { margin: .35rem 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .85rem; }
label { display: block; margin-top: .85rem; font-weight: 680; }
fieldset {
    margin: 1rem 0 0;
    padding: .85rem 1rem 1rem;
    border: 1px solid var(--enigma-border);
    border-radius: .65rem;
}
legend { padding: 0 .35rem; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
    width: 100%;
    margin-top: .3rem;
    padding: .68rem .72rem;
    border: 1px solid #526178;
    border-radius: .45rem;
    background: #0c1320;
    color: var(--enigma-text);
}
input[type="checkbox"], input[type="radio"] { width: auto; margin-right: .42rem; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
    outline: 3px solid rgb(0 209 255 / 50%);
    outline-offset: 2px;
}
button, .button {
    display: inline-block;
    margin-top: 1rem;
    padding: .7rem 1rem;
    border: 1px solid #00b8df;
    border-radius: .5rem;
    background: var(--enigma-cyan-dark);
    color: white;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}
button:hover, .button:hover { background: #0087a7; color: white; }
.button.magenta { background: var(--enigma-magenta-dark); border-color: #d71997; }
.error {
    padding: .75rem;
    color: #ffe6e6;
    background: #48161d;
    border: 1px solid #a84855;
    border-radius: .45rem;
}
.message {
    padding: .75rem;
    color: #dcffe6;
    background: #153d29;
    border: 1px solid #367a52;
    border-radius: .45rem;
}
.plan-detail {
    min-height: 3rem;
    margin-top: .55rem;
    padding: .75rem;
    border-left: 3px solid var(--enigma-magenta);
    background: #0d1523;
}
.plan-detail strong { display: block; margin-bottom: .2rem; color: #ffd9f3; }
.plan-detail .plan-price { display: block; margin: .2rem 0 .35rem; color: #8cecff; font-weight: 800; font-size: 1.05rem; }
.question-card {
    margin-top: 1rem;
    padding: .9rem 1rem 1rem;
    background: var(--enigma-surface-soft);
    border: 1px solid var(--enigma-border);
    border-radius: .65rem;
}
.question-card > label:first-child, .question-card > strong:first-child { margin-top: 0; }
.choice-grid { display: grid; gap: .45rem; margin-top: .55rem; }
.choice-grid label { margin: 0; font-weight: 560; }
.form-note { margin-top: .45rem; color: var(--enigma-muted); font-size: .88rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.portal-summary { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.portal-summary > div { padding: .8rem; background: var(--enigma-surface-soft); border-radius: .6rem; border: 1px solid var(--enigma-border); }

@media (max-width: 620px) {
    .public-wrap { width: min(100% - 1rem, 860px); padding-top: .55rem; }
    .brand-banner img { max-height: 190px; }
    .panel { border-radius: .7rem; }
}

/* Hito 5.4: dashboard de sólo lectura del socio. */
.portal-label {
    display: block;
    margin-bottom: .25rem;
    color: var(--enigma-muted);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.portal-value { display: block; font-size: 1.15rem; }
.portal-list { display: grid; gap: .65rem; }
.portal-list-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: .8rem;
    background: var(--enigma-surface-soft);
    border: 1px solid var(--enigma-border);
    border-radius: .6rem;
}
.portal-status {
    flex: 0 0 auto;
    padding: .28rem .5rem;
    border: 1px solid rgb(0 209 255 / 35%);
    border-radius: 999px;
    color: #b8f4ff;
    font-size: .84rem;
    font-weight: 750;
}

@media (max-width: 620px) {
    .portal-list-item { align-items: flex-start; flex-direction: column; }
}

/* Hito 5.5: agenda, cupos y acciones del socio. */
.portal-rules { margin-bottom: 0; }
.agenda-list { display: grid; gap: .8rem; }
.agenda-card {
    padding: 1rem;
    background: var(--enigma-surface-soft);
    border: 1px solid var(--enigma-border);
    border-radius: .7rem;
}
.agenda-card-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.agenda-title { display: block; font-size: 1.05rem; }
.agenda-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .8rem;
    margin-top: .75rem;
    color: var(--enigma-muted);
    font-size: .9rem;
}
.agenda-own-status {
    margin: .8rem 0 0;
    padding: .55rem .65rem;
    border-left: 3px solid var(--enigma-magenta);
    background: #0d1523;
}
.agenda-actions { margin-top: .75rem; }
.agenda-actions form { margin: 0; }
.agenda-actions button { margin-top: 0; }

@media (max-width: 620px) {
    .agenda-card-main { flex-direction: column; }
}

/* Hito 5.5: selector Día / Semana / Mes / Listado para agenda del socio. */
.calendar-view-switch,
.calendar-period-nav {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: .85rem;
}
.calendar-view-switch .button,
.calendar-period-nav .button { margin-top: 0; }
.calendar-view-switch .button.secondary,
.calendar-period-nav .button.secondary {
    background: #101827;
    border-color: #40506a;
    color: #dce8f4;
}
.calendar-view-switch .button.secondary:hover,
.calendar-period-nav .button.secondary:hover {
    background: #142338;
    border-color: rgb(0 209 255 / 48%);
    color: #fff;
}
.calendar-period-label {
    margin-top: .75rem;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 800;
}
.calendar-scroll { overflow-x: auto; padding-bottom: .2rem; }
.calendar-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(88px, 1fr));
    gap: .4rem;
    min-width: 690px;
}
.calendar-weekday {
    padding: .4rem .3rem;
    text-align: center;
    color: #8cecff;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.calendar-day {
    min-height: 104px;
    padding: .62rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    border: 1px solid var(--enigma-border);
    border-radius: .55rem;
    background: var(--enigma-surface-soft);
    color: var(--enigma-text);
    text-decoration: none;
}
.calendar-day:hover {
    color: #fff;
    border-color: rgb(0 209 255 / 50%);
    background: #1b2940;
}
.calendar-day.outside-month { opacity: .38; }
.calendar-day.today {
    border-color: var(--enigma-magenta);
    box-shadow: inset 0 0 0 1px rgb(234 21 159 / 22%);
}
.calendar-day-number { font-size: 1.08rem; font-weight: 850; }
.calendar-day-count { color: var(--enigma-muted); font-size: .84rem; }
.calendar-own-marker {
    color: #ffd7ef;
    font-size: .76rem;
    font-weight: 750;
}
.calendar-hint { margin-bottom: 0; }
.calendar-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(132px, 1fr));
    gap: .55rem;
    overflow-x: auto;
    padding-bottom: .2rem;
}
.calendar-week-day {
    min-width: 132px;
    padding: .68rem;
    border: 1px solid var(--enigma-border);
    border-radius: .55rem;
    background: var(--enigma-surface-soft);
}
.calendar-week-day.today { border-color: var(--enigma-magenta); }
.calendar-week-day h2 { margin: 0 0 .5rem; font-size: .95rem; }
.calendar-week-day h2 a { text-decoration: none; }
.calendar-brief-list { display: grid; gap: .4rem; }
.calendar-brief {
    display: grid;
    gap: .08rem;
    padding: .45rem;
    border: 1px solid #31405a;
    border-radius: .42rem;
    background: #0d1523;
    color: var(--enigma-text);
    text-decoration: none;
}
.calendar-brief:hover { border-color: rgb(0 209 255 / 45%); color: #fff; }
.calendar-brief strong { color: #8cecff; }
.calendar-brief small { color: var(--enigma-muted); }

@media (max-width: 620px) {
    .calendar-view-switch { display: grid; grid-template-columns: 1fr 1fr; }
    .calendar-view-switch .button { text-align: center; }
}