/* Pioon Laser Dental — botón flotante «Reservar». Usa los colores de la web (--ink, --primary, --laser, --whatsapp). */

/* el botón verde de WhatsApp de la esquina se sustituye por este */
a.fixed.bottom-5.left-5[href*="wa.me"] { display: none !important; }

.pldr {
  --pldr-ink: var(--ink, #0b1724);
  --pldr-pri: var(--primary, #1f6fd1);
  --pldr-laser: var(--laser, #4fd0ee);
  --pldr-wa: var(--whatsapp, #3fcf6a);
  position: fixed; left: 20px; bottom: 20px; z-index: 60;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  color: var(--pldr-ink);
}
.pldr *, .pldr *::before, .pldr *::after { box-sizing: border-box; }
.pldr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* botón */
.pldr-btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 15px/1 Sora, Manrope, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em;
  color: #fff;
  background: linear-gradient(120deg, var(--pldr-ink) 0%, color-mix(in oklab, var(--pldr-pri) 75%, var(--pldr-ink)) 100%);
  box-shadow: 0 18px 44px -16px color-mix(in oklab, var(--pldr-laser) 75%, transparent), 0 0 0 1px color-mix(in oklab, var(--pldr-laser) 35%, transparent) inset;
  opacity: 0; transform: translateY(16px) scale(.96);
  transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.pldr-listo .pldr-btn { opacity: 1; transform: none; }
.pldr-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -14px color-mix(in oklab, var(--pldr-laser) 90%, transparent), 0 0 0 1px color-mix(in oklab, var(--pldr-laser) 55%, transparent) inset; }
.pldr-btn:active { transform: scale(.97); }
.pldr-btn:focus-visible { outline: 3px solid var(--pldr-laser); outline-offset: 3px; }
.pldr-btn-ico {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pldr-laser), var(--pldr-pri)); color: var(--pldr-ink);
}
.pldr-btn-ico svg { width: 19px; height: 19px; }
.pldr-punto {
  position: absolute; top: 4px; left: 36px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--pldr-wa); box-shadow: 0 0 0 2px var(--pldr-ink);
}
.pldr-punto::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pldr-wa);
  animation: pldr-latido 2.2s ease-out infinite;
}
.pldr-abierto .pldr-punto { display: none; }
@keyframes pldr-latido { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* aviso */
.pldr-aviso {
  position: absolute; left: 0; bottom: calc(100% + 12px); width: max-content; max-width: min(300px, calc(100vw - 40px));
  display: flex; align-items: flex-start; gap: 4px;
  padding: 14px 10px 14px 16px; border-radius: 18px 18px 18px 6px;
  background: #fff; box-shadow: 0 18px 48px -18px rgba(8, 20, 40, .45), 0 0 0 1px rgba(8, 20, 40, .06);
  opacity: 0; transform: translateY(8px) scale(.96); transform-origin: bottom left; pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.pldr-aviso.pldr-ver { opacity: 1; transform: none; pointer-events: auto; }
.pldr-aviso-txt { all: unset; cursor: pointer; font: 500 14px/1.45 Manrope, ui-sans-serif, system-ui, sans-serif; color: var(--pldr-ink); }
.pldr-aviso-txt:focus-visible { outline: 2px solid var(--pldr-pri); outline-offset: 2px; border-radius: 4px; }
.pldr-aviso-x { all: unset; cursor: pointer; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #6b7685; }
.pldr-aviso-x:hover { background: #eef2f6; color: var(--pldr-ink); }
.pldr-aviso-x svg { width: 13px; height: 13px; }

/* panel */
.pldr-panel {
  position: absolute; left: 0; bottom: calc(100% + 14px);
  width: min(360px, calc(100vw - 40px)); max-height: min(560px, calc(100dvh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; background: #f6f9fb;
  box-shadow: 0 30px 80px -24px rgba(8, 20, 40, .55), 0 0 0 1px rgba(8, 20, 40, .06);
  opacity: 0; transform: translateY(12px) scale(.95); transform-origin: bottom left; pointer-events: none; visibility: hidden;
  transition: opacity .25s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s .4s;
}
.pldr-abierto .pldr-panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.pldr-cab {
  display: flex; align-items: center; gap: 12px; padding: 16px 14px 16px 18px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--pldr-pri) 70%, transparent), transparent 60%), var(--pldr-ink);
}
.pldr-logo { height: 30px; width: auto; flex: none; }
.pldr-cab-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-left: auto; text-align: right; }
.pldr-cab-txt strong { font: 600 15px/1.1 Sora, Manrope, sans-serif; }
.pldr-cab-txt span { white-space: nowrap; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12px; opacity: .8; }
.pldr-cab-txt i { width: 7px; height: 7px; border-radius: 50%; background: var(--pldr-wa); }
.pldr-cerrar { all: unset; cursor: pointer; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,.1); }
.pldr-cerrar:hover { background: rgba(255,255,255,.2); }
.pldr-cerrar:focus-visible { outline: 2px solid var(--pldr-laser); outline-offset: 2px; }
.pldr-cerrar svg { width: 15px; height: 15px; }

.pldr-cuerpo { flex: 1; overflow-y: auto; padding: 18px 16px 10px; display: flex; flex-direction: column; gap: 12px; }
.pldr-msg {
  align-self: flex-start; max-width: 88%; padding: 12px 14px; border-radius: 4px 16px 16px 16px;
  background: #fff; box-shadow: 0 1px 2px rgba(8,20,40,.08); font-size: 14.5px; line-height: 1.45;
  animation: pldr-entra .35s cubic-bezier(.2,.8,.2,1) both;
}
.pldr-escribiendo { display: inline-flex; gap: 4px; padding: 14px 16px; }
.pldr-escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: #9aa7b6; animation: pldr-salta 1s infinite; }
.pldr-escribiendo span:nth-child(2) { animation-delay: .15s; }
.pldr-escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes pldr-salta { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes pldr-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pldr-ops { display: flex; flex-direction: column; gap: 8px; }
.pldr-op {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px;
  background: #fff; color: var(--pldr-ink); text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.3;
  border: 1px solid color-mix(in oklab, var(--pldr-pri) 22%, transparent);
  animation: pldr-entra .35s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms);
  transition: border-color .2s, background .2s, transform .2s;
}
.pldr-op svg { width: 18px; height: 18px; flex: none; color: color-mix(in oklab, var(--pldr-wa) 80%, #000); }
.pldr-op:hover { border-color: var(--pldr-pri); background: color-mix(in oklab, var(--pldr-laser) 10%, #fff); transform: translateX(2px); }
.pldr-op:focus-visible { outline: 2px solid var(--pldr-pri); outline-offset: 2px; }

.pldr-escribe { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e3e9ef; background: #fff; }
.pldr-escribe input {
  flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid #dbe3ea;
  font: 500 14px Manrope, ui-sans-serif, system-ui, sans-serif; color: var(--pldr-ink); background: #f6f9fb;
}
.pldr-escribe input:focus { outline: none; border-color: var(--pldr-pri); background: #fff; }
.pldr-escribe button {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--pldr-wa); color: var(--pldr-ink);
}
.pldr-escribe button svg { width: 18px; height: 18px; }
.pldr-escribe button:focus-visible { outline: 2px solid var(--pldr-pri); outline-offset: 2px; }
.pldr-llamar { display: block; padding: 0 12px 12px; background: #fff; text-align: center; font-size: 12.5px; color: #5b6878; text-decoration: none; }
.pldr-llamar:hover { color: var(--pldr-pri); text-decoration: underline; }

@media (max-width: 480px) {
  .pldr { left: 16px; bottom: 16px; }
  .pldr-btn { padding: 10px 16px 10px 10px; font-size: 14px; }
  .pldr-panel { width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .pldr *, .pldr *::after { animation: none !important; transition-duration: .01ms !important; }
}