:root{font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;--bg:#edf5f6;--surface:#fff;--ink:#17324d;--muted:#718294;--line:#dbe7ea;--soft:#f6fafb;--primary:#0d8b83;--primary-dark:#08716b;--accent:#e5f6f2;--radius:18px;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}*[hidden]{display:none!important}body{margin:0;min-height:100vh;background:radial-gradient(circle at 18% 0,#f8fcfb 0,transparent 34%),var(--bg);color:var(--ink)}.booking{width:min(920px,calc(100vw - 32px));margin:42px auto;padding:30px;background:var(--surface);border:1px solid rgba(182,210,214,.7);border-radius:24px;box-shadow:0 20px 55px rgba(22,63,77,.1)}.dialog-header{display:flex;justify-content:space-between;align-items:flex-start;padding:0 2px 22px;border-bottom:1px solid var(--line)}.booking-eyebrow{display:inline-flex;margin-bottom:9px;padding:5px 10px;border-radius:999px;background:var(--accent);color:var(--primary-dark);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.appointment-title-row{display:flex;align-items:baseline}.booking h1{margin:0;font-size:30px;line-height:1.15;letter-spacing:-.03em;color:var(--ink)}.booking-intro{max-width:570px;margin:9px 0 0;color:var(--muted);font-size:14px;line-height:1.55}.booking-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--accent);color:var(--primary);font-size:21px}.appointment-dialog-content{display:grid;align-content:start;gap:16px;padding-top:22px}.booking-form{display:grid;gap:14px}.booking-steps{display:flex;align-items:center;gap:10px;margin:0 2px 2px;color:#9aa8b4;font-size:11px;font-weight:700}.booking-steps i{height:1px;flex:1;background:var(--line)}.step{display:flex;align-items:center;gap:6px;white-space:nowrap}.step b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#edf1f3;color:#7e8d99;font-size:11px}.step.active{color:var(--primary-dark)}.step.active b{background:var(--primary);color:#fff}.appointment-section{padding:19px 20px;border:1px solid var(--line);border-radius:16px;background:#fff}.patient-section{background:linear-gradient(120deg,#f8fcfc,#fff)}.section-heading{display:flex;align-items:flex-start;gap:11px;margin-bottom:17px}.section-number{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:9px;background:var(--accent);color:var(--primary-dark);font-size:13px;font-weight:800}.appointment-section h3{margin:1px 0 3px;font-size:16px;line-height:1.25;color:var(--ink)}.section-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.4}.form-grid{display:grid;gap:14px 16px}.patient-fields-grid{grid-template-columns:minmax(0,1.35fr) minmax(180px,.65fr)}.appointment-details-grid{grid-template-columns:1.05fr 1fr .85fr;align-items:start}.field{display:grid;min-width:0;gap:7px;margin:0}.field>span,legend{color:var(--ink);font-size:12px;font-weight:800;line-height:1.3}.field input,.field select,.field textarea{width:100%;min-height:43px;border:1px solid #cfdee2;border-radius:10px;background:#fff;color:var(--ink);padding:10px 12px;font:inherit;font-size:14px;line-height:1.25;transition:border-color .15s,box-shadow .15s,background .15s}.field input::placeholder,.field textarea::placeholder{color:#a5b2bc}.field input:focus,.field select:focus,.field textarea:focus,.slots button:focus-visible,.btn:focus-visible{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px rgba(13,139,131,.13)}.field select:disabled{color:var(--ink);opacity:1;background:#f4f8f8}.select-with-icon{position:relative}.select-with-icon>span{position:absolute;z-index:1;top:12px;left:12px;color:var(--primary);font-size:14px}.select-with-icon select{padding-left:34px}.field-hint,.type-note{color:var(--muted);font-size:11px;line-height:1.3}.slot-field{min-width:0;margin:0;padding:17px 0 0;border:0;border-top:1px solid var(--line)}.slot-field legend{padding:0 0 4px;font-size:13px}.slot-subtitle{margin:0 0 12px;color:var(--muted);font-size:12px}.slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:100%;min-width:0}.slots p{grid-column:1/-1;margin:0;padding:13px 14px;border:1px dashed #c7dadd;border-radius:10px;background:var(--soft);color:var(--muted);font-size:12px;line-height:1.45}.slots button{min-height:40px;padding:8px 7px;border:1px solid #c9dcdf;border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:750;cursor:pointer;transition:all .15s}.slots button:hover{border-color:var(--primary);background:#f0fbf9;color:var(--primary-dark);transform:translateY(-1px)}.slots button.selected{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 5px 12px rgba(13,139,131,.2)}.slots button.slot-more{grid-column:1/-1;background:var(--soft);color:var(--primary-dark)}.dialog-actions{display:flex;justify-content:flex-end;padding-top:2px}.btn{min-height:45px;border:1px solid transparent;border-radius:11px;padding:10px 18px;font:inherit;font-size:14px;font-weight:800;cursor:pointer}.btn.primary{background:var(--primary);color:#fff;box-shadow:0 7px 16px rgba(13,139,131,.2)}.btn.primary:hover{background:var(--primary-dark)}.btn.primary span{margin-left:8px;font-size:17px}.btn:disabled{cursor:not-allowed;opacity:.5;box-shadow:none}#message,#error{margin:0;font-size:13px;line-height:1.45}#message{color:var(--primary-dark);font-weight:700}#error{color:#b42318;font-weight:700}.manage-panel{display:grid;gap:10px;margin:4px 0 0;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.manage-panel .manage-title{color:var(--ink);font-size:14px;font-weight:800;line-height:1.35}.manage-panel p{margin:0;color:var(--muted);font-size:12px;line-height:1.4}.manage-panel .dialog-actions{justify-content:flex-start;gap:8px;padding:0}.manage-panel .btn{min-height:36px;padding:7px 12px;font-size:12px}.manage-panel .btn.danger{border-color:#f0b8b3;background:#fff;color:#b42318}.confirmation-panel{display:grid;gap:10px;margin:4px 0 0;padding:18px;border:1px solid #b8ded8;border-radius:14px;background:#f0fbf8}.confirmation-panel h3{margin:0;color:var(--primary-dark);font-size:16px}.confirmation-panel p{margin:0;color:#35605d;font-size:13px;line-height:1.5}.confirmation-panel .dialog-actions{justify-content:flex-start;padding-top:3px}.confirmation-panel .btn{min-height:38px;padding:8px 13px;font-size:12px}@media(max-width:700px){.booking{width:calc(100% - 20px);margin:10px auto;padding:20px 15px;border-radius:18px}.booking h1{font-size:25px}.booking-mark{width:36px;height:36px}.booking-steps{gap:6px;font-size:10px}.booking-steps i{min-width:8px}.appointment-section{padding:16px 14px}.patient-fields-grid,.appointment-details-grid{grid-template-columns:1fr}.slots{grid-template-columns:repeat(3,minmax(0,1fr))}.dialog-actions .btn{width:100%}}@media(max-width:400px){.booking-steps .step{font-size:0}.booking-steps .step b{font-size:11px}.slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
.doctor-picker{min-height:43px;position:relative;display:flex;align-items:center;width:100%;border:1px solid #cfdee2;border-radius:10px;background:#f4f8f8;overflow:hidden}.doctor-picker>span{position:relative!important;top:auto!important;left:auto!important;flex:0 0 auto;margin:0 10px 0 12px}.doctor-display{min-width:0;overflow:hidden;padding-right:12px;color:#17324d;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.doctor-picker select{position:absolute;inset:0;width:100%;min-height:43px;padding:10px 82px 10px 34px!important;border:0!important;border-radius:0!important;background:transparent!important;opacity:0;pointer-events:none}.doctor-picker.is-editing{background:#fff;border-color:#0d8b83}.doctor-picker.is-editing .doctor-display{display:none}.doctor-picker.is-editing select{position:relative;inset:auto;opacity:1;pointer-events:auto}.doctor-picker.is-editing>span{position:absolute!important;z-index:1}.doctor-picker .doctor-change{z-index:2}
.booking {
  margin: 28px auto;
  padding: 24px;
  border-radius: 12px;
  border-color: #dbe7e6;
  box-shadow: 0 8px 24px rgba(46, 77, 84, .07);
}

.booking-eyebrow {
  padding: 3px 7px;
  border-radius: 5px;
  background: transparent;
  color: #6d827f;
  font-weight: 600;
  letter-spacing: .03em;
}

.booking h1,
.appointment-section h3,
.manage-panel .manage-title {
  color: #263c4b;
  font-weight: 650;
}

.booking-mark,
.section-number,
.step.active b {
  background: #edf7f5;
  color: #426a68;
}

.appointment-section,
.manage-panel,
.confirmation-panel {
  border-radius: 10px;
  border-color: #dbe7e6;
  box-shadow: none;
}

.confirmation-result,
.booking-action-result {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0 0 9px;
  padding: 10px 12px;
  border: 1px solid #c7e5dd;
  border-radius: 11px;
  background: #f0faf7;
  color: #176a58;
}

.confirmation-result-mark,
.booking-action-result-mark {
  display: grid;
  flex: 0 0 25px;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #d9f0e9;
}

.confirmation-result-mark::before,
.booking-action-result-mark::before {
  content: "✓";
  font-size: 14px;
  font-weight: 800;
}

.confirmation-result > div,
.booking-action-result > div { min-width: 0; }
.confirmation-result-title,
.booking-action-result-title { display: block; font-size: 13px; line-height: 1.3; }
.confirmation-result-detail,
.booking-action-result-detail { margin: 2px 0 0; color: #52726d; font-size: 11px; line-height: 1.35; }
.booking-action-result { margin: 16px 0 -6px; }
.booking-action-result[data-kind="cancelled"] { border-color: #efd1c9; background: #fff7f4; color: #964d3d; }
.booking-action-result[data-kind="cancelled"] .booking-action-result-mark { background: #f9e6df; }
.booking-action-result[data-kind="cancelled"] .booking-action-result-mark::before { content: "✓"; color: #964d3d; }

.field > span,
legend {
  color: #526877;
  font-weight: 600;
}

.field input,
.field select {
  min-height: 40px;
  border-radius: 8px;
  border-color: #d2e1e3;
}

.slots button,
.btn {
  border-radius: 8px;
  font-weight: 600;
}

.slots button.selected,
.btn.primary,
.btn.primary:hover {
  border-color: #5fb8ae;
  background: #5fb8ae;
  box-shadow: none;
}

.additional-booking-btn {
  justify-self: start;
  min-height: 34px;
  padding: 7px 11px;
  font-size: 12px;
}

/* La reserva pública prioriza tratamiento, día y horas; el profesional se asigna solo. */
.appointment-details-grid {
  grid-template-columns: minmax(0, 1fr) minmax(210px, .8fr);
}

.assigned-field {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(180px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  padding-top: 2px;
}

.assigned-field > span {
  color: #718294;
  font-size: 11px;
  font-weight: 700;
}

.assigned-field .doctor-picker {
  min-height: 34px;
  border-radius: 8px;
  background: #f7fbfb;
}

.assigned-field .doctor-picker > span {
  margin: 0 7px 0 9px;
  font-size: 11px;
}

.assigned-field .doctor-display {
  padding-right: 8px;
  color: #526877;
  font-size: 12px;
}

.assigned-field .doctor-picker select {
  min-height: 34px;
}

.assigned-field .field-hint {
  font-size: 10px;
}

.assigned-field .doctor-change {
  display: none !important;
}

.identity-match {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 5px;
  padding: 7px 9px;
  border: 1px solid #cfe5e2;
  border-radius: 8px;
  background: #f4fbfa;
}

.identity-match-label {
  color: #718294;
  font-size: 10px;
}

.identity-match-name {
  color: #17324d;
  font-size: 12px;
}

.identity-match-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.identity-match-actions .btn {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 11px;
}

@media (max-width: 700px) {
  .appointment-details-grid {
    grid-template-columns: 1fr;
  }

  .assigned-field {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .assigned-field .field-hint {
    grid-column: 1 / -1;
  }
}

/* Compacto: el paciente solo necesita sus datos, tratamiento, día y horas. */
.booking {
  width: min(780px, calc(100vw - 20px));
  margin: 16px auto;
  padding: 18px;
  border-radius: 16px;
}

.dialog-header {
  padding-bottom: 14px;
}

.booking h1 {
  font-size: 24px;
}

.booking-intro {
  margin-top: 6px;
  font-size: 12px;
}

.booking-guide {
  gap: 6px 12px;
  margin-top: 8px;
  font-size: 10px;
}

.booking-guide b {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

.appointment-dialog-content {
  gap: 10px;
  padding-top: 14px;
}

.booking-form {
  gap: 10px;
}

.appointment-section {
  padding: 14px 15px;
  border-radius: 12px;
}

.section-heading {
  gap: 8px;
  margin-bottom: 11px;
}

.section-number {
  flex-basis: 23px;
  height: 23px;
  border-radius: 7px;
  font-size: 11px;
}

.appointment-section h3 {
  font-size: 14px;
}

.section-heading p {
  font-size: 11px;
}

.form-grid {
  gap: 10px 12px;
}

.field {
  gap: 5px;
}

.field > span,
legend {
  font-size: 11px;
}

.field input,
.field select {
  min-height: 37px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}

/* El profesional se asigna en segundo plano y solo se comunica al confirmar. */
.assigned-field {
  display: none !important;
}

.slot-field {
  padding-top: 13px;
  margin-top: 4px;
  padding: 14px 12px 12px;
  border: 1px solid #e0eaeb;
  border-radius: 11px;
  background: #fbfdfd;
}

.slot-field legend {
  font-size: 12px;
}

.slot-subtitle {
  margin-bottom: 8px;
  font-size: 11px;
}

.slot-field legend {
  padding: 0 7px;
  color: #526877;
  background: #fbfdfd;
}

.slots {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.slots button {
  min-height: 34px;
  padding: 6px 5px;
  border-radius: 8px;
  font-size: 12px;
}

.dialog-actions .btn {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
}

@media (max-width: 700px) {
  .booking {
    width: calc(100% - 16px);
    margin: 8px auto;
    padding: 14px 12px;
  }

  .booking h1 {
    font-size: 21px;
  }

  .booking-mark {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 16px;
  }

  .appointment-section {
    padding: 12px;
  }

  .slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 400px) {
  .booking-guide {
    display: none;
  }
}

/* Las secciones numeradas ya explican el flujo; este indicador no tiene estado dinámico. */
.booking-steps {
  display: none;
}

.manage-appointment.urgent-appointment {
  border-color: #e3c16b;
  background: #fffaf0;
}

.manage-appointment.needs-confirmation {
  border-color: #e2a928;
  background: #fff5d8;
  box-shadow: 0 0 0 2px rgba(226, 169, 40, .1);
}

.manage-actions .btn.confirm {
  border-color: #d39b16;
  background: #e2a928;
  color: #fff;
  font-weight: 800;
}

.manage-actions .btn.confirm:hover {
  border-color: #b57d00;
  background: #c98d0c;
}

.manage-actions .btn.keep {
  border-color: #eadcff;
  background: #f3ecff;
  color: #4c1d95;
}

.manage-actions .btn.keep:hover {
  border-color: #c8b5f5;
  background: #eee4ff;
}

.manage-actions .btn.modify {
  border-color: #f0d1c5;
  background: #fff3ee;
  color: #8f4b39;
}

.manage-actions .btn.modify:hover {
  border-color: #d99a86;
  background: #ffebe3;
}

.booking-clinic-notice {
  margin: -2px 0 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}

.booking-notify-clinic {
  text-decoration: none;
}

.confirmation-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
}

.confirmation-panel {
  display: block;
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.confirmation-status.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.confirmation-actions > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid #f4c7ba;
  border-radius: 10px;
  background: #fff8f4;
  color: #a94432;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.confirmation-actions .btn.modify {
  border-color: #f2c8b8;
  background: #fff7f2;
  color: #9c4c39;
}

.confirmation-actions .btn.danger {
  border-color: #f1c3bd;
  background: #fff8f7;
  color: #ad4238;
}

.confirmation-appointment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid #f1c66f;
  border-radius: 12px;
  background: #fffaf0;
}

.confirmation-summary {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.confirmation-summary-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.confirmation-summary strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirmation-summary .confirmation-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

.confirmation-summary .confirmation-state.is-confirmed {
  border-color: #b9ddd4;
  background: #eaf7f2;
  color: #176a58;
}

.confirmation-summary .confirmation-state.is-pending {
  border-color: #efd59b;
  background: #fff5d9;
  color: #87600b;
}

.confirmation-summary span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirmation-appointment-row > .booking-notify-clinic {
  min-height: 32px;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 9px;
  font-size: 11px;
  white-space: nowrap;
}

.confirmation-appointment-row > .booking-notify-clinic span {
  font-size: 11px !important;
}

.confirmation-appointment-row > .booking-notify-clinic svg {
  flex-basis: 17px;
  width: 17px;
  height: 17px;
}

.booking-whatsapp-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #128c7e;
  border-radius: 10px;
  background: #128c7e;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
  text-decoration: none;
}

.booking-whatsapp-link:hover {
  border-color: #0d766b;
  background: #0d766b;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.booking-whatsapp-link span,
.booking-notify-clinic span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

#error.existing-appointment-notice {
  padding: 11px 13px;
  border: 1px solid #c6ded9;
  border-radius: 10px;
  background: #f0fbf8;
  color: #285d57 !important;
  font-weight: 600;
}

.booking-whatsapp-link svg {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  fill: currentColor;
}

@media (max-width: 700px) {
  .confirmation-appointment-row { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 10px; }
  .confirmation-summary { grid-column: 1 / -1; }
  .confirmation-actions { justify-content: flex-start; }
  .confirmation-actions > .btn { min-height: 34px; padding: 6px 10px; }
  .confirmation-appointment-row > .booking-notify-clinic { justify-self: end; min-height: 36px; }
}

@media (max-width: 360px) {
  .confirmation-appointment-row { grid-template-columns: 1fr; }
  .confirmation-summary { grid-column: 1; }
  .confirmation-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confirmation-actions > .btn { width: 100%; }
  .confirmation-appointment-row > .booking-notify-clinic { justify-self: stretch; }
}

.booking-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 5px 0 0 12px;
  color: #17324d;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.booking-brand img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.manage-appointment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
}

.manage-actions {
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  justify-content: flex-end;
}

.manage-whatsapp-row {
  grid-column: 2;
  justify-self: end;
}

.manage-actions .booking-whatsapp-link,
.booking-notify-clinic {
  border: 1px solid #075e54 !important;
  background: #075e54 !important;
  color: #fff !important;
  font-weight: 750 !important;
}

.manage-actions .booking-whatsapp-link:hover,
.booking-notify-clinic:hover {
  border-color: #064c44 !important;
  background: #064c44 !important;
}

.manage-actions .booking-whatsapp-link,
.manage-whatsapp-row .booking-whatsapp-link,
.booking-notify-clinic,
.booking-whatsapp-link:visited {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

@media (min-width: 601px) {
  .manage-panel .manage-whatsapp-row .booking-whatsapp-link {
    min-height: 31px;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.2;
  }
  .manage-panel .manage-whatsapp-row .booking-whatsapp-link svg {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
  }
  .manage-panel .manage-whatsapp-row .booking-whatsapp-link span {
    font-size: 11px !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 600px) {
  .booking-brand { gap: 5px; padding-left: 4px; font-size: 10px; }
  .booking-brand img { width: 29px; height: 29px; }
  .manage-appointment {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }
  .manage-actions {
    grid-column: 1;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
  }
  .manage-panel .manage-actions .btn {
    min-width: 0;
    min-height: 40px;
    padding: 7px 5px;
    font-size: 12px;
    white-space: nowrap;
  }
  .manage-whatsapp-row {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
  }
  .manage-whatsapp-row .booking-whatsapp-link {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #075e54 !important;
    color: #fff !important;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
  }
  .manage-whatsapp-row .booking-whatsapp-link span { color: #fff !important; }
}

.booking-note-field{margin-top:18px}.field textarea{min-height:94px;resize:vertical}