/* app/assets/css/onboarding.css -- app/scan/create-account.php. Fuentes +2px (2026-09-24). */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100%;background:#f2f2f5;font-family:'Nunito',sans-serif;color:#5a3050;}
h1,h2{font-family:'DM Serif Display',serif;font-weight:400;margin:0;}
.app{width:100%;min-height:100vh;display:flex;justify-content:center;}
.phone{width:100%;max-width:420px;min-height:100vh;background:#fff;display:flex;flex-direction:column;}
/* El logo ahora se centra SIEMPRE en la barra superior (antes, con
   .dots oculto con visibility:hidden en los pasos 0/5/6, el
   justify-content:space-between de abajo dejaba el logo pegado a la
   izquierda, viéndose descentrado -- pedido explícito del cliente,
   2026-09-22: "debe verse centrado"). Los puntos de progreso ahora se
   posicionan aparte, a la derecha, sin afectar el centrado del logo. */
/* min-height subido junto con el logo (antes 74px, para el logo de
   70px) -- pedido explícito del cliente, 2026-09-29. */
.top{padding:16px 24px 0;position:relative;display:flex;align-items:center;justify-content:center;min-height:100px;}
/* 96px -- pedido explícito del cliente, 2026-09-29: el logo debe verse
   aún más grande en toda la app (antes 26px, luego 40px, luego 70px,
   ver el mismo comentario en shared.css). */
.top-logo img{display:block;height:96px;margin:0 auto;}
.dots{display:flex;gap:6px;position:absolute;right:24px;top:50%;transform:translateY(-50%);}
.dot{width:20px;height:4px;border-radius:2px;background:#f0d0e8;}
.dot.active{background:#c45a8a;}
.content{flex-grow:1;display:flex;flex-direction:column;padding:24px;}
.screen{display:none;flex-direction:column;gap:18px;}
.screen.visible{display:flex;}
.back-link{font-size:15px;color:#a88baf;align-self:flex-start;background:none;border:none;cursor:pointer;padding:0;font-family:inherit;}
.back-link:hover{color:#c45a8a;}
.hero{flex-grow:1;justify-content:center;align-items:center;text-align:center;gap:18px;padding:16px 0;}
/* Mismo criterio que .hero: centra verticalmente el diagnóstico + CTA
   dentro del espacio libre de la pantalla -- antes quedaba pegado arriba
   dejando un vacío grande abajo en teléfonos altos (pedido explícito del
   cliente, 2026-09-22: "debe verse centrado"). */
.reveal-screen{flex-grow:1;justify-content:center;}
.hero-icon{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#f8d7e8,#e8d0f8);display:flex;align-items:center;justify-content:center;font-size:40px;}
.hero h1{font-size:30px;line-height:1.2;color:#7a4560;}
.hero p{font-size:17px;line-height:1.55;color:#a88baf;margin:0;max-width:320px;}
.hero .fine{font-size:14px;color:#b090a8;}
.cta-btn{width:100%;padding:15px 22px;border:none;border-radius:50px;background:linear-gradient(135deg,#e87aad,#c45a8a);color:#fff;font-size:18px;font-weight:700;font-family:'Nunito',sans-serif;cursor:pointer;transition:opacity .15s ease, transform .15s ease;letter-spacing:.3px;}
.cta-btn:hover{opacity:.92;}
.cta-btn:active{transform:scale(0.98);}
.cta-btn:disabled{background:#f0d0e8;color:#c9a0ba;cursor:not-allowed;}
h2.q-title{font-size:24px;line-height:1.3;color:#7a4560;}
.q-sub{font-size:16px;color:#a88baf;margin:0;}
.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.options.stack{grid-template-columns:1fr;}
.opt-btn{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-radius:14px;border:1.5px solid #f0d0e8;background:#fff8fc;cursor:pointer;text-align:left;min-height:44px;transition:border-color .15s ease, background .15s ease;font-family:'Nunito',sans-serif;}
.opt-btn:hover{border-color:#c45a8a;}
.opt-btn.selected{border-color:#c45a8a;background:#fff0f8;}
.opt-btn.row{flex-direction:row;align-items:center;gap:12px;}
.opt-emoji{font-size:26px;}
/* Íconos "profesionales" de la Pregunta 1 (arrugas/grasa/poros/acné/manchas/
   puntos negros) -- pedido explícito del cliente, 2026-09-29: reemplazan los
   emojis por Material Symbols Outlined (mismo set ya usado en el resto de
   /app/, ver shared.css) dentro de una "chip" circular de marca, en vez del
   glifo suelto. Q2/Q3 siguen usando emoji normal (.opt-emoji sin esta clase). */
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;vertical-align:middle;}
.opt-emoji.material-symbols-outlined{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#fce4f0;color:#c45a8a;font-size:22px;flex-shrink:0;}
.opt-label{font-size:16px;font-weight:700;color:#5a3050;line-height:1.25;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:15px;font-weight:700;color:#c45a8a;text-transform:uppercase;letter-spacing:.5px;}
.field input{padding:13px 14px;border-radius:12px;border:1.5px solid #f0d0e8;font-family:'Nunito',sans-serif;font-size:18px;color:#5a3050;background:#fff8fc;width:100%;}
.field input:focus{outline:none;border-color:#c45a8a;}
.field-hint{font-size:14px;color:#a88baf;margin-top:-2px;}
/* .legal-fine ya NO se usa en app/scan/create-account.php (pedido
   explícito del cliente, 2026-09-24: se reemplazó por la casilla real
   .onboarding-consent-row de abajo) -- se deja definida por si se
   necesita en otro lado más adelante. */
.legal-fine{font-size:14px;color:#a88baf;line-height:1.5;margin-top:-4px;}
.legal-fine a{color:#c45a8a;font-weight:700;text-decoration:underline;}
.fine-center{font-size:14px;color:#a88baf;text-align:center;}
/* Cuadro de consentimiento (nombre+correo, paso 4) -- mismo criterio
   visual que .consent-modal-card/.consent-modal-check-row de scan.css,
   adaptado al tema/tamaño de esta página. Va justo arriba de .cta-btn y
   gatea el botón junto con nombre/correo (ver onFormInput() en
   onboarding.js). Ahora es columna (antes era una sola fila) porque
   además de la casilla lleva arriba el resumen corto del aviso "solo
   cosmético" (pedido explícito del cliente, 2026-09-24). */
.onboarding-consent-row{display:flex;flex-direction:column;gap:10px;background:#fff8fc;border:1.5px solid #f0d0e8;border-radius:12px;padding:12px 14px;margin-top:-4px;}
.onboarding-consent-disclaimer{font-size:13px;color:#a88baf;line-height:1.5;}
.onboarding-consent-check-row{display:flex;align-items:flex-start;gap:10px;}
.onboarding-consent-check-row input[type="checkbox"]{width:20px;height:20px;flex-shrink:0;margin-top:1px;accent-color:#c45a8a;cursor:pointer;}
.onboarding-consent-check-row label{font-size:14px;color:#5a3050;line-height:1.5;cursor:pointer;}
.onboarding-consent-check-row a{color:#c45a8a;font-weight:700;text-decoration:underline;}
.store-error{font-size:16px;color:#a83030;background:#fdeaea;border:1px solid #f0c0c0;border-radius:12px;padding:12px 14px;line-height:1.5;}
.loading{flex-grow:1;justify-content:center;align-items:center;gap:26px;text-align:center;}
.spinner{width:46px;height:46px;border-radius:50%;border:4px solid #f8d7e8;border-top-color:#c45a8a;animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.loading h2{font-size:22px;color:#7a4560;}
.checklist{display:flex;flex-direction:column;gap:14px;width:100%;max-width:280px;text-align:left;}
.check-item{display:flex;align-items:center;gap:12px;}
.badge{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#f0d0e8;color:#fff;font-size:14px;}
.badge.active{background:#e87aad;}
.badge.done{background:#c45a8a;}
.check-label{font-size:16px;color:#a88baf;}
.check-label.on{color:#5a3050;}
.diagnosis{background:linear-gradient(135deg,#fff0f8,#f5f0ff);border:1.5px solid #eed0e8;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:8px;}
.diagnosis .eyebrow{font-size:14px;font-weight:700;color:#c45a8a;text-transform:uppercase;letter-spacing:.5px;}
.diagnosis .headline{font-size:19px;font-weight:700;line-height:1.4;color:#7a4560;font-family:'DM Serif Display',serif;}
.diagnosis .body{font-size:16px;line-height:1.5;color:#7a5570;}
.reveal-note{font-size:15px;color:#a88baf;line-height:1.5;text-align:center;}

/* ── Título principal del paso 1 (2026-09-30) ── */
.intro-title{font-family:'DM Serif Display',serif;font-size:30px;line-height:1.2;font-weight:400;color:#5a3050;text-align:center;margin:0 0 1.4rem;}
.intro-title span{color:#c45a8a;font-style:italic;}

/* Asterisco de campo obligatorio (teléfono del registro, pedido explícito del cliente, 2026-10-05). */
.required-mark{color:#d93a4a;font-weight:800;}
/* Aviso de correo no válido debajo del campo (2026-10-06). */
.field-hint.is-error{color:#c0392b;font-weight:600;}
.field input.is-invalid{border-color:#e08a80;background:#fff6f5;}
.field-hint a.email-suggestion{color:#c45a8a;font-weight:700;text-decoration:underline;cursor:pointer;}