:root {
  --ysa-azul: #0a2a55;
  --ysa-azul-2: #123f79;
  --ysa-rojo: #c8102e;
  --ysa-tinta: #16202e;
  --ysa-texto: #5c6b80;
  --ysa-borde: #dce3ec;
}

body.ys-acceso-abierto { overflow: hidden !important; }
.ys-sesion-saludo { display:flex; align-items:center; gap:7px; color:var(--ysa-tinta); }
.ys-sesion-saludo b { color:var(--ysa-azul); font-size:13px; }
.ys-sesion-saludo small { color:#8290a3; font-size:11px; }
.ys-sesion-cuenta {
  display:inline-flex; align-items:center; padding:7px 12px !important; border-radius:8px;
  color:#fff !important; background:var(--ysa-azul) !important; text-decoration:none !important;
  font-size:12px !important; font-weight:750 !important;
}
.ys-sesion-salir { color:#77869a !important; font-size:11px !important; }
.ys-nav-cuenta {
  display:flex; align-items:center; gap:7px; margin-left:auto; padding:6px 9px;
  border-radius:9px; color:var(--ysa-azul); text-decoration:none; font-size:12px;
}
.ys-nav-cuenta:hover { background:#edf3fa; }
.ys-nav-cuenta span { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--ysa-azul-2); font-weight:800; }
.ys-nav-cuenta b { max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ys-acceso[hidden] { display: none !important; }
.ys-acceso {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: 20px; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ys-acceso-fondo {
  position: absolute; inset: 0; background: rgba(6, 20, 40, .72);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  animation: ysa-aparece .18s ease both;
}
.ys-acceso-card {
  position: relative; width: min(100%, 680px); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(255,255,255,.5); border-radius: 24px; background: #fff; color: var(--ysa-tinta);
  box-shadow: 0 30px 90px rgba(0, 13, 36, .38); animation: ysa-sube .24s ease both;
}
.ys-acceso-cabecera {
  position: relative; flex: none; overflow: hidden; padding: 27px 60px 23px 28px; color: #fff;
  background: linear-gradient(135deg, #081f43 0%, #0d3468 72%, #184c8d 100%);
}
.ys-acceso-cabecera::after {
  content: "YS"; position: absolute; right: -14px; bottom: -37px;
  font-family: Georgia, serif; font-size: 112px; font-weight: 700;
  color: rgba(255,255,255,.075); line-height: 1;
}
.ys-acceso-marca {
  display: flex; align-items: center; gap: 10px; margin-bottom: 13px;
  font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
.ys-acceso-marca img {
  width: 46px; height: 46px; object-fit: contain; flex:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.14));
}
.ys-acceso-marca span { position:relative; z-index:1; }
.ys-acceso-cabecera h2 {
  position: relative; z-index: 1; margin: 0 0 7px; color: #fff;
  font-family: Poppins, Inter, sans-serif; font-size: 1.55rem; line-height: 1.18;
}
.ys-acceso-cabecera p { position: relative; z-index: 1; margin: 0; color: #dce9f8; font-size: .88rem; line-height: 1.48; }
.ys-acceso-cerrar {
  position: absolute; z-index: 3; top: 15px; right: 16px; width: 38px; height: 38px;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%; color: #fff; background: rgba(255,255,255,.09); cursor: pointer;
  font-size: 23px; line-height: 1; transition: background .15s ease, transform .15s ease;
}
.ys-acceso-cerrar:hover { background: rgba(255,255,255,.2); transform: rotate(4deg); }
.ys-acceso-cuerpo {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 28px 28px; scrollbar-width: thin;
  scrollbar-color: rgba(18,63,121,.45) transparent;
}
.ys-acceso-cuerpo::-webkit-scrollbar { width: 8px; }
.ys-acceso-cuerpo::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.ys-acceso-cuerpo::-webkit-scrollbar-thumb {
  min-height: 48px; border: 2px solid transparent; border-radius: 999px;
  background: linear-gradient(180deg, #6ea6dc, #123f79) padding-box;
}
.ys-acceso-cuerpo::-webkit-scrollbar-thumb:hover { background: #0a2a55 padding-box; }
.ys-acceso-cuerpo::-webkit-scrollbar-button { display: none; }
.ys-acceso-scroll-cue {
  position:absolute; z-index:8; right:14px; bottom:10px; display:none; align-items:center; gap:5px;
  padding:6px 9px; border:1px solid rgba(10,42,85,.12); border-radius:999px;
  color:#123f79; background:rgba(255,255,255,.94); box-shadow:0 5px 16px rgba(10,42,85,.13);
  font-size:.67rem; font-weight:750; pointer-events:none;
}
.ys-acceso-scroll-cue.visible { display:flex; animation:ysa-cue-in .2s ease both; }
.ys-acceso-scroll-cue svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; animation:ysa-cue 1.25s ease-in-out infinite; }
.ys-acceso-beneficios {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: -5px 0 20px;
}
.ys-acceso-beneficios span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; border-radius: 10px; background: #f3f7fb; color: var(--ysa-texto);
  font-size: .7rem; font-weight: 650; text-align: center; line-height: 1.25;
}
.ys-acceso-beneficios span::before {
  content: "✓"; display: grid; place-items: center; width: 17px; height: 17px;
  flex: none; border-radius: 50%; background: #e1f3e9; color: #167448;
  font-size: 10px; font-weight: 900;
}
.ys-acceso-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; margin-bottom: 18px; border-radius: 12px; background: #eef3f8; }
.ys-acceso-tab { display:flex; align-items:center; justify-content:center; gap:7px; border: 0; border-radius: 9px; padding: 10px; background: transparent; color: var(--ysa-texto); font-weight: 700; cursor: pointer; transition:background .18s,color .18s,transform .18s; }
.ys-acceso-tab svg { width:17px; height:17px; }
.ys-acceso-tab:hover { color:var(--ysa-azul); }
.ys-acceso-tab.activo { color: var(--ysa-azul); background: #fff; box-shadow: 0 3px 10px rgba(10,42,85,.09); }
.ys-acceso-social { display: grid; gap: 9px; margin-bottom: 17px; }
.ys-acceso-social:empty { display: none; }
.ys-acceso-social a {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px;
  border: 1px solid var(--ysa-borde); border-radius: 11px; color: var(--ysa-tinta);
  background: #fff; text-decoration: none; font-weight: 700; font-size: .9rem;
}
.ys-acceso-social a:hover { border-color: #aab8ca; background: #f9fbfd; }
.ys-acceso-social svg { width: 19px; height: 19px; }
.ys-acceso-separa { display: flex; align-items: center; gap: 12px; margin: 15px 0; color: #91a0b2; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.ys-acceso-separa::before, .ys-acceso-separa::after { content: ""; height: 1px; flex: 1; background: var(--ysa-borde); }
.ys-acceso-panel[hidden] { display: none !important; }
.ys-acceso-panel { animation: ysa-panel .2s ease both; }
#ys-registro { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
#ys-registro > .ys-acceso-progreso,
#ys-registro > .ys-acceso-check,
#ys-registro > .ys-acceso-principal { grid-column:1 / -1; }
.ys-acceso-campo { position:relative; margin-bottom: 12px; text-align: left; }
.ys-acceso-campo label { display: block; margin-bottom: 5px; color: var(--ysa-tinta); font-size: .78rem; font-weight: 700; }
.ys-acceso-campo input {
  width: 100%; min-height: 45px; box-sizing: border-box; border: 1px solid var(--ysa-borde);
  border-radius: 10px; padding: 10px 42px 10px 42px; background: #fff; color: var(--ysa-tinta);
  font: inherit; font-size: .92rem; outline: none; transition: border .15s, box-shadow .15s;
}
.ys-acceso-campo input:focus { border-color: #346ba5; box-shadow: 0 0 0 3px rgba(52,107,165,.13); }
.ys-acceso-campo input:valid:not(:placeholder-shown) { border-color:#8bcaaa; }
.ys-acceso-campo-icon {
  position:absolute; left:13px; bottom:12px; z-index:2; width:20px; height:20px;
  display:grid; place-items:center; color:#71839a; pointer-events:none;
  transition:color .15s, transform .15s;
}
.ys-acceso-campo-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ys-acceso-campo:focus-within .ys-acceso-campo-icon { color:#123f79; transform:scale(1.06); }
.ys-acceso-ver-clave {
  position:absolute; right:8px; bottom:7px; z-index:3; width:32px; height:32px;
  display:grid; place-items:center; border:0; border-radius:8px; color:#71839a;
  background:transparent; cursor:pointer;
}
.ys-acceso-ver-clave:hover { color:#0a2a55; background:#eef3f8; }
.ys-acceso-ver-clave svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ys-acceso-progreso { margin:0 0 14px; }
.ys-acceso-progreso > span { display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; color:#6f7f93; font-size:.7rem; }
.ys-acceso-progreso b { color:#123f79; font-weight:700; }
.ys-acceso-progreso em { font-style:normal; font-variant-numeric:tabular-nums; }
.ys-acceso-progreso > i { display:block; height:5px; overflow:hidden; border-radius:99px; background:#e8eef5; }
.ys-acceso-progreso u { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#1d69ad,#27a567); text-decoration:none; transition:width .28s ease; }
.ys-acceso-check { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0; color: var(--ysa-texto); font-size: .76rem; line-height: 1.4; text-align: left; }
.ys-acceso-check input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--ysa-azul); }
.ys-acceso-check a { color: var(--ysa-azul-2); font-weight: 700; }
.ys-acceso-principal {
  width: 100%; min-height: 47px; border: 0; border-radius: 11px; padding: 11px 16px;
  color: #fff; background: var(--ysa-rojo); font: inherit; font-weight: 750; cursor: pointer;
  box-shadow: 0 8px 20px rgba(200,16,46,.22); transition: transform .15s, filter .15s;
}
.ys-acceso-principal:hover { filter: brightness(.96); transform: translateY(-1px); }
.ys-acceso-principal:disabled { opacity: .65; cursor: wait; transform: none; }
.ys-acceso-enlace { border: 0; padding: 8px 4px; color: var(--ysa-azul-2); background: transparent; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; }
.ys-acceso-centro { text-align: center; margin-top: 8px; }
.ys-acceso-error, .ys-acceso-ok { display: none; margin: 0 0 13px; padding: 10px 12px; border-radius: 9px; font-size: .8rem; line-height: 1.4; text-align: left; }
.ys-acceso-error.ver { display: block; color: #8b172b; background: #fff0f3; border: 1px solid #f4c4ce; }
.ys-acceso-ok.ver { display: block; color: #14613a; background: #eaf8f1; border: 1px solid #bde6cf; }
.ys-acceso-pie { margin: 14px 0 0; color: #8492a5; font-size: .7rem; line-height: 1.4; text-align: center; }

@keyframes ysa-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes ysa-sube { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ysa-panel { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes ysa-cue-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes ysa-cue { 0%,100% { transform:translateY(-1px); } 50% { transform:translateY(3px); } }
@media (max-width: 520px) {
  .ys-acceso { padding: 0; align-items: end; }
  .ys-acceso-card { width: 100%; max-height: 94vh; max-height:94dvh; border-radius: 23px 23px 0 0; }
  .ys-acceso-cabecera { padding: 18px 55px 16px 20px; }
  .ys-acceso-marca { margin-bottom:10px; }
  .ys-acceso-cabecera h2 { font-size: 1.28rem; }
  .ys-acceso-cabecera p { font-size:.82rem; }
  .ys-acceso-cuerpo { padding: 16px 18px max(22px,env(safe-area-inset-bottom)); }
  .ys-acceso-cuerpo { scrollbar-width:none; }
  .ys-acceso-cuerpo::-webkit-scrollbar { display:none; width:0; }
  .ys-acceso-beneficios { display:flex; overflow-x:auto; gap:6px; margin-bottom:14px; scrollbar-width:none; }
  .ys-acceso-beneficios::-webkit-scrollbar { display:none; }
  .ys-acceso-beneficios span { flex:0 0 auto; padding:7px 9px; white-space:nowrap; }
  .ys-acceso-tabs { margin-bottom:14px; }
  #ys-registro { grid-template-columns:1fr; gap:0; }
  #ys-registro > * { grid-column:1; }
  .ys-acceso-campo { margin-bottom:10px; }
  .ys-acceso-check { margin:10px 0; }
  .ys-acceso-scroll-cue { left:50%; right:auto; bottom:8px; transform:translateX(-50%); }
  .ys-acceso-scroll-cue.visible { animation:ysa-cue-in-movil .2s ease both; }
  .ys-sesion-saludo small { display:none; }
  .ys-nav-cuenta b { display:none; }
}
@keyframes ysa-cue-in-movil { from { opacity:0; transform:translate(-50%,5px); } to { opacity:1; transform:translate(-50%,0); } }
@media (prefers-reduced-motion: reduce) {
  .ys-acceso-fondo, .ys-acceso-card, .ys-acceso-panel { animation: none; }
  .ys-acceso-progreso u { transition:none; }
  .ys-acceso-scroll-cue, .ys-acceso-scroll-cue svg { animation:none !important; }
}
.cuenta-btn .mini-avatar{overflow:hidden}.cuenta-btn .mini-avatar img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}
.ys-acceso-codigo{grid-column:1/-1;padding:12px 14px;margin:8px 0 13px;background:#eef8f2;border:1px solid #b7d8c6;border-radius:12px}.ys-acceso-codigo label{display:block;font-weight:750;font-size:13px;color:#133e2b;margin-bottom:7px}.ys-acceso-codigo input{width:100%;min-height:44px;letter-spacing:.2em;font-size:18px}.ys-acceso-codigo small{display:block;color:#476353;margin:7px 0}.ys-acceso-codigo button{border:0;background:transparent;padding:5px 0;color:#164f80;font-weight:750;text-decoration:underline}
#ys-registro>.ys-acceso-phone{grid-column:1/-1}
.ys-acceso-phone-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:9px}
.ys-acceso-phone-grid>*{min-width:0;width:100%;min-height:45px;box-sizing:border-box;border:1px solid var(--ysa-borde);border-radius:10px;background:#fff;color:var(--ysa-tinta);font:inherit;font-size:.9rem}
.ys-acceso-phone-grid select{padding:9px 8px}
.ys-acceso-phone-grid input#ys-r-telefono,.ys-acceso-phone-grid input#ys-p-telefono{padding:9px 11px}
.ys-acceso-phone-grid select:focus-visible{outline:3px solid #346ba5;outline-offset:2px}
.ys-phone-hint{display:block;min-height:1.3em;margin-top:5px;color:#65778a;font-size:.75rem;line-height:1.35}
.ys-phone-hint.is-error{color:#9e2035;font-weight:700}
@media(max-width:390px){.ys-acceso-phone-grid{grid-template-columns:1fr}}