/* La franja representa al profesional; fondos y etiquetas representan el estado. */
.agenda-page-modern .agenda-workspace-v4 .agenda-event-card.has-professional-stripe,
.agenda-page-modern .agenda-week-box-event .agenda-event-card.has-professional-stripe,
.agenda-page-modern .agenda-mobile-appointment.has-professional-stripe {
  border-left-color: var(--agenda-professional-color, #94a3b8) !important;
  border-left-width: 6px !important;
  border-left-style: solid !important;
}

.professional-person strong .professional-color-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #cfd8e3;
}
.professional-color-setting {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 13px 15px;
  border: 1px solid #d9d5e8;
  border-radius: 11px;
  background: #faf9ff;
}
.professional-color-setting > label { font-weight: 800; color: #252a40; }
.professional-color-setting > div { display: flex; align-items: center; gap: 12px; }
.professional-color-setting input[type=color] {
  width: 58px !important;
  min-width: 58px;
  height: 43px !important;
  padding: 3px !important;
  cursor: pointer;
}
.professional-color-setting span { color: #5d6475; font-size: 12px; line-height: 1.35; }
.professional-drawer { border-left: 1px solid #aebbd0; }
.professional-drawer > header { border-bottom-color: #bfc9d8; background: #f7f9ff; }
.professional-drawer > header h2 { color: #16243b; }
.professional-drawer > header p { color: #4d5d73; }
.professional-drawer .professional-steps { border-bottom: 1px solid #c6cfdd; background: #f7f8fd; }
.professional-drawer .professional-steps button { color: #4a5870; font-weight: 700; }
.professional-drawer .professional-wizard-body label { color: #1e2d46; }
.professional-drawer .professional-wizard-body input:not([type=checkbox]):not([type=radio]),
.professional-drawer .professional-wizard-body select,
.professional-drawer .professional-wizard-body textarea {
  border-color: #9eacc1;
  background: #fff;
  color: #17243a;
}
.professional-drawer .professional-wizard-body :is(input, select, textarea):focus-visible,
.professional-drawer :is(.professional-wizard-actions button, .professional-drawer-close):focus-visible {
  outline: 3px solid #5d33d6 !important;
  outline-offset: 2px;
}
.professional-drawer .professional-wizard-actions { border-top: 1px solid #bdc8d7; background: #f7f9ff; }
.professional-drawer .professional-wizard-actions .button:not(.button-primary) {
  border: 1px solid #8f9bb1 !important;
  background: #fff !important;
  color: #253650 !important;
  text-decoration: none !important;
}
.professional-drawer .professional-wizard-actions .button-primary {
  border: 1px solid #5425c5 !important;
  background: #6332d2 !important;
  color: #fff !important;
  text-decoration: none !important;
}
.professional-drawer .professional-wizard-actions .button-primary:hover { background: #4e20bb !important; }
.professional-drawer .professional-wizard-actions button:disabled { opacity: .55; cursor: not-allowed; }

/* Beta 8: distintivos vectoriales visibles en la agenda y selector legible. */
.agenda-page-modern .agenda-workspace-v4 .agenda-event-card .event-client > i.event-client-mark:not(.has-appointment-marker),
.agenda-page-modern .agenda-week-box-event .event-client > i.event-client-mark:not(.has-appointment-marker) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.agenda-page-modern .agenda-workspace-v4 .agenda-event-card[data-density="micro"] .event-client > i.event-client-mark {
  display: grid !important;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
}
.agenda-page-modern .agenda-workspace-v4 .agenda-event-card .event-client > i.has-appointment-marker,
.agenda-page-modern .agenda-week-box-event .event-client > i.has-appointment-marker {
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  color: inherit !important;
  line-height: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.agenda-page-modern .agenda-workspace-v4 .agenda-event-card[data-density="micro"] .event-client > i.has-appointment-marker {
  display: grid !important;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
}
.appointment-marker-art {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 6px;
  background: var(--marker-color, #566a90);
  color: #fff;
  box-shadow: 0 1px 3px rgba(24, 37, 64, .2), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.agenda-page-modern .agenda-event-card .event-client > i.has-appointment-marker .appointment-marker-art,
.agenda-page-modern .agenda-week-box-event .event-client > i.has-appointment-marker .appointment-marker-art {
  box-sizing: border-box !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: var(--marker-color, #566a90) !important;
  color: #fff !important;
  white-space: normal !important;
}
.appointment-marker-art svg { display: block; width: 12px; height: 12px; }
.appointment-marker-art.marker-key-bolt { --marker-color: #975d00; }
.appointment-marker-art.marker-key-alert { --marker-color: #ae4925; }
.appointment-marker-art.marker-key-star { --marker-color: #10846f; }
.appointment-marker-art.marker-key-person { --marker-color: #58677e; }
.appointment-marker-art.marker-key-gift { --marker-color: #7651c8; }
.appointment-marker-art.marker-key-phone { --marker-color: #1d73b3; }
.appointment-marker-art.marker-key-message { --marker-color: #3975c1; }
.appointment-marker-art.marker-key-diamond { --marker-color: #bb4e86; }
.appointment-marker-art.marker-key-heart { --marker-color: #19784d; }
.appointment-marker-art.marker-key-flag { --marker-color: #8a55bd; }
.agenda-page-modern .agenda-workspace-v4 .agenda-event-card[data-density="micro"] .event-client .appointment-marker-art { width: 15px; height: 15px; border-radius: 5px !important; }
.agenda-page-modern .agenda-workspace-v4 .agenda-event-card[data-density="micro"] .event-client .appointment-marker-art svg { width: 10px; height: 10px; }
.agenda-detail-modal .appointment-marker-picker {
  margin-top: 10px;
  border: 1px solid #b6c8df;
  border-radius: 11px;
  background: #fff;
  color: #20334e;
  overflow: hidden;
}
.agenda-detail-modal .appointment-marker-picker > summary {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
}
.agenda-detail-modal .appointment-marker-picker > summary::-webkit-details-marker { display: none; }
.agenda-detail-modal .appointment-marker-picker > summary > .dashicons:first-child {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 8px;
  background: #ece5ff;
  color: #6326c9;
}
.agenda-detail-modal .appointment-marker-picker > summary > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.agenda-detail-modal .appointment-marker-picker strong { font-size: 12px; }
.agenda-detail-modal .appointment-marker-picker summary small { color: #53637a; font-size: 10px; }
.agenda-detail-modal .appointment-marker-picker[open] > summary { border-bottom: 1px solid #d9e1ed; }
.agenda-detail-modal .appointment-marker-options { padding: 11px 12px 13px; }
.agenda-detail-modal .appointment-marker-options > p:first-child { margin: 0 0 10px; color: #52627a; font-size: 11px; line-height: 1.4; }
.agenda-detail-modal .appointment-marker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.agenda-detail-modal .appointment-marker-grid button,
.agenda-detail-modal .appointment-marker-clear {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 62px;
  padding: 7px 4px;
  border: 1px solid #b8c5d8;
  border-radius: 8px;
  background: #f9fbff;
  color: #20334e;
  cursor: pointer;
}
.agenda-detail-modal .appointment-marker-grid button .appointment-marker-art { width: 29px; height: 29px; border-radius: 9px; }
.agenda-detail-modal .appointment-marker-grid button .appointment-marker-art svg { width: 19px; height: 19px; }
.agenda-detail-modal .appointment-marker-grid button small { display: block; max-width: 100%; font-size: 10px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.agenda-detail-modal .appointment-marker-grid button[aria-pressed="true"],
.agenda-detail-modal .appointment-marker-clear[aria-pressed="true"] { border: 2px solid #6130d0; background: #f0eaff; color: #4520a0; font-weight: 800; }
.agenda-detail-modal .appointment-marker-grid button:hover,
.agenda-detail-modal .appointment-marker-clear:hover { border-color: #6130d0; background: #f4efff; }
.agenda-detail-modal .appointment-marker-grid button:focus-visible,
.agenda-detail-modal .appointment-marker-clear:focus-visible { outline: 3px solid #713fe0; outline-offset: 2px; }
.agenda-detail-modal .appointment-marker-clear { width: 100%; min-height: 30px; margin-top: 8px; font-size: 11px; }
.agenda-detail-modal [data-marker-feedback] { min-height: 15px; margin: 7px 0 0; font-size: 10px; }
.agenda-detail-modal [data-marker-feedback].is-error { color: #ac2525; }
.agenda-detail-modal [data-marker-feedback].is-success { color: #08774d; }

/* Beta 2: contraste y acciones claras en el directorio de profesionales. */
.professionals-screen .professionals-toolbar {
  border: 1px solid #cbd3e1;
  background: #f8faff;
  box-shadow: 0 6px 18px rgba(27, 39, 68, .07);
}
.professionals-screen .professionals-toolbar input,
.professionals-screen .professionals-toolbar select {
  border: 1px solid #9eacc1 !important;
  background: #fff !important;
  color: #1d2a40 !important;
  font-weight: 600;
}
.professionals-screen .professionals-toolbar input::placeholder { color: #59677c; opacity: 1; }
.professionals-screen .professionals-toolbar :is(input, select):focus-visible,
.professionals-screen .professional-actions a:focus-visible {
  outline: 3px solid #5d33d6 !important;
  outline-offset: 2px;
}
.professionals-screen .professionals-directory {
  border: 1px solid #cbd3e1;
  box-shadow: 0 9px 24px rgba(27, 39, 68, .08);
}
.professionals-screen .professionals-directory-head,
.professionals-screen .professional-row {
  grid-template-columns: minmax(220px, 1.5fr) minmax(110px, .8fr) minmax(140px, 1fr) minmax(100px, .75fr) minmax(100px, .75fr) minmax(80px, .6fr) minmax(205px, .95fr);
}
.professionals-screen .professionals-directory-head {
  background: #e9e9f5;
  border-bottom: 1px solid #bac4d5;
  color: #28344a;
  font-size: 11px;
  letter-spacing: .02em;
}
.professionals-screen .professional-row {
  border-top: 1px solid #dce2ec;
  background: #fff;
}
.professionals-screen .professional-row:nth-of-type(2n+1) { background: #f9faff; }
.professionals-screen .professional-row:hover { background: #f0edff; }
.professionals-screen .professional-person strong { color: #17243b; font-weight: 800; }
.professionals-screen .professional-person small { color: #58657a; }
.professionals-screen .professional-chip {
  border: 1px solid #d5c5f5;
  background: #efe8ff;
  color: #5630af;
  font-size: 11px;
}
.professionals-screen .professional-chip.success { border-color: #b4ddc5; background: #e4f6ea; color: #12673d; }
.professionals-screen .professional-chip.muted-chip { border-color: #cbd2dd; background: #edf0f5; color: #48566a; }
.professionals-screen .professional-actions { display: flex !important; align-items: center; gap: 8px !important; }
.professionals-screen .professional-actions a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap;
  box-shadow: none !important;
}
.professionals-screen .professional-actions a.button .dashicons {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}
.professionals-screen .professional-actions a.professional-configure-action {
  border: 1px solid #5730c4 !important;
  background: #6536d6 !important;
  color: #fff !important;
}
.professionals-screen .professional-actions a.professional-configure-action:hover {
  background: #4f23bc !important;
  color: #fff !important;
}
.professionals-screen .professional-actions a.professional-delete-action {
  width: auto !important;
  min-width: 0 !important;
  height: 38px !important;
  border: 1px solid #c8455d !important;
  background: #fff4f5 !important;
  color: #a62540 !important;
}
.professionals-screen .professional-actions a.professional-delete-action:hover {
  border-color: #a62540 !important;
  background: #ffe5e9 !important;
  color: #84192e !important;
}
@media (max-width: 1250px) {
  .professionals-screen .professionals-directory-head { display: none; }
  .professionals-screen .professional-row {
    grid-template-columns: minmax(210px, 1.4fr) repeat(2, minmax(100px, 1fr)) minmax(205px, auto);
    gap: 10px;
  }
  .professionals-screen .professional-row > div:nth-child(4),
  .professionals-screen .professional-row > div:nth-child(5),
  .professionals-screen .professional-row > div:nth-child(6) { display: none; }
}
@media (max-width: 700px) {
  .professionals-screen .professional-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .professionals-screen .professional-row > div:not(:first-child):not(:last-child) { display: none; }
  .professionals-screen .professional-actions { padding-left: 60px; }
}