/* Oficinapp — Agenda (día por profesional / semana), visita y formulario de huecos. */

.field input[type=date], .field input[type=time], .field input[type=datetime-local], .field input[type=number],
.agenda-date input[type=date] {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  font: inherit; font-size: 16px; color: var(--gray-900); background: #fff;
}
@media (min-width: 768px) {
  .field input[type=date], .field input[type=time], .field input[type=datetime-local], .field input[type=number], .agenda-date input[type=date] { font-size: 14px; }
}
.has-error input[type=time], .has-error input[type=date] { border-color: var(--danger); }

.agenda-toolbar { gap: 10px; }
.agenda-nav { display: flex; align-items: center; gap: 6px; }
.agenda-date input[type=date] { width: 160px; }
.agenda-range { color: var(--navy-900); font-size: 15px; }

.agenda { padding: 0; overflow: hidden; }
.agenda__scroll { overflow: auto; max-height: calc(100dvh - 190px); }
.agenda__grid { display: grid; position: relative; min-width: min-content; }
.agenda__corner, .agenda__colhead {
  position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid var(--gray-100); height: 48px;
}
.agenda__corner { left: 0; z-index: 4; }
.agenda__colhead { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; color: var(--navy-900); border-left: 1px solid var(--gray-100); padding: 0 8px; white-space: nowrap; overflow: hidden; }
.agenda__colhead span:last-child, .agenda__colhead a { overflow: hidden; text-overflow: ellipsis; }
.agenda__colhead a:hover { color: var(--orange-600); }
.agenda__colhead.is-today { color: var(--orange-600); }
.agenda__hours { position: sticky; left: 0; z-index: 2; background: #fff; }
.agenda__hours span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.agenda__hours span:first-child { transform: none; }
.agenda__col {
  position: relative; border-left: 1px solid var(--gray-100);
  background-image: repeating-linear-gradient(to bottom, var(--gray-100) 0 1px, transparent 1px 28px, rgba(238,241,245,.5) 28px 29px, transparent 29px 56px);
}
.agenda__col.is-today { background-color: #FFFBF7; }
.agenda__event {
  position: absolute; z-index: 1; overflow: hidden; padding: 4px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--c) 14%, #fff); border-left: 3px solid var(--c);
  color: var(--navy-900); font-size: 12px; line-height: 1.3; display: flex; flex-direction: column; gap: 1px;
}
.agenda__event:hover { box-shadow: var(--shadow-elevated); z-index: 2; }
.agenda__event strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda__event .pill { align-self: flex-start; font-size: 10px; padding: 0 6px; }
.agenda__time { font-weight: 600; color: color-mix(in srgb, var(--c) 80%, #000); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 2px; }
.agenda__sub { color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda__event--completed { opacity: .65; }
.agenda__event--no_show { opacity: .65; background: var(--danger-50); border-left-color: var(--danger); }
.agenda__block {
  position: absolute; left: 0; right: 0; z-index: 0; background: repeating-linear-gradient(45deg, rgba(208,213,221,.45) 0 6px, rgba(238,241,245,.7) 6px 12px);
  color: var(--gray-500); font-size: 11px; font-weight: 600; padding: 4px 6px; overflow: hidden;
}
.agenda__block span { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.85); border-radius: 6px; padding: 1px 6px; }
.agenda__now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; }
.agenda__now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

.agenda-list { display: none; padding: 4px 16px; }
.agenda-list__day { font-weight: 700; color: var(--navy-900); padding: 14px 0 4px; border-top: 1px solid var(--gray-100); }
.agenda-list__day:first-child { border-top: 0; }
.agenda-list__time { display: flex; flex-direction: column; font-weight: 700; color: var(--navy-900); min-width: 44px; }
.agenda-list__time small { font-weight: 500; color: var(--gray-500); }
.agenda-extra { margin-top: 16px; align-items: start; }

/* Huecos libres */
.slots { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; align-items: center; }
.slot {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 72px; padding: 6px 10px;
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm); background: #fff; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--navy-900); font-variant-numeric: tabular-nums;
}
.slot small { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--gray-500); }
.slot small i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.slot:hover { border-color: var(--orange-500); }
.slot.is-active { background: var(--orange-500); border-color: var(--orange-500); color: #fff; }
.slot.is-active small { color: rgba(255,255,255,.85); }

@media (max-width: 767px) {
  .agenda { display: none; }
  .agenda-list { display: block; }
  .agenda-range { width: 100%; order: 5; }
  .agenda-date input[type=date] { width: 140px; }
}