/* ══ TOP BAR ══ */
.topbar{height:var(--topbar-h);background:var(--blue);display:flex;align-items:center;padding:0 8px;gap:6px;flex-shrink:0;color:#fff;z-index:60}
.tb-logo{font-weight:700;font-size:13.5px;white-space:nowrap;margin-right:2px;display:flex;align-items:center;gap:5px}
.tb-logo-icon{width:22px;height:22px;background:rgba(255,255,255,.2);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900}
.tb-num{background:rgba(255,255,255,.18);border-radius:3px;padding:2px 7px;font-size:12px;cursor:pointer}
.tb-sep{width:1px;height:22px;background:rgba(255,255,255,.3);flex-shrink:0}
.tb-btn{height:27px;padding:0 8px;border-radius:3px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:500;display:inline-flex;align-items:center;gap:3px;color:#fff;background:rgba(255,255,255,.15);white-space:nowrap}
.tb-btn:hover{background:rgba(255,255,255,.28)}
.tb-btn-green{background:#28a745 !important}.tb-btn-green:hover{background:#1e7e34 !important}
.bulk-rem-btn{background:rgba(37,211,102,.22)!important;color:#fff!important;font-weight:600!important;gap:5px!important;border:1px solid rgba(37,211,102,.4)!important}
.bulk-rem-btn:hover{background:rgba(37,211,102,.38)!important;border-color:rgba(37,211,102,.65)!important}
/* Patient search */
#patSearchToggle:hover{background:rgba(255,255,255,.28)!important}
@keyframes spin{to{transform:rotate(360deg)}}
.ps-highlight{outline:3px solid var(--blue)!important;outline-offset:1px;animation:ps-flash 2.2s ease-out forwards}
@keyframes ps-flash{0%,40%{box-shadow:0 0 0 4px rgba(21,101,192,.45)}100%{box-shadow:none;outline-color:transparent}}
.tb-sel{height:27px;padding:0 7px;border-radius:3px;border:none;font-family:'DM Sans',sans-serif;font-size:11.5px;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;outline:none}
.tb-sel option{color:var(--ink);background:#fff}
.tb-nav{display:flex;gap:1px}
.tb-nav button{width:24px;height:27px;border:none;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;border-radius:3px}
.tb-nav button:hover{background:rgba(255,255,255,.3)}
/* ── Room filter dropdown ── */
.room-filter-wrap{position:relative;flex-shrink:0}
.room-filter-btn{gap:5px;font-size:11.5px}
.room-filter-btn.has-filter{background:rgba(255,255,255,.32)!important;outline:1px solid rgba(255,255,255,.55)}
.room-filter-chevron{font-size:9px;opacity:.7;transition:transform .15s}
.room-filter-wrap.open .room-filter-chevron{transform:rotate(180deg)}
.room-filter-dropdown{position:fixed;background:#fff;border-radius:6px;box-shadow:0 4px 20px rgba(0,0,0,.18);padding:6px;min-width:155px;z-index:300;display:none;flex-direction:column;gap:2px}
.room-filter-dropdown.open{display:flex}
.room-pill{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 8px;border-radius:4px;cursor:pointer;font-size:12.5px;color:#333;transition:background .1s,opacity .1s;white-space:nowrap;user-select:none;border:none;background:none;width:100%;text-align:left;font-family:'DM Sans',sans-serif}
.room-pill:hover{background:#f0f4ff}
.room-pill-swatch{width:11px;height:11px;border-radius:50%;flex-shrink:0;transition:opacity .1s}
.room-pill.on{font-weight:500;color:#1a2a3a}
.room-pill.off .room-pill-swatch{opacity:.25}
.room-pill.off{opacity:.45}
.room-filter-all{font-size:11px;color:#888;padding:2px 8px 5px;border-bottom:1px solid #eee;margin-bottom:2px;cursor:pointer;text-align:right;background:none;border-top:none;border-left:none;border-right:none;width:100%;font-family:'DM Sans',sans-serif}
.room-filter-all:hover{color:var(--blue)}
.tb-month{font-size:14px;font-weight:500;min-width:80px;text-align:center;white-space:nowrap;margin-left:22px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:5px}
.tb-icon{font-size:16px;cursor:pointer;opacity:.8;color:#fff;line-height:1}
.tb-icon:hover{opacity:1}
.tb-avatar{width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.25);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;color:#fff}
.profile-wrap{position:relative;display:flex;align-items:center;gap:6px;cursor:pointer;padding:3px 6px;border-radius:4px;transition:background .12s}
.profile-wrap:hover{background:rgba(255,255,255,.15)}
.profile-wrap .tb-avatar{pointer-events:none}
.profile-name{font-size:12px;opacity:.9;white-space:nowrap;pointer-events:none;color:#fff}
.profile-chevron{font-size:11px;opacity:.7;transition:transform .15s;pointer-events:none;color:#fff}
.profile-wrap.open .profile-chevron{transform:rotate(180deg)}
.profile-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:6px;box-shadow:0 4px 24px rgba(0,0,0,.18);min-width:220px;z-index:500;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .15s,transform .15s}
.profile-wrap.open .profile-dropdown{opacity:1;pointer-events:all;transform:translateY(0)}
.pd-item{display:flex;align-items:center;gap:12px;padding:11px 16px;font-size:13.5px;color:var(--ink-m);cursor:pointer;transition:background .1s;border-bottom:1px solid #f0f0f0;text-decoration:none}
.pd-item:last-child{border-bottom:none}
.pd-item:hover{background:#f5f8ff;color:var(--blue)}
.pd-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0;opacity:.7}
.pd-divider{height:1px;background:var(--gray-d);margin:4px 0}
.sidebar{transition:width .18s,min-width .18s}
.sidebar.collapsed{width:0!important;min-width:0!important;overflow:hidden}

/* ══ MAIN LAYOUT ══ */
.body-wrap{display:flex;flex:1;overflow:hidden;height:calc(100vh - var(--topbar-h))}

/* ══ SIDEBAR MENU ══ */
.sidebar{width:var(--sidebar-w);background:#1a2a3a;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;z-index:50}

/* Personalización del scroll para el sidebar */
.sidebar::-webkit-scrollbar {
  width: 5px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
.sb-logo{padding:12px 14px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-logo-img{width:36px;height:36px;background:rgba(255,255,255,.15);border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;color:#fff;margin:0 auto 4px}
.sb-logo-name{text-align:center;font-size:11px;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:.05em}
.sb-item{display:flex;align-items:center;gap:8px;padding:9px 14px;cursor:pointer;color:rgba(255,255,255,.85);font-size:12.5px;transition:all .12s;border-left:3px solid transparent;text-decoration:none}
.sb-item:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-item.active{background:rgba(255,255,255,.15);color:#fff;border-left-color:var(--blue-m)}
.sb-item .sb-icon{font-size:14px;width:16px;text-align:center;flex-shrink:0}
.sb-item .sb-label{font-size:12px}
.sb-group{display:flex;align-items:center;justify-content:space-between;padding:6px 14px 3px;cursor:pointer;color:rgba(255,255,255,.55);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;border-left:none;background:none}
.sb-group:hover{color:rgba(255,255,255,.6)}
.sb-group .sb-icon{font-size:12px;margin-right:5px;opacity:.5}
.sb-group.active{background:rgba(255,255,255,.15);color:#fff;border-left:3px solid var(--blue-m)}
.sb-group-arrow{font-size:10px;transition:transform .15s;color:rgba(255,255,255,.3);flex-shrink:0}
.sb-group.open .sb-group-arrow{transform:rotate(180deg)}
.sb-sub{overflow:hidden;max-height:0;transition:max-height .25s ease}
.sb-sub.open{max-height:600px}
.sb-sub .sb-item{font-size:12px;padding:6px 14px 6px 28px;border-left:3px solid transparent;color:rgba(255,255,255,.8)}
.sb-sub .sb-item.active{background:rgba(255,255,255,.12);color:#fff;border-left-color:var(--blue-m)}
.sb-sub .sb-item::before{content:'•';margin-right:6px;font-size:8px;color:rgba(255,255,255,.3);display:inline-block;vertical-align:middle}
.sb-section-hdr{padding:24px 14px 8px;font-size:11px;font-weight:800;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.15em;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:8px}
.sb-div{height:1px;background:rgba(255,255,255,.08);margin:4px 0}
.sb-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.08)}

.debt-icon {
  width: 18px;
  height: 18px;
  background: #00a4e4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  border-radius: 2px;
  cursor: help;
}

/* ══ CONTENT AREA ══ */
.content{display:flex;flex:1;overflow:hidden}

@media print {
  #sidebar, #topbar, #miniPanel, .profile-wrap, .tb-icon, .tb-sep, .tb-btn, .tb-nav, .sb-item, .sb-group, .sb-section-hdr, .pd-item {
    display: none !important;
  }
  /* Ocultar siempre los botones de acción de cada cita */
  .ev-opts-btn, .ev-edit-btn, .ev-note-btn, .ev-paid-icon {
    display: none !important;
  }
  #app-body, .body-wrap, .content, .cal-area {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .cal-tbl {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }
  .th-corner, .th-corner-r, .th-day, .th-fisio-cell, .tc, .tc-r {
    position: static !important;
    background: #fff !important;
    color: #444 !important;
    border: 1px solid #ddd !important;
  }
  .ev {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* Clase togglable: ocultar tratamientos si el usuario lo elige */
  body.print-hide-treatments .ev-sub {
    display: none !important;
  }
}