/* ============================================================================
   CALENDARIO DE CITAS (Ventas › Calendario) · js/citas/calendario-nuevo.js
   Mismo diseño que el modal de agendar desde el chat.
   ============================================================================ */
.weekly-calendar-container.cal2-cont { background: none; border: none; padding: 0; box-shadow: none; }
.cal2 { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.04);
    display: flex; flex-direction: column; overflow: hidden; color: #0f172a; font-size: 14px; position: relative; }
.cal2-nav { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; flex-wrap: wrap; }
.cal2-pill { border: 1px solid #e2e8f0; background: #fff; color: #334155; border-radius: 999px; padding: 5px 12px; font-size: 12.5px;
    font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; line-height: 1.3; }
.cal2-pill:hover { background: #f8fafc; }
.cal2-pill.on { background: #0f172a; color: #fff; border-color: #0f172a; }
.cal2-pill i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cal2-pill em { font-style: normal; opacity: .6; font-weight: 700; }
.cal2-lbl { font-weight: 800; font-size: 16px; margin: 0 6px; text-transform: capitalize; }
.cal2-gc { display: inline-flex; gap: 6px; align-items: center; }
.cal2-gc .btn { padding: 5px 10px !important; font-size: 12px !important; }
.cal2-seg { margin-left: auto; display: flex; border: 1px solid #e2e8f0; border-radius: 999px; padding: 2px; gap: 2px; }
.cal2-seg button { border: none; background: transparent; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
    color: #64748b; cursor: pointer; font-family: inherit; }
.cal2-seg button.on { background: #0f172a; color: #fff; }
.cal2-chips { display: flex; gap: 6px; padding: 0 14px 10px; flex-wrap: wrap; }

/* Semana / días */
.cal2-cab { display: grid; border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; position: sticky; top: 0; background: #fff; z-index: 5; }
.cal2-cab > div { text-align: center; padding: 7px 0; font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; cursor: pointer; }
.cal2-cab > div:first-child { cursor: default; }
.cal2-cab b { display: block; font-size: 20px; color: #0f172a; margin-top: 1px; line-height: 1.2; }
.cal2-cab small { display: block; font-size: 10.5px; color: #94a3b8; text-transform: none; font-weight: 600; }
.cal2-cab .hoy { color: #d81b60; }
.cal2-cab .hoy b { color: #fff; background: #d81b60; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; margin: 2px auto 0; font-size: 16px; }
.cal2-scroll { overflow-y: auto; max-height: calc(100vh - 290px); min-height: 360px; }
.cal2-rej { display: flex; }
.cal2-horas { width: 52px; flex: none; }
.cal2-h { font-size: 11px; color: #94a3b8; text-align: right; padding: 2px 8px 0 0; box-sizing: border-box; }
.cal2-cols { flex: 1; display: flex; min-width: 0; }
.cal2-col { flex: 1; min-width: 0; position: relative; border-left: 1px solid #f1f5f9; cursor: pointer;
    background-image: linear-gradient(#eef2f7 1px, transparent 1px), linear-gradient(#f8fafc 1px, transparent 1px); }
.cal2-col:hover { background-color: #fdf2f8; }
.cal2-col.pasado { background-color: #fbfcfd; }
.cal2-ev { position: absolute; border-radius: 8px; border-left: 4px solid; padding: 3px 6px; font-size: 11.5px; line-height: 1.25; overflow: hidden;
    box-sizing: border-box; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: transform .08s; }
.cal2-ev:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.12); z-index: 3; }
.cal2-ev b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal2-ev span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.cal2-ev.tenue { opacity: .35; }
.cal2-ev.sel { outline: 2px solid #0f172a; outline-offset: 1px; z-index: 4; }
.cal2-ahora { position: absolute; left: 0; right: 0; height: 2px; background: #ef4444; pointer-events: none; z-index: 2; }
.cal2-ahora::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
.cal2-pie { display: flex; gap: 12px; align-items: center; padding: 9px 14px; border-top: 1px solid #eef2f7; font-size: 11.5px; color: #64748b; flex-wrap: wrap; }
.cal2-pie span { display: inline-flex; align-items: center; gap: 5px; }
.cal2-pie i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal2-pie .der { margin-left: auto; }
.cal2-vacio { padding: 6px 14px 0; font-size: 12px; color: #94a3b8; }

/* Mes */
.cal2-mes-cab, .cal2-mes { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal2-mes-cab { border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; }
.cal2-mes-cab div { text-align: center; font-size: 11.5px; font-weight: 700; color: #64748b; padding: 7px 0; text-transform: uppercase; }
.cal2-dia { min-height: 108px; border-right: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; padding: 4px; cursor: pointer; box-sizing: border-box; min-width: 0; }
.cal2-dia:hover { background: #fdf2f8; }
.cal2-dia.otro { background: #fafafa; color: #cbd5e1; }
.cal2-dia .num { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; display: inline-block; min-width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; }
.cal2-dia.hoy .num { background: #d81b60; color: #fff; }
.cal2-mini { display: block; font-size: 11px; border-radius: 6px; padding: 2px 5px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid; }
.cal2-mas { font-size: 11px; color: #64748b; font-weight: 700; padding-left: 4px; }

/* Tarjeta de la cita */
.cal2-pop { position: fixed; width: 310px; background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.22); z-index: 10040;
    padding: 14px; font-size: 13px; color: #0f172a; }
.cal2-pop h4 { margin: 8px 0 2px; font-size: 15px; }
.cal2-pop .q { color: #64748b; font-size: 12px; margin-bottom: 8px; }
.cal2-pop .r { display: flex; gap: 8px; margin: 6px 0; color: #334155; word-break: break-word; }
.cal2-pop .r i { font-style: normal; width: 18px; text-align: center; flex: none; }
.cal2-pop .r a { color: #2563eb; }
.cal2-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-right: 4px; }
.cal2-bs { display: flex; gap: 6px; margin-top: 12px; }
.cal2-bs button { flex: 1; text-align: center; padding: 8px 0; border-radius: 10px; font-weight: 700; font-size: 12.5px; background: #f1f5f9;
    color: #334155; border: none; cursor: pointer; font-family: inherit; }
.cal2-bs button.rosa { background: #d81b60; color: #fff; }
.cal2-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: none; background: #f1f5f9; color: #475569; font-size: 17px; cursor: pointer; line-height: 1; }
.cal2-fondo { position: fixed; inset: 0; z-index: 10039; }

/* Celular */
.cal2-tira { display: none; gap: 6px; padding: 2px 12px 10px; overflow-x: auto; scrollbar-width: none; }
.cal2-tira::-webkit-scrollbar { display: none; }
.cal2-tira button { flex: none; width: 48px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; padding: 5px 0 4px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; color: #334155; font-family: inherit; }
.cal2-tira span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: #64748b; }
.cal2-tira b { font-size: 17px; line-height: 1.2; }
.cal2-tira em { display: flex; gap: 2px; height: 5px; margin-top: 2px; }
.cal2-tira em i { width: 5px; height: 5px; border-radius: 50%; background: #94a3b8; }
.cal2-tira button.on { background: #d81b60; border-color: #d81b60; color: #fff; }
.cal2-tira button.on span { color: #fde2ec; } .cal2-tira button.on em i { background: #fff; }
.cal2-fab { display: none; position: fixed; right: 18px; bottom: calc(22px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%;
    background: #d81b60; color: #fff; font-size: 30px; border: none; box-shadow: 0 6px 18px rgba(216,27,96,.45); z-index: 50; cursor: pointer; line-height: 1; }

@media (max-width: 767px) {
    .cal2 { border-radius: 12px; }
    .cal2-nav { padding: 10px 10px 6px; }
    .cal2-lbl { font-size: 14px; flex: 1; }
    .cal2-seg { margin-left: 0; }
    .cal2-seg button[data-vista="3dias"] { display: none; }
    .cal2-gc { display: none; }
    .cal2-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 10px 8px; }
    .cal2-chips::-webkit-scrollbar { display: none; }
    .cal2-chips .cal2-pill { flex: none; }
    .cal2-tira { display: flex; }
    .cal2.vista-dia .cal2-cab { display: none; }
    .cal2-scroll { max-height: calc(100dvh - 260px); }
    .cal2-fab.ver { display: block; }
    .cal2-pie { display: none; }
    .cal2-pop { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; border-radius: 18px 18px 0 0;
        padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
    .cal2-fondo { background: rgba(15,23,42,.35); }
    .cal2-dia { min-height: 64px; padding: 2px; }
    .cal2-mini { display: none; }
    .cal2-puntos { display: flex; gap: 2px; flex-wrap: wrap; }
    .cal2-puntos i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
}
@media (min-width: 768px) { .cal2-puntos { display: none; } }