/* Chat de turnos. Dos diseños, elegibles desde el panel: "nube" (crema y rosa, títulos con serif)
   y "perla" (lila, menta y vidrio). Comparten la estructura; cambian los colores y algunos detalles. */
:root{
  --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --titulos:var(--sans); --peso:700;
}
html[data-diseno=nube]{
  --pagina:#f4e4e1; --fondo:#fffaf7; --papel:#fff; --borde:#f3dfe2; --tinta:#5b2e45; --tenue:#a0808d;
  --acento:#c45f86; --sobre-acento:#fff; --suave:#fdf0ea; --yo:linear-gradient(160deg,#f9cfdb,#f4b3c6);
  --sombra:0 8px 22px -14px rgba(150,80,110,.45); --barra:rgba(255,250,247,.95); --radio:18px;
  --titulos:var(--serif); --peso:500; --bien:#6fa98b; --mal:#c0506a;
}
html[data-diseno=perla]{
  --pagina:#e9e2f7; --fondo:linear-gradient(165deg,#efe6ff 0%,#e2f5ee 38%,#fdeef4 70%,#ffeede 100%); --papel:rgba(255,255,255,.7); --borde:rgba(255,255,255,.95);
  --tinta:#3a2a5c; --tenue:#8377a3; --acento:#3a2a5c; --sobre-acento:#fff; --suave:rgba(183,156,240,.18); --yo:linear-gradient(150deg,#d9ccfb,#c3adf3);
  --sombra:0 10px 30px -18px rgba(90,60,150,.55); --barra:rgba(255,255,255,.72); --radio:22px; --bien:#4fae8f; --mal:#c0506a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--pagina);color:var(--tinta);font:15.5px/1.45 var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
h1,h2,h3,p,dl,dd{margin:0}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.5}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

.app{position:relative;height:100vh;height:100dvh;max-width:480px;margin:0 auto;display:flex;flex-direction:column;background:var(--fondo);overflow:hidden}
.vidrio{background:var(--papel);border:1px solid var(--borde);box-shadow:var(--sombra)}
html[data-diseno=perla] .vidrio,html[data-diseno=perla] .cab,html[data-diseno=perla] .entrada{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* cabecera */
.cab{flex:none;display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--barra);border-bottom:1px solid var(--borde);z-index:2}
.avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#fff,#f9cfdb)}
html[data-diseno=perla] .avatar{background:conic-gradient(from 210deg,#f9c4dc,#b79cf0,#bfe3ff,#a9e2cf,#ffdcc4,#f9c4dc);padding:2.5px}
html[data-diseno=perla] .avatar .arte{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#fff}
.avatar .una{height:29px;display:block}
.cab .quien{flex:1;min-width:0}
.cab h1{font-family:var(--titulos);font-weight:var(--peso);font-size:23px;line-height:1.05}
html[data-diseno=nube] .cab h1{font-style:italic}
html[data-diseno=perla] .cab h1{text-transform:lowercase;letter-spacing:.02em;font-size:21px}
.cab p{font-size:12px;color:var(--tenue);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-diseno=nube] .cab p{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.cab .mio{flex:none;border:1px solid var(--borde);background:var(--papel);border-radius:99px;padding:7px 13px;font-size:13px;font-weight:600}

/* conversación */
.chat{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 10px;display:flex;flex-direction:column;gap:9px}
.chat>*{flex:none}
.b{max-width:84%;padding:10px 14px;border-radius:var(--radio);white-space:pre-wrap;overflow-wrap:anywhere}
.b.bot{align-self:flex-start;background:var(--papel);border:1px solid var(--borde);border-bottom-left-radius:6px}
.b.yo{align-self:flex-end;background:var(--yo);border-bottom-right-radius:6px}
.b.espera{opacity:.6}
.b a{display:inline-block;margin-top:8px;font-weight:600;color:var(--acento)}
.paso{align-self:center;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);margin:6px 0 0;text-align:center;max-width:92%}
html[data-diseno=perla] .paso{background:rgba(255,255,255,.6);padding:4px 12px;border-radius:99px}
.paso.mal{color:var(--mal)}
.paso.sis{color:var(--bien)}

.opciones{align-self:flex-start;display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--borde);background:var(--papel);color:var(--tinta);font-weight:600;font-size:13.5px;padding:9px 15px;border-radius:99px;text-decoration:none;text-align:center}
html[data-diseno=nube] .btn{border-color:#f4b3c6;color:var(--acento);background:transparent}
.btn.lleno{width:100%;padding:14px;font-size:15px;border-color:transparent;background:var(--acento);color:var(--sobre-acento)}
html[data-diseno=nube] .btn.lleno{color:#fff;background:var(--acento)}
html[data-diseno=perla] .btn.lleno{background:linear-gradient(110deg,#c9b4f7,#f5bcd8);color:var(--tinta);box-shadow:0 10px 20px -12px rgba(120,70,200,.8)}
.viejo{opacity:.55;pointer-events:none}

/* promos */
.promo{align-self:stretch;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radio)}
html[data-diseno=nube] .promo{border:1.5px dashed #f4b3c6;background:var(--suave)}
html[data-diseno=perla] .promo{background:linear-gradient(120deg,#f6c9e1,#d8c9fb 55%,#c4ecdf);padding-left:6px}
.promo .arte{flex:none}
.promo .una{height:54px;display:block;filter:drop-shadow(0 3px 4px rgba(150,80,110,.25))}
.promo .abanico{width:104px;display:block;filter:drop-shadow(0 4px 5px rgba(90,60,150,.22))}
.promo small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acento);margin-bottom:2px}
html[data-diseno=perla] .promo small{display:inline-block;background:rgba(255,255,255,.75);padding:3px 9px;border-radius:99px;margin-bottom:5px;letter-spacing:.08em}
.promo b{display:block;font-family:var(--titulos);font-weight:var(--peso);font-size:17px;line-height:1.25}
html[data-diseno=perla] .promo b{font-size:16px}

/* servicios */
.fila{align-self:stretch;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 14px 10px;margin:0 -14px;scrollbar-width:none}
.fila::-webkit-scrollbar{display:none}
.serv{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;border-radius:var(--radio);background:var(--papel);border:1px solid var(--borde)}
html[data-diseno=nube] .serv{width:156px;padding:12px;text-align:center}
html[data-diseno=perla] .serv{width:206px;padding:10px 14px 14px;border-radius:24px;box-shadow:var(--sombra)}
.serv .marco{display:grid;place-items:center}
html[data-diseno=nube] .serv .marco{height:112px;border-radius:14px;background:radial-gradient(circle at 50% 35%,#fff,var(--suave));margin-bottom:10px}
.serv .una{height:92px;display:block;filter:drop-shadow(0 4px 5px rgba(150,80,110,.28))}
.serv .abanico{width:100%;display:block;filter:drop-shadow(0 5px 6px rgba(90,60,150,.22))}
.serv h3{font-family:var(--titulos);font-weight:var(--peso);font-size:16.5px;line-height:1.2}
.serv .desc{font-size:12px;line-height:1.35;color:var(--tenue);margin:4px 0 0}
.serv .datos{display:flex;gap:6px;margin:8px 0 12px;font-size:12px;flex-wrap:wrap}
html[data-diseno=nube] .serv .datos{justify-content:center;color:var(--tenue)}
html[data-diseno=nube] .serv .datos span+span{color:var(--tinta);font-weight:700}
html[data-diseno=nube] .serv .datos span+span::before{content:"· ";color:var(--tenue);font-weight:400}
html[data-diseno=perla] .serv .datos span{font-weight:600;padding:4px 10px;border-radius:99px;background:rgba(183,156,240,.2)}
html[data-diseno=perla] .serv .datos span+span{background:rgba(169,226,207,.45)}
.serv .btn{margin-top:auto}
html[data-diseno=perla] .serv .btn{background:var(--tinta);color:#fff;border-color:var(--tinta)}

/* días y horarios */
.dias,.horas{align-self:stretch;display:grid;gap:8px}
.dias{grid-template-columns:repeat(3,1fr)}
.horas{grid-template-columns:repeat(3,1fr)}
.dia,.hora{border:1px solid var(--borde);background:var(--papel);border-radius:16px;padding:9px 6px;text-align:center}
html[data-diseno=perla] .dia,html[data-diseno=perla] .hora{box-shadow:var(--sombra)}
.dia b,.hora b{display:block;font-family:var(--titulos);font-weight:var(--peso);font-size:19px;line-height:1.2}
.dia span,.hora span{display:block;font-size:11.5px;color:var(--tenue)}
.dia:hover,.hora:hover{border-color:var(--acento)}

/* tarjeta del turno */
.tarjeta{align-self:stretch;border-radius:calc(var(--radio) + 2px);padding:16px;background:var(--papel);border:1px solid var(--borde);box-shadow:var(--sombra)}
.tarjeta h2{font-family:var(--titulos);font-weight:var(--peso);font-size:20px;margin-bottom:10px}
html[data-diseno=nube] .tarjeta h2{font-style:italic}
.cuando{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--suave);margin-bottom:12px}
.cuando .fecha{width:48px;height:48px;border-radius:14px;background:#fff;display:grid;place-content:center;text-align:center;line-height:1;font-weight:700;font-size:19px;flex:none}
.cuando .fecha small{display:block;font-size:10px;font-weight:600;color:var(--tenue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.cuando span{display:block;color:var(--tenue);font-size:13px}
.tarjeta dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px}
.tarjeta dt{color:var(--tenue)}
.tarjeta dd{text-align:right;font-weight:600}
.tarjeta dl .total{font-size:15.5px;color:var(--tinta)}
.corte{border:0;border-top:2px dashed var(--borde);margin:12px 0}
html[data-diseno=perla] .corte{border-top-color:rgba(131,119,163,.35);margin:12px -16px}
.sena{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.sena span{font-size:13px;color:var(--tenue)}
.sena b{font-family:var(--titulos);font-weight:var(--peso);font-size:25px;color:var(--acento)}
html[data-diseno=nube] .sena{background:var(--suave);border-radius:12px;padding:10px 12px}
.nota{font-size:12px;color:var(--tenue);text-align:center;margin-top:10px}
.estado{font-size:14px;padding:10px 12px;border-radius:12px;background:var(--suave);margin-top:4px}
.ok{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ok h2{margin:0}
.ok i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;flex:none;background:#f9cfdb;color:var(--acento)}
html[data-diseno=perla] .ok i{background:linear-gradient(140deg,#a9e2cf,#c9ecff);color:var(--tinta)}
.detalle{font-size:13px;color:var(--tenue);margin-top:6px}
.avisos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.avisos .btn{padding:10px 8px}
.avisos .ancho{grid-column:1/-1}
.enlaces{display:flex;justify-content:center;gap:18px;margin-top:12px;font-size:13px}
.enlaces button{border:0;background:none;padding:2px;color:var(--tenue);text-decoration:underline}
.mini{align-self:flex-start;font-size:12.5px;color:var(--tenue);border:1px dashed var(--borde);border-radius:99px;padding:5px 12px}
html[data-diseno=nube] .mini{border-color:#f0d3d9}
.alias{font:600 17px/1.2 ui-monospace,Consolas,monospace;background:var(--suave);border-radius:12px;padding:10px 12px;text-align:center;margin:10px 0 12px;user-select:all}

.piloto{align-self:center;display:inline-flex;align-items:center;gap:6px;margin:10px 0 4px;padding:8px 14px;border-radius:99px;background:#06080b;color:#e8edf2;font-size:12px;text-decoration:none}
.piloto b{color:#c5ff3e;font-weight:600}

.puntos{align-self:flex-start;display:flex;gap:4px;background:var(--papel);border:1px solid var(--borde);border-radius:var(--radio);border-bottom-left-radius:6px;padding:14px}
.puntos i{width:6px;height:6px;border-radius:50%;background:var(--tenue)}
@media (prefers-reduced-motion:no-preference){
  .puntos i{animation:salto 1.1s infinite}
  .puntos i:nth-child(2){animation-delay:.15s}
  .puntos i:nth-child(3){animation-delay:.3s}
  @keyframes salto{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
  .chat>.nueva{animation:entra .2s ease-out}
  @keyframes entra{from{opacity:0;transform:translateY(6px)}}
}

/* entrada */
.entrada{flex:none;display:flex;gap:8px;padding:10px 14px calc(12px + env(safe-area-inset-bottom));background:var(--barra);border-top:1px solid var(--borde)}
.entrada input{flex:1;min-width:0;height:46px;border:1px solid var(--borde);border-radius:99px;padding:0 16px;font-size:16px;background:#fff;color:var(--tinta)}
html[data-diseno=nube] .entrada input{border-color:#f0d3d9}
.entrada input::placeholder{color:var(--tenue)}
.entrada input:disabled{opacity:.55}
.entrada .enviar{flex:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--acento);color:#fff;display:grid;place-items:center}
.entrada .enviar svg{width:20px;height:20px}

.pantalla{position:absolute;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:14px;padding:28px;text-align:center;background:#fffaf7;color:#5b2e45}
.pantalla img{width:72px;height:72px}