/* ═══ agenda.css — extraído de agenda.html v13 ═══ */


  /* ══════════════════════════════════════════
     AGENDA — estilos propios
  ══════════════════════════════════════════ */

  /* ─ Topbar ─ */
  .agenda-topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 24px; background:var(--navy);
    border-bottom:1px solid var(--border);
    flex-shrink:0; flex-wrap:wrap; gap:10px;
  }
  .agenda-nav { display:flex; align-items:center; gap:8px; }
  .agenda-nav-btn {
    width:32px; height:32px; border-radius:var(--radius-sm);
    border:1px solid var(--border); background:transparent;
    color:var(--muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; transition:all .2s;
  }
  .agenda-nav-btn:hover { border-color:var(--blue); color:var(--blue-light); }
  .agenda-date-title { font-size:16px; font-weight:700; color:var(--white); min-width:140px; }
  .view-tabs { display:flex; gap:3px; }
  .view-tab {
    padding:6px 13px; border-radius:var(--radius-sm); font-size:12px;
    font-weight:500; cursor:pointer; border:1px solid var(--border);
    background:transparent; color:var(--muted); transition:all .2s;
  }
  .view-tab.active { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700; }
  .agenda-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .filter-select {
    background:var(--navy-card); border:1px solid var(--border);
    color:var(--text); font-size:13px; padding:7px 12px;
    border-radius:var(--radius-sm); outline:none; cursor:pointer;
  }

  /* ─ Wrapper ─ */
  .calendar-wrap { flex:1; overflow:auto; padding:16px 20px 24px; position:relative; }

  /* ══ VISTA SEMANA (grid de tiempo real) ══ */
  .week-view {
    display:flex; flex-direction:column;
    border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; min-width:700px; background:var(--navy-card);
    position:relative;
  }

  /* Header días */
  .wv-header {
    display:grid;
    grid-template-columns: 56px repeat(7,1fr);
    background:var(--navy-mid);
    border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .wv-hcell {
    padding:10px 6px; text-align:center;
    border-left:1px solid var(--border);
  }
  .wv-hcell:first-child { border-left:none; }
  .wv-hday { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
  .wv-occ-bar { height:3px; background:#1e3150; border-radius:2px; margin:5px 4px 0; overflow:hidden; }
  .wv-occ-fill { height:100%; border-radius:2px; transition:width .6s ease; }
  .wv-occ-label { font-size:9px; color:var(--muted); text-align:center; margin-top:2px; }
  .wv-hnum {
    font-size:18px; font-weight:800; color:var(--white);
    font-family:var(--font-display); width:32px; height:32px;
    display:flex; align-items:center; justify-content:center; margin:0 auto;
    border-radius:50%;
  }
  .wv-hnum.today { background:var(--blue); color:#fff; }

  /* Body: time col + 7 day cols */
  .wv-body {
    display:grid;
    grid-template-columns: 56px repeat(7,1fr);
    position:relative;
    overflow-y:auto;
    max-height: calc(100vh - 220px);
  }

  /* Time column */
  .wv-timecol { position:relative; }
  .wv-timeslot {
    height:56px; border-bottom:1px solid rgba(30,49,80,.4);
    padding:4px 6px 0;
    font-size:10px; color:var(--muted); text-align:right;
    position:relative;
  }

  /* Day columns */
  .wv-daycol {
    border-left:1px solid var(--border);
    position:relative;
    min-height: 672px; /* 12 hours × 56px */
  }
  .wv-daycol.is-today { background:rgba(45,125,210,.025); }
  .wv-slot {
    height:56px; border-bottom:1px solid rgba(30,49,80,.3);
    cursor:pointer; transition:background .12s;
    position:relative;
  }
  .wv-slot:hover { background:rgba(45,125,210,.06); }
  .wv-halfhour {
    height:28px; border-bottom:1px dashed rgba(30,49,80,.2);
    position:absolute; bottom:0; left:0; right:0; pointer-events:none;
  }

  /* Event blocks (absolute positioned) */
  .wv-event {
    position:absolute; left:3px; right:3px;
    border-radius:6px; border-left:3px solid;
    padding:4px 6px; font-size:11px; line-height:1.3;
    cursor:pointer; transition:opacity .15s, transform .15s;
    overflow:hidden; z-index:2;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
  }
  .wv-event:hover { opacity:.9; transform:scale(1.01); z-index:10; }
  .wv-event.dragging { opacity:.5; z-index:20; }
  .wv-event-title { font-size:11px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wv-event-sub   { font-size:9px; color:rgba(255,255,255,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wv-event-time  { font-size:9px; color:rgba(255,255,255,.6); }

  /* Drop target highlight */
  .wv-slot.drag-over { background:rgba(45,125,210,.18) !important; }

  /* ══ VISTA DÍA (columnas por profesional) ══ */
  .day-view {
    display:flex; flex-direction:column;
    border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; background:var(--navy-card);
    min-width:500px;
  }
  .dv-header {
    display:flex;
    background:var(--navy-mid);
    border-bottom:1px solid var(--border);
  }
  .dv-timegutter { width:56px; flex-shrink:0; }
  .dv-profcols { display:flex; flex:1; }
  .dv-profhead {
    flex:1; padding:12px 8px; text-align:center;
    border-left:1px solid var(--border);
  }
  .dv-prof-avatar {
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; color:#fff;
    margin:0 auto 4px;
  }
  .dv-prof-name { font-size:11px; color:var(--muted); }

  .dv-body { display:flex; overflow-y:auto; max-height:calc(100vh - 220px); }
  .dv-timecol { width:56px; flex-shrink:0; position:relative; }
  .dv-timeslot { height:56px; border-bottom:1px solid rgba(30,49,80,.4); font-size:10px; color:var(--muted); padding:4px 6px 0; text-align:right; }
  .dv-prodbody { flex:1; display:flex; }
  .dv-profcol {
    flex:1; border-left:1px solid var(--border);
    position:relative; min-height:672px;
  }
  .dv-slot { height:56px; border-bottom:1px solid rgba(30,49,80,.3); cursor:pointer; transition:background .12s; }
  .dv-slot:hover { background:rgba(45,125,210,.06); }

  /* ══ VISTA MES ══ */
  .month-view {
    border:1px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; background:var(--navy-card);
  }
  .mv-header {
    display:grid; grid-template-columns:repeat(7,1fr);
    background:var(--navy-mid); border-bottom:1px solid var(--border);
  }
  .mv-dayname { padding:10px 6px; text-align:center; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
  .mv-grid { display:grid; grid-template-columns:repeat(7,1fr); }
  .mv-cell {
    min-height:90px; border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:6px; cursor:pointer; transition:background .12s;
    position:relative;
  }
  .mv-cell:nth-child(7n) { border-right:none; }
  .mv-cell:hover { background:rgba(45,125,210,.04); }
  .mv-cell.other-month { opacity:.35; }
  .mv-cell.today { background:rgba(45,125,210,.08); }
  .mv-day-num {
    font-size:13px; font-weight:700; color:var(--muted);
    width:24px; height:24px; display:flex; align-items:center;
    justify-content:center; border-radius:50%; margin-bottom:4px;
  }
  .mv-cell.today .mv-day-num { background:var(--blue); color:#fff; }
  .mv-event-dot {
    font-size:10px; padding:2px 6px; border-radius:4px;
    border-left:2px solid; margin-bottom:2px;
    color:#fff; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; cursor:pointer;
    transition:opacity .15s;
  }
  .mv-event-dot:hover { opacity:.8; }
  .mv-more { font-size:10px; color:var(--blue-light); margin-top:2px; cursor:pointer; }

  /* ══ LEYENDA ══ */
  .cal-legend {
    display:flex; gap:14px; flex-wrap:wrap;
    margin-top:14px; padding:4px 2px;
  }
  .legend-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); }
  .legend-dot { width:9px; height:9px; border-radius:50%; }

  /* ══ MODAL NUEVA CITA ══ */
  .modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.65);
    backdrop-filter:blur(5px); z-index:200;
    display:none; align-items:center; justify-content:center;
  }
  .modal-overlay.open { display:flex; }
  .modal-box {
    background:var(--navy-card); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:28px 32px;
    width:500px; max-width:95vw;
    animation:fadeUp .3s ease;
    max-height:90vh; overflow-y:auto;
  }
  .modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
  .modal-title  { font-size:20px; font-weight:800; color:var(--white); }
  .modal-close  { background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; padding:4px; transition:color .2s; }
  .modal-close:hover { color:var(--red); }
  .form-row  { margin-bottom:14px; }
  .form-label { display:block; font-size:11px; font-weight:700; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.6px; }
  .form-input, .form-select {
    width:100%; background:var(--navy-mid); border:1px solid var(--border);
    color:var(--white); font-size:14px; font-family:var(--font-body);
    padding:10px 14px; border-radius:var(--radius-sm); outline:none;
    transition:border-color .2s; box-sizing:border-box;
  }
  .form-input:focus, .form-select:focus { border-color:var(--blue); }
  .form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .price-preview {
    background:rgba(0,201,167,.08); border:1px solid rgba(0,201,167,.2);
    border-radius:var(--radius-sm); padding:10px 14px;
    font-size:13px; color:#00c9a7; font-weight:700;
    display:none; align-items:center; gap:8px; margin-top:8px;
  }
  .price-preview.visible { display:flex; }
  .modal-actions { display:flex; gap:10px; margin-top:22px; justify-content:flex-end; }
  .btn-ghost {
    padding:10px 20px; border-radius:var(--radius-sm);
    border:1px solid var(--border); background:transparent;
    color:var(--muted); font-size:14px; cursor:pointer; transition:all .2s;
  }
  .btn-ghost:hover { border-color:var(--red); color:var(--red); }

  /* Autocomplete cliente */
  .client-wrap { position:relative; }
  .client-suggestions {
    position:absolute; top:100%; left:0; right:0; z-index:100;
    background:#152035; border:1px solid var(--border);
    border-radius:0 0 var(--radius-sm) var(--radius-sm);
    max-height:180px; overflow-y:auto; display:none;
  }
  .client-suggestions.open { display:block; }
  .client-sug-item {
    padding:9px 14px; font-size:13px; color:var(--text);
    cursor:pointer; transition:background .1s; border-bottom:1px solid rgba(30,49,80,.4);
  }
  .client-sug-item:hover { background:rgba(45,125,210,.1); color:var(--white); }
  .client-sug-item:last-child { border-bottom:none; }

  /* Mini stats bar */
  .agenda-stats {
    display:flex; gap:16px; padding:10px 20px 0;
    flex-wrap:wrap;
  }
  .astat { font-size:12px; color:var(--muted); }
  .astat strong { color:var(--white); font-weight:700; }
  .astat.green strong { color:#00c9a7; }

  /* Indicator line for current time */
  .time-indicator {
    position:absolute; left:0; right:0; height:2px;
    background:var(--red); z-index:5; pointer-events:none;
  }
  .time-indicator::before {
    content:''; position:absolute; left:-1px;
    width:8px; height:8px; border-radius:50%;
    background:var(--red); top:-3px;
  }

  @media (max-width:768px) {
    .view-tab { padding:5px 9px; font-size:11px; }
    .agenda-date-title { font-size:14px; }
    .calendar-wrap { padding:10px; }
    .form-row-2 { grid-template-columns:1fr; }
  }
  
/* ─── Vista mes virtualizada v13 ─── */
.mv-grid-virtual {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mv-week-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.mv-week-placeholder {
  grid-column: 1 / -1;
  background: var(--navy-card, #152035);
  border-radius: 6px;
  animation: _shimmer 1.5s infinite;
  background: linear-gradient(90deg,#152035 25%,#1e3150 50%,#152035 75%);
  background-size: 200% 100%;
}