/* ============================================================================
   VÉRTEX · capa de IA — asistente de citas + análisis de foto
   Usa los tokens de styles.css. Se puede quitar sin tocar el resto del sitio:
   borra este <link>, el <script de vx-ia.js> y el bloque .foto-ia del HTML.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · ASISTENTE DE CITAS (flotante)
   --------------------------------------------------------------------------- */
.vx-fab{
  position:fixed; right:clamp(1rem,3vw,1.8rem); bottom:clamp(1rem,3vw,1.8rem);
  z-index:940; display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.15rem .85rem .95rem;
  background:var(--ink); color:var(--ivory);
  font:500 var(--step--1)/1 var(--font-sans); letter-spacing:.01em;
  border:1px solid var(--ink); border-radius:999px;
  box-shadow:0 18px 40px -18px rgba(26,25,21,.5);
  cursor:pointer; transition:transform .25s var(--ease-out), background .25s var(--ease-out);
}
.vx-fab:hover{ transform:translateY(-2px); background:var(--graphite); }
.vx-fab:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.vx-fab svg{ width:1.15rem; height:1.15rem; flex:none; }
.vx-fab__dot{ width:.44rem; height:.44rem; border-radius:50%; background:var(--gold-soft); flex:none; }
.vx-fab[hidden]{ display:none; }
.vx-fab.is-open{ transform:translateY(150%); opacity:0; pointer-events:none; }

.vx-chat{
  position:fixed; right:clamp(1rem,3vw,1.8rem); bottom:clamp(1rem,3vw,1.8rem);
  z-index:941; width:min(380px, calc(100vw - 2rem));
  height:min(600px, calc(100vh - 6rem));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r);
  box-shadow:0 40px 90px -40px rgba(26,25,21,.55);
  transform-origin:bottom right;
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.vx-chat[hidden]{ display:none; }
.vx-chat.is-enter{ opacity:0; transform:translateY(12px) scale(.98); }

.vx-chat__head{
  display:flex; align-items:center; gap:.7rem;
  padding:.9rem 1rem; border-bottom:1px solid var(--line);
  background:var(--ivory);
}
.vx-chat__mark{ width:1.6rem; height:1.6rem; flex:none; color:var(--olive); }
.vx-chat__title{ font:600 var(--step--1)/1.2 var(--font-sans); letter-spacing:.01em; }
.vx-chat__title b{ display:block; font-family:var(--font-display); font-weight:400; font-size:var(--step-1); letter-spacing:-.01em; }
.vx-chat__title span{ color:var(--ink-faint); font-weight:400; }
.vx-chat__close{
  margin-left:auto; width:2rem; height:2rem; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:transparent;
  color:var(--ink-soft); cursor:pointer; transition:color .2s, border-color .2s;
}
.vx-chat__close:hover{ color:var(--ink); border-color:var(--ink); }

.vx-chat__log{
  flex:1; overflow-y:auto; padding:1rem;
  display:flex; flex-direction:column; gap:.7rem;
  scrollbar-width:thin;
}
.vx-msg{ max-width:85%; padding:.65rem .85rem; border-radius:var(--r); font:400 var(--step--1)/1.5 var(--font-sans); white-space:pre-wrap; }
.vx-msg--bot{ align-self:flex-start; background:var(--bone); color:var(--ink); border-bottom-left-radius:var(--r-xs); }
.vx-msg--user{ align-self:flex-end; background:var(--ink); color:var(--ivory); border-bottom-right-radius:var(--r-xs); }
.vx-msg--typing{ align-self:flex-start; color:var(--ink-faint); font-style:italic; }
.vx-msg a{ color:inherit; text-decoration:underline; }

.vx-chat__quick{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1rem .4rem; }
.vx-chat__quick button{
  font:500 var(--step--2)/1 var(--font-mono); letter-spacing:.04em;
  padding:.5rem .7rem; border:1px solid var(--line-2); border-radius:999px;
  background:transparent; color:var(--ink-soft); cursor:pointer; transition:border-color .2s, color .2s;
}
.vx-chat__quick button:hover{ border-color:var(--ink); color:var(--ink); }

.vx-chat__form{ display:flex; gap:.5rem; padding:.8rem; border-top:1px solid var(--line); background:var(--ivory); }
.vx-chat__form textarea{
  flex:1; resize:none; height:2.6rem; max-height:6rem; padding:.6rem .7rem;
  font:400 var(--step--1)/1.4 var(--font-sans); color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.vx-chat__form textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.vx-chat__send{
  flex:none; width:2.6rem; height:2.6rem; display:grid; place-items:center;
  background:var(--ink); color:var(--ivory); border:1px solid var(--ink); border-radius:var(--r-sm);
  cursor:pointer; transition:background .2s;
}
.vx-chat__send:hover{ background:var(--graphite); }
.vx-chat__send:disabled{ opacity:.45; cursor:default; }
.vx-chat__send svg{ width:1.1rem; height:1.1rem; }

.vx-chat__foot{ padding:.5rem 1rem .7rem; font:400 var(--step--2)/1.4 var(--font-sans); color:var(--ink-faint); text-align:center; background:var(--ivory); }

/* mini-formulario "que me llamen" dentro del chat */
.vx-lead{ align-self:stretch; display:grid; gap:.5rem; padding:.85rem; background:var(--ivory); border:1px solid var(--line-2); border-radius:var(--r-sm); }
.vx-lead p{ font:500 var(--step--2)/1.4 var(--font-mono); letter-spacing:.03em; color:var(--ink-soft); }
.vx-lead input{ padding:.55rem .65rem; font:400 var(--step--1)/1.3 var(--font-sans); border:1px solid var(--line-2); border-radius:var(--r-xs); background:var(--paper); color:var(--ink); }
.vx-lead input:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.vx-lead button{ padding:.6rem; background:var(--ink); color:var(--ivory); border:0; border-radius:var(--r-xs); font:500 var(--step--1)/1 var(--font-sans); cursor:pointer; }

@media (max-width:560px){
  .vx-chat{ right:.6rem; left:.6rem; width:auto; bottom:.6rem; height:min(78vh, calc(100vh - 6rem)); }
}
@media (prefers-reduced-motion:reduce){
  .vx-fab, .vx-chat{ transition:none; }
  .vx-fab.is-open{ transform:none; }
  .vx-chat.is-enter{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------------------------
   2 · ANÁLISIS DE FOTO  (dentro de #diagnostico, sección oscura)
   Reutiliza el lenguaje visual de .dx
   --------------------------------------------------------------------------- */
.foto-ia{ margin-top:clamp(2.5rem,6vw,4rem); }
.foto-ia__panel{
  position:relative; max-width:44rem;
  background:var(--surface); border:1px solid var(--hair-2);
  padding:clamp(1.4rem,4.5vw,2.8rem);
}
.foto-ia__head{ display:grid; gap:1rem; max-width:44ch; margin-bottom:clamp(1.6rem,4vw,2.4rem); }
.foto-ia__head .eyebrow{ color:var(--accent-2); }
.foto-ia__head h3{ font-family:var(--font-display); font-weight:380; font-size:var(--step-3); letter-spacing:-.02em; color:var(--fg); }
.foto-ia__head p{ color:var(--fg-soft); font-size:var(--step-0); }

.foto-ia__drop{
  display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center;
  padding:clamp(1.6rem,5vw,2.6rem); border:1px dashed var(--hair-2); border-radius:var(--r-sm);
  color:var(--fg-soft); cursor:pointer; transition:border-color .2s, background .2s;
}
.foto-ia__drop:hover, .foto-ia__drop.is-over{ border-color:var(--accent-2); background:rgba(239,235,223,.03); }
.foto-ia__drop svg{ width:1.8rem; height:1.8rem; color:var(--accent-2); }
.foto-ia__drop b{ color:var(--fg); font:500 var(--step-0)/1.3 var(--font-sans); }
.foto-ia__drop span{ font:400 var(--step--2)/1.5 var(--font-mono); letter-spacing:.02em; }
.foto-ia__input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

.foto-ia__preview{ display:grid; gap:1rem; }
.foto-ia__thumb{
  position:relative; width:100%; max-width:280px; aspect-ratio:1/1; overflow:hidden;
  border:1px solid var(--hair-2); border-radius:var(--r-sm); background:var(--char-deep);
  margin-bottom:1rem;
}
.foto-ia__thumb:empty{ display:none; margin-bottom:0; border:0; }
.foto-ia__thumb img{ width:100%; height:100%; object-fit:cover; }
.foto-ia__thumb button{
  position:absolute; top:.4rem; right:.4rem; width:1.8rem; height:1.8rem; display:grid; place-items:center;
  background:rgba(17,18,9,.7); color:var(--fg); border:1px solid var(--hair-2); border-radius:var(--r-xs); cursor:pointer;
}

.foto-ia__consent{ display:flex; gap:.7rem; align-items:flex-start; font:400 var(--step--1)/1.55 var(--font-sans); color:var(--fg-soft); }
.foto-ia__consent input{ flex:none; margin-top:.2rem; width:1.1rem; height:1.1rem; accent-color:var(--accent-2); }
.foto-ia__consent a{ color:var(--fg); text-decoration:underline; }

.foto-ia__go{ justify-self:start; }
.foto-ia__go[disabled]{ opacity:.4; cursor:default; }

.foto-ia__status{ font:500 var(--step--2)/1.5 var(--font-mono); letter-spacing:.04em; color:var(--fg-faint); }
.foto-ia__result{ display:grid; gap:1rem; animation:vxFade .5s var(--ease-out); }
.foto-ia__result-tag{ font:500 var(--step--2)/1 var(--font-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--accent-2); }
.foto-ia__result-body{ color:var(--fg); font-size:var(--step-0); line-height:1.7; white-space:pre-wrap; max-width:56ch; }
.foto-ia__disclaimer{
  display:flex; gap:.6rem; padding:.9rem 1rem; border:1px solid var(--hair-2); border-radius:var(--r-xs);
  font:400 var(--step--2)/1.6 var(--font-sans); color:var(--fg-soft); background:rgba(239,235,223,.03);
}
.foto-ia__disclaimer::before{ content:"!"; flex:none; width:1.2rem; height:1.2rem; display:grid; place-items:center;
  border:1px solid var(--accent-2); border-radius:50%; color:var(--accent-2); font:700 .7rem/1 var(--font-mono); }
.foto-ia__actions{ display:flex; flex-wrap:wrap; gap:1rem 1.4rem; align-items:center; }
.foto-ia__restart{ font:500 var(--step--2)/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); background:0; border:0; cursor:pointer; }
.foto-ia__restart:hover{ color:var(--fg); }
.foto-ia__note{ font:400 var(--step--2)/1.6 var(--font-mono); letter-spacing:.02em; color:var(--fg-faint); }

@keyframes vxFade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .foto-ia__result{ animation:none; } }

/* estados controlados por JS */
.foto-ia [data-when]{ display:none; }
.foto-ia.is-idle    [data-when="idle"],
.foto-ia.is-chosen  [data-when="chosen"],
.foto-ia.is-loading [data-when="loading"],
.foto-ia.is-done    [data-when="done"],
.foto-ia.is-error   [data-when="error"]{ display:grid; }
.foto-ia.is-chosen .foto-ia__go{ display:inline-flex; }