<!-- CALENDARIO DE TURNOS - Valdivia Centro de Salud Integral -->
<!-- Pegá todo este código en el Modo desarrollador de Sitio Simple, justo antes del </div> final -->
<div id="cal-widget"></div>
<script>
(function(){
  var CSS = "#cal-widget *{box-sizing:border-box;margin:0;padding:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}"
  +"#cal-widget{max-width:640px;margin:0 auto;padding:1.5rem 1rem;color:#2A2A2A;background:#FDFCFA}"
  +"#cal-widget h2{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;margin-bottom:4px;color:#2D5A40}"
  +"#cal-widget .subtitle{font-size:14px;color:#6B6B6B;margin-bottom:1.5rem}"
  +"#cal-widget .section-label{font-size:11px;font-weight:600;color:#7BA88A;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}"
  +"#cal-widget .step-dots{display:flex;gap:6px;margin-bottom:1.5rem}"
  +"#cal-widget .dot{width:6px;height:6px;border-radius:50%;background:#EAE2D4;transition:all .2s}"
  +"#cal-widget .dot.active{width:20px;border-radius:3px;background:#2D5A40}"
  +"#cal-widget .dot.done{background:#B8D4C2}"
  +"#cal-widget .svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1.5rem}"
  +"#cal-widget .svc-btn{padding:12px;border:1px solid #EAE2D4;border-radius:8px;background:#F5F0E8;cursor:pointer;text-align:center;transition:all .15s}"
  +"#cal-widget .svc-btn:hover{background:#E8F2EC;border-color:#B8D4C2}"
  +"#cal-widget .svc-btn.selected{border:2px solid #2D5A40;background:#E8F2EC;color:#2D5A40}"
  +"#cal-widget .svc-btn .svc-icon{font-size:22px;margin-bottom:5px}"
  +"#cal-widget .svc-btn .svc-name{font-size:13px;font-weight:600;color:#2A2A2A}"
  +"#cal-widget .svc-btn.selected .svc-name{color:#2D5A40}"
  +"#cal-widget .svc-btn .svc-dur{font-size:12px;color:#6B6B6B;margin-top:2px}"
  +"#cal-widget .svc-btn.selected .svc-dur{color:#4A7C59}"
  +"#cal-widget .cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}"
  +"#cal-widget .cal-nav{background:#F5F0E8;border:1px solid #EAE2D4;border-radius:6px;width:30px;height:30px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:#4A7C59}"
  +"#cal-widget .cal-nav:hover{background:#E8F2EC}"
  +"#cal-widget .cal-month{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:#2D5A40}"
  +"#cal-widget .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:1.5rem}"
  +"#cal-widget .dn{font-size:11px;color:#7BA88A;text-align:center;padding:4px 0;font-weight:600}"
  +"#cal-widget .cd{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:13px;cursor:pointer;border:1px solid transparent;transition:all .12s;color:#2A2A2A}"
  +"#cal-widget .cd:hover:not(.past):not(.empty):not(.nosun){background:#E8F2EC}"
  +"#cal-widget .cd.past,#cal-widget .cd.nosun{color:#B8D4C2;cursor:default}"
  +"#cal-widget .cd.today{border-color:#7BA88A;color:#2D5A40;font-weight:600}"
  +"#cal-widget .cd.selday{background:#2D5A40;border-color:#2D5A40;color:#FDFCFA;font-weight:600}"
  +"#cal-widget .time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1.5rem;max-height:260px;overflow-y:auto}"
  +"#cal-widget .tb{padding:8px 4px;border:1px solid #EAE2D4;border-radius:6px;background:#F5F0E8;cursor:pointer;font-size:13px;text-align:center;transition:all .12s;color:#2A2A2A}"
  +"#cal-widget .tb:hover{background:#E8F2EC;border-color:#B8D4C2}"
  +"#cal-widget .tb.seltime{background:#2D5A40;border-color:#2D5A40;color:#FDFCFA;font-weight:600}"
  +"#cal-widget .tb.unavail{color:#B8D4C2;background:#F5F0E8;cursor:not-allowed;text-decoration:line-through;opacity:.6}"
  +"#cal-widget .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.5rem}"
  +"#cal-widget .ff{display:flex;flex-direction:column;gap:5px}"
  +"#cal-widget .ff.full{grid-column:1/-1}"
  +"#cal-widget .ff label{font-size:12px;color:#4A7C59;font-weight:600}"
  +"#cal-widget .ff input,#cal-widget .ff textarea{font-size:14px;border:1px solid #EAE2D4;border-radius:6px;padding:8px 10px;background:#FDFCFA;color:#2A2A2A;font-family:'Inter',sans-serif;width:100%}"
  +"#cal-widget .ff input:focus,#cal-widget .ff textarea:focus{outline:none;border-color:#7BA88A}"
  +"#cal-widget .ff textarea{resize:vertical;min-height:64px}"
  +"#cal-widget .summary-card{background:#F5F0E8;border:1px solid #EAE2D4;border-radius:10px;padding:1rem 1.25rem;margin-bottom:1.5rem}"
  +"#cal-widget .sum-row{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px;color:#2A2A2A}"
  +"#cal-widget .main-btn{width:100%;padding:13px;background:#2D5A40;color:#FDFCFA;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s}"
  +"#cal-widget .main-btn:hover{background:#4A7C59}"
  +"#cal-widget .main-btn:disabled{opacity:.35;cursor:not-allowed}"
  +"#cal-widget .sec-btn{background:none;border:1px solid #B8D4C2;border-radius:8px;padding:10px 20px;font-size:14px;cursor:pointer;color:#2D5A40;font-family:'Inter',sans-serif;margin-top:10px}"
  +"#cal-widget .sec-btn:hover{background:#E8F2EC}"
  +"#cal-widget .success-wrap{text-align:center;padding:2rem 1rem}"
  +"#cal-widget .success-icon{font-size:44px;color:#4A7C59;margin-bottom:1rem}"
  +"#cal-widget .success-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;margin-bottom:8px;color:#2D5A40}"
  +"#cal-widget .success-sub{font-size:14px;color:#6B6B6B;margin-bottom:1.5rem;line-height:1.6}"
  +"@media (max-width:480px){#cal-widget .form-grid{grid-template-columns:1fr}#cal-widget .ff.full{grid-column:1}#cal-widget .time-grid{grid-template-columns:repeat(3,1fr)}}";

  // Inyectar fuentes
  var fontLink1 = document.createElement('link');
  fontLink1.rel = 'preconnect'; fontLink1.href = 'https://fonts.googleapis.com';
  document.head.appendChild(fontLink1);
  var fontLink2 = document.createElement('link');
  fontLink2.rel = 'stylesheet';
  fontLink2.href = 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500;600&display=swap';
  document.head.appendChild(fontLink2);

  // Inyectar CSS directamente como nodo de texto (evita que el editor agregue atributos)
  var styleTag = document.createElement('style');
  styleTag.appendChild(document.createTextNode(CSS));
  document.head.appendChild(styleTag);

  var HTML = ''
  +'<h2 id="cw-title">Solicitar turno</h2>'
  +'<p class="subtitle" id="cw-sub">Elegí el servicio, día y horario que mejor te quede.</p>'
  +'<div class="step-dots"><div class="dot active" id="d1"></div><div class="dot" id="d2"></div><div class="dot" id="d3"></div><div class="dot" id="d4"></div></div>'
  +'<div id="vw-1">'
    +'<div class="section-label">Servicio</div>'
    +'<div class="svc-grid">'
      +'<button class="svc-btn" data-svc="nutricion" data-label="Nutrición (30 min)"><div class="svc-icon">🌿</div><div class="svc-name">Nutrición</div><div class="svc-dur">30 min</div></button>'
      +'<button class="svc-btn" data-svc="psicologia" data-label="Psicología (50 min)"><div class="svc-icon">🍃</div><div class="svc-name">Psicología</div><div class="svc-dur">50 min</div></button>'
      +'<button class="svc-btn" data-svc="primera-nut" data-label="Primera consulta nutrición (90 min)"><div class="svc-icon">📋</div><div class="svc-name">Primera consulta nutrición</div><div class="svc-dur">90 min</div></button>'
      +'<button class="svc-btn" data-svc="primera-psi" data-label="Primera consulta psicología (60 min)"><div class="svc-icon">💬</div><div class="svc-name">Primera consulta psicología</div><div class="svc-dur">60 min</div></button>'
    +'</div>'
    +'<div class="section-label">Día</div>'
    +'<div class="cal-header"><button class="cal-nav" id="cw-prev">&#8249;</button><span class="cal-month" id="cw-month"></span><button class="cal-nav" id="cw-next">&#8250;</button></div>'
    +'<div class="cal-grid" id="cw-cal"></div>'
    +'<div id="cw-time-section" style="display:none"><div class="section-label">Horarios — <span id="cw-datelabel"></span></div><div class="time-grid" id="cw-times"></div></div>'
    +'<button class="main-btn" id="btn1" disabled>Continuar →</button>'
  +'</div>'
  +'<div id="vw-2" style="display:none">'
    +'<div class="section-label">Tus datos</div>'
    +'<div class="form-grid">'
      +'<div class="ff"><label>Nombre</label><input type="text" id="inp-nom" placeholder="Tu nombre"></div>'
      +'<div class="ff"><label>Apellido</label><input type="text" id="inp-ape" placeholder="Tu apellido"></div>'
      +'<div class="ff"><label>Email</label><input type="email" id="inp-mail" placeholder="nombre@ejemplo.com"></div>'
      +'<div class="ff"><label>Teléfono</label><input type="tel" id="inp-tel" placeholder="+54 11 1234-5678"></div>'
      +'<div class="ff full"><label>Nota adicional (opcional)</label><textarea id="inp-nota" placeholder="¿Algo que quieras aclarar antes de la consulta?"></textarea></div>'
    +'</div>'
    +'<button class="main-btn" id="btn2" disabled>Ver resumen →</button>'
  +'</div>'
  +'<div id="vw-3" style="display:none">'
    +'<div class="section-label">Resumen del turno</div>'
    +'<div class="summary-card">'
      +'<div class="sum-row">📋 <span id="s-svc"></span></div>'
      +'<div class="sum-row">📅 <span id="s-date"></span></div>'
      +'<div class="sum-row">🕐 <span id="s-time"></span></div>'
      +'<div class="sum-row">👤 <span id="s-name"></span></div>'
      +'<div class="sum-row">✉️ <span id="s-mail"></span></div>'
      +'<div class="sum-row">📞 <span id="s-tel"></span></div>'
    +'</div>'
    +'<p style="font-size:13px;color:#888;margin-bottom:1rem;">Al confirmar, te enviamos un email con los detalles del turno.</p>'
    +'<button class="main-btn" id="btn3">✓ Confirmar turno</button>'
  +'</div>'
  +'<div id="vw-4" style="display:none" class="success-wrap">'
    +'<div class="success-icon">✅</div>'
    +'<div class="success-title">¡Turno solicitado!</div>'
    +'<p class="success-sub">Te enviamos la confirmación a <strong id="conf-mail"></strong>.<br>Revisá también la carpeta de spam.</p>'
    +'<button class="sec-btn" id="btn4">Solicitar otro turno</button>'
  +'</div>';

  document.getElementById('cal-widget').innerHTML = HTML;

  var MONTHS = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
  var DAYS = ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'];
  var UNAVAIL = ['09:00','13:00','15:30'];
  var cw = { svc:null, svcLabel:null, date:null, time:null, vm: new Date() };

  function slots(){ var s=[]; for(var h=8;h<20;h++){s.push(pad(h)+':00');s.push(pad(h)+':30');} return s; }
  function pad(n){return n<10?'0'+n:n;}
  function v(id){return document.getElementById(id).value.trim();}

  document.querySelectorAll('#cal-widget .svc-btn').forEach(function(el){
    el.addEventListener('click', function(){
      document.querySelectorAll('#cal-widget .svc-btn').forEach(function(b){b.classList.remove('selected');});
      el.classList.add('selected');
      cw.svc = el.dataset.svc;
      cw.svcLabel = el.dataset.label;
      chk1();
    });
  });

  function renderCal(){
    var d=cw.vm;
    document.getElementById('cw-month').textContent = MONTHS[d.getMonth()]+' '+d.getFullYear();
    var g=document.getElementById('cw-cal');
    g.innerHTML='';
    DAYS.forEach(function(n){var e=document.createElement('div');e.className='dn';e.textContent=n;g.appendChild(e);});
    var first=new Date(d.getFullYear(),d.getMonth(),1).getDay();
    var days=new Date(d.getFullYear(),d.getMonth()+1,0).getDate();
    var today=new Date();today.setHours(0,0,0,0);
    for(var i=0;i<first;i++){var e=document.createElement('div');e.className='cd empty';g.appendChild(e);}
    for(var day=1;day<=days;day++){
      var dt=new Date(d.getFullYear(),d.getMonth(),day);
      var e=document.createElement('div');
      e.textContent=day;
      var past=dt<today, sun=dt.getDay()===0;
      var sel=cw.date&&dt.toDateString()===cw.date.toDateString();
      var tod=dt.toDateString()===today.toDateString();
      e.className='cd'+(past||sun?' '+(sun?'nosun':'past'):'')+(sel?' selday':tod&&!sel?' today':'');
      if(!past&&!sun)(function(dt2){e.addEventListener('click',function(){selDate(dt2);});})(dt);
      g.appendChild(e);
    }
  }

  function selDate(dt){
    cw.date=dt; cw.time=null;
    renderCal();
    document.getElementById('cw-datelabel').textContent=DAYS[dt.getDay()]+' '+dt.getDate()+' de '+MONTHS[dt.getMonth()];
    renderTimes();
    document.getElementById('cw-time-section').style.display='block';
    chk1();
  }

  function renderTimes(){
    var g=document.getElementById('cw-times');g.innerHTML='';
    slots().forEach(function(slot){
      var btn=document.createElement('button');
      var un=UNAVAIL.indexOf(slot)>=0;
      btn.className='tb'+(un?' unavail':cw.time===slot?' seltime':'');
      btn.textContent=slot; btn.disabled=un;
      if(!un) btn.addEventListener('click',function(){cw.time=slot;renderTimes();chk1();});
      g.appendChild(btn);
    });
  }

  document.getElementById('cw-prev').addEventListener('click',function(){var d=cw.vm;cw.vm=new Date(d.getFullYear(),d.getMonth()-1,1);renderCal();});
  document.getElementById('cw-next').addEventListener('click',function(){var d=cw.vm;cw.vm=new Date(d.getFullYear(),d.getMonth()+1,1);renderCal();});

  function chk1(){document.getElementById('btn1').disabled=!(cw.svc&&cw.date&&cw.time);}

  ['inp-nom','inp-ape','inp-mail','inp-tel'].forEach(function(id){
    document.getElementById(id).addEventListener('input', function(){
      var ok=v('inp-nom')&&v('inp-ape')&&v('inp-mail')&&v('inp-tel');
      document.getElementById('btn2').disabled=!ok;
    });
  });

  function setDots(n){ for(var i=1;i<=4;i++){var el=document.getElementById('d'+i); el.className='dot'+(i===n?' active':i<n?' done':'');} }

  function goStep(n){
    for(var i=1;i<=4;i++) document.getElementById('vw-'+i).style.display='none';
    document.getElementById('vw-'+n).style.display='block';
    setDots(n);
    var titles=['','Elegí servicio, día y hora','Tus datos','Confirmar turno',''];
    var subs=['','Elegí el servicio, día y horario que mejor te quede.','Completá tus datos.','Revisá los datos antes de confirmar.',''];
    document.getElementById('cw-title').textContent=titles[n]||'Solicitar turno';
    document.getElementById('cw-sub').textContent=subs[n]||'';
    if(n===3) fillSummary();
  }

  function fillSummary(){
    var d=cw.date;
    document.getElementById('s-svc').textContent=cw.svcLabel;
    document.getElementById('s-date').textContent=DAYS[d.getDay()]+' '+d.getDate()+' de '+MONTHS[d.getMonth()]+' de '+d.getFullYear();
    document.getElementById('s-time').textContent=cw.time+' hs';
    document.getElementById('s-name').textContent=v('inp-nom')+' '+v('inp-ape');
    document.getElementById('s-mail').textContent=v('inp-mail');
    document.getElementById('s-tel').textContent=v('inp-tel');
  }

  document.getElementById('btn1').addEventListener('click',function(){goStep(2);});
  document.getElementById('btn2').addEventListener('click',function(){goStep(3);});
  document.getElementById('btn3').addEventListener('click',function(){
    document.getElementById('conf-mail').textContent=v('inp-mail');
    goStep(4);
    document.getElementById('cw-title').style.display='none';
    document.getElementById('cw-sub').style.display='none';
    document.querySelector('#cal-widget .step-dots').style.display='none';
  });
  document.getElementById('btn4').addEventListener('click',function(){
    cw={svc:null,svcLabel:null,date:null,time:null,vm:new Date()};
    document.querySelectorAll('#cal-widget .svc-btn').forEach(function(b){b.classList.remove('selected');});
    ['inp-nom','inp-ape','inp-mail','inp-tel','inp-nota'].forEach(function(id){document.getElementById(id).value='';});
    document.getElementById('cw-time-section').style.display='none';
    document.getElementById('cw-title').style.display='';
    document.getElementById('cw-sub').style.display='';
    document.querySelector('#cal-widget .step-dots').style.display='';
    goStep(1);
    renderCal();
  });

  renderCal();
})();
</script>