/* Clynia — cuestionario multipaso (móvil primero). Prefijo .cq = Clynia Questionnaire */ :root{ --bg:#f6f4ef; --surface:#fff; --ink:#1c2421; --muted:#586460; --green:#437066; --green-d:#365b52; --line:#e6e1d7; --soft:#efece4; --red:#b3261e; --radius:16px; --maxw:560px; /* Las MISMAS caras y los MISMOS colores que el resto de clynia.es (styles.css). Las cinco paginas que cargan este CSS ya piden Fraunces y Hanken Grotesk en su , asi que no se anade ni una peticion. Aqui ponia 'Lora' y 'Raleway', que no las carga ninguna de las cinco: los titulares caian a Georgia y el cuerpo a la letra del sistema, y el cuestionario parecia de otra empresa distinta de la landing de la que acaba de venir el paciente. Raleway ademas esta prohibida. */ --display:"Fraunces",Georgia,serif; --text:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } *{box-sizing:border-box} html,body{margin:0;padding:0} body.cq-body{ background:var(--bg); color:var(--ink); font-family:var(--text); -webkit-font-smoothing:antialiased;line-height:1.5; } .cq{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column} /* Barra superior con progreso */ .cq__bar{position:sticky;top:0;z-index:5;background:var(--bg); display:flex;align-items:center;gap:12px; padding:calc(12px + env(safe-area-inset-top)) 16px 12px} .cq__back{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-size:20px;line-height:1; width:40px;height:40px;border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:none;transition:.15s} .cq__back:hover{border-color:var(--green);color:var(--green)} .cq__back:disabled{opacity:.35;cursor:default} .cq__progress{flex:1;height:6px;background:var(--soft);border-radius:99px;overflow:hidden} .cq__progress i{display:block;height:100%;width:0;background:var(--green);border-radius:99px;transition:width .35s ease} .cq__brand{height:20px;width:auto;display:block;flex:none} /* Escenario */ .cq__stage{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:10px 20px 16px} .cq__step{animation:cqin .35s ease both} @keyframes cqin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .cq__eyebrow{color:var(--green);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.07em;margin:6px 0 8px} .cq__q{font-family:var(--display);font-weight:500;font-size:25px;line-height:1.25;margin:0 0 8px;letter-spacing:-.2px} .cq__help{color:var(--muted);margin:0 0 18px;font-size:15px} /* Letra pequena DEBAJO del campo (la pinta el motor si el paso trae `note`). Justificada y con guiones, como el resto de textos largos de la casa: en una columna de movil sin partir palabras quedan rios de espacio. */ .cq__note{margin:18px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted); text-align:justify;hyphens:auto;-webkit-hyphens:auto} .cq__note strong{color:var(--ink);font-weight:600} .cq__field{display:flex;flex-direction:column;gap:10px;margin-top:4px} /* Inputs */ .cq__input{width:100%;font:inherit;font-size:17px;padding:15px 16px;border:1.5px solid var(--line); border-radius:14px;background:var(--surface);color:var(--ink);-webkit-appearance:none} .cq__input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(67,112,102,.12)} textarea.cq__input{min-height:120px;resize:vertical} .cq__suffix{display:flex;align-items:center;gap:10px} .cq__suffix span{color:var(--muted);font-size:15px} /* Fecha por partes (día / mes / año). El día y el año van centrados; el mes es un select con su flecha propia (el reset de .cq__input quita la nativa y sin ella no parece desplegable). */ .cq__date{display:grid;grid-template-columns:minmax(64px,86px) 1fr minmax(88px,110px);gap:10px} .cq__date label{display:flex;flex-direction:column;gap:6px;min-width:0} .cq__date label>span{font-size:13px;color:var(--muted)} .cq__date input.cq__input{padding:15px 10px;text-align:center} .cq__date select.cq__input{padding:15px 30px 15px 12px;text-overflow:ellipsis;white-space:nowrap; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a756a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center;background-size:16px} /* Opciones (single / multi / yesno) */ .cq__opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;font-size:16px; padding:15px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink); cursor:pointer;transition:border-color .15s,background .15s} .cq__opt:hover{border-color:#cfcabd} .cq__opt.is-sel{border-color:var(--green);background:#eef3f1} .cq__opt .tick{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;transition:.15s} .cq__opt.multi .tick{border-radius:6px} .cq__opt.is-sel .tick{border-color:var(--green);background:var(--green)} .cq__opt.is-sel .tick::after{content:"";width:8px;height:8px;border-radius:inherit;background:#fff} /* Listas largas (contraindicaciones y cardiometabolicas tienen 16 opciones): se compactan para que la ultima ("Ninguna") no quede enterrada al final del scroll. Limites que NO se cruzan: 44px de alto minimo (objetivo tactil) y 16px de texto (legibilidad en movil). Solo se recorta el relleno, la separacion y el tick, que es de donde sobra. */ .cq__field{gap:7px} .cq__opt{padding:11px 14px;min-height:44px} .cq__opt .tick{width:20px;height:20px} .cq__stage{padding-bottom:26px} /* Consentimientos */ .cq__consent{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid var(--line); border-radius:14px;background:var(--surface);font-size:14px;color:var(--ink);cursor:pointer} .cq__consent input{margin:2px 0 0;width:20px;height:20px;flex:none;accent-color:var(--green)} .cq__consent a{color:var(--green)} /* Subida de fichero */ .cq__file{display:flex;flex-direction:column;gap:8px} .cq__file label{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;border:1.5px dashed var(--line); border-radius:14px;background:var(--surface);color:var(--green);font-weight:600;cursor:pointer} .cq__file input{position:absolute;width:1px;height:1px;opacity:0} .cq__file .name{font-size:14px;color:var(--muted)} /* Planes */ /* Tira de garantias con icono, para el paso de planes: sustituye al parrafo largo de avisos que habia antes de las tarjetas. Va toda con y no con