*{box-sizing:border-box}
body{margin:0}
.rgb-citas-app{
    max-width:520px;
    margin:0 auto;
    padding:20px 16px 28px;
    font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    color:#203b5c;
}
.rgb-hero-card{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    padding:18px 18px 16px;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 48%),
        linear-gradient(135deg,#d9ebf4 0%, #efc9dc 100%);
    box-shadow:0 18px 50px rgba(84,122,151,.16);
    border:1px solid rgba(255,255,255,.5);
}
.rgb-kicker{
    font-size:12px;
    line-height:1;
    letter-spacing:.14em;
    font-weight:900;
    color:#5f7796;
    margin-bottom:10px;
}
.rgb-hero-pill{
    position:absolute;
    top:16px;
    right:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:10px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    color:#375572;
    font-size:14px;
    font-weight:800;
    box-shadow:0 12px 28px rgba(97,125,146,.10);
    backdrop-filter:blur(10px);
}
.rgb-hero-title{
    margin:0;
    max-width:260px;
    font-size:58px;
    line-height:.92;
    font-weight:900;
    letter-spacing:-.04em;
    color:#1c385c;
}
.rgb-hero-desc{
    margin:12px 0 0;
    max-width:290px;
    font-size:14px;
    line-height:1.48;
    color:#55708e;
}
.rgb-hero-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:16px;
}
.rgb-stat-box{
    min-height:76px;
    padding:14px 10px 12px;
    border-radius:24px;
    background:rgba(255,255,255,.56);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 10px 26px rgba(120,146,167,.08);
    text-align:center;
}
.rgb-stat-box strong{
    display:block;
    font-size:38px;
    line-height:1;
    font-weight:900;
    color:#274665;
}
.rgb-stat-box span{
    display:block;
    margin-top:6px;
    font-size:11px;
    letter-spacing:.14em;
    font-weight:900;
    color:#6a84a2;
}
.rgb-profile-card{
    margin-top:12px;
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:12px;
    align-items:center;
    padding:14px;
    border-radius:24px;
    background:rgba(255,255,255,.80);
    border:1px solid rgba(226,235,244,.95);
    box-shadow:0 10px 30px rgba(116,142,164,.10);
}
.rgb-profile-icon{
    width:42px;
    height:42px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#eef3f8,#e8edf4);
    border:1px solid #d3dfeb;
    font-size:16px;
    font-weight:900;
    color:#274665;
}
.rgb-profile-copy strong{
    display:block;
    margin-bottom:2px;
    font-size:15px;
    font-weight:900;
    color:#243f61;
}
.rgb-profile-copy span{
    display:block;
    font-size:13px;
    line-height:1.4;
    color:#6881a0;
}
.rgb-profile-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:10px 14px;
    border-radius:999px;
    background:#f5f8fc;
    border:1px solid #d5e3ef;
    font-size:14px;
    font-weight:800;
    color:#4d6987;
    white-space:nowrap;
}
.rgb-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:16px 4px 10px;
    color:#2c4868;
}
.rgb-section-head strong{
    font-size:18px;
    font-weight:900;
}
.rgb-section-head span{
    font-size:14px;
    font-weight:800;
    color:#6f88a5;
}
.rgb-event-card{
    border-radius:30px;
    overflow:hidden;
    background:rgba(255,255,255,.86);
    border:1px solid rgba(228,236,244,.95);
    box-shadow:0 22px 60px rgba(115,140,163,.14);
}
.rgb-event-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:18px 16px 0;
}
.rgb-date-pill,
.rgb-status-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:36px;
    padding:9px 12px;
    border-radius:999px;
    background:#f7f9fc;
    border:1px solid #e3ebf3;
    font-size:13px;
    font-weight:900;
    letter-spacing:.08em;
    color:#62809d;
}
.rgb-status-pill{padding-right:14px}
.rgb-status-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    display:inline-block;
}
.rgb-dot-open{background:#46bf7d; box-shadow:0 0 0 4px rgba(70,191,125,.14)}
.rgb-dot-closed{background:#c0c9d3; box-shadow:0 0 0 4px rgba(192,201,211,.20)}
.rgb-event-title{
    margin:10px 16px 16px;
    font-size:28px;
    line-height:.98;
    letter-spacing:-.04em;
    font-weight:900;
    color:#1f395d;
}
.rgb-info-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    padding:0 16px;
}
.rgb-info-box{
    min-height:86px;
    padding:14px 14px 12px;
    border-radius:20px;
    background:#f8fbff;
    border:1px solid #d8e6f3;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.rgb-info-box span{
    display:block;
    font-size:12px;
    letter-spacing:.14em;
    font-weight:900;
    color:#6b86a2;
}
.rgb-info-box strong{
    display:block;
    margin-top:10px;
    font-size:29px;
    line-height:.95;
    letter-spacing:-.04em;
    font-weight:900;
    color:#214062;
}
.rgb-desc-box{
    margin:12px 16px 0;
    padding:14px 14px 13px;
    border-radius:18px;
    background:#f9fbfe;
    border:1px solid #d8e5f1;
    font-size:13px;
    line-height:1.56;
    color:#56708e;
}
.rgb-capacity-wrap{
    display:grid;
    grid-template-columns:86px 1fr;
    gap:12px;
    align-items:center;
    padding:18px 16px 0;
}
.rgb-ring-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
}
.rgb-ring{
    --percent:50%;
    width:80px;
    height:80px;
    border-radius:50%;
    background:
        radial-gradient(circle at center, #ffffff 0 55%, transparent 56%),
        conic-gradient(#7cc7f4 0 var(--percent), #e5eef7 var(--percent) 100%);
    box-shadow:0 8px 22px rgba(117,146,169,.14);
    position:relative;
}
.rgb-ring-center{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#244365;
}
.rgb-ring-center strong{
    font-size:19px;
    line-height:1;
    font-weight:900;
}
.rgb-ring-center span{
    margin-top:3px;
    font-size:11px;
    letter-spacing:.12em;
    font-weight:900;
    color:#6b84a1;
}
.rgb-bars-col{display:flex;flex-direction:column;gap:10px}
.rgb-bar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:5px;
    font-size:13px;
    font-weight:900;
    color:#355272;
}
.rgb-bar-head span{color:#5d7896}
.rgb-bar-bg{
    height:12px;
    border-radius:999px;
    background:#dfebf6;
    overflow:hidden;
}
.rgb-bar-fill{
    height:100%;
    border-radius:999px;
}
.rgb-bar-fill.men{background:linear-gradient(90deg,#6dbcf0,#7dd7ff)}
.rgb-bar-fill.women{background:linear-gradient(90deg,#f08cbc,#f6a6d0)}
.rgb-bar-fill.total{background:linear-gradient(90deg,#6dbcf0 0%,#f19bc7 100%)}
.rgb-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:16px 16px 0;
}
.rgb-chip{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:8px 14px;
    border-radius:999px;
    background:#f8fbff;
    border:1px solid #d7e4f1;
    font-size:14px;
    font-weight:800;
    color:#476582;
}
.rgb-chip::before{
    content:"•";
    margin-right:8px;
    font-size:18px;
    line-height:1;
    color:#7fcaf5;
}
.rgb-form{
    padding:16px 16px 0;
    display:grid;
    gap:10px;
}
.rgb-form input,
.rgb-form select{
    width:100%;
    min-height:52px;
    border-radius:18px;
    border:1px solid #d6e2ee;
    background:#fcfdff;
    padding:0 16px;
    font-size:16px;
    color:#294767;
    outline:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.rgb-form input::placeholder{color:#8aa1b8}
.rgb-form input:focus,
.rgb-form select:focus{
    border-color:#94c7eb;
    box-shadow:0 0 0 4px rgba(148,199,235,.14);
}
.rgb-join-btn{
    width:100%;
    min-height:62px;
    border:0;
    border-radius:22px;
    background:linear-gradient(90deg,#6eb8ef 0%, #eb75af 100%);
    color:#1a3354;
    font-size:18px;
    font-weight:900;
    letter-spacing:-.01em;
    cursor:pointer;
    box-shadow:0 16px 30px rgba(123,148,169,.20);
}
.rgb-join-btn[disabled]{
    opacity:.7;
    cursor:not-allowed;
}
.rgb-message{
    min-height:24px;
    padding:10px 16px 0;
    font-size:14px;
    font-weight:800;
    color:#476786;
}
.rgb-chat{
    padding:16px;
}
.rgb-chat.hidden{display:none}
.rgb-chat-head{
    font-size:16px;
    font-weight:900;
    color:#254264;
    margin-bottom:10px;
}
.rgb-chat-messages{
    min-height:120px;
    max-height:220px;
    overflow:auto;
    border-radius:18px;
    background:#f8fbfe;
    border:1px solid #d8e5f1;
    padding:12px;
    color:#496684;
    font-size:14px;
}
.rgb-chat-item{
    padding:8px 10px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid #e1ebf4;
}
.rgb-chat-item + .rgb-chat-item{margin-top:8px}
.rgb-chat-input-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    margin-top:10px;
}
.rgb-chat-input-row input{
    min-height:48px;
    border-radius:16px;
    border:1px solid #d6e2ee;
    background:#fcfdff;
    padding:0 14px;
    font-size:15px;
    color:#294767;
}
.rgb-chat-input-row button{
    min-width:92px;
    min-height:48px;
    border:0;
    border-radius:16px;
    background:#6eb8ef;
    color:#173456;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
}
@media (max-width:560px){
    .rgb-citas-app{padding:14px 10px 22px}
    .rgb-hero-title{font-size:34px; max-width:210px}
    .rgb-stat-box strong{font-size:26px}
    .rgb-profile-card{
        grid-template-columns:42px 1fr;
    }
    .rgb-profile-pill{
        grid-column:1/-1;
        width:100%;
        justify-content:center;
    }
    .rgb-section-head{
        flex-direction:column;
        align-items:flex-start;
        gap:2px;
    }
    .rgb-event-top{
        flex-wrap:wrap;
    }
    .rgb-info-box strong{
        font-size:20px;
    }
}