:root{
    --agenda-accent:#00acc1;
    --agenda-panel-bg:rgba(255,255,255,.04);
    --agenda-panel-border:rgba(255,255,255,.10);
    --agenda-ink:#e5eef7;
    --agenda-ink-soft:rgba(229,238,247,.78);
    --agenda-chip:#0ea5e9;
    --agenda-danger:#ef4444;
    --agenda-success:#16a34a;
    --agenda-warn:#f59e0b;
}

#btnAgenda.active,
#btnAgenda[aria-pressed="true"]{
    box-shadow:0 0 0 1px rgba(87,205,255,.65),0 0 10px rgba(87,205,255,.35);
    background:rgba(87,205,255,.12);
    border-radius:8px;
}
.agendaToolbarGlyph{font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.agendaPanel{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    padding:8px;
    gap:10px;
    color:var(--agenda-ink);
}
.agendaCard{
    border:1px solid var(--agenda-panel-border);
    background:var(--agenda-panel-bg);
    border-radius:16px;
    padding:12px;
}
.agendaHeaderRow,.agendaToolbar,.agendaMonthHead,.agendaModalActions,.agendaDetailActions{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.agendaHeaderRow{justify-content:space-between}
.agendaTitle{font-size:16px;font-weight:900}
.agendaSub{font-size:12px;color:var(--agenda-ink-soft)}
.agendaBtn,.agendaSelect,.agendaInput,.agendaTextarea{
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.22);
    color:#fff;
}
.agendaBtn{
    height:38px;padding:0 12px;cursor:pointer;font-weight:800;
}
.agendaBtn:hover{border-color:rgba(0,172,193,.6)}
.agendaBtnPrimary{background:linear-gradient(180deg,#0ea5e9,#0284c7)}
.agendaBtnDanger{background:linear-gradient(180deg,#ef4444,#dc2626)}
.agendaBtnSuccess{background:linear-gradient(180deg,#22c55e,#15803d)}
.agendaViewSwitch .agendaBtn.is-active{box-shadow:0 0 0 1px rgba(87,205,255,.65) inset;background:rgba(87,205,255,.12)}
.agendaMonthGrid{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:6px;
}
.agendaMonthHead{
    justify-content:space-between;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--agenda-ink-soft);
}
.agendaMonthHead span{display:block;text-align:center;padding:4px 0}
.agendaDayCell{
    min-height:102px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:6px;
    background:rgba(255,255,255,.03);
    display:flex;
    flex-direction:column;
    gap:5px;
}
.agendaDayCell.is-other-month{opacity:.45}
.agendaDayCell.is-today{box-shadow:0 0 0 4px rgba(0,172,193,.7) inset;background:rgba(0,172,193,.08)}
.agendaDayCell.is-drop{outline:2px dashed rgba(87,205,255,.7)}
.agendaDayTop{display:flex;align-items:center;justify-content:space-between;gap:6px}
.agendaDayNum{font-weight:900;font-size:13px}
.agendaDayAdd{border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer;line-height:1}
.agendaEventChip{
    border-radius:10px;
    padding:6px 7px;
    font-size:11px;
    font-weight:700;
    color:#fff;
    cursor:pointer;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border:1px solid rgba(255,255,255,.14);
}
.agendaEventChip.is-linked::after{content:" 📖";font-size:10px}
.agendaMoreBadge{font-size:11px;color:var(--agenda-ink-soft)}
.agendaWeekWrap,.agendaListWrap{display:flex;flex-direction:column;gap:8px;min-height:0}
.agendaWeekRow,.agendaListItem,.agendaDetailBox{
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    background:rgba(255,255,255,.03);
    padding:10px;
}
.agendaWeekTitle,.agendaListTitle,.agendaDetailTitle{font-weight:900}
.agendaWeekEvents,.agendaListMeta,.agendaDetailMeta{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.agendaEmpty{padding:14px;border-radius:14px;background:rgba(255,255,255,.04);color:var(--agenda-ink-soft);text-align:center}
.agendaAuthGate{
    border:1px dashed rgba(255,255,255,.22);
    border-radius:16px;
    padding:16px;
    background:rgba(0,0,0,.14);
    text-align:center;
}
.agendaAuthGate h3{margin:0 0 6px 0}
.agendaAuthGate p{margin:0 0 12px 0;color:var(--agenda-ink-soft)}
.agendaSearchWrap{display:flex;gap:8px;flex-wrap:wrap}
.agendaSelect,.agendaInput{height:38px;padding:0 12px}
.agendaInput{flex:1 1 180px}
.agendaTextarea{min-height:90px;padding:10px 12px;resize:vertical}
.agendaModalOverlay{
    position:fixed;inset:0;z-index:120050;background:rgba(8,12,20,.72);
    display:none;align-items:center;justify-content:center;padding:16px;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.agendaModalOverlay.is-open{display:flex}
.agendaModal{
    width:min(820px,calc(100vw - 24px));
    max-height:min(90vh,900px);
    overflow:auto;
    background:linear-gradient(180deg,#ffffff,#f8fafc);
    color:#0f172a;
    border-radius:22px;
    box-shadow:0 24px 60px rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.18);
}
.agendaModalHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(15,23,42,.12)}
.agendaModalTitle{font-size:22px;font-weight:900}
.agendaModalBody{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.agendaFormGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.agendaField{display:flex;flex-direction:column;gap:6px}
.agendaField label{font-size:13px;font-weight:800;color:#0f172a}
.agendaField .agendaInput,.agendaField .agendaSelect,.agendaField .agendaTextarea{
    background:#fff;color:#0f172a;border:1px solid rgba(15,23,42,.12)
}
.agendaFieldWide{grid-column:1 / -1}
.agendaModalActions{justify-content:flex-end;padding:0 20px 18px}
.agendaDetailActions{margin-top:10px}
.agendaLinkedBox{
    border:1px solid rgba(15,23,42,.1);
    border-radius:14px;
    padding:12px;
    background:linear-gradient(180deg,#f8fafc,#fff);
}
.agendaMuted{color:#64748b}
.agendaStatusTag{
    display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;background:#e2e8f0;color:#0f172a
}
.agendaStatusTag.pending{background:#fef3c7;color:#92400e}
.agendaStatusTag.confirmed{background:#dcfce7;color:#166534}
.agendaStatusTag.cancelled{background:#fee2e2;color:#991b1b}
.agendaStatusTag.completed{background:#e2e8f0;color:#334155}
.agendaStatusTag.rescheduled{background:#dbeafe;color:#1d4ed8}
@media (max-width:760px){
    .agendaFormGrid{grid-template-columns:1fr}
    .agendaMonthGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== Agenda rediseño: panel lateral + calendario mensual en stage ===== */
.agendaSideHost{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    background:rgba(6,10,18,.82);
    padding:10px;
}

.agendaMonthStage{
    display:none;
    flex-direction:column;
    width:100%;
    height:100%;
    min-height:0;
    padding:12px;
    gap:10px;
    box-sizing:border-box;
}

.agendaMonthStageToolbar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.agendaStagePeriodLabel{
    color:#fff;
    font-weight:900;
    min-width:190px;
    text-align:center;
    font-size:20px;
    text-transform:capitalize;
}

.agendaMonthHost{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background:rgba(4,8,14,.24);
    padding:12px;
}

body.agenda-stage-open .bookShell{
    display:none !important;
}

body.agenda-stage-open .agendaMonthStage{
    display:flex !important;
}

.agendaMonthStage .agendaMonthHead{
    border-radius:14px 14px 0 0;
}

.agendaMonthStage .agendaMonthGrid{
    border-radius:0 0 14px 14px;
}

.agendaMonthStage .agendaDayCell{
    min-height:112px;
    height:112px;
}

.agendaMonthStage .agendaDayNum{
    font-size:14px;
}

.agendaMonthStage .agendaEventChip{
    font-size:11px;
    padding:5px 7px;
}

@media (max-width: 1024px){
    .agendaMonthStage{padding:8px;}
    .agendaStagePeriodLabel{font-size:16px; min-width:150px;}
    .agendaMonthHost{padding:8px;}
    .agendaMonthStage .agendaDayCell{min-height:92px; height:92px;}
}
.btnAgenda img.agendaToolbarIcon {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}
/* Calendario mensual grande: celdas elegantes semitransparentes */
.agendaMonthStage .agendaDayCell {
    background: linear-gradient( 180deg, rgba(219, 233, 252, .82), rgba(198, 210, 224, .46) ) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

    .agendaMonthStage .agendaDayCell.is-other-month {
        background: linear-gradient( 180deg, rgba(200, 210, 220, .58), rgba(188, 200, 213, .52) ) !important;
    }

.agendaMonthStage .agendaDayNum {
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1;
    color: darkslategray;
}

.agendaMonthStage .agendaDayAdd {
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1;
    padding: 0 4px;
    color: rgba(0,172,193,.60);
}

.agendaMonthStage .agendaDayTop {
    padding: 2px 4px;
}
.agendaMonthStage .agendaMonthHead {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    text-align: center;
    width: 100%;
}

    .agendaMonthStage .agendaMonthHead span {
        width: 100%;
        text-align: center;
        display: block;
    }
body.agenda-stage-open .stage {
    overflow: hidden !important;
}

.agendaMonthStage {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 10px 14px !important;
    gap: 8px !important;
}

.agendaMonthStageToolbar {
    flex: 0 0 auto;
    min-height: 42px;
}

.agendaMonthHost {
    flex: 1 1 auto;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 8px !important;
}

.agendaMonthStage .agendaMonthGrid {
    height: calc(100% - 26px);
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 6px;
}

.agendaMonthStage .agendaDayCell {
    min-height: 0 !important;
    height: auto !important;
    padding: 7px !important;
    overflow: hidden;
}

.agendaMonthStage .agendaDayEvents {
    overflow: hidden;
}
@media (max-width: 600px) {
    .agendaMonthStage .agendaDayCell {
        padding: 3px !important;
        gap: 2px !important;
        border-radius: 8px !important;
    }

    .agendaMonthStage .agendaDayTop {
        padding: 0 2px !important;
        gap: 2px !important;
    }

    .agendaMonthStage .agendaDayNum {
        font-size: 12px !important;
        line-height: 1 !important;
    }

    .agendaMonthStage .agendaDayAdd {
        font-size: 15px !important;
        line-height: 1 !important;
        padding: 0 1px !important;
    }

    .agendaMonthStage .agendaEventChip {
        font-size: 8px !important;
        padding: 2px 3px !important;
        border-radius: 6px !important;
    }

    .agendaMonthStage .agendaMonthGrid {
        gap: 3px !important;
    }

    .agendaMonthStage .agendaMonthHead span {
        font-size: 8px !important;
    }
}
.agendaMonthStageToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.agendaMonthStageLeft {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1 1 auto;
}

.agendaMonthStageTitle {
    flex: 0 0 auto;
    margin-left: auto;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .2px;
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
    white-space: nowrap;
}

@media (max-width:700px) {
    .agendaMonthStageToolbar {
        flex-wrap: wrap;
        justify-content: center;
    }

    .agendaMonthStageLeft {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .agendaMonthStageTitle {
        width: 100%;
        text-align: center;
        margin-left: 0;
        font-size: 15px;
    }
}
.agendaModalOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(2,8,23,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .agendaModalOverlay.is-open {
        display: flex !important;
    }

.agendaModal {
    width: min(820px, calc(100vw - 24px));
    max-height: 92vh;
    overflow: hidden;
    background: linear-gradient(180deg,#f8fafc,#e8eef6);
    border-radius: 22px;
    box-shadow: 0 28px 90px rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.65);
}

.agendaModalHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg,#102033,#1f3b57);
    color: #fff;
}

.agendaModalTitle {
    font-size: 22px;
    font-weight: 900;
}

.agendaModalBody {
    padding: 18px 20px;
    max-height: calc(92vh - 145px);
    overflow-y: auto;
}

.agendaModalActions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: #f1f5f9;
    border-top: 1px solid rgba(15,23,42,.12);
}
/* ===== Modal Agenda profesional sobre toda la app ===== */
body:has(.agendaModalOverlay.is-open) {
    overflow: hidden;
}

.agendaModalOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: rgba(3, 8, 18, .72) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

    .agendaModalOverlay.is-open {
        display: flex !important;
    }

.agendaModal {
    width: min(860px, calc(100vw - 28px)) !important;
    max-height: 92vh !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%) !important;
    color: #0f172a !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    box-shadow: 0 35px 100px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.agendaModalHead {
    padding: 16px 20px !important;
    background: radial-gradient(circle at top left, rgba(14,165,233,.38), transparent 34%), linear-gradient(135deg, #0b1f33, #163a59 55%, #0b253d) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

.agendaModalTitle {
    font-size: 24px !important;
    font-weight: 900 !important;
    letter-spacing: -.3px;
}

#btnAgendaModalClose {
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    background: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    color: #fff !important;
    font-size: 18px !important;
}

.agendaModalBody {
    padding: 18px 20px !important;
    max-height: calc(92vh - 150px) !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, #f8fbff, #edf3f9) !important;
}

.agendaFormGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
}

.agendaField {
    gap: 5px !important;
}

    .agendaField label {
        font-size: 13px !important;
        font-weight: 900 !important;
        color: #132033 !important;
    }

    /* cajas de una sola línea */
    .agendaField .agendaInput,
    .agendaField .agendaSelect {
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        border-radius: 12px !important;
        background: #fff !important;
        color: #0f172a !important;
        border: 1px solid rgba(15,23,42,.16) !important;
        box-shadow: inset 0 1px 2px rgba(15,23,42,.05) !important;
    }

    /* solo notas más alto */
    .agendaField .agendaTextarea {
        min-height: 92px !important;
        max-height: 150px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        background: #fff !important;
        color: #0f172a !important;
        border: 1px solid rgba(15,23,42,.16) !important;
        resize: vertical !important;
    }

.agendaLinkedBox {
    margin-top: 4px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff, #edf4fb) !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.agendaModalActions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 14px 20px 16px !important;
    background: #f1f5f9 !important;
    border-top: 1px solid rgba(15,23,42,.12) !important;
}

    .agendaModalActions .agendaBtn {
        height: 40px !important;
        border-radius: 12px !important;
    }

@media (max-width:760px) {
    .agendaModal {
        width: calc(100vw - 18px) !important;
        max-height: 94vh !important;
        border-radius: 18px !important;
    }

    .agendaFormGrid {
        grid-template-columns: 1fr !important;
    }

    .agendaModalBody {
        max-height: calc(94vh - 145px) !important;
        padding: 14px !important;
    }

    .agendaModalActions {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}
/* Forzar inputs del modal Agenda a una sola línea */
.agendaModal .agendaInput,
.agendaModal .agendaSelect {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
}

/* Evita que el input de título quede alto */
.agendaModal input#agendaTitle {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

/* Fechas y horas también a una línea */
.agendaModal input[type="date"],
.agendaModal input[type="time"] {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
}

/* Solo Notas queda alta */
.agendaModal textarea#agendaNotes {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 160px !important;
    line-height: 1.35 !important;
    padding: 10px 12px !important;
    resize: vertical !important;
}
/* ===== Modal elegante de mensajes / validaciones Agenda ===== */
.agendaMsgOverlay {
    position: fixed;
    inset: 0;
    z-index: 1000005;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(2, 8, 23, .58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

    .agendaMsgOverlay.is-open {
        display: flex;
    }

.agendaMsgBox {
    width: min(430px, calc(100vw - 34px));
    background: linear-gradient(180deg, #ffffff, #eef4fb);
    color: #0f172a;
    border-radius: 22px;
    padding: 24px 24px 20px;
    box-shadow: 0 30px 90px rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.75);
    text-align: center;
    animation: agendaMsgPop .18s ease-out;
}

.agendaMsgIcon {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(180deg, #f59e0b, #d97706);
    box-shadow: 0 10px 30px rgba(245,158,11,.35);
}

.agendaMsgOverlay.error .agendaMsgIcon {
    background: linear-gradient(180deg, #ef4444, #b91c1c);
    box-shadow: 0 10px 30px rgba(239,68,68,.35);
}

.agendaMsgOverlay.success .agendaMsgIcon {
    background: linear-gradient(180deg, #22c55e, #15803d);
    box-shadow: 0 10px 30px rgba(34,197,94,.35);
}

.agendaMsgTitle {
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 8px;
}

.agendaMsgText {
    font-size: 15px;
    line-height: 1.45;
    color: #334155;
    margin-bottom: 18px;
}

.agendaMsgActions {
    display: flex;
    justify-content: center;
}

.agendaInputError {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.18) !important;
}

@keyframes agendaMsgPop {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.agendaBtnCancel {
    background: linear-gradient(180deg,#94a3b8,#64748b) !important;
    color: #fff !important;
    border-color: rgba(100,116,139,.65) !important;
}
.agendaBtnCalendar {
    background: linear-gradient(180deg,#0f766e,#115e59) !important;
    color: #fff !important;
    border-color: rgba(20,184,166,.55) !important;
}

.agendaDayFocus {
    outline: 3px solid rgba(0,172,193,.95) !important;
    box-shadow: 0 0 0 4px rgba(0,172,193,.22), 0 0 22px rgba(0,172,193,.45) !important;
}


/* Scroll más cómodo en móvil/tablet */
@media (max-width:768px) {
    #agendaPanel {
        max-height: calc(100vh - 105px);
    }

    #agendaSideHost {
        max-height: calc(100vh - 365px);
        -webkit-overflow-scrolling: touch;
    }
}
/* Encabezado del calendario en pantallas pequeñas */
@media (max-width:600px) {
    .agendaMonthStage {
        padding-top: 6px !important;
    }

    .agendaMonthStageToolbar {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "back title next"
            "prev today today";
        gap: 6px 8px !important;
        align-items: center;
        padding: 6px 8px !important;
    }

    .agendaMonthStageLeft {
        display: contents !important;
    }

    #btnAgendaStageBack {
        grid-area: back;
        height: 32px !important;
        padding: 0 9px !important;
        font-size: 11px !important;
    }

    #btnAgendaStagePrev {
        grid-area: prev;
        width: 34px !important;
        height: 32px !important;
        padding: 0 !important;
    }

    .agendaStagePeriodLabel {
        grid-area: title;
        min-width: 0 !important;
        text-align: center !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        white-space: nowrap;
    }

    #btnAgendaStageNext {
        grid-area: next;
        width: 34px !important;
        height: 32px !important;
        padding: 0 !important;
    }

    #btnAgendaStageToday {
        grid-area: today;
        justify-self: center;
        height: 30px !important;
        padding: 0 14px !important;
        font-size: 11px !important;
    }

    .agendaMonthStageTitle {
        width: auto !important;
        margin: 0 !important;
        text-align: center !important;
        font-size: 12px !important;
        opacity: .95;
        grid-column: 1 / -1;
        order: 3;
    }
}
/* Scroll vertical del panel lateral Agenda/Semana en todas las pantallas */
#agendaPanel {
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
}

#agendaMainWrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
}

#agendaSideHost {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 6px;
    -webkit-overflow-scrolling: touch;
}

/* Altura ajustada para que el listado no se salga del panel */
.agendaListWrap,
.agendaWeekWrap {
    max-height: calc(100vh - 390px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px;
}

/* En pantallas grandes puede usar más alto */
@media (min-width:1024px) {
    .agendaListWrap,
    .agendaWeekWrap {
        max-height: calc(100vh - 360px);
    }
}

/* En móviles/tablets un poco menos de alto */
@media (max-width:768px) {
    .agendaListWrap,
    .agendaWeekWrap {
        max-height: calc(100vh - 380px);
    }
}
#agendaPanel {
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
}

#agendaMainWrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
}

#agendaSideHost {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 6px;
    -webkit-overflow-scrolling: touch;
}
/* =====================================================
   Agenda: footer del modal responsive sin ocultar botones
   ===================================================== */

.agendaModal {
    display: flex !important;
    flex-direction: column !important;
}

.agendaModalHead {
    flex: 0 0 auto !important;
}

.agendaModalBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

.agendaModalActions {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    overflow: visible !important;
}

@media (max-width: 760px) {
    .agendaModalOverlay {
        align-items: stretch !important;
        padding: 8px !important;
    }

    .agendaModal {
        width: 100% !important;
        max-height: calc(100dvh - 16px) !important;
        height: calc(100dvh - 16px) !important;
        border-radius: 18px !important;
    }

    .agendaModalBody {
        max-height: none !important;
        overflow-y: auto !important;
        padding-bottom: 16px !important;
    }

    .agendaModalActions {
        justify-content: center !important;
        padding: 10px !important;
        max-height: none !important;
    }

        .agendaModalActions .agendaBtn {
            flex: 1 1 30% !important;
            min-width: 96px !important;
            max-width: 160px !important;
            height: 38px !important;
            padding: 0 10px !important;
            font-size: 13px !important;
            white-space: nowrap !important;
        }
}

@media (max-width: 420px) {
    .agendaModalActions .agendaBtn {
        flex: 1 1 45% !important;
        min-width: 120px !important;
    }
}