/* Disponibilidad horaria (Mi Cuenta, Fase 4C): una sola semana dibujada. Todo bajo #accountView. */
#accountView .account-availability-toolbar > label[hidden] { display: none; }
/* Las cifras nunca se parten («4 de 7» en un renglón) y cada tarjeta mide lo que su rótulo necesita. Con varios
   profesionales el selector «Agenda de» se oculta: las cifras toman su lugar y el botón no se estira (hallazgo T3). */
#accountView .account-availability-toolbar dd { white-space: nowrap; }
#accountView .account-availability-toolbar dl { grid-template-columns: repeat(3, minmax(max-content, 1fr)); }
@media (min-width: 1101px) {
  #accountView .account-availability-toolbar:has(> label[hidden]) { grid-template-columns: minmax(0, 1fr) auto; }
}
/* En celulares muy angostos las tres cifras no entran lado a lado: cada una pasa a una fila, rótulo y número. */
@media (max-width: 380px) {
  #accountView .account-availability-toolbar dl { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #accountView .account-availability-toolbar dl div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; }
  #accountView .account-availability-toolbar dd { font-size: 22px !important; }
}
#accountView .account-availability-week > header { align-items: flex-end; }
#accountView .account-availability-week > header > span { color: #5b6b7f; font-size: 13px; }
/* En computadora se pasa el mouse; en tablet y celular se toca (hallazgo D6). */
#accountView .account-availability-week > header > .account-availability-week__hint.is-touch { display: none; }
@media (max-width: 980px) {
  #accountView .account-availability-week > header > .account-availability-week__hint.is-pointer { display: none; }
  #accountView .account-availability-week > header > .account-availability-week__hint.is-touch { display: inline; }
}
@media (max-width: 520px) {
  #accountView .account-availability-week > header { flex-wrap: wrap; }
  #accountView .account-availability-week > header > .account-availability-week__hint.is-touch { display: block; flex-basis: 100%; }
}
/* Al editar un bloque, el día del bloque queda marcado y fijo; los días con otro horario se ven apagados. */
#accountView #accountAvailabilityDayFields label.is-own-day { cursor: default; }
#accountView #accountAvailabilityDayFields label[title] { cursor: not-allowed; }

/* Selector de profesionales: círculos con iniciales (en el futuro, su foto) y «Todos juntos». */
#accountView .account-availability-people { display: flex; flex-wrap: wrap; gap: 8px; }
#accountView .account-availability-people[hidden] { display: none; }
#accountView .account-availability-people > button { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; max-width: 100%; padding: 6px 14px 6px 7px; border: 1px solid #cfe3ea; border-radius: 999px; color: #2f4258; background: #fff; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
#accountView .account-availability-people > button:hover { border-color: #0e7490; background: #f2fbfd; }
#accountView .account-availability-people > button[aria-pressed="true"] { border-color: #0e7490; color: #0b5a70; background: #e3f6fa; box-shadow: inset 0 0 0 1px #0e7490; }
#accountView .account-availability-people > button > span:not(.account-availability-stack) { min-width: 0; overflow-wrap: anywhere; text-align: left; }
#accountView .account-availability-stack { display: inline-flex; }
#accountView .account-availability-stack .account-availability-avatar { margin-left: -7px; box-shadow: 0 0 0 2px #fff; }
#accountView .account-availability-stack .account-availability-avatar:first-child { margin-left: 0; }
#accountView .account-availability-avatar { display: inline-grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 50%; color: #fff; background: var(--lane, #0e7490); font-size: 12px; font-style: normal; font-weight: 900; letter-spacing: 0; line-height: 1; }

/* Tablero: regla de horas arriba y un renglón por día. */
#accountView .account-availability-board { --grid-steps: 7; container-type: inline-size; container-name: avboard; overflow: hidden; border: 1px solid #cfe3ea; border-radius: 14px; background: #fff; }
#accountView .account-availability-ruler { display: grid; grid-template-columns: 124px minmax(0, 1fr); border-bottom: 1px solid #dcebf0; background: #f3fafc; }
#accountView .account-availability-ruler__lead { padding: 7px 14px; color: #5b6b7f; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#accountView .account-availability-ruler__ticks { position: relative; height: 30px; margin: 0 16px; }
#accountView .account-availability-ruler__ticks span { position: absolute; top: 6px; color: #3f5168; font-size: 12px; font-weight: 800; transform: translateX(-50%); }
#accountView .account-availability-ruler__ticks span.is-first { transform: none; }
#accountView .account-availability-ruler__ticks span.is-last { transform: translateX(-100%); }

#accountView #accountAvailabilityWeek { overflow: visible; border: 0; border-radius: 0; background: transparent; }
#accountView #accountAvailabilityWeek > article { display: grid; grid-template-columns: 124px minmax(0, 1fr); min-height: 0; }
#accountView #accountAvailabilityWeek > article + article { border-top: 1px solid #e3eef2; }
#accountView #accountAvailabilityWeek > article > header { display: grid; align-content: center; gap: 2px; padding: 12px 14px; border-right: 0; background: transparent; }
#accountView #accountAvailabilityWeek > article > header strong { color: #1f3347; font-size: 14px; }
#accountView #accountAvailabilityWeek > article > header small { color: #5b6b7f; font-size: 12px; font-weight: 700; }
#accountView #accountAvailabilityWeek > article.is-legacy-day > header { background: #f1f5f9; }
#accountView #accountAvailabilityWeek > article > section { display: grid; align-content: center; gap: 6px; min-width: 0; padding: 10px 16px; }

#accountView .account-availability-track { position: relative; height: 40px; border-radius: 9px; background: repeating-linear-gradient(90deg, #dcebf0 0, #dcebf0 1px, transparent 1px, transparent calc(100% / var(--grid-steps))), #f4f9fb; }
#accountView .account-availability-lane { display: grid; gap: 6px; min-width: 0; }
#accountView .account-availability-notes { display: flex; flex-wrap: wrap; gap: 6px 14px; }
#accountView .account-availability-notes[hidden], #accountView .account-availability-note[hidden] { display: none; }
#accountView .account-availability-closed { display: flex; min-height: 40px; align-items: center; padding: 0 14px; border: 1px dashed #b6cdd5; border-radius: 9px; color: #5b6b7f; font-size: 13px; font-weight: 700; }

#accountView .account-availability-item { position: absolute; top: 4px; bottom: 4px; min-width: 6px; }
#accountView .account-availability-bar { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(135deg, var(--lane), color-mix(in srgb, var(--lane) 80%, #fff)); box-shadow: 0 3px 8px color-mix(in srgb, var(--lane) 30%, transparent); }
#accountView .account-availability-item.has-issue .account-availability-bar { background: repeating-linear-gradient(135deg, #be3a52, #be3a52 6px, #d1566b 6px, #d1566b 12px); box-shadow: 0 3px 8px rgba(190, 58, 82, .3); }
#accountView .account-availability-info { position: absolute; inset: 0; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0 6px 0 8px; color: #fff; white-space: nowrap; }
#accountView .account-availability-info b { font-size: 13px; font-weight: 800; }
#accountView .account-availability-info em { padding: 2px 8px; border-radius: 999px; color: #8e2237; background: #fff; font-size: 12px; font-style: normal; font-weight: 900; }
#accountView .account-availability-item:not(.is-tight) .account-availability-avatar { width: 26px; height: 26px; flex-basis: 26px; color: var(--lane); background: #fff; }
#accountView .account-availability-actions { display: flex; gap: 4px; margin-left: auto; opacity: 0; pointer-events: none; transition: opacity .12s; }
#accountView .account-availability-item:hover .account-availability-actions,
#accountView .account-availability-item:focus-within .account-availability-actions,
#accountView .account-availability-item.is-open .account-availability-actions { opacity: 1; pointer-events: auto; }
#accountView .account-availability-actions button { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 8px; color: #fff; background: rgba(255, 255, 255, .24); cursor: pointer; }
#accountView .account-availability-actions button:hover { background: rgba(255, 255, 255, .42); }
#accountView .account-availability-actions button .app-icon { width: 15px; height: 15px; }

/* Barras angostas: su horario pasa a una nota debajo del renglón, con las mismas acciones. */
#accountView .account-availability-item.is-tight .account-availability-info { display: none; }
#accountView .account-availability-note { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; color: #1f3347; white-space: nowrap; }
#accountView .account-availability-note b { font-size: 13px; font-weight: 800; }
#accountView .account-availability-note em { padding: 2px 8px; border-radius: 999px; color: #fff; background: #be3a52; font-size: 12px; font-style: normal; font-weight: 900; }
#accountView .account-availability-note .account-availability-avatar { width: 26px; height: 26px; flex-basis: 26px; }
#accountView .account-availability-note .account-availability-actions { width: 0; margin-left: 0; overflow: hidden; }
#accountView .account-availability-note:hover .account-availability-actions,
#accountView .account-availability-note:focus-within .account-availability-actions,
#accountView .account-availability-note.is-open .account-availability-actions { width: auto; margin-left: 2px; opacity: 1; pointer-events: auto; }
#accountView .account-availability-note .account-availability-actions button { color: var(--lane); background: #fff; box-shadow: inset 0 0 0 1px #cfe3ea; }
#accountView .account-availability-note .account-availability-actions button:hover { background: #eef7fa; }

@container avboard (max-width: 560px) {
  #accountView .account-availability-ruler { grid-template-columns: minmax(0, 1fr); }
  #accountView .account-availability-ruler__lead { display: none; }
  #accountView #accountAvailabilityWeek > article { grid-template-columns: minmax(0, 1fr); }
  #accountView #accountAvailabilityWeek > article > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 10px 14px 0; }
  #accountView #accountAvailabilityWeek > article > section { padding-top: 8px; }
}