:root{
  --naranja-1:#FC5155; --naranja-2:#FF9E15;          /* degradado actual de las páginas públicas */
  --azul:#2E7DE1; --azul-700:#1F5FBF; --azul-50:#EAF2FD;
  --verde:#1E9E48; --rojo:#D9443C; --rojo-50:#FDEDEC;
  --tinta:#1F2A37; --gris-700:#4B5563; --gris-500:#6B7280; --gris-400:#9CA3AF;
  --gris-300:#D6DBE1; --gris-100:#F3F5F7; --fondo:#F6F7F9;
  --radio:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:ProximaNovaRg,Helvetica,Arial,sans-serif;color:var(--tinta);background:var(--fondo);font-size:16px;line-height:1.45}
button,input,select{font:inherit;color:inherit}
a{color:var(--azul-700)}
:focus-visible{outline:3px solid #7FB0F5;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Registro de usuarios: estilos del rediseño (prototipo registro_usuario_propuesta.html). La fuente ProximaNovaRg viene de 2018/css/fonts/fonts-digisalud.css */
/* ---------- barra superior ---------- */
.topbar{background:linear-gradient(90deg,var(--naranja-1),var(--naranja-2) 83%);color:#fff;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:relative}
.logo{font-size:28px;font-weight:800;letter-spacing:-.01em;position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px}
.logo img{height:34px;display:block}
.conn{margin-left:auto;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.7);color:#fff;border-radius:99px;padding:6px 12px;font-weight:700;font-size:14px;cursor:pointer}
.conn:hover{background:rgba(255,255,255,.25)}

/* ---------- diseño en dos columnas ---------- */
.layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:calc(100vh - 60px)}
.brand{background:linear-gradient(160deg,#F6A21C 0%,#EE8B1E 55%,#E07418 100%);color:#fff;padding:56px 48px;display:flex;flex-direction:column;justify-content:center;gap:28px;position:relative;overflow:hidden}
.brand::after{content:"";position:absolute;right:-120px;bottom:-140px;width:380px;height:380px;border-radius:50%;border:60px solid rgba(255,255,255,.12)}
.brand h1{font-size:44px;line-height:1.05;font-weight:800;letter-spacing:-.02em;max-width:420px}
.brand p.lead{font-size:18px;opacity:.95;max-width:420px}
.steps{list-style:none;display:grid;gap:14px;max-width:420px;counter-reset:s}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;counter-increment:s}
.steps li::before{content:counter(s);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.7);display:grid;place-items:center;font-weight:800}
.steps b{display:block;font-size:17px}.steps span{font-size:14px;opacity:.9}
.mock{background:#fff;border-radius:14px;box-shadow:0 18px 40px rgba(120,50,0,.25);padding:16px;width:260px;color:var(--tinta);transform:rotate(-3deg)}
.mock__t{font-size:12px;font-weight:800;color:#1F4580}
.mock__row{display:flex;gap:12px;align-items:center;margin-top:10px}
.mock__ring{width:64px;height:64px;border-radius:50%;background:conic-gradient(#2EAD63 0 72%,#F2C230 0 86%,#EE8B32 0 95%,#D9443C 0);display:grid;place-items:center;flex:none}
.mock__ring::after{content:"";width:40px;height:40px;border-radius:50%;background:#fff}
.mock__bars{flex:1;display:grid;gap:6px}
.mock__bars i{display:block;height:8px;border-radius:9px}
.social{display:flex;gap:10px;align-items:center;font-weight:700;font-size:14px;opacity:.95}

.form-side{padding:40px 24px 56px;display:flex;justify-content:center}
.form-wrap{width:100%;max-width:560px}
.form-head{display:flex;align-items:center;gap:16px}
.form-head h2{font-size:28px;font-weight:800;line-height:1.15}
.form-head p{color:var(--gris-500);margin-top:4px;font-size:15px}

/* foto opcional */
.photo{margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--gris-500);flex:none}
.photo label{width:72px;height:72px;border-radius:50%;background:var(--gris-100);border:2px dashed var(--gris-300);display:grid;place-items:center;cursor:pointer;overflow:hidden;color:var(--gris-400)}
.photo label:hover{border-color:var(--azul)}
.photo img{width:100%;height:100%;object-fit:cover}

/* resumen de errores */
.err-summary{display:none;margin-top:20px;border:2px solid var(--rojo);background:var(--rojo-50);border-radius:10px;padding:12px 14px}
.err-summary.show{display:block}
.err-summary h3{font-size:15px;color:#A4302A}
.err-summary ul{margin:6px 0 0 18px;font-size:14px}

/* secciones */
fieldset{border:0;margin-top:26px}
legend{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gris-500);margin-bottom:12px;display:flex;align-items:center;gap:8px}
legend .n{width:22px;height:22px;border-radius:50%;background:var(--azul-50);color:var(--azul-700);display:inline-grid;place-items:center;font-size:12px}
.row{display:grid;gap:14px}
.row-2{grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label,.field .lbl{font-weight:700;font-size:14.5px}
.field .opt{font-weight:500;color:var(--gris-500);font-size:13px}
.hint{font-size:13px;color:var(--gris-500)}
.input,.select{width:100%;height:48px;border:1.5px solid var(--gris-300);border-radius:10px;background:#fff;padding:0 14px;font-size:16px;transition:border-color .15s,box-shadow .15s}
.select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px}
.input:hover,.select:hover{border-color:var(--gris-400)}
.input:focus,.select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(46,125,225,.18)}
.field.invalid .input,.field.invalid .select{border-color:var(--rojo)}
.field.valid .input{border-color:#9FD5B2}
.msg{display:none;font-size:13.5px;color:#A4302A;font-weight:600;align-items:center;gap:6px}
.field.invalid .msg{display:flex}
.date{display:grid;grid-template-columns:1fr 1.6fr 1.2fr;gap:10px}
.tel{display:grid;grid-template-columns:110px 1fr;gap:10px}
.pass{position:relative}
.pass .input{padding-right:52px}
.eye{position:absolute;right:6px;top:6px;width:40px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--gris-500);background:none;border:0;cursor:pointer}
.eye:hover{background:var(--gris-100)}
.rules{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:13px;color:var(--gris-500);margin-top:2px}
.rules li{display:flex;align-items:center;gap:6px}
.rules li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--gris-300);flex:none}
.rules li.ok{color:#187A3A}
.rules li.ok::before{border-color:var(--verde);background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat}
.meter{height:6px;border-radius:99px;background:var(--gris-100);overflow:hidden;margin-top:4px}
.meter i{display:block;height:100%;width:0;border-radius:99px;transition:width .2s,background .2s}

details.more{margin-top:22px;border:1.5px solid var(--gris-300);border-radius:var(--radio);background:#fff}
details.more summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;display:flex;align-items:center;gap:10px}
details.more summary::-webkit-details-marker{display:none}
details.more summary small{font-weight:500;color:var(--gris-500)}
details.more summary .chev{margin-left:auto;transition:transform .2s;color:var(--gris-500)}
details.more[open] summary .chev{transform:rotate(180deg)}
details.more .inner{padding:4px 16px 4px}

.check{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;margin-top:14px;font-size:15px}
.check input{width:22px;height:22px;margin-top:1px;accent-color:var(--azul)}
.check .hint{display:block;margin-top:2px}
.check.invalid input{outline:2px solid var(--rojo);outline-offset:1px}
.check.invalid .msg{display:flex;margin-top:4px}

.submit{margin-top:24px;width:100%;height:52px;border:0;border-radius:99px;background:var(--azul);color:#fff;font-weight:800;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.submit:hover{background:var(--azul-700)}
.submit[aria-busy="true"]{opacity:.75;cursor:progress}
.login{text-align:center;margin-top:16px;font-size:15px;color:var(--gris-700)}
.req-note{font-size:13px;color:var(--gris-500);margin-top:18px}

/* éxito */
.success{display:none;text-align:center;padding:48px 8px}
.success.show{display:block}
.success .ico{width:72px;height:72px;border-radius:50%;background:#E3F4EA;color:var(--verde);display:grid;place-items:center;margin:0 auto 14px}
.success h2{font-size:24px}
.success p{color:var(--gris-700);margin-top:6px}

/* modal de conexión */
dialog{border:0;border-radius:16px;padding:0;width:min(440px,calc(100% - 32px));box-shadow:0 24px 60px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(15,23,42,.45)}
.dlg{padding:22px}
.dlg h3{font-size:19px}
.dlg p{color:var(--gris-500);font-size:14px;margin-top:4px}
.opt-card{display:grid;grid-template-columns:22px 1fr;gap:10px;border:1.5px solid var(--gris-300);border-radius:10px;padding:12px;margin-top:10px;cursor:pointer}
.opt-card:has(input:checked){border-color:var(--azul);background:var(--azul-50)}
.opt-card input{accent-color:var(--azul);width:18px;height:18px;margin-top:2px}
.dlg .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.btn{border:0;border-radius:99px;padding:10px 18px;font-weight:700;cursor:pointer}
.btn--pri{background:var(--azul);color:#fff}.btn--sec{background:var(--gris-100)}

/* el panel de marca queda fijo mientras se recorre el formulario (escritorio) */
@media (min-width:1024px){.brand{position:sticky;top:0;height:calc(100vh - 60px)}}

/* panel con la imagen original (r-usuario.jpg, cuadrada, ya incluye el texto); el fondo naranja rellena lo que sobre */
.brand.brand--img{padding:0;gap:0;align-items:center;justify-content:center;background:linear-gradient(180deg,#F0A400 0%,#EB8F0A 100%)}
.brand.brand--img::after{display:none}
.brand--img img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain}
@media (max-width:1023px){
  .brand.brand--img{padding:0}
  .brand--img img{width:auto;max-width:100%;max-height:340px}
}
@media (max-width:560px){
  .brand--img img{max-height:260px}
}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .layout{grid-template-columns:1fr}
  .brand{padding:28px 20px;gap:14px}
  .brand h1{font-size:30px}
  .brand p.lead,.mock,.social{display:none}
  .steps{grid-template-columns:repeat(3,1fr);max-width:none;gap:10px}
  .steps li{grid-template-columns:1fr;justify-items:start;gap:6px}
  .steps li::before{width:30px;height:30px;font-size:14px}
  .steps b{font-size:15px}.steps span{font-size:12.5px}
  .brand::after{width:220px;height:220px;right:-80px;bottom:-100px;border-width:36px}
  .form-side{padding:28px 16px 48px}
}
@media (max-width:560px){
  .logo{position:static;transform:none;font-size:22px}.logo img{height:28px}
  .conn span{display:none}
  .brand h1{font-size:26px}
  .steps span{display:none}
  .form-head h2{font-size:24px}
  .row-2{grid-template-columns:1fr;gap:0}
  .date{grid-template-columns:1fr 1.5fr 1.2fr;gap:8px}
  .rules{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* mensaje de error por campo: icono + texto (el texto lo pone el JS en .msg-t) */
.msg-t:empty{display:none}
/* campo trampa anti-bots: fuera de pantalla (no display:none, que los bots suelen detectar) */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.field.invalid .msg,.check.invalid .msg{display:flex}
.check .msg{display:none}

/* resumen de errores con foco y enlaces a cada campo */
.err-summary a{color:#A4302A;font-weight:600}
.err-summary strong{font-size:15px;color:#A4302A}

/* aviso modal (reemplaza los popups del tema anterior) */
#dlgAviso .dlg h3{margin-bottom:4px}
.link-dialog{background:none;border:0;padding:0;color:var(--azul-700);text-decoration:underline;cursor:pointer;font:inherit}
.opt-card .input{margin-top:8px;height:42px}