:root{
  --brand:#003b73;
  --brand-light:#dce6f5;
  --teal:#08717B;
  --text:#1b2733;
 /* --muted:#f5f7fa;*/
  --radius:12px;
  font-family:'Inter',system-ui,sans-serif;

 /* --teal:#08717B;
  --green:#93C78D;
  --text:#1B1F23;
  --muted:#6B7280;
  --bg:#eff7fb;*/
  --block-w:min(560px,100%);
}
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);background:var(--bg);
  min-height:100svh;display:flex;flex-direction:column;
  background-image: url(assets/img/bg_huella.png);
  background-position: center center;
  background-repeat: no-repeat;
}
.page{flex:1;display:flex;flex-direction:column;padding:clamp(16px,4vw,28px)}
.header{display:flex;justify-content:center;align-items:center;padding-top:16px}
.header img{max-width:min(150px,48vw);width:auto;height:auto}

.question
{font-weight:600;font-size:clamp(18px,2.6vw,22px);margin:0;text-align:center;letter-spacing: 1.5px;text-transform: uppercase;
}

.choices{display:flex;gap:14px;justify-content:center;width:100%;flex-wrap:wrap}

.citaprevia {
  width: 80%;
  text-align: center;
}

.tit_cita {
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 23px;
}
.subtit_cita {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 18px;
  padding-bottom: 20px;
}

#pagina-citaprevia label {
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 23px;
}

.cta{margin-top:16px;width:100%;padding:16px;border-radius:var(--radius);background:var(--brand-light);color:white;border:0;font-weight:600;cursor:not-allowed;font-size:16px;text-align:center;} 
.btn-primary.enabled{background:var(--brand);cursor:pointer;} 
#calendar-wrapper{display:none;margin-top:20px;padding:16px;border:1px solid #c6d4e6;background:#f7faff;border-radius:12px;} 
#calendar{margin-top:10px;padding:10px;border-radius:12px;border:1px solid var(--brand);font-size:15px;width:100%;}




/* Chips */
.btn{
  width:100%;min-height:40px;border-radius:6px;border:0px solid #E3E8EA;background:#d2eff3;color:#374151;
  font-weight:300;font-size:15px;cursor:pointer;padding:10px 18px;text-align:center!important;
  line-height:1.25;display:flex;align-items:center;justify-content:space-between;gap:10px;
}

.btn:active{transform:translateY(1px)}
.btn.selected{background:#007782; color:#d3ebf3; }

/* CTA */
.cta{
  width:var(--block-w);align-self:center;padding:14px 18px;border:none;border-radius:14px;font-weight:800;
  letter-spacing:.4px;color:#fff;opacity:.45;cursor:not-allowed;
  transition:.2s opacity,.05s transform;
  font-weight: 500;
  padding: 17px 40px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #7a8e9a;
  background: #007782;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 15px;
  transition: all 0.5s ease;
  color: #d3ebf3;
}

.cta:hover {
  background-color: #bbe9ea;
  color: #252a2b;
  border: none;
  box-shadow: rgb(194 220 222) 0px 7px 29px 0px;
}
.cta.enabled{opacity:1;cursor:pointer;}
.cta.enabled:active{transform:translateY(1px)}

/* Content containers */
.content,.content-2,.content-2a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;max-width:560px;width:100%;margin:0 auto;text-align:center;
  padding-top: 12px;
}
.content-1a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;width:100%;margin:0 auto;text-align:center;
  padding-top: 10px;
}

/* Select list */
.select-area{width:var(--block-w);display:flex;flex-direction:column;align-items:center;gap:8px}
.select-area label{text-align:center;color:var(--text);font-size:15px;font-weight:700;margin-bottom:4px}
.pill-list{
  list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;
  width:100%;max-height:clamp(160px,32vh,320px);overflow-y:auto;scrollbar-width:thin;
}
.pill-btn{
  width:100%;min-height:36px;border-radius:10px;border:1px solid #E3E8EA;background:#E3E8EA;
  color:#374151;font-weight:600;font-size:14px;cursor:pointer;padding:8px 12px;text-align:center;
  line-height:1.25;white-space:normal;word-break:break-word;
}
.pill-btn.selected{background:#08717B;color:#fff;border-color:#08717B;outline:none}

/* Form */
/*.form{width:var(--block-w);display:flex;flex-direction:column;gap:10px;margin-top:6px;}*/
.form {width:100%;display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.form input{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #E3E8EA;/*background:#E3E8EA;*/font-size:15px;outline:0;
}
.form input:focus{border-color:#c9d8da;background:#e6fcff;}
.form input.invalid{border-color:#C0392B;background:#fdecea;}
.hint{font-size:12px;color:#6B7280;margin-top:-6px;text-align:left;width:var(--block-w)}
.hint.error{color:#C0392B}

/* Quitar color de autocompletado */
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset; /* cambia #fff por tu color deseado */
  box-shadow: 0 0 0 1000px #fff inset;
  border-color: #E3E8EA; /* o el color que tú uses normalmente */
}


/* Services */
.formCompania{width:100%;}
.services-area{width:var(--block-w);display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px}
.services-area label{text-align:center;color:var(--text);font-weight:700;font-size:16px;margin-bottom:4px}
.service-list{
  list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;width:100%;
  max-height:clamp(180px,34vh,340px);overflow-y:auto;scrollbar-width:thin
}
.service-btn{
  width:100%;min-height:40px;border-radius:6px;border:0px solid #E3E8EA;background:#d2eff3;color:#374151;
  font-weight:300;font-size:15px;cursor:pointer;padding:10px 18px;text-align:left;
  line-height:1.25;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.service-btn .label{flex:1;}
.service-btn .info{
  width:22px;height:22px;border-radius:999px;background:#AEB5B9;color:#fff;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.service-btn.selected{background:#08717B;color:#fff;border-color:#08717B}
.service-btn.selected .info{background:#065a62}

/* Specialists */
.specialist-area{width:var(--block-w);display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px;}
.specialist-area label{text-align:center;color:var(--text);font-size:15px;font-weight:700;margin-bottom:2px}
.specialist-list{
  list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;width:100%;
  max-height:clamp(160px,32vh,320px);overflow-y:auto;scrollbar-width:thin
}
.specialist-btn{
  width:100%;min-height:40px;border-radius:6px;border:0px solid #E3E8EA;background:#d2eff3;color:#374151;
  font-weight:300;font-size:15px;cursor:pointer;padding:10px 18px;text-align:center!important;
  line-height:1.25;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.specialist-btn.selected{background:#08717B;color:#fff;border-color:#08717B}

.tabs{display:flex; width: 100%;gap:24px;margin-top:24px;border-bottom:1px solid #ddd;}  
.tab{padding:8px 0;font-size:15px;font-weight:600;cursor:pointer;position:relative;color:var(--text);} 
.tab.active{color:#08717B;} 
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--brand);} 

/* Agenda */
.agenda-scroll{
  width:100%;max-height:clamp(220px,38vh,400px);overflow-y:auto;margin-top:6px;padding-right:4px
}
.day-block{margin:10px auto 0;display:flex;flex-direction:column;gap:10px;text-align:left}
.day-title{text-transform:capitalize;font-weight:700;margin:10px 0 0 0}

.slot{
  padding:8px 12px;border:1px solid #AEB5B9;border-radius:12px;background:transparent;
  cursor:pointer;font-size:15px;color:#111827;margin:4px;transition:.2s
}
.slot.selected{border-color:#08717B;color:#fff;font-weight:bold}

/* Buttons */
.btn-secondary{
  width:var(--block-w);align-self:center;padding:12px 16px;border-radius:12px;
  border:1px solid #E3E8EA;background:#E3E8EA;color:#374151;font-weight:700;cursor:pointer
}
.btn-secondary:active{transform:translateY(1px)}
.subtle{color:var(--muted);font-size:14px;margin:-4px 0 8px 0;text-align:center}

/* Back button */
.back-btn{
  position:fixed;top:18px;left:18px;width:28px;height:28px;display:flex;
  align-items:center;justify-content:center;cursor:pointer;z-index:9999;
  background-color: transparent;
}
.back-btn svg{
  width:26px;
  height:26px;
  stroke:var(--teal);
  stroke-width:2.8;
  fill:none;
  background-color: transparent;
}
svg{ 
    stroke: #08717B;/*#ff0000;*/ /* Color rojo */
    stroke-width: 2;  /* Grosor de 2 píxeles */
    fill: none;      /* No tiene relleno */
}

/* Responsive */
@media(max-width:420px){
  .header img{max-width:56vw}
  .choices{gap:10px}
  .btn{min-width:48%;padding:12px 10px}
}
@media(max-width:320px){
  .btn{min-width:100%}
}

#other-day{
  width:var(--block-w);align-self:center;padding:14px 18px;border:none;border-radius:14px;font-weight:800;
  letter-spacing:.4px;color:#fff;opacity:.45;cursor:not-allowed;
  transition:.2s opacity,.05s transform;
  font-weight: 500;
  padding: 17px 40px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #7a8e9a;
  background: #007782;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 15px;
  transition: all 0.5s ease;
  color: #d3ebf3;
}

#other-day:hover {
  background-color: #bbe9ea;
  color: #252a2b;
  border: none;
  box-shadow: rgb(194 220 222) 0px 7px 29px 0px;
}

.day-block{
    width:100%;
    margin:10px auto 0;
    display:flex;
    flex-direction:column;
    gap:10px;
    text-align:left;
}

.day-title{
    font-weight:700;
    margin:10px 0 0 0;
    text-transform:capitalize;
}


/* ============================
   ESTILOS DE citas_Online_5A
   ============================ */

/* Variables adicionales */
:root{
  --ink:#0f172a;
  --chip:#E3E8EA;
}

/* Calendario */
.cal-wrap{width:var(--block-w);margin:0 auto; background-color: #ffffff; border: 1px solid #ddd;border-radius: 10px; padding:10px;}
.cal-header{position:relative;display:flex;align-items:center;justify-content:center;margin:6px 0 4px}
.cal-title{font-weight:500;font-size:16px;margin: 15px 0px 20px 0; text-transform:capitalize;color:var(--ink)}
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);border:none;background:transparent;padding:6px;cursor:pointer;color:#94a3b8}
.nav-btn svg{width:18px;height:18px}
.nav-prev{left:0}
.nav-next{right:0}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin:4px 0 6px}
.wh{font-size:12px;color:#A0ABB7;text-align:center;font-weight:700}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;row-gap:6px}
.cell{display:flex;align-items:center;justify-content:center;height:36px}
.day{
  width:32px;height:32px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:#fff;color:#111827;
  font-weight:700;line-height:1
}
.cell.empty{visibility:hidden}
.cell.disabled .day{
  color:#c6cdd4;background:#f1f5f9;border-color:#f1f5f9;pointer-events:none
}
.cell.today .day{border-color:#b6ccd0}
.cell.selected .day{
  background:#0b8a96;color:#fff;border-color:#0b8a96
}

/* Tabs especiales de esta pantalla */
.tabs{display:flex;justify-content:left;gap:28px;margin-top:10px}
.tab{
  background:transparent;border:none;cursor:pointer;font-weight:700;
  /*color:var(--muted)*/ color: #bcc4c6;padding:6px 2px;position:relative
}
.tab:focus{outline:none}

/* ⚠️ VERSIÓN EXACTA QUE TENÍAS: color especial + fondo transparente */
.tab.active{color:#0D5E66;background:transparent;}

/* Subrayado */
.tab::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;
  height:3px;border-radius:2px;background:transparent;
}
.tab.active::after{background:#08717B}

/* Horas (slot-row) */
.slot-row{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px
}
.slot{
  padding:8px 12px;border:1px solid #AEB5B9;border-radius:12px;
  background:transparent;cursor:pointer;font-size:15px;
  line-height:1;color:#111827
}
.slot.selected{
  background:transparent;border-color:#08717B;color:#08717B
}