/* Hugo's Beauty Project — pantallas nuevas del test (fase 2):
   nombre + email, y el resultado en el orden de logica-de-decision.md §10.
   Sólo usa los colores del tema (css/test-tema.css). La dirección visual
   definitiva llega en la fase 3. */

/* Iconos propios a trazo */
.ic{width:20px; height:20px; flex:none; vertical-align:middle}
.ic-s{width:16px; height:16px}

/* Pantalla de nombre y email */
.campo-l{font-weight:700; color:var(--ink)}
.campo-l .opcional{font-weight:500; color:var(--muted)}
.campo{font:inherit; font-size:1.05rem; padding:15px 18px; border-radius:var(--r); border:2px solid var(--line); background:#fff; color:var(--ink)}
.campo:focus{outline:none; border-color:var(--coral)}
.casilla{font-weight:500; font-size:.93rem}
.casilla a{color:inherit; text-decoration:underline; text-underline-offset:2px}

/* 1 · Lo que he entendido */
.res-hero h1{font-size:clamp(1.6rem,5.4vw,2.4rem); line-height:1.15; max-width:22ch}
.chips-perfil{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.chip-perfil{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:var(--claro);
  font:inherit; font-size:.9rem; font-weight:600; cursor:default}
.chip-perfil .ic{color:var(--menta)}
.chip-perfil .chip-edit{display:none}
.chips-perfil.editable .chip-perfil:not([disabled]){cursor:pointer; border-color:var(--menta)}
.chips-perfil.editable .chip-perfil:not([disabled]) .chip-edit{display:inline-flex}
.chips-perfil.editable .chip-perfil:not([disabled]):hover{background:var(--menta); color:var(--ink)}
.chips-perfil.editable .chip-perfil:not([disabled]):hover .ic{color:var(--ink)}
.chip-perfil[disabled]{opacity:.8}
.nota-perfil{display:flex; gap:8px; align-items:flex-start; margin-top:12px; font-size:.88rem; color:var(--claro-2); max-width:60ch}
.nota-perfil .ic{margin-top:2px; color:var(--menta)}
.res-hero .btn-editar{display:inline-flex; align-items:center; gap:8px; margin-top:18px; color:var(--claro); border-color:rgba(255,255,255,.4); padding:10px 16px; font-size:.92rem}
.pista-editar{margin-top:10px; font-size:.88rem; color:var(--claro-2)}
.enviado{display:flex; gap:8px; align-items:center; margin-top:14px; font-size:.9rem; color:var(--menta)}

/* 2 · Aviso arriba: una frase, tranquila, sin cerrar */
.aviso-top{display:flex; gap:12px; align-items:flex-start; background:#FBF3E2; border:1px solid #EFD9A8; color:var(--ink);
  border-radius:var(--r); padding:16px 18px}
.aviso-top .ic{color:#9A6B12; margin-top:2px}
.aviso-top p + p{margin-top:6px}

/* Bloques numerados: más editorial, menos tarjeta */
.bloque{padding-top:22px; border-top:1px solid var(--line)}
.bloque-h{display:flex; align-items:baseline; gap:12px; font-size:1.3rem; margin-bottom:12px}
.bloque-n{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.8rem; color:var(--coral); font-weight:700}
.bloque > p{max-width:62ch}
.bloque > p + p{margin-top:8px}

.objetivos{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px}
.objetivos li{display:flex; gap:10px; align-items:center; font-weight:700}
.objetivos .ic{color:var(--coral)}

.lista-ing{display:flex; flex-direction:column; gap:14px}
.ing-cab{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.ing-dosis{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85rem; background:var(--coral-soft); color:var(--plum-2); padding:2px 8px; border-radius:6px}
.ing-fila p{margin-top:4px; color:var(--muted); max-width:62ch}
.ing-fila.no .ing-cab b{text-decoration:line-through; text-decoration-color:var(--muted)}

.tenido{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.tenido li{display:flex; gap:10px; align-items:flex-start}
.tenido .ic{color:var(--coral); margin-top:4px}

/* 7 · Tu rutina: los pasos, sin productos */
.momentos{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
@media (max-width:620px){ .momentos{grid-template-columns:1fr} }
.momento-c{background:var(--card); border-radius:var(--r); padding:16px 18px; box-shadow:var(--sombra)}
.momento-c h3{display:flex; gap:8px; align-items:center; font-size:1rem; margin-bottom:10px}
.momento-c h3 .ic{color:var(--coral)}
.pasos{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.pasos li::marker{color:var(--muted); font-weight:700}
.paso-nom{font-weight:600}
.paso-ing{display:block; font-size:.88rem; color:var(--muted)}
.bloque .plegable + .plegable{margin-top:10px}

/* 8 · Productos: "Cumple X de Y" */
.total{margin-bottom:12px}
.rango{letter-spacing:.05em}
.cumple{margin-top:12px; border-top:1px solid var(--line); padding-top:10px}
.cumple > summary{cursor:pointer; font-weight:700; font-size:.92rem; color:var(--plum-2)}
.cumple.falta > summary{color:#8A4B12}
.cumple ul{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:.9rem}
.cumple li{display:flex; gap:8px; align-items:flex-start}
.cumple li .ic{margin-top:2px}
.cumple li.si .ic{color:var(--ok)}
.cumple li.no .ic{color:#B03F1C}
.cumple li.info{color:var(--muted)}
.rp-hueco b{display:block; margin-bottom:4px}