.citofonia-shell {
    padding: 1rem 0 2rem;
}

.citofonia-hero,
.citofonia-panel,
.citofonia-room {
    border: 1px solid rgba(21, 59, 111, 0.09);
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 32, 52, 0.08);
}

.citofonia-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.6rem;
    border-radius: 8px;
    margin-bottom: 1.2rem;
}

.citofonia-hero h1,
.citofonia-room-side h1 {
    margin: .2rem 0 .45rem;
    color: #16324f;
    font-size: clamp(1.65rem, 2.2vw, 2.35rem);
    font-weight: 800;
}

.citofonia-hero p {
    max-width: 760px;
    margin: 0;
    color: #57708b;
}

.citofonia-kicker {
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #2a7f62;
}

.citofonia-hero-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 42px;
    padding: .55rem .85rem;
    border-radius: 999px;
    background: #eef8f4;
    color: #1f6f55;
    font-weight: 700;
    white-space: nowrap;
}

.citofonia-panel {
    border-radius: 8px;
    padding: 1.15rem;
}

.citofonia-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.citofonia-panel-header h2 {
    margin: .1rem 0 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #16324f;
}

.citofonia-panel-header > i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1f6fb;
    color: #1d5e89;
}

.citofonia-form .form-control,
.citofonia-form .form-select {
    min-height: 42px;
    border-radius: 8px;
}

.citofonia-call-progress {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid #d9e8f2;
    border-radius: 8px;
    background: #f7fbfd;
    color: #24445f;
}

.citofonia-call-progress[hidden] {
    display: none;
}

.citofonia-call-progress-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border-radius: 50%;
    background: #e8f7ef;
    color: #157347;
}

.citofonia-call-progress strong,
.citofonia-call-progress span {
    display: block;
}

.citofonia-call-progress span {
    color: #607890;
    font-size: .86rem;
}

.citofonia-empty {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    text-align: center;
    color: #6f8498;
}

.citofonia-empty i {
    font-size: 2rem;
    color: #94a8ba;
}

.citofonia-empty strong {
    color: #16324f;
}

.citofonia-incoming-list {
    display: grid;
    gap: .8rem;
}

.citofonia-incoming-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: .9rem;
    border: 1px solid #dce8f2;
    border-radius: 8px;
    background: #fbfdff;
}

.citofonia-incoming-item strong,
.citofonia-incoming-item span {
    display: block;
}

.citofonia-incoming-item span {
    color: #607890;
    font-size: .86rem;
}

.citofonia-state {
    display: inline-flex;
    align-items: center;
    padding: .36rem .62rem;
    border-radius: 999px;
    background: #eef4fa;
    color: #526a82;
    font-size: .76rem;
    font-weight: 800;
    text-transform: capitalize;
}

.citofonia-state.is-en_curso,
.citofonia-state.is-autorizado {
    background: #e8f7ef;
    color: #157347;
}

.citofonia-state.is-rechazada,
.citofonia-state.is-rechazado,
.citofonia-state.is-cancelada {
    background: #fdecef;
    color: #bb2d3b;
}

.citofonia-state.is-sonando,
.citofonia-state.is-pendiente {
    background: #fff7df;
    color: #9a6700;
}

.citofonia-room {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 0;
    min-height: calc(100vh - 150px);
    border-radius: 8px;
    overflow: hidden;
}

.citofonia-room-main {
    display: flex;
    flex-direction: column;
    background: #0d1826;
}

.citofonia-video-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 520px;
    background: #0d1826;
    overflow: hidden;
}

.citofonia-video-stage video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0d1826;
}

#citofoniaLocalVideo {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: min(220px, 32vw);
    aspect-ratio: 16 / 10;
    height: auto;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .28);
    z-index: 2;
}

.citofonia-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: #cfe2f2;
    background: radial-gradient(circle at center, rgba(30, 73, 105, .9), #0d1826 70%);
}

.citofonia-video-placeholder i {
    font-size: 3rem;
}

.citofonia-call-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1rem;
    background: rgba(8, 15, 28, .92);
}

.citofonia-call-btn {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.1rem;
}

.citofonia-call-btn.is-answer {
    background: #198754;
}

.citofonia-call-btn.is-reject,
.citofonia-call-btn.is-end {
    background: #dc3545;
}

.citofonia-room-side {
    padding: 1.25rem;
    background: #fff;
}

.citofonia-detail-list {
    display: grid;
    gap: .8rem;
    margin: 1.1rem 0;
}

.citofonia-detail-list div {
    padding: .8rem;
    border: 1px solid #e1ebf3;
    border-radius: 8px;
    background: #f9fbfd;
}

.citofonia-detail-list dt {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7d92a7;
}

.citofonia-detail-list dd {
    margin: .2rem 0 0;
    color: #183652;
    font-weight: 700;
}

.citofonia-decision-box {
    padding-top: 1rem;
    border-top: 1px solid #e1ebf3;
}

@media (max-width: 991.98px) {
    .citofonia-hero,
    .citofonia-room {
        display: block;
    }

    .citofonia-hero-status {
        margin-top: 1rem;
    }

    .citofonia-video-stage {
        min-height: 420px;
    }
}

@media (max-width: 575.98px) {
    .citofonia-hero,
    .citofonia-panel,
    .citofonia-room-side {
        padding: 1rem;
    }

    .citofonia-video-stage {
        min-height: 360px;
    }

    #citofoniaLocalVideo {
        width: 42vw;
    }
}