/* ═══════════════════════════════════════════════════════════
   ONBOARDING — "¿A quién quieres cuidar con MiVitae?"
   Extraído de styles.css para modularidad. Cargar después de
   styles.css en index.html (<link rel="stylesheet" href="onboarding.css">).
   ═══════════════════════════════════════════════════════════ */

/* ── Onboarding: ¿a quién quieres cuidar? ── */
.onb-screen{align-items:center;justify-content:center;min-height:100vh;padding:20px;background:linear-gradient(135deg,#daeaf8 0%,#edf4fc 40%,#e8eff8 100%);position:fixed;inset:0;z-index:60;overflow:auto;}
.onb-box{background:#fff;border-radius:24px;padding:40px 40px 30px;width:100%;max-width:640px;box-shadow:0 8px 40px rgba(24,95,165,0.13);}
.onb-logo{height:40px;display:block;margin:0 auto 24px;}
.onb-title{font-size:26px;font-weight:700;color:#16324f;text-align:center;line-height:1.2;letter-spacing:-.3px;text-wrap:balance;}
.onb-sub{font-size:14px;color:#7089a5;text-align:center;margin:10px 0 28px;}

/* Cards principales */
.onb-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.onb-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:26px 22px 22px;background:#fff;border:1.5px solid #e2ecf6;border-radius:18px;cursor:pointer;transition:box-shadow .15s,transform .1s;}
.onb-card-primary{border:2px solid #5a97d6;background:#f4f8fd;box-shadow:0 6px 22px rgba(24,95,165,.12);}
.onb-card-secondary{border:2px solid #4fb8a9;background:#f2fbf9;box-shadow:0 6px 22px rgba(15,155,142,.12);}
.onb-card-body{display:flex;flex-direction:column;align-items:center;gap:4px;}
.onb-card-chev{display:none;font-size:20px;color:#b3c2d4;flex-shrink:0;}
.onb-card-ico{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e6f1fb;color:#185fa5;font-size:26px;margin-bottom:4px;}
.onb-card-ico-teal{background:#dbf3ee;color:#0f9b8e;}
.onb-card-title{font-size:18px;font-weight:650;color:#16324f;}
.onb-card-desc{font-size:13px;color:#6a819b;line-height:1.4;max-width:230px;}
.onb-card-btn{width:100%;margin-top:14px;padding:13px;border-radius:12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:filter .15s,background .15s,border-color .15s;}
.onb-card-btn .ti{font-size:16px;}
.onb-card-btn.is-primary{background:linear-gradient(90deg,#1a50a0 0%,#00b3cc 100%);color:#fff;border:none;}
.onb-card-btn.is-primary:hover{background:linear-gradient(90deg,#153e82 0%,#0099b0 100%);}
.onb-card-btn.is-teal{background:#fff;color:#0f9b8e;border:1.5px solid #7fd0c5;}
.onb-card-btn.is-teal:hover{background:#f2fbf9;border-color:#0f9b8e;}

/* Sección "Próximamente" */
.onb-soon-divider{display:flex;align-items:center;gap:14px;margin:26px 0 16px;}
.onb-soon-divider::before,.onb-soon-divider::after{content:"";flex:1;height:1px;background:#e4ecf4;}
.onb-soon-divider span{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#98a8bd;}
.onb-soon-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.onb-mini{display:flex;align-items:center;gap:12px;padding:14px;background:#f7fafd;border:1px solid #edf2f8;border-radius:14px;}
.onb-mini-ico{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;}
.onb-mini-ico-purple{background:#f0edfa;color:#7c6bc7;}
.onb-mini-ico-blue{background:#e6f1fb;color:#185fa5;}
.onb-mini-body{display:flex;flex-direction:column;gap:2px;}
.onb-mini-title{font-size:13.5px;font-weight:700;}
.onb-mini-title.is-purple{color:#6d5cb8;}
.onb-mini-title.is-blue{color:#185fa5;}
.onb-mini-desc{font-size:12px;color:#8698ac;line-height:1.35;}

/* Línea de confianza */
.onb-trust{display:flex;align-items:flex-start;gap:10px;justify-content:center;margin-top:24px;padding-top:20px;border-top:1px solid #eef3f8;}
.onb-trust>.ti{font-size:20px;color:#0f9b8e;flex-shrink:0;margin-top:1px;}
.onb-trust-txt{display:flex;flex-direction:column;gap:2px;}
.onb-trust-txt span{font-size:12px;color:#8698ac;line-height:1.4;}
.onb-trust-txt span:first-child{color:#5a7089;font-weight:600;}

/* Paso 2 (datos de la ficha) */
.onb-back{background:none;border:none;color:#185fa5;font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0 0 16px;}
.onb-field{margin-bottom:16px;}
.onb-field label{display:block;font-size:12.5px;font-weight:600;color:#3a5169;margin-bottom:6px;}
.onb-field .onb-opt{font-weight:400;color:#98a8bd;}
.onb-field select,.onb-field input{width:100%;padding:11px 12px;border:1.5px solid #dbe6f1;border-radius:10px;font:inherit;font-size:14px;color:#16324f;background:#fff;}
.onb-field select:focus,.onb-field input:focus{outline:none;border-color:#378add;}
.onb-err{color:#c0392b;font-size:12.5px;margin-top:10px;text-align:center;min-height:16px;}

@media(min-width:520px){.onb-grid{grid-template-columns:1fr 1fr;}.onb-soon-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.onb-box{padding:32px 22px 24px;}.onb-title{font-size:21px;}}

/* Fondo con blobs sutiles + centrado scroll-safe */
.onb-box{position:relative;z-index:1;margin:auto;}
.onb-box.onb-box-wide{max-width:960px;}
.onb-screen::before,.onb-screen::after{content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:0;}
.onb-screen::before{width:300px;height:300px;background:radial-gradient(circle at 30% 30%,rgba(126,178,224,.28),transparent 70%);top:-70px;left:-70px;}
.onb-screen::after{width:360px;height:360px;background:radial-gradient(circle at 70% 70%,rgba(120,206,190,.24),transparent 70%);bottom:-90px;right:-80px;}

/* Paso 1 de 3 — Lo esencial */
.onb-step-label{text-align:center;font-size:12px;font-weight:400;letter-spacing:.4px;color:#5a7ba0;margin-bottom:8px;}
.onb-progress{width:180px;height:6px;border-radius:999px;background:#dbe7f2;margin:0 auto 20px;overflow:hidden;}
.onb-progress>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#245f97,#0e2f52);}
.onb-inner-card{background:#fff;border:1px solid #e6eef7;border-radius:16px;padding:22px;margin-bottom:20px;box-shadow:0 2px 10px rgba(16,50,79,.04);}
.onb-inner-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;}
.onb-inner-ico{flex-shrink:0;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#e6f1fb;color:#185fa5;font-size:22px;}
.onb-inner-title{font-size:16px;font-weight:650;color:#16324f;}
.onb-inner-sub{font-size:12.5px;color:#7089a5;margin-top:2px;}
.onb-e-grid{display:grid;grid-template-columns:1fr;gap:16px 22px;}
.onb-e-field{display:flex;flex-direction:column;gap:6px;}
.onb-e-field>label{font-size:12.5px;font-weight:600;color:#3a5169;}
.onb-e-field .onb-opt{font-weight:400;color:#98a8bd;}
.onb-e-inp{position:relative;}
.onb-e-inp>.ti{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9db2c9;font-size:16px;pointer-events:none;}
.onb-e-inp input,.onb-e-inp select{width:100%;padding:11px 12px 11px 38px;border:1.5px solid #dbe6f1;border-radius:10px;font:inherit;font-size:14px;color:#16324f;background:#fff;appearance:none;-webkit-appearance:none;}
.onb-e-inp select{cursor:pointer;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239db2c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
.onb-e-inp input:focus,.onb-e-inp select:focus{outline:none;border-color:#378add;box-shadow:0 0 0 3px rgba(55,138,221,.12);}
.onb-e-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;}
.onb-e-volver{background:none;border:none;color:#185fa5;font:inherit;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 4px;}
.onb-e-volver:hover{color:#0e2f52;}
.onb-e-continuar{background:linear-gradient(90deg,#1a50a0 0%,#00b3cc 100%);color:#fff;border:none;border-radius:12px;padding:13px 26px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
.onb-e-continuar:hover{background:linear-gradient(90deg,#153e82 0%,#0099b0 100%);}
.onb-trust-slim{margin-top:18px;padding-top:0;border-top:none;justify-content:center;}
@media(min-width:640px){.onb-e-grid{grid-template-columns:1fr 1fr;}}
/* ── Mobile: onboarding compacto (no toca desktop) ── */
@media(max-width:600px){
  /* Card del tamaño del contenido, centrado con el gradiente alrededor (como el login).
     margin:auto + align-items:flex-start = centra cuando cabe y hace scroll sin recortar el tope cuando no. */
  .onb-screen{align-items:flex-start;padding:16px;}
  .onb-screen::before,.onb-screen::after{display:none;}   /* fondo exterior mínimo */
  .onb-box{margin:auto;padding:30px 22px 24px;border-radius:20px;}
  .onb-logo{height:30px;margin:0 auto 14px;}
  .onb-step-label{margin-bottom:6px;}
  .onb-progress{margin:0 auto 14px;}
  .onb-title{font-size:20px;}
  .onb-sub{font-size:13px;margin:8px 0 18px;}
  /* Selección: filas compactas clicables con chevron */
  .onb-grid{gap:10px;}
  .onb-card{flex-direction:row;align-items:center;text-align:left;gap:13px;padding:14px 16px;}
  .onb-card-ico{width:40px;height:40px;font-size:19px;margin-bottom:0;}
  .onb-card-body{align-items:flex-start;flex:1;gap:2px;}
  .onb-card-desc{max-width:none;font-size:12px;line-height:1.3;}
  .onb-card-btn{display:none;}
  .onb-card-chev{display:block;}
  /* Próximamente: más compacto y discreto */
  .onb-soon-divider{margin:16px 0 10px;}
  .onb-soon-grid{gap:8px;}
  .onb-mini{padding:10px 12px;gap:10px;}
  .onb-mini-ico{width:32px;height:32px;font-size:16px;}
  .onb-mini-desc{font-size:11.5px;}
  /* Disclaimer de seguridad más discreto */
  .onb-trust{margin-top:16px;padding-top:12px;}
  .onb-trust>.ti{font-size:16px;}
  .onb-trust-txt span{font-size:10.5px;line-height:1.35;}
  .onb-trust-txt span:first-child{font-size:11px;}
  /* Formulario más denso */
  .onb-inner-card{padding:16px;margin-bottom:16px;}
  .onb-inner-head{margin-bottom:14px;gap:10px;}
  .onb-inner-ico{width:38px;height:38px;font-size:19px;}
  .onb-e-grid{gap:12px 14px;}
  .onb-e-field{gap:4px;}
  .onb-e-field>label,.onb-field label{font-size:12px;margin-bottom:4px;}
  .onb-e-inp input,.onb-e-inp select{padding:10px 12px 10px 36px;}
  .onb-e-inp>.ti{left:11px;font-size:15px;}
  .onb-field select,.onb-field input{padding:10px 12px;}
  .onb-trust-slim{display:none;}
  /* CTA como fila normal al pie del contenido del card (el card es content-sized, como el login) */
  .onb-e-actions{flex-direction:row;align-items:center;gap:10px;margin-top:18px;}
  .onb-e-volver{flex-shrink:0;width:auto;padding:8px 2px;font-size:13px;}
  .onb-e-continuar{flex:1;justify-content:center;padding:13px;}
}