/* Semáforo: el objeto cuelga a la izquierda, las filas se alinean con cada luz, la bandeja guarda las pegatinas. */
.sem { --lamp: 108px; --c0: #D2533A; --c1: #EBA83F; --c2: #4E8F5E; --t0: #C6492F; --t1: #A86A10; --t2: #3E7A4D;
  display: grid; grid-template-columns: 170px minmax(0, 1fr) 300px; gap: 0 28px; align-items: stretch; position: relative; }
body.session .sem { --lamp: calc(108px * var(--s)); grid-template-columns: 210px minmax(0, 1fr) 320px; }
.sem-light { position: relative; display: flex; flex-direction: column; align-items: center; }
.sem-pole { width: 18px; height: 48px; background: var(--tinta); }
.sem-box { flex: 1; width: calc(var(--lamp) + 34px); background: var(--tinta); border-radius: 999px; display: grid; grid-template-rows: repeat(3, 1fr); justify-items: center; align-items: center; padding: 22px 0; }
.lamp { width: var(--lamp); height: var(--lamp); border-radius: 50%; border: 0; cursor: pointer; position: relative; display: grid; place-items: center; transition: transform .45s var(--spring), filter .3s, box-shadow .4s var(--ease); opacity: .34; }
.lamp svg { width: 46%; height: 46%; }
.lamp[data-lv="0"] { background: var(--c0); } .lamp[data-lv="1"] { background: var(--c1); } .lamp[data-lv="2"] { background: var(--c2); }
.lamp::before { content: ''; position: absolute; inset: -12px -10px auto; height: 58%; border-radius: 999px 999px 0 0; border: 9px solid #34444F; border-bottom: 0; pointer-events: none; opacity: 1; }
.lamp:hover { opacity: .6; }
.lamp.on { opacity: 1; transform: scale(1.06); }
.lamp.on[data-lv="0"] { box-shadow: 0 0 0 10px rgba(210, 83, 58, .22), 0 0 44px rgba(210, 83, 58, .5); }
.lamp.on[data-lv="1"] { box-shadow: 0 0 0 10px rgba(235, 168, 63, .24), 0 0 44px rgba(235, 168, 63, .5); }
.lamp.on[data-lv="2"] { box-shadow: 0 0 0 10px rgba(78, 143, 94, .22), 0 0 44px rgba(78, 143, 94, .5); }
.lamp.drop { transform: scale(1.12); opacity: 1; }

.sem-light { grid-column: 1; grid-row: 1; }
.sem-rows { grid-column: 2; grid-row: 1; display: grid; grid-template-rows: 48px repeat(3, minmax(168px, 1fr)); }
.sem-rows::before { content: ''; }
.phrase { grid-column: 2; grid-row: 2; }
.tray { grid-column: 3; grid-row: 1 / span 2; }
.row { padding: 16px 18px; border-radius: 16px; transition: background .35s var(--ease), opacity .3s; display: grid; align-content: center; gap: 8px; cursor: pointer; }
.row header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.word { font-weight: 800; font-size: clamp(40px, 5vw, 60px); line-height: .8; letter-spacing: -.045em; transition: color .3s; color: #858F96; }
.state { font-family: var(--display); font-style: italic; font-size: 19px; color: var(--nota); transition: color .3s; }
.row[data-lv="0"].on .word, .row[data-lv="0"].filled .word { color: var(--t0); }
.row[data-lv="1"].on .word, .row[data-lv="1"].filled .word { color: var(--t1); }
.row[data-lv="2"].on .word, .row[data-lv="2"].filled .word { color: var(--t2); }
.row.on .state, .row.filled .state { color: var(--tinta); }
.row.on[data-lv="0"] { background: rgba(210, 83, 58, .07); } .row.on[data-lv="1"] { background: rgba(235, 168, 63, .1); } .row.on[data-lv="2"] { background: rgba(78, 143, 94, .08); }
.zone { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; margin: 0 -6px; border-radius: 12px; border: 1.5px dashed transparent; transition: border-color .2s, background .2s; }
.zone .zl { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--nota); width: 64px; flex: none; }
.zone .hint { font-size: 13px; color: var(--nota); }
.zone.has .hint { display: none; }
.row:not(.on) .zone:not(.has) .hint { visibility: hidden; }
.zone.over { border-color: var(--azul); background: var(--azul-claro); }
.phrase { display: grid; gap: 4px; margin-top: 18px; padding: 16px 18px; background: var(--azul-claro); border-radius: 16px; }
.phrase span { font-family: var(--display); font-style: italic; font-size: 19px; color: var(--azul); }
.phrase input { border: 0; border-bottom: 1.5px dotted var(--azul); background: transparent; font-family: var(--display); font-size: 22px; color: var(--azul); padding: 6px 0; outline: none; min-width: 0; }
.phrase input::placeholder { color: #9DB6CF; }

/* pegatinas */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 10px; background: #fff; border: 1.3px solid var(--tinta); font-size: 15px; line-height: 1.2; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; box-shadow: 0 1px 0 rgba(29,42,52,.12); transition: transform .35s var(--spring), opacity .2s, box-shadow .2s; }
.chip:hover { transform: translateY(-1px) rotate(-1deg); box-shadow: 0 4px 10px rgba(29,42,52,.12); }
.zone .chip { font-family: var(--display); font-style: italic; font-size: 17px; color: var(--azul); border-color: var(--azul); }
.zone .chip:nth-child(3n) { transform: rotate(-1.2deg); } .zone .chip:nth-child(3n+1) { transform: rotate(.8deg); }
.chip.dragging { opacity: .25; }
.chip .x { display: none; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--tinta); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; margin-right: -6px; }
.chip.sel .x { display: inline-grid; place-items: center; }
.chip.used { opacity: .35; }
.chip.pop { animation: pop .5s var(--spring); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.ghost { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; transform-origin: 30% 50%; box-shadow: 0 14px 30px rgba(29,42,52,.25); }
.ghost.zone-style { font-family: var(--display); font-style: italic; color: var(--azul); border-color: var(--azul); }

/* bandeja */
.tray { display: grid; align-content: start; gap: 12px; padding-top: 48px; }
.tray-tabs { display: flex; gap: 4px; background: var(--papel-2); border-radius: 999px; padding: 4px; }
.tray-tabs button { flex: 1; border: 0; background: none; border-radius: 999px; min-height: 40px; cursor: pointer; font-size: 14px; color: var(--cuerpo); }
.tray-tabs button[aria-selected="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(29,42,52,.12); }
.tray-help { margin: 0; font-size: 13px; color: var(--nota); }
.tray-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tray-own { display: flex; gap: 8px; }
.tray-own input { flex: 1; min-width: 0; min-height: 44px; border: 1.3px dashed var(--nota); border-radius: 10px; padding: 8px 12px; background: transparent; font: inherit; font-size: 15px; }
.tray-own button { width: 44px; border-radius: 10px; border: 0; background: var(--tinta); color: #fff; font-size: 22px; cursor: pointer; }
.done { margin-top: 8px; min-height: 52px; border: 0; border-radius: 999px; background: var(--tinta); color: var(--papel); font-size: 16px; cursor: pointer; transition: transform .3s var(--spring); }
.done:active { transform: scale(.97); }

/* estado final */
.sem-final-actions { display: none; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.sem.final { grid-template-columns: 170px minmax(0, 620px); justify-content: center; }
.sem.final .tray { display: none; }
.sem.final .row { cursor: default; background: none !important; }
.sem.final .zone { border: 0 !important; }
.sem.final .zone:not(.has) { display: none; }
.sem.final .lamp { opacity: 1; transform: none; box-shadow: none; }
.sem.final + .sem-final-actions { display: flex; }

/* móvil: el semáforo se estrecha, la bandeja pasa abajo */
@media (max-width: 860px) {
  .sem { --lamp: 64px; grid-template-columns: 92px minmax(0, 1fr); gap: 0 12px; }
  .sem-pole { height: 24px; }
  .sem-box { width: calc(var(--lamp) + 20px); padding: 14px 0; }
  .lamp::before { border-width: 6px; inset: -9px -6px auto; }
  .sem-rows { grid-template-rows: 24px repeat(3, minmax(150px, auto)); }
  .phrase { grid-column: 1 / -1; }
  .row { padding: 12px 10px; }
  .word { font-size: 38px; }
  .state { font-size: 16px; }
  .zone .zl { width: 100%; }
  .chip { font-size: 14px; min-height: 38px; padding: 7px 11px; }
  .zone .chip { font-size: 15px; }
  .tray { grid-column: 1 / -1; grid-row: 3; position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 15; margin: 16px -12px 0; padding: 12px 12px 10px; gap: 8px; background: var(--papel); border-top: 1px solid var(--linea); box-shadow: 0 -10px 24px rgba(29,42,52,.06); grid-template-columns: minmax(0, 1fr) auto; }
  .tray-tabs, .tray-chips { grid-column: 1 / -1; }
  .tray-help { display: none; }
  .tray-own { grid-column: 1; }
  .done { grid-column: 2; margin: 0; min-height: 44px; padding-inline: 16px; font-size: 14px; }
  body.session .tray { bottom: 0; }
  .tray-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .tray-chips .chip { flex: none; }
  .sem.final { grid-template-columns: 92px minmax(0, 1fr); }
}

/* ---------- móvil: un paso por pantalla ---------- */
.sm { display: none; --c0: #D2533A; --c1: #EBA83F; --c2: #4E8F5E; --t0: #C6492F; --t1: #A86A10; --t2: #3E7A4D; }
@media (max-width: 860px) {
  .sem, .sem-final-actions { display: none !important; }
  .sm { display: block; }
  body.sm-in-step .r-head, body.sm-in-step .r-more, body.sm-in-step .r-bottombar { display: none; }
  body.sm-in-step { padding-bottom: 0; }
}
.sm-over { display: grid; justify-items: center; gap: 14px; padding: 8px 0 24px; }
.sm-big { display: flex; flex-direction: column; align-items: center; }
.sm-pole { width: 14px; height: 30px; background: var(--tinta); }
.sm-box { background: var(--tinta); border-radius: 999px; padding: 14px 12px; display: grid; gap: 14px; }
.sm-lamp { position: relative; width: 88px; height: 88px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; transition: transform .4s var(--spring), opacity .3s; }
.sm-lamp svg { width: 44%; height: 44%; }
.sm-lamp:active { transform: scale(.94); }
.sm-lamp[data-lv="0"] { background: var(--c0); } .sm-lamp[data-lv="1"] { background: var(--c1); } .sm-lamp[data-lv="2"] { background: var(--c2); }
.sm-lamp .n { position: absolute; right: -6px; top: -4px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--tinta); font-size: 13px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.sm-lamp.pulse { animation: smpulse 2.4s ease-in-out infinite; }
@keyframes smpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(210,83,58,.0); } 50% { box-shadow: 0 0 0 12px rgba(210,83,58,.25); } }
.sm-cue { margin: 4px 0 0; font-family: var(--display); font-style: italic; font-size: 19px; color: var(--cuerpo); }
.sm-primary { min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--tinta); color: var(--papel); font-size: 16px; cursor: pointer; }

.sm-step { --lvc: var(--t0); --lvbg: rgba(210,83,58,.07); display: grid; gap: 18px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); animation: smin .35s var(--ease); }
.sm-step[data-lv="1"] { --lvc: var(--t1); --lvbg: rgba(235,168,63,.1); }
.sm-step[data-lv="2"] { --lvc: var(--t2); --lvbg: rgba(78,143,94,.09); }
@keyframes smin { from { opacity: 0; transform: translateX(18px); } }
.sm-ind { position: sticky; top: calc(61px + env(safe-area-inset-top, 0px)); z-index: 12; justify-self: start; display: flex; gap: 8px; align-items: center; padding: 7px 10px; background: var(--tinta); border-radius: 999px; box-shadow: 0 4px 14px rgba(29,42,52,.18); }
.sm-ind button { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; opacity: .32; cursor: pointer; transition: opacity .25s, transform .35s var(--spring); }
.sm-ind button svg { width: 50%; height: 50%; }
.sm-ind button[aria-selected="true"] { opacity: 1; transform: scale(1.12); }
.sm-ind button.has { opacity: .75; }
.sm-ind button[data-lv="0"] { background: var(--c0); } .sm-ind button[data-lv="1"] { background: var(--c1); } .sm-ind button[data-lv="2"] { background: var(--c2); }
.sm-ind .count { color: #C9D3DA; font-family: var(--mono); font-size: 11px; padding: 0 4px 0 2px; }
.sm-h { display: grid; gap: 6px; padding: 18px 16px; margin: 0 -4px; border-radius: 16px; background: var(--lvbg); }
.sm-word { font-weight: 800; font-size: 64px; line-height: .8; letter-spacing: -.045em; color: var(--lvc); }
.sm-state { font-family: var(--display); font-style: italic; font-size: 21px; color: var(--tinta); }
.sm-block h2, .sm-block h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 500; font-size: 22px; }
.sm-help { margin: 0 0 10px; font-size: 14px; color: var(--nota); }
.sm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-chip { min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1.3px solid var(--tinta); background: #fff; font: inherit; font-size: 15px; color: var(--tinta); cursor: pointer; transition: transform .3s var(--spring), background .2s, color .2s; }
.sm-chip:active { transform: scale(.95); }
.sm-chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; font-family: var(--display); font-style: italic; font-size: 16px; }
.sm-chip[aria-pressed="true"]::before { content: '✓ '; font-style: normal; }
.sm-own { display: flex; gap: 8px; margin-top: 10px; }
.sm-own input { flex: 1; min-width: 0; min-height: 44px; border: 1.3px dashed var(--nota); border-radius: 10px; padding: 8px 12px; background: transparent; font: inherit; font-size: 16px; }
.sm-own button { width: 46px; border: 0; border-radius: 10px; background: var(--tinta); color: #fff; font-size: 22px; cursor: pointer; }
.sm-phrase { display: grid; gap: 4px; padding: 16px; background: var(--azul-claro); border-radius: 16px; }
.sm-phrase span { font-family: var(--display); font-style: italic; font-size: 18px; color: var(--azul); }
.sm-phrase input { border: 0; border-bottom: 1.5px dotted var(--azul); background: transparent; font-family: var(--display); font-size: 20px; color: var(--azul); padding: 6px 0; outline: none; min-width: 0; }
.sm-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--papel); border-top: 1px solid var(--linea); }
.sm-prev { width: 56px; min-height: 52px; border: 1.3px solid var(--linea); border-radius: 999px; background: #fff; font-size: 20px; cursor: pointer; }
.sm-next { flex: 1; min-height: 52px; border: 0; border-radius: 999px; background: var(--tinta); color: var(--papel); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.sm-next i { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }

.sm-final { display: grid; justify-items: center; gap: 12px; padding: 4px 0 24px; animation: smin .35s var(--ease); }
.sm-res { width: 100%; display: grid; grid-template-columns: 70px minmax(0, 1fr); column-gap: 14px; }
.sm-res .col { grid-row: 1 / span 3; background: var(--tinta); border-radius: 999px; padding: 14px 0; display: grid; grid-template-rows: repeat(3, 1fr); justify-items: center; align-items: center; }
.sm-res .col i { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.sm-res .col i svg { width: 46%; height: 46%; }
.sm-res .lv { padding: 14px 0; border-bottom: 1px solid var(--linea); min-height: 132px; }
.sm-res .lv:last-of-type { border-bottom: 0; }
.sm-res .w { font-weight: 800; font-size: 34px; line-height: .9; letter-spacing: -.04em; }
.sm-res .l { margin-top: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--nota); }
.sm-res .t { font-family: var(--display); font-style: italic; font-size: 17px; color: var(--azul); line-height: 1.35; }
.sm-res .e { font-size: 14px; color: var(--nota); }
.sm-res-phrase { width: 100%; padding: 14px 16px; background: var(--azul-claro); border-radius: 14px; font-family: var(--display); color: var(--azul); }
.sm-res-phrase span { display: block; font-style: italic; font-size: 15px; }
.sm-res-phrase b { font-weight: 400; font-size: 20px; }
.sm-final-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sm-ftitle { margin: 0; justify-self: start; font-family: var(--display); font-weight: 400; font-size: 34px; }