/* ── BITÁCORA ──
   [v2026.10.27-1] cal-ayuda.css
   2026-10-27 | − .cal-ayuda-btn: la ayuda es el «?» (#calAyudaBtn, la clase común .hvy-ayuda-mini--titulo) al final de la
     barra, de 24px para ir con sus botones (calendario.html [v2026.10.27-1]). + .cay-ay: ese «?» en el ejemplo «En el celular».
   [v2026.10.25-1] cal-ayuda.css
   2026-10-25 | NUEVO. Los ejemplos de la ayuda del Calendario (cal-ayuda-ejemplos.js [v2026.10.25-1]) y el botón «Ayuda» de
     la barra de arriba (#calAyudaBtn). Lo común del panel está en hvy-ayuda.css; las tarjetas de los ejemplos usan las
     clases de verdad del Calendario (calendario.css): aquí solo va lo que las pone fuera de la grilla.
───────────────────────────────────────────────────────── */
/* [27-10-2026] El «?» al final de la barra de arriba (también en el teléfono): un poco más grande que el de un título,
   para ir con los botones de 30px de la barra. */
.cal-actions #calAyudaBtn { width: 24px; height: 24px; font-size: 12px; margin-left: 2px; }
.cay-ay { margin-left: 0; opacity: 1; }   /* el mismo «?» en el teléfono del ejemplo «En el celular» */
#modal-appt .cal-ayuda-mini { vertical-align: middle; margin-left: 4px; }

/* Las tarjetas de ejemplo: fuera de la grilla */
.sa-ej-caja .appt.cay-appt { position: relative; top: auto; left: auto; right: auto; width: 100%; height: 100%; cursor: default;
  box-sizing: border-box; }
.cay-fila-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cay-fila-cards .appt.cay-appt { height: 66px; }
.cay-un { position: relative; max-width: 190px; }
.cay-un .appt.cay-appt { height: 66px; }
.cay-drop { position: relative; display: block; margin-top: 4px; }
.cay-vip { color: #C9A227; font-size: 9px; margin-left: 3px; }
.cay-nota { margin-top: 8px; font-size: 11.5px; color: #4b5563; min-height: 16px; }
.cay-flex { flex: 1; }
.cay-morado { color: #9961FF !important; }
.cay-cand { color: #f59e0b; font-size: 10px; }
.cay-pulso { box-shadow: 0 0 0 3px rgba(153,97,255,.35); border-radius: 7px; }

/* La barra de arriba, en chico */
.cay-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; margin-bottom: 6px; background: #fff;
  border: 1px solid #e4e9f5; border-radius: 10px; font-size: 10.5px; }
.cay-barra-sola { margin-top: 8px; }
.cay-nav { width: 20px; height: 20px; border-radius: 5px; border: 1px solid #e4e9f5; display: inline-flex; align-items: center;
  justify-content: center; color: #6b7194; font-size: 8px; }
.cay-hoy { background: #9961FF; color: #fff; border-radius: 6px; padding: 2px 8px; font-weight: 600; }
.cay-rango { font-size: 11px; color: #383838; }
.cay-vt { display: inline-flex; border: 1px solid #e4e9f5; border-radius: 6px; overflow: hidden; }
.cay-vt span { padding: 2px 8px; color: #6b7194; border-right: 1px solid #e4e9f5; }
.cay-vt span:last-child { border-right: none; }
.cay-vt span.on { background: #9961FF; color: #fff; font-weight: 600; }
.cay-acc { margin-left: auto; display: inline-flex; gap: 5px; flex-wrap: wrap; }
.cay-b { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; background: #eef2ff; color: #4B5EA3;
  border: 1px solid #C9D9FF; font-weight: 600; }
.cay-b-prim { background: #9961FF; color: #fff; border-color: #9961FF; }
.cay-b-fil { background: #f5f0ff; color: #9961FF; border-color: rgba(153,97,255,.45); }
.cay-b-fil.on { background: #9961FF; color: #fff; }
.cay-b-fil small { background: rgba(255,255,255,.25); border-radius: 6px; padding: 0 5px; font-size: 9.5px; }
.cay-b-bloq { color: #9ca3af; background: #f3f4f6; border-color: #e5e7eb; }

/* La semana chica */
.cay-semana { display: grid; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 0; background: #fff; border: 1px solid #e4e9f5;
  border-radius: 10px; overflow: hidden; }
.cay-semana.cay-solo1 { grid-template-columns: 34px 1fr 0 0 0 0; }
.cay-semana.cay-solo1 .cay-col:nth-child(n+3) { display: none; }
.cay-horas { background: #f7f8fc; border-right: 1px solid #eef0f6; }
.cay-h { font-size: 8.5px; color: #9ca3af; text-align: right; padding: 1px 4px 0 0; box-sizing: border-box; border-top: 1px solid #eef0f6; }
.cay-col { border-right: 1px solid #f1f2f7; min-width: 0; }
.cay-col:last-child { border-right: none; }
.cay-dia { height: 20px; font-size: 9.5px; font-weight: 700; color: #6b7194; text-align: center; line-height: 20px; border-bottom: 1px solid #eef0f6; }
.cay-cuerpo { position: relative; background-image: linear-gradient(#f1f2f7 1px, transparent 1px); background-size: 100% 34px; }
.cay-pos { position: absolute; left: 2px; right: 2px; }
.cay-pos .appt.cay-appt { padding: 2px 4px; }
.cay-pos .appt.cay-appt .appt-service, .cay-pos .appt.cay-appt .appt-meta { display: none; }
/* En la semana chica la tarjeta lleva el nombre y el $; lo demás no cabe. */
.cay-pos .appt.cay-appt .appt-mod-slot, .cay-pos .appt.cay-appt .eye-btn, .cay-pos .appt.cay-appt .del-btn,
.cay-pos .appt.cay-appt .appt-op-slot, .cay-pos .cay-vip { display: none !important; }
.cay-pos .appt.cay-appt .appt-name { font-size: 9.5px; min-width: 0; }
.cay-bloq { height: 100%; border-radius: 6px; background: #fde8e8; border: 1px solid #f5b5b5; color: #a32d2d; font-size: 9px; padding: 3px 5px;
  box-sizing: border-box; overflow: hidden; }
.cay-fuera { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, #f3f4f6 0 4px, #fff 4px 8px); }
.cay-globo-hora { display: inline-block; margin-top: 6px; background: #1f2937; color: #fff; font-size: 10.5px; border-radius: 6px; padding: 3px 8px; }
.cay-un-dia .cay-semana { max-width: 260px; }

/* El mes chico */
.cay-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cay-mcell { min-height: 54px; padding: 3px; border: 1px solid #eef0f6; border-radius: 6px; background: #fff; }
.cay-mcell .month-dot { font-size: 8.5px; padding: 1px 3px; margin-top: 2px; border-radius: 3px; }
.cay-mas { font-size: 8.5px; color: #9961FF; font-weight: 600; margin-top: 2px; }

/* La lista */
.cay-agenda { display: flex; flex-direction: column; gap: 6px; }
.cay-ag-dia { font-size: 10.5px; font-weight: 700; color: #6b7194; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.cay-agenda .agenda-fila { cursor: default; }

/* Moverse */
.cay-zoom-dem { display: flex; align-items: flex-start; gap: 6px; }
.cay-zbtn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #e4e9f5; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: #6b7194; background: #fff; flex-shrink: 0; }
.cay-zbtn.on { background: #f5f0ff; color: #9961FF; border-color: #c4b5fd; }
.cay-reglas { flex: 1; border: 1px solid #e4e9f5; border-radius: 8px; background: #fff; }
.cay-reglas div { height: 14px; font-size: 9px; color: #9ca3af; padding-left: 6px; border-top: 1px solid #f1f2f7; transition: height .3s; }
.cay-reglas.grande div { height: 26px; }

/* Leyenda */
.cay-ley { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 10.5px; color: #4b5563; }
.cay-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid; margin-right: 4px; vertical-align: -1px; }
.cay-ley b { font-size: 8px; opacity: .65; }

/* Filtros */
.cay-panel-fil { background: #fff; border: 1px solid #e4e9f5; border-radius: 10px; padding: 6px 8px; margin-bottom: 6px; }
.cay-fil-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 3px 0; }
.cay-fil-et { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; color: #b4b4c0; width: 72px; }
.cay-panel-fil .prof-chip { padding: 2px 9px; font-size: 10px; cursor: default; }
.cay-pto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* Recuadros como los del detalle */
.cay-det { background: rgba(153,97,255,.06); border: 1px solid rgba(153,97,255,.15); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.cay-det-tit { display: flex; align-items: center; gap: 8px; font-size: 9.5px; font-weight: 700; color: rgba(56,56,56,.45); letter-spacing: .07em;
  margin: 2px 0 8px; }
.cay-der { margin-left: auto; font-weight: 500; letter-spacing: 0; }
.cay-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cay-grid2 small, .cay-mods small, .cay-pay3 small { display: block; font-size: 9.5px; color: rgba(56,56,56,.45); margin-bottom: 2px; }
.cay-grid2 b { font-size: 12px; color: #383838; font-weight: 600; }
.cay-cel { display: inline-flex; align-items: center; gap: 5px; }
.cay-mods { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cay-mods small { width: 100%; }
.cay-reag { display: block; margin-top: 10px; text-align: center; padding: 7px; border-radius: 9px; color: #fff; font-weight: 600; font-size: 12px;
  background: linear-gradient(90deg, #9961FF, #5B8DEE); }
.cay-pay3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.cay-pay3 > div { background: #fff; border: 1px solid rgba(153,97,255,.10); border-radius: 8px; padding: 6px 8px; }
.cay-pay3 b { font-size: 13px; color: #383838; }
.cay-pay3 .saldo { background: #FDF6E9; border-color: #F3E2C0; }
.cay-pay3 .saldo small, .cay-pay3 .saldo b { color: #854F0B; }
.cay-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cay-btns .cal-pay-btn { cursor: default; }
.cay-chip { font-size: 9.5px; font-weight: 700; border-radius: 7px; padding: 1px 8px; letter-spacing: 0; }
.cay-chip.rojo { background: rgba(226,68,92,.14); color: #A32D2D; }
.cay-chip.ambar { background: #FDF0D5; color: #854F0B; }
.cay-chip.verde { background: #DDF3E9; color: #0F6E4A; }
.cay-chip.gris { background: #f1f2f6; color: #6b7280; }
.cay-pago-l { font-size: 11px; color: #374151; padding: 3px 0; }
.cay-pago-l i { color: #1D8A63; margin-right: 4px; }
.cay-doc { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #374151; background: #fff; border: 1px dashed #c7cbe0;
  border-radius: 8px; padding: 5px 8px; margin: 4px 0 2px 16px; }
.cay-link { color: #7c3aed; font-weight: 600; font-size: 10.5px; }
.cay-p { font-size: 11.5px; color: #374151; margin: 0 0 6px; }

/* Cuenta */
.cay-cue-l { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #eef0f6; border-radius: 8px; padding: 5px 8px;
  margin-bottom: 5px; font-size: 11.5px; }
.cay-cue-n { flex: 1; color: #1f2937; }
.cay-cue-q { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #374151; }
.cay-cue-q i { font-size: 8px; color: #9961FF; border: 1px solid #ddd6fe; border-radius: 5px; padding: 3px; }
.cay-cue-p { width: 64px; text-align: right; font-weight: 600; }
.cay-cue-x { color: #c7cbe0; font-size: 10px; }
.cay-sug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.cay-sug small { font-size: 9.5px; color: #6b7280; }
.cay-sug-c { font-size: 10px; color: #7c3aed; background: #f3efff; border-radius: 8px; padding: 1px 8px; }
.cay-agregar { display: inline-block; font-size: 11px; font-weight: 600; color: #7c3aed; margin: 2px 0 6px; }
.cay-tot { display: flex; justify-content: space-between; font-size: 11px; color: #4b5563; padding: 2px 0; }
.cay-tot-f { font-size: 12.5px; color: #1f2937; border-top: 1px solid #ede9fe; padding-top: 5px; margin-top: 3px; }

/* Ventanas de ejemplo */
.cay-modal { border: 1px solid #eef0f6; border-radius: 12px; background: #fff; padding: 10px 12px; margin-top: 8px; display: flex;
  flex-direction: column; gap: 7px; box-shadow: 0 6px 18px rgba(30,25,80,.08); }
.cay-modal-tit { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; color: #1f2937; }
.cay-modal-pie { display: flex; justify-content: flex-end; gap: 6px; }
.cay-bt { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 8px;
  border: 1px solid #ddd6fe; color: #7c3aed; background: #fff; }
.cay-bt-ok { background: #9961FF; border-color: #9961FF; color: #fff; }
.cay-bt-rojo { background: #E2445C; border-color: #E2445C; color: #fff; }
.cay-antes { display: flex; align-items: center; gap: 14px; font-size: 12px; }
.cay-antes small { display: block; font-size: 9.5px; color: #9ca3af; }
.cay-antes i { color: #c4b5fd; }
.cay-switch { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #374151; }
.cay-sw { width: 28px; height: 16px; border-radius: 10px; background: #d1d5db; position: relative; }
.cay-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.cay-sw.on { background: #9961FF; }
.cay-sw.on::after { left: 14px; }
.cay-input { border: 1.5px solid #c4b5fd; border-radius: 8px; padding: 6px 9px; font-size: 12px; color: #1f2937; }
.cay-burbuja { background: #f5f0ff; border-radius: 10px; padding: 8px 10px; font-size: 11.5px; color: #374151; }
.cay-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: #fff;
  border: 1px solid #ddd6fe; box-shadow: 0 6px 18px rgba(30,25,80,.10); font-size: 11px; color: #374151; }
.cay-resv { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; font-size: 12px; color: #1f2937; }
.cay-resv.on { background: #f5f0ff; }
.cay-resv small { color: #9ca3af; margin-left: auto; }
.cay-av { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #a5b4fc, #818cf8); color: #fff; font-size: 10px;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cay-av-nuevo { background: #ede9fe; color: #7c3aed; }
.cay-pasos { display: flex; gap: 4px; flex-wrap: wrap; font-size: 10px; color: #9ca3af; }
.cay-pasos span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 8px; background: #f7f8fc; }
.cay-pasos b { width: 15px; height: 15px; border-radius: 50%; background: #e5e7eb; color: #6b7280; display: inline-flex; align-items: center;
  justify-content: center; font-size: 9px; }
.cay-pasos .on { color: #7c3aed; background: #f3efff; } .cay-pasos .on b { background: #9961FF; color: #fff; }
.cay-pasos .ok b { background: #DDF3E9; color: #0F6E4A; }
.cay-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cay-cd { text-align: center; font-size: 10px; padding: 4px 0; border-radius: 6px; color: #6b7280; background: #f7f8fc; }
.cay-cd.ses { background: #9961FF; color: #fff; font-weight: 700; }
.cay-cd.bloq { background: #fde8e8; color: #a32d2d; }
.cay-ley2 { display: flex; gap: 12px; font-size: 10px; color: #6b7280; }
.cay-ley2 i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; }
.cay-ley2 i.ses { background: #9961FF; } .cay-ley2 i.bloq { background: #fde8e8; border: 1px solid #f5b5b5; }
.cay-alu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid #f3f4f6; font-size: 11.5px; }
.cay-alu b { font-weight: 600; color: #1f2937; }
.cay-arr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px; border: 1px solid #eef0f6; border-radius: 10px; }
.cay-arr > div:first-child { flex: 1; min-width: 160px; }
.cay-arr b { font-size: 12px; color: #1f2937; } .cay-arr small { display: block; font-size: 10.5px; color: #6b7280; }
.cay-arr-acc { display: flex; gap: 10px; width: 100%; }

/* Estadías */
.cay-capas { display: flex; gap: 6px; margin-bottom: 6px; font-size: 10.5px; }
.cay-capas span { padding: 2px 9px; border-radius: 8px; border: 1px solid #ddd6fe; color: #7c3aed; }
.cay-capas span.on { background: #f5f0ff; }
.cay-est { border: 1px solid #e4e9f5; border-radius: 10px; background: #fff; padding: 6px; }
.cay-est-cab, .cay-est-fila, .cay-est-dias { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.cay-est-cab span { font-size: 9.5px; font-weight: 700; color: #6b7194; text-align: center; }
.cay-est-fila { margin-top: 4px; }
.cay-est-barra { background: var(--c); border-radius: 6px; padding: 3px 6px; font-size: 9.5px; color: #1f2937; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.cay-est-dias span { height: 30px; border-radius: 4px; margin-top: 4px; }

/* Celular */
.cay-tel { max-width: 340px; border: 1px solid #e4e9f5; border-radius: 18px; background: #f7f8fc; padding: 8px; }
.cay-tel-barra { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; background: #fff; border-radius: 12px; padding: 6px;
  font-size: 10.5px; margin-bottom: 6px; }
.cay-tel-barra .cay-b-fil { margin-left: auto; }
.cay-mas.on { background: #ede4ff; }
.cay-mas-menu { position: absolute; right: 6px; top: calc(100% + 4px); z-index: 2; width: 170px; background: #fff; border: 1px solid #eef0f6;
  border-radius: 10px; box-shadow: 0 10px 28px rgba(30,25,80,.14); padding: 4px; font-size: 11.5px; }
.cay-mas-menu div { padding: 6px 8px; border-radius: 7px; color: #1f2937; display: flex; align-items: center; gap: 8px; }
.cay-mas-menu div > i:first-child { width: 14px; color: #9961FF; text-align: center; }
.cay-mas-menu .prin { color: #7c3aed; font-weight: 700; }
.cay-mas-menu .bloq { color: #9ca3af; } .cay-mas-menu .bloq > i:first-child { color: #c7cbe0; }
.cay-mas-menu hr { border: none; border-top: 1px solid #f1f2f7; margin: 3px 4px; }
.cay-tel-fila { background: var(--c); border-radius: 8px; padding: 6px 8px; font-size: 11px; color: #1a2f5e; }
.cay-tel-fila b { margin-right: 6px; }

/* Permisos */
.cay-aviso { font-size: 11px; color: #92400e; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 9px; padding: 7px 9px; }
.cay-aviso i { color: #f59e0b; margin-right: 4px; }
.cay-perm { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; border-radius: 9px; border: 1px solid #e5e7eb;
  background: #fff; color: #6b7280; font-size: 11px; }

/* Mapa */
.cay-mapa { display: grid; grid-template-columns: 1.2fr 1fr .6fr; grid-template-rows: 34px 1fr 26px; gap: 6px; height: 170px; }
.cay-mapa-z { border: 1px dashed #c4b5fd; border-radius: 10px; background: #faf8ff; color: #4c1d95; font-family: inherit; font-weight: 600;
  font-size: 11px; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.cay-mapa-z:hover { background: #f3efff; border-style: solid; }
.cay-m-grilla { grid-column: 1 / 4; }
.cay-m-ley { grid-column: 1 / 4; }
.cay-mapa-n { width: 18px; height: 18px; border-radius: 50%; background: #8b5cf6; color: #fff; font-size: 10px; display: inline-flex;
  align-items: center; justify-content: center; }