@import url("https://fonts.googleapis.com/css2?family=Allura&display=swap");
/* =====================================================================
   TEMA "ACUARELA" — La pelu de Pau
   Portada clara tipo papel con manchas de acuarela, ramitas, pétalos
   que caen y dorado, como su logo. Solo afecta la página pública.
   ===================================================================== */
:root { --pau-rosa: #E7B4BC; --pau-rosa-osc: #A0606E; --pau-oro: #C9A46A; --pau-oro-claro: #EBD3A4; --pau-salvia: #9DB59A; --pau-papel: #FBF7F3; }

/* ---------- Portada ---------- */
#bookingView .cover { background: var(--pau-papel); color: var(--ink); padding: 44px 0 118px; }
#bookingView .cover-aurora {
  inset: -10%; filter: blur(46px); opacity: .95;
  background:
    radial-gradient(38% 30% at 22% 20%, rgba(231, 180, 188, .75), transparent 70%),
    radial-gradient(34% 28% at 82% 30%, rgba(235, 211, 164, .65), transparent 70%),
    radial-gradient(40% 30% at 70% 82%, rgba(231, 180, 188, .55), transparent 70%),
    radial-gradient(30% 26% at 16% 78%, rgba(157, 181, 154, .45), transparent 70%);
}
#bookingView .cover::before { background: radial-gradient(60% 46% at 50% 44%, rgba(255, 255, 255, .78), transparent 78%); }
#bookingView .cover::after { opacity: .10; mix-blend-mode: multiply; }
#bookingView .cover :focus-visible { outline-color: var(--pau-rosa-osc); }

.pau-rama { position: absolute; z-index: -1; width: min(46vw, 230px); pointer-events: none; opacity: .9; }
.pau-rama.a { top: -18px; left: -26px; animation: pauMece 7s ease-in-out infinite alternate; transform-origin: 10% 0; }
.pau-rama.b { bottom: 46px; right: -30px; transform: rotate(180deg); animation: pauMece2 8s ease-in-out infinite alternate; transform-origin: 90% 100%; }
@keyframes pauMece { from { transform: rotate(-2deg); } to { transform: rotate(3deg); } }
@keyframes pauMece2 { from { transform: rotate(178deg); } to { transform: rotate(183deg); } }
.pau-petalos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Logo protagonista con doble aro dorado */
#bookingView .cover-mark.has-logo {
  width: min(58vw, 220px); height: min(58vw, 220px); margin-bottom: 10px; position: relative; overflow: visible;
  box-shadow: 0 0 0 5px #fff, 0 0 0 6.5px var(--pau-oro), 0 30px 60px -24px rgba(160, 96, 110, .55);
}
#bookingView .cover-mark.has-logo::after {
  content: ""; position: absolute; inset: -16px; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--pau-oro) 70%, transparent);
  animation: pauGira 50s linear infinite;
}
@keyframes pauGira { to { transform: rotate(360deg); } }

/* El nombre ya está en el logo: el título queda para lectores de pantalla */
#bookingView .cover-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pau-frase { font-family: "Allura", "Segoe Script", cursive; font-size: clamp(36px, 10.4vw, 76px); line-height: 1.05; white-space: nowrap; color: var(--pau-rosa-osc);
  margin: 22px 0 0; font-weight: 400; animation: rise .9s var(--ease) .26s both; }
.pau-adorno { display: flex; align-items: center; gap: 12px; color: var(--pau-oro); margin: 10px 0 0; animation: rise .8s var(--ease) .36s both; }
.pau-adorno::before, .pau-adorno::after { content: ""; width: 54px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--pau-oro)); }
.pau-adorno::after { transform: scaleX(-1); }
.pau-adorno svg { width: 18px; height: 18px; }

#bookingView .cover-tag { color: color-mix(in srgb, var(--ink) 78%, transparent); margin-top: 12px; font-size: 16.5px; }
#bookingView .cover .demo-chip { background: #fff; color: var(--pau-rosa-osc); border: 1px solid color-mix(in srgb, var(--pau-rosa) 70%, transparent); }
#bookingView .cover-next { background: rgba(255, 255, 255, .86); color: var(--ink); border: 1px solid color-mix(in srgb, var(--pau-oro) 55%, transparent); box-shadow: 0 10px 24px -16px rgba(160, 96, 110, .5); }
#bookingView .cover-next b { color: var(--pau-rosa-osc); }
#bookingView .pulse, #bookingView .pulse::after { background: var(--pau-rosa-osc); border-color: var(--pau-rosa-osc); }
#bookingView .pulse::after { background: transparent; }
#bookingView .info-chip { background: rgba(255, 255, 255, .8); color: var(--ink); border: 1px solid color-mix(in srgb, var(--pau-rosa) 60%, transparent); }
#bookingView .info-chip svg { color: var(--pau-rosa-osc); opacity: 1; }
#bookingView a.info-chip:hover { background: #fff; }

/* Botón dorado con brillo que pasa */
#bookingView .cover-cta {
  position: relative; overflow: hidden; color: #3A2E2B;
  background: linear-gradient(120deg, #B98F52 0%, var(--pau-oro-claro) 45%, #C9A46A 70%, #B98F52 100%);
  box-shadow: 0 16px 34px -14px rgba(185, 143, 82, .8), inset 0 1px 0 rgba(255, 255, 255, .6);
}
#bookingView .cover-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 46%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: pauBrillo 3.6s ease-in-out 1.2s infinite;
}
@keyframes pauBrillo { 0% { left: -60%; } 38%, 100% { left: 130%; } }
#bookingView .cover-ghost { color: var(--pau-rosa-osc); background: rgba(255, 255, 255, .7); border: 1.5px solid color-mix(in srgb, var(--pau-rosa-osc) 45%, transparent); }
@media (hover: hover) { #bookingView .cover-ghost:hover { background: #fff; } }

/* ---------- Resto de la página ---------- */
#bookingView .trust-ic { background: linear-gradient(140deg, #FBEDEC, #F6E3D2); color: var(--pau-rosa-osc); }
#bookingView .section-title::before {
  content: ""; display: block; width: 86px; height: 22px; margin-bottom: 12px;
  background: no-repeat left center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 22' fill='none' stroke='%23C9A46A' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2 11h28M56 11h28'/%3E%3Cpath d='M43 17s-7-4.2-7-8.6A3.6 3.6 0 0 1 43 7a3.6 3.6 0 0 1 7 1.4C50 12.800 43 17 43 17z' stroke='%23A0606E'/%3E%3C/svg%3E");
}
#bookingView .s-ic { background: linear-gradient(140deg, #FBEDEC, #F6E3D2); color: var(--pau-rosa-osc); }
#bookingView .s-ic svg { width: 24px; height: 24px; }
#bookingView .service[aria-pressed="true"] .s-ic { background: var(--pau-rosa-osc); color: #fff; }
#bookingView .day[aria-pressed="true"] { background: linear-gradient(160deg, #B5717F, #94525F); }
#bookingView .slot[aria-pressed="true"] { background: linear-gradient(120deg, #C9A46A, var(--pau-oro-claro)); color: #3A2E2B; }
.pau-confeti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 200; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .pau-rama, #bookingView .cover-mark.has-logo::after, #bookingView .cover-cta::after { animation: none; }
}

/* ---------- Pantalla final (pedido enviado / turno confirmado) ---------- */
#confirmView h2 { font-family: "Allura", "Segoe Script", cursive; font-weight: 400; font-size: clamp(48px, 13vw, 68px);
  line-height: 1.05; color: var(--pau-rosa-osc); letter-spacing: 0; }
#confirmView .check { background: linear-gradient(150deg, #B5717F, #94525F);
  box-shadow: 0 0 0 6px #fff, 0 0 0 7.5px var(--pau-oro), 0 18px 36px -14px rgba(160, 96, 110, .6); }
#confirmView .ticket-head { background: linear-gradient(135deg, #5A3E40 0%, #3A2E2B 100%); }
#confirmView .ticket-head * { color: #fff; }
#confirmView .ticket-head [class*="time"], #confirmView .ticket-head b { color: var(--pau-oro-claro); }