/* 04_mapa_corporal_emociones.html: piezas propias de esta herramienta. */

.container { max-width:700px;margin:0 auto; }
.screen.on { display:block; }
h1 { font-size:22px;font-weight:500;font-family:var(--font-display);color:var(--color-chocolate);line-height:1.3;margin-bottom:.5rem; }
.subtitle { font-size:15.5px;color:var(--color-mocha);line-height:1.6;margin-bottom:1.5rem; }
.wheel-label { font-size:12px;color:var(--color-mocha);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.75rem; }
.wheel-grid { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.25rem; }
.emo-chip { padding:8px 14px;border-radius:0;border:1.5px solid var(--color-taupe);cursor:pointer;font-size:14.5px;font-weight:500;background:var(--color-beige);color:var(--color-chocolate);font-family:inherit;transition:transform .1s; }
.emo-chip:hover { transform:scale(1.04); }
.emo-chip.active { border-width:2px; }
.body-section { display:flex;gap:1.5rem;align-items:flex-start;margin-bottom:1.25rem; }
.zone { cursor:pointer;fill:var(--color-taupe);stroke:var(--color-terracotta);stroke-width:1;transition:fill .2s,stroke .2s; }
.zone:hover { opacity:.82; }
.zone-label-panel { flex:1;display:flex;flex-direction:column;padding-top:.5rem; }
.zone-hint { font-size:14.5px;color:var(--color-mocha);line-height:1.6;font-style:italic;margin-bottom:1rem; }
.marked-list { display:flex;flex-direction:column;gap:6px; }
.marked-item { display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--color-mocha); }
.marked-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
.nav-row { display:flex;gap:10px;flex-wrap:wrap;margin-top:.5rem; }
.btn { background:transparent;border:.5px solid var(--color-taupe);border-radius:0;padding:10px 20px;font-size:14.5px;cursor:pointer;font-family:inherit;color:var(--color-mocha); }
.progress-row { display:flex;align-items:center;gap:10px;margin-bottom:1.25rem; }
.progress-dots { display:flex;gap:6px; }
.pdot { width:6px;height:6px;border-radius:50%;background:var(--color-taupe);transition:background .2s; }
.pdot.done { background:var(--color-olive); }
.pdot.current { background:var(--color-chocolate); }
.summary-grid { display:flex;flex-direction:column;gap:10px;margin:1rem 0; }
.sum-card { background:var(--color-beige);border:.5px solid var(--color-taupe);border-radius:0;padding:.875rem 1rem;display:flex;gap:12px;align-items:flex-start; }
.sum-dot { width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:3px; }
.sum-emo { font-size:15.5px;font-weight:500;color:var(--color-chocolate);margin-bottom:2px; }
.sum-zones { font-size:12px;color:var(--color-mocha); }
.mirror-box { border-left:3px solid var(--color-terracotta);padding:.875rem 1.125rem;background:var(--color-beige);border-radius:0;margin:1.25rem 0; }
.mirror-box p { font-size:16.5px;color:var(--color-chocolate);line-height:1.8;font-family:var(--font-display); }
.firma { font-size:12px;color:var(--color-mocha);margin-top:1.5rem;letter-spacing:.04em; }
.restart-btn { background:none;border:none;font-size:12px;color:var(--color-mocha);cursor:pointer;text-decoration:underline;margin-top:.75rem;font-family:inherit; }