/* =========================================================
   AGENDA YA — LOGIN
   RECONSTRUCCIÓN LIMPIA · REFERENCIA 691 × 1536
   Una sola fuente visual para el login.
   IDs funcionales de Agenda YA permanecen intactos.
   ========================================================= */

:root{
  --blue:#0878ea;
  --navy:#0b2e59;
  --text:#5f6670;
  --muted:#737b86;
  --border:#dfe2e6;
  --white:#fff;
  /* Escala única: limita por ancho Y por la altura visible segura del navegador. */
  --s:min(calc(100vw / 691), calc(100svh / 1536));
}

*,
*::before,
*::after{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  background:#fff;
}

body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--navy);
  overflow-x:hidden;
}

button,input{font:inherit}

/* Login canvas.
   At 691px wide the geometry is 1:1 with the supplied reference.
   At other widths every dimension scales from the same reference ratio. */
.ay-auth{
  position:relative!important;
  width:100%!important;
  min-height:calc(1536 * var(--s))!important;
  height:calc(1536 * var(--s))!important;
  max-height:100svh!important;
  background:#fff!important;
  overflow:hidden!important;
}

/* Auth state is controlled by auth.js. Do not override its inline display:none/flex. */
.ay-auth[hidden]{display:none!important;}

.ay-auth-bg-shape,
.ay-auth-bg-shape-a,
.ay-auth-bg-shape-b,
.ay-auth-bg-shape-c{
  display:none!important;
}

.ay-auth-wrap{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  overflow:visible!important;
}

/* ---------- Volver ---------- */
.ay-auth-topbar{
  position:absolute!important;
  inset:0 0 auto 0!important;
  width:100%!important;
  height:calc(150 * var(--s))!important;
  padding:calc(110 * var(--s)) 0 0!important;
  margin:0!important;
  background:transparent!important;
  z-index:10!important;
}

.ay-auth-back{
  appearance:none!important;
  border:0!important;
  background:transparent!important;
  color:var(--blue)!important;
  width:auto!important;
  height:auto!important;
  margin:0 0 0 calc(38 * var(--s))!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:calc(10 * var(--s))!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-size:calc(22 * var(--s))!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:-.5px!important;
  white-space:nowrap!important;
}

.ay-auth-back svg{
  width:calc(29 * var(--s))!important;
  height:calc(29 * var(--s))!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.4!important;
}

.ay-auth-back span{display:block!important}

/* ---------- Logo ---------- */
.ay-auth-brand{
  position:absolute!important;
  top:calc(198 * var(--s))!important;
  left:calc(48 * var(--s))!important;
  right:calc(48 * var(--s))!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  background:transparent!important;
  z-index:5!important;
}

.ay-auth-brand img{
  display:block!important;
  width:calc(510 * var(--s))!important;
  max-width:100%!important;
  height:auto!important;
  margin:0 auto!important;
  object-fit:contain!important;
  border:0!important;
}

/* ---------- Intro ---------- */
.ay-auth-intro{
  position:absolute!important;
  top:calc(419 * var(--s))!important;
  left:calc(48 * var(--s))!important;
  right:calc(48 * var(--s))!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  z-index:5!important;
}

.ay-auth-eyebrow,
.ay-auth-title{
  display:none!important;
}

.ay-auth-subtitle{
  display:block!important;
  margin:0 auto!important;
  padding:0!important;
  max-width:none!important;
  color:var(--muted)!important;
  font-size:calc(22 * var(--s))!important;
  line-height:1.38!important;
  font-weight:400!important;
  letter-spacing:-.45px!important;
  text-align:center!important;
}

.ay-auth-title-break{display:none!important}

/* ---------- Form ---------- */
.ay-auth-card{
  position:absolute!important;
  top:calc(557 * var(--s))!important;
  left:calc(48 * var(--s))!important;
  right:calc(48 * var(--s))!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  z-index:5!important;
}

.ay-auth-form{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

.ay-auth-field{
  position:relative!important;
  display:block!important;
  width:100%!important;
  margin:0 0 calc(29 * var(--s))!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.ay-auth-field-copy{
  position:relative!important;
  display:block!important;
  width:100%!important;
  padding:0!important;
}

.ay-auth-label{
  display:block!important;
  margin:0 0 calc(9 * var(--s))!important;
  color:var(--navy)!important;
  font-size:calc(21 * var(--s))!important;
  line-height:1.15!important;
  font-weight:750!important;
  letter-spacing:-.45px!important;
}

.ay-auth-field-icon{
  position:absolute!important;
  z-index:4!important;
  left:calc(22 * var(--s))!important;
  bottom:calc(23 * var(--s))!important;
  width:calc(34 * var(--s))!important;
  height:calc(34 * var(--s))!important;
  display:grid!important;
  place-items:center!important;
  color:#737c87!important;
  background:transparent!important;
  pointer-events:none!important;
}

.ay-auth-field-icon svg{
  width:calc(31 * var(--s))!important;
  height:calc(31 * var(--s))!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
}

.ay-auth-input{
  display:block!important;
  width:100%!important;
  height:calc(84 * var(--s))!important;
  min-height:0!important;
  margin:0!important;
  padding:0 calc(65 * var(--s)) 0 calc(86 * var(--s))!important;
  border:2px solid var(--border)!important;
  border-radius:calc(20 * var(--s))!important;
  outline:none!important;
  background:#fff!important;
  color:#555e69!important;
  font-size:calc(22 * var(--s))!important;
  font-weight:400!important;
  letter-spacing:-.3px!important;
  box-shadow:none!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}

.ay-auth-input::placeholder{
  color:#5f6670!important;
  opacity:1!important;
}

.ay-auth-input:focus{
  border-color:#cbd0d5!important;
  box-shadow:none!important;
}

.ay-auth-password-copy{position:relative!important}

.ay-auth-eye{
  position:absolute!important;
  z-index:5!important;
  right:calc(19 * var(--s))!important;
  bottom:calc(20 * var(--s))!important;
  width:calc(42 * var(--s))!important;
  height:calc(42 * var(--s))!important;
  padding:calc(5 * var(--s))!important;
  border:0!important;
  background:transparent!important;
  color:#737c87!important;
  box-shadow:none!important;
  border-radius:0!important;
  display:grid!important;
  place-items:center!important;
}

.ay-auth-eye svg{
  width:calc(32 * var(--s))!important;
  height:calc(32 * var(--s))!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
}

.ay-auth-eye .ay-eye-open{display:block!important}
.ay-auth-eye .ay-eye-closed{display:none!important}

.ay-auth-confirm-field{
  margin-top:calc(-5 * var(--s))!important;
  margin-bottom:calc(28 * var(--s))!important;
}

.ay-auth-confirm-field .ay-auth-input{
  padding-left:calc(22 * var(--s))!important;
}

/* ---------- Primary ---------- */
.ay-auth-primary{
  width:100%!important;
  height:calc(86 * var(--s))!important;
  min-height:0!important;
  margin:0!important;
  padding:0 calc(24 * var(--s))!important;
  border:0!important;
  border-radius:calc(20 * var(--s))!important;
  background:linear-gradient(90deg,#0878ea 0%,#0788f3 100%)!important;
  color:#fff!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:calc(18 * var(--s))!important;
  font-size:calc(22 * var(--s))!important;
  line-height:1!important;
  font-weight:800!important;
  cursor:pointer!important;
}

.ay-auth-primary b{
  font-size:calc(27 * var(--s))!important;
  font-weight:400!important;
  line-height:1!important;
}

/* ---------- Recovery ---------- */
.ay-auth-status{
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}

#ayAuthStatus:not(:empty){
  margin-top:calc(14 * var(--s))!important;
  text-align:center!important;
}

.ay-auth-link{
  display:block!important;
  margin:calc(27 * var(--s)) auto 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--blue)!important;
  font-size:calc(21 * var(--s))!important;
  line-height:1.25!important;
  font-weight:750!important;
  text-align:center!important;
  box-shadow:none!important;
  cursor:pointer!important;
}

/* ---------- Divider ---------- */
.ay-auth-divider{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  gap:calc(25 * var(--s))!important;
  margin:calc(53 * var(--s)) 0 calc(35 * var(--s))!important;
  color:#707781!important;
  font-size:calc(18 * var(--s))!important;
  line-height:1!important;
  font-weight:400!important;
}

.ay-auth-divider::before,
.ay-auth-divider::after{
  content:""!important;
  flex:1 1 auto!important;
  height:2px!important;
  background:#dfe1e4!important;
}

.ay-auth-divider span{white-space:nowrap!important}

/* ---------- Social ---------- */
.ay-auth-socials{
  display:grid!important;
  gap:calc(21 * var(--s))!important;
  width:100%!important;
}

.ay-auth-secondary{
  position:relative!important;
  width:100%!important;
  height:calc(82 * var(--s))!important;
  min-height:0!important;
  margin:0!important;
  padding:0 calc(70 * var(--s)) 0 calc(184 * var(--s))!important;
  border:2px solid var(--border)!important;
  border-radius:calc(19 * var(--s))!important;
  background:#fff!important;
  color:var(--navy)!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  font-size:calc(22 * var(--s))!important;
  line-height:1.1!important;
  font-weight:750!important;
  cursor:pointer!important;
}

.ay-auth-secondary>b{
  position:absolute!important;
  right:calc(42 * var(--s))!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  color:#5d6672!important;
  font-size:calc(27 * var(--s))!important;
  font-weight:400!important;
  line-height:1!important;
}

.ay-social-icon{
  position:absolute!important;
  left:calc(132 * var(--s))!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:calc(42 * var(--s))!important;
  height:calc(42 * var(--s))!important;
  display:grid!important;
  place-items:center!important;
}

.ay-social-icon svg{
  display:block!important;
  width:calc(42 * var(--s))!important;
  height:calc(42 * var(--s))!important;
}

.ay-social-text{
  display:block!important;
  white-space:nowrap!important;
  text-align:left!important;
}

/* ---------- Footer ---------- */
.ay-auth-switch{
  margin:calc(40 * var(--s)) auto 0!important;
  padding:0!important;
  text-align:center!important;
  color:#727a84!important;
  font-size:calc(18 * var(--s))!important;
  line-height:1.35!important;
  font-weight:400!important;
}

.ay-auth-switch button{
  display:inline!important;
  margin-left:calc(6 * var(--s))!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--blue)!important;
  font-weight:800!important;
  font-size:inherit!important;
  box-shadow:none!important;
  cursor:pointer!important;
}

.ay-auth-foot{
  margin:calc(28 * var(--s)) 0 0!important;
  padding:0!important;
  text-align:center!important;
  color:#89909a!important;
  font-size:calc(15 * var(--s))!important;
  line-height:1.25!important;
  font-weight:400!important;
}

/* ---------- State handling ---------- */
#ayAuthPostLogin{display:none}
#ayAuthPostLogin.is-visible{display:block}
#ayAuthFormPanel[hidden]{display:none!important}
.ay-profile[hidden],
.ay-app[hidden]{display:none!important}
#ayPasswordConfirmWrap[hidden]{display:none!important}
#ayPasswordConfirmWrap:not([hidden]){display:block!important}

/* ---------- Do not let desktop app CSS alter the login canvas ---------- */
.ay-auth input,
.ay-auth button{
  box-sizing:border-box;
}

/* ---------- Mobile viewport fit ----------
   The complete reference canvas is always contained in the visible safe
   viewport. This prevents vertical scrolling when Chrome's address/bottom
   bars are visible on Android. */
@media (max-width:700px){
  html,body{
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden!important;
  }

  .ay-auth{
    width:100%!important;
    height:calc(1536 * var(--s))!important;
    min-height:calc(1536 * var(--s))!important;
    max-height:100svh!important;
    overflow:hidden!important;
  }

  .ay-auth-wrap{
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }
}
/* Agenda YA · Onboarding profile.html
   Segunda capa del flujo. No contiene el marketplace. */

:root{
  --blue:#0878ea;
  --blue2:#0788f3;
  --navy:#0b2e59;
  --muted:#737b86;
  --border:#dfe2e6;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#fff}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--navy)}
button,input{font:inherit}

.profile-page{
  width:100%;
  min-height:100svh;
  background:#fff;
  overflow-x:hidden;
}

.profile-canvas{
  width:min(100%,691px);
  min-height:100svh;
  margin:auto;
  padding:0 48px 36px;
}

.profile-top{
  padding-top:calc(110 / 1536 * 100svh);
}

.profile-back{
  color:var(--blue);
  text-decoration:none;
  font-size:clamp(16px,3.2vw,22px);
  font-weight:700;
}

.profile-logo{
  display:block;
  width:min(510px,100%);
  height:auto;
  margin:68px auto 0;
}

.profile-content{
  margin-top:58px;
}

.profile-heading{text-align:center}
.profile-heading>span{
  display:none;
}
.profile-heading h1{
  margin:0;
  font-size:clamp(28px,5vw,36px);
  line-height:1.12;
  letter-spacing:-.8px;
}
.profile-heading p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:clamp(17px,3.5vw,24px);
  line-height:1.35;
}

.choice-step{margin-top:34px}
.profile-types{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.profile-type{
  min-height:150px;
  padding:24px;
  border:2px solid var(--border);
  border-radius:20px;
  background:#fff;
  text-align:left;
  color:var(--navy);
  cursor:pointer;
}
.profile-type.active{
  border-color:#2f86ed;
  background:#f2f8ff;
  box-shadow:0 8px 22px rgba(8,120,234,.08);
}
.profile-type strong{
  display:block;
  font-size:clamp(17px,3.5vw,24px);
  line-height:1.2;
}
.profile-type span{
  display:block;
  margin-top:10px;
  color:var(--muted);
  font-size:clamp(14px,2.8vw,18px);
  line-height:1.35;
}

.primary-btn{
  width:100%;
  min-height:72px;
  margin-top:26px;
  border:0;
  border-radius:18px;
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  color:#fff;
  font-weight:800;
  font-size:clamp(18px,3.6vw,25px);
  cursor:pointer;
}
.primary-btn b{margin-left:12px;font-weight:500}

.profile-status{
  min-height:20px;
  margin:10px 0 0;
  color:#6d7681;
  text-align:center;
  font-size:14px;
}
.profile-status[data-kind="error"]{color:#b42318}
.profile-status[data-kind="success"]{color:#16834b}

.simple-back{
  padding:0;
  border:0;
  background:transparent;
  color:var(--blue);
  font-weight:700;
  cursor:pointer;
}

.form-step{margin-top:26px}
.onboarding-form{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.form-intro span{
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  letter-spacing:.7px;
}
.form-intro h2{margin:5px 0 0;font-size:28px}
.form-intro p{margin:7px 0 0;color:var(--muted)}

.onboarding-form label{
  display:grid;
  gap:7px;
  font-size:14px;
  font-weight:750;
}
.onboarding-form label small{font-weight:400;color:#8b939c}
.onboarding-form input{
  width:100%;
  min-height:50px;
  padding:0 14px;
  border:2px solid var(--border);
  border-radius:14px;
  outline:none;
  background:#fff;
  color:#4e5763;
}
.onboarding-form input:focus{border-color:#8ebcf0}
.onboarding-form input[type=file]{padding:10px;font-size:13px}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.phone-field{display:grid;grid-template-columns:auto 1fr}
.phone-field span{
  display:flex;
  align-items:center;
  padding:0 10px;
  border:2px solid var(--border);
  border-right:0;
  border-radius:14px 0 0 14px;
  background:#fafbfc;
  color:#68717c;
  font-size:13px;
}
.phone-field input{border-radius:0 14px 14px 0}

.ay-hour-row{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:7px;
  align-items:center;
  margin-bottom:7px;
}
.ay-hour-row label{display:flex;align-items:center;gap:6px}
.ay-hour-row input[type=time]{min-height:44px}

.action-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
}
.action-row .primary-btn{margin-top:0}

[hidden]{display:none!important}

@media(max-width:700px){
  .profile-canvas{padding-left:38px;padding-right:38px}
}

@media(max-height:850px){
  .profile-top{padding-top:34px}
  .profile-logo{margin-top:42px}
  .profile-content{margin-top:36px}
  .profile-type{min-height:128px;padding:18px}
  .primary-btn{min-height:62px}
}

@media(max-width:700px) and (max-height:760px){
  .profile-logo{width:390px;margin-top:30px}
  .profile-content{margin-top:25px}
  .profile-types{gap:10px}
  .profile-type{min-height:105px;padding:14px}
  .profile-type strong{font-size:16px}
  .profile-type span{font-size:13px}
  .primary-btn{min-height:54px;border-radius:15px}
}

@media(max-width:480px){
  .two-col{grid-template-columns:1fr}
}