/* ═══════════════════════════════════════════════════════════════
   ELECTIVA · SESIÓN 4 · Estilos propios de las piezas
   Se carga DESPUÉS de /aprende/motor/motor.css.
   Todo lleva prefijo cc- para no chocar con el motor.
   Vertical primero: pensado para 360 px y crece desde ahí.
   ═══════════════════════════════════════════════════════════════ */

.cc-lienzo { display: grid; gap: 14px; }

/* ── selector de modelos ── */
.cc-modelos { display: flex; flex-wrap: wrap; gap: 7px; }
.cc-modelos button {
  flex: 1 1 auto; min-height: 44px; padding: 9px 12px; border-radius: 10px;
  font-family: var(--mono); font-size: .72em; letter-spacing: .04em;
  border: 1.5px solid var(--neutral); background: transparent; color: var(--surface-deep); cursor: pointer;
}
.cc-modelos button.activo { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ── mapa ── */
.cc-mapa { position: relative; width: 100%; }
.cc-mapa canvas { display: block; width: 100%; height: auto; border-radius: 8px; touch-action: manipulation; }
.cc-cargando {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .75em; color: var(--surface-deep); background: rgba(251,249,241,.94);
  min-height: 220px; border-radius: 8px; text-align: center; padding: 16px;
}
.cc-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--mono); font-size: .66em; color: var(--surface-deep); }
.cc-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.cc-leyenda i.cc-raya { width: 14px; height: 3px; border-radius: 1px; background: var(--ink); vertical-align: 3px; }
.cc-leyenda .cc-sim { flex-basis: 100%; font-style: italic; color: var(--accent); }

/* ── controles ── */
.cc-control label {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 2px;
  font-family: var(--mono); font-size: .68em; letter-spacing: .06em; text-transform: uppercase; color: var(--surface-deep);
}
.cc-control label em { font-style: normal; font-weight: 600; color: var(--accent); text-transform: none; }
.cc-control input[type=range] { width: 100%; height: 34px; margin: 0; accent-color: var(--accent); }
.cc-perillas { display: grid; gap: 6px; }
.cc-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-control select {
  width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 10px; font-family: var(--body); font-size: .85em;
  border: 1.5px solid var(--neutral); background: var(--surface); color: var(--ink);
}
.cc-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-botones button, .cc-play, .cc-reintentar {
  flex: 1 1 auto; min-height: 44px; padding: 9px 14px; border-radius: 10px; cursor: pointer;
  font-family: var(--mono); font-size: .7em; letter-spacing: .06em;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
}
.cc-botones button.activo { background: var(--ink); color: var(--surface); }
.cc-play { background: var(--accent); border-color: var(--accent); color: #F4F0E2; justify-self: start; }
.cc-play:disabled { opacity: .55; cursor: default; }
.cc-reintentar { justify-self: start; margin-top: 4px; }
.cc-nota { font-size: .9em; color: var(--surface-deep); margin: 0; }

/* ── medidas ── */
.cc-medidas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-medidas > div { background: var(--surface); border-radius: 12px; padding: 11px 12px; }
.cc-medidas span { display: block; font-family: var(--mono); font-size: .6em; letter-spacing: .07em; text-transform: uppercase; color: var(--surface-deep); line-height: 1.35; }
.cc-medidas b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.55em; line-height: 1.1; margin-top: 4px; }

/* ── la unidad real ── */
.cc-uci { border: 1.5px solid var(--ink); border-radius: 12px; padding: 12px; }
.cc-uci-t { display: block; font-family: var(--mono); font-size: .6em; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.cc-uci-f { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.cc-uci-f b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.35em; line-height: 1.1; }
.cc-uci-f small { display: block; font-size: .68em; color: var(--surface-deep); line-height: 1.3; margin-top: 3px; }

/* ── barras de comparación (crecen al aparecer) ── */
.cc-comparar { display: grid; gap: 7px; padding-top: 6px; border-top: 1px solid rgba(3,25,30,.12); }
.cc-comp-t { font-family: var(--mono); font-size: .62em; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.cc-barra { display: grid; grid-template-columns: 8.5em 1fr 2.6em; align-items: center; gap: 8px; font-size: .8em; }
.cc-barra > div { height: 14px; background: rgba(3,25,30,.07); border-radius: 7px; overflow: hidden; }
.cc-barra i { display: block; height: 100%; background: var(--neutral); border-radius: 7px; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.cc-barra i.max, .cc-barra i.apr { background: var(--accent); }
.cc-barra b { font-family: var(--display); text-align: right; }

/* ── hambre de datos ── */
.cc-hambre { display: grid; gap: 14px; }
.cc-h-fila { display: grid; gap: 6px; }
.cc-h-fila > b { font-family: var(--display); font-weight: 600; font-size: .95em; }

/* ── apuesta ── */
.cc-pregunta { font-family: var(--display); font-weight: 600; font-size: 1.12em; line-height: 1.3; margin: 0 0 12px; }
.cc-opciones { display: grid; gap: 8px; }
.cc-opcion {
  min-height: 52px; padding: 12px 16px; text-align: left; border-radius: 12px; cursor: pointer;
  font-family: var(--body); font-size: .95em; border: 1.5px solid var(--ink); background: var(--papel); color: var(--ink);
  transition: background .2s, opacity .2s;
}
.cc-opcion.elegida { background: var(--accent); color: #F4F0E2; border-color: var(--accent); }
.cc-opcion.apagada { opacity: .38; }

/* ── cronómetro ── */
.cc-crono { width: 100%; height: auto; display: block; margin: 4px 0; }

/* ── embudo de Son Llàtzer ── */
.cc-grande { text-align: center; }
.cc-grande b { display: block; font-family: var(--display); font-weight: 700; font-size: 2.3em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.cc-grande span { font-family: var(--mono); font-size: .66em; letter-spacing: .08em; text-transform: uppercase; color: var(--surface-deep); }
.cc-embudo { display: grid; justify-items: center; gap: 4px; }
.cc-e-caja { text-align: center; border: 1.5px solid var(--ink); border-radius: 12px; padding: 10px 14px; background: var(--papel); }
.cc-e-a { width: 100%; }
.cc-e-b { width: 42%; min-width: 160px; background: var(--ink); color: var(--surface); }
.cc-e-caja b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.6em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cc-e-caja span { font-size: .72em; }
.cc-e-flecha { color: var(--accent); font-size: .9em; }
.cc-texto-libre > span { display: block; font-family: var(--mono); font-size: .62em; letter-spacing: .07em; text-transform: uppercase; color: var(--surface-deep); margin-bottom: 6px; }
.cc-tl-barra { height: 16px; border-radius: 8px; background: rgba(3,25,30,.1); overflow: hidden; }
.cc-tl-barra i { display: block; height: 100%; background: var(--accent); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.cc-tl-rot { display: flex; justify-content: space-between; gap: 8px; font-size: .7em; color: var(--surface-deep); margin-top: 4px; }
.cc-reloj-b { display: flex; align-items: center; gap: 10px; font-size: .85em; }
.cc-pulso { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
.cc-vivo .cc-pulso { animation: ccPulso 2s ease-out infinite; }
@keyframes ccPulso { 0% { box-shadow: 0 0 0 0 rgba(139,69,20,.55); } 80% { box-shadow: 0 0 0 12px rgba(139,69,20,0); } 100% { box-shadow: 0 0 0 0 rgba(139,69,20,0); } }

/* ── revisión de los modelos del grupo ── */
.cc-rev { border-bottom: 1px solid rgba(3,25,30,.1); padding: 10px 0; }
.cc-rev p { margin: 0 0 8px; font-size: .92em; display: flex; gap: 10px; }
.cc-rev p b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--surface);
  font-family: var(--mono); font-size: .75em; display: flex; align-items: center; justify-content: center; }
.cc-tri { display: flex; gap: 6px; padding-left: 34px; }
.cc-tri button { flex: 1; min-height: 42px; border-radius: 9px; border: 1.5px solid var(--neutral); background: transparent;
  font-family: var(--mono); font-size: .68em; cursor: pointer; color: var(--ink); }
.cc-tri button.r-si { background: #2F9E5E; border-color: #2F9E5E; color: #fff; }
.cc-tri button.r-no { background: #A8482F; border-color: #A8482F; color: #fff; }
.cc-tri button.r-ns { background: var(--neutral); border-color: var(--neutral); }

/* ── la apuesta revelada ── */
.cc-marcador { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.cc-marcador > div { background: var(--surface); border-radius: 12px; padding: 10px 6px; }
.cc-marcador span { display: block; font-size: .66em; color: var(--surface-deep); line-height: 1.3; }
.cc-marcador b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.9em; line-height: 1.1; }
.cc-lista-r { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-lista-r span { font-family: var(--mono); font-size: .66em; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--neutral); animation: ccEntra .35s ease-out; }
.cc-lista-r .g-l { border-color: var(--ink); }
.cc-lista-r .g-b { border-color: var(--accent); color: var(--accent); }
@keyframes ccEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── referencias ── */
.cc-refs details { border-bottom: 1px solid rgba(3,25,30,.12); padding: 4px 0; }
.cc-refs summary { cursor: pointer; list-style: none; padding: 12px 0; font-family: var(--display); font-weight: 600; font-size: 1em;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cc-refs summary::-webkit-details-marker { display: none; }
.cc-refs summary small { font-family: var(--mono); font-size: .62em; font-weight: 400; color: var(--accent); white-space: nowrap; }
.cc-ref { padding: 0 0 12px; font-size: .86em; }
.cc-ref span { display: block; }
.cc-ref small { display: block; color: var(--surface-deep); margin-top: 3px; font-size: .92em; }
.cc-ref a { word-break: break-all; }

@media (min-width: 821px) {
  .cc-medidas { grid-template-columns: 1fr 1fr; }
  .cc-opciones { grid-template-columns: repeat(3, 1fr); }
  .cc-opcion { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-barra i, .cc-tl-barra i { transition: none; }
  .cc-vivo .cc-pulso, .cc-lista-r span { animation: none; }
}

/* ── piezas del lactato ── */
.cc-sin-borde { border-top: 0; padding-top: 0; }
.cc-lista { display: grid; gap: 10px; }
.cc-barra i.sucio { background: var(--surface-deep); }
.cc-barra.cc-no > div { background: transparent; height: auto; overflow: visible; }
.cc-barra.cc-no em { font-size: .82em; color: var(--surface-deep); opacity: .75; }
.cc-cuatro { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-cuatro button { font-size: .66em; line-height: 1.3; }
.cc-ejemplos { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-ejemplos span { font-size: .78em; padding: 6px 10px; border-radius: 8px; background: var(--surface); border: 1px dashed var(--neutral); }
.cc-ejemplos b { font-family: var(--mono); color: var(--accent); }
@media (min-width: 821px) { .cc-cuatro { grid-template-columns: repeat(4, 1fr); } }